resize-while-content-visibility-hidden.html (1428B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <title>CSS Container Queries Test: condition change while content-visibility: hidden</title> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries"> 5 <link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility"> 6 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 7 <link rel="match" href="resize-while-content-visibility-hidden-ref.html"> 8 <link rel="assert" content="Container query applies even if container is content-visibility: hidden"> 9 10 <script src="/common/reftest-wait.js"></script> 11 12 <style> 13 #container { 14 container-name: container; 15 container-type: size; 16 width: 300px; 17 height: 300px; 18 } 19 20 #child { 21 width: 200px; 22 height: 200px; 23 background: red; 24 } 25 26 #container.wide { width: 500px; } 27 .locked { content-visibility: hidden; } 28 29 @container container (min-width: 400px) { #child { background: green; } } 30 </style> 31 32 <div id=container> 33 <div id=child></div> 34 </div> 35 36 <script> 37 async function runTest() { 38 await new Promise(requestAnimationFrame); 39 container.classList.add("locked"); 40 41 await new Promise(requestAnimationFrame); 42 container.classList.add("wide"); 43 44 await new Promise(requestAnimationFrame); 45 container.classList.remove("locked"); 46 47 await new Promise(requestAnimationFrame); 48 takeScreenshot(); 49 } 50 51 requestAnimationFrame(() => { requestAnimationFrame(() => runTest()) }); 52 53 </script>