<!DOCTYPE HTML>
<head>
    <!-- This test will check if the isolation flag is properly computed when we append a subtree having blending elements and the root of this subtree creates a stacking context. -->
    <link rel="stylesheet" href="resources/blending-style.css">
    <style>
        div {
            /* This forces render layers, avoiding normal flow only issues */
            position: relative;
         }
        .leaf {
            background-color: #ff00ff;
            left:-25px;
        }
        .append-root {
            background-color: #ffff44;
        }
    </style>
</head>
<body>
    <div class="isolating lime box">
        <div id="target" class="yellow box" style="left: 50px;"></div>
    </div>
    <script type="text/javascript">
        if (window.testRunner)
            window.testRunner.waitUntilDone();

        function change() {
            var blendingElement = document.createElement("div");
            blendingElement.className = "leaf box difference";

            var toAppend = document.createElement("div");
            toAppend.appendChild(blendingElement);
            toAppend.className = "isolating box append-root";

            var target = document.getElementById("target");
            target.appendChild(toAppend);

            if (window.testRunner)
                window.testRunner.notifyDone();
        }

        window.setTimeout("change()", 10);
    </script>
</body>