diff options
Diffstat (limited to 'toolkit/content/tests')
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) { |