content-visibility-022.html (1703B)
1 <!doctype HTML> 2 <html class="reftest-wait"> 3 <meta charset="utf8"> 4 <title>Content Visibility: hidden svg</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-022-ref.html"> 8 <meta name="assert" content="content-visibility hidden svg does not paint"> 9 10 <script src="/common/reftest-wait.js"></script> 11 12 <style> 13 div { 14 background: blue; 15 color: white; 16 } 17 svg { 18 border: 1px solid black; 19 background: lightblue; 20 } 21 .hidden { 22 content-visibility: hidden; 23 } 24 </style> 25 26 <div>Test passes if there is a plain light blue box below with no circles in it.</div> 27 <svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300" id="svg"> 28 <g stroke-width="10" transform="translate(-30)"> 29 <circle cx="80" cy="50" r="35" fill="#084" stroke="none"/> 30 <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/> 31 <circle cx="80" cy="120" r="35" fill="#004" stroke="none"/> 32 <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/> 33 <circle cx="80" cy="190" r="35" fill="#088" stroke="none"/> 34 <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/> 35 <circle cx="80" cy="260" r="35" fill="#008" stroke="none"/> 36 <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/> 37 </g> 38 </svg> 39 <div>Lorem ipsum consectetur adipiscing elit</div> 40 41 <script> 42 async function runTest() { 43 document.getElementById("svg").classList.add("hidden"); 44 requestAnimationFrame(takeScreenshot); 45 } 46 47 window.onload = () => { 48 requestAnimationFrame(() => { 49 requestAnimationFrame(runTest); 50 }); 51 }; 52 </script> 53 </html>