| <!DOCTYPE html> |
| <title>Layout Instability: ignore fixed and sticky positioning</title> |
| <link rel="help" href="https://wicg.github.io/layout-instability/" /> |
| <style> |
| |
| body { height: 2000px; } |
| #f1, #f2 { |
| position: fixed; |
| width: 300px; |
| height: 100px; |
| left: 100px; |
| } |
| #f1 { top: 0; } |
| #f2 { top: 150px; will-change: transform; } |
| #s1 { |
| position: sticky; |
| width: 200px; |
| height: 100px; |
| left: 450px; |
| top: 0; |
| } |
| |
| </style> |
| <div id='f1'>fixed</div> |
| <div id='f2'>fixed composited</div> |
| <div id='s1'>sticky</div> |
| normal |
| |
| <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 down by 50px. |
| document.scrollingElement.scrollTop = 50; |
| |
| // Force a layout. |
| document.body.style.height = "2500px"; |
| |
| // No layout shift should occur as a result of the scroll-triggered |
| // repositioning of fixed and sticky elements. |
| await waitForAnimationFrames(3); |
| assert_equals(watcher.score, 0); |
| }, 'Ignore fixed and sticky.'); |
| |
| </script> |