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

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