shift-scroll-anchoring-natural-scroll.html (1566B)
1 <!DOCTYPE html> 2 <title>Layout Instability: shift offscreen with scroll anchoring and natural scroll</title> 3 <link rel="help" href="https://wicg.github.io/layout-instability/" /> 4 <style> 5 #scroller { 6 overflow: scroll; 7 left: 20px; 8 top: 20px; 9 width: 200px; 10 height: 200px; 11 } 12 #spacer { 13 height: 3000px; 14 } 15 #ch { 16 position: relative; 17 background: yellow; 18 left: 10px; 19 top: 100px; 20 width: 150px; 21 height: 150px; 22 } 23 #offscreenElement { 24 width: 300px; 25 height: 300px; 26 background: lightblue; 27 } 28 #onscreenElement { 29 width: 300px; 30 height: 300px; 31 background: lightgreen; 32 } 33 </style> 34 <div id="scroller"> 35 <div id="offscreenElement"></div> 36 <div id="spacer"></div> 37 <div id="onscreenElement"></div> 38 </div> 39 <script src="/resources/testharness.js"></script> 40 <script src="/resources/testharnessreport.js"></script> 41 <script src="resources/util.js"></script> 42 <script> 43 44 promise_test(async () => { 45 const watcher = new ScoreWatcher; 46 47 // Wait for the initial render to complete. 48 await waitForAnimationFrames(2); 49 50 // Scroll to show #onscreenElement. 51 scroller.scrollTop = 3250; 52 await waitForAnimationFrames(1); 53 54 // Resize #offscreernElement and scroll a bit. 55 // Visually, #onscreenElement will move by 20px. 56 offscreenElement.style.height = '250px'; 57 scroller.scrollBy(0, 20); 58 59 await waitForAnimationFrames(3); 60 // There should be no reported layout shift, because to the user it looks 61 // like a natural scroll by 20px. 62 assert_equals(watcher.score, 0); 63 }, "Offscreen shift with scroll annchoring and natural scroll not counted."); 64 65 </script>