layout/reftests/text-overflow/two-value-syntax-ref.html

   1 <!DOCTYPE HTML>
   2 <!--
   3     Any copyright is dedicated to the Public Domain.
   4     http://creativecommons.org/licenses/publicdomain/
   5
   6     Test: text-overflow:<left> <right>
   7 -->
   8 <html><head>
   9 <title>text-overflow: text-overflow:&lt;left&gt; &lt;right&gt;</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   overflow:hidden;
  21   width:100%;
  22   white-space:nowrap;
  23 }
  24 span {
  25   margin: 0 -2px;
  26 }
  27 .rlo {
  28   unicode-bidi: bidi-override; direction:rtl;
  29 }
  30 .lro {
  31   unicode-bidi: bidi-override;
  32 }
  33 .rtl {
  34   direction:rtl;
  35 }
  36 .ltr {
  37   direction:ltr;
  38 }
  39
  40 </style>
  41
  42 </head><body>
  43
  44 <div style="float:left;">
  45 |||||
  46 <div class="test t1"><span>&nbsp;&#x2026;||&#x2026;</span></div>
  47 <div class="test rtl t1"><span>&nbsp;&#x2026;||&#x2026;</span></div>
  48 <div class="test t2"><span>&nbsp;&#x2026;||||</span></div>
  49 <div class="test rtl t2"><span>||||&#x2026;</span></div>
  50 <div class="test t3"><span>||||&#x2026;</span></div>
  51 <div class="test rtl t3"><span>&nbsp;&#x2026;||||</span></div>
  52 <div class="test t4"><span>||||.</span></div>
  53 <div class="test rtl t4"><span>&nbsp;.||||</span></div>
  54 <div class="test t5"><span>&nbsp;.||||</span></div>
  55 <div class="test rtl t5"><span>||||.</span></div>
  56 <div class="test t6"><span>&nbsp;.||,</span></div>
  57 <div class="test rtl t6"><span>&nbsp;,||.</span></div>
  58 <div class="test t7"><span>&nbsp;&#x2026;||,</span></div>
  59 <div class="test rtl t7"><span>&nbsp;,||&#x2026;</span></div>
  60 <div class="test t8"><span>&nbsp;.||&#x2026;</span></div>
  61 <div class="test rtl t8"><span>&nbsp;&#x2026;||.</span></div>
  62 </div>
  63
  64
  65 </body>
  66 </html>