ellipsis-font-fallback-ref.html (5375B)
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"> <m>...</m>X<m>...</m> </span></div></div></div> 118 <div id="test1b"><div class="s rtl"><div class="p o"><span class="c lro"> <m>...</m>X<m>...</m> </span></div></div></div> 119 <div id="test1c"><div class="s ltr"><div class="p o"><span class="c rlo"> <m>...</m>X<m>...</m> </span></div></div></div> 120 <div id="test1d"><div class="s rtl"><div class="p o"><span class="c rlo"> <m>...</m>X<m>...</m> </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> </span></div></div></div> 124 <div id="test2b"><div class="s2 rtl"><div class="p o"><span class="lro"> <m>...</m>XXXXX</span></div></div></div> 125 <div id="test2c"><div class="s2 ltr"><div class="p o"><span class="rlo"> <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> </span></div></div></div> 127 128 <!-- start marker --> 129 <div id="test3a"><div class="s3 ltr"><div class="p o"><span class="c lro"> 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 </span></div></div></div> 131 <div id="test3c"><div class="s3 ltr"><div class="p o"><span class="c rlo"><m>...</m>X </span></div></div></div> 132 <div id="test3d"><div class="s3 rtl"><div class="p o"><span class="c rlo"> 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>