<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1">
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        function runTest()
        {
            let eventTarget = document.getElementById("eventTarget");
            eventTarget.scrollTop = 5;
            eventTarget.scrollTop = 0;
            if (window.testRunner) {
                document.getElementById("output").innerText = window.internals.scrollingStateTreeAsText();
                testRunner.notifyDone();
            }
        }
        function testSetup()
        {
            let eventTarget = document.getElementById("eventTarget");
            function touchEventHandler(event) { throw "This is not supposed to happen!"; }
            eventTarget.addEventListener('touchstart', touchEventHandler, { 'passive': true });
            eventTarget.addEventListener('touchmove', touchEventHandler, { 'passive': true });
            eventTarget.addEventListener('touchend', touchEventHandler, { 'passive': true });
            eventTarget.addEventListener('touchcancel', touchEventHandler, { 'passive': true });
            setTimeout(runTest, 15);
        }

        window.addEventListener('load', testSetup, false);
    </script>
</head>
<body>
    <div id="eventTarget" style="overflow: scroll; height: 200px">
        <div style="height: 3000px"></div>
    </div>
    <p>Verify that the block scrolling on overflow has touch event region with synchronous dispatch associated with it even with asynchronous listeners.</p>
    <pre id="output">
    </pre>
</body>
</html>