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

Bug 1802621 - Move browser_datetime tests in their own subdirectory. r=mconley 

Moved the datepicker-related browser tests in the new subdirectory `datetime` within `toolkit/content/tests/browser/`. Besides `browser_datetime_*` tests `browser_spinner*` ones were also moved, because they share a lot of helper functions and are used for DateTimePicker widgets as well. The subdirectory includes a `header.js` with the `DateTimeTestHelper` class constructor and opther helper functions used across the DateTimePicker test files.

It also splits larger test files to avoid intermittent timeouts caused by the large sets of use cases performed.

`Browser.ini` includes `skip-if` cases for `browser_datetime_datepicker_*` tests that were provided initially but were not copied to the expanded browser test files in the bug 1676068 work.

Differential Revision: https://phabricator.services.mozilla.com/D168140
This commit is contained in:
Anna Yeddi 2023-01-30 23:53:14 +00:00
Родитель 5e7e45b33d
Коммит cfa53fc21d
17 изменённых файлов: 1673 добавлений и 1844 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

12
toolkit/content/tests/browser/browser.ini
Просмотреть файл

@ -79,18 +79,6 @@ skip-if = !crashreporter
[browser_contentTitle.js]
[browser_crash_previous_frameloader.js]
run-if = crashreporter
[browser_datetime_showPicker.js]
[browser_datetime_datepicker.js]
[browser_datetime_datepicker_min_max.js]
[browser_datetime_datepicker_markup.js]
[browser_datetime_datepicker_keynav.js]
[browser_datetime_datepicker_mousenav.js]
[browser_spinner.js]
[browser_spinner_keynav.js]
skip-if =
tsan # Frequently times out on TSan
os == "win" && asan && fission # fails on asan/fission
os == "linux" && fission && socketprocess_networking && !debug # high frequency intermittent, Bug 1673140
[browser_default_audio_filename.js]
support-files = audio_file.txt
[browser_default_image_filename.js]

1272
toolkit/content/tests/browser/browser_datetime_datepicker_keynav.js
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

57
toolkit/content/tests/browser/datetime/browser.ini Normal file
Просмотреть файл

@ -0,0 +1,57 @@
[DEFAULT]
support-files =
head.js
[browser_datetime_datepicker.js]
# This file was skipped before new tests were written based on it in Bug 1676068
skip-if =
tsan # Frequently times out on TSan
os == "win" && asan && fission # fails on asan/fission
os == "linux" && fission && socketprocess_networking && !debug # high frequency intermittent, Bug 1673140
[browser_datetime_datepicker_focus.js]
skip-if =
tsan # Frequently times out on TSan
os == "win" && asan && fission # fails on asan/fission
os == "linux" && fission && socketprocess_networking && !debug # high frequency intermittent, Bug 1673140
[browser_datetime_datepicker_keynav.js]
skip-if =
tsan # Frequently times out on TSan
os == "win" && asan && fission # fails on asan/fission
os == "linux" && fission && socketprocess_networking && !debug # high frequency intermittent, Bug 1673140
[browser_datetime_datepicker_markup.js]
skip-if =
tsan # Frequently times out on TSan
os == "win" && asan && fission # fails on asan/fission
os == "linux" && fission && socketprocess_networking && !debug # high frequency intermittent, Bug 1673140
[browser_datetime_datepicker_min_max.js]
skip-if =
tsan # Frequently times out on TSan
os == "win" && asan && fission # fails on asan/fission
os == "linux" && fission && socketprocess_networking && !debug # high frequency intermittent, Bug 1673140
[browser_datetime_datepicker_monthyear.js]
skip-if =
tsan # Frequently times out on TSan
os == "win" && asan && fission # fails on asan/fission
os == "linux" && fission && socketprocess_networking && !debug # high frequency intermittent, Bug 1673140
[browser_datetime_datepicker_mousenav.js]
skip-if =
tsan # Frequently times out on TSan
os == "win" && asan && fission # fails on asan/fission
os == "linux" && fission && socketprocess_networking && !debug # high frequency intermittent, Bug 1673140
[browser_datetime_datepicker_prev_next_month.js]
skip-if =
tsan # Frequently times out on TSan
os == "win" && asan && fission # fails on asan/fission
os == "linux" && fission && socketprocess_networking && !debug # high frequency intermittent, Bug 1673140
[browser_datetime_showPicker.js]
# do not skip
[browser_spinner.js]
skip-if =
tsan # Frequently times out on TSan
os == "win" && asan && fission # fails on asan/fission
os == "linux" && fission && socketprocess_networking && !debug # high frequency intermittent, Bug 1673140
[browser_spinner_keynav.js]
skip-if =
tsan # Frequently times out on TSan
os == "win" && asan && fission # fails on asan/fission
os == "linux" && fission && socketprocess_networking && !debug # high frequency intermittent, Bug 1673140

82
toolkit/content/tests/browser/browser_datetime_datepicker.js → toolkit/content/tests/browser/datetime/browser_datetime_datepicker.js
Просмотреть файл

@ -4,21 +4,6 @@
"use strict";
const MONTH_YEAR = ".month-year",
DAYS_VIEW = ".days-view",
BTN_NEXT_MONTH = ".next",
DAY_TODAY = ".today",
DAY_SELECTED = ".selection";
const DATE_FORMAT = new Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "long",
timeZone: "UTC",
}).format;
const DATE_FORMAT_LOCAL = new Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "long",
}).format;
// Create a list of abbreviations for calendar class names
const W = "weekend",
O = "outside",
@ -73,73 +58,6 @@ const calendarClasslist_201612 = [
[W, O],
];
function getCalendarText() {
let calendarCells = [];
for (const tr of helper.getChildren(DAYS_VIEW)) {
for (const td of tr.children) {
calendarCells.push(td.textContent);
}
}
return calendarCells;
}
function getCalendarClassList() {
let calendarCellsClasses = [];
for (const tr of helper.getChildren(DAYS_VIEW)) {
for (const td of tr.children) {
calendarCellsClasses.push(td.classList);
}
}
return calendarCellsClasses;
}
function mergeArrays(a, b) {
return a.map((classlist, index) => classlist.concat(b[index]));
}
async function verifyPickerPosition(browsingContext, inputId) {
let inputRect = await SpecialPowers.spawn(
browsingContext,
[inputId],
async function(inputIdChild) {
let rect = content.document
.getElementById(inputIdChild)
.getBoundingClientRect();
return {
left: content.mozInnerScreenX + rect.left,
bottom: content.mozInnerScreenY + rect.bottom,
};
}
);
function is_close(got, exp, msg) {
// on some platforms we see differences of a fraction of a pixel - so
// allow any difference of < 1 pixels as being OK.
Assert.ok(
Math.abs(got - exp) < 1,
msg + ": " + got + " should be equal(-ish) to " + exp
);
}
const marginLeft = parseFloat(getComputedStyle(helper.panel).marginLeft);
const marginTop = parseFloat(getComputedStyle(helper.panel).marginTop);
is_close(
helper.panel.screenX - marginLeft,
inputRect.left,
"datepicker x position"
);
is_close(
helper.panel.screenY - marginTop,
inputRect.bottom,
"datepicker y position"
);
}
let helper = new DateTimeTestHelper();
registerCleanupFunction(() => {
helper.cleanup();
});
/**
* Test that date picker opens to today's date when input field is blank
*/

151
toolkit/content/tests/browser/datetime/browser_datetime_datepicker_focus.js Normal file
Просмотреть файл

@ -0,0 +1,151 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
/**
* Ensure navigating through Datepicker using keyboard after a date
* has already been selected will keep the keyboard focus
* when reaching a different month (bug 1804466).
*/
add_task(async function test_focus_after_selection() {
info(
`Ensure navigating through Datepicker using keyboard after a date has already been selected will not lose keyboard focus when reaching a different month.`
);
// Set "prefers-reduced-motion" media to "reduce"
// to avoid intermittent scroll failures (1803612, 1803687)
await SpecialPowers.pushPrefEnv({
set: [["ui.prefersReducedMotion", 1]],
});
Assert.ok(
matchMedia("(prefers-reduced-motion: reduce)").matches,
"The reduce motion mode is active"
);
const inputValue = "2022-12-12";
const prevMonth = "2022-10-01";
const nextYear = "2023-11-01";
const nextYearAfter = "2024-01-01";
await helper.openPicker(
`data:text/html, <input type="date" value=${inputValue}>`
);
info("Test behavior when selection is done on the calendar grid");
// Move focus from 2022-12-12 to 2022-10-24 by week
// Changing 2 month views along the way:
EventUtils.synthesizeKey("KEY_ArrowUp", { repeat: 7 });
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(prevMonth)),
"The calendar is updated to show the second previous month (2022-10)."
);
let closed = helper.promisePickerClosed();
// Make a selection and close the picker
EventUtils.synthesizeKey(" ");
await closed;
let ready = helper.waitForPickerReady();
// Move the keyboard focus to the input field and reopen the picker
EventUtils.synthesizeKey("KEY_Tab");
EventUtils.synthesizeKey(" ");
await ready;
// Move focus from 2022-10-24 to 2022-12-12 by week
// Changing 2 month views along the way:
EventUtils.synthesizeKey("KEY_ArrowDown", { repeat: 7 });
// 2022-12-12:
const focusedDay = getDayEl(12);
let monthYearEl = helper.getElement(MONTH_YEAR);
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{ childList: true },
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(inputValue));
},
`Should change to December 2022, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.equal(
focusedDay,
helper.getElement(DAYS_VIEW).querySelector('[tabindex="0"]'),
"There is a focusable day within a calendar grid"
);
Assert.ok(
focusedDay.matches(":focus"),
"The focusable day within a calendar grid is focused"
);
info("Test behavior when selection is done on the month-year panel");
// Move focus to the month-year toggle button and open it:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 2 });
EventUtils.synthesizeKey(" ");
// Move focus to the month spin button and change its value
// from December to November:
EventUtils.synthesizeKey("KEY_Tab");
EventUtils.synthesizeKey("KEY_ArrowUp");
// Move focus to the year spin button and change its value
// from 2022 to 2023:
EventUtils.synthesizeKey("KEY_Tab");
EventUtils.synthesizeKey("KEY_ArrowDown");
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{ childList: true },
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(nextYear));
},
`Should change to November 2023, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
// Make a selection, close the month picker
EventUtils.synthesizeKey(" ");
Assert.ok(
BrowserTestUtils.is_hidden(helper.getElement(MONTH_YEAR_VIEW)),
"Month-year selection panel is not visible"
);
// Move focus from 2023-11-12 to 2024-01-07 by week
// Changing 2 month views along the way:
EventUtils.synthesizeKey("KEY_ArrowDown", { repeat: 8 });
// 2024-01-07:
const newFocusedDay = getDayEl(7);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(nextYearAfter)),
"The calendar is updated to show another month (2024-01)."
);
Assert.equal(
newFocusedDay,
helper.getElement(DAYS_VIEW).querySelector('[tabindex="0"]'),
"There is a focusable day within a calendar grid"
);
Assert.ok(
newFocusedDay.matches(":focus"),
"The focusable day within a calendar grid is focused"
);
await helper.tearDown();
await SpecialPowers.popPrefEnv();
});

573
toolkit/content/tests/browser/datetime/browser_datetime_datepicker_keynav.js Normal file
Просмотреть файл

@ -0,0 +1,573 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
/**
* Ensure picker opens, closes, and updates its value with key bindings appropriately.
*/
add_task(async function test_datepicker_keyboard_nav() {
info(
"Ensure picker opens, closes, and updates its value with key bindings appropriately."
);
const inputValue = "2016-12-15";
const prevMonth = "2016-11-01";
await helper.openPicker(
`data:text/html,<input id=date type=date value=${inputValue}>`
);
let browser = helper.tab.linkedBrowser;
Assert.equal(helper.panel.state, "open", "Panel should be opened");
await testCalendarBtnAttribute("aria-expanded", "true");
let closed = helper.promisePickerClosed();
// Close on Escape anywhere
EventUtils.synthesizeKey("KEY_Escape", {});
await closed;
Assert.equal(
helper.panel.state,
"closed",
"Panel should be closed after Escape from anywhere on the window"
);
await testCalendarBtnAttribute("aria-expanded", "false");
let ready = helper.waitForPickerReady();
// Ensure focus is on the input field
await SpecialPowers.spawn(browser, [], () => {
content.document.querySelector("#date").focus();
});
info("Test that input updates with the keyboard update the picker");
// NOTE: After a Tab, the first input field (the month one) is focused,
// so down arrow will change the selected month.
//
// This assumes en-US locale, which seems fine for testing purposes (as
// DATE_FORMAT and other bits around do the same).
BrowserTestUtils.synthesizeKey("KEY_ArrowDown", {}, browser);
// Toggle the picker on Space anywhere within the input
BrowserTestUtils.synthesizeKey(" ", {}, browser);
await ready;
await testCalendarBtnAttribute("aria-expanded", "true");
Assert.equal(
helper.panel.state,
"open",
"Panel should be opened on Space from anywhere within the input field"
);
Assert.equal(
helper.panel.querySelector("#dateTimePopupFrame").contentDocument
.activeElement.textContent,
"15",
"Picker is opened with a focus set to the currently selected date"
);
let monthYearEl = helper.getElement(MONTH_YEAR);
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{ childList: true },
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(prevMonth));
},
`Should change to November 2016, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.ok(
true,
"The date on both the Calendar and Month-Year button was updated when updating months with Down arrow key"
);
closed = helper.promisePickerClosed();
// Close on Escape and return the focus to the input field (the month input in en-US locale)
EventUtils.synthesizeKey("KEY_Escape", {}, window);
await closed;
Assert.equal(
helper.panel.state,
"closed",
"Panel should be closed on Escape"
);
// Check the focus is returned to the Month field
await SpecialPowers.spawn(browser, [], async () => {
const input = content.document.querySelector("input");
const shadowRoot = SpecialPowers.wrap(input).openOrClosedShadowRoot;
// Separators "/" are odd children of the wrapper
const monthField = shadowRoot.getElementById("edit-wrapper").children[0];
// Testing the focus position within content:
Assert.equal(
input,
content.document.activeElement,
`The input field includes programmatic focus`
);
// Testing the focus indication within the shadow-root:
Assert.ok(
monthField.matches(":focus"),
`The keyboard focus was returned to the Month field`
);
});
// Move focus to the second field (the day input in en-US locale)
BrowserTestUtils.synthesizeKey("KEY_ArrowRight", {}, browser);
// Change the day to 2016-12-16
BrowserTestUtils.synthesizeKey("KEY_ArrowUp", {}, browser);
ready = helper.waitForPickerReady();
// Open the picker on Space within the input to check the date update
await BrowserTestUtils.synthesizeKey(" ", {}, browser);
await ready;
await testCalendarBtnAttribute("aria-expanded", "true");
Assert.equal(helper.panel.state, "open", "Panel should be opened on Space");
let selectedDayEl = helper.getElement(DAY_SELECTED);
await BrowserTestUtils.waitForMutationCondition(
selectedDayEl,
{ childList: true },
() => {
return selectedDayEl.textContent === "16";
},
`Should change to the 16th, instead got ${
helper.getElement(DAY_SELECTED).textContent
}`
);
Assert.ok(
true,
"The date on the Calendar was updated when updating days with Up arrow key"
);
closed = helper.promisePickerClosed();
// Close on Escape and return the focus to the input field (the day input in en-US locale)
EventUtils.synthesizeKey("KEY_Escape", {}, window);
await closed;
Assert.equal(
helper.panel.state,
"closed",
"Panel should be closed on Escape"
);
await testCalendarBtnAttribute("aria-expanded", "false");
// Check the focus is returned to the Day field
await SpecialPowers.spawn(browser, [], async () => {
const input = content.document.querySelector("input");
const shadowRoot = SpecialPowers.wrap(input).openOrClosedShadowRoot;
// Separators "/" are odd children of the wrapper
const dayField = shadowRoot.getElementById("edit-wrapper").children[2];
// Testing the focus position within content:
Assert.equal(
input,
content.document.activeElement,
`The input field includes programmatic focus`
);
// Testing the focus indication within the shadow-root:
Assert.ok(
dayField.matches(":focus"),
`The keyboard focus was returned to the Day field`
);
});
info("Test the Calendar button can toggle the picker with Enter/Space");
// Move focus to the Calendar button
BrowserTestUtils.synthesizeKey("KEY_Tab", {}, browser);
BrowserTestUtils.synthesizeKey("KEY_Tab", {}, browser);
// Toggle the picker on Enter on Calendar button
await BrowserTestUtils.synthesizeKey("KEY_Enter", {}, browser);
await helper.waitForPickerReady();
Assert.equal(
helper.panel.state,
"open",
"Panel should be opened on Enter from the Calendar button"
);
await testCalendarBtnAttribute("aria-expanded", "true");
// Move focus from 2016-11-16 to 2016-11-17
EventUtils.synthesizeKey("KEY_ArrowRight", {});
// Make a selection by pressing Space on date gridcell
await EventUtils.synthesizeKey(" ", {});
await helper.promisePickerClosed();
Assert.equal(
helper.panel.state,
"closed",
"Panel should be closed on Space from the date gridcell"
);
await testCalendarBtnAttribute("aria-expanded", "false");
// Check the focus is returned to the Calendar button
await SpecialPowers.spawn(browser, [], async () => {
const input = content.document.querySelector("input");
const shadowRoot = SpecialPowers.wrap(input).openOrClosedShadowRoot;
const calendarBtn = shadowRoot.getElementById("calendar-button");
// Testing the focus position within content:
Assert.equal(
input,
content.document.activeElement,
`The input field includes programmatic focus`
);
// Testing the focus indication within the shadow-root:
Assert.ok(
calendarBtn.matches(":focus"),
`The keyboard focus was returned to the Calendar button`
);
});
// Check the Backspace on Calendar button is not doing anything
await EventUtils.synthesizeKey("KEY_Backspace", {});
// The Calendar button is on its place and the input value is not changed
// (bug 1804669)
await SpecialPowers.spawn(browser, [], () => {
const input = content.document.querySelector("input");
const shadowRoot = SpecialPowers.wrap(input).openOrClosedShadowRoot;
const calendarBtn = shadowRoot.getElementById("calendar-button");
Assert.equal(
calendarBtn.children[0].tagName,
"svg",
`Calendar button has an <svg> child`
);
Assert.equal(input.value, "2016-11-17", `Input's value is not removed`);
});
// Toggle the picker on Space on Calendar button
await EventUtils.synthesizeKey(" ", {});
await helper.waitForPickerReady();
Assert.equal(
helper.panel.state,
"open",
"Panel should be opened on Space from the Calendar button"
);
await testCalendarBtnAttribute("aria-expanded", "true");
await helper.tearDown();
});
/**
* Ensure calendar follows Arrow key bindings appropriately.
*/
add_task(async function test_datepicker_keyboard_arrows() {
info("Ensure calendar follows Arrow key bindings appropriately.");
const inputValue = "2016-12-10";
const prevMonth = "2016-11-01";
await helper.openPicker(
`data:text/html,<input id=date type=date value=${inputValue}>`
);
let pickerDoc = helper.panel.querySelector("#dateTimePopupFrame")
.contentDocument;
Assert.equal(helper.panel.state, "open", "Panel should be opened");
// Move focus from 2016-12-10 to 2016-12-11:
EventUtils.synthesizeKey("KEY_ArrowRight", {});
Assert.equal(
pickerDoc.activeElement.textContent,
"11",
"Arrow Right moves focus to the next day"
);
// Move focus from 2016-12-11 to 2016-12-04:
EventUtils.synthesizeKey("KEY_ArrowUp", {});
Assert.equal(
pickerDoc.activeElement.textContent,
"4",
"Arrow Up moves focus to the same weekday of the previous week"
);
// Move focus from 2016-12-04 to 2016-12-03:
EventUtils.synthesizeKey("KEY_ArrowLeft", {});
Assert.equal(
pickerDoc.activeElement.textContent,
"3",
"Arrow Left moves focus to the previous day"
);
// Move focus from 2016-12-03 to 2016-11-26:
EventUtils.synthesizeKey("KEY_ArrowUp", {});
Assert.equal(
pickerDoc.activeElement.textContent,
"26",
"Arrow Up updates the view to be on the previous month, if needed"
);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(prevMonth)),
"Arrow Up updates the spinner to show the previous month, if needed"
);
// Move focus from 2016-11-26 to 2016-12-03:
EventUtils.synthesizeKey("KEY_ArrowDown", {});
Assert.equal(
pickerDoc.activeElement.textContent,
"3",
"Arrow Down updates the view to be on the next month, if needed"
);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(inputValue)),
"Arrow Down updates the spinner to show the next month, if needed"
);
// Move focus from 2016-12-03 to 2016-12-10:
EventUtils.synthesizeKey("KEY_ArrowDown", {});
Assert.equal(
pickerDoc.activeElement.textContent,
"10",
"Arrow Down moves focus to the same day of the next week"
);
await helper.tearDown();
});
/**
* Ensure calendar follows Home/End key bindings appropriately.
*/
add_task(async function test_datepicker_keyboard_home_end() {
info("Ensure calendar follows Home/End key bindings appropriately.");
const inputValue = "2016-12-15";
const prevMonth = "2016-11-01";
await helper.openPicker(
`data:text/html,<input id=date type=date value=${inputValue}>`
);
let pickerDoc = helper.panel.querySelector("#dateTimePopupFrame")
.contentDocument;
Assert.equal(helper.panel.state, "open", "Panel should be opened");
// Move focus from 2016-12-15 to 2016-12-11 (in the en-US locale):
EventUtils.synthesizeKey("KEY_Home", {});
Assert.equal(
pickerDoc.activeElement.textContent,
"11",
"Home key moves focus to the first day/Sunday of the current week"
);
// Move focus from 2016-12-11 to 2016-12-17 (in the en-US locale):
EventUtils.synthesizeKey("KEY_End", {});
Assert.equal(
pickerDoc.activeElement.textContent,
"17",
"End key moves focus to the last day/Saturday of the current week"
);
// Move focus from 2016-12-17 to 2016-12-31:
EventUtils.synthesizeKey("KEY_End", { ctrlKey: true });
Assert.equal(
pickerDoc.activeElement.textContent,
"31",
"Ctrl + End keys move focus to the last day of the current month"
);
// Move focus from 2016-12-31 to 2016-12-01:
EventUtils.synthesizeKey("KEY_Home", { ctrlKey: true });
Assert.equal(
pickerDoc.activeElement.textContent,
"1",
"Ctrl + Home keys move focus to the first day of the current month"
);
// Move focus from 2016-12-01 to 2016-11-27 (in the en-US locale):
EventUtils.synthesizeKey("KEY_Home", {});
Assert.equal(
pickerDoc.activeElement.textContent,
"27",
"Home key updates the view to be on the previous month, if needed"
);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(prevMonth)),
"Home key updates the spinner to show the previous month, if needed"
);
// Move focus from 2016-11-27 to 2016-12-03 (in the en-US locale):
EventUtils.synthesizeKey("KEY_End", {});
Assert.equal(
pickerDoc.activeElement.textContent,
"3",
"End key updates the view to be on the next month, if needed"
);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(inputValue)),
"End key updates the spinner to show the next month, if needed"
);
await helper.tearDown();
});
/**
* Ensure calendar follows Page Up/Down key bindings appropriately.
*/
add_task(async function test_datepicker_keyboard_pgup_pgdown() {
info("Ensure calendar follows Page Up/Down key bindings appropriately.");
const inputValue = "2023-01-31";
const prevMonth = "2022-12-31";
const prevYear = "2021-12-01";
const nextMonth = "2023-01-31";
const nextShortMonth = "2023-03-03";
await helper.openPicker(
`data:text/html,<input id=date type=date value=${inputValue}>`
);
let pickerDoc = helper.panel.querySelector("#dateTimePopupFrame")
.contentDocument;
Assert.equal(helper.panel.state, "open", "Panel should be opened");
// Move focus from 2023-01-31 to 2022-12-31:
EventUtils.synthesizeKey("KEY_PageUp", {});
Assert.equal(
pickerDoc.activeElement.textContent,
"31",
"Page Up key moves focus to the same day of the previous month"
);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(prevMonth)),
"Page Up key updates the month-year button to show the previous month"
);
// Move focus from 2022-12-31 to 2022-12-01
// (because 2022-11-31 does not exist):
EventUtils.synthesizeKey("KEY_PageUp", {});
Assert.equal(
pickerDoc.activeElement.textContent,
"1",
`When the same day does not exists in the previous month Page Up key moves
focus to the same day of the same week of the current month`
);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(prevMonth)),
`When the same day does not exist in the previous month
Page Up key does not update the month-year button and shows the current month`
);
// Move focus from 2022-12-01 to 2021-12-01:
EventUtils.synthesizeKey("KEY_PageUp", { shiftKey: true });
Assert.equal(
pickerDoc.activeElement.textContent,
"1",
"Page Up with Shift key moves focus to the same day of the same month of the previous year"
);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(prevYear)),
"Page Up with Shift key updates the month-year button to show the same month of the previous year"
);
// Move focus from 2021-12-01 to 2022-12-01 month by month (bug 1806645):
EventUtils.synthesizeKey("KEY_PageDown", { repeat: 12 });
Assert.equal(
pickerDoc.activeElement.textContent,
"1",
"When repeated, Page Down key moves focus to the same day of the same month of the next year"
);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(prevMonth)),
"When repeated, Page Down key updates the month-year button to show the same month of the next year"
);
// Move focus from 2022-12-01 to 2021-12-01 month by month (bug 1806645):
EventUtils.synthesizeKey("KEY_PageUp", { repeat: 12 });
Assert.equal(
pickerDoc.activeElement.textContent,
"1",
"When repeated, Page Up moves focus to the same day of the same month of the previous year"
);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(prevYear)),
"When repeated, Page Up key updates the month-year button to show the same month of the previous year"
);
// Move focus from 2021-12-01 to 2022-12-01:
EventUtils.synthesizeKey("KEY_PageDown", { shiftKey: true });
Assert.equal(
pickerDoc.activeElement.textContent,
"1",
"Page Down with Shift key moves focus to the same day of the same month of the next year"
);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(prevMonth)),
"Page Down with Shift key updates the month-year button to show the same month of the next year"
);
// Move focus from 2016-12-01 to 2016-12-31:
EventUtils.synthesizeKey("KEY_End", { ctrlKey: true });
// Move focus from 2022-12-31 to 2023-01-31:
EventUtils.synthesizeKey("KEY_PageDown", {});
Assert.equal(
pickerDoc.activeElement.textContent,
"31",
"Page Down key moves focus to the same day of the next month"
);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(nextMonth)),
"Page Down key updates the month-year button to show the next month"
);
// Move focus from 2023-01-31 to 2023-03-03:
EventUtils.synthesizeKey("KEY_PageDown", {});
Assert.equal(
pickerDoc.activeElement.textContent,
"3",
`When the same day does not exists in the next month, Page Down key moves
focus to the same day of the same week of the month after`
);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(nextShortMonth)),
"Page Down key updates the month-year button to show the month after"
);
await helper.tearDown();
});

53
toolkit/content/tests/browser/browser_datetime_datepicker_markup.js → toolkit/content/tests/browser/datetime/browser_datetime_datepicker_markup.js
Просмотреть файл

@ -4,59 +4,6 @@
"use strict";
const MONTH_YEAR = ".month-year",
WEEK_HEADER = ".week-header",
DAYS_VIEW = ".days-view",
DAY_TODAY = ".today",
DAY_SELECTED = ".selection",
BTN_PREV_MONTH = ".prev",
BTN_NEXT_MONTH = ".next",
DIALOG_PICKER = "#date-picker",
MONTH_YEAR_NAV = ".month-year-nav",
MONTH_YEAR_VIEW = ".month-year-view",
SPINNER_MONTH = "#spinner-month",
SPINNER_YEAR = "#spinner-year";
/**
* Helper function to check the value of a Calendar button's specific attribute
*
* @param {String} attr: The name of the attribute to be tested
* @param {String} val: Value that is expected to be assigned to the attribute.
* @param {Boolean} presenceOnly: If "true", test only the presence of the attribute
*/
async function testCalendarBtnAttribute(attr, val, presenceOnly = false) {
let browser = helper.tab.linkedBrowser;
await SpecialPowers.spawn(
browser,
[attr, val, presenceOnly],
(attr, val, presenceOnly) => {
const input = content.document.querySelector("input");
const shadowRoot = SpecialPowers.wrap(input).openOrClosedShadowRoot;
const calendarBtn = shadowRoot.getElementById("calendar-button");
if (presenceOnly) {
Assert.ok(
calendarBtn.hasAttribute(attr),
`Calendar button has ${attr} attribute`
);
} else {
Assert.equal(
calendarBtn.getAttribute(attr),
val,
`Calendar button has ${attr} attribute set to ${val}`
);
}
}
);
}
let helper = new DateTimeTestHelper();
registerCleanupFunction(() => {
helper.cleanup();
});
/**
* Test that date picker opens with accessible markup
*/

82
toolkit/content/tests/browser/browser_datetime_datepicker_min_max.js → toolkit/content/tests/browser/datetime/browser_datetime_datepicker_min_max.js
Просмотреть файл

@ -4,21 +4,6 @@
"use strict";
const MONTH_YEAR = ".month-year",
DAYS_VIEW = ".days-view",
BTN_NEXT_MONTH = ".next",
DAY_TODAY = ".today",
DAY_SELECTED = ".selection";
const DATE_FORMAT = new Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "long",
timeZone: "UTC",
}).format;
const DATE_FORMAT_LOCAL = new Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "long",
}).format;
// Create a list of abbreviations for calendar class names
const W = "weekend",
O = "outside",
@ -73,73 +58,6 @@ const calendarClasslist_201612 = [
[W, O],
];
function getCalendarText() {
let calendarCells = [];
for (const tr of helper.getChildren(DAYS_VIEW)) {
for (const td of tr.children) {
calendarCells.push(td.textContent);
}
}
return calendarCells;
}
function getCalendarClassList() {
let calendarCellsClasses = [];
for (const tr of helper.getChildren(DAYS_VIEW)) {
for (const td of tr.children) {
calendarCellsClasses.push(td.classList);
}
}
return calendarCellsClasses;
}
function mergeArrays(a, b) {
return a.map((classlist, index) => classlist.concat(b[index]));
}
async function verifyPickerPosition(browsingContext, inputId) {
let inputRect = await SpecialPowers.spawn(
browsingContext,
[inputId],
async function(inputIdChild) {
let rect = content.document
.getElementById(inputIdChild)
.getBoundingClientRect();
return {
left: content.mozInnerScreenX + rect.left,
bottom: content.mozInnerScreenY + rect.bottom,
};
}
);
function is_close(got, exp, msg) {
// on some platforms we see differences of a fraction of a pixel - so
// allow any difference of < 1 pixels as being OK.
Assert.ok(
Math.abs(got - exp) < 1,
msg + ": " + got + " should be equal(-ish) to " + exp
);
}
const marginLeft = parseFloat(getComputedStyle(helper.panel).marginLeft);
const marginTop = parseFloat(getComputedStyle(helper.panel).marginTop);
is_close(
helper.panel.screenX - marginLeft,
inputRect.left,
"datepicker x position"
);
is_close(
helper.panel.screenY - marginTop,
inputRect.bottom,
"datepicker y position"
);
}
let helper = new DateTimeTestHelper();
registerCleanupFunction(() => {
helper.cleanup();
});
/**
* When min and max attributes are set, calendar should show some dates as
* out-of-range.

119
toolkit/content/tests/browser/datetime/browser_datetime_datepicker_monthyear.js Normal file
Просмотреть файл

@ -0,0 +1,119 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
/**
* Ensure the month-year panel of a date input handles Space and Enter appropriately.
*/
add_task(async function test_monthyear_close_date() {
info(
"Ensure the month-year panel of a date input handles Space and Enter appropriately."
);
const inputValue = "2022-11-11";
await helper.openPicker(
`data:text/html, <input type="date" value=${inputValue}>`
);
let pickerDoc = helper.panel.querySelector("#dateTimePopupFrame")
.contentDocument;
// Move focus from the selected date to the month-year toggle button:
await EventUtils.synthesizeKey("KEY_Tab", { repeat: 2 });
// Test a month spinner
await testKeyOnSpinners("KEY_Enter", pickerDoc);
await testKeyOnSpinners(" ", pickerDoc);
// Test a year spinner
await testKeyOnSpinners("KEY_Enter", pickerDoc, 2);
await testKeyOnSpinners(" ", pickerDoc, 2);
await helper.tearDown();
});
/**
* Ensure the month-year panel of a datetime-local input handles Space and Enter appropriately.
*/
add_task(async function test_monthyear_close_datetime() {
info(
"Ensure the month-year panel of a datetime-local input handles Space and Enter appropriately."
);
const inputValue = "2022-11-11T11:11";
await helper.openPicker(
`data:text/html, <input type="datetime-local" value=${inputValue}>`
);
let pickerDoc = helper.panel.querySelector("#dateTimePopupFrame")
.contentDocument;
// Move focus from the selected date to the month-year toggle button:
await EventUtils.synthesizeKey("KEY_Tab", { repeat: 2 });
// Test a month spinner
await testKeyOnSpinners("KEY_Enter", pickerDoc);
await testKeyOnSpinners(" ", pickerDoc);
// Test a year spinner
await testKeyOnSpinners("KEY_Enter", pickerDoc, 2);
await testKeyOnSpinners(" ", pickerDoc, 2);
await helper.tearDown();
});
/**
* Ensure the month-year panel of a date input can be closed with Escape key.
*/
add_task(async function test_monthyear_escape_date() {
info("Ensure the month-year panel of a date input can be closed with Esc.");
const inputValue = "2022-12-12";
await helper.openPicker(
`data:text/html, <input type="date" value=${inputValue}>`
);
let pickerDoc = helper.panel.querySelector("#dateTimePopupFrame")
.contentDocument;
// Move focus from the today's date to the month-year toggle button:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 2 });
// Test a month spinner
await testKeyOnSpinners("KEY_Escape", pickerDoc);
// Test a year spinner
await testKeyOnSpinners("KEY_Escape", pickerDoc, 2);
await helper.tearDown();
});
/**
* Ensure the month-year panel of a datetime-local input can be closed with Escape key.
*/
add_task(async function test_monthyear_escape_datetime() {
info(
"Ensure the month-year panel of a datetime-local input can be closed with Esc."
);
const inputValue = "2022-12-12";
await helper.openPicker(
`data:text/html, <input type="date" value=${inputValue}>`
);
let pickerDoc = helper.panel.querySelector("#dateTimePopupFrame")
.contentDocument;
// Move focus from the today's date to the month-year toggle button:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 2 });
// Test a month spinner
await testKeyOnSpinners("KEY_Escape", pickerDoc);
// Test a year spinner
await testKeyOnSpinners("KEY_Escape", pickerDoc, 2);
await helper.tearDown();
});

47
toolkit/content/tests/browser/browser_datetime_datepicker_mousenav.js → toolkit/content/tests/browser/datetime/browser_datetime_datepicker_mousenav.js
Просмотреть файл

@ -4,53 +4,6 @@
"use strict";
const MONTH_YEAR = ".month-year",
DAYS_VIEW = ".days-view",
BTN_PREV_MONTH = ".prev",
BTN_NEXT_MONTH = ".next";
const DATE_FORMAT = new Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "long",
timeZone: "UTC",
}).format;
/**
* Helper function to find and return a gridcell element
* for a specific day of the month
*
* @param {Number} day: A day of the month to find in the month grid
*
* @return {HTMLElement} A gridcell that represents the needed day of the month
*/
function getDayEl(dayNum) {
const dayEls = Array.from(
helper.getElement(DAYS_VIEW).querySelectorAll("td")
);
return dayEls.find(el => el.textContent === dayNum.toString());
}
/**
* Helper function to find and return a gridcell element
* for a specific day of the month
*
* @return {Array[String]} TextContent of each gridcell within a calendar grid
*/
function getCalendarText() {
let calendarCells = [];
for (const tr of helper.getChildren(DAYS_VIEW)) {
for (const td of tr.children) {
calendarCells.push(td.textContent);
}
}
return calendarCells;
}
let helper = new DateTimeTestHelper();
registerCleanupFunction(() => {
helper.cleanup();
});
/**
* When the previous month button is clicked, calendar should display the dates
* for the previous month.

305
toolkit/content/tests/browser/datetime/browser_datetime_datepicker_prev_next_month.js Normal file
Просмотреть файл

@ -0,0 +1,305 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
/**
* When the Previous Month button is pressed, calendar should display
* the dates for the previous month.
*/
add_task(async function test_datepicker_prev_month_btn() {
const inputValue = "2016-12-15";
const prevMonth = "2016-11-01";
await helper.openPicker(
`data:text/html, <input type="date" value="${inputValue}">`
);
// Move focus from the selected date to the Previous Month button:
EventUtils.synthesizeKey("KEY_Tab");
EventUtils.synthesizeKey(" ");
// 2016-11-15:
const focusableDay = getDayEl(15);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(prevMonth))
);
Assert.deepEqual(
getCalendarText(),
[
"30",
"31",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
],
"The calendar is updated to show the previous month (2016-11)"
);
Assert.ok(
helper.getElement(BTN_PREV_MONTH).matches(":focus"),
"Focus stays on a Previous Month button after it's pressed"
);
Assert.equal(
focusableDay.textContent,
"15",
"The same day of the month is present within a calendar grid"
);
Assert.equal(
focusableDay,
helper.getElement(DAYS_VIEW).querySelector('[tabindex="0"]'),
"The same day of the month is focusable within a calendar grid"
);
// Move focus from the Previous Month button to the same day of the month (2016-11-15):
EventUtils.synthesizeKey("KEY_Tab", { repeat: 3 });
Assert.ok(
focusableDay.matches(":focus"),
"The same day of the previous month can be focused with a keyboard"
);
await helper.tearDown();
});
/**
* When the Next Month button is clicked, calendar should display the dates for
* the next month.
*/
add_task(async function test_datepicker_next_month_btn() {
const inputValue = "2016-12-15";
const nextMonth = "2017-01-01";
await helper.openPicker(
`data:text/html, <input type="date" value="${inputValue}">`
);
// Move focus from the selected date to the Next Month button:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 3 });
EventUtils.synthesizeKey(" ");
// 2017-01-15:
const focusableDay = getDayEl(15);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(nextMonth))
);
Assert.deepEqual(
getCalendarText(),
[
"25",
"26",
"27",
"28",
"29",
"30",
"31",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"31",
"1",
"2",
"3",
"4",
],
"The calendar is updated to show the next month (2017-01)."
);
Assert.ok(
helper.getElement(BTN_NEXT_MONTH).matches(":focus"),
"Focus stays on a Next Month button after it's pressed"
);
Assert.equal(
focusableDay.textContent,
"15",
"The same day of the month is present within a calendar grid"
);
Assert.equal(
focusableDay,
helper.getElement(DAYS_VIEW).querySelector('[tabindex="0"]'),
"The same day of the month is focusable within a calendar grid"
);
// Move focus from the Next Month button to the same day of the month (2017-01-15):
EventUtils.synthesizeKey("KEY_Tab");
Assert.ok(
focusableDay.matches(":focus"),
"The same day of the next month can be focused with a keyboard"
);
await helper.tearDown();
});
/**
* When the Previous Month button is pressed, calendar should display
* the dates for the previous month on RTL build (bug 1806823).
*/
add_task(async function test_datepicker_prev_month_btn_rtl() {
const inputValue = "2016-12-15";
const prevMonth = "2016-11-01";
await SpecialPowers.pushPrefEnv({ set: [["intl.l10n.pseudo", "bidi"]] });
await helper.openPicker(
`data:text/html, <input type="date" value="${inputValue}">`
);
// Move focus from the selected date to the Previous Month button:
EventUtils.synthesizeKey("KEY_Tab");
EventUtils.synthesizeKey(" ");
// 2016-11-15:
const focusableDay = getDayEl(15);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(prevMonth)),
"The calendar is updated to show the previous month (2016-11)"
);
Assert.ok(
helper.getElement(BTN_PREV_MONTH).matches(":focus"),
"Focus stays on a Previous Month button after it's pressed"
);
Assert.equal(
focusableDay.textContent,
"15",
"The same day of the month is present within a calendar grid"
);
Assert.equal(
focusableDay,
helper.getElement(DAYS_VIEW).querySelector('[tabindex="0"]'),
"The same day of the month is focusable within a calendar grid"
);
// Move focus from the Previous Month button to the same day of the month (2016-11-15):
EventUtils.synthesizeKey("KEY_Tab", { repeat: 3 });
Assert.ok(
focusableDay.matches(":focus"),
"The same day of the previous month can be focused with a keyboard"
);
await helper.tearDown();
await SpecialPowers.popPrefEnv();
});
/**
* When the Next Month button is clicked, calendar should display the dates for
* the next month on RTL build (bug 1806823).
*/
add_task(async function test_datepicker_next_month_btn_rtl() {
const inputValue = "2016-12-15";
const nextMonth = "2017-01-01";
await SpecialPowers.pushPrefEnv({ set: [["intl.l10n.pseudo", "bidi"]] });
await helper.openPicker(
`data:text/html, <input type="date" value="${inputValue}">`
);
// Move focus from the selected date to the Next Month button:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 3 });
EventUtils.synthesizeKey(" ");
// 2017-01-15:
const focusableDay = getDayEl(15);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(nextMonth)),
"The calendar is updated to show the next month (2017-01)."
);
Assert.ok(
helper.getElement(BTN_NEXT_MONTH).matches(":focus"),
"Focus stays on a Next Month button after it's pressed"
);
Assert.equal(
focusableDay.textContent,
"15",
"The same day of the month is present within a calendar grid"
);
Assert.equal(
focusableDay,
helper.getElement(DAYS_VIEW).querySelector('[tabindex="0"]'),
"The same day of the month is focusable within a calendar grid"
);
// Move focus from the Next Month button to the same day of the month (2017-01-15):
EventUtils.synthesizeKey("KEY_Tab");
Assert.ok(
focusableDay.matches(":focus"),
"The same day of the next month can be focused with a keyboard"
);
await helper.tearDown();
await SpecialPowers.popPrefEnv();
});

15
toolkit/content/tests/browser/browser_datetime_showPicker.js → toolkit/content/tests/browser/datetime/browser_datetime_showPicker.js
Просмотреть файл

@ -4,21 +4,6 @@
"use strict";
const MONTH_YEAR = ".month-year",
DAYS_VIEW = ".days-view",
BTN_PREV_MONTH = ".prev",
BTN_NEXT_MONTH = ".next";
const DATE_FORMAT_LOCAL = new Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "long",
}).format;
let helper = new DateTimeTestHelper();
registerCleanupFunction(() => {
helper.cleanup();
});
/**
* Test that date picker opens with showPicker.
*/

106
toolkit/content/tests/browser/browser_spinner.js → toolkit/content/tests/browser/datetime/browser_spinner.js
Просмотреть файл

@ -4,112 +4,6 @@
"use strict";
const MONTH_YEAR = ".month-year",
BTN_MONTH_YEAR = "#month-year-label",
SPINNER_MONTH = "#spinner-month",
SPINNER_YEAR = "#spinner-year";
const DATE_FORMAT = new Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "long",
timeZone: "UTC",
}).format;
/**
* Helper function to check if a DOM element has a specific attribute
*
* @param {DOMElement} el: DOM Element to be tested
* @param {String} attr: The name of the attribute to be tested
*/
function testAttribute(el, attr) {
Assert.ok(
el.hasAttribute(attr),
`The "${el}" element has a "${attr}" attribute`
);
}
/**
* Helper function to check for localization attributes of a DOM element
*
* @param {DOMElement} el: DOM Element to be tested
* @param {String} id: Value of the "data-l10n-id" attribute of the element
* @param {Object} args: Args provided by the l10n object of the element
*/
function testLocalization(el, id, args = null) {
const l10nAttrs = document.l10n.getAttributes(el);
Assert.deepEqual(
l10nAttrs,
{
id,
args,
},
`The "${id}" element is localizable`
);
}
/**
* Helper function to check for l10n of an element's attribute
*
* @param {DOMElement} el: DOM Element to be tested
* @param {String} attr: The name of the attribute to be tested
* @param {String} id: Value of the "data-l10n-id" attribute of the element
* @param {Object} args: Args provided by the l10n object of the element
*/
function testAttributeL10n(el, attr, id, args = null) {
testAttribute(el, attr);
testLocalization(el, id, args);
}
/**
* Helper function to check if a CSS property respects reduced motion mode
*
* @param {DOMElement} el: DOM Element to be tested
* @param {String} prop: The name of the CSS property to be tested
* @param {Object} valueNotReduced: Default value of the tested CSS property
* for "prefers-reduced-motion: no-preference"
* @param {String} valueReduced: Value of the tested CSS property
* for "prefers-reduced-motion: reduce"
*/
async function testReducedMotionProp(el, prop, valueNotReduced, valueReduced) {
info(`Test the panel's CSS ${prop} value depending on a reduced motion mode`);
// Set "prefers-reduced-motion" media to "no-preference"
await SpecialPowers.pushPrefEnv({
set: [["ui.prefersReducedMotion", 0]],
});
ok(
matchMedia("(prefers-reduced-motion: no-preference)").matches,
"The reduce motion mode is not active"
);
is(
getComputedStyle(el).getPropertyValue(prop),
valueNotReduced,
`Default ${prop} will be provided, when a reduce motion mode is not active`
);
// Set "prefers-reduced-motion" media to "reduce"
await SpecialPowers.pushPrefEnv({
set: [["ui.prefersReducedMotion", 1]],
});
ok(
matchMedia("(prefers-reduced-motion: reduce)").matches,
"The reduce motion mode is active"
);
is(
getComputedStyle(el).getPropertyValue(prop),
valueReduced,
`Reduced ${prop} will be provided, when a reduce motion mode is active`
);
}
let helper = new DateTimeTestHelper();
registerCleanupFunction(() => {
helper.cleanup();
});
/**
* Test that the Month spinner opens with an accessible markup
*/

16
toolkit/content/tests/browser/browser_spinner_keynav.js → toolkit/content/tests/browser/datetime/browser_spinner_keynav.js
Просмотреть файл

@ -4,18 +4,6 @@
"use strict";
const BTN_MONTH_YEAR = "#month-year-label",
SPINNER_MONTH = "#spinner-month",
SPINNER_YEAR = "#spinner-year",
MONTH_YEAR = ".month-year";
const DATE_FORMAT = new Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "long",
timeZone: "UTC",
}).format;
let helper = new DateTimeTestHelper();
add_setup(async function setPrefsReducedMotion() {
// Set "prefers-reduced-motion" media to "reduce"
// to avoid intermittent scroll failures (1803612, 1803687)
@ -26,10 +14,6 @@ add_setup(async function setPrefsReducedMotion() {
matchMedia("(prefers-reduced-motion: reduce)").matches,
"The reduce motion mode is active"
);
registerCleanupFunction(() => {
helper.cleanup();
});
});
/**

467
toolkit/content/tests/browser/datetime/head.js Normal file
Просмотреть файл

@ -0,0 +1,467 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
/**
* Helper class for testing datetime input picker widget
*/
class DateTimeTestHelper {
constructor() {
this.panel = gBrowser._getAndMaybeCreateDateTimePickerPanel();
this.panel.setAttribute("animate", false);
this.tab = null;
this.frame = null;
}
/**
* Opens a new tab with the URL of the test page, and make sure the picker is
* ready for testing.
*
* @param {String} pageUrl
* @param {bool} inFrame true if input is in the first child frame
* @param {String} openMethod "click" or "showPicker"
*/
async openPicker(pageUrl, inFrame, openMethod = "click") {
this.tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, pageUrl);
let bc = gBrowser.selectedBrowser;
if (inFrame) {
await SpecialPowers.spawn(bc, [], async function() {
const iframe = content.document.querySelector("iframe");
// Ensure the iframe's position is correct before doing any
// other operations
iframe.getBoundingClientRect();
});
bc = bc.browsingContext.children[0];
}
await SpecialPowers.spawn(bc, [], async function() {
// Ensure that screen coordinates are ok.
await SpecialPowers.contentTransformsReceived(content);
});
if (openMethod === "click") {
await SpecialPowers.spawn(bc, [], () => {
const input = content.document.querySelector("input");
const shadowRoot = SpecialPowers.wrap(input).openOrClosedShadowRoot;
shadowRoot.getElementById("calendar-button").click();
});
} else if (openMethod === "showPicker") {
await SpecialPowers.spawn(bc, [], function() {
content.document.notifyUserGestureActivation();
content.document.querySelector("input").showPicker();
});
}
this.frame = this.panel.querySelector("#dateTimePopupFrame");
await this.waitForPickerReady();
}
promisePickerClosed() {
return new Promise(resolve => {
this.panel.addEventListener("popuphidden", resolve, { once: true });
});
}
promiseChange(selector = "input") {
return SpecialPowers.spawn(
this.tab.linkedBrowser,
[selector],
async selector => {
let input = content.document.querySelector(selector);
await ContentTaskUtils.waitForEvent(input, "change", false, e => {
ok(
content.window.windowUtils.isHandlingUserInput,
"isHandlingUserInput should be true"
);
return true;
});
}
);
}
async waitForPickerReady() {
let readyPromise;
let loadPromise = new Promise(resolve => {
let listener = () => {
if (
this.frame.browsingContext.currentURI.spec !=
"chrome://global/content/datepicker.xhtml" &&
this.frame.browsingContext.currentURI.spec !=
"chrome://global/content/timepicker.xhtml"
) {
return;
}
this.frame.removeEventListener("load", listener, { capture: true });
// Add the PickerReady event listener directly inside the load event
// listener to avoid missing the event.
readyPromise = BrowserTestUtils.waitForEvent(
this.frame.contentDocument,
"PickerReady"
);
resolve();
};
this.frame.addEventListener("load", listener, { capture: true });
});
await loadPromise;
// Wait for picker elements to be ready
await readyPromise;
}
/**
* Find an element on the picker.
*
* @param {String} selector
* @return {DOMElement}
*/
getElement(selector) {
return this.frame.contentDocument.querySelector(selector);
}
/**
* Find the children of an element on the picker.
*
* @param {String} selector
* @return {Array<DOMElement>}
*/
getChildren(selector) {
return Array.from(this.getElement(selector).children);
}
/**
* Click on an element
*
* @param {DOMElement} element
*/
click(element) {
EventUtils.synthesizeMouseAtCenter(element, {}, this.frame.contentWindow);
}
/**
* Close the panel and the tab
*/
async tearDown() {
if (this.panel.state != "closed") {
let pickerClosePromise = this.promisePickerClosed();
this.panel.hidePopup();
await pickerClosePromise;
}
BrowserTestUtils.removeTab(this.tab);
this.tab = null;
}
/**
* Clean up after tests. Remove the frame to prevent leak.
*/
cleanup() {
this.frame.remove();
this.frame = null;
this.panel.removeAttribute("animate");
this.panel = null;
}
}
let helper = new DateTimeTestHelper();
registerCleanupFunction(() => {
helper.cleanup();
});
const BTN_MONTH_YEAR = "#month-year-label",
BTN_NEXT_MONTH = ".next",
BTN_PREV_MONTH = ".prev",
DAY_SELECTED = ".selection",
DAY_TODAY = ".today",
DAYS_VIEW = ".days-view",
DIALOG_PICKER = "#date-picker",
MONTH_YEAR = ".month-year",
MONTH_YEAR_NAV = ".month-year-nav",
MONTH_YEAR_VIEW = ".month-year-view",
SPINNER_MONTH = "#spinner-month",
SPINNER_YEAR = "#spinner-year",
WEEK_HEADER = ".week-header";
const DATE_FORMAT = new Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "long",
timeZone: "UTC",
}).format;
const DATE_FORMAT_LOCAL = new Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "long",
}).format;
/**
* Helper function to find and return a gridcell element
* for a specific day of the month
*
* @return {Array[String]} TextContent of each gridcell within a calendar grid
*/
function getCalendarText() {
let calendarCells = [];
for (const tr of helper.getChildren(DAYS_VIEW)) {
for (const td of tr.children) {
calendarCells.push(td.textContent);
}
}
return calendarCells;
}
function getCalendarClassList() {
let calendarCellsClasses = [];
for (const tr of helper.getChildren(DAYS_VIEW)) {
for (const td of tr.children) {
calendarCellsClasses.push(td.classList);
}
}
return calendarCellsClasses;
}
/**
* Helper function to find and return a gridcell element
* for a specific day of the month
*
* @param {Number} day: A day of the month to find in the month grid
*
* @return {HTMLElement} A gridcell that represents the needed day of the month
*/
function getDayEl(dayNum) {
const dayEls = Array.from(
helper.getElement(DAYS_VIEW).querySelectorAll("td")
);
return dayEls.find(el => el.textContent === dayNum.toString());
}
function mergeArrays(a, b) {
return a.map((classlist, index) => classlist.concat(b[index]));
}
/**
* Helper function to check if a DOM element has a specific attribute
*
* @param {DOMElement} el: DOM Element to be tested
* @param {String} attr: The name of the attribute to be tested
*/
function testAttribute(el, attr) {
Assert.ok(
el.hasAttribute(attr),
`The "${el}" element has a "${attr}" attribute`
);
}
/**
* Helper function to check for l10n of an element's attribute
*
* @param {DOMElement} el: DOM Element to be tested
* @param {String} attr: The name of the attribute to be tested
* @param {String} id: Value of the "data-l10n-id" attribute of the element
* @param {Object} args: Args provided by the l10n object of the element
*/
function testAttributeL10n(el, attr, id, args = null) {
testAttribute(el, attr);
testLocalization(el, id, args);
}
/**
* Helper function to check the value of a Calendar button's specific attribute
*
* @param {String} attr: The name of the attribute to be tested
* @param {String} val: Value that is expected to be assigned to the attribute.
* @param {Boolean} presenceOnly: If "true", test only the presence of the attribute
*/
async function testCalendarBtnAttribute(attr, val, presenceOnly = false) {
let browser = helper.tab.linkedBrowser;
await SpecialPowers.spawn(
browser,
[attr, val, presenceOnly],
(attr, val, presenceOnly) => {
const input = content.document.querySelector("input");
const shadowRoot = SpecialPowers.wrap(input).openOrClosedShadowRoot;
const calendarBtn = shadowRoot.getElementById("calendar-button");
if (presenceOnly) {
Assert.ok(
calendarBtn.hasAttribute(attr),
`Calendar button has ${attr} attribute`
);
} else {
Assert.equal(
calendarBtn.getAttribute(attr),
val,
`Calendar button has ${attr} attribute set to ${val}`
);
}
}
);
}
/**
* Helper function to test if a submission/dismissal keyboard shortcut works
* on a month or a year selection spinner
*
* @param {String} key: A keyboard Event.key that will be synthesized
* @param {Object} document: Reference to the content document
* of the #dateTimePopupFrame
* @param {Number} tabs: How many times "Tab" key should be pressed
* to move a keyboard focus to a needed spinner
* (1 for month/default and 2 for year)
*
* @description Starts with the month-year toggle button being focused
* on the date/datetime-local input's datepicker panel
*/
async function testKeyOnSpinners(key, document, tabs = 1) {
info(`Testing "${key}" key behavior`);
Assert.equal(
document.activeElement,
helper.getElement(BTN_MONTH_YEAR),
"The month-year toggle button is focused"
);
// Open the month-year selection panel with spinners:
await EventUtils.synthesizeKey(" ", {});
Assert.equal(
helper.getElement(BTN_MONTH_YEAR).getAttribute("aria-expanded"),
"true",
"Month-year button is expanded when the spinners are shown"
);
Assert.ok(
BrowserTestUtils.is_visible(helper.getElement(MONTH_YEAR_VIEW)),
"Month-year selection panel is visible"
);
// Move focus from the month-year toggle button to one of spinners:
await EventUtils.synthesizeKey("KEY_Tab", { repeat: tabs });
Assert.equal(
document.activeElement.getAttribute("role"),
"spinbutton",
"The spinner is focused"
);
// Confirm the spinbutton choice and close the month-year selection panel:
await EventUtils.synthesizeKey(key, {});
Assert.equal(
helper.getElement(BTN_MONTH_YEAR).getAttribute("aria-expanded"),
"false",
"Month-year button is collapsed when the spinners are hidden"
);
Assert.ok(
BrowserTestUtils.is_hidden(helper.getElement(MONTH_YEAR_VIEW)),
"Month-year selection panel is not visible"
);
Assert.equal(
document.activeElement,
helper.getElement(DAYS_VIEW).querySelector('[tabindex="0"]'),
"A focusable day within a calendar grid is focused"
);
// Return the focus to the month-year toggle button for future tests
// (passing a Previous button along the way):
await EventUtils.synthesizeKey("KEY_Tab", { repeat: 2 });
}
/**
* Helper function to check for localization attributes of a DOM element
*
* @param {DOMElement} el: DOM Element to be tested
* @param {String} id: Value of the "data-l10n-id" attribute of the element
* @param {Object} args: Args provided by the l10n object of the element
*/
function testLocalization(el, id, args = null) {
const l10nAttrs = document.l10n.getAttributes(el);
Assert.deepEqual(
l10nAttrs,
{
id,
args,
},
`The "${id}" element is localizable`
);
}
/**
* Helper function to check if a CSS property respects reduced motion mode
*
* @param {DOMElement} el: DOM Element to be tested
* @param {String} prop: The name of the CSS property to be tested
* @param {Object} valueNotReduced: Default value of the tested CSS property
* for "prefers-reduced-motion: no-preference"
* @param {String} valueReduced: Value of the tested CSS property
* for "prefers-reduced-motion: reduce"
*/
async function testReducedMotionProp(el, prop, valueNotReduced, valueReduced) {
info(`Test the panel's CSS ${prop} value depending on a reduced motion mode`);
// Set "prefers-reduced-motion" media to "no-preference"
await SpecialPowers.pushPrefEnv({
set: [["ui.prefersReducedMotion", 0]],
});
ok(
matchMedia("(prefers-reduced-motion: no-preference)").matches,
"The reduce motion mode is not active"
);
is(
getComputedStyle(el).getPropertyValue(prop),
valueNotReduced,
`Default ${prop} will be provided, when a reduce motion mode is not active`
);
// Set "prefers-reduced-motion" media to "reduce"
await SpecialPowers.pushPrefEnv({
set: [["ui.prefersReducedMotion", 1]],
});
ok(
matchMedia("(prefers-reduced-motion: reduce)").matches,
"The reduce motion mode is active"
);
is(
getComputedStyle(el).getPropertyValue(prop),
valueReduced,
`Reduced ${prop} will be provided, when a reduce motion mode is active`
);
}
async function verifyPickerPosition(browsingContext, inputId) {
let inputRect = await SpecialPowers.spawn(
browsingContext,
[inputId],
async function(inputIdChild) {
let rect = content.document
.getElementById(inputIdChild)
.getBoundingClientRect();
return {
left: content.mozInnerScreenX + rect.left,
bottom: content.mozInnerScreenY + rect.bottom,
};
}
);
function is_close(got, exp, msg) {
// on some platforms we see differences of a fraction of a pixel - so
// allow any difference of < 1 pixels as being OK.
Assert.ok(
Math.abs(got - exp) < 1,
msg + ": " + got + " should be equal(-ish) to " + exp
);
}
const marginLeft = parseFloat(getComputedStyle(helper.panel).marginLeft);
const marginTop = parseFloat(getComputedStyle(helper.panel).marginTop);
is_close(
helper.panel.screenX - marginLeft,
inputRect.left,
"datepicker x position"
);
is_close(
helper.panel.screenY - marginTop,
inputRect.bottom,
"datepicker y position"
);
}

159
toolkit/content/tests/browser/head.js
Просмотреть файл

@ -169,165 +169,6 @@ function leave_icon(icon) {
disable_non_test_mouse(false);
}
/**
* Helper class for testing datetime input picker widget
*/
class DateTimeTestHelper {
constructor() {
this.panel = gBrowser._getAndMaybeCreateDateTimePickerPanel();
this.panel.setAttribute("animate", false);
this.tab = null;
this.frame = null;
}
/**
* Opens a new tab with the URL of the test page, and make sure the picker is
* ready for testing.
*
* @param {String} pageUrl
* @param {bool} inFrame true if input is in the first child frame
* @param {String} openMethod "click" or "showPicker"
*/
async openPicker(pageUrl, inFrame, openMethod = "click") {
this.tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, pageUrl);
let bc = gBrowser.selectedBrowser;
if (inFrame) {
await SpecialPowers.spawn(bc, [], async function() {
const iframe = content.document.querySelector("iframe");
// Ensure the iframe's position is correct before doing any
// other operations
iframe.getBoundingClientRect();
});
bc = bc.browsingContext.children[0];
}
await SpecialPowers.spawn(bc, [], async function() {
// Ensure that screen coordinates are ok.
await SpecialPowers.contentTransformsReceived(content);
});
if (openMethod === "click") {
await SpecialPowers.spawn(bc, [], () => {
const input = content.document.querySelector("input");
const shadowRoot = SpecialPowers.wrap(input).openOrClosedShadowRoot;
shadowRoot.getElementById("calendar-button").click();
});
} else if (openMethod === "showPicker") {
await SpecialPowers.spawn(bc, [], function() {
content.document.notifyUserGestureActivation();
content.document.querySelector("input").showPicker();
});
}
this.frame = this.panel.querySelector("#dateTimePopupFrame");
await this.waitForPickerReady();
}
promisePickerClosed() {
return new Promise(resolve => {
this.panel.addEventListener("popuphidden", resolve, { once: true });
});
}
promiseChange(selector = "input") {
return SpecialPowers.spawn(
this.tab.linkedBrowser,
[selector],
async selector => {
let input = content.document.querySelector(selector);
await ContentTaskUtils.waitForEvent(input, "change", false, e => {
ok(
content.window.windowUtils.isHandlingUserInput,
"isHandlingUserInput should be true"
);
return true;
});
}
);
}
async waitForPickerReady() {
let readyPromise;
let loadPromise = new Promise(resolve => {
let listener = () => {
if (
this.frame.browsingContext.currentURI.spec !=
"chrome://global/content/datepicker.xhtml" &&
this.frame.browsingContext.currentURI.spec !=
"chrome://global/content/timepicker.xhtml"
) {
return;
}
this.frame.removeEventListener("load", listener, { capture: true });
// Add the PickerReady event listener directly inside the load event
// listener to avoid missing the event.
readyPromise = BrowserTestUtils.waitForEvent(
this.frame.contentDocument,
"PickerReady"
);
resolve();
};
this.frame.addEventListener("load", listener, { capture: true });
});
await loadPromise;
// Wait for picker elements to be ready
await readyPromise;
}
/**
* Find an element on the picker.
*
* @param {String} selector
* @return {DOMElement}
*/
getElement(selector) {
return this.frame.contentDocument.querySelector(selector);
}
/**
* Find the children of an element on the picker.
*
* @param {String} selector
* @return {Array<DOMElement>}
*/
getChildren(selector) {
return Array.from(this.getElement(selector).children);
}
/**
* Click on an element
*
* @param {DOMElement} element
*/
click(element) {
EventUtils.synthesizeMouseAtCenter(element, {}, this.frame.contentWindow);
}
/**
* Close the panel and the tab
*/
async tearDown() {
if (this.panel.state != "closed") {
let pickerClosePromise = this.promisePickerClosed();
this.panel.hidePopup();
await pickerClosePromise;
}
BrowserTestUtils.removeTab(this.tab);
this.tab = null;
}
/**
* Clean up after tests. Remove the frame to prevent leak.
*/
cleanup() {
this.frame.remove();
this.frame = null;
this.panel.removeAttribute("animate");
this.panel = null;
}
}
/**
* Used to listen events if you just need it once
*/

1
toolkit/content/tests/moz.build
Просмотреть файл

@ -8,6 +8,7 @@ XPCSHELL_TESTS_MANIFESTS += ["unit/xpcshell.ini"]
BROWSER_CHROME_MANIFESTS += [
"browser/browser.ini",
"browser/datetime/browser.ini",
]
MOCHITEST_CHROME_MANIFESTS += [