layout/reftests/text-overflow/marker-string.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:<string>
   7 -->
   8 <html><head>
   9 <title>text-overflow: text-overflow:&lt;string&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:20ch;
  22   height:3em;
  23   white-space:nowrap;
  24   margin-left:2em;
  25   position:relative;
  26 }
  27 span {
  28   margin: 0 -0.5ch;
  29 }
  30 s {
  31   margin: 0 -0.5ch;
  32   padding: 0 11ch;
  33 }
  34 .rlo {
  35   unicode-bidi: bidi-override; direction:rtl;
  36 }
  37 .lro {
  38   unicode-bidi: bidi-override;
  39 }
  40 .rtl {
  41   direction:rtl;
  42 }
  43 .ltr {
  44   direction:ltr;
  45 }
  46
  47 .t1 { text-overflow:"" ""; }
  48 .t2 { text-overflow:"Hello World" "Hello World"; }
  49 .t3 { text-overflow:"X" "X"; }
  50
  51 </style>
  52
  53 </head><body>
  54
  55
  56 <!-- Empty marker clips text -->
  57 <div class="test t1"><span>xx</span></div>
  58 <div class="test rtl t1"><span>xx</span></div>
  59 <!-- big marker clips all text -->
  60 <div class="test t2"><span>xx</span></div>
  61 <div class="test rtl t2"><span>xx</span></div>
  62
  63 <!-- start marker that doesn't fit -->
  64 <div class="test t2" style="width:3ch"><span>xx</span></div>
  65 <div class="test rtl t2" style="width:3ch"><span>xx</span></div>
  66
  67 <!-- start + end marker, nothing to align to -->
  68 <div class="test t3"><s></s></div>
  69 <div class="test rtl t3"><s></s></div>
  70
  71
  72 </body>
  73 </html>