layout/reftests/pixel-rounding/background-image-tiling.html

branch
TOR_BUG_9701
changeset 9
a63d609f5ebe
equal deleted inserted replaced
-1:000000000000 0:f86af4dd357b
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">
9
10 body { background: black; }
11
12 .set {
13 height: 60px;
14 position: relative;
15 }
16
17 .item {
18 position: absolute;
19 width: 10px;
20 height: 10px;
21 }
22
23 .item1 { left: 0px; }
24 .item2 { left: 15px; }
25 .item3 { left: 30px; }
26 .item4 { left: 45px; }
27 .item5 { left: 60px; }
28
29 .tl {
30 top: 0px;
31 background-image: url(corner-tl.png);
32 background-position: top left;
33 }
34
35 .tr {
36 top: 15px;
37 background-image: url(corner-tr.png);
38 background-position: top right;
39 }
40
41 .bl {
42 top: 30px;
43 background-image: url(corner-bl.png);
44 background-position: bottom left;
45 }
46
47 .br {
48 top: 45px;
49 background-image: url(corner-br.png);
50 background-position: bottom right;
51 }
52
53 .varydim .item1 { height: 10.0px; width: 11.0px; }
54 .varydim .item2 { height: 10.4px; width: 10.6px; }
55 .varydim .item3 { height: 10.5px; width: 10.5px; }
56 .varydim .item4 { height: 10.6px; width: 10.4px; }
57 .varydim .item5 { height: 11.0px; width: 10.0px; }
58
59 .varypos .item1 { margin-top: 0.0px; margin-left: 1.0px; }
60 .varypos .item2 { margin-top: 0.4px; margin-left: 0.6px; }
61 .varypos .item3 { margin-top: 0.5px; margin-left: 0.5px; }
62 .varypos .item4 { margin-top: 0.6px; margin-left: 0.4px; }
63 .varypos .item5 { margin-top: 1.0px; margin-left: 0.0px; }
64
65 .varydim.athalf .item {
66 margin-top: 0.5px; margin-left: 0.5px;
67 }
68
69 .varypos.athalf .item {
70 width: 10.5px; height: 10.5px;
71 }
72
73 .border .item {
74 /* force the tiling codepath by making sure there are multiple images */
75 border: 1px solid transparent;
76 }
77
78 </style>
79 </head>
80 <body>
81
82 <div class="set varydim">
83 <div class="tl item item1"></div>
84 <div class="tl item item2"></div>
85 <div class="tl item item3"></div>
86 <div class="tl item item4"></div>
87 <div class="tl item item5"></div>
88
89 <div class="tr item item1"></div>
90 <div class="tr item item2"></div>
91 <div class="tr item item3"></div>
92 <div class="tr item item4"></div>
93 <div class="tr item item5"></div>
94
95 <div class="bl item item1"></div>
96 <div class="bl item item2"></div>
97 <div class="bl item item3"></div>
98 <div class="bl item item4"></div>
99 <div class="bl item item5"></div>
100
101 <div class="br item item1"></div>
102 <div class="br item item2"></div>
103 <div class="br item item3"></div>
104 <div class="br item item4"></div>
105 <div class="br item item5"></div>
106 </div>
107
108 <div class="set varypos">
109 <div class="tl item item1"></div>
110 <div class="tl item item2"></div>
111 <div class="tl item item3"></div>
112 <div class="tl item item4"></div>
113 <div class="tl item item5"></div>
114
115 <div class="tr item item1"></div>
116 <div class="tr item item2"></div>
117 <div class="tr item item3"></div>
118 <div class="tr item item4"></div>
119 <div class="tr item item5"></div>
120
121 <div class="bl item item1"></div>
122 <div class="bl item item2"></div>
123 <div class="bl item item3"></div>
124 <div class="bl item item4"></div>
125 <div class="bl item item5"></div>
126
127 <div class="br item item1"></div>
128 <div class="br item item2"></div>
129 <div class="br item item3"></div>
130 <div class="br item item4"></div>
131 <div class="br item item5"></div>
132 </div>
133
134 <div class="set varydim athalf">
135 <div class="tl item item1"></div>
136 <div class="tl item item2"></div>
137 <div class="tl item item3"></div>
138 <div class="tl item item4"></div>
139 <div class="tl item item5"></div>
140
141 <div class="tr item item1"></div>
142 <div class="tr item item2"></div>
143 <div class="tr item item3"></div>
144 <div class="tr item item4"></div>
145 <div class="tr item item5"></div>
146
147 <div class="bl item item1"></div>
148 <div class="bl item item2"></div>
149 <div class="bl item item3"></div>
150 <div class="bl item item4"></div>
151 <div class="bl item item5"></div>
152
153 <div class="br item item1"></div>
154 <div class="br item item2"></div>
155 <div class="br item item3"></div>
156 <div class="br item item4"></div>
157 <div class="br item item5"></div>
158 </div>
159
160 <div class="set varypos athalf">
161 <div class="tl item item1"></div>
162 <div class="tl item item2"></div>
163 <div class="tl item item3"></div>
164 <div class="tl item item4"></div>
165 <div class="tl item item5"></div>
166
167 <div class="tr item item1"></div>
168 <div class="tr item item2"></div>
169 <div class="tr item item3"></div>
170 <div class="tr item item4"></div>
171 <div class="tr item item5"></div>
172
173 <div class="bl item item1"></div>
174 <div class="bl item item2"></div>
175 <div class="bl item item3"></div>
176 <div class="bl item item4"></div>
177 <div class="bl item item5"></div>
178
179 <div class="br item item1"></div>
180 <div class="br item item2"></div>
181 <div class="br item item3"></div>
182 <div class="br item item4"></div>
183 <div class="br item item5"></div>
184 </div>
185
186 <div class="set varydim border">
187 <div class="tl item item1"></div>
188 <div class="tl item item2"></div>
189 <div class="tl item item3"></div>
190 <div class="tl item item4"></div>
191 <div class="tl item item5"></div>
192
193 <div class="tr item item1"></div>
194 <div class="tr item item2"></div>
195 <div class="tr item item3"></div>
196 <div class="tr item item4"></div>
197 <div class="tr item item5"></div>
198
199 <div class="bl item item1"></div>
200 <div class="bl item item2"></div>
201 <div class="bl item item3"></div>
202 <div class="bl item item4"></div>
203 <div class="bl item item5"></div>
204
205 <div class="br item item1"></div>
206 <div class="br item item2"></div>
207 <div class="br item item3"></div>
208 <div class="br item item4"></div>
209 <div class="br item item5"></div>
210 </div>
211
212 <div class="set varypos border">
213 <div class="tl item item1"></div>
214 <div class="tl item item2"></div>
215 <div class="tl item item3"></div>
216 <div class="tl item item4"></div>
217 <div class="tl item item5"></div>
218
219 <div class="tr item item1"></div>
220 <div class="tr item item2"></div>
221 <div class="tr item item3"></div>
222 <div class="tr item item4"></div>
223 <div class="tr item item5"></div>
224
225 <div class="bl item item1"></div>
226 <div class="bl item item2"></div>
227 <div class="bl item item3"></div>
228 <div class="bl item item4"></div>
229 <div class="bl item item5"></div>
230
231 <div class="br item item1"></div>
232 <div class="br item item2"></div>
233 <div class="br item item3"></div>
234 <div class="br item item4"></div>
235 <div class="br item item5"></div>
236 </div>
237
238 <div class="set varydim athalf border">
239 <div class="tl item item1"></div>
240 <div class="tl item item2"></div>
241 <div class="tl item item3"></div>
242 <div class="tl item item4"></div>
243 <div class="tl item item5"></div>
244
245 <div class="tr item item1"></div>
246 <div class="tr item item2"></div>
247 <div class="tr item item3"></div>
248 <div class="tr item item4"></div>
249 <div class="tr item item5"></div>
250
251 <div class="bl item item1"></div>
252 <div class="bl item item2"></div>
253 <div class="bl item item3"></div>
254 <div class="bl item item4"></div>
255 <div class="bl item item5"></div>
256
257 <div class="br item item1"></div>
258 <div class="br item item2"></div>
259 <div class="br item item3"></div>
260 <div class="br item item4"></div>
261 <div class="br item item5"></div>
262 </div>
263
264 <div class="set varypos athalf border">
265 <div class="tl item item1"></div>
266 <div class="tl item item2"></div>
267 <div class="tl item item3"></div>
268 <div class="tl item item4"></div>
269 <div class="tl item item5"></div>
270
271 <div class="tr item item1"></div>
272 <div class="tr item item2"></div>
273 <div class="tr item item3"></div>
274 <div class="tr item item4"></div>
275 <div class="tr item item5"></div>
276
277 <div class="bl item item1"></div>
278 <div class="bl item item2"></div>
279 <div class="bl item item3"></div>
280 <div class="bl item item4"></div>
281 <div class="bl item item5"></div>
282
283 <div class="br item item1"></div>
284 <div class="br item item2"></div>
285 <div class="br item item3"></div>
286 <div class="br item item4"></div>
287 <div class="br item item5"></div>
288 </div>
289
290 </body>
291 </html>

mercurial