<!doctype HTML> <html class="reftest-wait"> <meta charset="utf8"> <title>CSS Content Visibility: hidden stops painting when added (composited child)</title> <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> <link rel="match" href="container-ref.html"> <meta name="assert" content="content-visibility subtrees stop painting when hidden is added"> <script src="/common/reftest-wait.js"></script> <style> #container { width: 150px; height: 150px; background: lightblue; } .hidden { content-visibility: hidden; } #child { width: 50px; height: 50px; background: red; will-change: transform; } </style> <div id=container> Test fails if you can see this text or a red box. <div id=child></div> </div> <script> function runTest() { const container = document.getElementById("container"); container.classList.add("hidden"); requestAnimationFrame(takeScreenshot); } window.onload = runTest; </script> </html>