79 lines
3.5 KiB
HTML
79 lines
3.5 KiB
HTML
<!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>
|