Add the beginning of hover-trigger for pop-ups

This CL adds the 'hoverpopup' attribute, to go along with the other invoking attributes (togglepopup, showpopup, hidepopup). This attribute, when places on *any* element, triggers a pop-up when hovered. With this CL, it is always triggered after a fixed 50ms delay, but that will be made configurable via CSS in subsequent CLs. There is also no "hide" trigger when any element is de-hovered - again that will be added later. See this spec discussion: openui/open-ui#526 (comment) Bug: 1307772 Change-Id: I7af88dad9efa015f833843ea76bed41b4aa42c4b
web-platform-tests · Jul 12, 2022 · eb0b4d9 · eb0b4d9
1 parent 27b1b61
commit eb0b4d9
Showing 1 changed file with 88 additions and 0 deletions.
diff --git a/html/semantics/popups/popup-hoverpopup-attribute.tentative.html b/html/semantics/popups/popup-hoverpopup-attribute.tentative.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>The hoverpopup attribute</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel=help href="https://open-ui.org/components/popup.research.explainer">
+<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/popup-utils.js"></script>
+
+<body>
+<style>
+  div {top:100px;}
+  [popup] {top:200px;}
+</style>
+<script>
+let nextId = 0;
+async function makePopUpAndInvoker(test, popUpType) {
+  const popUp = Object.assign(document.createElement('div'),{popUp: popUpType, id: `pop-up-${nextId++}`});
+  document.body.appendChild(popUp);
+  popUp.textContent = 'Pop-up';
+  const invoker = document.createElement('div');
+  document.body.appendChild(invoker);
+  invoker.textContent = 'Invoker';
+  invoker.setAttribute('hoverpopup',popUp.id);
+  test.add_cleanup(() => {popUp.remove();invoker.remove();});
+  await waitForRender();
+  return {popUp,invoker};
+}
+function mouseOver(element) {
+  return (new test_driver.Actions())
+    .pointerMove(0, 0, {origin: element})
+    .send();
+}
+const hoverTime = 100; // Once the hover time is CSS-customizable, lower this.
+async function waitForHoverTime() {
+  await new Promise(resolve => step_timeout(resolve,hoverTime));
+  await waitForRender();
+};
+
+["auto","hint","manual"].forEach(type => {
+  promise_test(async (t) => {
+    const {popUp,invoker} = await makePopUpAndInvoker(t,type);
+    assert_false(popUp.matches(':top-layer'));
+    await mouseOver(invoker);
+    assert_false(popUp.matches(':top-layer'));
+    await waitForHoverTime();
+    assert_true(popUp.matches(':top-layer'));
+    popUp.hidePopUp(); // Cleanup
+  },`hoverpopup attribute shows a pop-up with popup=${type}`);
+
+  promise_test(async (t) => {
+    const {popUp,invoker} = await makePopUpAndInvoker(t,type);
+    popUp.showPopUp();
+    assert_true(popUp.matches(':top-layer'));
+    await mouseOver(invoker);
+    assert_true(popUp.matches(':top-layer'));
+    await waitForHoverTime();
+    assert_true(popUp.matches(':top-layer'));
+    popUp.hidePopUp(); // Cleanup
+  },`hoverpopup attribute does nothing when pop-up is already showing (popup=${type})`);
+
+  promise_test(async (t) => {
+    const {popUp,invoker} = await makePopUpAndInvoker(t,type);
+    await mouseOver(invoker);
+    assert_false(popUp.matches(':top-layer'));
+    popUp.remove();
+    await waitForHoverTime();
+    assert_false(popUp.matches(':top-layer'));
+  },`hoverpopup attribute does nothing when pop-up is moved out of the document (popup=${type})`);
+
+  promise_test(async (t) => {
+    const {popUp,invoker} = await makePopUpAndInvoker(t,type);
+    const {popUp: popUp2, invoker: deleteMe} = await makePopUpAndInvoker(t,type);
+    deleteMe.remove();
+    await mouseOver(invoker);
+    assert_false(popUp.matches(':top-layer'));
+    assert_false(popUp2.matches(':top-layer'));
+    invoker.setAttribute('hoverpopup',popUp2.id); // Reassign
+    await waitForHoverTime();
+    assert_false(popUp.matches(':top-layer'));
+    assert_false(popUp2.matches(':top-layer'));
+  },`hoverpopup attribute does nothing when target changes (popup=${type})`);
+});
+</script>