layout/reftests/text-overflow/ellipsis-font-fallback-ref.html

   1 <!DOCTYPE HTML>
   2 <!--
   3     Any copyright is dedicated to the Public Domain.
   4     http://creativecommons.org/licenses/publicdomain/
   5
   6     Test: fallback to three ASCII periods when ellipsis is unavailable in the font
   7 -->
   8 <html><head>
   9     <title>text-overflow: ellipsis fallback</title>
  10     <style type="text/css">
  11 @font-face {
  12   /* This font has glyphs for ASCII period, upper-case X and space. */
  13   font-family: TestEllipsisFallback;
  14   src: url(TestEllipsisFallback.woff);
  15 }
  16 html,body {
  17     color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family: TestEllipsisFallback;
  18 }
  19
  20 .rtl {
  21   direction:rtl;
  22 }
  23 .ltr {
  24   direction:ltr;
  25 }
  26 .rlo {
  27   unicode-bidi: bidi-override; direction: rtl;
  28 }
  29 .lro {
  30   unicode-bidi: bidi-override; direction: ltr;
  31 }
  32
  33 m {
  34   color:blue;
  35 }
  36 .o span {
  37   color:black;
  38 }
  39
  40 .s {
  41   width:10em;
  42 }
  43 .s2 {
  44   width:10em;
  45 }
  46 .s3 {
  47   width:6em;
  48 }
  49 .s4 {
  50   width:8em;
  51 }
  52 .s5 {
  53   width:5em;
  54 }
  55 .s6 {
  56   width:1em;
  57 }
  58 .s7 {
  59   width:6em;
  60 }
  61 .p {
  62   overflow: hidden;
  63   white-space:nowrap;
  64 }
  65 .r {
  66   text-align:right;
  67 }
  68
  69 .c {
  70   margin-left:-0.5em;
  71   margin-right:-0.5em;
  72 }
  73
  74
  75 #test1a  { top:0em;     left:0; position:absolute; }
  76 #test1b  { top:2em;     left:0; position:absolute; }
  77 #test1c  { top:4em;     left:0; position:absolute; }
  78 #test1d  { top:6em;     left:0; position:absolute; }
  79
  80 #test2a  { top:0em;     left:15em; position:absolute; }
  81 #test2b  { top:2em;     left:15em; position:absolute; }
  82 #test2c  { top:4em;     left:15em; position:absolute; }
  83 #test2d  { top:6em;     left:15em; position:absolute; }
  84
  85 #test3a  { top: 8em;     left:0; position:absolute; }
  86 #test3b  { top:10em;     left:0; position:absolute; }
  87 #test3c  { top:12em;     left:0; position:absolute; }
  88 #test3d  { top:14em;     left:0; position:absolute; }
  89
  90 #test4a  { top: 8em;     left:15em; position:absolute; }
  91 #test4b  { top:10em;     left:15em; position:absolute; }
  92 #test4c  { top:12em;     left:15em; position:absolute; }
  93 #test4d  { top:14em;     left:15em; position:absolute; }
  94
  95 #test5a  { top:16em;     left:0; position:absolute; }
  96 #test5b  { top:18em;     left:0; position:absolute; }
  97 #test5c  { top:20em;     left:0; position:absolute; }
  98 #test5d  { top:22em;     left:0; position:absolute; }
  99
 100 #test6a  { top:16em;     left:15em; position:absolute; }
 101 #test6b  { top:18em;     left:15em; position:absolute; }
 102 #test6c  { top:20em;     left:15em; position:absolute; }
 103 #test6d  { top:22em;     left:15em; position:absolute; }
 104
 105 #test7a  { top:24em;     left:0; position:absolute; }
 106 #test7b  { top:26em;     left:0; position:absolute; }
 107 #test7c  { top:28em;     left:0; position:absolute; }
 108 #test7d  { top:30em;     left:0; position:absolute; }
 109
 110
 111     </style>
 112 </head>
 113 <body>
 114 <div style="position: absolute; top:20px; left:50px;">
 115
 116 <!-- start + end marker -->
 117 <div id="test1a"><div class="s ltr"><div class="p o"><span class="c lro">&nbsp;<m>...</m>X<m>...</m>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div></div></div>
 118 <div id="test1b"><div class="s rtl"><div class="p o"><span class="c lro">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<m>...</m>X<m>...</m>&nbsp;</span></div></div></div>
 119 <div id="test1c"><div class="s ltr"><div class="p o"><span class="c rlo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<m>...</m>X<m>...</m>&nbsp;</span></div></div></div>
 120 <div id="test1d"><div class="s rtl"><div class="p o"><span class="c rlo">&nbsp;<m>...</m>X<m>...</m>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div></div></div>
 121
 122 <!-- end marker -->
 123 <div id="test2a"><div class="s2 ltr"><div class="p o"><span class="lro">XXXXX<m>...</m>&nbsp;</span></div></div></div>
 124 <div id="test2b"><div class="s2 rtl"><div class="p o"><span class="lro">&nbsp;<m>...</m>XXXXX</span></div></div></div>
 125 <div id="test2c"><div class="s2 ltr"><div class="p o"><span class="rlo">&nbsp;<m>...</m>XXXXX</span></div></div></div>
 126 <div id="test2d"><div class="s2 rtl"><div class="p o"><span class="rlo">XXXXX<m>...</m>&nbsp;</span></div></div></div>
 127
 128 <!-- start marker -->
 129 <div id="test3a"><div class="s3 ltr"><div class="p o"><span class="c lro">&nbsp;X<m>...</m></span></div></div></div>
 130 <div id="test3b"><div class="s3 rtl"><div class="p o"><span class="c lro"><m>...</m>X&nbsp;</span></div></div></div>
 131 <div id="test3c"><div class="s3 ltr"><div class="p o"><span class="c rlo"><m>...</m>X&nbsp;</span></div></div></div>
 132 <div id="test3d"><div class="s3 rtl"><div class="p o"><span class="c rlo">&nbsp;X<m>...</m></span></div></div></div>
 133
 134 <!-- start + end marker, no characters fit, marker is clipped -->
 135 <div id="test6a"><div class="s6 ltr"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
 136 <div id="test6b"><div class="s6 rtl"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
 137 <div id="test6c"><div class="s6 ltr"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>
 138 <div id="test6d"><div class="s6 rtl"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>
 139
 140 <!-- start marker, all characters overlapped by marker -->
 141 <div id="test7a"><div class="s7 ltr"><div class="p o"><span class="c lro">XXX</span></div></div></div>
 142 <div id="test7b"><div class="s7 rtl"><div class="p o"><span class="c lro">XXX</span></div></div></div>
 143 <div id="test7c"><div class="s7 ltr"><div class="p o"><span class="c rlo">XXX</span></div></div></div>
 144 <div id="test7d"><div class="s7 rtl"><div class="p o"><span class="c rlo">XXX</span></div></div></div>
 145
 146 </div>
 147
 148 </body>
 149 </html>