<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
<html class="fullscreen">
<head>
    <style>
        html.fullscreen {
            overflow: hidden; /* fullscreen */
        }

        html, body, main {
            height: 100%;
        }

        body {
            margin: 20px;
            overflow-x: hidden;
            border: 1px solid gray;
        }
        
        html.fullscreen body {
            border: 2px solid gray; /* hack to work around webkit.org/b/256125 */
        }

        .app {
            width: 100%;
            height: 5000px;
        }
        
        .relative {
            position: relative;
            
        }
        
        .filtered {
            transition: filter 500ms;
        }
        
        .carousel {
            overflow: hidden;
            width: 700px;
            height: 500px;
            border: 1px solid black;
        }
        
        .contents {
            width: 300%;
        }
        
        .backdrop {
            -webkit-backdrop-filter: blur(2px);
            z-index: 100;
            width: 200px;
            height: 20px;
            background-color: silver;
        }
    </style>
    <script src="../../resources/ui-helper.js"></script>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        window.addEventListener('load', async () => {
            await UIHelper.renderingUpdate();
            document.documentElement.classList.remove('fullscreen');
            await UIHelper.ensurePresentationUpdate();
            if (window.testRunner)
                testRunner.notifyDone();
        }, false);
    </script>
</head>
<body>
    <div class="app">
        <main>
            <div class="relative">
                <div class="relative filtered">
                    <div class="carousel">
                        <div class="contents">This test should not crash.</div>
                    </div>
                </div>
            </div>
            <div class="backdrop"></div>
        </main>
    </div>
</body>
</html>
