blob: 6246f1288bc46b59a14b44e1d0de98c32a66d1b2 [file] [log] [blame]
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.
#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);
if (window.testRunner)
function appendLayerTreeTextToConsole()
if (!window.testRunner || !window.internals)
var layerTreeText = internals.layerTreeAsText(document);
function runTest()
// Dump the layer tree with the compositor-painted drop shadow.
// Force a software-painted drop shadow on Safari.
var targetElement = document.getElementById("composited-parent");
targetElement.className = "software-painted-shadow";
// Dump the layer tree again with the software-painted drop shadow.
if (window.testRunner) {
<body onload="runTest()">
<div id="composited-parent" class="compositor-painted-shadow">
<div id="absolutely-positioned-composited-child"></div>
<pre id="console"></pre>