<!DOCTYPE HTML>
<html>
    <head>
        <style>
            .horizontalGallery {
                width: 600vw;
                height: 100vh;
                margin: 0;
                padding: 0;
                scroll-snap-type: x mandatory;
            }
            .colorBox {
                height: 100vh;
                width: 100vw;
                float: left;
                scroll-snap-align: start;
            }
            #item0 { background-color: red; background-image: url('../../resources/green-blue.png'); background-attachment: fixed;}
            #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>
        window.jsTestIsAsync = true;

        var divTarget;
        var divScrollPositionBeforeGlide;
        var divScrollPositionBeforeSnap;

        function checkForScrollSnap() {
            // The div should have snapped back to the previous position
            if (divTarget.scrollLeft != divScrollPositionBeforeSnap)
                testFailed(`div did not snap back to proper location. ${divTarget.scrollLeft} vs. ${divScrollPositionBeforeSnap}`);
            else
                testPassed("div honored snap points.");

            finishJSTest();
        }

        function scrollSnapTest() {
            // See where our div lives:
            pageScrollPositionBefore = document.scrollingElement.scrollLeft;

            divTarget = document.getElementById('target');
 
            divScrollPositionBeforeSnap = divTarget.scrollLeft;

            var startPosX = divTarget.offsetLeft + 20;
            var startPosY = divTarget.offsetTop + 20;
            eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'began', 'none');
            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none');
            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none');
            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');
            eventSender.callAfterScrollingCompletes(checkForScrollSnap);
        }

        function checkForScrollGlide() {
            // The div should have scrolled (glided) to the next snap point.
            if (divTarget.scrollLeft == window.innerWidth)
                testPassed("div scrolled to next window.");
            else
                testFailed(`div did not honor snap points. ${divTarget.scrollLeft} vs. ${window.innerWidth}`);

            setTimeout(scrollSnapTest, 0);
        }

        function scrollGlideTest() {
            divTarget = document.getElementById('target');
 
            divScrollPositionBeforeGlide = divTarget.scrollLeft;

            var startPosX = divTarget.offsetLeft + 20;
            var startPosY = divTarget.offsetTop + 20;
            eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'began', 'none');
            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none');
            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none');
            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none');
            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');
            eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'none', 'begin');
            eventSender.mouseScrollByWithWheelAndMomentumPhases(-4, 0, 'none', 'continue');
            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end');
            eventSender.callAfterScrollingCompletes(checkForScrollGlide);
        }

        function onLoad() {

            if (window.eventSender) {
                eventSender.monitorWheelEvents();
                internals.setPlatformMomentumScrollingPredictionEnabled(false);
                setTimeout(scrollGlideTest, 0);
            } else {
                var messageLocation = document.getElementById('item0');
                var message = document.createElement('div');
                message.innerHTML = "<p>This test is better run under DumpRenderTree. To manually test it, place the mouse pointer<br/>"
                    + "inside the red region at the top of the page, and then use the mouse wheel or a two-finger swipe to make a<br/>"
                    + "small swipe gesture with some momentum.<br/><br/>"
                    + "The region should scroll to show a green region.<br/><br/>"
                    + "Next, perform a small scroll gesture that does not involve momentum. You should begin to see one of the colors<br/>"
                    + "to the left (or right) of the current green box. When you release the wheel, the region should scroll back so<br/>"
                    + "that the region is a single color.<br/><br/>"
                    + "You should also be able to repeat these test steps for the vertical region below.</p>";
                messageLocation.appendChild(message);
            }
        }
        </script>
    </head>
    <body onload="onLoad();" class="horizontalGallery" id="target">
        <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>