third_party/WebKit/LayoutTests/fast/css/text-overflow-ellipsis-text-align-justify.html

   1 <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=utf8">
   2 <head>
   3 <style>
   4 .testDiv {
   5     width: 308px;
   6     border: 1px solid black;
   7     white-space: nowrap;
   8     overflow: hidden;
   9     margin: 0 0 20px 0;
  10     text-align: justify;
  11     text-overflow: ellipsis;
  12 }
  13
  14 .rtl {
  15     direction: rtl;
  16     unicode-bidi: bidi-override;
  17 }
  18 </style>
  19 </head>
  20 <body>
  21
  22 <p>This test checks that text with text-overflow:ellipsis follows 'text-align: justify' correctly.</p>
  23
  24 <p>LTR text should be aligned with the left hand side of their box. RTL text should be aligned with the right hand side of their box.</p>
  25
  26 <h3>Single line</h3>
  27 <div class="testDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  28
  29 <h3>Multi line</h3>
  30 <div class="testDiv">
  31         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
  32         orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
  33     rem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
  34         em ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
  35 </div>
  36
  37 <h3>Containing replaced content</h3>
  38 <div class="testDiv">Lorem ipsum dolor sit amet, <img src="resources/greenbox.png"> consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  39
  40
  41 <h3>Containing replaced content blocking the ellipsis</h3>
  42 <div class="testDiv">Lorem ipsum dolor sit amet, consectetur ad<img src="resources/greenbox.png">ipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  43
  44
  45 <h3>Right-To-Left single line</h3>
  46 <div class="testDiv rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  47
  48
  49 <h3>Right-To-Left Multi line</h3>
  50 <div class="testDiv rtl">
  51         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
  52         orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
  53     rem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
  54         em ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
  55 </div>
  56
  57
  58 <h3>Right-To-Left containing replaced content</h3>
  59 <div class="testDiv rtl">Lorem ipsum dolor sit amet, <img src="resources/greenbox.png"> consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  60
  61 <h3>Right-To-Left containing replaced content blocking the ellipsis</h3>
  62 <div class="testDiv rtl">Lorem ipsum dolor sit amet, consectetur ad<img src="resources/greenbox.png">ipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  63
  64 </body>
  65 </html>