background-image-tiling.html (7809B)
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>