ellipsis-font-fallback.html (5152B)
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 .o { 34 text-overflow: ellipsis ellipsis; 35 color:blue; 36 } 37 .o span { 38 color:black; 39 } 40 41 .s { 42 width:10em; 43 } 44 .s2 { 45 width:10em; 46 } 47 .s3 { 48 width:6em; 49 } 50 .s4 { 51 width:8em; 52 } 53 .s5 { 54 width:5em; 55 } 56 .s6 { 57 width:1em; 58 } 59 .s7 { 60 width:6em; 61 } 62 .p { 63 overflow: hidden; 64 white-space:nowrap; 65 } 66 .r { 67 text-align:right; 68 } 69 70 .c { 71 margin-left:-0.5em; 72 margin-right:-0.5em; 73 } 74 75 76 #test1a { top:0em; left:0; position:absolute; } 77 #test1b { top:2em; left:0; position:absolute; } 78 #test1c { top:4em; left:0; position:absolute; } 79 #test1d { top:6em; left:0; position:absolute; } 80 81 #test2a { top:0em; left:15em; position:absolute; } 82 #test2b { top:2em; left:15em; position:absolute; } 83 #test2c { top:4em; left:15em; position:absolute; } 84 #test2d { top:6em; left:15em; position:absolute; } 85 86 #test3a { top: 8em; left:0; position:absolute; } 87 #test3b { top:10em; left:0; position:absolute; } 88 #test3c { top:12em; left:0; position:absolute; } 89 #test3d { top:14em; left:0; position:absolute; } 90 91 #test4a { top: 8em; left:15em; position:absolute; } 92 #test4b { top:10em; left:15em; position:absolute; } 93 #test4c { top:12em; left:15em; position:absolute; } 94 #test4d { top:14em; left:15em; position:absolute; } 95 96 #test5a { top:16em; left:0; position:absolute; } 97 #test5b { top:18em; left:0; position:absolute; } 98 #test5c { top:20em; left:0; position:absolute; } 99 #test5d { top:22em; left:0; position:absolute; } 100 101 #test6a { top:16em; left:15em; position:absolute; } 102 #test6b { top:18em; left:15em; position:absolute; } 103 #test6c { top:20em; left:15em; position:absolute; } 104 #test6d { top:22em; left:15em; position:absolute; } 105 106 #test7a { top:24em; left:0; position:absolute; } 107 #test7b { top:26em; left:0; position:absolute; } 108 #test7c { top:28em; left:0; position:absolute; } 109 #test7d { top:30em; left:0; position:absolute; } 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">XXXXXXXXXXXX</span></div></div></div> 118 <div id="test1b"><div class="s rtl"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div> 119 <div id="test1c"><div class="s ltr"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div> 120 <div id="test1d"><div class="s rtl"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div> 121 122 <!-- end marker --> 123 <div id="test2a"><div class="s2 ltr"><div class="p o"><span class="lro">XXXXXXXXXXXX</span></div></div></div> 124 <div id="test2b"><div class="s2 rtl"><div class="p o"><span class="lro">XXXXXXXXXXXX</span></div></div></div> 125 <div id="test2c"><div class="s2 ltr"><div class="p o"><span class="rlo">XXXXXXXXXXXX</span></div></div></div> 126 <div id="test2d"><div class="s2 rtl"><div class="p o"><span class="rlo">XXXXXXXXXXXX</span></div></div></div> 127 128 <!-- start marker --> 129 <div id="test3a"><div class="s3 ltr"><div class="p o"><span class="c lro">XXXXXX</span></div></div></div> 130 <div id="test3b"><div class="s3 rtl"><div class="p o"><span class="c lro">XXXXXX</span></div></div></div> 131 <div id="test3c"><div class="s3 ltr"><div class="p o"><span class="c rlo">XXXXXX</span></div></div></div> 132 <div id="test3d"><div class="s3 rtl"><div class="p o"><span class="c rlo">XXXXXX</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 147 </div> 148 149 </body> 150 </html>