Merging upstream version 125.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

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) {