Add test for wheel event groups

Add tests for groups of wheel events.
web-platform-tests · Jan 19, 2023 · 2dd2f45 · 2dd2f45
1 parent 2fca8e9
commit 2dd2f45
Show file tree

Hide file tree

Showing 3 changed files with 311 additions and 0 deletions.
diff --git a/dom/events/scrolling/wheel-event-groups-target-move.html b/dom/events/scrolling/wheel-event-groups-target-move.html
@@ -0,0 +1,87 @@
+<!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) => {
+    // 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.
+    window.addEventListener("wheel", (e) => {
+      wheelEventTargets.push(e.target);
+      if (!movedInitialTarget) {
+        movedInitialTarget = true;
+        secondRootSpacer.insertAdjacentElement('afterend', e.target);
+      }
+    }, {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();
+
+    // 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");
+    });
+  }, "Move the initial wheel event target.");
+}
+</script>
+</html>
diff --git a/dom/events/scrolling/wheel-event-groups-target-removal.html b/dom/events/scrolling/wheel-event-groups-target-removal.html
@@ -0,0 +1,89 @@
+<!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) => {
+    // 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.
+    window.addEventListener("wheel", (e) => {
+      wheelEventTargets.push(e.target);
+      if (!removedInitialTarget) {
+        removedInitialTarget = true;
+        e.target.remove();
+      }
+    }, {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();
+
+    // 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");
+    });
+  }, "Remove the initial wheel event target.");
+}
+</script>
+</html>
diff --git a/dom/events/scrolling/wheel-event-groups.html b/dom/events/scrolling/wheel-event-groups.html
@@ -0,0 +1,135 @@
+<!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 wheelEventTargets = [];
+window.addEventListener("wheel", (e) => {
+  wheelEventTargets.push(e.target)
+}, {passive: true});
+
+let tests = [
+  {
+    origin: "viewport",
+    scrollX: 40,
+    scrollY: 4,
+    scrollingElement: document.scrollingElement,
+    targetElement: firstRootSpacer,
+    title: 'Wheel events are grouped and are not targetted at following elements.',
+  },
+  {
+    origin: "viewport",
+    scrollX: 40,
+    scrollY: 26,
+    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) => {
+      // 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 = [];
+
+      // 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");
+      });
+    }, testInfo.title);
+  });
+}
+</script>
+</html>