| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style> |
| .container { |
| position: relative; |
| } |
| .box { |
| position: absolute; |
| height: 150px; |
| width: 100px; |
| background-color: gray; |
| } |
| .green { |
| height: 100px; |
| background-color: green; |
| } |
| .composited { |
| -webkit-transform: translateZ(-1px); |
| } |
| .rotated-3d { |
| -webkit-transform: translateZ(-1px) rotate(45deg); |
| } |
| .top { |
| top: 0px; |
| } |
| .bottom { |
| top: 150px; |
| } |
| .left { |
| left: 0px; |
| } |
| .right { |
| left: 200px; |
| } |
| .center { |
| left: 100px; |
| top: 100px; |
| } |
| #layers { |
| position: absolute; |
| top: 350px; |
| } |
| </style> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function runTest() |
| { |
| var layerTrees = ""; |
| |
| if (window.testRunner) |
| layerTrees = "Before:\n" + window.internals.layerTreeAsText(document); |
| |
| // Rotate the first green box, so that it overlaps the first gray box in the container. |
| // That should force the creation of composited layers for all the other green boxes. |
| document.getElementById("green-box").classList.add("rotated-3d"); |
| |
| if (window.testRunner) { |
| layerTrees += "\nAfter:\n" + window.internals.layerTreeAsText(document); |
| document.getElementById('layers').innerText = layerTrees; |
| testRunner.notifyDone(); |
| } |
| } |
| window.addEventListener('load', runTest, false); |
| </script> |
| </head> |
| <body> |
| <!-- |
| Testing that 3D transforms are not forcing layers to become composited without checking for overlapping areas first. |
| In the first state, the green box is not rotated, so it doesn't overlap the gray ones, meaning that only the gray box |
| will become composited. |
| In the second state, the green box is rotated and will overlap the following layers, meaning that they are all forced to |
| get composited. |
| In the end there should be one rotated green box in the middle and two gray bars on the margins. Gray boxes |
| should display in front. |
| --> |
| <div class="container"> |
| <div id="green-box" class="box green center composited"></div> |
| <div class="box top left"></div> |
| <div class="box top right"></div> |
| <div class="box bottom left"></div> |
| <div class="box bottom right"></div> |
| </div> |
| <pre id="layers">Layer tree goes here in DRT</pre> |
| </body> |
| </html> |
