From 3271944a8f0705abdce8bf5dfea62cd70e2b2d3b Mon Sep 17 00:00:00 2001
From: Dan Robertson <dan@dlrobertson.com>
Date: Fri, 13 Jan 2023 20:45:25 +0000
Subject: [PATCH] Add test for wheel event groups

Add tests for groups of wheel events.
---
 .../scrolling/wheel-event-groups-basic.html   | 142 ++++++++++++++++++
 .../wheel-event-groups-target-elements.html   |  80 ++++++++++
 .../wheel-event-groups-target-move.html       |  94 ++++++++++++
 .../wheel-event-groups-target-none.html       |  95 ++++++++++++
 .../wheel-event-groups-target-removal.html    |  96 ++++++++++++
 5 files changed, 507 insertions(+)
 create mode 100644 dom/events/scrolling/wheel-event-groups-basic.html
 create mode 100644 dom/events/scrolling/wheel-event-groups-target-elements.html
 create mode 100644 dom/events/scrolling/wheel-event-groups-target-move.html
 create mode 100644 dom/events/scrolling/wheel-event-groups-target-none.html
 create mode 100644 dom/events/scrolling/wheel-event-groups-target-removal.html
diff --git a/dom/events/scrolling/wheel-event-groups-basic.html b/dom/events/scrolling/wheel-event-groups-basic.html
new file mode 100644
index 000000000000000..0f86dffca7dbb19
--- /dev/null
+++ b/dom/events/scrolling/wheel-event-groups-basic.html
@@ -0,0 +1,142 @@
+<!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>
+
+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() {
+  let wheelEventTargets = [];
+
+  function pushTargetToWheelEventTargets(e) {
+    wheelEventTargets.push(e.target)
+  }
+
+  tests.forEach((testInfo) => {
+    promise_test(async (t) => {
+      await waitForCompositorCommit();
+
+      // Wait some extra time to ensure nothing from the prior test impacts this one.
+      // At a minimum this should be greater than 500ms to ensure that the wheel events
+      // in this test are in a new wheel event group
+      await new Promise(resolve => step_timeout(resolve, 1000));
+
+      await waitForCompositorCommit();
+
+      wheelEventTargets = [];
+
+      window.addEventListener("wheel", pushTargetToWheelEventTargets, {passive: true});
+
+      // 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();
+
+      // TODO(dlrobertson): Use the scrollend event here to wait for the
+      // wheel scroll to finish instead of waitForAnimationEnd().
+      await waitForAnimationEnd(() => { return testInfo.scrollingElement.scrollTop; });
+      await waitForCompositorCommit();
+
+      testInfo.scrollingElement.scrollTo({top: 0, left: 0, behavior: "instant"});
+
+      // Ensure that all the captured wheel events are the expected target.
+      wheelEventTargets.forEach((wheelEventTarget) => {
+        assert_equals(wheelEventTarget, testInfo.targetElement,
+                      "All wheel events in the group have the same target");
+      });
+
+      window.removeEventListener("wheel", pushTargetToWheelEventTargets, {passive: true});
+    }, testInfo.title);
+  });
+}
+</script>
+</html>
diff --git a/dom/events/scrolling/wheel-event-groups-target-elements.html b/dom/events/scrolling/wheel-event-groups-target-elements.html
new file mode 100644
index 000000000000000..0b5d48a3ade3033
--- /dev/null
+++ b/dom/events/scrolling/wheel-event-groups-target-elements.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+<meta name="timeout" content="long">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
+<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;
+  font: 25px/1 Ahem;
+}
+
+</style>
+<head>
+<body onload=runTest()>
+<div id="firstRootSpacer" class="spacer" style="background: green">X</div>
+<div id="secondRootSpacer" class="spacer" style="background: blue"></div>
+</body>
+
+<script>
+
+function runTest() {
+  promise_test(async (t) => {
+    await waitForCompositorCommit();
+
+    // Wait some extra time to ensure nothing from prior tests impacts this one.
+    // At a minimum this should be greater than 500ms to ensure that the wheel events
+    // in this test are in a new wheel event group
+    await new Promise(resolve => step_timeout(resolve, 1000));
+
+    await waitForCompositorCommit();
+
+    let wheelEventTargets = [];
+
+    window.addEventListener("wheel", (e) => {
+      wheelEventTargets.push(e.target);
+    }, {passive: true});
+
+    await waitForCompositorCommit();
+
+    await new test_driver.Actions()
+      .addWheel("wheel1")
+      .scroll(12, 12, 0, 30, {origin: "viewport"})
+      .pause(1)
+      .scroll(12, 12, 0, 30, {origin: "viewport"})
+      .pause(1)
+      .scroll(12, 12, 0, 30, {origin: "viewport"})
+      .send();
+
+    // TODO(dlrobertson): Use the scrollend event here to wait for the
+    // wheel scroll to finish instead of waitForAnimationEnd().
+    await waitForAnimationEnd(() => { return document.scrollingElement.scrollTop; });
+    await waitForCompositorCommit();
+
+    document.scrollingElement.scrollTo({top: 0, left: 0, behavior: "instant"});
+
+    // All of the wheel events should have the first div as their target.
+    wheelEventTargets.forEach((wheelEventTarget) => {
+      assert_equals(wheelEventTarget, firstRootSpacer,
+                    "All following wheel events in the group have the same target");
+    });
+  }, "Wheel event groups do not target the text");
+}
+</script>
+</html>
diff --git a/dom/events/scrolling/wheel-event-groups-target-move.html b/dom/events/scrolling/wheel-event-groups-target-move.html
new file mode 100644
index 000000000000000..9d92d5e7855c820
--- /dev/null
+++ b/dom/events/scrolling/wheel-event-groups-target-move.html
@@ -0,0 +1,94 @@
+<!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;
+}
+
+</style>
+<head>
+<body onload=runTest()>
+<div id="initialTarget" class="spacer" style="background: red"></div>
+<div id="firstRootSpacer" class="spacer" style="background: green"></div>
+<div id="secondRootSpacer" class="spacer" style="background: blue"></div>
+</body>
+
+<script>
+
+function runTest() {
+  promise_test(async (t) => {
+    await waitForCompositorCommit();
+
+    // Wait some extra time to ensure nothing from prior tests impacts this one.
+    // At a minimum this should be greater than 500ms to ensure that the wheel events
+    // in this test are in a new wheel event group
+    await new Promise(resolve => step_timeout(resolve, 1000));
+
+    await waitForCompositorCommit();
+
+    let wheelEventTargets = [];
+    let movedInitialTarget = false;
+
+    // Move the initial element the wheel event is targetted at once we fire the
+    // first wheel event, then log the subsequent wheel event targets.
+    function moveInitialElement(e) {
+      wheelEventTargets.push(e.target);
+      if (!movedInitialTarget) {
+        movedInitialTarget = true;
+        secondRootSpacer.insertAdjacentElement('afterend', e.target);
+      }
+    }
+    window.addEventListener("wheel", moveInitialElement, {passive: true});
+
+    await waitForCompositorCommit();
+
+    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();
+
+    // TODO(dlrobertson): Use the scrollend event here to wait for the
+    // wheel scroll to finish instead of waitForAnimationEnd().
+    await waitForAnimationEnd(() => { return document.scrollingElement.scrollTop; });
+    await waitForCompositorCommit();
+
+    document.scrollingElement.scrollTo({top: 0, left: 0, behavior: "instant"});
+
+    // The first wheel event should be targetted at the moved element.
+    assert_equals(wheelEventTargets.shift(), initialTarget,
+                  "Initial wheel event is has the moved element as the target");
+
+    // All subsequent wheel events following the removal of the initial target
+    // should have the same event target.
+    wheelEventTargets.forEach((wheelEventTarget) => {
+      assert_equals(wheelEventTarget, firstRootSpacer,
+                    "All following wheel events in the group have the same target");
+    });
+
+    window.removeEventListener("wheel", moveInitialElement, {passive: true});
+  }, "Move the initial wheel event target.");
+}
+</script>
+</html>
diff --git a/dom/events/scrolling/wheel-event-groups-target-none.html b/dom/events/scrolling/wheel-event-groups-target-none.html
new file mode 100644
index 000000000000000..adc7a8901820afc
--- /dev/null
+++ b/dom/events/scrolling/wheel-event-groups-target-none.html
@@ -0,0 +1,95 @@
+<!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;
+}
+
+</style>
+<head>
+<body onload=runTest()>
+<div id="initialTarget" class="spacer" style="background: red"></div>
+<div id="firstRootSpacer" class="spacer" style="background: green"></div>
+<div id="secondRootSpacer" class="spacer" style="background: blue"></div>
+</body>
+
+<script>
+
+function runTest() {
+  promise_test(async (t) => {
+    await waitForCompositorCommit();
+
+    // Wait some extra time to ensure nothing from prior tests impacts this one.
+    // At a minimum this should be greater than 500ms to ensure that the wheel events
+    // in this test are in a new wheel event group
+    await new Promise(resolve => step_timeout(resolve, 1000));
+
+    await waitForCompositorCommit();
+
+    let wheelEventTargets = [];
+    let makeInitialTargetNone = false;
+
+    // Modify the initial element the wheel event is targetted at to display: none
+    // once we fire the first wheel event, then log the subsequent wheel event
+    // targets.
+    function makeInitialElementNone(e) {
+      wheelEventTargets.push(e.target);
+      if (!makeInitialTargetNone) {
+        makeInitialTargetNone = true;
+        e.target.style.display = "none";
+      }
+    }
+    window.addEventListener("wheel", makeInitialElementNone, {passive: true});
+
+    await waitForCompositorCommit();
+
+    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();
+
+    // TODO(dlrobertson): Use the scrollend event here to wait for the
+    // wheel scroll to finish instead of waitForAnimationEnd().
+    await waitForAnimationEnd(() => { return document.scrollingElement.scrollTop; });
+    await waitForCompositorCommit();
+
+    document.scrollingElement.scrollTo({top: 0, left: 0, behavior: "instant"});
+
+    // The first wheel event should be targetted at the modified element.
+    assert_equals(wheelEventTargets.shift(), initialTarget,
+                  "Initial wheel event is has the modified element as the target");
+
+    // All subsequent wheel events following the removal of the initial target
+    // should have the same event target.
+    wheelEventTargets.forEach((wheelEventTarget) => {
+      assert_equals(wheelEventTarget, firstRootSpacer,
+                    "All following wheel events in the group have the same target");
+    });
+
+    window.removeEventListener("wheel", makeInitialElementNone, {passive: true});
+  }, "Modify the initial wheel event target to display:none.");
+}
+</script>
+</html>
diff --git a/dom/events/scrolling/wheel-event-groups-target-removal.html b/dom/events/scrolling/wheel-event-groups-target-removal.html
new file mode 100644
index 000000000000000..79febc42feb508d
--- /dev/null
+++ b/dom/events/scrolling/wheel-event-groups-target-removal.html
@@ -0,0 +1,96 @@
+<!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;
+}
+
+</style>
+<head>
+<body onload=runTest()>
+<div id="initialTarget" class="spacer" style="background: red"></div>
+<div id="firstRootSpacer" class="spacer" style="background: green"></div>
+<div id="secondRootSpacer" class="spacer" style="background: blue"></div>
+</body>
+
+<script>
+
+function runTest() {
+  promise_test(async (t) => {
+    await waitForCompositorCommit();
+
+    // Wait some extra time to ensure nothing from prior tests impacts this one.
+    // At a minimum this should be greater than 500ms to ensure that the wheel events
+    // in this test are in a new wheel event group
+    await new Promise(resolve => step_timeout(resolve, 1000));
+
+    await waitForCompositorCommit();
+
+    let initialTarget = document.getElementById('initialTarget');
+
+    let 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 removeInitialElement(e) {
+      wheelEventTargets.push(e.target);
+      if (!removedInitialTarget) {
+        removedInitialTarget = true;
+        e.target.remove();
+      }
+    }
+    window.addEventListener("wheel", removeInitialElement, {passive: true});
+
+    await waitForCompositorCommit();
+
+    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();
+
+    // TODO(dlrobertson): Use the scrollend event here to wait for the
+    // wheel scroll to finish instead of waitForAnimationEnd().
+    await waitForAnimationEnd(() => { return document.scrollingElement.scrollTop; });
+    await waitForCompositorCommit();
+
+    document.scrollingElement.scrollTo({top: 0, left: 0, behavior: "instant"});
+
+    // The first wheel event should be targetted at the removed element.
+    assert_equals(wheelEventTargets.shift(), initialTarget,
+                  "Initial wheel event is has the removed element as the target");
+
+    // All subsequent wheel events following the removal of the initial target
+    // should have the same event target.
+    wheelEventTargets.forEach((wheelEventTarget) => {
+      assert_equals(wheelEventTarget, firstRootSpacer,
+                    "All following wheel events in the group have the same target");
+    });
+
+    window.removeEventListener("wheel", removeInitialElement, {passive: true});
+  }, "Remove the initial wheel event target.");
+}
+</script>
+</html>
