Add test for wheel event groups

Add tests for groups of wheel events.
web-platform-tests · Jan 18, 2023 · ce7b93f · ce7b93f
1 parent 2fca8e9
commit ce7b93f
Showing 1 changed file with 191 additions and 0 deletions.
diff --git a/dom/events/scrolling/wheel-event-groups.html b/dom/events/scrolling/wheel-event-groups.html
@@ -0,0 +1,191 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+<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="scroll_support.js"></script>
+<style>
+body {
+  margin: 0;
+  padding: 0;
+  height: 200vh;
+}
+
+.spacer {
+  width: 100%;
+  height: 25px;
+  padding: 0;
+  margin: 0;
+}
+
+#scrollableDiv {
+  width: 100%;
+  height: 500px;
+  overflow: scroll;
+  background: yellow;
+}
+
+#innerDiv {
+  width: 100%;
+  height: 4000px;
+  background: red;
+}
+
+</style>
+<head>
+<body onload=runTest()>
+<div id="firstRootSpacer" class="spacer" style="background: cyan"></div>
+<div id="secondRootSpacer" class="spacer" style="background: magenta"></div>
+<div id="scrollableDiv">
+  <div id="innerDiv">
+    <div id="firstInnerSpacer" class="spacer" style="background: green">
+    </div>
+    <div id="secondInnerSpacer" class="spacer" style="background: blue">
+    </div>
+  </div>
+</div>
+</body>
+
+<script>
+
+function createSpacerElement(id, position, refElement) {
+  let elem = document.createElement("div");
+  elem.id = id;
+  elem.classList.add("spacer");
+  elem.style.backgroundColor = 'orange';
+  refElement.insertAdjacentElement(position, elem);
+}
+
+let wheelEventTargets = [];
+function pushTargetToWheelEventTargets(e) {
+  wheelEventTargets.push(e.target)
+}
+window.addEventListener("wheel", pushTargetToWheelEventTargets, {passive: true});
+
+function wheelEventTargetsEqual(expectedTarget, errorString) {
+  wheelEventTargets.forEach((wheelEventTarget) => {
+    assert_equals(wheelEventTarget, expectedTarget, errorString);
+  });
+}
+
+let tests = [
+  {
+    origin: "viewport",
+    scrollX: 40,
+    scrollY: 2,
+    scrollingElement: document.scrollingElement,
+    targetElement: firstRootSpacer,
+    title: 'Wheel events are grouped and are not targetted at following elements.',
+  },
+  {
+    origin: "viewport",
+    scrollX: 40,
+    scrollY: 27,
+    scrollingElement: document.scrollingElement,
+    targetElement: secondRootSpacer,
+    title: 'Wheel events are grouped and are not sent to a child scroll frames.',
+  },
+  {
+    origin: innerDiv,
+    scrollX: 40,
+    scrollY: 2,
+    scrollingElement: scrollableDiv,
+    targetElement: innerDiv,
+    title: 'Wheel events are not bound to a scroll frame.',
+  },
+  {
+    origin: secondInnerSpacer,
+    scrollX: 40,
+    scrollY: 2,
+    scrollingElement: scrollableDiv,
+    targetElement: secondInnerSpacer,
+    title: 'Wheel event groups beyond the origin bound have the same target.',
+  },
+];
+
+function runTest() {
+  tests.forEach((testInfo) => {
+    promise_test(async (t) => {
+      await waitForCompositorCommit();
+
+      // Wait some extra time to ensure nothing from the prior test impacts this one.
+      await new Promise(resolve => step_timeout(resolve, 1000));
+
+      wheelEventTargets = [];
+
+      // Scroll past the boundary of the original element to ensure all events in
+      // group have the same target.
+      await new test_driver.Actions()
+        .addWheel("wheel1")
+        .scroll(testInfo.scrollX, testInfo.scrollY, 0, 30, {origin: testInfo.origin})
+        .pause(1)
+        .scroll(testInfo.scrollX, testInfo.scrollY, 0, 30, {origin: testInfo.origin})
+        .pause(1)
+        .scroll(testInfo.scrollX, testInfo.scrollY, 0, 30, {origin: testInfo.origin})
+        .send();
+
+      await waitForAnimationEnd(() => { return testInfo.scrollingElement.scrollTop; });
+      await waitForCompositorCommit();
+
+      testInfo.scrollingElement.scrollTo({top: 0, left: 0, behavior: "instant"});
+
+      wheelEventTargetsEqual(testInfo.targetElement,
+                             "All wheel events in the group have the same target");
+    }, testInfo.title);
+  });
+
+  promise_test(async (t) => {
+    await waitForCompositorCommit();
+
+    // Wait some extra time to ensure nothing from the prior test impacts this one.
+    await new Promise(resolve => step_timeout(resolve, 1000));
+
+    window.removeEventListener("wheel", pushTargetToWheelEventTargets, {passive: true});
+
+    createSpacerElement('removedSpacer', 'beforebegin', firstRootSpacer);
+
+    wheelEventTargets = [];
+
+    let removedInitialTarget = false;
+
+    // Remove the initial element the wheel event is targetted at once we fire the
+    // first wheel event, then log the subsequent wheel event targets.
+    function onEventRemoveInitialTarget(e) {
+      if (!removedInitialTarget) {
+        removedInitialTarget = true;
+        e.target.remove();
+      } else {
+        wheelEventTargets.push(e.target);
+      }
+    }
+    window.addEventListener("wheel", onEventRemoveInitialTarget, {passive: true});
+
+    await new test_driver.Actions()
+      .addWheel("wheel1")
+      .scroll(40, 2, 0, 30, {origin: "viewport"})
+      .pause(1)
+      .scroll(40, 2, 0, 30, {origin: "viewport"})
+      .pause(1)
+      .scroll(40, 2, 0, 30, {origin: "viewport"})
+      .send();
+
+    await waitForAnimationEnd(() => { return document.scrollingElement.scrollTop; });
+    await waitForCompositorCommit();
+
+    document.scrollingElement.scrollTo({top: 0, left: 0, behavior: "instant"});
+
+    // All subsequent wheel events following the removal of the initial target
+    // should have the same event target.
+    wheelEventTargetsEqual(firstRootSpacer,
+                           "All wheel events in the group have the same target");
+
+    document.removeEventListener("wheel", onEventRemoveInitialTarget, {passive: true});
+  }, "Remove the initial wheel event target.");
+}
+</script>
+</html>