<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    html, body {
        overflow: hidden;
        padding: 0;
        margin: 0;
    }

    #container {
        width: 100%;
        height: 400px;
        overflow-y: auto;
        position: absolute;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: y mandatory;
    }

    .child {
        width: 100%;
        height: 100%;
        scroll-snap-align: start;
    }

    #fixed {
        position: fixed;
        top: 0;
        right: 0;
        width: 1em;
        height: 1em;
        background-color: white;
    }

    #output {
        margin-top: 400px;
    }
    </style>
</head>
<div id="container">
    <div class="child" style="background-color: red"></div>
    <div class="child" style="background-color: green"></div>
    <div class="child" style="background-color: blue"></div>
</div>
<div id="fixed"></div>
<script>
if (window.testRunner)
    testRunner.dumpAsText();

container.scrollTop = 400;
fixed.remove();
document.write(`container.scrollTop is now: ${container.scrollTop}`);
</script>
</html>