composited-layer-bounds-after-sw-blur-animation.html

<html>
<head>
    <!--
        On Safari, this test verifies that a composited layer's bounds include filter outsets after
        a software-painted blur animation. On Safari, the filter animation is painted in software
        because drop-shadow appears before another filter in the chain.

        If the test passes, you should see a blurred-out green element. Its composited layer should
        be large enough so that the blur does not appear clipped.
    -->
    <style>
        #composited-layer {
            background-color: green;
            will-change: transform;
            position: absolute;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
        }
        .initial-drop-shadow {
            /* Safari paints filters in software when drop-shadow appears before another filter in the chain. */
            filter: drop-shadow(10px 10px 0px black) blur(0);
        }
        @keyframes blur-animation {
            from {
                filter: drop-shadow(10px 10px 0px black) blur(0);
            }
            to {
                filter: drop-shadow(10px 10px 0px black) blur(25px);
            }
        }
    </style>
    <script>
        if (window.testRunner)
            testRunner.waitUntilDone();

        function startTest()
        {
            var targetElement = document.getElementById("composited-layer");
            if (window.testRunner)
                targetElement.addEventListener("animationend", finishTest);
            targetElement.style = "filter: drop-shadow(10px 10px 0px black) blur(25px); animation-name: blur-animation; animation-duration: 0.1s;";
        }

        function finishTest()
        {
            var layerTreeText = internals.layerTreeAsText(document);
            document.getElementById("console").appendChild(document.createTextNode(layerTreeText));
            testRunner.dumpAsText();
            testRunner.notifyDone();
        }
    </script>
</head>
<body onload="startTest()">
    <div id="composited-layer" class="initial-drop-shadow"></div>
    <pre id="console"></pre>
</body>
</html>
chromium/third_party/blink/web_tests/css3/filters/composited-layer-bounds-after-sw-blur-animation.html
