<!DOCTYPE html>
<!-- 
    This tests verifies that blur is repainted using the full source image of the element instead of just the dirty area.
    Also it tests that the clipping rectangle of the box is not affecting the shadow.
    There should be two boxes on the screen: one blue and one green of same size. No red should be visible.
-->
<html>
<head>
    <style>
        .clipping_box {
            margin: 20px;
            width: 100px;
            height: 100px;
            overflow: hidden;
            background: red;
        }

        .empty_box {
            height: 50px;
        }

        .box {
            height: 100px;
            width: 100px;
            background-color: green;
        }

        .before {
            background-color: transparent;
        }

        .blur {
            filter: drop-shadow(0px -100px 0px blue);
        }
    </style>

    <script src="../../resources/run-after-layout-and-paint.js"></script>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsTextWithPixelResults();
            testRunner.waitUntilDone();
        }
        function repaintTest()
        {
            runAfterLayoutAndPaint(function() {
                document.querySelector(".before").classList.remove("before");
                if (window.testRunner)
                    testRunner.notifyDone();
            });
        }
    </script>
</head>
<body onload="repaintTest()">
    <div class="clipping_box">
        <div class="blur">
            <div class="empty_box"></div>
            <div class="box before"></div>
        </div>
    </div>
</body>
</html>