1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/reftests/pixel-rounding/background-image-tiling-ref.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,298 @@
1.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
1.5 + "http://www.w3.org/TR/html4/strict.dtd">
1.6 +<html lang="en-US">
1.7 +<head>
1.8 + <title>Pixel rounding of background image tiling</title>
1.9 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
1.10 + <meta http-equiv="Content-Style-Type" content="text/css">
1.11 + <style type="text/css">
1.12 +
1.13 + body { background: black; }
1.14 +
1.15 + .set {
1.16 + height: 60px;
1.17 + position: relative;
1.18 + }
1.19 +
1.20 + .item {
1.21 + position: absolute;
1.22 + width: 10px;
1.23 + height: 10px;
1.24 + background: aqua;
1.25 + overflow: hidden;
1.26 + }
1.27 + .item > div {
1.28 + position: absolute;
1.29 + width: 15px;
1.30 + height: 15px;
1.31 + border: 1px solid yellow;
1.32 + }
1.33 +
1.34 + .item1 { left: 0px; }
1.35 + .item2 { left: 15px; }
1.36 + .item3 { left: 30px; }
1.37 + .item4 { left: 45px; }
1.38 + .item5 { left: 60px; }
1.39 +
1.40 + .tl { top: 0px; }
1.41 + .tl > div { top: 0; left: 0; }
1.42 +
1.43 + .tr { top: 15px; }
1.44 + .tr > div { top: 0; right: 0; }
1.45 +
1.46 + .bl { top: 30px; }
1.47 + .bl > div { bottom: 0; left: 0; }
1.48 +
1.49 + .br { top: 45px; }
1.50 + .br > div { bottom: 0; right: 0; }
1.51 +
1.52 + .varydim .item1 { height: 10px; width: 11px; }
1.53 + .varydim .item2 { height: 10px; width: 11px; }
1.54 + .varydim .item3 { height: 11px; width: 11px; }
1.55 + .varydim .item4 { height: 11px; width: 10px; }
1.56 + .varydim .item5 { height: 11px; width: 10px; }
1.57 +
1.58 + .varydim.athalf .item2 { width: 10px; }
1.59 + .varydim.athalf .item3 { height: 10px; width: 10px; }
1.60 + .varydim.athalf .item4 { height: 10px; }
1.61 +
1.62 + .varypos .item1 { margin-top: 0px; margin-left: 1px; }
1.63 + .varypos .item2 { margin-top: 0px; margin-left: 1px; }
1.64 + .varypos .item3 { margin-top: 1px; margin-left: 1px; }
1.65 + .varypos .item4 { margin-top: 1px; margin-left: 0px; }
1.66 + .varypos .item5 { margin-top: 1px; margin-left: 0px; }
1.67 +
1.68 + .varydim.athalf .item {
1.69 + margin-top: 1px; margin-left: 1px;
1.70 + }
1.71 +
1.72 + .varypos.athalf .item1 { width: 11px; height: 11px; }
1.73 + .varypos.athalf .item2 { height: 11px; }
1.74 + .varypos.athalf .item4 { width: 11px; }
1.75 + .varypos.athalf .item5 { width: 11px; height: 11px; }
1.76 +
1.77 + /* remember that abs pos children are relative to the padding box */
1.78 + .border .item { padding: 1px; }
1.79 +
1.80 + /*
1.81 + * For the tiled images, use two divs as the children, and offset
1.82 + * one so that it does only the vertical line, and the other so it
1.83 + * does only the horizontal line.
1.84 + */
1.85 + .border .item div:first-child { margin: 1px -1px; }
1.86 + .border .item div:first-child + div { margin: -1px 1px; }
1.87 +
1.88 + </style>
1.89 +</head>
1.90 +<body>
1.91 +
1.92 +<div class="set varydim">
1.93 + <div class="tl item item1"><div></div></div>
1.94 + <div class="tl item item2"><div></div></div>
1.95 + <div class="tl item item3"><div></div></div>
1.96 + <div class="tl item item4"><div></div></div>
1.97 + <div class="tl item item5"><div></div></div>
1.98 +
1.99 + <div class="tr item item1"><div></div></div>
1.100 + <div class="tr item item2"><div></div></div>
1.101 + <div class="tr item item3"><div></div></div>
1.102 + <div class="tr item item4"><div></div></div>
1.103 + <div class="tr item item5"><div></div></div>
1.104 +
1.105 + <div class="bl item item1"><div></div></div>
1.106 + <div class="bl item item2"><div></div></div>
1.107 + <div class="bl item item3"><div></div></div>
1.108 + <div class="bl item item4"><div></div></div>
1.109 + <div class="bl item item5"><div></div></div>
1.110 +
1.111 + <div class="br item item1"><div></div></div>
1.112 + <div class="br item item2"><div></div></div>
1.113 + <div class="br item item3"><div></div></div>
1.114 + <div class="br item item4"><div></div></div>
1.115 + <div class="br item item5"><div></div></div>
1.116 +</div>
1.117 +
1.118 +<div class="set varypos">
1.119 + <div class="tl item item1"><div></div></div>
1.120 + <div class="tl item item2"><div></div></div>
1.121 + <div class="tl item item3"><div></div></div>
1.122 + <div class="tl item item4"><div></div></div>
1.123 + <div class="tl item item5"><div></div></div>
1.124 +
1.125 + <div class="tr item item1"><div></div></div>
1.126 + <div class="tr item item2"><div></div></div>
1.127 + <div class="tr item item3"><div></div></div>
1.128 + <div class="tr item item4"><div></div></div>
1.129 + <div class="tr item item5"><div></div></div>
1.130 +
1.131 + <div class="bl item item1"><div></div></div>
1.132 + <div class="bl item item2"><div></div></div>
1.133 + <div class="bl item item3"><div></div></div>
1.134 + <div class="bl item item4"><div></div></div>
1.135 + <div class="bl item item5"><div></div></div>
1.136 +
1.137 + <div class="br item item1"><div></div></div>
1.138 + <div class="br item item2"><div></div></div>
1.139 + <div class="br item item3"><div></div></div>
1.140 + <div class="br item item4"><div></div></div>
1.141 + <div class="br item item5"><div></div></div>
1.142 +</div>
1.143 +
1.144 +<div class="set varydim athalf">
1.145 + <div class="tl item item1"><div></div></div>
1.146 + <div class="tl item item2"><div></div></div>
1.147 + <div class="tl item item3"><div></div></div>
1.148 + <div class="tl item item4"><div></div></div>
1.149 + <div class="tl item item5"><div></div></div>
1.150 +
1.151 + <div class="tr item item1"><div></div></div>
1.152 + <div class="tr item item2"><div></div></div>
1.153 + <div class="tr item item3"><div></div></div>
1.154 + <div class="tr item item4"><div></div></div>
1.155 + <div class="tr item item5"><div></div></div>
1.156 +
1.157 + <div class="bl item item1"><div></div></div>
1.158 + <div class="bl item item2"><div></div></div>
1.159 + <div class="bl item item3"><div></div></div>
1.160 + <div class="bl item item4"><div></div></div>
1.161 + <div class="bl item item5"><div></div></div>
1.162 +
1.163 + <div class="br item item1"><div></div></div>
1.164 + <div class="br item item2"><div></div></div>
1.165 + <div class="br item item3"><div></div></div>
1.166 + <div class="br item item4"><div></div></div>
1.167 + <div class="br item item5"><div></div></div>
1.168 +</div>
1.169 +
1.170 +<div class="set varypos athalf">
1.171 + <div class="tl item item1"><div></div></div>
1.172 + <div class="tl item item2"><div></div></div>
1.173 + <div class="tl item item3"><div></div></div>
1.174 + <div class="tl item item4"><div></div></div>
1.175 + <div class="tl item item5"><div></div></div>
1.176 +
1.177 + <div class="tr item item1"><div></div></div>
1.178 + <div class="tr item item2"><div></div></div>
1.179 + <div class="tr item item3"><div></div></div>
1.180 + <div class="tr item item4"><div></div></div>
1.181 + <div class="tr item item5"><div></div></div>
1.182 +
1.183 + <div class="bl item item1"><div></div></div>
1.184 + <div class="bl item item2"><div></div></div>
1.185 + <div class="bl item item3"><div></div></div>
1.186 + <div class="bl item item4"><div></div></div>
1.187 + <div class="bl item item5"><div></div></div>
1.188 +
1.189 + <div class="br item item1"><div></div></div>
1.190 + <div class="br item item2"><div></div></div>
1.191 + <div class="br item item3"><div></div></div>
1.192 + <div class="br item item4"><div></div></div>
1.193 + <div class="br item item5"><div></div></div>
1.194 +</div>
1.195 +
1.196 +<div class="set varydim border">
1.197 + <div class="tl item item1"><div></div><div></div></div>
1.198 + <div class="tl item item2"><div></div><div></div></div>
1.199 + <div class="tl item item3"><div></div><div></div></div>
1.200 + <div class="tl item item4"><div></div><div></div></div>
1.201 + <div class="tl item item5"><div></div><div></div></div>
1.202 +
1.203 + <div class="tr item item1"><div></div><div></div></div>
1.204 + <div class="tr item item2"><div></div><div></div></div>
1.205 + <div class="tr item item3"><div></div><div></div></div>
1.206 + <div class="tr item item4"><div></div><div></div></div>
1.207 + <div class="tr item item5"><div></div><div></div></div>
1.208 +
1.209 + <div class="bl item item1"><div></div><div></div></div>
1.210 + <div class="bl item item2"><div></div><div></div></div>
1.211 + <div class="bl item item3"><div></div><div></div></div>
1.212 + <div class="bl item item4"><div></div><div></div></div>
1.213 + <div class="bl item item5"><div></div><div></div></div>
1.214 +
1.215 + <div class="br item item1"><div></div><div></div></div>
1.216 + <div class="br item item2"><div></div><div></div></div>
1.217 + <div class="br item item3"><div></div><div></div></div>
1.218 + <div class="br item item4"><div></div><div></div></div>
1.219 + <div class="br item item5"><div></div><div></div></div>
1.220 +</div>
1.221 +
1.222 +<div class="set varypos border">
1.223 + <div class="tl item item1"><div></div><div></div></div>
1.224 + <div class="tl item item2"><div></div><div></div></div>
1.225 + <div class="tl item item3"><div></div><div></div></div>
1.226 + <div class="tl item item4"><div></div><div></div></div>
1.227 + <div class="tl item item5"><div></div><div></div></div>
1.228 +
1.229 + <div class="tr item item1"><div></div><div></div></div>
1.230 + <div class="tr item item2"><div></div><div></div></div>
1.231 + <div class="tr item item3"><div></div><div></div></div>
1.232 + <div class="tr item item4"><div></div><div></div></div>
1.233 + <div class="tr item item5"><div></div><div></div></div>
1.234 +
1.235 + <div class="bl item item1"><div></div><div></div></div>
1.236 + <div class="bl item item2"><div></div><div></div></div>
1.237 + <div class="bl item item3"><div></div><div></div></div>
1.238 + <div class="bl item item4"><div></div><div></div></div>
1.239 + <div class="bl item item5"><div></div><div></div></div>
1.240 +
1.241 + <div class="br item item1"><div></div><div></div></div>
1.242 + <div class="br item item2"><div></div><div></div></div>
1.243 + <div class="br item item3"><div></div><div></div></div>
1.244 + <div class="br item item4"><div></div><div></div></div>
1.245 + <div class="br item item5"><div></div><div></div></div>
1.246 +</div>
1.247 +
1.248 +<div class="set varydim athalf border">
1.249 + <div class="tl item item1"><div></div><div></div></div>
1.250 + <div class="tl item item2"><div></div><div></div></div>
1.251 + <div class="tl item item3"><div></div><div></div></div>
1.252 + <div class="tl item item4"><div></div><div></div></div>
1.253 + <div class="tl item item5"><div></div><div></div></div>
1.254 +
1.255 + <div class="tr item item1"><div></div><div></div></div>
1.256 + <div class="tr item item2"><div></div><div></div></div>
1.257 + <div class="tr item item3"><div></div><div></div></div>
1.258 + <div class="tr item item4"><div></div><div></div></div>
1.259 + <div class="tr item item5"><div></div><div></div></div>
1.260 +
1.261 + <div class="bl item item1"><div></div><div></div></div>
1.262 + <div class="bl item item2"><div></div><div></div></div>
1.263 + <div class="bl item item3"><div></div><div></div></div>
1.264 + <div class="bl item item4"><div></div><div></div></div>
1.265 + <div class="bl item item5"><div></div><div></div></div>
1.266 +
1.267 + <div class="br item item1"><div></div><div></div></div>
1.268 + <div class="br item item2"><div></div><div></div></div>
1.269 + <div class="br item item3"><div></div><div></div></div>
1.270 + <div class="br item item4"><div></div><div></div></div>
1.271 + <div class="br item item5"><div></div><div></div></div>
1.272 +</div>
1.273 +
1.274 +<div class="set varypos athalf border">
1.275 + <div class="tl item item1"><div></div><div></div></div>
1.276 + <div class="tl item item2"><div></div><div></div></div>
1.277 + <div class="tl item item3"><div></div><div></div></div>
1.278 + <div class="tl item item4"><div></div><div></div></div>
1.279 + <div class="tl item item5"><div></div><div></div></div>
1.280 +
1.281 + <div class="tr item item1"><div></div><div></div></div>
1.282 + <div class="tr item item2"><div></div><div></div></div>
1.283 + <div class="tr item item3"><div></div><div></div></div>
1.284 + <div class="tr item item4"><div></div><div></div></div>
1.285 + <div class="tr item item5"><div></div><div></div></div>
1.286 +
1.287 + <div class="bl item item1"><div></div><div></div></div>
1.288 + <div class="bl item item2"><div></div><div></div></div>
1.289 + <div class="bl item item3"><div></div><div></div></div>
1.290 + <div class="bl item item4"><div></div><div></div></div>
1.291 + <div class="bl item item5"><div></div><div></div></div>
1.292 +
1.293 + <div class="br item item1"><div></div><div></div></div>
1.294 + <div class="br item item2"><div></div><div></div></div>
1.295 + <div class="br item item3"><div></div><div></div></div>
1.296 + <div class="br item item4"><div></div><div></div></div>
1.297 + <div class="br item item5"><div></div><div></div></div>
1.298 +</div>
1.299 +
1.300 +</body>
1.301 +</html>
