| <html> |
| <head> |
| <!-- |
| On Safari, this test verifies that: |
| (1) A composited parent layer's composited child remains positioned correctly when the |
| parent's bounds change due to compositor-painted filters falling back to software |
| painting. On Safari, the filters fallback to software painting because drop-shadow is |
| not the last filter in the chain. |
| (2) The composited parent layer's bounds increase to include filter outsets when |
| compositor-painted filters fall back to software-painting. |
| |
| If the test passes, you should see the green child div exactly covering the red parent div, |
| so no red is visible. There should be a gray drop shadow visible. |
| --> |
| <style> |
| #composited-parent { |
| background-color: red; |
| transform: translateZ(0); |
| position: absolute; |
| top: 100px; |
| left: 100px; |
| width: 100px; |
| height: 100px; |
| } |
| #absolutely-positioned-composited-child { |
| background-color: green; |
| transform: translateZ(0); |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100px; |
| height: 100px; |
| } |
| .compositor-painted-shadow { |
| filter: grayscale(0.5) drop-shadow(-50px -50px 0px gray); |
| } |
| .software-painted-shadow { |
| /* Safari paints filters in software when drop-shadow is not the last filter in the chain. */ |
| filter: drop-shadow(-50px -50px 0px gray) grayscale(0.5); |
| } |
| </style> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| function appendLayerTreeTextToConsole() |
| { |
| if (!window.testRunner || !window.internals) |
| return; |
| |
| var layerTreeText = internals.layerTreeAsText(document); |
| document.getElementById("console").appendChild(document.createTextNode(layerTreeText)); |
| } |
| |
| function runTest() |
| { |
| // Dump the layer tree with the compositor-painted drop shadow. |
| appendLayerTreeTextToConsole(); |
| |
| // Force a software-painted drop shadow on Safari. |
| var targetElement = document.getElementById("composited-parent"); |
| targetElement.className = "software-painted-shadow"; |
| appendLayerTreeTextToConsole(); |
| |
| // Dump the layer tree again with the software-painted drop shadow. |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.notifyDone(); |
| } |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <div id="composited-parent" class="compositor-painted-shadow"> |
| <div id="absolutely-positioned-composited-child"></div> |
| </div> |
| <pre id="console"></pre> |
| </body> |
| </html> |
