togglePopover.html (3577B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/whatwg/html/issues/9043"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <div id=popover popover=auto>popover</div> 8 <div id=popover2 popover=auto>popover</div> 9 10 <script> 11 test(() => { 12 assert_false(popover.matches(':popover-open'), 13 'Popover should be closed when the test starts.'); 14 15 assert_true(popover.togglePopover(), 16 'togglePopover() should return true.'); 17 assert_true(popover.matches(':popover-open'), 18 'togglePopover() should open the popover.'); 19 20 assert_true(popover.togglePopover(/*force=*/true), 21 'togglePopover(true) should return true.'); 22 assert_true(popover.matches(':popover-open'), 23 'togglePopover(true) should open the popover.'); 24 25 assert_false(popover.togglePopover(), 26 'togglePopover() should return false.'); 27 assert_false(popover.matches(':popover-open'), 28 'togglePopover() should close the popover.'); 29 30 assert_false(popover.togglePopover(/*force=*/false), 31 'togglePopover(false) should return false.'); 32 assert_false(popover.matches(':popover-open'), 33 'togglePopover(false) should close the popover.'); 34 }, 'togglePopover should toggle the popover and return true or false as specified.'); 35 36 test(() => { 37 const popover = document.getElementById('popover2'); 38 popover.addEventListener('beforetoggle', event => event.preventDefault(), {once: true}); 39 assert_false(popover.togglePopover(/*force=*/true), 40 'togglePopover(true) should return false when the popover does not get opened.'); 41 assert_false(popover.matches(':popover-open')); 42 43 // We could also add a test for the return value of togglePopover(false), 44 // but every way to prevent that from hiding the popover also throws an 45 // exception, so the return value is not testable. 46 }, `togglePopover's return value should reflect what the end state is, not just the force parameter.`); 47 48 test(() => { 49 const popover = document.createElement('div'); 50 document.body.appendChild(popover); 51 52 assert_throws_dom('NotSupportedError', () => popover.togglePopover(), 53 'togglePopover() should throw an exception when the element has no popover attribute.'); 54 assert_throws_dom('NotSupportedError', () => popover.togglePopover(true), 55 'togglePopover(true) should throw an exception when the element has no popover attribute.'); 56 assert_throws_dom('NotSupportedError', () => popover.togglePopover(false), 57 'togglePopover(false) should throw an exception when the element has no popover attribute.'); 58 59 popover.setAttribute('popover', 'auto'); 60 popover.remove(); 61 62 assert_throws_dom('InvalidStateError', () => popover.togglePopover(), 63 'togglePopover() should throw an exception when the element is disconnected.'); 64 assert_throws_dom('InvalidStateError', () => popover.togglePopover(true), 65 'togglePopover(true) should throw an exception when the element is disconnected.'); 66 assert_throws_dom('InvalidStateError', () => popover.togglePopover(false), 67 'togglePopover(false) should throw an exception when the element is disconnected.'); 68 69 document.body.appendChild(popover); 70 // togglePopover(false) should not throw just because the popover is already hidden. 71 popover.togglePopover(false); 72 popover.showPopover(); 73 // togglePopover(true) should not throw just because the popover is already showing. 74 popover.togglePopover(true); 75 76 // cleanup 77 popover.hidePopover(); 78 }, 'togglePopover should throw an exception when there is no popover attribute.'); 79 </script>