popover-anchor-nesting.tentative.html (1977B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Popover anchor nesting</title> 4 <link rel="author" href="mailto:masonf@chromium.org"> 5 <link rel=help href="https://open-ui.org/components/popover.research.explainer"> 6 <link rel=help href="https://html.spec.whatwg.org/multipage/popover.html"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="resources/popover-utils.js"></script> 13 14 <body> 15 16 <!-- This example has the anchor (b1) for one popover (p1) 17 which contains a separate popover (p2) which is anchored 18 by a separate anchor (b2). --> 19 <button id=b1 onclick='p1.showPopover()'>Popover 1 20 <div popover id=p2 anchor=b2> 21 <span id=inside2>Inside popover 2</span> 22 </div> 23 </button> 24 <div popover id=p1 anchor=b1>This is popover 1</div> 25 <button id=b2 onclick='p2.showPopover()'>Popover 2</button> 26 27 <style> 28 #p1 { top:50px; } 29 #p2 { top:50px; left:250px; } 30 [popover] { border: 5px solid red; } 31 </style> 32 33 34 <script> 35 const popover1 = document.querySelector('#p1'); 36 const button1 = document.querySelector('#b1'); 37 const popover2 = document.querySelector('#p2'); 38 39 (async function() { 40 setup({ explicit_done: true }); 41 42 popover2.showPopover(); 43 assert_false(popover1.matches(':popover-open')); 44 assert_true(popover2.matches(':popover-open')); 45 await clickOn(button1); 46 test(t => { 47 // Button1 is the anchor for popover1, and an ancestor of popover2. 48 // Since popover2 is open, but not popover1, button1 should not be 49 // the anchor of any open popover. So popover2 should be closed. 50 assert_false(popover2.matches(':popover-open')); 51 assert_true(popover1.matches(':popover-open')); 52 },'Nested popovers (inside anchor elements) do not affect light dismiss'); 53 54 done(); 55 })(); 56 </script>