REGRESSION(r217695): Offscreen/overflowed items not being rendered while translating...
[WebKit-https.git] / LayoutTests / compositing / hidpi-compositing-layer-with-zero-sized-container.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>This tests that child content is positioned properly when the parent compositing layer has zero width/height.</title>
5 <style>
6   .container {
7     position: absolute;
8     -webkit-transform: translateZ(0); 
9   }
10
11   .child {
12     position: absolute;
13     width: 5px;
14     height: 5px;
15     border: 0.5px solid red;
16 }
17 </style>
18 </head>
19 <body>
20 <p id="container"></p>
21 <script>
22   var container = document.getElementById("container");
23   containerAdjustment = 0;
24   for (i = 0; i < 40; ++i) {
25     var childAdjustment = 0;
26     for (j = 0; j < 40; ++j) {
27       var c = document.createElement("div");
28       c.className = "container";
29       c.style.top = (6 * i + j * containerAdjustment) + "px";
30       c.style.left = (6 * j + i * containerAdjustment) + "px";
31
32       var child = document.createElement("div");
33       child.className = "child";
34       child.style.top = (6 * i + j * childAdjustment) + "px";
35       child.style.left = (6 * j + i * childAdjustment) + "px";
36       c.appendChild(child);
37
38       container.appendChild(c);
39       childAdjustment += 0.05;
40     }
41     containerAdjustment += 0.05;
42   }
43 </script>
44 </body>
45 </html>