content-visibility-auto-resize.html (944B)
1 <!DOCTYPE html> 2 <title>Layout Instability: resizing 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 assert_equals(watcher.score, 0); 17 }, 'off-screen content-visibility:auto'); 18 </script> 19 <style> 20 .auto { 21 content-visibility: auto; 22 contain-intrinsic-size: 10px 3000px; 23 width: 100px; 24 } 25 .contained { 26 height: 100px; 27 background: blue; 28 } 29 </style> 30 <div class=auto><div class=contained></div></div> 31 <div class=auto><div class=contained></div></div>