third_party/WebKit/LayoutTests/fast/css/text-overflow-ellipsis-block-with-border-and-padding.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <style>
   6 .testDiv {
   7     width: 308px;
   8     border: 5px solid green;
   9     padding: 0px 5px 0px 20px;
  10     white-space: nowrap;
  11     overflow: hidden;
  12     margin: 0 0 20px 0;
  13     text-overflow: ellipsis;
  14 }
  15
  16 .rtl {
  17     direction: rtl;
  18     unicode-bidi: bidi-override;
  19 }
  20
  21 .leftAlign { text-align: left; }
  22 .rightAlign { text-align: right; }
  23 .centerAlign { text-align: center; }
  24 .justifyAlign { text-align: justify; }
  25 </style>
  26 </head>
  27 <body>
  28 <div class="testDiv leftAlign">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  29 <div class="testDiv leftAlign rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  30
  31 <div class="testDiv rightAlign">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  32 <div class="testDiv rightAlign rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  33
  34 <div class="testDiv centerAlign">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  35 <div class="testDiv centerAlign rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  36
  37 <div class="testDiv justifyAlign">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  38 <div class="testDiv justifyAlign rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  39 </body>
  40 </html>