| <!DOCTYPE html> |
| <link rel=author href="mailto:jarhar@chromium.org"> |
| <link rel=help href="https://github.com/whatwg/html/issues/9043"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <div id=popover popover=auto>popover</div> |
| <div id=popover2 popover=auto>popover</div> |
| |
| <script> |
| test(() => { |
| assert_false(popover.matches(':popover-open'), |
| 'Popover should be closed when the test starts.'); |
| |
| assert_true(popover.togglePopover(), |
| 'togglePopover() should return true.'); |
| assert_true(popover.matches(':popover-open'), |
| 'togglePopover() should open the popover.'); |
| |
| assert_true(popover.togglePopover(/*force=*/true), |
| 'togglePopover(true) should return true.'); |
| assert_true(popover.matches(':popover-open'), |
| 'togglePopover(true) should open the popover.'); |
| |
| assert_false(popover.togglePopover(), |
| 'togglePopover() should return false.'); |
| assert_false(popover.matches(':popover-open'), |
| 'togglePopover() should close the popover.'); |
| |
| assert_false(popover.togglePopover(/*force=*/false), |
| 'togglePopover(false) should return false.'); |
| assert_false(popover.matches(':popover-open'), |
| 'togglePopover(false) should close the popover.'); |
| }, 'togglePopover should toggle the popover and return true or false as specified.'); |
| |
| test(() => { |
| const popover = document.getElementById('popover2'); |
| popover.addEventListener('beforetoggle', event => event.preventDefault(), {once: true}); |
| assert_false(popover.togglePopover(/*force=*/true), |
| 'togglePopover(true) should return false when the popover does not get opened.'); |
| assert_false(popover.matches(':popover-open')); |
| |
| // We could also add a test for the return value of togglePopover(false), |
| // but every way to prevent that from hiding the popover also throws an |
| // exception, so the return value is not testable. |
| }, `togglePopover's return value should reflect what the end state is, not just the force parameter.`); |
| |
| test(() => { |
| const popover = document.createElement('div'); |
| document.body.appendChild(popover); |
| |
| assert_throws_dom('NotSupportedError', () => popover.togglePopover(), |
| 'togglePopover() should throw an exception when the element has no popover attribute.'); |
| assert_throws_dom('NotSupportedError', () => popover.togglePopover(true), |
| 'togglePopover(true) should throw an exception when the element has no popover attribute.'); |
| assert_throws_dom('NotSupportedError', () => popover.togglePopover(false), |
| 'togglePopover(false) should throw an exception when the element has no popover attribute.'); |
| |
| popover.setAttribute('popover', 'auto'); |
| popover.remove(); |
| |
| assert_throws_dom('InvalidStateError', () => popover.togglePopover(), |
| 'togglePopover() should throw an exception when the element is disconnected.'); |
| assert_throws_dom('InvalidStateError', () => popover.togglePopover(true), |
| 'togglePopover(true) should throw an exception when the element is disconnected.'); |
| assert_throws_dom('InvalidStateError', () => popover.togglePopover(false), |
| 'togglePopover(false) should throw an exception when the element is disconnected.'); |
| |
| document.body.appendChild(popover); |
| // togglePopover(false) should not throw just because the popover is already hidden. |
| popover.togglePopover(false); |
| popover.showPopover(); |
| // togglePopover(true) should not throw just because the popover is already showing. |
| popover.togglePopover(true); |
| |
| // cleanup |
| popover.hidePopover(); |
| }, 'togglePopover should throw an exception when there is no popover attribute.'); |
| </script> |