<!DOCTYPE HTML>
<html>
    <head>
        <style>
            html {
                scroll-snap-type: y proximity;
            }
            .verticalGallery {
                width: 100vw;
                height: 600vh;
                margin: 0;
                padding: 0;
            }
            .colorBox {
                height: 100vh;
                width: 100vw;
                float: left;
                scroll-snap-align: start;
            }
            #item0 { background-color: red; }
            #item1 { background-color: green; }
            #item2 { background-color: blue; }
            #item3 { background-color: aqua; }
            #item4 { background-color: yellow; }
            #item5 { background-color: fuchsia; }
        </style>
        <script src="../../../resources/js-test.js"></script>
        <script src="../../../resources/ui-helper.js"></script>
        <script>
        window.jsTestIsAsync = true;

        async function runTests()
        {
            try {
                await UIHelper.delayFor(0);

                let scrollPositionBeforeSnap = document.scrollingElement.scrollTop;
                let results = [];
                await UIHelper.keyDown("downArrow");
                await UIHelper.keyDown("downArrow");
                var betweenFirstScrollPositionAndSecond =
                    document.scrollingElement.scrollTop > scrollPositionBeforeSnap
                    && document.scrollingElement.scrollTop < window.innerHeight;
                results.push([betweenFirstScrollPositionAndSecond, "down arrow key did not scroll to second snap point"]);

                await UIHelper.keyDown("pageDown");
                results.push([document.scrollingElement.scrollTop == window.innerHeight, "page down scrolled to the first snap point"]);

                // Directional scrolling should be able to escape a snap point.
                await UIHelper.keyDown("downArrow");
                await UIHelper.keyDown("downArrow");
                await UIHelper.keyDown("downArrow");
                var betweenSecondScrollPositionAndThird =
                    document.scrollingElement.scrollTop > window.innerHeight
                    && document.scrollingElement.scrollTop < (window.innerHeight * 2);
                results.push([betweenSecondScrollPositionAndThird, "down arrow key scrolled away from second div."]);

                // Reversing directions should snap back though.
                await UIHelper.keyDown("upArrow");
                results.push([document.scrollingElement.scrollTop == window.innerHeight, "up arrow scrolled back to second div"]);

                // We avoid modifying the DOM until the test is over, because sometimes
                // DOM modifications can reset the main frame scroll position.
                results.forEach((result) => {
                    expectTrue(result[0], result[1]);
                });
            } catch (e) {
                console.log(e);
            } finally {
                finishJSTest();
            }
        }

        function onLoad()
        {
            if (window.eventSender) {
                runTests();
            } else {
                var messageLocation = document.getElementById('item0');
                var message = document.createElement('div');
                message.innerHTML = "<p>To run this test manually, scroll the page vertically with the keyboard.</p>";
                messageLocation.appendChild(message);
            }
        }
        </script>
    </head>
    <body onload="onLoad();" class="verticalGallery">
        <div id="item0" class="colorBox"><div id="console"></div></div>
        <div id="item1" class="colorBox"></div>
        <div id="item2" class="colorBox"></div>
        <div id="item3" class="colorBox"></div>
        <div id="item4" class="colorBox"></div>
        <div id="item5" class="colorBox"></div>
    </body>
</html>