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

            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
        }
        #software-child {
            background-color: blue;
            -webkit-filter: drop-shadow(50px 50px 0 lightblue);

            position: absolute;
            top: 100px;
            left: 100px;
            width: 50px;
            height: 50px;
        }
        #composited-parent {
            background-color: black;
            -webkit-filter: drop-shadow(-25px -25px 0 gray);

            position: absolute;
            top: 330px;
            left: 330px;
            width: 100px;
            height: 100px;
            -webkit-transform: translate3d(0, 0, 0);
        }
        #composited-child {
            background-color: blue;
            -webkit-filter: drop-shadow(-50px -50px 0 lightblue);

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