Merging upstream version 125.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 01:13:33 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 01:13:33 +0000
commit: 086c044dc34dfc0f74fbe41f4ecb402b2cd34884 (patch)
tree: a4f824bd33cb075dd5aa3eb5a0a94af221bbe83a /toolkit/content/tests/widgets
parent: Adding debian version 124.0.1-1. (diff)
download: firefox-086c044dc34dfc0f74fbe41f4ecb402b2cd34884.tar.xz
firefox-086c044dc34dfc0f74fbe41f4ecb402b2cd34884.zip
4 files changed, 470 insertions, 1 deletions
diff --git a/toolkit/content/tests/widgets/chrome.toml b/toolkit/content/tests/widgets/chrome.toml
index af2c778947..18fe0d153a 100644
--- a/toolkit/content/tests/widgets/chrome.toml
+++ b/toolkit/content/tests/widgets/chrome.toml
@@ -22,6 +22,8 @@ skip-if = ["os == 'linux'"] # Bug 1116215
 ["test_menubar.xhtml"]
 skip-if = ["os == 'mac'"]
 
+["test_moz_button.html"]
+
 ["test_moz_button_group.html"]
 
 ["test_moz_card.html"]
@@ -32,6 +34,8 @@ skip-if = ["os == 'mac'"]
 
 ["test_moz_message_bar.html"]
 
+["test_moz_page_nav.html"]
+
 ["test_moz_support_link.html"]
 
 ["test_moz_toggle.html"]
@@ -65,4 +69,5 @@ skip-if = [
   "os == 'android'",
   "os == 'linux' && debug", # Bug 1765783
 ]
+
 ["test_videocontrols_onclickplay.html"]
diff --git a/toolkit/content/tests/widgets/test_moz_button.html b/toolkit/content/tests/widgets/test_moz_button.html
new file mode 100644
index 0000000000..473b2d1a1c
--- /dev/null
+++ b/toolkit/content/tests/widgets/test_moz_button.html
@@ -0,0 +1,158 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>MozButton Tests</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+  <script type="module" src="chrome://global/content/elements/moz-button.mjs"></script>
+  <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+  <link rel="stylesheet" href="chrome://global/skin/design-system/tokens-brand.css">
+  <link rel="stylesheet" href="chrome://global/skin/design-system/text-and-typography.css">
+<style>
+.four::part(button),
+.five::part(button),
+.six::part(button) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='context-fill' fill-opacity='context-fill-opacity'%3E%3Cpath d='M3 7 1.5 7l-.5.5L1 9l.5.5 1.5 0 .5-.5 0-1.5z'/%3E%3Cpath d='m8.75 7-1.5 0-.5.5 0 1.5.5.5 1.5 0 .5-.5 0-1.5z'/%3E%3Cpath d='M14.5 7 13 7l-.5.5 0 1.5.5.5 1.5 0L15 9l0-1.5z'/%3E%3C/svg%3E");
+}
+</style>
+  <script>
+    function normalizeColor(val, computedStyles) {
+      if (val.includes("currentColor")) {
+        val = val.replaceAll("currentColor", computedStyles.color);
+      }
+      if (val.startsWith("light-dark")) {
+        let [, light, dark] = val.match(/light-dark\(([^,]+),\s*([^)]+)\)/);
+        if (light && dark) {
+          val = window.matchMedia("(prefers-color-scheme: dark)").matches ? dark : light;
+        }
+      }
+      try {
+        let { r, g, b, a } = InspectorUtils.colorToRGBA(val);
+        return `rgba(${r}, ${g}, ${b}, ${a})`;
+      } catch (e) {
+        info(val);
+        throw e;
+      }
+    }
+
+    function assertButtonPropertiesMatch(el, propertyToCssVar) {
+      let elStyles = getComputedStyle(el.buttonEl);
+      for (let [property, cssVar] of Object.entries(propertyToCssVar)) {
+        let propertyVal = elStyles[property];
+        let cssVarVal = cssVar.startsWith("--") ? elStyles.getPropertyValue(cssVar) : cssVar;
+        if (propertyVal.startsWith("rgb") || propertyVal.startsWith("#") || propertyVal.startsWith("color")) {
+          propertyVal = normalizeColor(propertyVal, elStyles);
+          cssVarVal = normalizeColor(cssVarVal, elStyles);
+        }
+        info(`${propertyVal} == ${cssVarVal}`);
+        is(propertyVal, cssVarVal, `${property} should be ${cssVar}`);
+      }
+    }
+
+    add_task(async function testButtonTypes() {
+      let [...buttons] = document.querySelectorAll("moz-button");
+      let [one, two, three, four, five, six] = buttons;
+
+      await Promise.all(buttons.map(btn => btn.updateComplete));
+
+      is(one.textContent, "Test button", "Text is set");
+      is(two.buttonEl.textContent.trim(), "Test button", "Text is set");
+      is(three.textContent, "Test button", "Text is set");
+
+      assertButtonPropertiesMatch(one, {
+        backgroundColor: "--button-background-color",
+        color: "--button-text-color",
+        height: "--button-min-height",
+      });
+      assertButtonPropertiesMatch(two, {
+        backgroundColor: "--button-background-color",
+        color: "--button-text-color",
+        height: "--button-min-height",
+      });
+      assertButtonPropertiesMatch(three, {
+        backgroundColor: "--button-background-color-primary",
+        color: "--button-text-color-primary",
+        height: "--button-min-height",
+      });
+
+      assertButtonPropertiesMatch(four, {
+        width: "--button-size-icon",
+        height: "--button-size-icon",
+        backgroundColor: "--button-background-color",
+        fill: "--button-text-color",
+      });
+      assertButtonPropertiesMatch(five, {
+        width: "--button-size-icon",
+        height: "--button-size-icon",
+        backgroundColor: "transparent",
+        fill: "--button-text-color",
+      });
+      assertButtonPropertiesMatch(six, {
+        width: "--button-size-icon",
+        height: "--button-size-icon",
+        backgroundColor: "transparent",
+        fill: "--button-text-color",
+      });
+
+      buttons.forEach(btn => (btn.size = "small"));
+
+      await Promise.all(buttons.map(btn => btn.updateComplete));
+
+      assertButtonPropertiesMatch(one, {
+        height: "--button-min-height-small",
+      });
+      assertButtonPropertiesMatch(two, {
+        height: "--button-min-height-small",
+      });
+      assertButtonPropertiesMatch(three, {
+        height: "--button-min-height-small",
+      });
+      assertButtonPropertiesMatch(four, {
+        width: "--button-size-icon-small",
+        height: "--button-size-icon-small",
+      });
+      assertButtonPropertiesMatch(five, {
+        width: "--button-size-icon-small",
+        height: "--button-size-icon-small",
+      });
+      assertButtonPropertiesMatch(six, {
+        width: "--button-size-icon-small",
+        height: "--button-size-icon-small",
+      });
+    });
+
+    add_task(async function testA11yAttributes() {
+      let button = document.querySelector("moz-button");
+
+      async function testProperty(propName, jsPropName = propName) {
+        let propValue = `${propName} value`;
+        ok(!button.buttonEl.hasAttribute(propName), `No ${propName} on inner button`);
+        button.setAttribute(propName, propValue);
+
+        await button.updateComplete;
+
+        ok(!button.hasAttribute(propName), `moz-button ${propName} cleared`);
+        is(button.buttonEl.getAttribute(propName), propValue, `${propName} added to inner button`);
+
+        button[jsPropName] = null;
+        await button.updateComplete;
+
+        ok(!button.buttonEl.hasAttribute(propName), `${propName} cleared by setting property`);
+      }
+
+      await testProperty("title");
+      await testProperty("aria-label", "ariaLabel");
+    });
+
+  </script>
+</head>
+<body>
+  <moz-button class="one">Test button</moz-button>
+  <moz-button class="two" label="Test button"></moz-button>
+  <moz-button class="three" type="primary">Test button</moz-button>
+  <moz-button class="four" type="icon"></moz-button>
+  <moz-button class="five" type="icon ghost"></moz-button>
+  <moz-button class="six" type="ghost icon"></moz-button>
+</body>
+</html>
diff --git a/toolkit/content/tests/widgets/test_moz_page_nav.html b/toolkit/content/tests/widgets/test_moz_page_nav.html
new file mode 100644
index 0000000000..604df7c024
--- /dev/null
+++ b/toolkit/content/tests/widgets/test_moz_page_nav.html
@@ -0,0 +1,306 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>MozPageNav Tests</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+  <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+  <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
+  <script type="module" src="chrome://global/content/elements/moz-page-nav.mjs"></script>
+</head>
+<style>
+body {
+  display: flex;
+}
+#navigation {
+  width: var(--page-nav-width);
+}
+</style>
+<body>
+  <p id="display"></p>
+  <div id="content">
+    <div id="navigation">
+      <moz-page-nav heading="Heading">
+        <moz-page-nav-button view="view-one" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
+          <span class="view-name">View 1</span>
+        </moz-page-nav-button>
+        <moz-page-nav-button view="view-two" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
+          <span class="view-name">View 2</span>
+        </moz-page-nav-button>
+        <moz-page-nav-button view="view-three" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
+          <span class="view-name">View 3</span>
+        </moz-page-nav-button>
+        <moz-page-nav-button view="view-four" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
+          <span class="view-name">View 4</span>
+        </moz-page-nav-button>
+        <moz-page-nav-button view="view-five" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
+          <span class="view-name">View 5</span>
+        </moz-page-nav-button>
+      </moz-page-nav>
+    </div>
+  </div>
+<pre id="test"></pre>
+<script>
+  Services.scriptloader.loadSubScript(
+    "chrome://browser/content/utilityOverlay.js",
+    this
+  );
+  const { BrowserTestUtils } = ChromeUtils.importESModule(
+    "resource://testing-common/BrowserTestUtils.sys.mjs"
+  );
+
+const mozPageNav = document.querySelector("moz-page-nav");
+
+function isActiveElement(expectedActiveEl) {
+    return expectedActiveEl.getRootNode().activeElement == expectedActiveEl;
+  }
+
+  /**
+  * Tests that the first page nav button is selected by default
+  */
+  add_task(async function test_first_item_selected_by_default() {
+    is(
+      mozPageNav.pageNavButtons.length,
+      5,
+      "Five page nav buttons are in the navigation"
+    );
+
+    ok(
+      mozPageNav.pageNavButtons[0].view === mozPageNav.currentView,
+      "The first page nav button is selected by default"
+    )
+  });
+
+  /**
+  * Tests that views are selected when clicked
+  */
+  add_task(async function test_select_view() {
+    let gBrowser = BrowserWindowTracker.getTopWindow().top.gBrowser;
+    let secondViewButton = mozPageNav.pageNavButtons[1];
+    let viewChanged = BrowserTestUtils.waitForEvent(
+      gBrowser,
+      "change-view"
+    );
+
+    secondViewButton.buttonEl.click();
+    await viewChanged;
+
+    ok(
+      secondViewButton.view === mozPageNav.currentView,
+      "The second page nav button is selected"
+    )
+
+    let thirdPageNavButton = mozPageNav.pageNavButtons[2];
+    viewChanged = BrowserTestUtils.waitForEvent(
+      gBrowser,
+      "change-view"
+    );
+
+    thirdPageNavButton.buttonEl.click();
+    await viewChanged;
+
+    ok(
+      thirdPageNavButton.view === mozPageNav.currentView,
+      "The third page nav button is selected"
+    )
+
+    let firstPageNavButton = mozPageNav.pageNavButtons[0];
+    viewChanged = BrowserTestUtils.waitForEvent(
+      gBrowser,
+      "change-view"
+    );
+
+    firstPageNavButton.buttonEl.click();
+    await viewChanged;
+
+    ok(
+      firstPageNavButton.view === mozPageNav.currentView,
+      "The first page nav button is selected"
+    )
+  });
+
+  /**
+  * Tests that categories are keyboard-navigable
+  */
+  add_task(async function test_keyboard_navigation() {
+    const arrowDown = async () => {
+      info("Arrow down");
+      synthesizeKey("KEY_ArrowDown", {});
+      await mozPageNav.updateComplete;
+    };
+    const arrowUp = async () => {
+      info("Arrow up");
+      synthesizeKey("KEY_ArrowUp", {});
+      await mozPageNav.updateComplete;
+    };
+    const arrowLeft = async () => {
+      info("Arrow left");
+      synthesizeKey("KEY_ArrowLeft", {});
+      await mozPageNav.updateComplete;
+    };
+    const arrowRight = async () => {
+      info("Arrow right");
+      synthesizeKey("KEY_ArrowRight", {});
+      await mozPageNav.updateComplete;
+    };
+
+     // Setting this pref allows the test to run as expected with a keyboard on MacOS
+     await SpecialPowers.pushPrefEnv({
+      set: [["accessibility.tabfocus", 7]],
+    });
+
+    let firstPageNavButton = mozPageNav.pageNavButtons[0];
+    let secondPageNavButton = mozPageNav.pageNavButtons[1];
+    let thirdPageNavButton = mozPageNav.pageNavButtons[2];
+    let fourthPageNavButton = mozPageNav.pageNavButtons[3];
+    let fifthPageNavButton = mozPageNav.pageNavButtons[4];
+
+    is(
+      firstPageNavButton.view,
+      mozPageNav.currentView,
+      "The first page nav button is selected"
+    )
+    firstPageNavButton.buttonEl.focus();
+    await arrowDown();
+    ok(
+      isActiveElement(secondPageNavButton),
+      "The second page nav button is the active element after first arrow down"
+    );
+    is(
+      secondPageNavButton.view,
+      mozPageNav.currentView,
+      "The second page nav button is selected"
+    )
+    await arrowDown();
+    is(
+      thirdPageNavButton.view,
+      mozPageNav.currentView,
+      "The third page nav button is selected"
+    )
+    await arrowDown();
+    is(
+      fourthPageNavButton.view,
+      mozPageNav.currentView,
+      "The fourth page nav button is selected"
+    )
+    await arrowDown();
+    is(
+      fifthPageNavButton.view,
+      mozPageNav.currentView,
+      "The fifth page nav button is selected"
+    )
+    await arrowDown();
+    is(
+      fifthPageNavButton.view,
+      mozPageNav.currentView,
+      "The fifth page nav button is still selected"
+    )
+    await arrowUp();
+    is(
+      fourthPageNavButton.view,
+      mozPageNav.currentView,
+      "The fourth page nav button is selected"
+    )
+    await arrowUp();
+    is(
+      thirdPageNavButton.view,
+      mozPageNav.currentView,
+      "The third page nav button is selected"
+    )
+    await arrowUp();
+    is(
+      secondPageNavButton.view,
+      mozPageNav.currentView,
+      "The second page nav button is selected"
+    )
+    await arrowUp();
+    is(
+      firstPageNavButton.view,
+      mozPageNav.currentView,
+      "The first page nav button is selected"
+    )
+    await arrowUp();
+    is(
+      firstPageNavButton.view,
+      mozPageNav.currentView,
+      "The first page nav button is still selected"
+    )
+
+    // Test navigation with arrow left/right keys
+    is(
+      firstPageNavButton.view,
+      mozPageNav.currentView,
+      "The first page nav button is selected"
+    )
+    firstPageNavButton.buttonEl.focus();
+    await arrowRight();
+    ok(
+      isActiveElement(secondPageNavButton),
+      "The second page nav button is the active element after first arrow right"
+    );
+    is(
+      secondPageNavButton.view,
+      mozPageNav.currentView,
+      "The second page nav button is selected"
+    )
+    await arrowRight();
+    is(
+      thirdPageNavButton.view,
+      mozPageNav.currentView,
+      "The third page nav button is selected"
+    )
+    await arrowRight();
+    is(
+      fourthPageNavButton.view,
+      mozPageNav.currentView,
+      "The fourth page nav button is selected"
+    )
+    await arrowRight();
+    is(
+      fifthPageNavButton.view,
+      mozPageNav.currentView,
+      "The fifth page nav button is selected"
+    )
+    await arrowRight();
+    is(
+      fifthPageNavButton.view,
+      mozPageNav.currentView,
+      "The fifth page nav button is still selected"
+    )
+    await arrowLeft();
+    is(
+      fourthPageNavButton.view,
+      mozPageNav.currentView,
+      "The fourth page nav button is selected"
+    )
+    await arrowLeft();
+    is(
+      thirdPageNavButton.view,
+      mozPageNav.currentView,
+      "The third page nav button is selected"
+    )
+    await arrowLeft();
+    is(
+      secondPageNavButton.view,
+      mozPageNav.currentView,
+      "The second page nav button is selected"
+    )
+    await arrowLeft();
+    is(
+      firstPageNavButton.view,
+      mozPageNav.currentView,
+      "The first page nav button is selected"
+    )
+    await arrowLeft();
+    is(
+      firstPageNavButton.view,
+      mozPageNav.currentView,
+      "The first page nav button is still selected"
+    )
+
+    await SpecialPowers.popPrefEnv();
+  });
+</script>
+</body>
+</html>
diff --git a/toolkit/content/tests/widgets/test_videocontrols.html b/toolkit/content/tests/widgets/test_videocontrols.html
index 32cd23df6a..076b4350fd 100644
--- a/toolkit/content/tests/widgets/test_videocontrols.html
+++ b/toolkit/content/tests/widgets/test_videocontrols.html
@@ -67,7 +67,7 @@ let expectingEventPromise;
 async function isMuteButtonMuted() {
   const muteButton = getElementWithinVideo(video, "muteButton");
   await new Promise(SimpleTest.executeSoon);
-  return muteButton.getAttribute("muted") === "true";
+  return muteButton.hasAttribute("muted");
 }
 
 async function isVolumeSliderShowingCorrectVolume(expectedVolume) {
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 01:13:33 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 01:13:33 +0000
commit	086c044dc34dfc0f74fbe41f4ecb402b2cd34884 (patch)
tree	a4f824bd33cb075dd5aa3eb5a0a94af221bbe83a /toolkit/content/tests/widgets
parent	Adding debian version 124.0.1-1. (diff)
download	firefox-086c044dc34dfc0f74fbe41f4ecb402b2cd34884.tar.xz firefox-086c044dc34dfc0f74fbe41f4ecb402b2cd34884.zip