<!doctype HTML> <html class="reftest-wait"> <meta charset="utf8"> <title>Content Visibility: hidden image</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="content-visibility-024-ref.html"> <meta name="assert" content="content-visibility hidden img element paints when hidden is removed"> <script src="/common/reftest-wait.js"></script> <style> div { background: blue; color: white; } img { width: 400px; height: 200px; background: lightblue; border: 1px solid black; } .hidden { content-visibility: hidden; } </style> <div>Test passes if there are two pictures below: one of colored dices over a checkered background, and one of a bunch of circles.</div> <img id="img1" class=hidden src="resources/dice.png"></img> <img id="img2" class=hidden src="resources/circles.svg"></img> <div>Lorem ipsum consectetur adipiscing elit</div> <script> async function runTest() { document.getElementById("img1").classList.remove("hidden"); document.getElementById("img2").classList.remove("hidden"); requestAnimationFrame(takeScreenshot); } window.onload = () => { requestAnimationFrame(() => { requestAnimationFrame(runTest); }); }; </script> </html>