<!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 or the transform rectangle of the box is not affecting the shadow.
    There should be two boxes on the screen: left one should be green and right one should be green, and both have the same size. 
    No red should be visible.
-->
<html>
<head>
    <style>
        .clipping_box {
            margin: 100px;
            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);
            transform-origin: 50px 50px;
            transform: rotate(90deg);
        }
    </style>

    <script src="../../resources/run-after-layout-and-paint.js"></script>
    <script>
        function repaintTest()
        {
            runAfterLayoutAndPaint(function() {
                document.querySelector(".before").classList.remove("before");
            }, true);
        }
    </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>