summaryrefslogtreecommitdiffstats
path: root/toolkit/content/tests/widgets
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/widgets
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/widgets')
-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
4 files changed, 470 insertions, 1 deletions
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) {