content-visibility-085.html (1141B)
1 <!doctype HTML> 2 <html class="reftest-wait"> 3 <meta charset="utf8"> 4 <title>CSS Content Visibility: auto with content changes</title> 5 <link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 7 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 8 <meta name="assert" content="content-visibility auto element should be resized when content changes"> 9 10 <script src="/common/reftest-wait.js"></script> 11 12 <style> 13 .auto { 14 content-visibility: auto; 15 width: fit-content; 16 } 17 .hidden { height: 0; } 18 </style> 19 20 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 21 <div class="auto"> 22 <div id ="target" class="hidden"> 23 <div style="width: 100px; height: 100px; background-color: green;"></div> 24 </div> 25 </div> 26 27 <script> 28 function changeContent() { 29 requestAnimationFrame(() => { 30 target.classList.toggle("hidden"); 31 requestAnimationFrame(takeScreenshot); 32 }); 33 } 34 function runTest() { 35 requestAnimationFrame(changeContent); 36 } 37 38 window.onload = () => { requestAnimationFrame(runTest); }; 39 </script>