<!DOCTYPE HTML>
<html>
    <head>
        <style>
            html {
                scroll-snap-type: y mandatory;
            }
            .verticalGallery {
                width: 100vw;
                height: 600vh;
                margin: 0;
                padding: 0;
            }
            .colorBox {
                height: 200px;
                width: 100vw;
                float: left;
                scroll-snap-align: start;
                scroll-snap-stop: always;
            }
            .color0 { background-color: red; }
            .color1 { background-color: green; }
            .color2 { background-color: blue; }
            .color3 { background-color: aqua; }
            .color4 { background-color: yellow; }
            .color5 { background-color: fuchsia; }
        </style>
        <script src="../../../resources/js-test.js"></script>
        <script src="../../../resources/ui-helper.js"></script>
        <script src="resources/mainframe-scroll-snap-test.js"></script>
        <script>
        window.jsTestIsAsync = true;

        async function runTests()
        {
            try {
                let scrollMotionsForLargeScrollGlide = [
                    [-1, -1, 'began', 'none'],
                    [-1, -1, 'changed', 'none'],
                    [-1, -1, 'changed', 'none'],
                    [-1, -1, 'changed', 'none'],
                    [-1, -1, 'changed', 'none'],
                    [-1, -1, 'changed', 'none'],
                    [-1, -1, 'changed', 'none'],
                    [-1, -1, 'changed', 'none'],
                    [-1, -1, 'changed', 'none'],
                    [-1, -1, 'changed', 'none'],
                    [-1, -1, 'changed', 'none'],
                    [-1, -1, 'changed', 'none'],
                    [-1, -1, 'changed', 'none'],
                    [0, 0, 'ended', 'none'],
                    [-1, -1, 'none', 'begin'],
                    [-1, -1, 'none', 'continue'],
                    [0, 0, 'none', 'end'],
                ];

                await UIHelper.delayFor(0);
                await doScrollGlide(document.scrollingElement, VERTICAL);
                expectTrue(document.scrollingElement.scrollTop == 200, "did not glide past first scroll snap stop.");

                await UIHelper.delayFor(0);
                await doScrollGlide(document.scrollingElement, VERTICAL);
                expectTrue(document.scrollingElement.scrollTop == 400, "did not glide past second scroll snap stop.");
            } catch (e) {
                console.log(e);
            } finally {
                finishJSTest();
            }
        }

        function onLoad()
        {
            if (window.eventSender) {
                internals.setPlatformMomentumScrollingPredictionEnabled(false);
                runTests();
            } else {
                var messageLocation = document.getElementById('console');
                messageLocation.innerHTML = "<p>To run this test manually do a fast vertical momentum scroll. "
                    + "Scroling should snap to each block, regardless of how fast the scroll is.<p>";
            }
        }
        </script>
    </head>
    <body onload="onLoad();" class="verticalGallery">
        <div class="color0 colorBox"><div id="console"></div></div>
        <div class="color1 colorBox"></div>
        <div class="color2 colorBox"></div>
        <div class="color3 colorBox"></div>
        <div class="color4 colorBox"></div>
        <div class="color5 colorBox"></div>
        <div class="color0 colorBox"></div>
        <div class="color1 colorBox"></div>
        <div class="color2 colorBox"></div>
        <div class="color3 colorBox"></div>
        <div class="color4 colorBox"></div>
        <div class="color5 colorBox"></div>
    </body>
</html>