Bug 1810653 - Update feature callout position tests. r=jprickett

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

browser/components/firefoxview/tests/browser/browser.ini

@@ -8,7 +8,6 @@ prefs =
 [browser_firefoxview.js]
 [browser_firefoxview_accessibility.js]
 [browser_firefoxview_feature_callout_a11y.js]
-skip-if = true # Bug 1784343
 [browser_firefoxview_tab.js]
 [browser_keyboard_focus.js]
 [browser_media_query_dom_sorting.js]
@@ -27,7 +26,6 @@ skip-if = true # Bug 1784343
 skip-if = true # Bug 1783684
 [browser_feature_callout.js]
 [browser_feature_callout_position.js]
-skip-if = true # Bug 1784343
 [browser_feature_callout_resize.js]
 [browser_feature_callout_targeting.js]
 [browser_tab_close_last_tab.js]

browser/components/firefoxview/tests/browser/browser_feature_callout_position.js

@@ -23,15 +23,17 @@ add_task(
       async browser => {
         const { document } = browser.contentWindow;
         await waitForCalloutScreen(document, "FEATURE_CALLOUT_1");
-        let parentTop = document
+        let parentBottom = document
           .querySelector("#tab-pickup-container")
-          .getBoundingClientRect().top;
+          .getBoundingClientRect().bottom;
         let containerTop = document
           .querySelector(calloutSelector)
           .getBoundingClientRect().top;
-        ok(
-          parentTop < containerTop,
-          "Feature Callout is positioned below parent element when callout is configured to point from the top"
+
+        Assert.lessOrEqual(
+          parentBottom,
+          containerTop + 5 + 1, // Add 5px for overlap and 1px for fuzziness to account for possible subpixel rounding
+          "Feature Callout is positioned below parent element with 5px overlap"
         );
       }
     );
@@ -41,6 +43,42 @@ add_task(
 
 add_task(
   async function feature_callout_second_screen_positioned_left_of_element() {
+    const testMessage = getCalloutMessageById(
+      "FIREFOX_VIEW_FEATURE_TOUR_2_NO_CWS"
+    );
+    testMessage.message.content.screens[1].content.arrow_position = "end";
+    const sandbox = createSandboxWithCalloutTriggerStub(testMessage);
+
+    await BrowserTestUtils.withNewTab(
+      {
+        gBrowser,
+        url: "about:firefoxview",
+      },
+      async browser => {
+        const { document } = browser.contentWindow;
+        const parent = document.querySelector(
+          "#recently-closed-tabs-container"
+        );
+        parent.style.gridArea = "1/2";
+        await waitForCalloutScreen(document, "FEATURE_CALLOUT_2");
+        let parentLeft = parent.getBoundingClientRect().left;
+        let containerRight = document
+          .querySelector(calloutSelector)
+          .getBoundingClientRect().right;
+
+        Assert.greaterOrEqual(
+          parentLeft,
+          containerRight - 5 - 1, // Subtract 5px for overlap and 1px for fuzziness to account for possible subpixel rounding
+          "Feature Callout is positioned left of parent element with 5px overlap"
+        );
+      }
+    );
+    sandbox.restore();
+  }
+);
+
+add_task(
+  async function feature_callout_second_screen_positioned_above_element() {
     const testMessage = getCalloutMessageById(
       "FIREFOX_VIEW_FEATURE_TOUR_2_NO_CWS"
     );
@@ -54,16 +92,17 @@ add_task(
       async browser => {
         const { document } = browser.contentWindow;
         await waitForCalloutScreen(document, "FEATURE_CALLOUT_2");
-        let parentLeft = document
-          .querySelector("#colorways")
-          .getBoundingClientRect().left;
-        let containerLeft = document
+        let parentTop = document
+          .querySelector("#recently-closed-tabs-container")
+          .getBoundingClientRect().top;
+        let containerBottom = document
           .querySelector(calloutSelector)
-          .getBoundingClientRect().left;
+          .getBoundingClientRect().bottom;
 
-        ok(
-          parentLeft > containerLeft,
-          "Feature Callout is positioned left of parent element when callout is configured at end of callout"
+        Assert.greaterOrEqual(
+          parentTop,
+          containerBottom - 5 - 1,
+          "Feature Callout is positioned above parent element with 5px overlap"
         );
       }
     );
@@ -92,27 +131,25 @@ add_task(
       },
       async browser => {
         const { document } = browser.contentWindow;
+        const parent = document.querySelector(
+          "#recently-closed-tabs-container"
+        );
+        parent.style.gridArea = "1/2";
         await waitForCalloutScreen(document, "FEATURE_CALLOUT_2");
-        let parentLeft = document
-          .querySelector("#colorways")
-          .getBoundingClientRect().left;
+        let parentRight = parent.getBoundingClientRect().right;
         let containerLeft = document
           .querySelector(calloutSelector)
           .getBoundingClientRect().left;
 
-        ok(
-          parentLeft < containerLeft,
-          "Feature Callout is positioned right of parent element when callout is configured at end of callout in right to left layouts"
+        Assert.lessOrEqual(
+          parentRight,
+          containerLeft + 5 + 1,
+          "Feature Callout is positioned right of parent element when callout is set to 'end' in RTL layouts"
         );
       }
     );
 
-    await SpecialPowers.pushPrefEnv({
-      set: [
-        // Revert layout direction to left to right
-        ["intl.l10n.pseudo", ""],
-      ],
-    });
+    await SpecialPowers.popPrefEnv();
     sandbox.restore();
   }
 );
@@ -146,9 +183,9 @@ add_task(
             document.querySelector(calloutSelector).style.top !=
             calloutStartingTopPosition
         );
-        ok(
-          document.querySelector(calloutSelector).style.top !=
-            calloutStartingTopPosition,
+        isnot(
+          document.querySelector(calloutSelector).style.top,
+          calloutStartingTopPosition,
           "Feature Callout position is recalculated when parent element is toggled"
         );
         await closeCallout(document);
@@ -267,8 +304,9 @@ add_task(
           container.classList.contains("arrow-top-start"),
           "In RTL mode, the feature Callout container has the expected arrow-top-start class"
         );
-        ok(
-          containerLeft === parentLeft,
+        is(
+          containerLeft,
+          parentLeft,
           "In RTL mode, the feature Callout's left edge is aligned with parent element's left edge"
         );
 
@@ -276,98 +314,90 @@ add_task(
       }
     );
 
-    await SpecialPowers.pushPrefEnv({
-      set: [
-        // Revert layout direction to left to right
-        ["intl.l10n.pseudo", ""],
-      ],
-    });
-
+    await SpecialPowers.popPrefEnv();
     sandbox.restore();
   }
 );
 
-add_task(
-  async function feature_callout_smaller_parent_container_than_callout_container() {
-    let testMessage = {
-      message: {
-        id: "FIREFOX_VIEW_FEATURE_TOUR_1_NO_CWS",
-        template: "feature_callout",
-        content: {
-          id: "FIREFOX_VIEW_FEATURE_TOUR",
-          transitions: false,
-          disableHistoryUpdates: true,
-          screens: [
-            {
-              id: "FEATURE_CALLOUT_1",
-              parent_selector: "#colorways-button",
-              content: {
-                position: "callout",
-                arrow_position: "end",
-                title: "callout-firefox-view-colorways-reminder-title",
-                subtitle: {
-                  string_id: "callout-firefox-view-colorways-reminder-subtitle",
-                },
-                logo: {
-                  imageURL: "chrome://browser/content/callout-tab-pickup.svg",
-                  darkModeImageURL:
-                    "chrome://browser/content/callout-tab-pickup-dark.svg",
-                  height: "128px", //#colorways-button has a height of 35px
-                },
-                dismiss_button: {
-                  action: {
-                    navigate: true,
-                  },
+add_task(async function feature_callout_is_larger_than_its_parent() {
+  let testMessage = {
+    message: {
+      id: "FIREFOX_VIEW_FEATURE_TOUR_1_NO_CWS",
+      template: "feature_callout",
+      content: {
+        id: "FIREFOX_VIEW_FEATURE_TOUR",
+        transitions: false,
+        disableHistoryUpdates: true,
+        screens: [
+          {
+            id: "FEATURE_CALLOUT_1",
+            parent_selector: ".brand-icon",
+            content: {
+              position: "callout",
+              arrow_position: "end",
+              title: "callout-firefox-view-tab-pickup-title",
+              subtitle: {
+                string_id: "callout-firefox-view-tab-pickup-subtitle",
+              },
+              logo: {
+                imageURL: "chrome://browser/content/callout-tab-pickup.svg",
+                darkModeImageURL:
+                  "chrome://browser/content/callout-tab-pickup-dark.svg",
+                height: "128px", // .brand-icon has a height of 32px
+              },
+              dismiss_button: {
+                action: {
+                  navigate: true,
                 },
               },
             },
-          ],
-        },
+          },
+        ],
       },
-    };
+    },
+  };
 
-    const sandbox = createSandboxWithCalloutTriggerStub(testMessage);
+  const sandbox = createSandboxWithCalloutTriggerStub(testMessage);
 
-    await SpecialPowers.pushPrefEnv({
-      set: [[featureTourPref, getPrefValueByScreen(1)]],
-    });
+  await SpecialPowers.pushPrefEnv({
+    set: [[featureTourPref, getPrefValueByScreen(1)]],
+  });
 
-    await BrowserTestUtils.withNewTab(
-      {
-        gBrowser,
-        url: "about:firefoxview",
-      },
-      async browser => {
-        const { document } = browser.contentWindow;
-        await waitForCalloutScreen(document, "FEATURE_CALLOUT_1");
-        let parentHeight = document.querySelector("#colorways-button")
-          .offsetHeight;
-        let containerHeight = document.querySelector(calloutSelector)
-          .offsetHeight;
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: "about:firefoxview",
+    },
+    async browser => {
+      const { document } = browser.contentWindow;
+      await waitForCalloutScreen(document, "FEATURE_CALLOUT_1");
+      let parent = document.querySelector(".brand-icon");
+      let container = document.querySelector(calloutSelector);
+      let parentHeight = parent.offsetHeight;
+      let containerHeight = container.offsetHeight;
 
-        let parentPositionTop =
-          document.querySelector("#colorways-button").getBoundingClientRect()
-            .top + window.scrollY;
-        let containerPositionTop =
-          document.querySelector(calloutSelector).getBoundingClientRect().top +
-          window.scrollY;
-        ok(
-          containerHeight > parentHeight,
-          "Feature Callout is height is larger than parent element when callout is configured at end of callout"
-        );
-        ok(
-          containerPositionTop < parentPositionTop,
-          "Feature Callout is positioned higher that parent element when callout is configured at end of callout"
-        );
-        isfuzzy(
-          containerHeight / 2 + containerPositionTop,
-          parentHeight / 2 + parentPositionTop,
-          1, // Display scaling can cause up to 1px difference in layout
-          "Feature Callout is centered equally to parent element when callout is configured at end of callout"
-        );
-        await ASRouter.resetMessageState();
-      }
-    );
-    sandbox.restore();
-  }
-);
+      let parentPositionTop =
+        parent.getBoundingClientRect().top + window.scrollY;
+      let containerPositionTop =
+        container.getBoundingClientRect().top + window.scrollY;
+      Assert.greater(
+        containerHeight,
+        parentHeight,
+        "Feature Callout is height is larger than parent element when callout is configured at end of callout"
+      );
+      Assert.less(
+        containerPositionTop,
+        parentPositionTop,
+        "Feature Callout is positioned higher that parent element when callout is configured at end of callout"
+      );
+      isfuzzy(
+        containerHeight / 2 + containerPositionTop,
+        parentHeight / 2 + parentPositionTop,
+        1, // Display scaling can cause up to 1px difference in layout
+        "Feature Callout is centered equally to parent element when callout is configured at end of callout"
+      );
+      await ASRouter.resetMessageState();
+    }
+  );
+  sandbox.restore();
+});

browser/components/firefoxview/tests/browser/browser_firefoxview_feature_callout_a11y.js

@@ -6,20 +6,6 @@
 /**
  * Tests that are related to the accessibility of the feature callout
  */
-add_setup(async function setup() {
-  let originalWidth = window.outerWidth;
-  let originalHeight = window.outerHeight;
-  registerCleanupFunction(async () => {
-    await BrowserTestUtils.withNewTab(
-      {
-        gBrowser,
-        url: "about:firefoxview",
-      },
-      async browser => window.FullZoom.reset(browser)
-    );
-    window.resizeTo(originalWidth, originalHeight);
-  });
-});
 
 /**
  * Ensure feature tour is accessible using a screen reader and with
@@ -27,10 +13,7 @@ add_setup(async function setup() {
  */
 add_task(async function feature_callout_is_accessible() {
   await SpecialPowers.pushPrefEnv({
-    set: [
-      ["browser.firefox-view.feature-tour", getPrefValueByScreen(1)],
-      ["browser.sessionstore.max_tabs_undo", 1],
-    ],
+    set: [["browser.firefox-view.feature-tour", getPrefValueByScreen(1)]],
   });
 
   await BrowserTestUtils.withNewTab(
@@ -40,10 +23,6 @@ add_task(async function feature_callout_is_accessible() {
     },
     async browser => {
       const { document } = browser.contentWindow;
-
-      window.FullZoom.setZoom(0.5, browser);
-      browser.contentWindow.resizeTo(1550, 1000);
-
       await waitForCalloutScreen(document, "FEATURE_CALLOUT_1");
 
       await BrowserTestUtils.waitForCondition(
@@ -51,6 +30,7 @@ add_task(async function feature_callout_is_accessible() {
         "Feature Callout is focused on page load"
       );
       ok(true, "Feature Callout was focused on page load");
+
       await BrowserTestUtils.waitForCondition(
         () =>
           document.querySelector(
@@ -63,18 +43,8 @@ add_task(async function feature_callout_is_accessible() {
       // Advance to second screen
       clickPrimaryButton(document);
       await waitForCalloutScreen(document, "FEATURE_CALLOUT_2");
+
       ok(true, "FEATURE_CALLOUT_2 was successfully displayed");
-
-      const startingTop = document.querySelector(calloutSelector).style.top;
-
-      browser.contentWindow.resizeTo(800, 800);
-      // Wait for callout to be repositioned
-      await BrowserTestUtils.waitForMutationCondition(
-        document.querySelector(calloutSelector),
-        { attributeFilter: ["style"], attributes: true },
-        () => document.querySelector(calloutSelector).style.top != startingTop
-      );
-
       await BrowserTestUtils.waitForCondition(
         () => document.activeElement.id === calloutId,
         "Feature Callout is focused after advancing screens"