1 files changed, 147 insertions, 0 deletions
diff --git a/testing/web-platform/tests/dom/events/scrolling/overscroll-deltas.html b/testing/web-platform/tests/dom/events/scrolling/overscroll-deltas.html
new file mode 100644
index 0000000000..2158632250
--- /dev/null
+++ b/testing/web-platform/tests/dom/events/scrolling/overscroll-deltas.html
@@ -0,0 +1,147 @@
+<!DOCTYPE HTML>
+<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>
+  #hspacer {
+    height: 100px;
+    width: 100vw;
+    top: 0;
+    /* on the right edge of targetDiv */
+    left: 200px;
+    position: absolute;
+  }
+
+  #vspacer {
+    height: 100vh;
+    width: 100px;
+    position: absolute;
+  }
+
+  #targetDiv {
+    width: 200px;
+    height: 200px;
+    overflow: scroll;
+  }
+
+  #innerDiv {
+    width: 400px;
+    height: 400px;
+  }
+</style>
+
+<body style="margin:0" onload=runTest()>
+  <div id="targetDiv">
+    <div id="innerDiv"></div>
+  </div>
+  <div id="hspacer"></div>
+  <div id="vspacer"></div>
+</body>
+
+<script>
+  var target_div = document.getElementById('targetDiv');
+  var overscrolled_x_deltas = [];
+  var overscrolled_y_deltas = [];
+  var scrollend_received = false;
+
+  function onOverscroll(event) {
+    overscrolled_x_deltas.push(event.deltaX);
+    overscrolled_y_deltas.push(event.deltaY);
+  }
+
+  async function resetScrollers(test) {
+    await waitForScrollReset(test, target_div);
+    await waitForScrollReset(test, document.scrollingElement);
+  }
+
+  function resetOverScrollDeltas() {
+    overscrolled_x_deltas = [];
+    overscrolled_y_deltas = [];
+  }
+
+  function fail() {
+    assert_true(false);
+  }
+
+  document.addEventListener("overscroll", onOverscroll);
+
+  function runTest() {
+    promise_test(async (t) => {
+      await resetScrollers(t);
+      await waitForCompositorCommit();
+      resetOverScrollDeltas();
+
+      assert_equals(document.scrollingElement.scrollTop, 0,
+        "document should not be scrolled");
+
+      let scrollend_promise = waitForScrollendEvent(t, target_div);
+      let max_target_div_scroll_top = target_div.scrollHeight - target_div.clientHeight;
+      target_div.scrollTop = target_div.scrollHeight;
+      await scrollend_promise;
+      assert_equals(target_div.scrollTop, max_target_div_scroll_top,
+      "target_div should be fully scrolled down");
+
+      let overscroll_promise = waitForOverscrollEvent(t, document, 2000);
+      scrollend_promise = waitForScrollendEvent(t, document, 2000);
+      target_div.addEventListener("scrollend", fail);
+      // Scroll target div vertically and wait for the doc to get scrollend event.
+      await scrollElementDown(target_div, target_div.clientHeight + 300);
+      await waitForCompositorCommit();
+      await overscroll_promise;
+      await scrollend_promise;
+
+      target_div.removeEventListener("scrollend", fail);
+      // Even though we request 300 extra pixels of scroll, the API above doesn't
+      // guarantee how much scroll delta will be generated - different browsers
+      // can consume different amounts for "touch slop" (for example). Ensure the
+      // overscroll reaches at least 50 pixels which is a fairly conservative
+      // value.
+      assert_greater_than(overscrolled_y_deltas.length, 0, "There should be at least one overscroll events when overscrolling.");
+      assert_equals(overscrolled_x_deltas.filter(function (x) { return x != 0; }).length, 0, "The deltaX attribute must be 0 when there is no scrolling in x direction.");
+      assert_greater_than_equal(Math.min(...overscrolled_y_deltas), 50, "The deltaY attribute must be the number of pixels overscrolled.");
+      assert_less_than_equal(Math.max(...overscrolled_y_deltas), 300, "The deltaY attribute must be <= the number of pixels overscrolled (300)");
+      assert_greater_than(document.scrollingElement.scrollTop, target_div.clientHeight - 1,
+        "document is scrolled by the height of target_div");
+    }, "testing, vertical");
+
+    promise_test(async (t) => {
+      await resetScrollers(t);
+      await waitForCompositorCommit();
+      resetOverScrollDeltas();
+
+      assert_equals(document.scrollingElement.scrollLeft, 0,
+        "document should not be scrolled");
+
+      let scrollend_promise = waitForScrollendEvent(t, target_div);
+      let max_target_div_scroll_left = target_div.scrollWidth - target_div.clientWidth;
+      target_div.scrollLeft = target_div.scrollWidth;
+      await scrollend_promise;
+      assert_equals(target_div.scrollLeft, max_target_div_scroll_left,
+        "target_div should be fully scrolled right");
+
+      let overscroll_promise = waitForOverscrollEvent(t, document, 2000);
+      scrollend_promise = waitForScrollendEvent(t, document, 2000);
+      target_div.addEventListener("scrollend", fail);
+      // Scroll target div horizontally and wait for the doc to get scrollend event.
+      await scrollElementLeft(target_div, target_div.clientWidth + 300);
+      await waitForCompositorCommit();
+      await overscroll_promise;
+      await scrollend_promise;
+
+      target_div.removeEventListener("scrollend", fail);
+      assert_greater_than(document.scrollingElement.scrollLeft, target_div.clientWidth - 1,
+        "document is scrolled by the height of target_div");
+      // TODO(bokan): It looks like Chrome inappropriately filters some scroll
+      // events despite |overscroll-behavior| being set to none. The overscroll
+      // amount here has been loosened but this should be fixed in Chrome.
+      // https://crbug.com/1112183.
+      assert_greater_than(overscrolled_x_deltas.length, 0, "There should be at least one overscroll events when overscrolling.");
+      assert_equals(overscrolled_y_deltas.filter(function(x){ return x!=0; }).length, 0, "The deltaY attribute must be 0 when there is no scrolling in y direction.");
+      assert_less_than_equal(Math.max(...overscrolled_x_deltas), 300, "The deltaX attribute must be <= number of pixels overscrolled (300)");
+      assert_greater_than_equal(Math.min(...overscrolled_x_deltas),50, "The deltaX attribute must be the number of pixels overscrolled.");
+    }, "testing, horizontal");
+  }
+</script>