blob: e69fb6f1ecf4bf320f2fd2fc64bd384d626d01c7 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<title>This tests that child content is positioned properly when the parent compositing layer has zero width/height.</title>
<style>
.container {
position: absolute;
-webkit-transform: translateZ(0);
}
.child {
position: absolute;
width: 5px;
height: 5px;
border: 0.5px solid red;
}
</style>
</head>
<body>
<p id="container"></p>
<script>
var container = document.getElementById("container");
containerAdjustment = 0;
for (i = 0; i < 20; ++i) {
var childAdjustment = 0;
for (j = 0; j < 20; ++j) {
var c = document.createElement("div");
c.className = "container";
c.style.top = (6 * i + j * containerAdjustment) + "px";
c.style.left = (6 * j + i * containerAdjustment) + "px";
var child = document.createElement("div");
child.className = "child";
child.style.top = (6 * i + j * childAdjustment) + "px";
child.style.left = (6 * j + i * childAdjustment) + "px";
c.appendChild(child);
container.appendChild(c);
childAdjustment += 0.05;
}
containerAdjustment += 0.05;
}
</script>
</body>
</html>