1 files changed, 74 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-invoking-attribute.html b/testing/web-platform/tests/html/semantics/popovers/popover-invoking-attribute.html
new file mode 100644
index 0000000000..8e312e90d7
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/popovers/popover-invoking-attribute.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>Popover invoking attribute</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel=help href="https://open-ui.org/components/popover.research.explainer">
+<link rel=help href="https://html.spec.whatwg.org/multipage/popover.html">
+<meta name="timeout" content="long">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/popover-utils.js"></script>
+<script src="resources/popover-invoking-attribute.js"></script>
+
+<body>
+<script>
+runPopoverInvokerTests(["auto","manual"]);
+</script>
+
+<button popovertarget=p1>Toggle Popover 1</button>
+<div popover id=p1 style="border: 5px solid red;top: 100px;left: 100px;">This is popover #1</div>
+
+<script>
+function clickOn(element) {
+  const actions = new test_driver.Actions();
+  return actions.pointerMove(0, 0, {origin: element})
+    .pointerDown({button: actions.ButtonType.LEFT})
+    .pointerUp({button: actions.ButtonType.LEFT})
+    .send();
+}
+
+const popover = document.querySelector('[popover]');
+const button = document.querySelector('button');
+let showCount = 0;
+let hideCount = 0;
+popover.addEventListener('beforetoggle',(e) => {
+  if (e.newState === "open")
+      ++showCount;
+    else
+      ++hideCount;
+  });
+
+async function assertState(expectOpen,expectShow,expectHide) {
+  assert_equals(popover.matches(':popover-open'),expectOpen,'Popover open state is incorrect');
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  assert_equals(showCount,expectShow,'Show count is incorrect');
+  assert_equals(hideCount,expectHide,'Hide count is incorrect');
+}
+
+window.addEventListener('load', () => {
+  promise_test(async () => {
+    showCount = hideCount = 0;
+    await assertState(false,0,0);
+    await clickOn(button);
+    await assertState(true,1,0);
+    popover.hidePopover();
+    await assertState(false,1,1);
+    button.click();
+    await assertState(true,2,1);
+    popover.hidePopover();
+    await assertState(false,2,2);
+  }, "Clicking a popovertarget button opens a closed popover (also check event counts)");
+
+  promise_test(async () => {
+    showCount = hideCount = 0;
+    await assertState(false,0,0);
+    await clickOn(button);
+    await assertState(true,1,0);
+    await clickOn(button);
+    await assertState(false,1,1);
+  }, "Clicking a popovertarget button closes an open popover (also check event counts)");
+});
+</script>