filter-repaint-child-layers.html | Explore in Territory

<!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 filter area includes all the child Layers and applies the children's transforms correctly.
    You should see three green rectangles slightly rotated and blured. There should be no red.    
-->
<html>
<head>
    <style>
        .box {
            position: relative;
            margin: 10px;
            height: 50px;
            width: 50px;
            background-color: green;
            z-index: 1;
            transform: translate(50px, 0px) rotate(20deg);
        }

        .before {
            background-color: red;
        }

        .blur {
            background: red;
            margin: 50px;
            filter: blur(5px);
            z-index: 0;
            width: 0px;
            height: 0px;
        }
    </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="blur">
        <div class="box"></div>
        <div class="box before"></div>
        <div class="box"></div>
    </div>

</body>
</html>
chromium/third_party/blink/web_tests/css3/filters/filter-repaint-child-layers.html
