The Tor Browser / file comparison
comparison: layout/reftests/text-overflow/ellipsis-font-fallback.html
layout/reftests/text-overflow/ellipsis-font-fallback.html
- branch
- TOR_BUG_9701
- changeset 11
- deefc01c0e14
equal
deleted
inserted
replaced
| -1:000000000000 | 0:bbf0ad839ed7 |
|---|---|
| 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> |
