<!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;
            border: 1px black dashed;
            opacity: 0.75;
            background-color: #EEE;
        }

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

    function deflateScrollSnapMargins(amount) {
        for (let child of document.querySelectorAll(".child")) {
            let currentMargin = parseInt(child.style.scrollSnapMargin.replace(/px/, ""));
            child.style.scrollSnapMargin = `${currentMargin - amount}px`;
        }
    }

    function zeroDelayTimeout(action) {
        return new Promise((resolve) => {
            setTimeout(() => {
                action();
                resolve();
            });
        });
    }

    function run()
    {
        if (!window.testRunner || !window.internals) {
            write(`To manually test, verify that scrolling snaps somewhere above each colored box. As you scroll further
                down, the distance between the snapped position and the top of the colored box should increase.`);
            return;
        }

        zeroDelayTimeout(() => {
            write("Scroll-snap offsets are: " + internals.scrollSnapOffsets(container));
            container.scrollTop += 100;
            container.style.width = "500px";
        })
        .then(() => {
            zeroDelayTimeout(() => {
                write("After resizing, the offsets should not have changed: " + internals.scrollSnapOffsets(container));
                container.scrollTop += 100;
                deflateScrollSnapMargins(10);
            });
        })
        .then(() => {
            zeroDelayTimeout(() => {
                write("After deflating scroll-snap-margin by 10px, the offsets are: " + internals.scrollSnapOffsets(container));
                container.scrollTop += 100;
                container.style.width = "400px";
            });
        })
        .then(() => {
            zeroDelayTimeout(() => {
                write("After resizing, the offsets should not have changed: " + internals.scrollSnapOffsets(container));
                testRunner.notifyDone();
            });
        });
    }
    </script>
</head>
<body onload=run()>
    <div id="container">
        <div class="child" style="background-color: red;     top: 0px;    scroll-snap-margin: 10px;"></div>
        <div class="child" style="background-color: green;   top: 720px;  scroll-snap-margin: 20px;"></div>
        <div class="child" style="background-color: blue;    top: 1440px; scroll-snap-margin: 30px;"></div>
        <div class="child" style="background-color: aqua;    top: 2160px; scroll-snap-margin: 40px;"></div>
        <div class="child" style="background-color: yellow;  top: 2880px; scroll-snap-margin: 50px;"></div>
        <div class="child" style="background-color: fuchsia; top: 3600px; scroll-snap-margin: 60px;"></div>
    </div>
    <div id="output"></div>
</body>
</html>