<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>