[Pointer Events WPT] Unskip imported/w3c/web-platform-tests/pointerevents/pointereven...
[WebKit-https.git] / LayoutTests / compositing / ancestor-compositing-layer-is-on-subpixel-position.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>This tests that child content snapped to device pixel (borders are clear) when ancestor compositing layer has fractional bounds.</title>
5 <style>
6         .overlap { 
7                 -webkit-transform: translateZ(0);
8                 width: 500px;
9                 height: 40px;
10                 margin-bottom: -5px;
11         }
12
13         .container {
14         position: absolute;
15         top: 10px;
16                 width: 40px;
17                 height: 40px;
18                 z-index: 0;
19         }
20
21         .push_horizontal {
22                 position: absolute;
23                 left: -1.4px;
24                 width: 5px;
25                 height: 5px;
26         }
27
28         .push_vertical {
29                 position: absolute;
30                 top: -1.4px;
31                 width: 5px;
32                 height: 5px;
33         }
34
35         .fuzzy {
36                 border: 1px solid blue;
37                 width: 10px;
38                 height: 10px;
39                 -webkit-transform: translateZ(0);
40         }
41 </style>
42 </head>
43 <body>
44     <div class=overlap></div>
45 <script>
46         var delta = -1;
47         for (i = 0; i < 11; ++i) {
48                 var container = document.createElement("div");
49                 container.className = "container";
50                 container.style.left = 45 * i + "px";
51                 document.body.appendChild(container);
52
53                 var pushHorizontal = document.createElement("div");
54                 pushHorizontal.className = "push_horizontal";
55                 pushHorizontal.style.left = delta + "px";
56                 pushHorizontal.style.top = "0px"; 
57                 container.appendChild(pushHorizontal);
58
59                 var pushVertical = document.createElement("div");
60                 pushVertical.className = "push_vertical";
61                 pushVertical.style.left = "0px";
62                 pushVertical.style.top = delta + "px"; 
63                 container.appendChild(pushVertical);
64
65                 var fuzzy = document.createElement("div");
66                 fuzzy.className = "fuzzy";
67                 container.appendChild(fuzzy);
68                 delta -= 0.1;
69         }
70 </script>
71 </body>
72 </html>