Add 'show' event to popup, and add testing of popup events

Now there will be both a 'show' and a 'hide' event for popups, and there is a test of both. Bug: 1307772 Change-Id: I781a470d943c1e3bd98c068a7542e478d29cbc4b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3564653 Auto-Submit: Mason Freed <masonf@chromium.org> Reviewed-by: Joey Arhar <jarhar@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#988829}
chromium · Apr 5, 2022 · ba11c24 · ba11c24
1 parent de18a74
commit ba11c24
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 1 deletion.
diff --git a/third_party/blink/renderer/core/dom/element.cc b/third_party/blink/renderer/core/dom/element.cc
@@ -2400,6 +2400,10 @@ void Element::showPopup() {
   GetDocument().AddToTopLayer(this);
   PseudoStateChanged(CSSSelector::kPseudoPopupOpen);
   SetPopupFocusOnShow();
+  // Queue the show event.
+  Event* event = Event::CreateBubble(event_type_names::kShow);
+  event->SetTarget(this);
+  GetDocument().EnqueueAnimationFrameEvent(event);
 }
 
 void Element::hidePopup() {
@@ -2419,7 +2423,7 @@ void Element::hidePopup() {
   GetDocument().RemoveFromTopLayer(this);
   PseudoStateChanged(CSSSelector::kPseudoPopupOpen);
   // Queue the hide event.
-  Event* event = Event::Create(event_type_names::kHide);
+  Event* event = Event::CreateBubble(event_type_names::kHide);
   event->SetTarget(this);
   GetDocument().EnqueueAnimationFrameEvent(event);
 }

diff --git a/third_party/blink/web_tests/external/wpt/html/semantics/popups/popup-events.tentative.html b/third_party/blink/web_tests/external/wpt/html/semantics/popups/popup-events.tentative.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>Popup events</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel=help href="https://open-ui.org/components/popup.research.explainer">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div popup=popup>Popup</div>
+
+<script>
+function waitUntilChange(fn) {
+  return new Promise((resolve, reject) => {
+    const original = fn();
+    function tick() {
+      if (original != fn()) {
+        resolve();
+      } else {
+        requestAnimationFrame(tick.bind(this));
+      }
+    }
+    tick();
+  });
+}
+function requestAnimationFramePromise() {
+  return new Promise((resolve) => window.requestAnimationFrame(resolve));
+}
+
+promise_test(async t => {
+  const popup = document.querySelector('[popup]');
+  let showCount = 0;
+  let hideCount = 0;
+  await new Promise(resolve => window.addEventListener('load',() => resolve()));
+  assert_false(popup.matches(':popup-open'));
+  document.addEventListener('show',() => ++showCount);
+  document.addEventListener('hide',() => ++hideCount);
+  assert_equals(0,showCount);
+  assert_equals(0,hideCount);
+  popup.showPopup();
+  assert_true(popup.matches(':popup-open'));
+  await waitUntilChange(() => showCount);
+  assert_equals(1,showCount);
+  assert_equals(0,hideCount);
+  await requestAnimationFramePromise();
+  assert_true(popup.matches(':popup-open'));
+  popup.hidePopup();
+  assert_false(popup.matches(':popup-open'));
+  await waitUntilChange(() => hideCount);
+  assert_equals(1,showCount);
+  assert_equals(1,hideCount);
+  await requestAnimationFramePromise();
+  // No additional events after animation frame
+  assert_false(popup.matches(':popup-open'));
+  assert_equals(1,showCount);
+  assert_equals(1,hideCount);
+}, 'Show and hide events get properly dispatched for popups');
+
+</script>