<!DOCTYPE HTML>
<head>
    <link rel="stylesheet" href="../resources/blending-style.css">
    <style>
        div {
            margin: 20px;
            width: 60px;
            height: 60px;
        }

        .stacking2 {
            opacity: 0.99;
        }
    </style>
    <script>
        if (window.testRunner)
            testRunner.dumpAsText(true);
    </script>
    <script src="../../../fast/repaint/resources/text-based-repaint.js" type="text/javascript"></script>
</head>
<!-- Repaint test to ensure that setting a blend mode dynamically triggers this operation
    only with the contents of the nearest ancestor stacking context. -->
<body onload="runRepaintTest()">
    <p>Test if setting blend mode creates isolation.</p>
    <div class="lime stacking-context">
        <div id="first" class="blue"></div>
    </div>

    <p>Test if unsetting blend mode removes isolation.</p>
    <div class="lime stacking-context">
        <div id="second" class="blue difference"></div>
    </div>

    <p>Test if unsetting a parent's stacking context correctly removes isolation.</p>
    <div id="third" class="lime stacking-context">
        <div class="blue difference"></div>
    </div>

    <p>Test if switching a blend mode preserves isolation.</p>
     <div class="lime stacking-context">
         <div id="fourth" class="blue difference"></div>
     </div>

    <p>Test if switching the property that causes the parent to create a stacking context preserves isolation.</p>
    <div id="fifth" class="lime stacking-context">
        <div class="blue difference"></div>
    </div>

    <p>Test if unsetting a parent's stacking context correctly updates its parent isolation.</p>
    <div class="lime stacking-context">
        <div id="sixth" class="lime stacking-context">
            <div class="blue difference"></div>
        </div>
    </div>

    <script>
        function repaintTest() {
            document.getElementById('first').className = "blue difference";
            document.getElementById('second').className = "blue";

            document.getElementById('third').className = "lime";

            document.getElementById('fourth').className = "blue screen";

            document.getElementById('fifth').className = "lime stacking2";
            document.getElementById('sixth').className = "lime";
        }
     </script>
 </body>
