diff options
Diffstat (limited to 'toolkit/content/tests/widgets')
| -rw-r--r-- | toolkit/content/tests/widgets/chrome.toml | 5 | ||||
| -rw-r--r-- | toolkit/content/tests/widgets/test_moz_button.html | 158 | ||||
| -rw-r--r-- | toolkit/content/tests/widgets/test_moz_page_nav.html | 306 | ||||
| -rw-r--r-- | toolkit/content/tests/widgets/test_videocontrols.html | 2 |
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) { |