<!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
<html>
    <head>
        <style>
            .gallery {
                width: 400px;
                height: 400px;
                display: inline-block;
                overflow-x: hidden;
                overflow-y: auto;
                scroll-snap-type: y mandatory;
            }
            .colorBox {
                height: 400px;
                width: 400px;
                scroll-snap-align: start;
            }
            #item0, #item2 { background-color: red; }
            #item1 { background-color: green; }
        </style>
        <script src="../../../resources/js-test.js"></script>
        <script>
        window.jsTestIsAsync = true;

        function locationInWindowCoordinates(element)
        {
            var position = {};
            position.x = element.offsetLeft;
            position.y = element.offsetTop;

            while (element.offsetParent) {
                position.x = position.x + element.offsetParent.offsetLeft;
                position.y = position.y + element.offsetParent.offsetTop;
                if (element == document.getElementsByTagName("body")[0])
                    break;

                element = element.offsetParent;
            }

            return position;
        }

        function scrollSnapTest()
        {
            var divTarget = document.getElementById("target");
            var windowPosition = locationInWindowCoordinates(divTarget);

            var startPosX = windowPosition.x + 0.5 * divTarget.clientWidth;
            var startPosY = windowPosition.y + 0.5 * divTarget.clientHeight;
            eventSender.mouseMoveTo(startPosX, startPosY);
            // Each unit of stateless scroll is scaled by 10 pixels.
            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -10, "none", "none");
            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -10, "none", "none");
            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -10, "none", "none");
            // Wait for the snapping to finish.
            setTimeout(function() {
                if (divTarget.scrollTop != 400)
                    testFailed("div did not snap to the green region. Expected 400, but got " + divTarget.scrollTop + ".");
                else
                    testPassed("div honored snap points.");

                finishJSTest();
            }, 2000);
        }


        function onLoad()
        {
            if (window.eventSender) {
                eventSender.monitorWheelEvents();
                internals.setPlatformMomentumScrollingPredictionEnabled(false);
                setTimeout(scrollSnapTest, 0);
            } else {
                var messageLocationH = document.getElementById("item0");
                var message = document.createElement("div");
                message.innerHTML = "This test is better run under DumpRenderTree. To manually<br/>"
                    + "test it, place the mouse pointer inside the red region at the<br/>"
                    + "top of the page, and then, using a mechanical mouse wheel,<br/>"
                    + "scroll so that the green region takes up more of the<br/>"
                    + "container than the surrounding red regions. After a brief<br/>"
                    + "pause, the target should scroll so that the green region is<br/>"
                    + "fully visible, and no red is visible.";
                messageLocationH.appendChild(message);
            }
        }
        </script>
    </head>
    <body onload="onLoad();">
        <div style="position: relative; width: 400px">
            <div>Tests that the scroll-snap feature works properly in overflow regions when using a mechanical mouse wheel.</div>
            <div class="gallery" id="target">
                <div id="item0" class="colorBox"></div>
                <div id="item1" class="colorBox"></div>
                <div id="item2" class="colorBox"></div>
            </div>
            <div id="console"></div>
        </div>
    </body>
</html>