gfx/layers/apz/test/mochitest/helper_click_interrupt_animation.html
author Cosmin Sabou <csabou@mozilla.com>
Sun, 05 Feb 2023 19:37:33 +0000
changeset 651812 d8601249f1eb8c52c742b0c19c9ca0fa8f2e31fe
parent 599858 2b7f8924b7377b3cae5e03d899b06c52271ca7b1
permissions -rw-r--r--
Bug 1806090 - temporarily disable browser_quickactions.js on linux for frequent failures. r=intermittent-reviewers,MasterWayZ Differential Revision: https://phabricator.services.mozilla.com/D168909

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Clicking on the content (not scrollbar) should interrupt animations</title>
  <script type="application/javascript" src="apz_test_native_event_utils.js"></script>
  <script type="application/javascript" src="apz_test_utils.js"></script>
  <script src="/tests/SimpleTest/paint_listener.js"></script>
  <script src="/tests/SimpleTest/EventUtils.js"></script>

  <script type="application/javascript">

async function test() {
  var scroller = document.documentElement;
  var verticalScrollbarWidth = window.innerWidth - scroller.clientWidth;

  if (verticalScrollbarWidth == 0) {
    ok(true, "Scrollbar width is zero on this platform, test is useless here");
    return;
  }

  // The anchor is the fixed-pos div that we use to calculate coordinates to
  // click on the scrollbar. That way we don't have to recompute coordinates
  // as the page scrolls. The anchor is at the bottom-right corner of the
  // content area.
  var anchor = document.getElementById('anchor');

  var xoffset = (verticalScrollbarWidth / 2);
  // Get a y-coord near the bottom of the vertical scrollbar track. Assume the
  // vertical thumb is near the top of the scrollback track (since scroll
  // position starts off at zero) and won't get in the way. Also assume the
  // down arrow button, if there is one, is square.
  var yoffset = 0 - verticalScrollbarWidth - 5;

  // Take control of the refresh driver
  let utils = SpecialPowers.getDOMWindowUtils(window);
  utils.advanceTimeAndRefresh(0);

  // Click at the bottom of the scrollbar track to trigger a page-down kind of
  // scroll. This should use "desktop zooming" scrollbar code which should
  // trigger an APZ scroll animation.
  await promiseNativeMouseEventWithAPZAndWaitForEvent({
    type: "click",
    target: anchor,
    offsetX: xoffset,
    offsetY: yoffset,
    eventTypeToWait: "mouseup"
  });

  // Run a few frames, that should be enough to let the scroll animation
  // start. We check to make sure the scroll position has changed.
  for (let i = 0; i < 5; i++) {
    utils.advanceTimeAndRefresh(16);
  }
  await promiseOnlyApzControllerFlushed();

  let curPos = scroller.scrollTop;
  ok(curPos > 0,
     `Scroll offset has moved down some, to ${curPos}`);

  // Now we click on the content, which should cancel the animation. Run
  // everything to reach a stable state.
  await promiseNativeMouseEventWithAPZAndWaitForEvent({
    type: "click",
    target: anchor,
    offsetX: -5,
    offsetY: -5,
  });
  for (let i = 0; i < 1000; i++) {
    utils.advanceTimeAndRefresh(16);
  }
  await promiseOnlyApzControllerFlushed();

  // Ensure the scroll position hasn't changed since the last time we checked,
  // which indicates the animation got interrupted.
  is(scroller.scrollTop, curPos, `Scroll position hasn't changed again`);

  utils.restoreNormalRefresh();
}

waitUntilApzStable()
.then(test)
.then(subtestDone, subtestFailed);

  </script>
</head>
<body>
 <div style="position:fixed; bottom: 0; right: 0; width: 1px; height: 1px" id="anchor"></div>
 <div style="height: 300vh; margin-bottom: 10000px; background-image: linear-gradient(red,blue)"></div>
  The above div is sized to 3x screen height so the linear gradient is more steep in terms of
  color/pixel. We only scroll a few pages worth so we don't need the gradient all the way down.
  And then we use a bottom-margin to make the page really big so the scrollthumb is
  relatively small, giving us lots of space to click on the scrolltrack.
</body>
</html>