diff --git a/browser/components/firefoxview/tests/browser/browser.ini b/browser/components/firefoxview/tests/browser/browser.ini index a4d9c7c9ca4c..3e0507b747d6 100644 --- a/browser/components/firefoxview/tests/browser/browser.ini +++ b/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] diff --git a/browser/components/firefoxview/tests/browser/browser_feature_callout_position.js b/browser/components/firefoxview/tests/browser/browser_feature_callout_position.js index b4f15a4f80af..8edee7c71bd0 100644 --- a/browser/components/firefoxview/tests/browser/browser_feature_callout_position.js +++ b/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(); +}); diff --git a/browser/components/firefoxview/tests/browser/browser_firefoxview_feature_callout_a11y.js b/browser/components/firefoxview/tests/browser/browser_firefoxview_feature_callout_a11y.js index accad81807f2..17485e54e1ee 100644 --- a/browser/components/firefoxview/tests/browser/browser_firefoxview_feature_callout_a11y.js +++ b/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"