ignore-fixed-and-sticky.html (1234B)
1 <!DOCTYPE html> 2 <title>Layout Instability: ignore fixed and sticky positioning</title> 3 <link rel="help" href="https://wicg.github.io/layout-instability/" /> 4 <style> 5 6 body { height: 2000px; } 7 #f1, #f2 { 8 position: fixed; 9 width: 300px; 10 height: 100px; 11 left: 100px; 12 background: yellow; 13 } 14 #f1 { top: 0; } 15 #f2 { top: 150px; will-change: transform; } 16 #s1 { 17 position: sticky; 18 width: 200px; 19 height: 100px; 20 left: 450px; 21 top: 0; 22 background: blue; 23 } 24 25 </style> 26 <div id='f1'>fixed</div> 27 <div id='f2'>fixed composited</div> 28 <div id='s1'>sticky</div> 29 normal 30 31 <script src="/resources/testharness.js"></script> 32 <script src="/resources/testharnessreport.js"></script> 33 <script src="resources/util.js"></script> 34 <script> 35 36 promise_test(async () => { 37 const watcher = new ScoreWatcher; 38 39 // Wait for the initial render to complete. 40 await waitForAnimationFrames(2); 41 42 // Scroll down by 50px. 43 document.scrollingElement.scrollTop = 50; 44 45 // Force a layout. 46 document.body.style.height = "2500px"; 47 48 // No layout shift should occur as a result of the scroll-triggered 49 // repositioning of fixed and sticky elements. 50 await waitForAnimationFrames(3); 51 assert_equals(watcher.score, 0); 52 }, 'Ignore fixed and sticky.'); 53 54 </script>