content-visibility-auto-offscreen.html (1585B)
1 <!DOCTYPE html> 2 <title>Layout Instability: off-screen content-visibility:auto content</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/util.js"></script> 7 <script> 8 // These scripts need to be before the contents because we need to ensure no 9 // layout shifts during page load. 10 promise_test(async () => { 11 const watcher = new ScoreWatcher; 12 13 // Wait for the initial render to complete. 14 await waitForAnimationFrames(2); 15 16 window.scrollTo(0, 100000 + 100); 17 await waitForAnimationFrames(2); 18 19 assert_equals(watcher.score, 0); 20 21 // This should report a layout shift as target is now visible. 22 target.style.top = '100100px'; 23 24 await watcher.promise; 25 const expectedScore = computeExpectedScore(100 * 100, 1); 26 assert_approx_equals(watcher.score, expectedScore, 1e-8, "before scroll to top"); 27 28 // No new layout shift should be reported when target is scrolled out of screen. 29 window.scrollTo(0, 0); 30 await waitForAnimationFrames(2); 31 32 assert_approx_equals(watcher.score, expectedScore, 1e-8, "after scroll to top"); 33 }, 'off-screen content-visibility:auto'); 34 </script> 35 <style> 36 .auto { 37 content-visibility: auto; 38 contain-intrinsic-size: 1px; 39 width: 100px; 40 } 41 </style> 42 <div class=auto> 43 <div style="width: 100px; height: 100px; background: blue"></div> 44 </div> 45 <div id="target" class=auto style="position: relative; top: 100000px"> 46 <div style="width: 100px; height: 100px; background: blue"></div> 47 </div>