marker-basic-ref.html (12191B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/licenses/publicdomain/ 5 --> 6 <html><head> 7 <title>text-overflow: basic marker position tests</title> 8 <style type="text/css"> 9 @font-face { 10 font-family: DejaVuSansMono; 11 src: url(../fonts/DejaVuSansMono.woff); 12 } 13 html,body { 14 color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono; 15 } 16 17 .rtl { 18 direction:rtl; 19 } 20 .ltr { 21 direction:ltr; 22 } 23 .rlo { 24 unicode-bidi: bidi-override; direction: rtl; 25 } 26 .lro { 27 unicode-bidi: bidi-override; direction: ltr; 28 } 29 30 .rel { 31 position: relative; 32 height:2em; 33 } 34 .abs0 { 35 position: absolute; 36 top:0; left:0; 37 } 38 .abs0r { 39 position: absolute; 40 top:0; right:0; 41 } 42 43 .s { 44 width:4em; 45 } 46 .p { 47 overflow: hidden; 48 white-space:nowrap; 49 font-size:16px; 50 } 51 .a { 52 font-size:20px; 53 } 54 .r { 55 text-align:right; 56 } 57 .l { 58 text-align:left; 59 } 60 61 i { 62 display:inline-block; 63 width: 1.5em; 64 height: 1em; 65 font-style:normal; 66 color:lime; 67 border: 1px solid magenta; 68 text-decoration:overline; 69 } 70 .cl { 71 margin-left:-1em; 72 color: black; 73 } 74 .cr { 75 margin-right:-1em; 76 color: black; 77 } 78 .c5 { 79 margin-left:-0.5em; 80 margin-right:-0.5em; 81 color: black; 82 } 83 .outside { 84 width:1px; height:1px; 85 } 86 .overlap1 { 87 width:1.5em; height:1px; 88 } 89 .ins1 { 90 width:1em; height:1px; 91 } 92 .ins2 { margin-right: 0.8em; margin-left: -1em; } 93 .overlap2 { 94 width:1000px; height:1px; 95 } 96 .e { padding: 0 0.8em; } 97 98 x1 { display:inline-block; position:relative;} 99 x1 m { position:absolute; right:0; font-size:16px; } 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 </style> 141 </head> 142 <body> 143 <div style="position: absolute; top:20px; left:50px;"> 144 145 <div id="test1a"> 146 <div class="s a"><div class="p rel"> 147 <div class="abs0" style="text-align:left"><span class="cl a"> ||||</span><m>…</m></div> 148 <div class="abs0" style="text-align:left"><span class="cl a"> <m style="position:absolute; right:0; bottom:0;"><m0 style=" font-size:16px">…</m0></m></span></div> 149 </div></div> 150 </div> 151 <div id="test1b"> 152 <div class="s a rtl"><div class="p rel"> 153 <div class="abs0r"><span class="cr a rlo"> ||||</span><m>…</m></div> 154 <div class="abs0r"><span class="cr a rlo"> <m style="position:absolute; left:0; bottom:0;"><m0 style=" font-size:16px">…</m0></m></span></span></div> 155 </div></div> 156 </div> 157 <div id="test1c"> 158 <div class="s a"><div class="p rel"> 159 <div class="abs0" style="text-align:left"><span class="cl a"> ||||</span><m>…</m></div> 160 <div class="abs0" style="text-align:left"><span class="cl a"> <m style="position:absolute; right:0; bottom:0;"><m0 style=" font-size:16px">…</m0></m></span></div> 161 </div></div> 162 </div> 163 <div id="test1d"> 164 <div class="s a rtl"><div class="p rel"> 165 <div class="abs0r"><span class="cr a rlo"> ||||</span><m>…</m></div> 166 <div class="abs0r"><span class="cr a rlo"> <m style="position:absolute; left:0; bottom:0;"><m0 style=" font-size:16px">…</m0></m></span></span></div> 167 </div></div> 168 </div> 169 170 <div id="test2a"> 171 <div class="s a"><div class="p rel"> 172 <div class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </span></div> 173 </div></div> 174 </div> 175 <div id="test2b"> 176 <div class="s a"><div class="p rel"> 177 <div class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </span></div> 178 </div></div> 179 </div> 180 <div id="test2c"> 181 <div class="s a"><div class="p rel"> 182 <div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a"> </span><m>…</m></div> 183 </div></div> 184 </div> 185 <div id="test2d"> 186 <div class="s a"><div class="p rel"> 187 <div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a"> </span><m>…</m></div> 188 </div></div> 189 </div> 190 191 <div id="test3a"> 192 <div class="s a"><div class="p rel"> 193 <div class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </span></div> 194 </div></div> 195 </div> 196 <div id="test3b"> 197 <div class="s a"><div class="p rel"> 198 <div class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </span></div> 199 </div></div> 200 </div> 201 <div id="test3c"> 202 <div class="s a"><div class="p rel"> 203 <div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a"> </span><m>…</m></div> 204 </div></div> 205 </div> 206 <div id="test3d"> 207 <div class="s a"><div class="p rel"> 208 <div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a"> </span><m>…</m></div> 209 </div></div> 210 </div> 211 212 <!-- start marker, marker partly overlaps image, nothing to align with --> 213 <div id="test4a"><div class="s a"><div class="p o ltr"><span class="cl a"><img class="overlap1" src="../image/big.png"></span></div></div></div> 214 <div id="test4b"><div class="s a"><div class="p o rtl l"><span class="cl a"><img class="overlap1" src="../image/big.png"></span></div></div></div> 215 <div id="test4c"><div class="s a"><div class="p o ltr r"><span class="cr a"><img class="overlap1" src="../image/big.png"></span></div></div></div> 216 <div id="test4d"><div class="s a"><div class="p o rtl"><span class="cr a"><img class="overlap1" src="../image/big.png"></span></div></div></div> 217 218 <!-- start marker + end, marker partly overlaps image, nothing to align with --> 219 <div id="test5a"><div class="s a"><div class="p o ltr"><span class="cl a"><img class="overlap2" src="../image/big.png"></span></div></div></div> 220 <div id="test5b"><div class="s a"><div class="p o rtl l"><span class="cl a"><img class="overlap2" src="../image/big.png"></span></div></div></div> 221 <div id="test5c"><div class="s a"><div class="p o ltr r"><span class="cr a"><img class="overlap2" src="../image/big.png"></span></div></div></div> 222 <div id="test5d"><div class="s a"><div class="p o rtl"><span class="cr a"><img class="overlap2" src="../image/big.png"></span></div></div></div> 223 224 <div id="test6a"> 225 <div class="s a"><div class="p rel"> 226 <div class="abs0"><span class="cr a"> </span><img class="a overlap1" src="../image/big.png"></div> 227 <div class="abs0"><span class="cr a"> <m style="position:absolute; right:0; bottom:0;"><m0 style="font-size:16px">…</m0></m></span></span></div> 228 </div></div> 229 </div> 230 <div id="test6b"> 231 <div class="s a"><div class="p rel"> 232 <div class="abs0"><span class="cr a"> </span><img class="a overlap1" src="../image/big.png"></div> 233 <div class="abs0"><span class="cr a"> <m style="position:absolute; right:0; bottom:0;"><m0 style="font-size:16px">…</m0></m></span></span></div> 234 </div></div> 235 </div> 236 <div id="test6c"> 237 <div class="s a"><div class="p rel"> 238 <div class="abs0" style="text-align:right; right:0; "><span class="cr a"><img class="overlap1" src="../image/big.png"> </span></div> 239 <div class="abs0" style="text-align:right; right:0; "><span class="cr a"><img class="overlap1" src="../image/big.png"><m style="position:absolute; bottom:0;"><m0 style="font-size:16px">…</m0></m> </span></div> 240 </div></div> 241 </div> 242 <div id="test6d"> 243 <div class="s a"><div class="p rel"> 244 <div class="abs0" style="text-align:right; right:0; "><span class="cr a"><img class="overlap1" src="../image/big.png"> </span></div> 245 <div class="abs0" style="text-align:right; right:0; "><span class="cr a"><img class="overlap1" src="../image/big.png"><m style="position:absolute; bottom:0;"><m0 style="font-size:16px">…</m0></m> </span></div> 246 </div></div> 247 </div> 248 249 <div id="test7a"> 250 <div class="s a"><div class="p ltr"><span class="c5 a">|<x style="display:inline-block;width:0.8em;text-align:right"><m style="font-size:16px;">…</m></x><img class="ins1" src="../image/big.png"></span></div></div> 251 </div> 252 253 <div id="test7b"><div class="s a"><div class="p ltr r"><img class="a ins1" src="../image/big.png"><x class="a" style="display:inline-block;width:0.8em;text-align:left"><m style="font-size:16px;">…</m></x><span class="c5 a" style="margin-right:0"> </span></div></div></div> 254 255 <div id="test7c"> 256 <div class="s a"><div class="p ltr"><span class="c5 a">|<x style="display:inline-block;width:0.8em;text-align:right"><m style="font-size:16px;">…</m></x><img class="ins1" src="../image/big.png"></span></div></div> 257 </div> 258 259 <div id="test7d"><div class="s a"><div class="p ltr r"><img class="a ins1" src="../image/big.png"><x class="a" style="display:inline-block;width:0.8em;text-align:left"><m style="font-size:16px;">…</m></x><span class="c5 a" style="margin-right:0"> </span></div></div></div> 260 261 262 <div id="test8a"><div class="s a"><div class="a p ltr"><span class="c5 a"></span><span class="e"></span><span style="margin-right:-0.5em">…</span><span>‌</span></div></div></div> 263 <div id="test8d"><div class="s a"><div class="a p rtl"><span class="c5 a"></span><span class="e"></span><span style="margin-left:-0.5em">…</span><span>‌</span></div></div></div> 264 265 <div id="test9a"><div class="s a"><div class="p ltr"><span class="e"></span><i> </i><m>…</m><span class="e a"></span></div></div></div> 266 <div id="test9b"><div class="s a"><div class="p rtl"><span class="e"></span><i> </i><m>…</m><span class="e a"></span></div></div></div> 267 <div id="test9c"><div class="s a"><div class="p ltr"><span class="e"></span><i> </i><m>…</m><span class="e a"></span></div></div></div> 268 <div id="test9d"><div class="s a"><div class="p rtl"><span class="e"></span><i> </i><m>…</m><span class="e a"></span></div></div></div> 269 270 <!-- no marker for overflow:auto that doesn't trigger scrollbar --> 271 <div id="test10a"><div class="s a"><div class="p o ltr"><span style="margin-left:-5px" >||||||</span></div></div></div> 272 <div id="test10b"><div class="s a"><div class="p o rtl"><span style="margin-right:-5px">||||||</span></div></div></div> 273 274 </div> 275 </body> 276 </html>