<!DOCTYPE HTML>
<html>
    <head>
        <style>
            body {
                margin: 0;
                overflow: hidden;
            }

            #container {
                width: 600px;
                height: 600px;
                position: absolute;
                top: 0;
                left: 0;
                overflow-x: none;
                overflow-y: scroll;
                scroll-snap-type: y proximity;
                -webkit-scroll-snap-type: proximity;
                scroll-snap-type: proximity;
                opacity: 0.5;
            }

            .area {
                height: 600px;
                width: 600px;
                float: left;
                scroll-snap-align: start;
                -webkit-scroll-snap-coordinate: 0 0;
                scroll-snap-coordinate: 0 0;
            }
        </style>
        <script>
        let write = s => output.innerHTML += s + "<br>";
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        function verticalScrollInContainer(dragDeltas)
        {
            return new Promise(resolve => {
                write(`Scrolling in ${container.id} with ${dragDeltas.length} drag ticks`);
                eventSender.monitorWheelEvents();
                internals.setPlatformMomentumScrollingPredictionEnabled(false);
                eventSender.mouseMoveTo(300, 300);
                dragDeltas.forEach((delta, i) => eventSender.mouseScrollByWithWheelAndMomentumPhases(0, delta, i == 0 ? "began" : "changed", "none"));
                eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
                eventSender.callAfterScrollingCompletes(() => {
                    write(`- Did the scrolling snap to the top? ${container.scrollTop == 0 ? "YES" : "NO"}`);
                    write(`- Did scrolling snap to the second box? ${container.scrollTop == 600 ? "YES" : "NO"}`);
                    container.scrollTop = 0;
                    setTimeout(resolve, 0);
                });
            });
        }

        function run() {
            if (!window.testRunner || !window.eventSender) {
                write("To manually test, verify that scrolling near one of the boundaries between the colored boxes");
                write("snaps to the edge of the nearest colored box, but scrolling somewhere near the middle of two");
                write("boxes does not cause the scroll offset to snap.");
                return;
            }

            verticalScrollInContainer(new Array(2).fill(-1))
                .then(() => verticalScrollInContainer(new Array(31).fill(-1)))
                .then(() => verticalScrollInContainer(new Array(59).fill(-1)))
                .then(() => testRunner.notifyDone());
        }
        </script>
    </head>
    <body onload=run()>
        <div id="container">
            <div class="area" style="background-color: red;"></div>
            <div class="area" style="background-color: green;"></div>
            <div class="area" style="background-color: blue;"></div>
            <div class="area" style="background-color: aqua;"></div>
            <div class="area" style="background-color: yellow;"></div>
            <div class="area" style="background-color: fuchsia;"></div>
        </div>
        <div id="output"></div>
    </body>
</html>