1 files changed, 109 insertions, 0 deletions
diff --git a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbarbutton_icons.js b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbarbutton_icons.js
new file mode 100644
index 0000000000..2802c6ac33
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbarbutton_icons.js
@@ -0,0 +1,109 @@
+"use strict";
+
+// This test checks applied WebExtension themes that attempt to change
+// icon color properties
+
+add_task(async function setup_home_button() {
+  CustomizableUI.addWidgetToArea("home-button", "nav-bar");
+  registerCleanupFunction(() =>
+    CustomizableUI.removeWidgetFromArea("home-button")
+  );
+});
+
+add_task(async function test_icons_properties() {
+  const ICONS_COLOR = "#001b47";
+  const ICONS_ATTENTION_COLOR = "#44ba77";
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      theme: {
+        images: {
+          theme_frame: "image1.png",
+        },
+        colors: {
+          frame: ACCENT_COLOR,
+          tab_background_text: TEXT_COLOR,
+          icons: ICONS_COLOR,
+          icons_attention: ICONS_ATTENTION_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+
+  let toolbarbutton = document.querySelector("#home-button");
+  Assert.equal(
+    window.getComputedStyle(toolbarbutton).getPropertyValue("fill"),
+    `rgb(${hexToRGB(ICONS_COLOR).join(", ")})`,
+    "Buttons fill color set!"
+  );
+
+  let starButton = document.querySelector("#star-button");
+  starButton.setAttribute("starred", "true");
+
+  let starComputedStyle = window.getComputedStyle(starButton);
+  Assert.equal(
+    starComputedStyle.getPropertyValue(
+      "--lwt-toolbarbutton-icon-fill-attention"
+    ),
+    `rgb(${hexToRGB(ICONS_ATTENTION_COLOR).join(", ")})`,
+    "Variable is properly set"
+  );
+  Assert.equal(
+    starComputedStyle.getPropertyValue("fill"),
+    `rgb(${hexToRGB(ICONS_ATTENTION_COLOR).join(", ")})`,
+    "Starred icon fill is properly set"
+  );
+
+  starButton.removeAttribute("starred");
+
+  await extension.unload();
+});
+
+add_task(async function test_no_icons_properties() {
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      theme: {
+        images: {
+          theme_frame: "image1.png",
+        },
+        colors: {
+          frame: ACCENT_COLOR,
+          tab_background_text: TEXT_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+
+  let toolbarbutton = document.querySelector("#home-button");
+  let toolbarbuttonCS = window.getComputedStyle(toolbarbutton);
+  let currentColor = toolbarbuttonCS.getPropertyValue("color");
+  Assert.equal(
+    window.getComputedStyle(toolbarbutton).getPropertyValue("fill"),
+    currentColor,
+    "Button fill color should be currentColor when no icon color specified."
+  );
+
+  let starButton = document.querySelector("#star-button");
+  starButton.setAttribute("starred", "true");
+  let starComputedStyle = window.getComputedStyle(starButton);
+  Assert.equal(
+    starComputedStyle.getPropertyValue(
+      "--lwt-toolbarbutton-icon-fill-attention"
+    ),
+    "",
+    "Icon attention fill should not be set when the value is not specified in the manifest."
+  );
+  starButton.removeAttribute("starred");
+
+  await extension.unload();
+});