| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style> |
| .container { |
| width: 120px; |
| position: relative; |
| left: 50px; |
| z-index: 0; /* create stacking context */ |
| border: 1px solid black; |
| background-color: white; |
| } |
| |
| .box { |
| position: relative; |
| width: 100px; |
| height: 100px; |
| margin: 10px; |
| background-color: blue; |
| } |
| |
| .force-layer { |
| -webkit-transform: translateZ(-1px); |
| } |
| |
| .rotate-45deg { |
| -webkit-transform: rotate(45deg); |
| } |
| |
| .yellow { |
| background-color: yellow; |
| } |
| |
| .gray { |
| background-color: gray; |
| } |
| |
| .green { |
| background-color: green; |
| outline: 1px solid black; |
| } |
| |
| .animating1 { |
| -webkit-animation: translate1 2s linear infinite alternate; |
| } |
| |
| @-webkit-keyframes translate1 { |
| from { -webkit-transform: translate(0px, -110px); } |
| to { -webkit-transform: translate(0px, 700px); } |
| } |
| </style> |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| function queueBoxForAnimation(elementId, animationClass, callback) { |
| var box = document.getElementById(elementId); |
| box.addEventListener('webkitAnimationStart', callback, false); |
| box.classList.add(animationClass); |
| } |
| |
| function runTest() |
| { |
| queueBoxForAnimation("to-animate1", "animating1", animationStarted); |
| } |
| |
| function animationStarted() |
| { |
| var layerTrees = ""; |
| |
| if (window.testRunner) { |
| var layersElement = document.getElementById('layers'); |
| // Make sure we don't include the #layers element in the tree. The text size |
| // might differ between platforms. |
| layersElement.style.display = "none"; |
| 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("first-green-box").classList.add("rotate-45deg"); |
| |
| if (window.testRunner) { |
| layerTrees += "\nAfter:\n" + window.internals.layerTreeAsText(document); |
| layersElement.style.display = "block"; |
| layersElement.innerText = layerTrees; |
| testRunner.notifyDone(); |
| } |
| } |
| window.addEventListener('load', runTest, false); |
| </script> |
| </head> |
| <body> |
| <!-- Testing that compositor doesn't create unnecessary composited layers when they could be drawn in parents backing texture. |
| The green boxes should not have composited layers. |
| --> |
| <!-- This div will not get a layer --> |
| <div class="box gray"></div> |
| <div id="to-animate1" class="box"></div> |
| <div class="container"> |
| <!-- Force a composited box inside the container. The fact that there's an animation going behind the parent container, |
| should not force the remaining children of this element create their own composited layers. --> |
| <div class="box gray force-layer"></div> |
| <!-- This following have no reason to get a layer, as the parent will get one. --> |
| <div id="first-green-box" class="box green"></div> |
| <div class="box green rotate-45deg"></div> |
| <div class="box green"></div> |
| </div> |
| <!-- This div will also get a layer --> |
| <div class="box yellow"></div> |
| <pre id="layers">Layer tree goes here in DRT</pre> |
| </body> |
| </html> |
