<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;
            will-change: transform;
            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>