content-visibility-024.html (1379B)
1 <!doctype HTML> 2 <html class="reftest-wait"> 3 <meta charset="utf8"> 4 <title>Content Visibility: hidden image</title> 5 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 7 <link rel="match" href="content-visibility-024-ref.html"> 8 <meta name="assert" content="content-visibility hidden img element paints when hidden is removed"> 9 <meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-100"> 10 11 <script src="/common/reftest-wait.js"></script> 12 13 <style> 14 div { 15 background: blue; 16 color: white; 17 } 18 img { 19 width: 400px; 20 height: 200px; 21 background: lightblue; 22 border: 1px solid black; 23 } 24 .hidden { 25 content-visibility: hidden; 26 } 27 </style> 28 29 <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> 30 <img id="img1" class=hidden src="resources/dice.png"></img> 31 <img id="img2" class=hidden src="resources/circles.svg"></img> 32 <div>Lorem ipsum consectetur adipiscing elit</div> 33 34 <script> 35 async function runTest() { 36 document.getElementById("img1").classList.remove("hidden"); 37 document.getElementById("img2").classList.remove("hidden"); 38 requestAnimationFrame(takeScreenshot); 39 } 40 41 window.onload = () => { 42 requestAnimationFrame(() => { 43 requestAnimationFrame(runTest); 44 }); 45 }; 46 </script> 47 </html>