content-visibility-028.html (1631B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>Content Visibility: shadow dom</title> 5 <link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 7 <link rel="match" href="container-with-child-ref.html"> 8 <meta name="assert" content="content-visibility hidden can be used in a shadow DOM"> 9 10 <script src="/common/reftest-wait.js"></script> 11 12 <style> 13 .hidden { 14 content-visibility: hidden; 15 } 16 .child { 17 width: 50px; 18 height: 50px; 19 background: green; 20 } 21 </style> 22 <div id="host"> 23 <div id="slotted"> 24 Test passes if you can see this text and a green box. 25 <div class=child></div> 26 </div> 27 </div> 28 29 <script> 30 async function runTest() { 31 // Set up hidden element within shadow root. 32 let shadowRoot = host.attachShadow({ mode: "open" }); 33 let hidden = document.createElement("div"); 34 shadowRoot.innerHTML = ` 35 <style> 36 .container { 37 width: 150px; 38 height: 150px; 39 background: lightblue; 40 } 41 </style>`; 42 shadowRoot.appendChild(hidden); 43 hidden.innerHTML = "<slot></slot>"; 44 hidden.getBoundingClientRect(); 45 hidden.classList.add("container"); 46 hidden.classList.add("hidden"); 47 requestAnimationFrame(() => { 48 slotted.style = "display: none"; 49 // Do a forced layout outside the hidden subtree. 50 host.getBoundingClientRect(); 51 52 hidden.classList.remove("hidden"); 53 slotted.style = ""; 54 requestAnimationFrame(() => { 55 // Check that everything is painted as we expect. 56 takeScreenshot(); 57 }); 58 }); 59 } 60 61 window.onload = runTest; 62 </script> 63 </html>