| <html> |
| <head> |
| <!-- |
| On Safari, this test verifies that a composited layer's bounds include filter outsets after |
| a software-painted blur animation. On Safari, the filter animation is painted in software |
| because drop-shadow appears before another filter in the chain. |
| |
| If the test passes, you should see a blurred-out green element. Its composited layer should |
| be large enough so that the blur does not appear clipped. |
| --> |
| <style> |
| #composited-layer { |
| background-color: green; |
| transform: translateZ(0); |
| position: absolute; |
| top: 100px; |
| left: 100px; |
| width: 100px; |
| height: 100px; |
| } |
| .initial-drop-shadow { |
| /* Safari paints filters in software when drop-shadow appears before another filter in the chain. */ |
| filter: drop-shadow(10px 10px 0px black) blur(0); |
| } |
| .final-drop-shadow { |
| filter: drop-shadow(10px 10px 0px black) blur(25px); |
| animation-name: blur-animation; |
| animation-duration: 0.1s; |
| } |
| @keyframes blur-animation { |
| from { |
| filter: drop-shadow(10px 10px 0px black) blur(0); |
| } |
| to { |
| filter: drop-shadow(10px 10px 0px black) blur(25px); |
| } |
| } |
| </style> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| function startTest() |
| { |
| var targetElement = document.getElementById("composited-layer"); |
| if (window.testRunner) |
| targetElement.addEventListener("animationend", finishTest); |
| targetElement.className = "final-drop-shadow"; |
| } |
| |
| function finishTest() |
| { |
| var layerTreeText = internals.layerTreeAsText(document); |
| document.getElementById("console").appendChild(document.createTextNode(layerTreeText)); |
| testRunner.dumpAsText(); |
| testRunner.notifyDone(); |
| } |
| </script> |
| </head> |
| <body onload="startTest()"> |
| <div id="composited-layer" class="initial-drop-shadow"></div> |
| <pre id="console"></pre> |
| </body> |
| </html> |
