| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style> |
| .container { |
| height: 460px; |
| width: 120px; |
| overflow: hidden; |
| 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); |
| } |
| |
| .yellow { |
| background-color: yellow; |
| } |
| |
| .gray { |
| background-color: gray; |
| } |
| |
| .animating1 { |
| -webkit-animation: translate1 2s linear infinite alternate; |
| } |
| |
| .animating2 { |
| -webkit-animation: translate2 2s linear infinite alternate; |
| } |
| |
| @-webkit-keyframes translate1 { |
| from { -webkit-transform: translate(0px, -110px); } |
| to { -webkit-transform: translate(0px, 590px); } |
| } |
| |
| @-webkit-keyframes translate2 { |
| from { -webkit-transform: translate(0px, -220px); } |
| to { -webkit-transform: translate(0px, 110px); } |
| } |
| </style> |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| function queueBoxForAnimation(elementId, animationClass, callback) { |
| var box = document.getElementById(elementId); |
| if (callback) |
| box.addEventListener('webkitAnimationStart', callback, false); |
| box.classList.add(animationClass); |
| } |
| |
| function runTest() |
| { |
| queueBoxForAnimation("to-animate1", "animating1"); |
| queueBoxForAnimation("to-animate2", "animating2", animationStarted); |
| } |
| |
| function animationStarted() |
| { |
| 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"; |
| layersElement.innerText = window.internals.layerTreeAsText(document); |
| layersElement.style.display = "block"; |
| testRunner.notifyDone(); |
| } |
| } |
| window.addEventListener('load', runTest, false); |
| </script> |
| </head> |
| <body> |
| <!-- The test checks that composited layers are created when needed to display elements in front of animated layers. |
| There are two animations going at the same time. The second animation is inside a clipping |
| container (white background with black border). The first animation should display behind the clipping container. |
| For both animations, the following should be true: |
| 1. Yellow box should display in front of the blue box. |
| 2. Gray boxes should display behind the blue box. |
| --> |
| <!-- This div will not get a layer --> |
| <div class="box gray"></div> |
| <div id="to-animate1" class="box"></div> |
| <div class="container"> |
| <!-- This div will be forced to get a layer --> |
| <div class="box gray force-layer"></div> |
| <!-- This div will not get a layer --> |
| <div class="box gray"></div> |
| <div id="to-animate2" class="box"></div> |
| <!-- This div will get a layer --> |
| <div class="box yellow"></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> |
