sticky-style-change.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<style>
    html {
        overflow: hidden; /* hide scrollbars */
    }

    body {
        margin: 0;
    }

    .container {
        height: 2000px;
    }

    .box {
        height: 50px;
    }

    .sticky {
        position: sticky;
        top: 50px;
        background-color: green;
    }
</style>
<script>
    if (window.testRunner)
      testRunner.waitUntilDone()

    function doTest()
    {
        const sticky = document.querySelector('.sticky');
        sticky.style.position = 'relative';

        // Force layout.
        sticky.offsetTop;

        sticky.style.position = 'sticky';

        window.requestAnimationFrame(function() {
            window.scrollTo(0, 100);
            if (window.testRunner)
                testRunner.notifyDone();
        });
    }

    window.addEventListener('load', function() {
        // We require the compositings inputs to be clean (and thus the initial
        // sticky position to be calculated) before we stat changing things.
        // Force this by waiting for a double rAF.
        window.requestAnimationFrame(function() {
            window.requestAnimationFrame(doTest);
        });
    });
</script>
</head>
<body>
  <div class="container">
    <div class="sticky box"></div>
  </div>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css/sticky/sticky-style-change.html
