content-visibility-auto-onscreen.html (868B)
1 <!DOCTYPE html> 2 <title>Layout Instability: on-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 assert_equals(watcher.score, 0); 16 }, 'on-screen content-visibility:auto'); 17 </script> 18 <style> 19 #target { 20 content-visibility: auto; 21 contain-intrinsic-size: 1px; 22 width: 100px; 23 } 24 </style> 25 <div id=target> 26 <div style="width: 100px; height: 100px; background: blue"></div> 27 </div>