Implement new behavior for popovers contained within invokers

In this case: ``` <button popovertarget=foo>Activate <div popover id=foo>Clicking me shouldn't close me</div> </button> ``` clicking the button properly activates the popover, however, clicking on the popover itself after that should **not** close the popover. It currently does because the popover click bubbles to the `<button>` and activates the invoker, which toggles the popover closed. This CL changes that behavior so that clicks on the popover in the case above no longer re-invoke the popover. Spec PR: whatwg/html#10770 Bug: 379241451 Change-Id: Iab67127c46a97a081a7818bfd917864729bf8b5c
web-platform-tests · Nov 18, 2024 · fe6d149 · fe6d149
1 parent bfd44a5
commit fe6d149
Showing 1 changed file with 63 additions and 0 deletions.
diff --git a/html/semantics/popovers/popover-nested-in-button.tentative.html b/html/semantics/popovers/popover-nested-in-button.tentative.html
@@ -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>