63 lines
2.4 KiB
HTML
63 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8" />
|
|
<link rel="author" href="mailto:masonf@chromium.org">
|
|
<link rel=help href="https://github.com/whatwg/html/pull/10770">
|
|
<link rel=help href="https://issues.chromium.org/issues/379241451">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="resources/popover-utils.js"></script>
|
|
|
|
<button id=case1 popovertarget=popover>Button
|
|
<div popover id=popover>
|
|
<span class=descendant>Popover</span>
|
|
</div>
|
|
</button>
|
|
|
|
<button id=case2 popovertarget=case2 popover>Self link</button>
|
|
|
|
<button popovertarget=case3>Button
|
|
<div popover id=case3>
|
|
<span class=descendant>Popover</span>
|
|
</div>
|
|
</button>
|
|
|
|
<script>
|
|
promise_test(async t => {
|
|
const invoker = document.querySelector('#case1');
|
|
const popover = invoker.querySelector('[popover]');
|
|
const descendant = invoker.querySelector('.descendant');
|
|
assert_false(popover.matches(':popover-open'));
|
|
invoker.click();
|
|
assert_true(popover.matches(':popover-open'));
|
|
popover.click();
|
|
assert_true(popover.matches(':popover-open'),'Should still be open');
|
|
descendant.click();
|
|
assert_true(popover.matches(':popover-open'),'Should still be open, even for descendant');
|
|
popover.hidePopover();
|
|
},'clicking a popover nested inside a button should not re-invoke the popover');
|
|
|
|
promise_test(async t => {
|
|
const element = document.querySelector('#case2');
|
|
assert_false(element.matches(':popover-open'));
|
|
element.showPopover();
|
|
assert_true(element.matches(':popover-open'));
|
|
element.click(); // This is a click on the button, which is also the popover
|
|
assert_false(element.matches(':popover-open'));
|
|
element.hidePopover();
|
|
},'corner case: invoker that is also a popover');
|
|
|
|
promise_test(async t => {
|
|
const popover = document.querySelector('#case3');
|
|
const outerInvoker = popover.parentElement;
|
|
const descendant = popover.querySelector('.descendant');
|
|
const innerInvoker = popover.appendChild(document.createElement('button'));
|
|
innerInvoker.popoverTargetElement = popover;
|
|
assert_false(popover.matches(':popover-open'));
|
|
outerInvoker.click();
|
|
assert_true(popover.matches(':popover-open'));
|
|
descendant.click();
|
|
assert_true(popover.matches(':popover-open'),'descendant doesn\'t close popover');
|
|
innerInvoker.click();
|
|
assert_false(popover.matches(':popover-open'),'inner invoker still works');
|
|
},'invoker inside popover still works, even with weird nesting');
|
|
</script>
|