layout/reftests/text-overflow/visibility-hidden.html

   1 <!DOCTYPE HTML>
   2 <!--
   3     Any copyright is dedicated to the Public Domain.
   4     http://creativecommons.org/licenses/publicdomain/
   5
   6     Test: visibility:hidden should not trigger text-overflow markers
   7 -->
   8 <html><head>
   9 <title>text-overflow: visibility:hidden</title>
  10 <style type="text/css">
  11 @font-face {
  12   font-family: DejaVuSansMono;
  13   src: url(../fonts/DejaVuSansMono.woff);
  14 }
  15 html,body {
  16     color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
  17 }
  18
  19 .test {
  20   text-overflow:ellipsis;
  21   overflow: hidden;
  22   white-space: nowrap;
  23   background:lime;
  24   color: black;
  25   width: 50%;
  26 }
  27
  28 .rtl {
  29   direction:rtl;
  30 }
  31 .rlo {
  32   unicode-bidi: bidi-override; direction: rtl;
  33 }
  34 u {
  35   visibility:hidden;
  36   padding-left: 3em;
  37   background: cyan;
  38 }
  39 .rtl u {padding-right: 3em; padding-left:0;}
  40 s {
  41   visibility:visible;
  42 }
  43
  44 .t1 {width:10em;}
  45 .t2 {width:14em;}
  46 .t3 {width:13.5em;}
  47 .t3 u { padding-right:1em; }
  48 .t3.rtl u {padding-left:1em; padding-right: 3em; }
  49 .t4 {width:12.5em;}
  50 </style>
  51
  52 </head><body>
  53
  54 <div class="test t2">
  55 CSS is awesome<u></u><br>
  56 CSS is awesome<u>&nbsp;<s>x</s>&nbsp;&nbsp;&nbsp;</u>
  57 </div>
  58 <div class="test t1">CSS is awesome<u></u><br></div>
  59 <div class="test t2">CSS is awesome<u>&nbsp;<s>x</s>&nbsp;&nbsp;&nbsp;</u></div>
  60 <div class="test t3">CSS is awesome<u>&nbsp;<s>x</s></u></div>
  61 <div class="test t4">CSS is awesome<u>&nbsp;<s>x</s></u></div>
  62
  63 <div class="rtl">
  64 <div class="test rtl rlo t2">
  65 CSS is awesome<u></u><br>
  66 CSS is awesome<u>&nbsp;<s>x</s></u>
  67 </div>
  68 <div class="test rtl rlo t1">CSS is awesome<u></u><br></div>
  69 <div class="test rtl rlo t2">CSS is awesome<u>&nbsp;<s>x</s>&nbsp;&nbsp;&nbsp;</u></div>
  70 <div class="test rtl rlo t3">CSS is awesome<u>&nbsp;<s>x</s></u></div>
  71 <div class="test rtl rlo t4">CSS is awesome<u>&nbsp;<s>x</s></u></div>
  72 </div>
  73
  74 </body></html>