|
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> |