<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
<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;
            -webkit-overflow-scrolling: touch;
            border: 1px black dashed;
            opacity: 0.75;
            background-color: #EEE;
        }

        .child {
            width: 400px;
            height: 400px;
            scroll-snap-align: end;
            position: absolute;
            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 the bottom tip of each
                colored box aligns with the bottom 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;     top: 0px; overflow: visible;"></div>
        <div class="child" style="background-color: green;   top: 720px;  overflow: hidden;"></div>
        <div class="child" style="background-color: blue;    top: 1440px; overflow: scroll;"></div>
        <div class="child" style="background-color: aqua;    top: 2160px; overflow: auto;"></div>
        <div class="child" style="background-color: yellow;  top: 2880px; overflow: overlay;"></div>
        <div class="child" style="background-color: fuchsia; top: 3600px;"></div>
    </div>
    <div id="output"></div>
</body>
</html>