The Tor Browser / file comparison

comparison: layout/reftests/text-overflow/marker-basic-ref.html

layout/reftests/text-overflow/marker-basic-ref.html

branch
TOR_BUG_9701
changeset 14
925c144e1f1f
equal deleted inserted replaced
-1:000000000000 0:560c7214719f
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">&nbsp;&nbsp;&nbsp;||||</span><m>&#x2026;</m></div>
148 <div class="abs0" style="text-align:left"><span class="cl a">&nbsp;&nbsp;&nbsp;<m style="position:absolute; right:0; bottom:0;"><m0 style=" font-size:16px">&#x2026;</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">&nbsp;&nbsp;&nbsp;||||</span><m>&#x2026;</m></div>
154 <div class="abs0r"><span class="cr a rlo">&nbsp;&nbsp;&nbsp;<m style="position:absolute; left:0; bottom:0;"><m0 style=" font-size:16px">&#x2026;</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">&nbsp;&nbsp;&nbsp;||||</span><m>&#x2026;</m></div>
160 <div class="abs0" style="text-align:left"><span class="cl a">&nbsp;&nbsp;&nbsp;<m style="position:absolute; right:0; bottom:0;"><m0 style=" font-size:16px">&#x2026;</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">&nbsp;&nbsp;&nbsp;||||</span><m>&#x2026;</m></div>
166 <div class="abs0r"><span class="cr a rlo">&nbsp;&nbsp;&nbsp;<m style="position:absolute; left:0; bottom:0;"><m0 style=" font-size:16px">&#x2026;</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>&#x2026;</m><span class="cl a">&nbsp;</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>&#x2026;</m><span class="cl a">&nbsp;</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">&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</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">&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</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>&#x2026;</m><span class="cl a">&nbsp;</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>&#x2026;</m><span class="cl a">&nbsp;</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">&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</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">&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</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">&nbsp;&nbsp;&nbsp;</span><img class="a overlap1" src="../image/big.png"></div>
227 <div class="abs0"><span class="cr a">&nbsp;&nbsp;&nbsp;<m style="position:absolute; right:0; bottom:0;"><m0 style="font-size:16px">&#x2026;</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">&nbsp;&nbsp;&nbsp;</span><img class="a overlap1" src="../image/big.png"></div>
233 <div class="abs0"><span class="cr a">&nbsp;&nbsp;&nbsp;<m style="position:absolute; right:0; bottom:0;"><m0 style="font-size:16px">&#x2026;</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">&nbsp;&nbsp;&nbsp;</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">&#x2026;</m0></m>&nbsp;&nbsp;&nbsp;</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">&nbsp;&nbsp;&nbsp;</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">&#x2026;</m0></m>&nbsp;&nbsp;&nbsp;</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;">&#x2026;</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;">&#x2026;</m></x><span class="c5 a" style="margin-right:0">&nbsp;</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;">&#x2026;</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;">&#x2026;</m></x><span class="c5 a" style="margin-right:0">&nbsp;</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">&#x2026;</span><span>&#x200c;</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">&#x2026;</span><span>&#x200c;</span></div></div></div>
264
265 <div id="test9a"><div class="s a"><div class="p ltr"><span class="e"></span><i>&nbsp;&nbsp;&nbsp;&nbsp;</i><m>&#x2026;</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>&nbsp;&nbsp;&nbsp;&nbsp;</i><m>&#x2026;</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>&nbsp;&nbsp;&nbsp;&nbsp;</i><m>&#x2026;</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>&nbsp;&nbsp;&nbsp;&nbsp;</i><m>&#x2026;</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>

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial