expand-above-viewport.html (1615B)
1 <!DOCTYPE html> 2 <title>Layout Instability: layout shift when content expanded above the viewport</title> 3 <link rel="help" href="https://wicg.github.io/layout-instability/" /> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="resources/test-adapter.js"></script> 7 <script src="resources/util.js"></script> 8 <style> 9 body { 10 margin: 0; 11 /* To avoid browser automatic scroll offset adjustment for the expansion. */ 12 overflow-anchor: none; 13 } 14 </style> 15 <div id="expander" style="height: 50vh"></div> 16 <div id="shifted" style="width: 300px; height: 300vh; background: blue"></div> 17 <script> 18 19 promise_test(async () => { 20 const watcher = new ScoreWatcher; 21 22 // Wait for the initial render to complete. 23 await waitForAnimationFrames(2); 24 25 const viewHeight = document.documentElement.clientHeight; 26 window.scrollTo(0, viewHeight); 27 28 await waitForAnimationFrames(2); 29 30 // Expander expands to push |shifted| down. 31 expander.style.height = '150vh'; 32 33 const expectedScore1 = computeExpectedScore(300 * viewHeight, viewHeight); 34 35 // Observer fires after the frame is painted. 36 cls_expect(watcher, {score: 0}); 37 await watcher.promise; 38 cls_expect(watcher, {score: expectedScore1}); 39 40 // Expander expands to push |shifted| out of viewport. 41 expander.style.height = '200vh'; 42 43 const expectedScore2 = expectedScore1 + 44 computeExpectedScore(0.5 * 300 * viewHeight, 0.5 * viewHeight); 45 await watcher.promise; 46 cls_expect(watcher, {score: expectedScore2}); 47 }, "Layout shift when content expanded above the viewport"); 48 49 </script>