gfx/layers/apz/test/mochitest/helper_onetouchpinch_nested.html
author Cosmin Sabou <csabou@mozilla.com>
Sun, 05 Feb 2023 19:37:33 +0000
changeset 651812 d8601249f1eb8c52c742b0c19c9ca0fa8f2e31fe
parent 616557 918ef225713fa9fc188f42355a6cd4a2bfb3b64c
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>One-touch pinch zooming while on a non-root scroller</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_onetouchpinch() {
  // layerize the scroller so it gets an APZC and GestureEventListener
  var scroller = document.getElementById("scroller");
  SpecialPowers.getDOMWindowUtils(window).setDisplayPortForElement(0, 0, 400, 1000, scroller, 1);
  await promiseApzFlushedRepaints();

  ok(isLayerized("scroller"), "scroller has been successfully layerized");

  var initial_resolution = await getResolution();
  ok(initial_resolution > 0,
      "The initial_resolution is " + initial_resolution + ", which is some sane value");

  let transformEndPromise = promiseTransformEnd();

  function translateY(point, dy) {
    return {x: point.x, y: point.y + dy};
  }

  var zoom_point = centerOf(scroller);
  var zoom_in = [
      [ zoom_point ],
      [ null ],
      [ zoom_point ],
      [ translateY(zoom_point, 5) ],
      [ translateY(zoom_point, 10) ],
      [ translateY(zoom_point, 15) ],
      [ translateY(zoom_point, 20) ],
      [ translateY(zoom_point, 25) ],
  ];

  var touchIds = [0];
  await synthesizeNativeTouchSequences(scroller, zoom_in, null, touchIds);

  // Wait for the APZ:TransformEnd to be fired after touch events are processed.
  await transformEndPromise;

  // Flush state and get the resolution we're at now
  await promiseApzFlushedRepaints();
  let final_resolution = await getResolution();
  ok(final_resolution > initial_resolution, "The final resolution (" + final_resolution + ") is greater after zooming in");

  // Also check that the scroller didn't get scrolled.
  is(scroller.scrollTop, 0, "scroller didn't y-scroll");
  is(scroller.scrollLeft, 0, "scroller didn't x-scroll");
}

async function test() {
  // Run the test with the scrollable div
  await test_onetouchpinch();
  dump("Wrapping scroller in fixed-pos div...\n");
  // Now wrap the scrollable div inside a fixed-pos div
  var fixedElement = document.createElement("div");
  fixedElement.id = "fixed";
  document.body.appendChild(fixedElement);
  fixedElement.appendChild(document.getElementById("scroller"));
  dump("Done wrapping scroller in fixed-pos div.\n");
  // Now run the test again, with the scrollable div inside a fixed-pos div
  await test_onetouchpinch();
}

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

  </script>
  <style>
    #scroller {
        width: 300px;
        height: 300px;
        overflow: scroll;
    }

    #fixed {
        background-color: green;
        position: fixed;
        width: 300px;
        height: 300px;
        left: 100px;
        top: 100px;
    }
  </style>
</head>
<body>
  Here is some text outside the scrollable div.
  <div id="scroller">
   Here is some text inside the scrollable div.
   <div style="height: 2000px">This div actually makes it overflow.</div>
  </div>
  <div style="height: 2000px">This div makes the body scrollable.</div>
</body>
</html>