<!DOCTYPE html>
<!-- 
    This tests verifies that filters repaint correctly in software 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 {
            height: 50px;
            width: 50px;
            margin-left: 20px;
            margin-bottom: 60px;
            background-color: green;
        }

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

        .software_from_none.before {
            filter: none;
        }

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

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

        .composited_from_software {
            /* force a composited layer */
            transform: translate3d(0, 0, 0);
            filter: drop-shadow(0px 0px 10px blue);
        }

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

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

        .software_from_composited.before {
            /* force a composited layer */
            transform: translate3d(0, 0, 0);
            filter: drop-shadow(0px 0px 10px red);
        }

        .none_from_software {
            filter: none;
        }

        .none_from_software.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 software_from_none before"></div>
    <div class="box software_from_software before"></div>
    <div class="box composited_from_software before"></div>
    <div class="box software_from_composited before"></div>
    <div class="box none_from_software before"></div>
</body>
</html>