content-visibility-with-top-layer-003.html (1078B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <meta charset="utf8"> 4 <title>CSS Content Visibility: dialog shows when rendered</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-with-top-layer-ref.html"> 8 <meta name="assert" content="top layer dialogs 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 #dialog { 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 <dialog id=dialog>PASS<div id=inner></div></dialog> 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 dialog.showModal(); 33 requestAnimationFrame(unhide); 34 } 35 36 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 37 </script>