<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <title>This tests that backdrop filter shows correctly when removed and re-added.</title>
    <style>
    #text {
        position: absolute;
        width: 200px;
        height: 200px;
        overflow: hidden;
    }
    #blur {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 100px;
        height: 100px;
        will-change: transform;
        background-color: rgba(255, 0, 0, 0.5);
    }

    #blur.blurry {
         -webkit-backdrop-filter: blur(5px);
    }
    </style>
    <script>
        if (window.testRunner)
            testRunner.waitUntilDone();

        function doTest()
        {
            var backdrop = document.getElementById('blur');
            backdrop.classList.add('blurry');
            window.setTimeout(function() {
                backdrop.classList.remove('blurry');
                window.setTimeout(function() {
                    backdrop.classList.add('blurry');
                    if (window.testRunner)
                        testRunner.notifyDone();
                }, 0)
            }, 0)
        }

        window.addEventListener('load', doTest, false);
    </script>
</head>
<body>
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a nunc ultrices, faucibus ligula ac, euismod elit. Ut in vehicula enim. Suspendisse sodales auctor nunc, sit amet vehicula velit cursus vulputate. Nunc sed ipsum vitae massa dapibus sodales sit amet quis dui. Aenean sit amet interdum arcu, et facilisis diam. Ut a lacus eleifend, feugiat tellus vel, molestie lorem. Nulla pulvinar dapibus semper. Quisque mollis, neque non luctus aliquam, ex risus lacinia augue, vel eleifend augue erat eget ante.
</div>
<div id="blur"></div>
</body>
</html>