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

            ::-webkit-scrollbar {
                display: none;
            }

            #port {
                width: 500px;
                height: 500px;
                position: absolute;
                top: 0;
                left: 0;
                overflow-x: none;
                overflow-y: scroll;
                scroll-snap-type: y mandatory;
                opacity: 0.5;
            }

            .area {
                height: 500px;
                width: 500px;
                float: left;
                scroll-snap-align: center;
            }
        </style>
        <script>
        let write = s => output.innerHTML += s + "<br>";

        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        function run() {
            if (!window.testRunner || !window.eventSender) {
                write("To manually test, verify that scrolling in the overflow container snaps to each of the children.");
                return;
            }

            internals.setPlatformMomentumScrollingPredictionEnabled(false);
            eventSender.monitorWheelEvents();
            eventSender.mouseMoveTo(250, 250);
            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "began", "none");
            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none");
            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none");
            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "none", "begin");
            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "none", "continue");
            eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "none", "end");
            eventSender.callAfterScrollingCompletes(() => {
                write(`After swiping, the container's scrollTop is now: ${port.scrollTop}`);
                testRunner.notifyDone();
            });
        }
        </script>
    </head>
    <body onload=run()>
        <div id="port">
            <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>