summaryrefslogtreecommitdiffstats
path: root/toolkit/content/tests
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:13:33 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:13:33 +0000
commit086c044dc34dfc0f74fbe41f4ecb402b2cd34884 (patch)
treea4f824bd33cb075dd5aa3eb5a0a94af221bbe83a /toolkit/content/tests
parentAdding debian version 124.0.1-1. (diff)
downloadfirefox-086c044dc34dfc0f74fbe41f4ecb402b2cd34884.tar.xz
firefox-086c044dc34dfc0f74fbe41f4ecb402b2cd34884.zip
Merging upstream version 125.0.1.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'toolkit/content/tests')
-rw-r--r--toolkit/content/tests/browser/browser_about_logging.js22
-rw-r--r--toolkit/content/tests/browser/browser_default_audio_filename.js2
-rw-r--r--toolkit/content/tests/browser/browser_default_image_filename.js2
-rw-r--r--toolkit/content/tests/browser/browser_default_image_filename_redirect.js2
-rw-r--r--toolkit/content/tests/browser/browser_saveImageURL.js2
-rw-r--r--toolkit/content/tests/browser/browser_save_folder_standalone_image.js2
-rw-r--r--toolkit/content/tests/browser/browser_save_resend_postdata.js2
-rw-r--r--toolkit/content/tests/browser/datetime/browser.toml5
-rw-r--r--toolkit/content/tests/browser/datetime/browser_datetime_change_event.js46
-rw-r--r--toolkit/content/tests/browser/datetime/head.js12
-rw-r--r--toolkit/content/tests/chrome/chrome.toml2
-rw-r--r--toolkit/content/tests/chrome/test_autocomplete_mac_caret.xhtml4
-rw-r--r--toolkit/content/tests/chrome/test_menulist_initial_selection.xhtml55
-rw-r--r--toolkit/content/tests/chrome/window_tooltip.xhtml6
-rw-r--r--toolkit/content/tests/mochitest/test_autocomplete_change_after_focus.html2
-rw-r--r--toolkit/content/tests/widgets/chrome.toml5
-rw-r--r--toolkit/content/tests/widgets/test_moz_button.html158
-rw-r--r--toolkit/content/tests/widgets/test_moz_page_nav.html306
-rw-r--r--toolkit/content/tests/widgets/test_videocontrols.html2
19 files changed, 603 insertions, 34 deletions
diff --git a/toolkit/content/tests/browser/browser_about_logging.js b/toolkit/content/tests/browser/browser_about_logging.js
index f458b36e0d..fdf8eab57b 100644
--- a/toolkit/content/tests/browser/browser_about_logging.js
+++ b/toolkit/content/tests/browser/browser_about_logging.js
@@ -110,15 +110,12 @@ add_task(async function testURLParameters() {
!$("#some-elements-unavailable").hidden,
"If modules are selected via URL, a warning should be displayed."
);
- var inPageSorted = $("#current-log-modules")
- .innerText.split(",")
- .sort()
- .join(",");
- var inURLSorted = modulesInURL.split(",").sort().join(",");
+ var inInputSorted = $("#log-modules").value.split(",").sort().join(",");
+ var modulesSorted = modulesInURL.split(",").sort().join(",");
Assert.equal(
- inPageSorted,
- inURLSorted,
- "When selecting modules via URL params, the same modules are reflected in the page."
+ modulesSorted,
+ inInputSorted,
+ "When selecting modules via URL params, the log modules aren't immediately set"
);
});
}
@@ -135,19 +132,16 @@ add_task(async function testURLParameters() {
!$("#some-elements-unavailable").hidden,
"If a preset is selected via URL, a warning should be displayed."
);
- var inPageSorted = $("#current-log-modules")
- .innerText.split(",")
- .sort()
- .join(",");
+ var inInputSorted = $("#log-modules").value.split(",").sort().join(",");
var presetSorted = content
.presets()
[presetInURL].modules.split(",")
.sort()
.join(",");
Assert.equal(
- inPageSorted,
+ inInputSorted,
presetSorted,
- "When selecting a preset via URL params, the correct log modules are reflected in the page."
+ "When selecting a preset via URL params, the correct log modules are reflected in the input."
);
});
}
diff --git a/toolkit/content/tests/browser/browser_default_audio_filename.js b/toolkit/content/tests/browser/browser_default_audio_filename.js
index c32dda6878..2732c0e434 100644
--- a/toolkit/content/tests/browser/browser_default_audio_filename.js
+++ b/toolkit/content/tests/browser/browser_default_audio_filename.js
@@ -2,7 +2,7 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
var MockFilePicker = SpecialPowers.MockFilePicker;
-MockFilePicker.init(window);
+MockFilePicker.init(window.browsingContext);
registerCleanupFunction(function () {
MockFilePicker.cleanup();
});
diff --git a/toolkit/content/tests/browser/browser_default_image_filename.js b/toolkit/content/tests/browser/browser_default_image_filename.js
index 9add704664..0f7847020c 100644
--- a/toolkit/content/tests/browser/browser_default_image_filename.js
+++ b/toolkit/content/tests/browser/browser_default_image_filename.js
@@ -2,7 +2,7 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
var MockFilePicker = SpecialPowers.MockFilePicker;
-MockFilePicker.init(window);
+MockFilePicker.init(window.browsingContext);
const DATA_IMAGE_GIF_URL =
"data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7";
registerCleanupFunction(function () {
diff --git a/toolkit/content/tests/browser/browser_default_image_filename_redirect.js b/toolkit/content/tests/browser/browser_default_image_filename_redirect.js
index a3fdd2d19e..82926b3d44 100644
--- a/toolkit/content/tests/browser/browser_default_image_filename_redirect.js
+++ b/toolkit/content/tests/browser/browser_default_image_filename_redirect.js
@@ -7,7 +7,7 @@
*/
let MockFilePicker = SpecialPowers.MockFilePicker;
-MockFilePicker.init(window);
+MockFilePicker.init(window.browsingContext);
add_task(async function () {
// This URL will redirect to doggy.png.
const URL_FIREBIRD =
diff --git a/toolkit/content/tests/browser/browser_saveImageURL.js b/toolkit/content/tests/browser/browser_saveImageURL.js
index c936b8ef84..0f7bf4b117 100644
--- a/toolkit/content/tests/browser/browser_saveImageURL.js
+++ b/toolkit/content/tests/browser/browser_saveImageURL.js
@@ -5,7 +5,7 @@ const IMAGE_PAGE =
var MockFilePicker = SpecialPowers.MockFilePicker;
-MockFilePicker.init(window);
+MockFilePicker.init(window.browsingContext);
MockFilePicker.returnValue = MockFilePicker.returnCancel;
registerCleanupFunction(function () {
diff --git a/toolkit/content/tests/browser/browser_save_folder_standalone_image.js b/toolkit/content/tests/browser/browser_save_folder_standalone_image.js
index ce45d04fdc..073e71a88b 100644
--- a/toolkit/content/tests/browser/browser_save_folder_standalone_image.js
+++ b/toolkit/content/tests/browser/browser_save_folder_standalone_image.js
@@ -43,7 +43,7 @@ async function clearHistoryAndWait() {
*/
let MockFilePicker = SpecialPowers.MockFilePicker;
-MockFilePicker.init(window);
+MockFilePicker.init(window.browsingContext);
add_task(async function () {
const IMAGE_URL =
diff --git a/toolkit/content/tests/browser/browser_save_resend_postdata.js b/toolkit/content/tests/browser/browser_save_resend_postdata.js
index 5eb1b1c904..3f3e729dab 100644
--- a/toolkit/content/tests/browser/browser_save_resend_postdata.js
+++ b/toolkit/content/tests/browser/browser_save_resend_postdata.js
@@ -3,7 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
var MockFilePicker = SpecialPowers.MockFilePicker;
-MockFilePicker.init(window);
+MockFilePicker.init(window.browsingContext);
/**
* Test for bug 471962 <https://bugzilla.mozilla.org/show_bug.cgi?id=471962>:
diff --git a/toolkit/content/tests/browser/datetime/browser.toml b/toolkit/content/tests/browser/datetime/browser.toml
index 6e8580ddc4..747014f386 100644
--- a/toolkit/content/tests/browser/datetime/browser.toml
+++ b/toolkit/content/tests/browser/datetime/browser.toml
@@ -8,8 +8,9 @@ skip-if = [
"os == 'linux' && fission && socketprocess_networking && !debug", # high frequency intermittent, Bug 1673140
]
+["browser_datetime_change_event.js"]
+
["browser_datetime_datepicker.js"]
-fail-if = ["a11y_checks"] # Bug 1854538 clicked td.outside may not be accessible
# This file was skipped before new tests were written based on it in Bug 1676068
skip-if = [
"tsan", # Frequently times out on TSan
@@ -46,7 +47,6 @@ skip-if = [
]
["browser_datetime_datepicker_min_max.js"]
-fail-if = ["a11y_checks"] # Bug 1854538 clicked TD may not be accessible
skip-if = [
"tsan", # Frequently times out on TSan
"os == 'win' && asan", # fails on asan
@@ -61,7 +61,6 @@ skip-if = [
]
["browser_datetime_datepicker_mousenav.js"]
-fail-if = ["a11y_checks"] # Bug 1854538 clicked td.weekend.outside may not be accessible
skip-if = [
"tsan", # Frequently times out on TSan
"os == 'win' && asan", # fails on asan
diff --git a/toolkit/content/tests/browser/datetime/browser_datetime_change_event.js b/toolkit/content/tests/browser/datetime/browser_datetime_change_event.js
new file mode 100644
index 0000000000..920653778a
--- /dev/null
+++ b/toolkit/content/tests/browser/datetime/browser_datetime_change_event.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+async function open_change_and_expect_one_change_event(page) {
+ await helper.openPicker(page);
+
+ let changeEventPromise = helper.promiseChange();
+
+ // Click the first item (top-left corner) of the calendar
+ helper.click(helper.getElement(DAYS_VIEW).children[0]);
+ await changeEventPromise;
+
+ await helper.closePicker();
+
+ let changeEvents = await SpecialPowers.spawn(
+ gBrowser.selectedBrowser,
+ [],
+ function () {
+ return content.wrappedJSObject.changeEventCount;
+ }
+ );
+ is(changeEvents, 1, "Should've got one change event");
+ await helper.tearDown();
+}
+
+add_task(async function test_change_event_simple() {
+ await open_change_and_expect_one_change_event(`data:text/html,
+ <!doctype html>
+ <script>
+ var changeEventCount = 0;
+ </script>
+ <input type="date" id="date" onchange="changeEventCount++">
+ `);
+});
+
+add_task(async function test_change_event_with_mutation() {
+ await open_change_and_expect_one_change_event(`data:text/html,
+ <!doctype html>
+ <script>
+ var changeEventCount = 0;
+ </script>
+ <input type="date" id="date" onchange="this.value = ''; changeEventCount++">
+ `);
+});
diff --git a/toolkit/content/tests/browser/datetime/head.js b/toolkit/content/tests/browser/datetime/head.js
index bbef72873c..46e2c78af5 100644
--- a/toolkit/content/tests/browser/datetime/head.js
+++ b/toolkit/content/tests/browser/datetime/head.js
@@ -113,15 +113,19 @@ class DateTimeTestHelper {
EventUtils.synthesizeMouseAtCenter(element, {}, this.frame.contentWindow);
}
- /**
- * Close the panel and the tab
- */
- async tearDown() {
+ async closePicker() {
if (this.panel.state != "closed") {
let pickerClosePromise = this.promisePickerClosed();
this.panel.hidePopup();
await pickerClosePromise;
}
+ }
+
+ /**
+ * Close the panel and the tab
+ */
+ async tearDown() {
+ await this.closePicker();
BrowserTestUtils.removeTab(this.tab);
this.tab = null;
}
diff --git a/toolkit/content/tests/chrome/chrome.toml b/toolkit/content/tests/chrome/chrome.toml
index 70fa12c4b6..3391a2923d 100644
--- a/toolkit/content/tests/chrome/chrome.toml
+++ b/toolkit/content/tests/chrome/chrome.toml
@@ -224,6 +224,8 @@ support-files = [
["test_menulist_in_popup.xhtml"]
+["test_menulist_initial_selection.xhtml"]
+
["test_menulist_keynav.xhtml"]
["test_menulist_null_value.xhtml"]
diff --git a/toolkit/content/tests/chrome/test_autocomplete_mac_caret.xhtml b/toolkit/content/tests/chrome/test_autocomplete_mac_caret.xhtml
index b49f8a1d5e..005c6ebffe 100644
--- a/toolkit/content/tests/chrome/test_autocomplete_mac_caret.xhtml
+++ b/toolkit/content/tests/chrome/test_autocomplete_mac_caret.xhtml
@@ -57,9 +57,9 @@ function checkKeyCaretTest(key, expectedStart, expectedEnd, result, testid)
keypressFired = true;
}
}
- SpecialPowers.addSystemEventListener(window, "keypress", listener, false);
+ SpecialPowers.wrap(window).addEventListener("keypress", listener, { mozSystemGroup: true });
synthesizeKey(key, {});
- SpecialPowers.removeSystemEventListener(window, "keypress", listener, false);
+ SpecialPowers.wrap(window).removeEventListener("keypress", listener, { mozSystemGroup: true });
is(keypressFired, result, `${testid} keypress event should${result ? "" : " not"} be fired`);
is(autocomplete.selectionStart, expectedStart, testid + " selectionStart");
is(autocomplete.selectionEnd, expectedEnd, testid + " selectionEnd");
diff --git a/toolkit/content/tests/chrome/test_menulist_initial_selection.xhtml b/toolkit/content/tests/chrome/test_menulist_initial_selection.xhtml
new file mode 100644
index 0000000000..19e9beae67
--- /dev/null
+++ b/toolkit/content/tests/chrome/test_menulist_initial_selection.xhtml
@@ -0,0 +1,55 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
+
+<window title="Menulist Initial Selection Test"
+ onload="setTimeout(runTest, 0)"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+ <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+ <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+<script>
+<![CDATA[
+SimpleTest.waitForExplicitFinish();
+
+async function runTest() {
+ const panel = document.querySelector("panel");
+ const menulist1 = document.getElementById("menulist1");
+ const menulist2 = document.getElementById("menulist2");
+
+ const panelShown = new Promise(r => panel.addEventListener("popupshown", r, { once: true }));
+ info("opening panel");
+ panel.openPopup(null, { x: 0, y: 0 });
+ await panelShown;
+ info("panel opened");
+
+ is(menulist1.value, "1", "menulist1 should have the first menuitem's value");
+ is(menulist1.label, "One", "menulist1 should have the first menuitem's label");
+
+ is(menulist2.value, "", "menulist2 should not be selected to the first item's value");
+ is(menulist2.label, "None", "menulist2 should not be selected to the first item's value");
+
+ SimpleTest.finish();
+}
+
+]]>
+</script>
+
+<panel>
+ <menulist id="menulist1" value="" label="None">
+ <menupopup id="menulistpopup">
+ <menuitem value="1" label="One"/>
+ <menuitem value="2" label="Two"/>
+ <menuitem value="3" label="Three"/>
+ </menupopup>
+ </menulist>
+ <menulist id="menulist2" value="" label="None" noinitialselection="true">
+ <menupopup id="menulistpopup">
+ <menuitem value="1" label="One"/>
+ <menuitem value="2" label="Two"/>
+ <menuitem value="3" label="Three"/>
+ </menupopup>
+ </menulist>
+</panel>
+
+</window>
diff --git a/toolkit/content/tests/chrome/window_tooltip.xhtml b/toolkit/content/tests/chrome/window_tooltip.xhtml
index 6a573f0bd9..b78075de45 100644
--- a/toolkit/content/tests/chrome/window_tooltip.xhtml
+++ b/toolkit/content/tests/chrome/window_tooltip.xhtml
@@ -15,12 +15,12 @@
<box id="parent" tooltiptext="Box Tooltip" style="margin: 10px">
<button id="withtext" label="Tooltip Text" tooltiptext="Button Tooltip"
- style="-moz-appearance: none; padding: 0;"/>
- <button id="without" label="No Tooltip" style="-moz-appearance: none; padding: 0;"/>
+ style="appearance: none; padding: 0;"/>
+ <button id="without" label="No Tooltip" style="appearance: none; padding: 0;"/>
<!-- remove the native theme and borders to avoid some platform
specific sizing differences -->
<button id="withtooltip" label="Tooltip Element" tooltip="thetooltip"
- class="plain" style="-moz-appearance: none; padding: 0;"/>
+ class="plain" style="appearance: none; padding: 0;"/>
</box>
<script class="testbody" type="application/javascript">
diff --git a/toolkit/content/tests/mochitest/test_autocomplete_change_after_focus.html b/toolkit/content/tests/mochitest/test_autocomplete_change_after_focus.html
index fe4a6ee67c..271cf50a79 100644
--- a/toolkit/content/tests/mochitest/test_autocomplete_change_after_focus.html
+++ b/toolkit/content/tests/mochitest/test_autocomplete_change_after_focus.html
@@ -77,7 +77,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=998893
resolve();
}
- SpecialPowers.addSystemEventListener(field, "keypress", handleEnter, true);
+ SpecialPowers.wrap(field).addEventListener("keypress", handleEnter, { capture: true, mozSystemGroup: true });
});
field.focus();
diff --git a/toolkit/content/tests/widgets/chrome.toml b/toolkit/content/tests/widgets/chrome.toml
index af2c778947..18fe0d153a 100644
--- a/toolkit/content/tests/widgets/chrome.toml
+++ b/toolkit/content/tests/widgets/chrome.toml
@@ -22,6 +22,8 @@ skip-if = ["os == 'linux'"] # Bug 1116215
["test_menubar.xhtml"]
skip-if = ["os == 'mac'"]
+["test_moz_button.html"]
+
["test_moz_button_group.html"]
["test_moz_card.html"]
@@ -32,6 +34,8 @@ skip-if = ["os == 'mac'"]
["test_moz_message_bar.html"]
+["test_moz_page_nav.html"]
+
["test_moz_support_link.html"]
["test_moz_toggle.html"]
@@ -65,4 +69,5 @@ skip-if = [
"os == 'android'",
"os == 'linux' && debug", # Bug 1765783
]
+
["test_videocontrols_onclickplay.html"]
diff --git a/toolkit/content/tests/widgets/test_moz_button.html b/toolkit/content/tests/widgets/test_moz_button.html
new file mode 100644
index 0000000000..473b2d1a1c
--- /dev/null
+++ b/toolkit/content/tests/widgets/test_moz_button.html
@@ -0,0 +1,158 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>MozButton Tests</title>
+ <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+ <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+ <script type="module" src="chrome://global/content/elements/moz-button.mjs"></script>
+ <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+ <link rel="stylesheet" href="chrome://global/skin/design-system/tokens-brand.css">
+ <link rel="stylesheet" href="chrome://global/skin/design-system/text-and-typography.css">
+<style>
+.four::part(button),
+.five::part(button),
+.six::part(button) {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='context-fill' fill-opacity='context-fill-opacity'%3E%3Cpath d='M3 7 1.5 7l-.5.5L1 9l.5.5 1.5 0 .5-.5 0-1.5z'/%3E%3Cpath d='m8.75 7-1.5 0-.5.5 0 1.5.5.5 1.5 0 .5-.5 0-1.5z'/%3E%3Cpath d='M14.5 7 13 7l-.5.5 0 1.5.5.5 1.5 0L15 9l0-1.5z'/%3E%3C/svg%3E");
+}
+</style>
+ <script>
+ function normalizeColor(val, computedStyles) {
+ if (val.includes("currentColor")) {
+ val = val.replaceAll("currentColor", computedStyles.color);
+ }
+ if (val.startsWith("light-dark")) {
+ let [, light, dark] = val.match(/light-dark\(([^,]+),\s*([^)]+)\)/);
+ if (light && dark) {
+ val = window.matchMedia("(prefers-color-scheme: dark)").matches ? dark : light;
+ }
+ }
+ try {
+ let { r, g, b, a } = InspectorUtils.colorToRGBA(val);
+ return `rgba(${r}, ${g}, ${b}, ${a})`;
+ } catch (e) {
+ info(val);
+ throw e;
+ }
+ }
+
+ function assertButtonPropertiesMatch(el, propertyToCssVar) {
+ let elStyles = getComputedStyle(el.buttonEl);
+ for (let [property, cssVar] of Object.entries(propertyToCssVar)) {
+ let propertyVal = elStyles[property];
+ let cssVarVal = cssVar.startsWith("--") ? elStyles.getPropertyValue(cssVar) : cssVar;
+ if (propertyVal.startsWith("rgb") || propertyVal.startsWith("#") || propertyVal.startsWith("color")) {
+ propertyVal = normalizeColor(propertyVal, elStyles);
+ cssVarVal = normalizeColor(cssVarVal, elStyles);
+ }
+ info(`${propertyVal} == ${cssVarVal}`);
+ is(propertyVal, cssVarVal, `${property} should be ${cssVar}`);
+ }
+ }
+
+ add_task(async function testButtonTypes() {
+ let [...buttons] = document.querySelectorAll("moz-button");
+ let [one, two, three, four, five, six] = buttons;
+
+ await Promise.all(buttons.map(btn => btn.updateComplete));
+
+ is(one.textContent, "Test button", "Text is set");
+ is(two.buttonEl.textContent.trim(), "Test button", "Text is set");
+ is(three.textContent, "Test button", "Text is set");
+
+ assertButtonPropertiesMatch(one, {
+ backgroundColor: "--button-background-color",
+ color: "--button-text-color",
+ height: "--button-min-height",
+ });
+ assertButtonPropertiesMatch(two, {
+ backgroundColor: "--button-background-color",
+ color: "--button-text-color",
+ height: "--button-min-height",
+ });
+ assertButtonPropertiesMatch(three, {
+ backgroundColor: "--button-background-color-primary",
+ color: "--button-text-color-primary",
+ height: "--button-min-height",
+ });
+
+ assertButtonPropertiesMatch(four, {
+ width: "--button-size-icon",
+ height: "--button-size-icon",
+ backgroundColor: "--button-background-color",
+ fill: "--button-text-color",
+ });
+ assertButtonPropertiesMatch(five, {
+ width: "--button-size-icon",
+ height: "--button-size-icon",
+ backgroundColor: "transparent",
+ fill: "--button-text-color",
+ });
+ assertButtonPropertiesMatch(six, {
+ width: "--button-size-icon",
+ height: "--button-size-icon",
+ backgroundColor: "transparent",
+ fill: "--button-text-color",
+ });
+
+ buttons.forEach(btn => (btn.size = "small"));
+
+ await Promise.all(buttons.map(btn => btn.updateComplete));
+
+ assertButtonPropertiesMatch(one, {
+ height: "--button-min-height-small",
+ });
+ assertButtonPropertiesMatch(two, {
+ height: "--button-min-height-small",
+ });
+ assertButtonPropertiesMatch(three, {
+ height: "--button-min-height-small",
+ });
+ assertButtonPropertiesMatch(four, {
+ width: "--button-size-icon-small",
+ height: "--button-size-icon-small",
+ });
+ assertButtonPropertiesMatch(five, {
+ width: "--button-size-icon-small",
+ height: "--button-size-icon-small",
+ });
+ assertButtonPropertiesMatch(six, {
+ width: "--button-size-icon-small",
+ height: "--button-size-icon-small",
+ });
+ });
+
+ add_task(async function testA11yAttributes() {
+ let button = document.querySelector("moz-button");
+
+ async function testProperty(propName, jsPropName = propName) {
+ let propValue = `${propName} value`;
+ ok(!button.buttonEl.hasAttribute(propName), `No ${propName} on inner button`);
+ button.setAttribute(propName, propValue);
+
+ await button.updateComplete;
+
+ ok(!button.hasAttribute(propName), `moz-button ${propName} cleared`);
+ is(button.buttonEl.getAttribute(propName), propValue, `${propName} added to inner button`);
+
+ button[jsPropName] = null;
+ await button.updateComplete;
+
+ ok(!button.buttonEl.hasAttribute(propName), `${propName} cleared by setting property`);
+ }
+
+ await testProperty("title");
+ await testProperty("aria-label", "ariaLabel");
+ });
+
+ </script>
+</head>
+<body>
+ <moz-button class="one">Test button</moz-button>
+ <moz-button class="two" label="Test button"></moz-button>
+ <moz-button class="three" type="primary">Test button</moz-button>
+ <moz-button class="four" type="icon"></moz-button>
+ <moz-button class="five" type="icon ghost"></moz-button>
+ <moz-button class="six" type="ghost icon"></moz-button>
+</body>
+</html>
diff --git a/toolkit/content/tests/widgets/test_moz_page_nav.html b/toolkit/content/tests/widgets/test_moz_page_nav.html
new file mode 100644
index 0000000000..604df7c024
--- /dev/null
+++ b/toolkit/content/tests/widgets/test_moz_page_nav.html
@@ -0,0 +1,306 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>MozPageNav Tests</title>
+ <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+ <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+ <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+ <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
+ <script type="module" src="chrome://global/content/elements/moz-page-nav.mjs"></script>
+</head>
+<style>
+body {
+ display: flex;
+}
+#navigation {
+ width: var(--page-nav-width);
+}
+</style>
+<body>
+ <p id="display"></p>
+ <div id="content">
+ <div id="navigation">
+ <moz-page-nav heading="Heading">
+ <moz-page-nav-button view="view-one" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
+ <span class="view-name">View 1</span>
+ </moz-page-nav-button>
+ <moz-page-nav-button view="view-two" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
+ <span class="view-name">View 2</span>
+ </moz-page-nav-button>
+ <moz-page-nav-button view="view-three" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
+ <span class="view-name">View 3</span>
+ </moz-page-nav-button>
+ <moz-page-nav-button view="view-four" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
+ <span class="view-name">View 4</span>
+ </moz-page-nav-button>
+ <moz-page-nav-button view="view-five" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
+ <span class="view-name">View 5</span>
+ </moz-page-nav-button>
+ </moz-page-nav>
+ </div>
+ </div>
+<pre id="test"></pre>
+<script>
+ Services.scriptloader.loadSubScript(
+ "chrome://browser/content/utilityOverlay.js",
+ this
+ );
+ const { BrowserTestUtils } = ChromeUtils.importESModule(
+ "resource://testing-common/BrowserTestUtils.sys.mjs"
+ );
+
+const mozPageNav = document.querySelector("moz-page-nav");
+
+function isActiveElement(expectedActiveEl) {
+ return expectedActiveEl.getRootNode().activeElement == expectedActiveEl;
+ }
+
+ /**
+ * Tests that the first page nav button is selected by default
+ */
+ add_task(async function test_first_item_selected_by_default() {
+ is(
+ mozPageNav.pageNavButtons.length,
+ 5,
+ "Five page nav buttons are in the navigation"
+ );
+
+ ok(
+ mozPageNav.pageNavButtons[0].view === mozPageNav.currentView,
+ "The first page nav button is selected by default"
+ )
+ });
+
+ /**
+ * Tests that views are selected when clicked
+ */
+ add_task(async function test_select_view() {
+ let gBrowser = BrowserWindowTracker.getTopWindow().top.gBrowser;
+ let secondViewButton = mozPageNav.pageNavButtons[1];
+ let viewChanged = BrowserTestUtils.waitForEvent(
+ gBrowser,
+ "change-view"
+ );
+
+ secondViewButton.buttonEl.click();
+ await viewChanged;
+
+ ok(
+ secondViewButton.view === mozPageNav.currentView,
+ "The second page nav button is selected"
+ )
+
+ let thirdPageNavButton = mozPageNav.pageNavButtons[2];
+ viewChanged = BrowserTestUtils.waitForEvent(
+ gBrowser,
+ "change-view"
+ );
+
+ thirdPageNavButton.buttonEl.click();
+ await viewChanged;
+
+ ok(
+ thirdPageNavButton.view === mozPageNav.currentView,
+ "The third page nav button is selected"
+ )
+
+ let firstPageNavButton = mozPageNav.pageNavButtons[0];
+ viewChanged = BrowserTestUtils.waitForEvent(
+ gBrowser,
+ "change-view"
+ );
+
+ firstPageNavButton.buttonEl.click();
+ await viewChanged;
+
+ ok(
+ firstPageNavButton.view === mozPageNav.currentView,
+ "The first page nav button is selected"
+ )
+ });
+
+ /**
+ * Tests that categories are keyboard-navigable
+ */
+ add_task(async function test_keyboard_navigation() {
+ const arrowDown = async () => {
+ info("Arrow down");
+ synthesizeKey("KEY_ArrowDown", {});
+ await mozPageNav.updateComplete;
+ };
+ const arrowUp = async () => {
+ info("Arrow up");
+ synthesizeKey("KEY_ArrowUp", {});
+ await mozPageNav.updateComplete;
+ };
+ const arrowLeft = async () => {
+ info("Arrow left");
+ synthesizeKey("KEY_ArrowLeft", {});
+ await mozPageNav.updateComplete;
+ };
+ const arrowRight = async () => {
+ info("Arrow right");
+ synthesizeKey("KEY_ArrowRight", {});
+ await mozPageNav.updateComplete;
+ };
+
+ // Setting this pref allows the test to run as expected with a keyboard on MacOS
+ await SpecialPowers.pushPrefEnv({
+ set: [["accessibility.tabfocus", 7]],
+ });
+
+ let firstPageNavButton = mozPageNav.pageNavButtons[0];
+ let secondPageNavButton = mozPageNav.pageNavButtons[1];
+ let thirdPageNavButton = mozPageNav.pageNavButtons[2];
+ let fourthPageNavButton = mozPageNav.pageNavButtons[3];
+ let fifthPageNavButton = mozPageNav.pageNavButtons[4];
+
+ is(
+ firstPageNavButton.view,
+ mozPageNav.currentView,
+ "The first page nav button is selected"
+ )
+ firstPageNavButton.buttonEl.focus();
+ await arrowDown();
+ ok(
+ isActiveElement(secondPageNavButton),
+ "The second page nav button is the active element after first arrow down"
+ );
+ is(
+ secondPageNavButton.view,
+ mozPageNav.currentView,
+ "The second page nav button is selected"
+ )
+ await arrowDown();
+ is(
+ thirdPageNavButton.view,
+ mozPageNav.currentView,
+ "The third page nav button is selected"
+ )
+ await arrowDown();
+ is(
+ fourthPageNavButton.view,
+ mozPageNav.currentView,
+ "The fourth page nav button is selected"
+ )
+ await arrowDown();
+ is(
+ fifthPageNavButton.view,
+ mozPageNav.currentView,
+ "The fifth page nav button is selected"
+ )
+ await arrowDown();
+ is(
+ fifthPageNavButton.view,
+ mozPageNav.currentView,
+ "The fifth page nav button is still selected"
+ )
+ await arrowUp();
+ is(
+ fourthPageNavButton.view,
+ mozPageNav.currentView,
+ "The fourth page nav button is selected"
+ )
+ await arrowUp();
+ is(
+ thirdPageNavButton.view,
+ mozPageNav.currentView,
+ "The third page nav button is selected"
+ )
+ await arrowUp();
+ is(
+ secondPageNavButton.view,
+ mozPageNav.currentView,
+ "The second page nav button is selected"
+ )
+ await arrowUp();
+ is(
+ firstPageNavButton.view,
+ mozPageNav.currentView,
+ "The first page nav button is selected"
+ )
+ await arrowUp();
+ is(
+ firstPageNavButton.view,
+ mozPageNav.currentView,
+ "The first page nav button is still selected"
+ )
+
+ // Test navigation with arrow left/right keys
+ is(
+ firstPageNavButton.view,
+ mozPageNav.currentView,
+ "The first page nav button is selected"
+ )
+ firstPageNavButton.buttonEl.focus();
+ await arrowRight();
+ ok(
+ isActiveElement(secondPageNavButton),
+ "The second page nav button is the active element after first arrow right"
+ );
+ is(
+ secondPageNavButton.view,
+ mozPageNav.currentView,
+ "The second page nav button is selected"
+ )
+ await arrowRight();
+ is(
+ thirdPageNavButton.view,
+ mozPageNav.currentView,
+ "The third page nav button is selected"
+ )
+ await arrowRight();
+ is(
+ fourthPageNavButton.view,
+ mozPageNav.currentView,
+ "The fourth page nav button is selected"
+ )
+ await arrowRight();
+ is(
+ fifthPageNavButton.view,
+ mozPageNav.currentView,
+ "The fifth page nav button is selected"
+ )
+ await arrowRight();
+ is(
+ fifthPageNavButton.view,
+ mozPageNav.currentView,
+ "The fifth page nav button is still selected"
+ )
+ await arrowLeft();
+ is(
+ fourthPageNavButton.view,
+ mozPageNav.currentView,
+ "The fourth page nav button is selected"
+ )
+ await arrowLeft();
+ is(
+ thirdPageNavButton.view,
+ mozPageNav.currentView,
+ "The third page nav button is selected"
+ )
+ await arrowLeft();
+ is(
+ secondPageNavButton.view,
+ mozPageNav.currentView,
+ "The second page nav button is selected"
+ )
+ await arrowLeft();
+ is(
+ firstPageNavButton.view,
+ mozPageNav.currentView,
+ "The first page nav button is selected"
+ )
+ await arrowLeft();
+ is(
+ firstPageNavButton.view,
+ mozPageNav.currentView,
+ "The first page nav button is still selected"
+ )
+
+ await SpecialPowers.popPrefEnv();
+ });
+</script>
+</body>
+</html>
diff --git a/toolkit/content/tests/widgets/test_videocontrols.html b/toolkit/content/tests/widgets/test_videocontrols.html
index 32cd23df6a..076b4350fd 100644
--- a/toolkit/content/tests/widgets/test_videocontrols.html
+++ b/toolkit/content/tests/widgets/test_videocontrols.html
@@ -67,7 +67,7 @@ let expectingEventPromise;
async function isMuteButtonMuted() {
const muteButton = getElementWithinVideo(video, "muteButton");
await new Promise(SimpleTest.executeSoon);
- return muteButton.getAttribute("muted") === "true";
+ return muteButton.hasAttribute("muted");
}
async function isVolumeSliderShowingCorrectVolume(expectedVolume) {