<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;
will-change: transform;
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
}
#absolutely-positioned-composited-child {
background-color: green;
will-change: transform;
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>