| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>This tests that we properly position render layers when composition is introduced.</title> |
| <style> |
| div { |
| background-color: black; |
| position: absolute; |
| } |
| .parent { |
| background-color: red; |
| -webkit-transform: translateZ(0); |
| } |
| </style> |
| </head> |
| <body> |
| <p id="container"></p> |
| <script> |
| var childPos = -2; |
| function createGrid(topPos, leftPos) { |
| var container = document.getElementById("container"); |
| localTopPos = topPos; |
| localLeftPos = leftPos; |
| for (var i = 0; i < 10; ++i, localTopPos = localTopPos + 7) { |
| localLeftPos = leftPos; |
| for (var j = 0; j < 10; ++j, localLeftPos = localLeftPos + 7, childPos = childPos < 2 ? childPos + 0.1 : -2) { |
| var outer = document.createElement("div"); |
| outer.className = "parent"; |
| outer.style.top = localTopPos + "px"; |
| outer.style.left = localLeftPos + "px"; |
| outer.style.width = "4px"; |
| outer.style.height = "4px"; |
| |
| var inner = document.createElement("div"); |
| inner.style.top = childPos + "px"; |
| inner.style.left = childPos + "px"; |
| inner.style.width = "2px"; |
| inner.style.height = "2px"; |
| |
| outer.appendChild(inner); |
| container.appendChild(outer); |
| } |
| } |
| } |
| |
| for (var i = 0; i < 10; ++i) |
| createGrid(i * 0.1, i * 70.1); |
| </script> |
| |
| </body> |
| </html> |
