1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/reftests/text-overflow/marker-basic-ref.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,276 @@
1.4 +<!DOCTYPE HTML>
1.5 +<!--
1.6 + Any copyright is dedicated to the Public Domain.
1.7 + http://creativecommons.org/licenses/publicdomain/
1.8 +-->
1.9 +<html><head>
1.10 + <title>text-overflow: basic marker position tests</title>
1.11 + <style type="text/css">
1.12 +@font-face {
1.13 + font-family: DejaVuSansMono;
1.14 + src: url(../fonts/DejaVuSansMono.woff);
1.15 +}
1.16 +html,body {
1.17 + color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
1.18 +}
1.19 +
1.20 +.rtl {
1.21 + direction:rtl;
1.22 +}
1.23 +.ltr {
1.24 + direction:ltr;
1.25 +}
1.26 +.rlo {
1.27 + unicode-bidi: bidi-override; direction: rtl;
1.28 +}
1.29 +.lro {
1.30 + unicode-bidi: bidi-override; direction: ltr;
1.31 +}
1.32 +
1.33 +.rel {
1.34 + position: relative;
1.35 + height:2em;
1.36 +}
1.37 +.abs0 {
1.38 + position: absolute;
1.39 + top:0; left:0;
1.40 +}
1.41 +.abs0r {
1.42 + position: absolute;
1.43 + top:0; right:0;
1.44 +}
1.45 +
1.46 +.s {
1.47 + width:4em;
1.48 +}
1.49 +.p {
1.50 + overflow: hidden;
1.51 + white-space:nowrap;
1.52 + font-size:16px;
1.53 +}
1.54 +.a {
1.55 + font-size:20px;
1.56 +}
1.57 +.r {
1.58 + text-align:right;
1.59 +}
1.60 +.l {
1.61 + text-align:left;
1.62 +}
1.63 +
1.64 +i {
1.65 + display:inline-block;
1.66 + width: 1.5em;
1.67 + height: 1em;
1.68 + font-style:normal;
1.69 + color:lime;
1.70 + border: 1px solid magenta;
1.71 + text-decoration:overline;
1.72 +}
1.73 +.cl {
1.74 + margin-left:-1em;
1.75 + color: black;
1.76 +}
1.77 +.cr {
1.78 + margin-right:-1em;
1.79 + color: black;
1.80 +}
1.81 +.c5 {
1.82 + margin-left:-0.5em;
1.83 + margin-right:-0.5em;
1.84 + color: black;
1.85 +}
1.86 +.outside {
1.87 + width:1px; height:1px;
1.88 +}
1.89 +.overlap1 {
1.90 + width:1.5em; height:1px;
1.91 +}
1.92 +.ins1 {
1.93 + width:1em; height:1px;
1.94 +}
1.95 +.ins2 { margin-right: 0.8em; margin-left: -1em; }
1.96 +.overlap2 {
1.97 + width:1000px; height:1px;
1.98 +}
1.99 +.e { padding: 0 0.8em; }
1.100 +
1.101 +x1 { display:inline-block; position:relative;}
1.102 +x1 m { position:absolute; right:0; font-size:16px; }
1.103 +
1.104 +#test1a { top:0; left:0; position:absolute; }
1.105 +#test1b { top:0; left:100px; position:absolute; }
1.106 +#test1c { top:0; left:200px; position:absolute; }
1.107 +#test1d { top:0; left:300px; position:absolute; }
1.108 +#test2a { top:40px; left:0; position:absolute; }
1.109 +#test2b { top:40px; left:100px; position:absolute; }
1.110 +#test2c { top:40px; left:200px; position:absolute; }
1.111 +#test2d { top:40px; left:300px; position:absolute; }
1.112 +#test3a { top:80px; left:0; position:absolute; }
1.113 +#test3b { top:80px; left:100px; position:absolute; }
1.114 +#test3c { top:80px; left:200px; position:absolute; }
1.115 +#test3d { top:80px; left:300px; position:absolute; }
1.116 +#test4a { top:120px; left:0; position:absolute; }
1.117 +#test4b { top:120px; left:100px; position:absolute; }
1.118 +#test4c { top:120px; left:200px; position:absolute; }
1.119 +#test4d { top:120px; left:300px; position:absolute; }
1.120 +#test5a { top:160px; left:0; position:absolute; }
1.121 +#test5b { top:160px; left:100px; position:absolute; }
1.122 +#test5c { top:160px; left:200px; position:absolute; }
1.123 +#test5d { top:160px; left:300px; position:absolute; }
1.124 +#test6a { top:200px; left:0; position:absolute; }
1.125 +#test6b { top:200px; left:100px; position:absolute; }
1.126 +#test6c { top:200px; left:200px; position:absolute; }
1.127 +#test6d { top:200px; left:300px; position:absolute; }
1.128 +#test7a { top:240px; left:0; position:absolute; }
1.129 +#test7b { top:240px; left:100px; position:absolute; }
1.130 +#test7c { top:240px; left:200px; position:absolute; }
1.131 +#test7d { top:240px; left:300px; position:absolute; }
1.132 +#test8a { top:280px; left:0; position:absolute; }
1.133 +#test8b { top:280px; left:100px; position:absolute; }
1.134 +#test8c { top:280px; left:200px; position:absolute; }
1.135 +#test8d { top:280px; left:300px; position:absolute; }
1.136 +#test9a { top:320px; left:0; position:absolute; border:1px solid black; }
1.137 +#test9b { top:320px; left:100px; position:absolute; border:1px solid black; }
1.138 +#test9c { top:320px; left:200px; position:absolute; border:1px solid black; }
1.139 +#test9d { top:320px; left:300px; position:absolute; border:1px solid black; }
1.140 +#test10a { top:360px; left:0; position:absolute; }
1.141 +#test10b { top:360px; left:100px; position:absolute; }
1.142 +
1.143 + </style>
1.144 +</head>
1.145 +<body>
1.146 +<div style="position: absolute; top:20px; left:50px;">
1.147 +
1.148 +<div id="test1a">
1.149 +<div class="s a"><div class="p rel">
1.150 +<div class="abs0" style="text-align:left"><span class="cl a"> ||||</span><m>…</m></div>
1.151 +<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>
1.152 +</div></div>
1.153 +</div>
1.154 +<div id="test1b">
1.155 +<div class="s a rtl"><div class="p rel">
1.156 +<div class="abs0r"><span class="cr a rlo"> ||||</span><m>…</m></div>
1.157 +<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>
1.158 +</div></div>
1.159 +</div>
1.160 +<div id="test1c">
1.161 +<div class="s a"><div class="p rel">
1.162 +<div class="abs0" style="text-align:left"><span class="cl a"> ||||</span><m>…</m></div>
1.163 +<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>
1.164 +</div></div>
1.165 +</div>
1.166 +<div id="test1d">
1.167 +<div class="s a rtl"><div class="p rel">
1.168 +<div class="abs0r"><span class="cr a rlo"> ||||</span><m>…</m></div>
1.169 +<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>
1.170 +</div></div>
1.171 +</div>
1.172 +
1.173 +<div id="test2a">
1.174 +<div class="s a"><div class="p rel">
1.175 +<div class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </span></div>
1.176 +</div></div>
1.177 +</div>
1.178 +<div id="test2b">
1.179 +<div class="s a"><div class="p rel">
1.180 +<div class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </span></div>
1.181 +</div></div>
1.182 +</div>
1.183 +<div id="test2c">
1.184 +<div class="s a"><div class="p rel">
1.185 +<div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a"> </span><m>…</m></div>
1.186 +</div></div>
1.187 +</div>
1.188 +<div id="test2d">
1.189 +<div class="s a"><div class="p rel">
1.190 +<div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a"> </span><m>…</m></div>
1.191 +</div></div>
1.192 +</div>
1.193 +
1.194 +<div id="test3a">
1.195 +<div class="s a"><div class="p rel">
1.196 +<div class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </span></div>
1.197 +</div></div>
1.198 +</div>
1.199 +<div id="test3b">
1.200 +<div class="s a"><div class="p rel">
1.201 +<div class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </span></div>
1.202 +</div></div>
1.203 +</div>
1.204 +<div id="test3c">
1.205 +<div class="s a"><div class="p rel">
1.206 +<div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a"> </span><m>…</m></div>
1.207 +</div></div>
1.208 +</div>
1.209 +<div id="test3d">
1.210 +<div class="s a"><div class="p rel">
1.211 +<div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a"> </span><m>…</m></div>
1.212 +</div></div>
1.213 +</div>
1.214 +
1.215 +<!-- start marker, marker partly overlaps image, nothing to align with -->
1.216 +<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>
1.217 +<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>
1.218 +<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>
1.219 +<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>
1.220 +
1.221 +<!-- start marker + end, marker partly overlaps image, nothing to align with -->
1.222 +<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>
1.223 +<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>
1.224 +<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>
1.225 +<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>
1.226 +
1.227 +<div id="test6a">
1.228 +<div class="s a"><div class="p rel">
1.229 +<div class="abs0"><span class="cr a"> </span><img class="a overlap1" src="../image/big.png"></div>
1.230 +<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>
1.231 +</div></div>
1.232 +</div>
1.233 +<div id="test6b">
1.234 +<div class="s a"><div class="p rel">
1.235 +<div class="abs0"><span class="cr a"> </span><img class="a overlap1" src="../image/big.png"></div>
1.236 +<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>
1.237 +</div></div>
1.238 +</div>
1.239 +<div id="test6c">
1.240 +<div class="s a"><div class="p rel">
1.241 +<div class="abs0" style="text-align:right; right:0; "><span class="cr a"><img class="overlap1" src="../image/big.png"> </span></div>
1.242 +<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>
1.243 +</div></div>
1.244 +</div>
1.245 +<div id="test6d">
1.246 +<div class="s a"><div class="p rel">
1.247 +<div class="abs0" style="text-align:right; right:0; "><span class="cr a"><img class="overlap1" src="../image/big.png"> </span></div>
1.248 +<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>
1.249 +</div></div>
1.250 +</div>
1.251 +
1.252 +<div id="test7a">
1.253 +<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>
1.254 +</div>
1.255 +
1.256 +<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>
1.257 +
1.258 +<div id="test7c">
1.259 +<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>
1.260 +</div>
1.261 +
1.262 +<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>
1.263 +
1.264 +
1.265 +<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>
1.266 +<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>
1.267 +
1.268 +<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>
1.269 +<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>
1.270 +<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>
1.271 +<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>
1.272 +
1.273 +<!-- no marker for overflow:auto that doesn't trigger scrollbar -->
1.274 +<div id="test10a"><div class="s a"><div class="p o ltr"><span style="margin-left:-5px" >||||||</span></div></div></div>
1.275 +<div id="test10b"><div class="s a"><div class="p o rtl"><span style="margin-right:-5px">||||||</span></div></div></div>
1.276 +
1.277 +</div>
1.278 +</body>
1.279 +</html>
