Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement new behavior for popovers contained within invokers #49232

Merged
merged 1 commit into from
Nov 18, 2024
Merged

Implement new behavior for popovers contained within invokers #49232

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions html/semantics/popovers/popover-nested-in-button.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="author" href="mailto:[email protected]">
<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>