1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/reftests/text-overflow/marker-basic.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,205 @@
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 + Test: basic marker position tests
1.10 +-->
1.11 +<html><head>
1.12 + <title>text-overflow: basic marker position tests</title>
1.13 + <style type="text/css">
1.14 +@font-face {
1.15 + font-family: DejaVuSansMono;
1.16 + src: url(../fonts/DejaVuSansMono.woff);
1.17 +}
1.18 +html,body {
1.19 + color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
1.20 +}
1.21 +
1.22 +.rtl {
1.23 + direction:rtl;
1.24 +}
1.25 +.ltr {
1.26 + direction:ltr;
1.27 +}
1.28 +.rlo {
1.29 + unicode-bidi: bidi-override; direction: rtl;
1.30 +}
1.31 +.lro {
1.32 + unicode-bidi: bidi-override; direction: ltr;
1.33 +}
1.34 +
1.35 +.o {
1.36 + text-overflow: ellipsis ellipsis;
1.37 +}
1.38 +
1.39 +.rel {
1.40 + position: relative;
1.41 + height:2em;
1.42 +}
1.43 +.abs0 {
1.44 + position: absolute;
1.45 + top:0; left:0;
1.46 +}
1.47 +
1.48 +.s {
1.49 + width:4em;
1.50 +}
1.51 +.p {
1.52 + overflow: hidden;
1.53 + white-space:nowrap;
1.54 + font-size:16px;
1.55 +}
1.56 +.auto {
1.57 + overflow: auto;
1.58 +}
1.59 +.r {
1.60 + text-align:right;
1.61 +}
1.62 +.a {
1.63 + font-size:20px;
1.64 +}
1.65 +.l {
1.66 + text-align:left;
1.67 +}
1.68 +i {
1.69 + display:inline-block;
1.70 + width: 1.5em;
1.71 + height: 1em;
1.72 + font-style:normal;
1.73 + color:lime;
1.74 + border: 1px solid magenta;
1.75 + text-decoration:overline;
1.76 +}
1.77 +
1.78 +.c {
1.79 + margin-left:-1em;
1.80 + margin-right:-1em;
1.81 + color: black;
1.82 +}
1.83 +.c5 {
1.84 + margin-left:-0.5em;
1.85 + margin-right:-0.5em;
1.86 + color: black;
1.87 +}
1.88 +.outside {
1.89 + width:1px; height:1px;
1.90 +}
1.91 +.overlap1 {
1.92 + width:1.5em; height:1px;
1.93 +}
1.94 +.ins1 {
1.95 + width:1em; height:1px;
1.96 + margin: 0 0.8em;
1.97 +}
1.98 +.overlap2 {
1.99 + width:1000px; height:1px;
1.100 +}
1.101 +.e { padding: 0 0.8em; }
1.102 +
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 +
1.144 + </style>
1.145 +</head>
1.146 +<body>
1.147 +<div style="position: absolute; top:20px; left:50px;">
1.148 +
1.149 +<!-- start + end marker, aligned to text -->
1.150 +<div id="test1a"><div class="s a ltr"><div class="p o"><span class="c a lro">||||||||||</span></div></div></div>
1.151 +<div id="test1b"><div class="s a rtl"><div class="p o"><span class="c a lro">||||||||||</span></div></div></div>
1.152 +<div id="test1c"><div class="s a ltr"><div class="p o"><span class="c a rlo">||||||||||</span></div></div></div>
1.153 +<div id="test1d"><div class="s a rtl"><div class="p o"><span class="c a rlo">||||||||||</span></div></div></div>
1.154 +
1.155 +<!-- start marker, text outside marker edge, nothing to align with -->
1.156 +<div id="test2a"><div class="s a"><div class="p o ltr"><span class="c a">x</span></div></div></div>
1.157 +<div id="test2b"><div class="s a"><div class="p o rtl l"><span class="c a">x</span></div></div></div>
1.158 +<div id="test2c"><div class="s a"><div class="p o ltr r"><span class="c a">x</span></div></div></div>
1.159 +<div id="test2d"><div class="s a"><div class="p o rtl"><span class="c a">x</span></div></div></div>
1.160 +
1.161 +<!-- start marker, image outside marker edge, nothing to align with -->
1.162 +<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>
1.163 +<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>
1.164 +<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>
1.165 +<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>
1.166 +
1.167 +<!-- start marker, marker partly overlaps image, nothing to align with -->
1.168 +<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>
1.169 +<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>
1.170 +<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>
1.171 +<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>
1.172 +
1.173 +<!-- start marker + end, marker partly overlaps image, nothing to align with -->
1.174 +<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>
1.175 +<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>
1.176 +<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>
1.177 +<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>
1.178 +
1.179 +<!-- start marker, marker clips text, aligns to image -->
1.180 +<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>
1.181 +<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>
1.182 +<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>
1.183 +<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>
1.184 +
1.185 +<!-- start marker, marker aligns to image -->
1.186 +<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>
1.187 +<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>
1.188 +<!-- end marker, marker aligns to image -->
1.189 +<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>
1.190 +<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>
1.191 +
1.192 +<!-- start marker, marker aligns to empty element -->
1.193 +<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>
1.194 +<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>
1.195 +
1.196 +<!-- end marker, marker aligns to inline block with overflow -->
1.197 +<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>
1.198 +<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>
1.199 +<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>
1.200 +<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>
1.201 +
1.202 +<!-- no marker for overflow:auto that doesn't trigger scrollbar -->
1.203 +<div id="test10a"><div class="s a"><div class="p o ltr auto"><span style="margin-left:-5px" >||||||</span></div></div></div>
1.204 +<div id="test10b"><div class="s a"><div class="p o rtl auto"><span style="margin-right:-5px">||||||</span></div></div></div>
1.205 +
1.206 +</div>
1.207 +</body>
1.208 +</html>
