<!DOCTYPE html> <title>Layout Instability: shift offscreen with scroll anchoring and natural scroll</title> <link rel="help" href="https://wicg.github.io/layout-instability/" /> <style> #scroller { overflow: scroll; left: 20px; top: 20px; width: 200px; height: 200px; } #spacer { height: 3000px; } #ch { position: relative; background: yellow; left: 10px; top: 100px; width: 150px; height: 150px; } #offscreenElement { width: 300px; height: 300px; background: lightblue; } #onscreenElement { width: 300px; height: 300px; background: lightgreen; } </style> <div id="scroller"> <div id="offscreenElement"></div> <div id="spacer"></div> <div id="onscreenElement"></div> </div> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="resources/util.js"></script> <script> promise_test(async () => { const watcher = new ScoreWatcher; // Wait for the initial render to complete. await waitForAnimationFrames(2); // Scroll to show #onscreenElement. scroller.scrollTop = 3250; await waitForAnimationFrames(1); // Resize #offscreernElement and scroll a bit. // Visually, #onscreenElement will move by 20px. offscreenElement.style.height = '250px'; scroller.scrollBy(0, 20); await waitForAnimationFrames(3); // There should be no reported layout shift, because to the user it looks // like a natural scroll by 20px. assert_equals(watcher.score, 0); }, "Offscreen shift with scroll annchoring and natural scroll not counted."); </script>