1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/reftests/pixel-rounding/background-image-tiling.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,291 @@
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 + }
1.25 +
1.26 + .item1 { left: 0px; }
1.27 + .item2 { left: 15px; }
1.28 + .item3 { left: 30px; }
1.29 + .item4 { left: 45px; }
1.30 + .item5 { left: 60px; }
1.31 +
1.32 + .tl {
1.33 + top: 0px;
1.34 + background-image: url(corner-tl.png);
1.35 + background-position: top left;
1.36 + }
1.37 +
1.38 + .tr {
1.39 + top: 15px;
1.40 + background-image: url(corner-tr.png);
1.41 + background-position: top right;
1.42 + }
1.43 +
1.44 + .bl {
1.45 + top: 30px;
1.46 + background-image: url(corner-bl.png);
1.47 + background-position: bottom left;
1.48 + }
1.49 +
1.50 + .br {
1.51 + top: 45px;
1.52 + background-image: url(corner-br.png);
1.53 + background-position: bottom right;
1.54 + }
1.55 +
1.56 + .varydim .item1 { height: 10.0px; width: 11.0px; }
1.57 + .varydim .item2 { height: 10.4px; width: 10.6px; }
1.58 + .varydim .item3 { height: 10.5px; width: 10.5px; }
1.59 + .varydim .item4 { height: 10.6px; width: 10.4px; }
1.60 + .varydim .item5 { height: 11.0px; width: 10.0px; }
1.61 +
1.62 + .varypos .item1 { margin-top: 0.0px; margin-left: 1.0px; }
1.63 + .varypos .item2 { margin-top: 0.4px; margin-left: 0.6px; }
1.64 + .varypos .item3 { margin-top: 0.5px; margin-left: 0.5px; }
1.65 + .varypos .item4 { margin-top: 0.6px; margin-left: 0.4px; }
1.66 + .varypos .item5 { margin-top: 1.0px; margin-left: 0.0px; }
1.67 +
1.68 + .varydim.athalf .item {
1.69 + margin-top: 0.5px; margin-left: 0.5px;
1.70 + }
1.71 +
1.72 + .varypos.athalf .item {
1.73 + width: 10.5px; height: 10.5px;
1.74 + }
1.75 +
1.76 + .border .item {
1.77 + /* force the tiling codepath by making sure there are multiple images */
1.78 + border: 1px solid transparent;
1.79 + }
1.80 +
1.81 + </style>
1.82 +</head>
1.83 +<body>
1.84 +
1.85 +<div class="set varydim">
1.86 + <div class="tl item item1"></div>
1.87 + <div class="tl item item2"></div>
1.88 + <div class="tl item item3"></div>
1.89 + <div class="tl item item4"></div>
1.90 + <div class="tl item item5"></div>
1.91 +
1.92 + <div class="tr item item1"></div>
1.93 + <div class="tr item item2"></div>
1.94 + <div class="tr item item3"></div>
1.95 + <div class="tr item item4"></div>
1.96 + <div class="tr item item5"></div>
1.97 +
1.98 + <div class="bl item item1"></div>
1.99 + <div class="bl item item2"></div>
1.100 + <div class="bl item item3"></div>
1.101 + <div class="bl item item4"></div>
1.102 + <div class="bl item item5"></div>
1.103 +
1.104 + <div class="br item item1"></div>
1.105 + <div class="br item item2"></div>
1.106 + <div class="br item item3"></div>
1.107 + <div class="br item item4"></div>
1.108 + <div class="br item item5"></div>
1.109 +</div>
1.110 +
1.111 +<div class="set varypos">
1.112 + <div class="tl item item1"></div>
1.113 + <div class="tl item item2"></div>
1.114 + <div class="tl item item3"></div>
1.115 + <div class="tl item item4"></div>
1.116 + <div class="tl item item5"></div>
1.117 +
1.118 + <div class="tr item item1"></div>
1.119 + <div class="tr item item2"></div>
1.120 + <div class="tr item item3"></div>
1.121 + <div class="tr item item4"></div>
1.122 + <div class="tr item item5"></div>
1.123 +
1.124 + <div class="bl item item1"></div>
1.125 + <div class="bl item item2"></div>
1.126 + <div class="bl item item3"></div>
1.127 + <div class="bl item item4"></div>
1.128 + <div class="bl item item5"></div>
1.129 +
1.130 + <div class="br item item1"></div>
1.131 + <div class="br item item2"></div>
1.132 + <div class="br item item3"></div>
1.133 + <div class="br item item4"></div>
1.134 + <div class="br item item5"></div>
1.135 +</div>
1.136 +
1.137 +<div class="set varydim athalf">
1.138 + <div class="tl item item1"></div>
1.139 + <div class="tl item item2"></div>
1.140 + <div class="tl item item3"></div>
1.141 + <div class="tl item item4"></div>
1.142 + <div class="tl item item5"></div>
1.143 +
1.144 + <div class="tr item item1"></div>
1.145 + <div class="tr item item2"></div>
1.146 + <div class="tr item item3"></div>
1.147 + <div class="tr item item4"></div>
1.148 + <div class="tr item item5"></div>
1.149 +
1.150 + <div class="bl item item1"></div>
1.151 + <div class="bl item item2"></div>
1.152 + <div class="bl item item3"></div>
1.153 + <div class="bl item item4"></div>
1.154 + <div class="bl item item5"></div>
1.155 +
1.156 + <div class="br item item1"></div>
1.157 + <div class="br item item2"></div>
1.158 + <div class="br item item3"></div>
1.159 + <div class="br item item4"></div>
1.160 + <div class="br item item5"></div>
1.161 +</div>
1.162 +
1.163 +<div class="set varypos athalf">
1.164 + <div class="tl item item1"></div>
1.165 + <div class="tl item item2"></div>
1.166 + <div class="tl item item3"></div>
1.167 + <div class="tl item item4"></div>
1.168 + <div class="tl item item5"></div>
1.169 +
1.170 + <div class="tr item item1"></div>
1.171 + <div class="tr item item2"></div>
1.172 + <div class="tr item item3"></div>
1.173 + <div class="tr item item4"></div>
1.174 + <div class="tr item item5"></div>
1.175 +
1.176 + <div class="bl item item1"></div>
1.177 + <div class="bl item item2"></div>
1.178 + <div class="bl item item3"></div>
1.179 + <div class="bl item item4"></div>
1.180 + <div class="bl item item5"></div>
1.181 +
1.182 + <div class="br item item1"></div>
1.183 + <div class="br item item2"></div>
1.184 + <div class="br item item3"></div>
1.185 + <div class="br item item4"></div>
1.186 + <div class="br item item5"></div>
1.187 +</div>
1.188 +
1.189 +<div class="set varydim border">
1.190 + <div class="tl item item1"></div>
1.191 + <div class="tl item item2"></div>
1.192 + <div class="tl item item3"></div>
1.193 + <div class="tl item item4"></div>
1.194 + <div class="tl item item5"></div>
1.195 +
1.196 + <div class="tr item item1"></div>
1.197 + <div class="tr item item2"></div>
1.198 + <div class="tr item item3"></div>
1.199 + <div class="tr item item4"></div>
1.200 + <div class="tr item item5"></div>
1.201 +
1.202 + <div class="bl item item1"></div>
1.203 + <div class="bl item item2"></div>
1.204 + <div class="bl item item3"></div>
1.205 + <div class="bl item item4"></div>
1.206 + <div class="bl item item5"></div>
1.207 +
1.208 + <div class="br item item1"></div>
1.209 + <div class="br item item2"></div>
1.210 + <div class="br item item3"></div>
1.211 + <div class="br item item4"></div>
1.212 + <div class="br item item5"></div>
1.213 +</div>
1.214 +
1.215 +<div class="set varypos border">
1.216 + <div class="tl item item1"></div>
1.217 + <div class="tl item item2"></div>
1.218 + <div class="tl item item3"></div>
1.219 + <div class="tl item item4"></div>
1.220 + <div class="tl item item5"></div>
1.221 +
1.222 + <div class="tr item item1"></div>
1.223 + <div class="tr item item2"></div>
1.224 + <div class="tr item item3"></div>
1.225 + <div class="tr item item4"></div>
1.226 + <div class="tr item item5"></div>
1.227 +
1.228 + <div class="bl item item1"></div>
1.229 + <div class="bl item item2"></div>
1.230 + <div class="bl item item3"></div>
1.231 + <div class="bl item item4"></div>
1.232 + <div class="bl item item5"></div>
1.233 +
1.234 + <div class="br item item1"></div>
1.235 + <div class="br item item2"></div>
1.236 + <div class="br item item3"></div>
1.237 + <div class="br item item4"></div>
1.238 + <div class="br item item5"></div>
1.239 +</div>
1.240 +
1.241 +<div class="set varydim athalf border">
1.242 + <div class="tl item item1"></div>
1.243 + <div class="tl item item2"></div>
1.244 + <div class="tl item item3"></div>
1.245 + <div class="tl item item4"></div>
1.246 + <div class="tl item item5"></div>
1.247 +
1.248 + <div class="tr item item1"></div>
1.249 + <div class="tr item item2"></div>
1.250 + <div class="tr item item3"></div>
1.251 + <div class="tr item item4"></div>
1.252 + <div class="tr item item5"></div>
1.253 +
1.254 + <div class="bl item item1"></div>
1.255 + <div class="bl item item2"></div>
1.256 + <div class="bl item item3"></div>
1.257 + <div class="bl item item4"></div>
1.258 + <div class="bl item item5"></div>
1.259 +
1.260 + <div class="br item item1"></div>
1.261 + <div class="br item item2"></div>
1.262 + <div class="br item item3"></div>
1.263 + <div class="br item item4"></div>
1.264 + <div class="br item item5"></div>
1.265 +</div>
1.266 +
1.267 +<div class="set varypos athalf border">
1.268 + <div class="tl item item1"></div>
1.269 + <div class="tl item item2"></div>
1.270 + <div class="tl item item3"></div>
1.271 + <div class="tl item item4"></div>
1.272 + <div class="tl item item5"></div>
1.273 +
1.274 + <div class="tr item item1"></div>
1.275 + <div class="tr item item2"></div>
1.276 + <div class="tr item item3"></div>
1.277 + <div class="tr item item4"></div>
1.278 + <div class="tr item item5"></div>
1.279 +
1.280 + <div class="bl item item1"></div>
1.281 + <div class="bl item item2"></div>
1.282 + <div class="bl item item3"></div>
1.283 + <div class="bl item item4"></div>
1.284 + <div class="bl item item5"></div>
1.285 +
1.286 + <div class="br item item1"></div>
1.287 + <div class="br item item2"></div>
1.288 + <div class="br item item3"></div>
1.289 + <div class="br item item4"></div>
1.290 + <div class="br item item5"></div>
1.291 +</div>
1.292 +
1.293 +</body>
1.294 +</html>
