Implement CloseWatcher integration for popovers

This is being integrated in this HTML spec PR which adds CloseWatchers: whatwg/html#9462 CloseWatcher is not enabled right now, so this patch should not make any behavior changes to stable chrome. This patch makes it so that pressing the escape key uses the document/window's closewatcher stack to find a popover to light dismiss rather than HandlePopoverLightDismiss hiding whatever the TopmostPopoverOrHint is. Hopefully they agree with each other. The behavior change for popovers is that the android back button can close popovers, and this gives popovers the grouping-without-user-activation behavior that dialogs have (with the flag enabled). If you open 5 popovers with a single user activation, then any close signal (including Esc on desktop) will close all 5 of those popovers, not just the topmost one. Bug: 1171318 Change-Id: I73740c3eb9c16b0883862ae259be4867b824a79c
web-platform-tests · Jul 18, 2023 · d1479cc · d1479cc
1 parent ad48ce3
commit d1479cc
Showing 1 changed file with 65 additions and 0 deletions.
diff --git a/html/semantics/popovers/popover-closewatcher.tentative.html b/html/semantics/popovers/popover-closewatcher.tentative.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/whatwg/html/pull/9462">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+
+<button id=b0>b0</button>
+
+<div id=p1 popover=auto>
+  <button id=b1>b1</button>
+
+  <div id=p2 popover=auto>
+    <button id=b2>b2</button>
+
+    <div id=p3 popover=auto>p3</div>
+  </div>
+</div>
+
+<script>
+const escapeKey = '\uE00C';
+
+promise_test(async () => {
+  p1.showPopover();
+  p2.showPopover();
+  p3.showPopover();
+  assert_true(p1.matches(':popover-open'), 'p1 should be open.');
+  assert_true(p2.matches(':popover-open'), 'p2 should be open.');
+  assert_true(p3.matches(':popover-open'), 'p3 should be open.');
+
+  await test_driver.send_keys(p3, escapeKey);
+  assert_false(p1.matches(':popover-open'), 'p1 should be closed.');
+  assert_false(p2.matches(':popover-open'), 'p2 should be closed.');
+  assert_false(p3.matches(':popover-open'), 'p3 should be closed.');
+}, 'Opening multiple popovers without user activation causes them all to be closed with one close signal.');
+
+promise_test(async () => {
+  await test_driver.click(b0);
+  p1.showPopover();
+  await test_driver.click(b1);
+  p2.showPopover();
+  await test_driver.click(b2);
+  p3.showPopover();
+  assert_true(p1.matches(':popover-open'), 'p1 should be open.');
+  assert_true(p2.matches(':popover-open'), 'p2 should be open.');
+  assert_true(p3.matches(':popover-open'), 'p3 should be open.');
+
+  await test_driver.send_keys(p3, escapeKey);
+  assert_true(p1.matches(':popover-open'), 'first escape: p1 should be open.');
+  assert_true(p2.matches(':popover-open'), 'first escape: p2 should be open.');
+  assert_false(p3.matches(':popover-open'), 'first escape: p3 should be closed.');
+
+  await test_driver.send_keys(p2, escapeKey);
+  assert_true(p1.matches(':popover-open'), 'second escape: p1 should be open.');
+  assert_false(p2.matches(':popover-open'), 'second escape: p2 should be closed.');
+  assert_false(p3.matches(':popover-open'), 'second escape: p3 should be closed.');
+
+  await test_driver.send_keys(p1, escapeKey);
+  assert_false(p1.matches(':popover-open'), 'third escape: p1 should be closed.');
+  assert_false(p2.matches(':popover-open'), 'third escape: p2 should be closed.');
+  assert_false(p3.matches(':popover-open'), 'third escape: p3 should be closed.');
+}, 'Opening multiple popovers with user activation should close one at a time with close signals.');
+</script>