<!doctype html>
<html>
<head>
    <title>
        This test verifies that a software layer will be promoted to a composited layer
        if its drop shadow intersects a composited layer.
    </title>
    <!-- If the test passes, the light green drop shadow should appear over the the black div where they intersect. -->
    <style>
        #software {
            background-color: green;
            -webkit-filter: drop-shadow(25px 25px 0 lightgreen);

            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
        }
        #composited {
            background-color: black;

            position: absolute;
            top: 105px;
            left: 105px;
            width: 100px;
            height: 100px;
            -webkit-transform: translate3d(0, 0, 0);
        }
    </style>
</head>
<body>
    <div id="composited"></div>
    <div id="software"></div>
    <pre id="console"></pre>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            document.getElementById("console").appendChild(document.createTextNode(window.internals.layerTreeAsText(document)));
        }
    </script>
</body>
</html>