Add test for wheel event groups

Add tests for groups of wheel events.
web-platform-tests · Feb 8, 2023 · 2effcbd · 2effcbd
1 parent 06adeef
commit 2effcbd
Show file tree

Hide file tree

Showing 5 changed files with 501 additions and 0 deletions.
diff --git a/dom/events/scrolling/wheel-event-groups-basic.html 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
@@ -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
@@ -0,0 +1,92 @@
+<!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 has the moved element as the target");
+
+    wheelEventTargets.forEach((wheelEventTarget) => {
+      assert_not_equals(wheelEventTarget, initialTarget,
+                        "All following wheel events are not targetting the moved element");
+    });
+
+    window.removeEventListener("wheel", moveInitialElement, {passive: true});
+  }, "Move the initial wheel event target.");
+}
+</script>
+</html>