popover-invoker-reset.html (1305B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" href="mailto:masonf@chromium.org"> 4 <link rel=help href="https://open-ui.org/components/popover.research.explainer"> 5 <link rel=help href="https://github.com/whatwg/html/issues/9152"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="resources/popover-utils.js"></script> 12 13 <div id=p1 popover>Popover 1 14 <button popovertarget=p2>Button</button> 15 </div> 16 <div id=p2 popover>Popover 2</div> 17 18 <script> 19 test((t) => { 20 p1.showPopover(); 21 assert_true(p1.matches(':popover-open')); 22 const invoker = p1.querySelector('button'); 23 p2.addEventListener('beforetoggle',(e) => { 24 assert_equals(e.newState,'open'); 25 e.preventDefault(); 26 },{once:true}); 27 invoker.click(); // Will be cancelled 28 assert_false(p2.matches(':popover-open')); 29 assert_true(p1.matches(':popover-open')); 30 p2.showPopover(); 31 assert_true(p2.matches(':popover-open')); 32 assert_false(p1.matches(':popover-open'),'invoker was not used to show p2, so p1 should close'); 33 },'Invoker gets reset appropriately'); 34 </script>