<!DOCTYPE html>
<!-- 
    This tests verifies that filters repaint correctly in composited mode when the filter property is changed.
    You should see 5 green rectangles. First 4 of the rectangles have a blue shadow. There should be no red.
-->
<html>
<head>
    <style>
        .box {
            /* force a composited layer */
            -webkit-transform: translate3d(0, 0, 0);
            height: 50px;
            width: 50px;
            margin-left: 20px;
            margin-bottom: 60px;
            background-color: green;
        }
        
        .composited_from_none {
            -webkit-filter: drop-shadow(0px 0px 10px blue);
        }
        
        .composited_from_none.before {
            -webkit-filter: none;
        }
        
        .composited_from_composited {
            -webkit-filter: drop-shadow(0px 0px 10px blue);
        }
        
        .composited_from_composited.before {
            -webkit-filter: drop-shadow(0px 0px 10px red);
        }

        .composited_from_software {
            -webkit-filter: drop-shadow(0px 0px 10px blue);
        }
        
        .composited_from_software.before {
            -webkit-filter: drop-shadow(0px 0px 10px red) blur(1px);
        }
        
        .software_from_composited {
            -webkit-filter: drop-shadow(0px 0px 10px blue) blur(2px);
        }
        
        .software_from_composited.before {
            -webkit-filter: drop-shadow(0px 0px 10px red);
        }
        
        .none_from_composited {
            -webkit-filter: none;
        }
        
        .none_from_composited.before {
            -webkit-filter: drop-shadow(0px 0px 10px red);
        }
    </style>

    <script src="../../fast/repaint/resources/repaint.js"></script>
    <script>
        if (window.testRunner)
            testRunner.dumpAsText(true);

        function repaintTest()
        {
            var items = document.getElementsByClassName('before');
            while (items.length)
                items[0].classList.remove("before");
        }
    </script>
</head>

<body onload="runRepaintTest()">
    <div class="box composited_from_none before"></div>
    <div class="box composited_from_composited before"></div>
    <div class="box composited_from_software before"></div>
    <div class="box software_from_composited before"></div>
    <div class="box none_from_composited before"></div>
</body>
</html>