content-visibility-with-popover-top-layer-003.html (1086B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <meta charset="utf8"> 4 <title>CSS Content Visibility: popover shows when rendered</title> 5 <link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 7 <link rel="match" href="content-with-popover-top-layer-ref.html"> 8 <meta name="assert" content="top layer popovers start rendering when c-v is removed"> 9 10 <script src="/common/reftest-wait.js"></script> 11 12 <style> 13 .box { width: 100px; height: 100px; border: 1px solid black; } 14 .hidden { content-visibility: hidden } 15 #popover { outline: none; } 16 </style> 17 18 <div id=container class=box> 19 This test passes if you can see “PASS” in a white box. 20 <div popover id=popover>PASS<div id=inner></div></div> 21 </div> 22 text 23 24 <script> 25 function unhide() { 26 container.classList.remove("hidden"); 27 takeScreenshot(); 28 } 29 30 function runTest() { 31 container.classList.add("hidden"); 32 popover.showPopover(); 33 requestAnimationFrame(unhide); 34 } 35 36 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 37 </script>