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

        .composited_from_none {
            filter: drop-shadow(0px 0px 10px blue);
        }

        .composited_from_none.before {
            filter: none;
        }

        .composited_from_composited {
            filter: drop-shadow(0px 0px 10px blue);
        }

        .composited_from_composited.before {
            filter: drop-shadow(0px 0px 10px red);
        }

        .composited_from_composited_zero_radius {
            filter: drop-shadow(0px 0px 10px blue);
        }

        .composited_from_composited_zero_radius.before {
            filter: drop-shadow(0px 0px 0px red);
        }

        .composited_from_composited_offset {
            filter: drop-shadow(0px 0px 10px blue);
        }

        .composited_from_composited_offset.before {
            filter: drop-shadow(-100px -100px 10px red);
        }

        .composited_from_software {
            filter: drop-shadow(0px 0px 10px blue);
        }

        .composited_from_software.before {
            filter: drop-shadow(0px 0px 10px red) blur(1px);
        }

        .software_from_composited {
            filter: drop-shadow(0px 0px 10px blue) blur(2px);
        }

        .software_from_composited.before {
            filter: drop-shadow(0px 0px 10px red);
        }

        .none_from_composited {
            filter: none;
        }

        .none_from_composited.before {
            filter: drop-shadow(0px 0px 10px red);
        }
    </style>

    <script src="../../resources/run-after-layout-and-paint.js"></script>
    <script>
        function repaintTest()
        {
            runAfterLayoutAndPaint(function() {
                var items = document.getElementsByClassName('before');
                while (items.length)
                    items[0].classList.remove("before");
            }, true);
        }
    </script>
</head>

<body onload="repaintTest()">
    <div class="box composited_from_none before"></div>
    <div class="box composited_from_composited before"></div>
    <div class="box composited_from_composited_zero_radius before"></div>
    <div class="box composited_from_composited_offset 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>