Bug 1632268. Add browser chrome test for select dropdown position with pinch (apz) zooming. r=botond

Differential Revision: https://phabricator.services.mozilla.com/D78025

.eslintrc.js

@@ -856,6 +856,7 @@ module.exports = {
         "dom/push/test/xpcshell/head.js",
         "dom/push/test/xpcshell/test_broadcast_success.js",
         "dom/push/test/xpcshell/test_crypto.js",
+        "gfx/layers/apz/test/mochitest/browser_test_select_zoom.js",
         "security/manager/ssl/RemoteSecuritySettings.jsm",
         "security/manager/ssl/tests/unit/test_der.js",
         "security/manager/ssl/X509.jsm",

gfx/layers/apz/test/mochitest/browser.ini

@@ -1,3 +1,7 @@
+[DEFAULT]
+prefs =
+  apz.allow_zooming=true
+
 [browser_test_group_fission.js]
 skip-if = (os == 'win' && bits == 32) # Some subtests fail intermittently on Win7.
 support-files =
@@ -7,3 +11,9 @@ support-files =
   FissionTestHelperChild.jsm
   helper_fission_*.*
   !/dom/animation/test/testcommon.js
+[browser_test_select_zoom.js]
+skip-if = (os == 'win') # bug 1495580
+support-files =
+  apz_test_native_event_utils.js
+  apz_test_utils.js
+  helper_test_select_zoom.html

gfx/layers/apz/test/mochitest/browser_test_select_zoom.js

@@ -0,0 +1,220 @@
+/* This test is a a mash up of
+     https://searchfox.org/mozilla-central/rev/559b25eb41c1cbffcb90a34e008b8288312fcd25/gfx/layers/apz/test/mochitest/browser_test_group_fission.js
+     https://searchfox.org/mozilla-central/rev/559b25eb41c1cbffcb90a34e008b8288312fcd25/gfx/layers/apz/test/mochitest/helper_basic_zoom.html
+     https://searchfox.org/mozilla-central/rev/559b25eb41c1cbffcb90a34e008b8288312fcd25/browser/base/content/test/forms/browser_selectpopup.js
+*/
+
+function openSelectPopup(selectPopup, selector = "select", win = window) {
+  let popupShownPromise = BrowserTestUtils.waitForEvent(
+    selectPopup,
+    "popupshown"
+  );
+
+  EventUtils.synthesizeKey("KEY_ArrowDown", { altKey: true }, win);
+  return popupShownPromise;
+}
+
+function hideSelectPopup(selectPopup, win = window) {
+  let browser = win.gBrowser.selectedBrowser;
+  let selectClosedPromise = SpecialPowers.spawn(browser, [], async function() {
+    let { SelectContentHelper } = ChromeUtils.import(
+      "resource://gre/actors/SelectChild.jsm",
+      null
+    );
+    return ContentTaskUtils.waitForCondition(() => !SelectContentHelper.open);
+  });
+
+  EventUtils.synthesizeKey("KEY_Enter", {}, win);
+
+  return selectClosedPromise;
+}
+
+add_task(async function setup_pref() {
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      // Dropping the touch slop to 0 makes the tests easier to write because
+      // we can just do a one-pixel drag to get over the pan threshold rather
+      // than having to hard-code some larger value.
+      ["apz.touch_start_tolerance", "0.0"],
+      // The subtests in this test do touch-drags to pan the page, but we don't
+      // want those pans to turn into fling animations, so we increase the
+      // fling-min threshold velocity to an arbitrarily large value.
+      ["apz.fling_min_velocity_threshold", "10000"],
+      // Explicitly enable pinch-zooming, so this test can run on desktop
+      // even though zooming isn't enabled by default on desktop yet.
+      ["apz.allow_zooming", true],
+    ],
+  });
+});
+
+// This test opens a select popup after pinch (apz) zooming has happened.
+add_task(async function() {
+  function httpURL(filename) {
+    let chromeURL = getRootDirectory(gTestPath) + filename;
+    //return chromeURL;
+    return chromeURL.replace(
+      "chrome://mochitests/content/",
+      "http://mochi.test:8888/"
+    );
+  }
+
+  const pageUrl = httpURL("helper_test_select_zoom.html");
+  let tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, pageUrl);
+
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async () => {
+    const input = content.document.getElementById("select");
+    const focusPromise = new Promise(resolve => {
+      input.addEventListener("focus", resolve, { once: true });
+    });
+    input.focus();
+    await focusPromise;
+  });
+
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async () => {
+    await content.wrappedJSObject.waitUntilApzStable();
+  });
+
+  const initial_resolution = await SpecialPowers.spawn(
+    tab.linkedBrowser,
+    [],
+    () => {
+      return content.window.windowUtils.getResolution();
+    }
+  );
+
+  const initial_rect = await SpecialPowers.spawn(tab.linkedBrowser, [], () => {
+    return content.wrappedJSObject.getSelectRect();
+  });
+
+  ok(
+    initial_resolution > 0,
+    "The initial_resolution is " +
+      initial_resolution +
+      ", which is some sane value"
+  );
+
+  let menulist = document.getElementById("ContentSelectDropdown");
+  let selectPopup = menulist.menupopup;
+
+  // First, get the position of the select popup when no translations have been applied.
+  await openSelectPopup(selectPopup);
+
+  let popup_initial_rect = selectPopup.getBoundingClientRect();
+  let popupInitialX = popup_initial_rect.left;
+  let popupInitialY = popup_initial_rect.top;
+
+  await hideSelectPopup(selectPopup);
+
+  ok(popupInitialX > 0, "select position before zooming (x) " + popupInitialX);
+  ok(popupInitialY > 0, "select position before zooming (y) " + popupInitialY);
+
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async () => {
+    await content.wrappedJSObject.pinchZoomInWithTouch(150, 300);
+  });
+
+  // Flush state and get the resolution we're at now
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async () => {
+    await content.wrappedJSObject.promiseApzFlushedRepaints();
+  });
+
+  const final_resolution = await SpecialPowers.spawn(
+    tab.linkedBrowser,
+    [],
+    () => {
+      return content.window.windowUtils.getResolution();
+    }
+  );
+
+  ok(
+    final_resolution > initial_resolution,
+    "The final resolution (" +
+      final_resolution +
+      ") is greater after zooming in"
+  );
+
+  const final_rect = await SpecialPowers.spawn(tab.linkedBrowser, [], () => {
+    return content.wrappedJSObject.getSelectRect();
+  });
+
+  await openSelectPopup(selectPopup);
+
+  let popupRect = selectPopup.getBoundingClientRect();
+  ok(
+    Math.abs(popupRect.left - popupInitialX) > 1,
+    "popup should have moved by more than one pixel (x) " +
+      popupRect.left +
+      " " +
+      popupInitialX
+  );
+  ok(
+    Math.abs(popupRect.top - popupInitialY) > 1,
+    "popup should have moved by more than one pixel (y) " +
+      popupRect.top +
+      " " +
+      popupInitialY
+  );
+
+  ok(
+    Math.abs(
+      final_rect.left - initial_rect.left - (popupRect.left - popupInitialX)
+    ) < 1,
+    "popup should have moved approximately the same as the element (x)"
+  );
+  let tolerance = navigator.platform.includes("Linux") ? final_rect.height : 1;
+  ok(
+    Math.abs(
+      final_rect.top - initial_rect.top - (popupRect.top - popupInitialY)
+    ) < tolerance,
+    "popup should have moved approximately the same as the element (y)"
+  );
+
+  ok(
+    true,
+    "initial " +
+      initial_rect.left +
+      " " +
+      initial_rect.top +
+      " " +
+      initial_rect.width +
+      " " +
+      initial_rect.height
+  );
+  ok(
+    true,
+    "final " +
+      final_rect.left +
+      " " +
+      final_rect.top +
+      " " +
+      final_rect.width +
+      " " +
+      final_rect.height
+  );
+
+  ok(
+    true,
+    "initial popup " +
+      popup_initial_rect.left +
+      " " +
+      popup_initial_rect.top +
+      " " +
+      popup_initial_rect.width +
+      " " +
+      popup_initial_rect.height
+  );
+  ok(
+    true,
+    "final popup " +
+      popupRect.left +
+      " " +
+      popupRect.top +
+      " " +
+      popupRect.width +
+      " " +
+      popupRect.height
+  );
+
+  await hideSelectPopup(selectPopup);
+
+  BrowserTestUtils.removeTab(tab);
+});

gfx/layers/apz/test/mochitest/helper_test_select_zoom.html

@@ -0,0 +1,45 @@
+<html><head>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src='/tests/SimpleTest/paint_listener.js'></script>
+<script src='apz_test_utils.js'></script>
+<script src='apz_test_native_event_utils.js'></script>
+<script>
+function getSelectRect() {
+    const input = document.getElementById("select");
+    let rect = input.getBoundingClientRect();
+    let x = rect.left;
+    let y = rect.top;
+
+    const offsetX = {};
+    const offsetY = {};
+    SpecialPowers.getDOMWindowUtils(window).getVisualViewportOffsetRelativeToLayoutViewport(offsetX, offsetY);
+
+    let resolution = SpecialPowers.getDOMWindowUtils(window).getResolution();
+    x = resolution * (x - offsetX.value);
+    y = resolution * (y - offsetY.value);
+
+    let fullZoom = SpecialPowers.getDOMWindowUtils(window).fullZoom;
+    rect = {
+      left: x * fullZoom,
+      top: y * fullZoom,
+      width: rect.width * fullZoom * resolution,
+      height: rect.height * fullZoom * resolution,
+    };
+
+    return rect;
+}
+</script>
+</head>
+<body>
+Here is some text to stare at as the test runs. It serves no functional
+purpose, but gives you an idea of the zoom level. It's harder to tell what
+the zoom level is when the page is just solid white.
+<select id='select' style="position: absolute; left:150px; top:300px;"><option>he he he</option><option>boo boo</option><option>baz baz</option></select>
+
+<script>
+  // Silence SimpleTest warning about missing assertions by having it wait
+  // indefinitely. We don't need to give it an explicit finish because the
+  // entire window this test runs in will be closed after subtestDone is called.
+  SimpleTest.waitForExplicitFinish();
+</script>
+</body></html>