layout/reftests/text-overflow/marker-basic.html@97036ab72558
layout/reftests/text-overflow/marker-basic.html
Tue, 06 Jan 2015 21:39:09 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Tue, 06 Jan 2015 21:39:09 +0100
- branch
- TOR_BUG_9701
- changeset 8
- 97036ab72558
- permissions
- -rw-r--r--
Conditionally force memory storage according to privacy.thirdparty.isolate;
This solves Tor bug #9701, complying with disk avoidance documented in
https://www.torproject.org/projects/torbrowser/design/#disk-avoidance.
1 <!DOCTYPE HTML>
2 <!--
3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/licenses/publicdomain/
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 }
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 }
32 .o {
33 text-overflow: ellipsis ellipsis;
34 }
36 .rel {
37 position: relative;
38 height:2em;
39 }
40 .abs0 {
41 position: absolute;
42 top:0; left:0;
43 }
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 }
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; }
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; }
141 </style>
142 </head>
143 <body>
144 <div style="position: absolute; top:20px; left:50px;">
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
203 </div>
204 </body>
205 </html>
