<head>
    <meta name="viewport" content="width=device-width">
    <title>This tests that the reflection of an element with a backdrop-filter applied updates its rendering when the reflected layer has a change of backdrop-filter value.</title>
    <style>

    svg {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 200px;
        height: 200px;
        background-color: lightgray;
    }

    .backdrop {
        position: absolute;
        top: 10px;
        left: 60px;
        width: 80px;
        height: 80px;
        background-color: rgba(255, 255, 255, 0.5);
        -webkit-backdrop-filter: saturate(180%) blur(5px);
        -webkit-box-reflect: below 20px;
    }

    .backdrop.changed {
        -webkit-backdrop-filter: saturate(180%) blur(10px);
    }

    </style>
    <script type="text/javascript">
        
    if (window.testRunner)
        testRunner.waitUntilDone();

    window.requestAnimationFrame(function() {
        document.querySelector(".backdrop").classList.add("changed");
        if (window.testRunner)
            testRunner.notifyDone();
    });

    </script>
</head>
<svg viewbox="0 0 2 2">
    <rect fill="black" x="0" y="0" width="1" height="1"></rect>
    <rect fill="black" x="1" y="1" width="1" height="1"></rect>
</svg>
<div class="backdrop"></div>