popover-nested-in-button.html (3185B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <link rel="author" href="mailto:masonf@chromium.org"> 4 <link rel=help href="https://github.com/whatwg/html/pull/10770"> 5 <link rel=help href="https://issues.chromium.org/issues/379241451"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="resources/popover-utils.js"></script> 9 10 <button id=case1 popovertarget=popover>Button 11 <div popover id=popover> 12 <span class=descendant>Popover</span> 13 </div> 14 </button> 15 16 <button id=case2 popovertarget=case2 popover>Self link</button> 17 18 <button popovertarget=case3>Button 19 <div popover id=case3> 20 <span class=descendant>Popover</span> 21 </div> 22 </button> 23 24 <div id=case4> 25 <template shadowrootmode=open> 26 <button popovertarget=case4>Button 27 <div popover id=case4> 28 <span class=descendant>Popover</span> 29 </div> 30 </button> 31 </template> 32 </div> 33 34 <script> 35 promise_test(async t => { 36 const invoker = document.querySelector('#case1'); 37 const popover = invoker.querySelector('[popover]'); 38 const descendant = invoker.querySelector('.descendant'); 39 assert_false(popover.matches(':popover-open')); 40 invoker.click(); 41 assert_true(popover.matches(':popover-open')); 42 popover.click(); 43 assert_true(popover.matches(':popover-open'),'Should still be open'); 44 descendant.click(); 45 assert_true(popover.matches(':popover-open'),'Should still be open, even for descendant'); 46 popover.hidePopover(); 47 },'clicking a popover nested inside a button should not re-invoke the popover'); 48 49 promise_test(async t => { 50 const element = document.querySelector('#case2'); 51 assert_false(element.matches(':popover-open')); 52 element.showPopover(); 53 assert_true(element.matches(':popover-open')); 54 element.click(); // This is a click on the button, which is also the popover 55 assert_false(element.matches(':popover-open')); 56 element.hidePopover(); 57 },'corner case: invoker that is also a popover'); 58 59 promise_test(async t => { 60 const popover = document.querySelector('#case3'); 61 const outerInvoker = popover.parentElement; 62 const descendant = popover.querySelector('.descendant'); 63 const innerInvoker = popover.appendChild(document.createElement('button')); 64 innerInvoker.popoverTargetElement = popover; 65 assert_false(popover.matches(':popover-open')); 66 outerInvoker.click(); 67 assert_true(popover.matches(':popover-open')); 68 descendant.click(); 69 assert_true(popover.matches(':popover-open'),'descendant doesn\'t close popover'); 70 innerInvoker.click(); 71 assert_false(popover.matches(':popover-open'),'inner invoker still works'); 72 },'invoker inside popover still works, even with weird nesting'); 73 74 promise_test(async t => { 75 const popover = document.querySelector('#case4').shadowRoot.querySelector('[popover]'); 76 const invoker = popover.parentElement; 77 const descendant = popover.querySelector('.descendant'); 78 assert_false(popover.matches(':popover-open')); 79 invoker.click(); 80 assert_true(popover.matches(':popover-open')); 81 descendant.click(); 82 assert_true(popover.matches(':popover-open'),'descendant doesn\'t close popover'); 83 },'invoker inside popover still works, even inside of a shadowroot'); 84 </script>