Percent based scrolling test cases failures fixes - Part 1.

The CL fixes some mouse wheel and gesture related test cases by changing
expected elements' scroll values and related deltas
when the Percent based scrolling feature flag is turned on.

Change-Id: I9262d31704c31c995e5b8db93987f4a13ec6d899
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2694110
Reviewed-by: Lan Wei <lanwei@chromium.org>
Commit-Queue: Yaroslav Shalivskyy <yshalivskyy@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#868239}

third_party/blink/web_tests/VirtualTestSuites

@@ -358,9 +358,22 @@
              "--enable-prefer-compositing-to-lcd-text",
              "--disable-features=CompositorThreadedScrollbarScrolling"]
   },
+  {
+    "prefix": "main-threaded-percent-based-scrolling",
+    "bases": ["fast/events/continuous-platform-wheelevent-in-scrolling-div.html",
+              "fast/events/mouse-wheel-main-frame-scroll.html",
+              "fast/events/scroll-in-scaled-page-with-overflow-hidden.html",
+              "fast/events/wheel/mouse-wheel-scroll-latching.html",
+              "fast/events/wheel/wheelevent-basic.html",
+              "fast/events/wheel/wheelevent-in-scrolling-div.html",
+              "fast/scrolling/percentage-mousewheel-scroll.html",
+              "fast/scrolling/percentage-mousewheel-scroll-on-iframe.html"],
+    "args": ["--enable-features=PercentBasedScrolling"]
+  },
   {
     "prefix": "compositor-threaded-percent-based-scrolling",
     "bases": ["fast/scrolling/scrollbars",
+              "virtual/main-threaded-percent-based-scrolling",
               "virtual/percent-based-scrolling"],
     "args": ["--enable-features=PercentBasedScrolling",
              "--enable-threaded-compositing",

third_party/blink/web_tests/fast/events/continuous-platform-wheelevent-in-scrolling-div.html

@@ -2,46 +2,60 @@
 <script src='../../resources/gesture-util.js'></script>
 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>
+<script src="../../virtual/percent-based-scrolling/resources/percent-based-util.js"></script>
 <div id="overflow" style="border:2px solid black;overflow:auto;height:200px;width:200px;">
     <div style="background-color:red;height:200px;width:400px;"></div>
     <div style="background-color:green;height:200px;width:400px;"></div>
     <div style="background-color:red;height:200px;width:400px;"></div>
 </div>
 
 <script>
+const SCROLL_TOP = isPercentBasedScrollingEnabled() ? pixelsPerTick() * 2 : 200;
+const SCROLL_LEFT = isPercentBasedScrollingEnabled() ? pixelsPerTick() : 100;
+const SOURCE = GestureSourceType.MOUSE_INPUT;
+const NUM_TICKS_X = SCROLL_LEFT / pixelsPerTick();
+const NUM_TICKS_Y = SCROLL_TOP / pixelsPerTick();
+const EXPECTED_WHEEL_DELTA_X = NUM_TICKS_X * LEGACY_MOUSE_WHEEL_TICK_MULTIPLIER;
+const EXPECTED_WHEEL_DELTA_Y = NUM_TICKS_Y * LEGACY_MOUSE_WHEEL_TICK_MULTIPLIER;
 
-var expectedScrollTop = 200;
-var expectedScrollLeft = 100;
-var last_event = null;
-var source = GestureSourceType.MOUSE_INPUT;
-const numTicksX = expectedScrollLeft / pixelsPerTick();
-const numTicksY = expectedScrollTop / pixelsPerTick();
-const expectedWheelDeltaX = numTicksX * LEGACY_MOUSE_WHEEL_TICK_MULTIPLIER;
-const expectedWheelDeltaY = numTicksY * LEGACY_MOUSE_WHEEL_TICK_MULTIPLIER;
-
-function mousewheelHandler(e)
-{
+let last_event = null;
+
+const overflowElement = document.getElementById("overflow");
+overflowElement.addEventListener("mousewheel", mousewheelHandler, false);
+
+let expectedScrollLeft, expectedScrollTop;
+if (isPercentBasedScrollingEnabled()) {
+  ({
+      x: expectedScrollLeft,
+      y: expectedScrollTop
+  } = calculateExpectedScroll(overflowElement, SCROLL_LEFT, SCROLL_TOP));
+} else {
+  expectedScrollLeft = SCROLL_LEFT;
+  expectedScrollTop = SCROLL_TOP;
+}
+
+function mousewheelHandler(e) {
     last_event = e;
 }
 
 promise_test(async () => {
-    var overflowElement = document.getElementById("overflow");
-    overflowElement.addEventListener("mousewheel", mousewheelHandler, false);
-
-    await smoothScroll(window.expectedScrollLeft, 100, 110, source, 'right', SPEED_INSTANT);
-    await waitFor( () => {
-        return overflowElement.scrollLeft == window.expectedScrollLeft;
+    await smoothScroll(SCROLL_LEFT, 100, 110, SOURCE, 'right', SPEED_INSTANT);
+    await waitForAnimationEndTimeBased(() => {
+      return overflowElement.scrollLeft;
     });
-    assert_equals(last_event.wheelDeltaX, -Math.floor(expectedWheelDeltaX));
-    assert_equals(last_event.wheelDelta, -Math.floor(expectedWheelDeltaX));
+    assert_approx_equals(overflowElement.scrollLeft, expectedScrollLeft, 0.001);
+    assert_equals(last_event.wheelDeltaX, -Math.floor(EXPECTED_WHEEL_DELTA_X));
+    assert_equals(last_event.wheelDelta, -Math.floor(EXPECTED_WHEEL_DELTA_X));
+
     last_event = null;
 
-    await smoothScroll(window.expectedScrollTop, 100, 110, source, 'down', SPEED_INSTANT);
-    await waitFor( () => {
-        return overflowElement.scrollTop == window.expectedScrollTop;
+    await smoothScroll(SCROLL_TOP, 100, 110, SOURCE, 'down', SPEED_INSTANT);
+    await waitForAnimationEndTimeBased(() => {
+      return overflowElement.scrollTop;
     });
-    assert_equals(last_event.wheelDeltaY, -Math.floor(expectedWheelDeltaY));
-    assert_equals(last_event.wheelDelta, -Math.floor(expectedWheelDeltaY));
+    assert_approx_equals(overflowElement.scrollTop, expectedScrollTop, 0.001);
+    assert_equals(last_event.wheelDeltaY, -Math.floor(EXPECTED_WHEEL_DELTA_Y));
+    assert_equals(last_event.wheelDelta, -Math.floor(EXPECTED_WHEEL_DELTA_Y));
 }, 'This test checks the wheel delta value of wheel events, which should be the number of ticks multiplies the legacy mouse wheel tick multiplier.');
 
 </script>

third_party/blink/web_tests/fast/events/mouse-wheel-main-frame-scroll.html

@@ -4,15 +4,23 @@
 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>
 <script src="../../resources/gesture-util.js"></script>
+<script src="../../virtual/percent-based-scrolling/resources/percent-based-util.js"></script>
 </head>
 <script>
-promise_test (async () => {
-	await mouseMoveTo(50, 50);
-	await smoothScroll(100, 50, 50, GestureSourceType.MOUSE_INPUT, 'down', SPEED_INSTANT);
-	await waitFor( () => {
-		return window.scrollY == 100;
-	});
-},"Mouse wheel scrolls properly on main frame.");
+promise_test(async () => {
+  await mouseMoveTo(50, 50);
+  const SCROLL_DOWN = isPercentBasedScrollingEnabled() ? pixelsPerTick() : 100;
+  await smoothScroll(
+    SCROLL_DOWN, 50, 50, GestureSourceType.MOUSE_INPUT, 'down', SPEED_INSTANT
+  );
+  await waitForAnimationEndTimeBased(() => {
+    return window.scrollY;
+  });
+
+  const EXPECTED_SCROLL_Y = isPercentBasedScrollingEnabled() ?
+    calculateExpectedScroll(window, 0, SCROLL_DOWN, isWindow=true).y : 100;
+  assert_approx_equals(window.scrollY, EXPECTED_SCROLL_Y, 1);
+}, "Mouse wheel scrolls properly on main frame.");
 </script>
 <body>
 <div style="height:1000px;">

third_party/blink/web_tests/fast/events/scroll-in-scaled-page-with-overflow-hidden.html

@@ -1,6 +1,7 @@
 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>
 <script src="../../resources/gesture-util.js"></script>
+<script src="../../virtual/percent-based-scrolling/resources/percent-based-util.js"></script>
 
 <style>
     html, body { margin:0; overflow: hidden; }
@@ -36,11 +37,21 @@
       // be scrolled programmatically).
       assert_equals(window.visualViewport.pageTop, 0);
 
-      await smoothScroll(700, 100, 100, MOUSE_INPUT, 'down', 3000);
-      await waitFor(() => { return window.visualViewport.pageTop >= 300; });
-      assert_equals(window.visualViewport.pageTop,
-                    300,
-                    "Visual viewport is scrolled fully to the bottom");
+      const SCROLL_AMOUNT = (
+        isPercentBasedScrollingEnabled() ? pixelsPerTick() * 5 : 700
+      );
+      const EXPECTED_PAGE_TOP = isPercentBasedScrollingEnabled() ? 75 : 300;
+      await smoothScroll(
+        SCROLL_AMOUNT, 100, 100, MOUSE_INPUT, 'down', SPEED_INSTANT
+      );
+      await waitForAnimationEndTimeBased(() => {
+        return window.visualViewport.pageTop;
+      });
+      assert_equals(
+        window.visualViewport.pageTop,
+        EXPECTED_PAGE_TOP,
+        "Visual viewport is scrolled fully to the bottom"
+      );
     },
     "Viewport with overflow: hidden can still be panned when pinch-zoomed in.");
   }

third_party/blink/web_tests/fast/events/wheel/mouse-wheel-scroll-latching.html

@@ -43,46 +43,25 @@
 </div>
 
 <script>
-var parentDiv = document.getElementById('parentDiv');
-var childDiv = document.getElementById('childDiv');
-
 const WHEEL_SOURCE_TYPE = GestureSourceType.MOUSE_INPUT;
-const MAX_RAF = 1000;
-var last_child_scroll_offset = childDiv.scrollTop;
-var last_parent_scroll_offset = parentDiv.scrollTop;
-var last_changed_count = 0;
-function waitForAnimationEnd() {
-  return new Promise((resolve, reject) => {
-    function tick(raf_count) {
-    // We requestAnimationFrame either for 1000 frames or until 20 frames with
-    // no change have been observed.
-      if (raf_count >= MAX_RAF || raf_count - last_changed_count > 20) {
-        resolve();
-      } else {
-        if (childDiv.scrollTop != last_child_scroll_offset ||
-            parentDiv.scrollTop != last_parent_scroll_offset) {
-          last_changed_count = raf_count;
-          last_child_scroll_offset = childDiv.scrollTop;
-          last_parent_scroll_offset = parentDiv.scrollTop;
-        }
-        requestAnimationFrame(tick.bind(this, raf_count + 1));
-      }
-    }
-    tick(0);
-  });
-}
 
-var rect = childDiv.getBoundingClientRect();
-function testWheelScrollLatching() {
-  return smoothScroll(400, (rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2, WHEEL_SOURCE_TYPE, 'down', 1000)
-  .then(waitForAnimationEnd)
-  .then(() => {
-    assert_equals(childDiv.scrollTop, 10, "childDiv must be fully scrolled");
-    assert_equals(parentDiv.scrollTop, 0, "parentDiv shouldn't scroll at all");
-  });
-}
+const parentDiv = document.getElementById('parentDiv');
+const childDiv = document.getElementById('childDiv');
+const rect = childDiv.getBoundingClientRect();
+const startX = (rect.left + rect.right) / 2;
+const startY = (rect.top + rect.bottom) / 2;
 
-promise_test(t => {
-    return testWheelScrollLatching();
-  }, 'With wheel scroll latching enabled only child div must scroll');
+promise_test(async () => {
+  await smoothScroll(
+    500, startX, startY, WHEEL_SOURCE_TYPE, 'down', SPEED_INSTANT
+  );
+  await waitForAnimationEndTimeBased(() => {
+    return childDiv.scrollTop;
+  });
+  await waitForAnimationEndTimeBased(() => {
+    return parentDiv.scrollTop;
+  });
+  assert_equals(childDiv.scrollTop, 10, "childDiv must be fully scrolled");
+  assert_equals(parentDiv.scrollTop, 0, "parentDiv shouldn't scroll at all");
+}, 'With wheel scroll latching enabled only child div must scroll');
 </script>

third_party/blink/web_tests/fast/events/wheel/wheelevent-basic.html

@@ -5,6 +5,7 @@
 <script src="../../../resources/testharness.js"></script>
 <script src="../../../resources/testharnessreport.js"></script>
 <script src="../../../resources/gesture-util.js"></script>
+<script src="../../../virtual/percent-based-scrolling/resources/percent-based-util.js"></script>
 </head>
 <body>
 <span id="parent">
@@ -41,11 +42,34 @@
   var x = testDiv.offsetLeft + 5;
   var y = testDiv.offsetTop + 5;
   await mouseMoveTo(x, y);
-  await smoothScroll(40, x, y, GestureSourceType.MOUSE_INPUT, 'downright', SPEED_INSTANT);
-  await waitFor( () => {
-    return deltaX > 0 && deltaY > 0 && deltaX == testDiv.scrollLeft &&
-        deltaY == testDiv.scrollTop;
-  });
+  const SCROLL_VALUE = isPercentBasedScrollingEnabled() ?
+    pixelsPerTick() / 2 : 60;
+  await smoothScroll(
+    SCROLL_VALUE, x, y, GestureSourceType.MOUSE_INPUT, 'downright', SPEED_INSTANT
+  );
+
+  if (isPercentBasedScrollingEnabled()) {
+    await waitForAnimationEndTimeBased(() => {
+      return testDiv.scrollTop;
+    });
+    await waitForAnimationEndTimeBased(() => {
+      return testDiv.scrollLeft;
+    });
+
+    const {
+      x: expectedScrollLeft,
+      y: expectedScrollTop,
+    } = calculateExpectedScroll(testDiv, SCROLL_VALUE, SCROLL_VALUE);
+
+    // Windows and Linux values appear to be slightly different
+    assert_approx_equals(testDiv.scrollTop, expectedScrollTop, 0.05);
+    assert_approx_equals(testDiv.scrollLeft, expectedScrollLeft, 0.1);
+  } else {
+    await waitFor( () => {
+      return deltaX > 0 && deltaY > 0 && deltaX == testDiv.scrollLeft &&
+          deltaY == testDiv.scrollTop;
+    });
+  }
 }, "Tests the basic functionality of the standard wheel event");
 
 var testEvent;

third_party/blink/web_tests/fast/events/wheel/wheelevent-in-scrolling-div.html

@@ -2,18 +2,33 @@
 <script src="../../../resources/testharness.js"></script>
 <script src="../../../resources/testharnessreport.js"></script>
 <script src="../../../resources/gesture-util.js"></script>
+<script src="../../../virtual/percent-based-scrolling/resources/percent-based-util.js"></script>
   <div id="overflow" style="border:2px solid black;overflow:auto;height:200px;width:200px;">
     <div style="background-color:red;height:200px;width:400px;"></div>
     <div style="background-color:green;height:200px;width:400px;"></div>
     <div style="background-color:red;height:200px;width:400px;"></div>
   </div>
   <div id="console"></div>
 <script>
+  const overflowElement = document.getElementById("overflow");
+  overflowElement.addEventListener("mousewheel", mousewheelHandler, false);
+
   // scroll diagonally for 1 tick.
-  var expectedScroll = pixelsPerTick();
+  const SCROLL_AMOUNT = pixelsPerTick();
+  const EXPECTED_DELTA = isPercentBasedScrollingEnabled() ?
+    WHEEL_DELTA : SCROLL_AMOUNT;
+
+  let expectedScrollTop, expectedScrollLeft;
+  if (isPercentBasedScrollingEnabled()) {
+    ({
+      x: expectedScrollLeft,
+      y: expectedScrollTop
+    } = calculateExpectedScroll(overflowElement, SCROLL_AMOUNT, SCROLL_AMOUNT));
+  } else {
+    expectedScrollLeft = SCROLL_AMOUNT;
+    expectedScrollTop = SCROLL_AMOUNT;
+  }
 
-  var overflowElement = document.getElementById("overflow");
-  overflowElement.addEventListener("mousewheel", mousewheelHandler, false);
   var eventHandlerResolve;
   eventHandlerPromise = new Promise(function(resolve) {
       eventHandlerResolve = resolve;
@@ -23,21 +38,29 @@
     var x = overflowElement.offsetLeft + 5;
     var y = overflowElement.offsetTop + 5
     await mouseMoveTo(x, y);
-    await smoothScroll(pixelsPerTick(), x, y, GestureSourceType.MOUSE_INPUT,
-        "downright", SPEED_INSTANT);
-    await waitFor( () => {
-      return overflowElement.scrollTop == expectedScroll &&
-          overflowElement.scrollLeft == expectedScroll;
+    await smoothScroll(SCROLL_AMOUNT, x, y, GestureSourceType.MOUSE_INPUT,
+      "downright", SPEED_INSTANT);
+    await waitForAnimationEndTimeBased(() => {
+      return overflowElement.scrollTop;
+    });
+    await waitForAnimationEndTimeBased(() => {
+      return overflowElement.scrollLeft;
     });
+
+    assert_approx_equals(overflowElement.scrollTop, expectedScrollTop, 0.001);
+    assert_approx_equals(overflowElement.scrollLeft, expectedScrollLeft, 0.001);
     // The test will timeout if the event handler doesn't resolve this promise.
     await eventHandlerPromise;
   });
 
   function mousewheelHandler(e) {
     // e.wheelDeltaX/Y is equal to number of ticks * 120. See kTickMultiplier
     // in src/third_party/blink/renderer/core/events/wheel_event.h
-    if (e.deltaY == expectedScroll && e.deltaX == expectedScroll &&
-        e.wheelDeltaY == -120 && e.wheelDeltaX == -120 && e.wheelDelta == -120) {
+    if (e.deltaY == EXPECTED_DELTA && e.deltaX == EXPECTED_DELTA
+        && e.wheelDeltaY == -LEGACY_MOUSE_WHEEL_TICK_MULTIPLIER
+        && e.wheelDeltaX == -LEGACY_MOUSE_WHEEL_TICK_MULTIPLIER
+        && e.wheelDelta == -LEGACY_MOUSE_WHEEL_TICK_MULTIPLIER
+    ) {
       eventHandlerResolve();
     }
   }

third_party/blink/web_tests/fast/scrolling/percentage-mousewheel-scroll-on-iframe.html

@@ -37,7 +37,6 @@
   await waitForLoad();
 
   const SCROLL_PERCENTAGE = 0.4;
-  const WHEEL_DELTA_CONSTANT = 100;
   await percentScroll(SCROLL_PERCENTAGE, SCROLL_PERCENTAGE, 200, 150,
                      GestureSourceType.MOUSE_INPUT);
 
@@ -55,10 +54,10 @@
   await conditionHolds(isCorrectXOffset);
   await conditionHolds(isCorrectYOffset);
   assert_equals(iframeElement.contentWindow.wheelEventDeltaY,
-                WHEEL_DELTA_CONSTANT,
+                WHEEL_DELTA,
                 "Wheel event deltaY must be a constant");
   assert_equals(iframeElement.contentWindow.wheelEventDeltaX,
-                WHEEL_DELTA_CONSTANT,
+                WHEEL_DELTA,
                 "Wheel event deltaY must be a constant");
 
   // Scroll back to the top and ensure we scroll back to the origin and have
@@ -77,10 +76,10 @@
       "Horizontal scrolling must scroll back to origin")
 
   assert_equals(iframeElement.contentWindow.wheelEventDeltaY,
-                -WHEEL_DELTA_CONSTANT,
+                -WHEEL_DELTA,
                 "Wheel event deltaY must be negative constant");
   assert_equals(iframeElement.contentWindow.wheelEventDeltaX,
-                -WHEEL_DELTA_CONSTANT,
+                -WHEEL_DELTA,
                 "Wheel event deltaY must be negative constant");
 }, "Using the mousewheel to scroll by a percentage on an empty iframe.");
 </script>