<html>
<head>
    <style>
        #container {
            width: 420px;
            height: 400px;
            overflow-y: scroll;
            scroll-snap-type: y mandatory;
        }

        .cell {
            width: 400px;
            height: 400px;
            scroll-snap-align: start;
        }
    </style>
    <script src="../../resources/js-test.js"></script>
    <script>
    function setup()
    {
        jsTestIsAsync = true;
        var container = document.getElementById("container");

        function dumpSnapOffsetsAndFinishTest()
        {
            debug("Scroll-snap offsets: " + window.internals.scrollSnapOffsets(container));
            finishJSTest();
        }

        function dumpSnapOffsetsAndResizeElement()
        {
            debug("Scroll-snap offsets: " + window.internals.scrollSnapOffsets(container));
            container.style.width = "425px";
            setTimeout(dumpSnapOffsetsAndFinishTest, 0);
        }

        container.scrollTop = 800;
        if (window.testRunner)
            setTimeout(dumpSnapOffsetsAndResizeElement, 0);
    }
    </script>
</head>

<body onload="setup()">
    <div id="container">
        <div class="cell"><div id="console"></div></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</body>
</html>