<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
<html>
<head>
<style>
    body {
        height: 2000px;
    }

    .scroll-wrapper {
        position: fixed;
        left: 10px;
        top: 10px;
        width: 300px;
        height: 500px;
        background-color: silver;
    }

    #scroller {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-snap-type: y mandatory;
        border: 1px solid black;
    }

    .inner-content {
        margin: 20px;
        width: auto;
        height: 75%;
        scroll-snap-align: center;
        background-color: green;
    }
</style>
<script src="../../../resources/ui-helper.js"></script>
<script src="../../../resources/js-test-pre.js"></script>
<script>
    jsTestIsAsync = true;

    var overflowScrollEventCount = 0;
    var windowScrollEventCount = 0;

    function checkForScrolls()
    {
        shouldBeTrue('overflowScrollEventCount > 0');
        shouldBe('windowScrollEventCount', '0');
    }

    async function sendWheelEvents()
    {
        eventSender.monitorWheelEvents();
        eventSender.mouseMoveTo(100, 100);
        // This sequence needs to be long enough (> resetLatchedStateTimeout or 100ms) to allow latching to time out.

        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'began', 'none');
        await UIHelper.renderingUpdate();
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none');
        await UIHelper.renderingUpdate();
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none');
        await UIHelper.renderingUpdate();
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -2, 'changed', 'none');
        await UIHelper.renderingUpdate();
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -3, 'changed', 'none');
        await UIHelper.renderingUpdate();
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');
        await UIHelper.renderingUpdate();
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -5, 'none', 'begin');
        await UIHelper.renderingUpdate();
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -5, 'none', 'continue');
        await UIHelper.renderingUpdate();
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -5, 'none', 'continue');
        await UIHelper.renderingUpdate();
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -5, 'none', 'continue');
        await UIHelper.renderingUpdate();
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -5, 'none', 'continue');
        await UIHelper.renderingUpdate();
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -5, 'none', 'continue');
        await UIHelper.renderingUpdate();
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -5, 'none', 'continue');
        await UIHelper.renderingUpdate();
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end');
        
        await UIHelper.waitForScrollCompletion();
    }

    async function scrollTest()
    {
        await sendWheelEvents();
        checkForScrolls();
        finishJSTest();
    }

    window.addEventListener('load', () => {
        description("Tests that scrolling in an overflow-scroll with scroll-snap doesn't fail to latch and scroll the document");
        
        document.getElementById('scroller').addEventListener('scroll', () => {
            ++overflowScrollEventCount;
        }, false);

        window.addEventListener('scroll', () => {
            ++windowScrollEventCount;
        }, false);

        if (window.eventSender) {
            setTimeout(scrollTest, 0);
            return;
        }
        
        finishJSTest();
    }, false);
</script>
</head>
<body>
<div class="scroll-wrapper">
    <div id="scroller">
        <div class="inner-content"></div>
        <div class="inner-content"></div>
    </div>
</div>
<div id="console"></div>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>