shift-while-scrolled.html (1075B)
1 <!DOCTYPE html> 2 <title>Layout Instability: shift while scrolled</title> 3 <link rel="help" href="https://wicg.github.io/layout-instability/" /> 4 <style> 5 6 body { height: 2000px; margin: 0; } 7 #shift { position: relative; width: 300px; height: 200px; background: blue; } 8 9 </style> 10 <div id="shift"></div> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="resources/util.js"></script> 14 <script> 15 16 promise_test(async () => { 17 const watcher = new ScoreWatcher; 18 19 // Wait for the initial render to complete. 20 await waitForAnimationFrames(2); 21 22 // Scroll down by 100px. 23 document.scrollingElement.scrollTop = 100; 24 assert_equals(watcher.score, 0); 25 26 // Generate a layout shift. 27 document.querySelector("#shift").style = "top: 60px"; 28 29 // Impact region: width * (height - scrollTop + moveDistance) 30 const expectedScore = computeExpectedScore( 31 300 * (200 - 100 + 60), 60); 32 33 await watcher.promise; 34 assert_equals(watcher.score, expectedScore); 35 }, 'Layout shift with non-zero scroll offset.'); 36 37 </script>