layout/reftests/text-overflow/two-value-syntax.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 .t1 { text-overflow:ellipsis ellipsis; }
  41 .t2 { text-overflow:ellipsis clip; }
  42 .t3 { text-overflow:clip ellipsis; }
  43 .t4 { text-overflow:clip "."; }
  44 .t5 { text-overflow:"." clip; }
  45 .t6 { text-overflow:"." ","; }
  46 .t7 { text-overflow:ellipsis ","; }
  47 .t8 { text-overflow:"." ellipsis; }
  48
  49 </style>
  50
  51 </head><body>
  52
  53 <div style="float:left;">
  54 |||||
  55 <div class="test t1"><span>||||||</span></div>
  56 <div class="test rtl t1"><span>||||||</span></div>
  57 <div class="test t2"><span>||||||</span></div>
  58 <div class="test rtl t2"><span>||||||</span></div>
  59 <div class="test t3"><span>||||||</span></div>
  60 <div class="test rtl t3"><span>||||||</span></div>
  61 <div class="test t4"><span>||||||</span></div>
  62 <div class="test rtl t4"><span>||||||</span></div>
  63 <div class="test t5"><span>||||||</span></div>
  64 <div class="test rtl t5"><span>||||||</span></div>
  65 <div class="test t6"><span>||||||</span></div>
  66 <div class="test rtl t6"><span>||||||</span></div>
  67 <div class="test t7"><span>||||||</span></div>
  68 <div class="test rtl t7"><span>||||||</span></div>
  69 <div class="test t8"><span>||||||</span></div>
  70 <div class="test rtl t8"><span>||||||</span></div>
  71 </div>
  72
  73
  74 </body>
  75 </html>