popover-open-with-has-sibling-selector.html (1237B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 4 <link rel="help" href="https://drafts.csswg.org/selectors/#selectordef-popover-open"> 5 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 6 <style> 7 .half-square { 8 width: 100px; 9 height: 50px; 10 background-color: red; 11 } 12 #p1-sibling:not(:has(+:popover-open)) { 13 background-color: green; 14 } 15 #p2-sibling:has(+:popover-open) { 16 background-color: green; 17 } 18 [popover] { 19 visibility: hidden; 20 } 21 </style> 22 23 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 24 25 <div> 26 <div id="p1-sibling" class="half-square"></div> 27 <div popover id="p1">Popover 1</div> 28 </div> 29 30 <div> 31 <div id="p2-sibling" class="half-square"></div> 32 <div popover id="p2">Popover 2</div> 33 </div> 34 35 <script> 36 addEventListener("load", async () => { 37 p1.showPopover(); 38 await new Promise(r => requestAnimationFrame(r)); 39 p1.hidePopover(); 40 await new Promise(r => requestAnimationFrame(r)); 41 p2.showPopover(); 42 document.documentElement.classList.remove("reftest-wait"); 43 }); 44 </script> 45 </html>