content-visibility-with-top-layer-in-auto-subtree-removal.html (1063B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <meta charset="utf8"> 4 <title>CSS Content Visibility: test top layer dialog removal in on-screen c-v:auto subtree</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="container-with-child-ref.html"> 8 <meta name="assert" content="test top layer dialog removal in on-screen c-v:auto subtree"> 9 10 <script src="/common/reftest-wait.js"></script> 11 12 <style> 13 #container { 14 width: 150px; 15 height: 150px; 16 background: lightblue; 17 content-visibility: auto; 18 } 19 #child { 20 width: 50px; 21 height: 50px; 22 background: green; 23 } 24 </style> 25 26 <div id=container> 27 Test passes if you can see this text and a green box. 28 <div id=child></div> 29 <dialog id=dialog >FAIL<div id=inner></div></dialog> 30 </div> 31 32 <script> 33 function runTest() { 34 dialog.showModal(); 35 inner.getBoundingClientRect(); 36 37 dialog.close(); 38 39 takeScreenshot(); 40 } 41 42 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 43 </script>