<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../../../resources/ui-helper.js"></script>
<script src="../../../resources/basic-gestures.js"></script>
<script src="../../../resources/js-test-pre.js"></script>
<style>
.disable-scroll { pointer-events: none; }
.outer-scroll { height: 100vh; }
.inner-scroll { height: 100vh; overflow-y: auto; }
.box { height: 100vh; }
</style>
<script>
window.jsTestIsAsync = true;

async function runTest() {
    if (!window.testRunner) {
        finishJSTest();
        return;
    }

    description("Tests that toggling `pointer-events: none;` doesn't prevent scrolling.");

    globalThis.outerScrollElement = document.querySelector(".outer-scroll");
    globalThis.innerScrollElement = document.querySelector(".inner-scroll");

    let scrollStartX = outerScrollElement.offsetLeft + (outerScrollElement.offsetWidth / 2);
    let scrollStartY = outerScrollElement.offsetTop + (outerScrollElement.offsetHeight / 2) + 50;
    let scrollEndX = scrollStartX;
    let scrollEndY = scrollStartY - 100;

    shouldBeZero("window.scrollY");
    shouldBeZero("outerScrollElement.scrollTop");
    shouldBeZero("innerScrollElement.scrollTop");

    debug("Disabling pointer events...");
    outerScrollElement.classList.add("disable-scroll");
    await UIHelper.renderingUpdate();
    await touchAndDragFromPointToPoint(scrollStartX, scrollStartY, scrollEndX, scrollEndY);
    await liftUpAtPoint(scrollEndX, scrollEndY);
    shouldBeNonZero("window.scrollY");
    shouldBeZero("outerScrollElement.scrollTop");
    shouldBeZero("innerScrollElement.scrollTop");

    await UIHelper.immediateScrollTo(0, 0);

    debug("Enabling pointer events...");
    outerScrollElement.classList.remove("disable-scroll");
    await UIHelper.renderingUpdate();
    await touchAndDragFromPointToPoint(scrollStartX, scrollStartY, scrollEndX, scrollEndY);
    await liftUpAtPoint(scrollEndX, scrollEndY);
    shouldBeZero("window.scrollY");
    shouldBeZero("outerScrollElement.scrollTop");
    shouldBeNonZero("innerScrollElement.scrollTop");

    finishJSTest();
}
</script>
<body onload="runTest()">
    <div class="outer-scroll">
        <div class="inner-scroll">
            <div class="box" style="background-color: red;"></div>
            <div class="box" style="background-color: green;"></div>
            <div class="box" style="background-color: blue;"></div>
        </div>
    </div>
    <p id="description"></p>
    <div id="console"></div>
    <script src="../../../resources/js-test-post.js"></script>
</body>
</html>