blob: 83663ed14d50f2f6fc021fd6b1674eb9636fe3da [file] [log] [blame]
zalan@apple.comaa00cbd2014-04-04 16:30:18 +00001<!DOCTYPE html>
2<html>
3<head>
4<title>This tests that bitmap background images sized and positioned properly on subpixels when background-origin is present.</title>
5<style>
6 div {
7 background: url("resources/black25x25.png");
8 position: fixed;
9 top: 0px;
10 background-repeat: no-repeat;
11 }
12</style>
13</head>
14<body>
15<p id="container"></p>
16<script>
17 var container = document.getElementById("container");
18 w=50; h=50;
19 for (i = 0; i < 10; ++i) {
20 var e = document.createElement("div");
21 e.style.left = (w * i) + "px";
22 e.style.width = w + "px";
23 e.style.height = h + "px";
24 e.style.backgroundOrigin = "border-box";
25 e.style.borderLeft = "solid 25px red";
26 container.appendChild(e);
27 w+=0.1;
28 h+=0.1;
29 }
30
31 w=50; h=50;
32 for (i = 0; i < 10; ++i) {
33 var e = document.createElement("div");
34 e.style.left = (w * i) + "px";
35 e.style.top = "50px";
36 e.style.width = w + "px";
37 e.style.height = h + "px";
38 e.style.backgroundOrigin = "padding-box";
39 e.style.borderLeft = "solid 25px red";
40 container.appendChild(e);
41 w+=0.1;
42 h+=0.1;
43 }
44
45 w=50; h=50;
46 padding = 0;
47 for (i = 0; i < 10; ++i) {
48 var e = document.createElement("div");
49 e.style.left = (w * i) + "px";
50 e.style.top = "100px";
51 e.style.width = w + "px";
52 e.style.height = h + "px";
53 e.style.backgroundOrigin = "content-box";
54 e.style.paddingLeft = padding + "px";
55 e.style.borderLeft = "solid 25px red";
56 container.appendChild(e);
57 w+=0.1;
58 h+=0.1;
59 padding+=0.1;
60 }
61</script>
62</body>
63</html>