layout/reftests/pixel-rounding/background-image-tiling-ref.html@a63d609f5ebe
layout/reftests/pixel-rounding/background-image-tiling-ref.html
Thu, 15 Jan 2015 15:55:04 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 15:55:04 +0100
- branch
- TOR_BUG_9701
- changeset 9
- a63d609f5ebe
- permissions
- -rw-r--r--
Back out 97036ab72558 which inappropriately compared turds to third parties.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html lang="en-US">
4 <head>
5 <title>Pixel rounding of background image tiling</title>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <meta http-equiv="Content-Style-Type" content="text/css">
8 <style type="text/css">
10 body { background: black; }
12 .set {
13 height: 60px;
14 position: relative;
15 }
17 .item {
18 position: absolute;
19 width: 10px;
20 height: 10px;
21 background: aqua;
22 overflow: hidden;
23 }
24 .item > div {
25 position: absolute;
26 width: 15px;
27 height: 15px;
28 border: 1px solid yellow;
29 }
31 .item1 { left: 0px; }
32 .item2 { left: 15px; }
33 .item3 { left: 30px; }
34 .item4 { left: 45px; }
35 .item5 { left: 60px; }
37 .tl { top: 0px; }
38 .tl > div { top: 0; left: 0; }
40 .tr { top: 15px; }
41 .tr > div { top: 0; right: 0; }
43 .bl { top: 30px; }
44 .bl > div { bottom: 0; left: 0; }
46 .br { top: 45px; }
47 .br > div { bottom: 0; right: 0; }
49 .varydim .item1 { height: 10px; width: 11px; }
50 .varydim .item2 { height: 10px; width: 11px; }
51 .varydim .item3 { height: 11px; width: 11px; }
52 .varydim .item4 { height: 11px; width: 10px; }
53 .varydim .item5 { height: 11px; width: 10px; }
55 .varydim.athalf .item2 { width: 10px; }
56 .varydim.athalf .item3 { height: 10px; width: 10px; }
57 .varydim.athalf .item4 { height: 10px; }
59 .varypos .item1 { margin-top: 0px; margin-left: 1px; }
60 .varypos .item2 { margin-top: 0px; margin-left: 1px; }
61 .varypos .item3 { margin-top: 1px; margin-left: 1px; }
62 .varypos .item4 { margin-top: 1px; margin-left: 0px; }
63 .varypos .item5 { margin-top: 1px; margin-left: 0px; }
65 .varydim.athalf .item {
66 margin-top: 1px; margin-left: 1px;
67 }
69 .varypos.athalf .item1 { width: 11px; height: 11px; }
70 .varypos.athalf .item2 { height: 11px; }
71 .varypos.athalf .item4 { width: 11px; }
72 .varypos.athalf .item5 { width: 11px; height: 11px; }
74 /* remember that abs pos children are relative to the padding box */
75 .border .item { padding: 1px; }
77 /*
78 * For the tiled images, use two divs as the children, and offset
79 * one so that it does only the vertical line, and the other so it
80 * does only the horizontal line.
81 */
82 .border .item div:first-child { margin: 1px -1px; }
83 .border .item div:first-child + div { margin: -1px 1px; }
85 </style>
86 </head>
87 <body>
89 <div class="set varydim">
90 <div class="tl item item1"><div></div></div>
91 <div class="tl item item2"><div></div></div>
92 <div class="tl item item3"><div></div></div>
93 <div class="tl item item4"><div></div></div>
94 <div class="tl item item5"><div></div></div>
96 <div class="tr item item1"><div></div></div>
97 <div class="tr item item2"><div></div></div>
98 <div class="tr item item3"><div></div></div>
99 <div class="tr item item4"><div></div></div>
100 <div class="tr item item5"><div></div></div>
102 <div class="bl item item1"><div></div></div>
103 <div class="bl item item2"><div></div></div>
104 <div class="bl item item3"><div></div></div>
105 <div class="bl item item4"><div></div></div>
106 <div class="bl item item5"><div></div></div>
108 <div class="br item item1"><div></div></div>
109 <div class="br item item2"><div></div></div>
110 <div class="br item item3"><div></div></div>
111 <div class="br item item4"><div></div></div>
112 <div class="br item item5"><div></div></div>
113 </div>
115 <div class="set varypos">
116 <div class="tl item item1"><div></div></div>
117 <div class="tl item item2"><div></div></div>
118 <div class="tl item item3"><div></div></div>
119 <div class="tl item item4"><div></div></div>
120 <div class="tl item item5"><div></div></div>
122 <div class="tr item item1"><div></div></div>
123 <div class="tr item item2"><div></div></div>
124 <div class="tr item item3"><div></div></div>
125 <div class="tr item item4"><div></div></div>
126 <div class="tr item item5"><div></div></div>
128 <div class="bl item item1"><div></div></div>
129 <div class="bl item item2"><div></div></div>
130 <div class="bl item item3"><div></div></div>
131 <div class="bl item item4"><div></div></div>
132 <div class="bl item item5"><div></div></div>
134 <div class="br item item1"><div></div></div>
135 <div class="br item item2"><div></div></div>
136 <div class="br item item3"><div></div></div>
137 <div class="br item item4"><div></div></div>
138 <div class="br item item5"><div></div></div>
139 </div>
141 <div class="set varydim athalf">
142 <div class="tl item item1"><div></div></div>
143 <div class="tl item item2"><div></div></div>
144 <div class="tl item item3"><div></div></div>
145 <div class="tl item item4"><div></div></div>
146 <div class="tl item item5"><div></div></div>
148 <div class="tr item item1"><div></div></div>
149 <div class="tr item item2"><div></div></div>
150 <div class="tr item item3"><div></div></div>
151 <div class="tr item item4"><div></div></div>
152 <div class="tr item item5"><div></div></div>
154 <div class="bl item item1"><div></div></div>
155 <div class="bl item item2"><div></div></div>
156 <div class="bl item item3"><div></div></div>
157 <div class="bl item item4"><div></div></div>
158 <div class="bl item item5"><div></div></div>
160 <div class="br item item1"><div></div></div>
161 <div class="br item item2"><div></div></div>
162 <div class="br item item3"><div></div></div>
163 <div class="br item item4"><div></div></div>
164 <div class="br item item5"><div></div></div>
165 </div>
167 <div class="set varypos athalf">
168 <div class="tl item item1"><div></div></div>
169 <div class="tl item item2"><div></div></div>
170 <div class="tl item item3"><div></div></div>
171 <div class="tl item item4"><div></div></div>
172 <div class="tl item item5"><div></div></div>
174 <div class="tr item item1"><div></div></div>
175 <div class="tr item item2"><div></div></div>
176 <div class="tr item item3"><div></div></div>
177 <div class="tr item item4"><div></div></div>
178 <div class="tr item item5"><div></div></div>
180 <div class="bl item item1"><div></div></div>
181 <div class="bl item item2"><div></div></div>
182 <div class="bl item item3"><div></div></div>
183 <div class="bl item item4"><div></div></div>
184 <div class="bl item item5"><div></div></div>
186 <div class="br item item1"><div></div></div>
187 <div class="br item item2"><div></div></div>
188 <div class="br item item3"><div></div></div>
189 <div class="br item item4"><div></div></div>
190 <div class="br item item5"><div></div></div>
191 </div>
193 <div class="set varydim border">
194 <div class="tl item item1"><div></div><div></div></div>
195 <div class="tl item item2"><div></div><div></div></div>
196 <div class="tl item item3"><div></div><div></div></div>
197 <div class="tl item item4"><div></div><div></div></div>
198 <div class="tl item item5"><div></div><div></div></div>
200 <div class="tr item item1"><div></div><div></div></div>
201 <div class="tr item item2"><div></div><div></div></div>
202 <div class="tr item item3"><div></div><div></div></div>
203 <div class="tr item item4"><div></div><div></div></div>
204 <div class="tr item item5"><div></div><div></div></div>
206 <div class="bl item item1"><div></div><div></div></div>
207 <div class="bl item item2"><div></div><div></div></div>
208 <div class="bl item item3"><div></div><div></div></div>
209 <div class="bl item item4"><div></div><div></div></div>
210 <div class="bl item item5"><div></div><div></div></div>
212 <div class="br item item1"><div></div><div></div></div>
213 <div class="br item item2"><div></div><div></div></div>
214 <div class="br item item3"><div></div><div></div></div>
215 <div class="br item item4"><div></div><div></div></div>
216 <div class="br item item5"><div></div><div></div></div>
217 </div>
219 <div class="set varypos border">
220 <div class="tl item item1"><div></div><div></div></div>
221 <div class="tl item item2"><div></div><div></div></div>
222 <div class="tl item item3"><div></div><div></div></div>
223 <div class="tl item item4"><div></div><div></div></div>
224 <div class="tl item item5"><div></div><div></div></div>
226 <div class="tr item item1"><div></div><div></div></div>
227 <div class="tr item item2"><div></div><div></div></div>
228 <div class="tr item item3"><div></div><div></div></div>
229 <div class="tr item item4"><div></div><div></div></div>
230 <div class="tr item item5"><div></div><div></div></div>
232 <div class="bl item item1"><div></div><div></div></div>
233 <div class="bl item item2"><div></div><div></div></div>
234 <div class="bl item item3"><div></div><div></div></div>
235 <div class="bl item item4"><div></div><div></div></div>
236 <div class="bl item item5"><div></div><div></div></div>
238 <div class="br item item1"><div></div><div></div></div>
239 <div class="br item item2"><div></div><div></div></div>
240 <div class="br item item3"><div></div><div></div></div>
241 <div class="br item item4"><div></div><div></div></div>
242 <div class="br item item5"><div></div><div></div></div>
243 </div>
245 <div class="set varydim athalf border">
246 <div class="tl item item1"><div></div><div></div></div>
247 <div class="tl item item2"><div></div><div></div></div>
248 <div class="tl item item3"><div></div><div></div></div>
249 <div class="tl item item4"><div></div><div></div></div>
250 <div class="tl item item5"><div></div><div></div></div>
252 <div class="tr item item1"><div></div><div></div></div>
253 <div class="tr item item2"><div></div><div></div></div>
254 <div class="tr item item3"><div></div><div></div></div>
255 <div class="tr item item4"><div></div><div></div></div>
256 <div class="tr item item5"><div></div><div></div></div>
258 <div class="bl item item1"><div></div><div></div></div>
259 <div class="bl item item2"><div></div><div></div></div>
260 <div class="bl item item3"><div></div><div></div></div>
261 <div class="bl item item4"><div></div><div></div></div>
262 <div class="bl item item5"><div></div><div></div></div>
264 <div class="br item item1"><div></div><div></div></div>
265 <div class="br item item2"><div></div><div></div></div>
266 <div class="br item item3"><div></div><div></div></div>
267 <div class="br item item4"><div></div><div></div></div>
268 <div class="br item item5"><div></div><div></div></div>
269 </div>
271 <div class="set varypos athalf border">
272 <div class="tl item item1"><div></div><div></div></div>
273 <div class="tl item item2"><div></div><div></div></div>
274 <div class="tl item item3"><div></div><div></div></div>
275 <div class="tl item item4"><div></div><div></div></div>
276 <div class="tl item item5"><div></div><div></div></div>
278 <div class="tr item item1"><div></div><div></div></div>
279 <div class="tr item item2"><div></div><div></div></div>
280 <div class="tr item item3"><div></div><div></div></div>
281 <div class="tr item item4"><div></div><div></div></div>
282 <div class="tr item item5"><div></div><div></div></div>
284 <div class="bl item item1"><div></div><div></div></div>
285 <div class="bl item item2"><div></div><div></div></div>
286 <div class="bl item item3"><div></div><div></div></div>
287 <div class="bl item item4"><div></div><div></div></div>
288 <div class="bl item item5"><div></div><div></div></div>
290 <div class="br item item1"><div></div><div></div></div>
291 <div class="br item item2"><div></div><div></div></div>
292 <div class="br item item3"><div></div><div></div></div>
293 <div class="br item item4"><div></div><div></div></div>
294 <div class="br item item5"><div></div><div></div></div>
295 </div>
297 </body>
298 </html>
