mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

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

Differential Revision: https://phabricator.services.mozilla.com/D166979
This commit is contained in:
Shane Hughes 2023-01-18 11:22:19 +00:00
Родитель 8adc06baf3
Коммит b079a2b921
3 изменённых файлов: 146 добавлений и 148 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
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]

256
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();
});

36
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"