<!DOCTYPE html>
<html>
<head>
    <style>
        #container {
            position: absolute;
            width: 400px;
            height: 400px;
            top: 0;
            left: 0;
            scroll-snap-type: y mandatory;
            overflow-x: hidden;
            overflow-y: scroll;
            opacity: 0.75;
            background-color: #EEE;
            padding: 10px;
        }

        .child {
            width: 400px;
            height: 400px;
            padding-top: 100px;
            padding-bottom: 50px;
            left: 0;
        }
    </style>
    <script>
    let write = s => output.innerHTML += s + "<br>";
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    function run()
    {
        if (!window.testRunner || !window.internals) {
            write(`To manually test, verify that scrolling in the container snaps such that:`);
            write(`- The first and fourth boxes align their top edge to the top edge of the scrolling container`);
            write(`- The second and fifth boxes align their center to the center of the scrolling container`);
            write(`- The third and sixth boxes align their bottom edge to the bottom edge of the scrolling container`);
            return;
        }

        setTimeout(() => {
            write("Scroll-snap offsets are: " + internals.scrollSnapOffsets(container));
            testRunner.notifyDone();
        }, 0);
    }
    </script>
</head>
<body onload=run()>
    <div id="container">
        <div class="child" style="background-color: red;      scroll-snap-align: start;"></div>
        <div class="child" style="background-color: green;    scroll-snap-align: center;"></div>
        <div class="child" style="background-color: blue;     scroll-snap-align: end;"></div>
        <div class="child" style="background-color: aqua;     scroll-snap-align: start;"></div>
        <div class="child" style="background-color: yellow;   scroll-snap-align: center;"></div>
        <div class="child" style="background-color: fuchsia;  scroll-snap-align: end;"></div>
    </div>
    <div id="output"></div>
</body>
</html>