summaryrefslogtreecommitdiffstats
path: root/toolkit/content/tests
diff options
context:
space:
mode:
Diffstat (limited to 'toolkit/content/tests')
-rw-r--r--toolkit/content/tests/browser/browser_bug1693577.js4
-rw-r--r--toolkit/content/tests/chrome/chrome.toml1
-rw-r--r--toolkit/content/tests/chrome/file_editor_with_autocomplete.js4
-rw-r--r--toolkit/content/tests/chrome/test_autocomplete_with_composition_on_input.html2
-rw-r--r--toolkit/content/tests/chrome/test_editor_for_input_with_autocomplete.html2
-rw-r--r--toolkit/content/tests/chrome/window_largemenu.xhtml15
-rw-r--r--toolkit/content/tests/widgets/mochitest.toml2
-rw-r--r--toolkit/content/tests/widgets/test_moz_button.html132
-rw-r--r--toolkit/content/tests/widgets/test_moz_button_group.html144
-rw-r--r--toolkit/content/tests/widgets/test_moz_message_bar.html28
-rw-r--r--toolkit/content/tests/widgets/test_moz_page_nav.html61
-rw-r--r--toolkit/content/tests/widgets/test_videocontrols_src_change.html56
-rw-r--r--toolkit/content/tests/widgets/test_videocontrols_video_noaudio.html2
13 files changed, 366 insertions, 87 deletions
diff --git a/toolkit/content/tests/browser/browser_bug1693577.js b/toolkit/content/tests/browser/browser_bug1693577.js
index 712749dc89..b85b9f13de 100644
--- a/toolkit/content/tests/browser/browser_bug1693577.js
+++ b/toolkit/content/tests/browser/browser_bug1693577.js
@@ -12,7 +12,7 @@ add_task(async function test_search_input_popupshowing() {
let sidebar = document.getElementById("sidebar");
let loadPromise = BrowserTestUtils.waitForEvent(sidebar, "load", true);
- SidebarUI.toggle("viewBookmarksSidebar");
+ SidebarController.toggle("viewBookmarksSidebar");
await loadPromise;
let inputField =
@@ -45,5 +45,5 @@ add_task(async function test_search_input_popupshowing() {
popup.hidePopup();
await popuphidden;
- SidebarUI.toggle("viewBookmarksSidebar");
+ SidebarController.toggle("viewBookmarksSidebar");
});
diff --git a/toolkit/content/tests/chrome/chrome.toml b/toolkit/content/tests/chrome/chrome.toml
index 986822ac48..e037f45ecf 100644
--- a/toolkit/content/tests/chrome/chrome.toml
+++ b/toolkit/content/tests/chrome/chrome.toml
@@ -51,7 +51,6 @@ support-files = [
]
prefs = [
"gfx.font_rendering.fallback.async=false",
- "widget.non-native-theme.enabled=false",
]
["test_about_networking.html"]
diff --git a/toolkit/content/tests/chrome/file_editor_with_autocomplete.js b/toolkit/content/tests/chrome/file_editor_with_autocomplete.js
index acf2c9e9df..0068440785 100644
--- a/toolkit/content/tests/chrome/file_editor_with_autocomplete.js
+++ b/toolkit/content/tests/chrome/file_editor_with_autocomplete.js
@@ -84,6 +84,10 @@ nsDoTestsForEditorWithAutoComplete.prototype = {
Ci.nsIAutoCompleteController.STATUS_COMPLETE_NO_MATCH
);
});
+ if (test.popup) {
+ await waitForCondition(() => this._controller.input.popupOpen);
+ }
+
this._target.removeEventListener("beforeinput", onBeforeInput);
this._target.removeEventListener("input", onInput);
this._checkResult(test, beforeInputEvents, inputEvents);
diff --git a/toolkit/content/tests/chrome/test_autocomplete_with_composition_on_input.html b/toolkit/content/tests/chrome/test_autocomplete_with_composition_on_input.html
index fbcd44e830..fd484a93d1 100644
--- a/toolkit/content/tests/chrome/test_autocomplete_with_composition_on_input.html
+++ b/toolkit/content/tests/chrome/test_autocomplete_with_composition_on_input.html
@@ -27,7 +27,6 @@ function runTests() {
.QueryInterface(Ci.nsIAutoCompleteInput);
var originalFormFillTimeout = formFillController.timeout;
- SpecialPowers.attachFormFillControllerTo(window);
var target = document.getElementById("input");
// Register a word to the form history.
@@ -53,7 +52,6 @@ function runTests() {
function() { return target.value; },
function() {
formFillController.timeout = originalFormFillTimeout;
- SpecialPowers.detachFormFillControllerFrom(window);
SimpleTest.finish();
});
});
diff --git a/toolkit/content/tests/chrome/test_editor_for_input_with_autocomplete.html b/toolkit/content/tests/chrome/test_editor_for_input_with_autocomplete.html
index 91f0f159b4..f2786d47be 100644
--- a/toolkit/content/tests/chrome/test_editor_for_input_with_autocomplete.html
+++ b/toolkit/content/tests/chrome/test_editor_for_input_with_autocomplete.html
@@ -51,7 +51,6 @@ async function runTests() {
.QueryInterface(Ci.nsIAutoCompleteInput);
var originalFormFillTimeout = formFillController.timeout;
- SpecialPowers.attachFormFillControllerTo(window);
var target = document.getElementById("input");
// Register a word to the form history.
@@ -71,7 +70,6 @@ async function runTests() {
await tests2.run();
formFillController.timeout = originalFormFillTimeout;
- SpecialPowers.detachFormFillControllerFrom(window);
SimpleTest.finish();
}
diff --git a/toolkit/content/tests/chrome/window_largemenu.xhtml b/toolkit/content/tests/chrome/window_largemenu.xhtml
index 8e6b6718b4..413ab248bc 100644
--- a/toolkit/content/tests/chrome/window_largemenu.xhtml
+++ b/toolkit/content/tests/chrome/window_largemenu.xhtml
@@ -336,14 +336,18 @@ function testPopupMovement()
var marginTop = parseFloat(getComputedStyle(popup).marginTop);
var panelIsTop = SpecialPowers.getBoolPref("ui.panel.default_level_parent");
- var overlapOSChrome = !platformIsMac() && (!isPanelTest || panelIsTop);
+ var overlapOSChrome = canOverlapOSChrome() && (!isPanelTest || panelIsTop);
popup.moveTo(1, 1);
[screenX, screenY] = getScreenXY(popup);
var expectedx = 1, expectedy = 1;
if (!overlapOSChrome) {
- if (screen.availLeft >= 1) expectedx = screen.availLeft;
- if (screen.availTop >= 1) expectedy = screen.availTop;
+ if (screen.availLeft >= 1) {
+ expectedx = screen.availLeft + marginLeft;
+ }
+ if (screen.availTop >= 1) {
+ expectedy = screen.availTop + marginTop;
+ }
}
is(screenX, expectedx, gTests[gTestIndex] + " (1, 1) x");
is(screenY, expectedy, gTests[gTestIndex] + " (1, 1) y");
@@ -398,6 +402,11 @@ function platformIsMac()
return navigator.platform.indexOf("Mac") > -1;
}
+function canOverlapOSChrome()
+{
+ return navigator.platform.startsWith("Win");
+}
+
window.arguments[0].SimpleTest.waitForFocus(runTests, window);
]]>
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) {