layout/reftests/text-overflow/aligned-baseline.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>Testcase for bug 668919</title>
   5
   6 <style>
   7 .tab-title {
   8   overflow:hidden;
   9   text-overflow: ellipsis;
  10   white-space: nowrap;
  11   width: 5em;
  12   height:25px;
  13 }
  14
  15 .c1 { font-size: 14px; }
  16 .c2 { font-size: 15px; }
  17 .c3 { font-size: 16px; }
  18 .c4 { font-size: 17px; }
  19 .c5 { font-size: 18px; }
  20 .c6 { font-size: 19px; }
  21 .c7 { font-size: 20px; }
  22 .c8 { font-size: 24px; }
  23 .c9 { font-size: 28px; }
  24 .c10 { font-size: 32px; }
  25 .c11 { font-size: 36px; }
  26
  27 .p0  { padding-top:0; }
  28 .p1  { padding-top:0.1px; }
  29 .p2  { padding-top:0.2px; }
  30
  31 .col2 .tab-title { text-shadow: 1px 1px 1px blue; }
  32 </style>
  33     </head>
  34 <body>
  35
  36 <div style="position:absolute; top: 0px;">
  37 <div class="tab-title c1 p0">CSS is awesome</div>
  38 <div class="tab-title c1 p2">CSS is awesome</div>
  39 <div class="tab-title c1 p3">CSS is awesome</div>
  40 </div>
  41
  42 <div style="position:absolute; top: 100px;">
  43 <div class="tab-title c2 p0">CSS is awesome</div>
  44 <div class="tab-title c2 p2">CSS is awesome</div>
  45 <div class="tab-title c2 p3">CSS is awesome</div>
  46 </div>
  47
  48 <div style="position:absolute; top: 200px;">
  49 <div class="tab-title c3 p0">CSS is awesome</div>
  50 <div class="tab-title c3 p2">CSS is awesome</div>
  51 <div class="tab-title c3 p3">CSS is awesome</div>
  52 </div>
  53
  54 <div style="position:absolute; top: 300px;">
  55 <div class="tab-title c4 p0">CSS is awesome</div>
  56 <div class="tab-title c4 p2">CSS is awesome</div>
  57 <div class="tab-title c4 p3">CSS is awesome</div>
  58 </div>
  59
  60 <div style="position:absolute; top: 400px;">
  61 <div class="tab-title c5 p0">CSS is awesome</div>
  62 <div class="tab-title c5 p2">CSS is awesome</div>
  63 <div class="tab-title c5 p3">CSS is awesome</div>
  64 </div>
  65
  66 <div class="col2" style="position:absolute; top: 0px; left:8em;">
  67 <div style="position:absolute; top: 0px;">
  68 <div class="tab-title c1 p0">CSS is awesome</div>
  69 <div class="tab-title c1 p2">CSS is awesome</div>
  70 <div class="tab-title c1 p3">CSS is awesome</div>
  71 </div>
  72
  73 <div style="position:absolute; top: 100px;">
  74 <div class="tab-title c2 p0">CSS is awesome</div>
  75 <div class="tab-title c2 p2">CSS is awesome</div>
  76 <div class="tab-title c2 p3">CSS is awesome</div>
  77 </div>
  78
  79 <div style="position:absolute; top: 200px;">
  80 <div class="tab-title c3 p0">CSS is awesome</div>
  81 <div class="tab-title c3 p2">CSS is awesome</div>
  82 <div class="tab-title c3 p3">CSS is awesome</div>
  83 </div>
  84
  85 <div style="position:absolute; top: 300px;">
  86 <div class="tab-title c4 p0">CSS is awesome</div>
  87 <div class="tab-title c4 p2">CSS is awesome</div>
  88 <div class="tab-title c4 p3">CSS is awesome</div>
  89 </div>
  90
  91 <div style="position:absolute; top: 400px;">
  92 <div class="tab-title c5 p0">CSS is awesome</div>
  93 <div class="tab-title c5 p2">CSS is awesome</div>
  94 <div class="tab-title c5 p3">CSS is awesome</div>
  95 </div>
  96 </div>
  97
  98
  99 </body>
 100 </html>