The Tor Browser / file comparison
comparison: layout/reftests/text-overflow/marker-basic.html
layout/reftests/text-overflow/marker-basic.html
- branch
- TOR_BUG_9701
- changeset 8
- 97036ab72558
equal
deleted
inserted
replaced
| -1:000000000000 | 0:4930eaad5fa9 |
|---|---|
| 1 <!DOCTYPE HTML> | |
| 2 <!-- | |
| 3 Any copyright is dedicated to the Public Domain. | |
| 4 http://creativecommons.org/licenses/publicdomain/ | |
| 5 | |
| 6 Test: basic marker position tests | |
| 7 --> | |
| 8 <html><head> | |
| 9 <title>text-overflow: basic marker position tests</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 .rtl { | |
| 20 direction:rtl; | |
| 21 } | |
| 22 .ltr { | |
| 23 direction:ltr; | |
| 24 } | |
| 25 .rlo { | |
| 26 unicode-bidi: bidi-override; direction: rtl; | |
| 27 } | |
| 28 .lro { | |
| 29 unicode-bidi: bidi-override; direction: ltr; | |
| 30 } | |
| 31 | |
| 32 .o { | |
| 33 text-overflow: ellipsis ellipsis; | |
| 34 } | |
| 35 | |
| 36 .rel { | |
| 37 position: relative; | |
| 38 height:2em; | |
| 39 } | |
| 40 .abs0 { | |
| 41 position: absolute; | |
| 42 top:0; left:0; | |
| 43 } | |
| 44 | |
| 45 .s { | |
| 46 width:4em; | |
| 47 } | |
| 48 .p { | |
| 49 overflow: hidden; | |
| 50 white-space:nowrap; | |
| 51 font-size:16px; | |
| 52 } | |
| 53 .auto { | |
| 54 overflow: auto; | |
| 55 } | |
| 56 .r { | |
| 57 text-align:right; | |
| 58 } | |
| 59 .a { | |
| 60 font-size:20px; | |
| 61 } | |
| 62 .l { | |
| 63 text-align:left; | |
| 64 } | |
| 65 i { | |
| 66 display:inline-block; | |
| 67 width: 1.5em; | |
| 68 height: 1em; | |
| 69 font-style:normal; | |
| 70 color:lime; | |
| 71 border: 1px solid magenta; | |
| 72 text-decoration:overline; | |
| 73 } | |
| 74 | |
| 75 .c { | |
| 76 margin-left:-1em; | |
| 77 margin-right:-1em; | |
| 78 color: black; | |
| 79 } | |
| 80 .c5 { | |
| 81 margin-left:-0.5em; | |
| 82 margin-right:-0.5em; | |
| 83 color: black; | |
| 84 } | |
| 85 .outside { | |
| 86 width:1px; height:1px; | |
| 87 } | |
| 88 .overlap1 { | |
| 89 width:1.5em; height:1px; | |
| 90 } | |
| 91 .ins1 { | |
| 92 width:1em; height:1px; | |
| 93 margin: 0 0.8em; | |
| 94 } | |
| 95 .overlap2 { | |
| 96 width:1000px; height:1px; | |
| 97 } | |
| 98 .e { padding: 0 0.8em; } | |
| 99 | |
| 100 | |
| 101 #test1a { top:0; left:0; position:absolute; } | |
| 102 #test1b { top:0; left:100px; position:absolute; } | |
| 103 #test1c { top:0; left:200px; position:absolute; } | |
| 104 #test1d { top:0; left:300px; position:absolute; } | |
| 105 #test2a { top:40px; left:0; position:absolute; } | |
| 106 #test2b { top:40px; left:100px; position:absolute; } | |
| 107 #test2c { top:40px; left:200px; position:absolute; } | |
| 108 #test2d { top:40px; left:300px; position:absolute; } | |
| 109 #test3a { top:80px; left:0; position:absolute; } | |
| 110 #test3b { top:80px; left:100px; position:absolute; } | |
| 111 #test3c { top:80px; left:200px; position:absolute; } | |
| 112 #test3d { top:80px; left:300px; position:absolute; } | |
| 113 #test4a { top:120px; left:0; position:absolute; } | |
| 114 #test4b { top:120px; left:100px; position:absolute; } | |
| 115 #test4c { top:120px; left:200px; position:absolute; } | |
| 116 #test4d { top:120px; left:300px; position:absolute; } | |
| 117 #test5a { top:160px; left:0; position:absolute; } | |
| 118 #test5b { top:160px; left:100px; position:absolute; } | |
| 119 #test5c { top:160px; left:200px; position:absolute; } | |
| 120 #test5d { top:160px; left:300px; position:absolute; } | |
| 121 #test6a { top:200px; left:0; position:absolute; } | |
| 122 #test6b { top:200px; left:100px; position:absolute; } | |
| 123 #test6c { top:200px; left:200px; position:absolute; } | |
| 124 #test6d { top:200px; left:300px; position:absolute; } | |
| 125 #test7a { top:240px; left:0; position:absolute; } | |
| 126 #test7b { top:240px; left:100px; position:absolute; } | |
| 127 #test7c { top:240px; left:200px; position:absolute; } | |
| 128 #test7d { top:240px; left:300px; position:absolute; } | |
| 129 #test8a { top:280px; left:0; position:absolute; } | |
| 130 #test8b { top:280px; left:100px; position:absolute; } | |
| 131 #test8c { top:280px; left:200px; position:absolute; } | |
| 132 #test8d { top:280px; left:300px; position:absolute; } | |
| 133 #test9a { top:320px; left:0; position:absolute; border:1px solid black; } | |
| 134 #test9b { top:320px; left:100px; position:absolute; border:1px solid black; } | |
| 135 #test9c { top:320px; left:200px; position:absolute; border:1px solid black; } | |
| 136 #test9d { top:320px; left:300px; position:absolute; border:1px solid black; } | |
| 137 #test10a { top:360px; left:0; position:absolute; } | |
| 138 #test10b { top:360px; left:100px; position:absolute; } | |
| 139 | |
| 140 | |
| 141 </style> | |
| 142 </head> | |
| 143 <body> | |
| 144 <div style="position: absolute; top:20px; left:50px;"> | |
| 145 | |
| 146 <!-- start + end marker, aligned to text --> | |
| 147 <div id="test1a"><div class="s a ltr"><div class="p o"><span class="c a lro">||||||||||</span></div></div></div> | |
| 148 <div id="test1b"><div class="s a rtl"><div class="p o"><span class="c a lro">||||||||||</span></div></div></div> | |
| 149 <div id="test1c"><div class="s a ltr"><div class="p o"><span class="c a rlo">||||||||||</span></div></div></div> | |
| 150 <div id="test1d"><div class="s a rtl"><div class="p o"><span class="c a rlo">||||||||||</span></div></div></div> | |
| 151 | |
| 152 <!-- start marker, text outside marker edge, nothing to align with --> | |
| 153 <div id="test2a"><div class="s a"><div class="p o ltr"><span class="c a">x</span></div></div></div> | |
| 154 <div id="test2b"><div class="s a"><div class="p o rtl l"><span class="c a">x</span></div></div></div> | |
| 155 <div id="test2c"><div class="s a"><div class="p o ltr r"><span class="c a">x</span></div></div></div> | |
| 156 <div id="test2d"><div class="s a"><div class="p o rtl"><span class="c a">x</span></div></div></div> | |
| 157 | |
| 158 <!-- start marker, image outside marker edge, nothing to align with --> | |
| 159 <div id="test3a"><div class="s a"><div class="p o ltr"><span class="c a"><img class="outside" src="../image/big.png"></span></div></div></div> | |
| 160 <div id="test3b"><div class="s a"><div class="p o rtl l"><span class="c a"><img class="outside" src="../image/big.png"></span></div></div></div> | |
| 161 <div id="test3c"><div class="s a"><div class="p o ltr r"><span class="c a"><img class="outside" src="../image/big.png"></span></div></div></div> | |
| 162 <div id="test3d"><div class="s a"><div class="p o rtl"><span class="c a"><img class="outside" src="../image/big.png"></span></div></div></div> | |
| 163 | |
| 164 <!-- start marker, marker partly overlaps image, nothing to align with --> | |
| 165 <div id="test4a"><div class="s a"><div class="p o ltr"><span class="c a"><img class="overlap1" src="../image/big.png"></span></div></div></div> | |
| 166 <div id="test4b"><div class="s a"><div class="p o rtl l"><span class="c a"><img class="overlap1" src="../image/big.png"></span></div></div></div> | |
| 167 <div id="test4c"><div class="s a"><div class="p o ltr r"><span class="c a"><img class="overlap1" src="../image/big.png"></span></div></div></div> | |
| 168 <div id="test4d"><div class="s a"><div class="p o rtl"><span class="c a"><img class="overlap1" src="../image/big.png"></span></div></div></div> | |
| 169 | |
| 170 <!-- start marker + end, marker partly overlaps image, nothing to align with --> | |
| 171 <div id="test5a"><div class="s a"><div class="p o ltr"><span class="c a"><img class="overlap2" src="../image/big.png"></span></div></div></div> | |
| 172 <div id="test5b"><div class="s a"><div class="p o rtl l"><span class="c a"><img class="overlap2" src="../image/big.png"></span></div></div></div> | |
| 173 <div id="test5c"><div class="s a"><div class="p o ltr r"><span class="c a"><img class="overlap2" src="../image/big.png"></span></div></div></div> | |
| 174 <div id="test5d"><div class="s a"><div class="p o rtl"><span class="c a"><img class="overlap2" src="../image/big.png"></span></div></div></div> | |
| 175 | |
| 176 <!-- start marker, marker clips text, aligns to image --> | |
| 177 <div id="test6a"><div class="s a"><div class="p o ltr"><span class="c a">|||<img class="overlap1" src="../image/big.png"></span></div></div></div> | |
| 178 <div id="test6b"><div class="s a"><div class="p o rtl l"><span class="c a"><img class="overlap1" src="../image/big.png">|||</span></div></div></div> | |
| 179 <div id="test6c"><div class="s a"><div class="p o ltr r"><span class="c a"><img class="overlap1" src="../image/big.png">|||</span></div></div></div> | |
| 180 <div id="test6d"><div class="s a"><div class="p o rtl"><span class="c a">|||<img class="overlap1" src="../image/big.png"></span></div></div></div> | |
| 181 | |
| 182 <!-- start marker, marker aligns to image --> | |
| 183 <div id="test7a"><div class="s a"><div class="p o ltr"><span class="c5 a">|<img class="ins1" src="../image/big.png"></span></div></div></div> | |
| 184 <div id="test7b"><div class="s a"><div class="p o rtl"><span class="c5 a">|<img class="ins1" src="../image/big.png"></span></div></div></div> | |
| 185 <!-- end marker, marker aligns to image --> | |
| 186 <div id="test7c"><div class="s a"><div class="p o rtl l"><span class="c5 a"><img class="ins1" src="../image/big.png">|</span></div></div></div> | |
| 187 <div id="test7d"><div class="s a"><div class="p o ltr r"><span class="c5 a"><img class="ins1" src="../image/big.png">|</span></div></div></div> | |
| 188 | |
| 189 <!-- start marker, marker aligns to empty element --> | |
| 190 <div id="test8a"><div class="s a"><div class="a p o ltr"><span class="c5 a">|</span><span class="e"></span><span>‌</span></div></div></div> | |
| 191 <div id="test8d"><div class="s a"><div class="a p o rtl"><span class="c5 a">|</span><span class="e"></span><span>‌</span></div></div></div> | |
| 192 | |
| 193 <!-- end marker, marker aligns to inline block with overflow --> | |
| 194 <div id="test9a"><div class="s a"><div class="p o ltr"><span class="e"></span><i> </i><span class="e"></span><span class="c5 a">|||</span></div></div></div> | |
| 195 <div id="test9b"><div class="s a"><div class="p o rtl"><span class="e"></span><i> </i><span class="e"></span><span class="c5 a">|||</span></div></div></div> | |
| 196 <div id="test9c"><div class="s a"><div class="p o ltr"><span class="e"></span><i> </i><span class="e"></span><span class="c5 a">|||</span></div></div></div> | |
| 197 <div id="test9d"><div class="s a"><div class="p o rtl"><span class="e"></span><i> </i><span class="e"></span><span class="c5 a">|||</span></div></div></div> | |
| 198 | |
| 199 <!-- no marker for overflow:auto that doesn't trigger scrollbar --> | |
| 200 <div id="test10a"><div class="s a"><div class="p o ltr auto"><span style="margin-left:-5px" >||||||</span></div></div></div> | |
| 201 <div id="test10b"><div class="s a"><div class="p o rtl auto"><span style="margin-right:-5px">||||||</span></div></div></div> | |
| 202 | |
| 203 </div> | |
| 204 </body> | |
| 205 </html> |
