diff options
Diffstat (limited to 'toolkit/content/tests/widgets')
7 files changed, 348 insertions, 77 deletions
diff --git a/toolkit/content/tests/widgets/mochitest.toml b/toolkit/content/tests/widgets/mochitest.toml index efd86f1208..f5bc0505bf 100644 --- a/toolkit/content/tests/widgets/mochitest.toml +++ b/toolkit/content/tests/widgets/mochitest.toml @@ -96,6 +96,8 @@ skip-if = [ ["test_videocontrols_size.html"] +["test_videocontrols_src_change.html"] + ["test_videocontrols_standalone.html"] skip-if = [ "os == 'linux'", # bug 1804621 diff --git a/toolkit/content/tests/widgets/test_moz_button.html b/toolkit/content/tests/widgets/test_moz_button.html index a849ccc956..0e64f939dc 100644 --- a/toolkit/content/tests/widgets/test_moz_button.html +++ b/toolkit/content/tests/widgets/test_moz_button.html @@ -17,6 +17,33 @@ } </style> <script> + const { AddonManager } = ChromeUtils.importESModule( + "resource://gre/modules/AddonManager.sys.mjs" + ); + // Always run tests with the light theme for consistency and to avoid from false + // test passes arising from the fact that --icon-color and --button-text-color + // have the same value in the dark theme. + add_setup(async function () { + // Developer Edition enables the wrong theme by default. Make sure + // the ordinary default theme is enabled. + let theme = await AddonManager.getAddonByID("default-theme@mozilla.org"); + await theme.enable(); + + await SpecialPowers.pushPrefEnv({ + set: [ + ["ui.systemUsesDarkTheme", 0], + ], + }); + // Triggers a refresh to ensure new theme applied. + await new Promise(resolve => requestAnimationFrame(resolve)); + ok(window.matchMedia("(prefers-color-scheme: light)").matches, "Light theme is active."); + + // Move mouse to the bottom of the test frame to prevent hover on buttons. + let mouseTrap = document.getElementById("mouse-trap"); + await synthesizeMouseAtCenter(mouseTrap, { type: "mousemove" }); + ok(mouseTrap.matches(":hover"), "The mouse trap is hovered"); + }); + function normalizeColor(val, computedStyles) { if (val.includes("currentColor")) { val = val.replaceAll("currentColor", computedStyles.color); @@ -37,7 +64,7 @@ } function assertButtonPropertiesMatch(el, propertyToCssVar) { - let elStyles = getComputedStyle(el.buttonEl); + let elStyles = el.buttonEl ? getComputedStyle(el.buttonEl) : getComputedStyle(el); for (let [property, cssVar] of Object.entries(propertyToCssVar)) { let propertyVal = elStyles[property]; let cssVarVal = cssVar.startsWith("--") ? elStyles.getPropertyValue(cssVar) : cssVar; @@ -52,13 +79,14 @@ add_task(async function testButtonTypes() { let [...buttons] = document.querySelectorAll("moz-button"); - let [one, two, three, four, five, six] = buttons; + let [one, two, three, four, five, six, seven] = 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"); + is(seven.buttonEl.textContent.trim(), "Test button", "Text is set"); assertButtonPropertiesMatch(one, { backgroundColor: "--button-background-color", @@ -79,19 +107,24 @@ width: "--button-size-icon", height: "--button-size-icon", backgroundColor: "--button-background-color", - fill: "--icon-color", + fill: "--button-text-color", }); assertButtonPropertiesMatch(five, { width: "--button-size-icon", height: "--button-size-icon", backgroundColor: "transparent", - fill: "--icon-color", + fill: "--button-text-color", }); assertButtonPropertiesMatch(six, { width: "--button-size-icon", height: "--button-size-icon", backgroundColor: "transparent", - fill: "--icon-color", + fill: "--button-text-color", + }); + assertButtonPropertiesMatch(seven, { + backgroundColor: "--button-background-color", + color: "--button-text-color", + height: "--button-min-height", }); buttons.forEach(btn => (btn.size = "small")); @@ -119,6 +152,9 @@ width: "--button-size-icon-small", height: "--button-size-icon-small", }); + assertButtonPropertiesMatch(seven, { + height: "--button-min-height-small", + }); }); add_task(async function testA11yAttributes() { @@ -144,14 +180,88 @@ await testProperty("aria-label", "ariaLabel"); }); + add_task(async function testIconButtons() { + let buttons = ["four", "five", "six", "seven", "eight", "nine"].map( + className => document.querySelector(`.${className}`) + ); + let [four, five, six, seven, eight, nine] = buttons; + await Promise.all(buttons.map(btn => btn.updateComplete)); + + function verifyBackgroundIcon(button) { + let img = button.shadowRoot.querySelector("img"); + ok(!img, "button does not use an img element to display an icon"); + assertButtonPropertiesMatch(button, { + fill: "--button-text-color", + backgroundSize: "--icon-size-default", + }); + } + + function verifyImageIcon({ button }) { + let img = button.shadowRoot.querySelector("img"); + ok(img, "button uses an inner img element to display an icon"); + is(img.src, "chrome://global/skin/icons/edit.svg", "button displays the expected icon"); + assertButtonPropertiesMatch(img, { + fill: "--button-text-color", + width: "--icon-size-default", + height: "--icon-size-default", + }); + } + + verifyBackgroundIcon(four); + verifyBackgroundIcon(five); + verifyBackgroundIcon(six); + + verifyImageIcon({ button: seven }); + verifyImageIcon({ button: eight }); + verifyImageIcon({ button: nine }); + + nine.textContent = "With text"; + // Ensure we've painted before checking styles + await new Promise(resolve => requestAnimationFrame(resolve)); + verifyImageIcon({ button: nine, isLabelled: true }); + + nine.textContent = ""; + // Ensure we've painted before checking styles + await new Promise(resolve => requestAnimationFrame(resolve)); + verifyImageIcon({ button: nine, isLabelled: false }); + }); </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> + <style> + .wrapper { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 64px; + } + </style> + <div class="wrapper"> + <div> + <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> + <moz-button + class="seven" + label="Test button" + iconsrc="chrome://global/skin/icons/edit.svg" + ></moz-button> + <moz-button + class="eight" + iconsrc="chrome://global/skin/icons/edit.svg" + ></moz-button> + <!-- Used to verify that empty space doesn't get treated as a label --> + <moz-button + class="nine" + type="ghost" + iconsrc="chrome://global/skin/icons/edit.svg" + > </moz-button> + </div> + <button id="mouse-trap">Mouse goes here</button> + </div> </body> </html> diff --git a/toolkit/content/tests/widgets/test_moz_button_group.html b/toolkit/content/tests/widgets/test_moz_button_group.html index 92fd7776fa..471d554599 100644 --- a/toolkit/content/tests/widgets/test_moz_button_group.html +++ b/toolkit/content/tests/widgets/test_moz_button_group.html @@ -10,6 +10,7 @@ solution for token variables for the new widgets --> <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"> <script type="module" src="chrome://global/content/elements/moz-button-group.mjs"></script> + <script type="module" src="chrome://global/content/elements/moz-button.mjs"></script> </head> <body> <p id="display"></p> @@ -20,6 +21,7 @@ </div> <!-- This is here to ensure the stylesheet is loaded. It gets removed in setup. --> <moz-button-group></moz-button-group> + <moz-button>Test</moz-button> <pre id="test"> </pre> @@ -74,54 +76,80 @@ add_setup(async function setup() { ({ html, render} = await import("chrome://global/content/vendor/lit.all.mjs")); document.querySelector("moz-button-group").remove(); + document.querySelector("moz-button").remove(); }); add_task(async function testButtonOrderingSlot() { - render( + let markupOptions = [ html` <moz-button-group> <button slot="primary" id="primary-button">Primary</button> <button id="secondary-button">Secondary</button> </moz-button-group> `, - renderArea - ); + html` + <moz-button-group> + <moz-button slot="primary" id="primary-button">Primary</moz-button> + <moz-button id="secondary-button">Secondary</moz-button> + </moz-button-group> + `, + ]; + for (let markup of markupOptions) { + render(markup, renderArea); - let buttonGroup = document.querySelector("moz-button-group"); - let primaryButton = document.getElementById("primary-button"); - let secondaryButton = document.getElementById("secondary-button"); + let buttonGroup = document.querySelector("moz-button-group"); + let primaryButton = document.getElementById("primary-button"); + let secondaryButton = document.getElementById("secondary-button"); - buttonGroup.platform = "win"; - await buttonGroup.updateComplete; - await checkButtons(primaryButton, secondaryButton); - buttonGroup.platform = "macosx"; - await buttonGroup.updateComplete; - await checkButtons(secondaryButton, primaryButton); + buttonGroup.platform = "win"; + await buttonGroup.updateComplete; + await checkButtons(primaryButton, secondaryButton); + + buttonGroup.platform = "macosx"; + await buttonGroup.updateComplete; + await checkButtons(secondaryButton, primaryButton); + } }); add_task(async function testPrimaryButtonAutoSlotting() { - render( + let markupOptions = [ html` <moz-button-group> <button class="primary">Primary</button> <button class="secondary">Secondary</button> </moz-button-group> `, - renderArea - ); - - let buttonGroup = document.querySelector("moz-button-group"); - let primaryButton = buttonGroup.querySelector(".primary"); - let secondaryButton = buttonGroup.querySelector(".secondary"); - buttonGroup.platform = "win"; - await buttonGroup.updateComplete; - is(primaryButton.slot, "primary", "primary button was auto-slotted") - await checkButtons(primaryButton, secondaryButton); - - buttonGroup.platform = "macosx"; - await buttonGroup.updateComplete; - await checkButtons(secondaryButton, primaryButton); + html` + <moz-button-group> + <moz-button type="primary">Primary</moz-button> + <moz-button type="default">Secondary</moz-button> + </moz-button-group> + `, + html` + <moz-button-group> + <moz-button type="destructive">Delete</moz-button> + <moz-button type="default">Secondary</moz-button> + </moz-button-group> + `, + ]; + for (let markup of markupOptions) { + render(markup, renderArea); + + let buttonGroup = document.querySelector("moz-button-group"); + let primaryButton = buttonGroup.querySelector( + ".primary, [type=primary], [type=destructive]" + ); + let secondaryButton = buttonGroup.querySelector(".secondary, [type=default]"); + buttonGroup.platform = "win"; + await buttonGroup.updateComplete; + is(primaryButton.slot, "primary", "primary button was auto-slotted") + await checkButtons(primaryButton, secondaryButton); + + buttonGroup.platform = "macosx"; + await buttonGroup.updateComplete; + await checkButtons(secondaryButton, primaryButton); + } }); add_task(async function testSubmitButtonAutoSlotting() { @@ -197,38 +225,48 @@ }); add_task(async function testInitialButtonLightDomReordering() { - const renderPlatform = platform => render( - html` + let markupOptions = [ + platform => html` <moz-button-group .platform=${platform}> <button class="primary">First</button> <button class="secondary">Secondary</button> <button default>Default</button> </moz-button-group> `, - renderArea - ); - - renderPlatform("win"); - let buttonGroup = document.querySelector("moz-button-group"); - await buttonGroup.updateComplete; - let primaryButton = buttonGroup.querySelector(".primary"); - let defaultButton = buttonGroup.querySelector("[default]"); - let secondaryButton = buttonGroup.querySelector(".secondary"); - - is(primaryButton.slot, "primary", "primary button was auto-slotted"); - is(defaultButton.slot, "primary", "default button was auto-slotted"); - await checkButtons(primaryButton, defaultButton, secondaryButton); - - renderPlatform("macosx"); - buttonGroup = document.querySelector("moz-button-group"); - await buttonGroup.updateComplete; - primaryButton = buttonGroup.querySelector(".primary"); - defaultButton = buttonGroup.querySelector("[default]"); - secondaryButton = buttonGroup.querySelector(".secondary"); - - is(primaryButton.slot, "primary", "primary button was auto-slotted"); - is(defaultButton.slot, "primary", "default button was auto-slotted"); - await checkButtons(secondaryButton, primaryButton, defaultButton); + platform => html` + <moz-button-group .platform=${platform}> + <moz-button type="primary" class="primary">First</moz-button> + <moz-button class="secondary">Secondary</moz-button> + <moz-button type="primary" default>Default</moz-button> + </moz-button-group> + `, + ]; + + for (let markup of markupOptions) { + const renderPlatform = platform => render(markup(platform), renderArea); + + renderPlatform("win"); + let buttonGroup = document.querySelector("moz-button-group"); + await buttonGroup.updateComplete; + let primaryButton = buttonGroup.querySelector(".primary"); + let defaultButton = buttonGroup.querySelector("[default]"); + let secondaryButton = buttonGroup.querySelector(".secondary"); + + is(primaryButton.slot, "primary", "primary button was auto-slotted"); + is(defaultButton.slot, "primary", "default button was auto-slotted"); + await checkButtons(primaryButton, defaultButton, secondaryButton); + + renderPlatform("macosx"); + buttonGroup = document.querySelector("moz-button-group"); + await buttonGroup.updateComplete; + primaryButton = buttonGroup.querySelector(".primary"); + defaultButton = buttonGroup.querySelector("[default]"); + secondaryButton = buttonGroup.querySelector(".secondary"); + + is(primaryButton.slot, "primary", "primary button was auto-slotted"); + is(defaultButton.slot, "primary", "default button was auto-slotted"); + await checkButtons(secondaryButton, primaryButton, defaultButton); + } }); </script> </body> diff --git a/toolkit/content/tests/widgets/test_moz_message_bar.html b/toolkit/content/tests/widgets/test_moz_message_bar.html index 7ee6825ef3..9b48982962 100644 --- a/toolkit/content/tests/widgets/test_moz_message_bar.html +++ b/toolkit/content/tests/widgets/test_moz_message_bar.html @@ -1,27 +1,30 @@ <!DOCTYPE HTML> <html> + <head> <meta charset="utf-8"> <title>MozMessageBar 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://mochikit/content/tests/SimpleTest/test.css" /> <script type="module" src="chrome://global/content/elements/moz-message-bar.mjs"></script> </head> + <body> -<p id="display"></p> -<div id="content"> - <moz-message-bar id="infoMessage" heading="Heading" message="Test message"></moz-message-bar> - <moz-message-bar id="infoMessage2" dismissable message="Test message"></moz-message-bar> - <moz-message-bar id="warningMessage" type="warning" message="Test message"></moz-message-bar> - <moz-message-bar id="successMessage" type="success" message="Test message"></moz-message-bar> - <moz-message-bar id="errorMessage" type="error" message="Test message"></moz-message-bar> -</div> -<pre id="test"> + <p id="display"></p> + <div id="content"> + <moz-message-bar id="infoMessage" heading="Heading" message="Test message"></moz-message-bar> + <moz-message-bar id="infoMessage2" dismissable message="Test message"></moz-message-bar> + <moz-message-bar id="warningMessage" type="warning" message="Test message"></moz-message-bar> + <moz-message-bar id="successMessage" type="success" message="Test message"></moz-message-bar> + <moz-message-bar id="errorMessage" type="error" message="Test message"></moz-message-bar> + </div> + <pre id="test"> <script class="testbody" type="application/javascript"> add_task(async function test_component_declaration() { const mozMessageBar = document.querySelector("#infoMessage"); ok(mozMessageBar, "moz-message-bar component is rendered."); + is(mozMessageBar.getAttribute("role"), "alert", "moz-message-bar component is marked up as alert."); const icon = mozMessageBar.shadowRoot.querySelector(".icon"); const iconUrl = icon.src; @@ -48,11 +51,11 @@ add_task(async function test_close_button() { const notDismissableComponent = document.querySelector("#infoMessage"); - let closeButton = notDismissableComponent.closeButtonEl; + let closeButton = notDismissableComponent.closeButton; ok(!closeButton, "Close button doesn't show when the message bar isn't dismissable."); let dismissableComponent = document.querySelector("#infoMessage2"); - closeButton = dismissableComponent.closeButtonEl; + closeButton = dismissableComponent.closeButton; ok(closeButton, "Close button is shown when the message bar is dismissable."); closeButton.click(); @@ -89,4 +92,5 @@ </script> </pre> </body> + </html> diff --git a/toolkit/content/tests/widgets/test_moz_page_nav.html b/toolkit/content/tests/widgets/test_moz_page_nav.html index 604df7c024..e03bfa22e2 100644 --- a/toolkit/content/tests/widgets/test_moz_page_nav.html +++ b/toolkit/content/tests/widgets/test_moz_page_nav.html @@ -37,6 +37,12 @@ body { <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-button iconSrc="chrome://mozapps/skin/extensions/category-discover.svg" support-page="test" slot="secondary-nav"> + <span class="view-name">Support Link</span> + </moz-page-nav-button> + <moz-page-nav-button iconSrc="chrome://mozapps/skin/extensions/category-discover.svg" href="https://www.example.com" slot="secondary-nav"> + <span class="view-name">External Link</span> + </moz-page-nav-button> </moz-page-nav> </div> </div> @@ -121,9 +127,45 @@ function isActiveElement(expectedActiveEl) { }); /** + * Tests that footer support links have the expected attributes + */ + add_task(async function test_support_link() { + const supportLinkRootPath = "https://support.mozilla.org/"; + let supportLink = mozPageNav.secondaryNavButtons[0]; + ok(supportLink.linkEl, "The secondary nav button contains the link element."); + ok( + supportLink.linkEl.hasAttribute("is") && supportLink.linkEl.getAttribute("is") === "moz-support-link", + "The support link has the is=moz-support-link attribute." + ); + ok( + supportLink.linkEl.hasAttribute("href") && supportLink.linkEl.getAttribute("href") === `${supportLinkRootPath}test`, + "The support link has the expected href atrribute." + ); + }); + + /** + * Tests that footer external links have the expected attributes + */ + add_task(async function test_external_link() { + const externalLinkPath = "https://www.example.com"; + let externalLink = mozPageNav.secondaryNavButtons[1]; + ok(externalLink.linkEl, "The secondary nav button contains the link element."); + ok(!externalLink.linkEl.hasAttribute("is"), "The external link doesn't have the is=moz-support-link attribute."); + ok( + externalLink.linkEl.hasAttribute("href") && externalLink.linkEl.getAttribute("href") === externalLinkPath, + "The external link has the expected href atrribute." + ); + }); + + /** * Tests that categories are keyboard-navigable */ add_task(async function test_keyboard_navigation() { + const tab = async shiftKey => { + info(`Tab${shiftKey ? " + Shift" : ""}`); + synthesizeKey("KEY_Tab", { shiftKey }); + await mozPageNav.updateComplete; + }; const arrowDown = async () => { info("Arrow down"); synthesizeKey("KEY_ArrowDown", {}); @@ -155,6 +197,8 @@ function isActiveElement(expectedActiveEl) { let thirdPageNavButton = mozPageNav.pageNavButtons[2]; let fourthPageNavButton = mozPageNav.pageNavButtons[3]; let fifthPageNavButton = mozPageNav.pageNavButtons[4]; + let supportLink = mozPageNav.secondaryNavButtons[0]; + let externalLink = mozPageNav.secondaryNavButtons[1]; is( firstPageNavButton.view, @@ -196,6 +240,23 @@ function isActiveElement(expectedActiveEl) { mozPageNav.currentView, "The fifth page nav button is still selected" ) + await tab(); + ok( + isActiveElement(supportLink.linkEl), + "The support link is selected" + ) + await tab(); + ok( + isActiveElement(externalLink.linkEl), + "The external link is selected" + ) + await tab(true); + await tab(true); + is( + fifthPageNavButton.view, + mozPageNav.currentView, + "The fifth page nav button is selected" + ) await arrowUp(); is( fourthPageNavButton.view, diff --git a/toolkit/content/tests/widgets/test_videocontrols_src_change.html b/toolkit/content/tests/widgets/test_videocontrols_src_change.html new file mode 100644 index 0000000000..535b9483cd --- /dev/null +++ b/toolkit/content/tests/widgets/test_videocontrols_src_change.html @@ -0,0 +1,56 @@ +<!DOCTYPE HTML> +<!-- Any copyright is dedicated to the Public Domain. + - https://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + +<head> + <title>Video controls test</title> + <script src="/tests/SimpleTest/SimpleTest.js"></script> + <script src="/tests/SimpleTest/EventUtils.js"></script> + <script type="text/javascript" src="head.js"></script> + <link rel="stylesheet" href="/tests/SimpleTest/test.css" /> +</head> + +<body> + <p id="display"></p> + + <div id="content"> + <video width="320" height="240" id="video" controls></video> + </div> + + <div id="host"></div> + + <pre id="test"> +<script class="testbody"> + add_task(async function test_src_change() { + const video = document.getElementById("video"); + + function changeMediaSource(src) { + let loaded = new Promise((resolve) => video.addEventListener("loadeddata", resolve, { once: true })); + video.src = src; + return loaded; + } + + const muteButton = getElementWithinVideo(video, "muteButton"); + + await changeMediaSource("video.webm"); + + ok(muteButton.hasAttribute("noAudio"), "noAudio attribute is present when the video has no audio track"); + ok(muteButton.disabled, "Mute button is disabled when the video has no audio track"); + + await changeMediaSource("seek_with_sound.webm"); + + ok(!muteButton.hasAttribute("noAudio"), "noAudio attribute is not present when the video has an audio track"); + ok(!muteButton.disabled, "Mute button is enabled when the video has an audio track"); + + await changeMediaSource("video.webm"); + + ok(muteButton.hasAttribute("noAudio"), "noAudio attribute is present when the video has no audio track") + ok(muteButton.disabled, "Mute button is disabled when the video has no audio track"); + }); + +</script> +</pre> +</body> + +</html> diff --git a/toolkit/content/tests/widgets/test_videocontrols_video_noaudio.html b/toolkit/content/tests/widgets/test_videocontrols_video_noaudio.html index 99d5bdad01..be28ed24c9 100644 --- a/toolkit/content/tests/widgets/test_videocontrols_video_noaudio.html +++ b/toolkit/content/tests/widgets/test_videocontrols_video_noaudio.html @@ -29,7 +29,7 @@ }); add_task(async function mute_button_icon() { - is(muteButton.getAttribute("noAudio"), "true"); + ok(muteButton.hasAttribute("noAudio"), "Mute button should have noAudio attribute"); ok(muteButton.hasAttribute("disabled"), "Mute button should be disabled"); if (volumeStack) { |