<!DOCTYPE html>
<style>
    #box {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: green;
    }
    #filter {
        position: absolute;
        width: 200px;
        height: 200px;
        transform: translateZ(0);
        -webkit-clip-path: circle(80px at 100px);
    }
    .backdrop {
        -webkit-backdrop-filter: invert();
    }
</style>
<div id="box"></div>
<div id="filter"></div>
<script>
    if (window.testRunner)
        testRunner.waitUntilDone();
    setTimeout(function() {
        document.getElementById("filter").classList.add("backdrop");
        if (window.testRunner)
            testRunner.notifyDone();
    }, 0);
</script>