| <html> |
| <head> |
| <!-- |
| This test verifies that software layers are promoted to composited layers when their filter |
| outsets change to overlap a hardware layer. |
| |
| If the test passes, the green drop-shadow of the black layer should appear over the blue |
| composited layer. |
| |
| Note: Safari will paint the filter in software because drop-shadow is not the last filter in |
| the chain. |
| --> |
| <style> |
| #software-layer-to-promote { |
| background-color: black; |
| position: absolute; |
| top: 100px; |
| left: 100px; |
| width: 100px; |
| height: 100px; |
| } |
| .initial-drop-shadow { |
| /* Safari paints filters in software when drop-shadow is not the last filter in the chain. */ |
| filter: drop-shadow(10px 10px 0px green) grayscale(0.5); |
| } |
| .final-drop-shadow { |
| filter: drop-shadow(100px 100px 0px green) grayscale(0.5); |
| } |
| #composited-layer-to-overlap { |
| background-color: blue; |
| transform: translateZ(0); |
| position: absolute; |
| top: 250px; |
| left: 250px; |
| width: 100px; |
| height: 100px; |
| } |
| </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 initial drop shadow, which does not overlap the composited layer. |
| appendLayerTreeTextToConsole(); |
| |
| // Force a software-painted drop shadow on Safari. |
| var targetElement = document.getElementById("software-layer-to-promote"); |
| targetElement.className = "final-drop-shadow"; |
| appendLayerTreeTextToConsole(); |
| |
| // Dump the layer tree again with the final drop shadow, which overlaps the composited layer. |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.notifyDone(); |
| } |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <div id="composited-layer-to-overlap"></div> |
| <div id="software-layer-to-promote" class="initial-drop-shadow"></div> |
| <pre id="console"></pre> |
| </body> |
| </html> |
