<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true AsyncOverflowScrollingEnabled=true ] -->
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<script src="../../../../resources/ui-helper.js"></script>
<script src="../../../../resources/js-test.js"></script>
<style>
html, body {
    margin: 0;
}

#scroller {
    width: 300px;
    height: 300px;
    background-color: tomato;
    border: solid 2px red;
    color: white;
    top: 0;
    left: 0;
    overflow: scroll;
    font-size: 1.5em;
    text-align: center;
}

#column {
    width: 100%;
    height: 1000px;
}
</style>
</head>
<body>
<div id="scroller">
    Panning over this element should allow scrolling.
    <div id="column"></div>
</div>
<div id="console"></div>
<script>
jsTestIsAsync = true;
scroller = document.getElementById("scroller");
observedFirstTouchMove = false;
observedScroll = false;
scroller.addEventListener("scroll", () => observedScroll = true, { once: true });
scroller.addEventListener("touchstart", () => observedFirstTouchMove = false, { passive: true });
scroller.addEventListener("touchmove", event => {
    if (observedFirstTouchMove)
        return;

    const startTime = Date.now();
    while (true) {
        if (Date.now() - startTime > 50)
            break;
    }
    observedFirstTouchMove = true;
});

description("This test verifies that panning up and down over an element that has an active 'touchmove' event listener allows scrolling to happen, even if the event handler temporarily hangs the web process.");

if (window.testRunner) {
    (async function() {
        while (!observedScroll)
            await UIHelper.sendEventStream(new UIHelper.EventStreamBuilder().begin(150, 290).move(150, 10, 0.5).end().takeResult());
        testPassed("Observed scroll event");
        finishJSTest();
    })();
}
</script>
</body>
</html>