blob: 547d8c2a2c7a190b20a5aff23ea71cb5050a7943 [file] [log] [blame]
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.
#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;
if (window.testRunner)
function appendLayerTreeTextToConsole()
if (!window.testRunner || !window.internals)
var layerTreeText = internals.layerTreeAsText(document);
function runTest()
// Dump the layer tree with the initial drop shadow, which does not overlap the composited layer.
// Force a software-painted drop shadow on Safari.
var targetElement = document.getElementById("software-layer-to-promote");
targetElement.className = "final-drop-shadow";
// Dump the layer tree again with the final drop shadow, which overlaps the composited layer.
if (window.testRunner) {
<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>