sticky-container-moved.html | Explore in Territory

<!DOCTYPE html>
<style>
body {
    margin: 0;
    height: 2000px;
    overflow: hidden; /* hide scrollbars */
    overflow-anchor: none;
}

#spacer {
    height: 200px;
}

.container {
    background-color: red;
    width: 200px;
    height: 400px;
    outline: 2px solid black;
}

.box {
    width: 200px;
    height: 200px;
}

.sticky {
    position: sticky;
    top: 0px;
    background-color: green;
}

</style>
<script>
function doTest()
{
    window.scrollTo(0, 200);
    // When the spacer's height is changed the sticky container moves up which should now
    // require sliding the sticky box down.
    document.getElementById('spacer').style.height = '0px';
}
window.addEventListener('load', doTest, false);
</script>
<div id="spacer"></div>
<div class="container">
    <div class="sticky box"></div>
</div>

chromium/third_party/blink/web_tests/fast/css/sticky/sticky-container-moved.html