1 files changed, 187 insertions, 0 deletions
diff --git a/toolkit/components/extensions/test/browser/browser_ext_themes_sanitization.js b/toolkit/components/extensions/test/browser/browser_ext_themes_sanitization.js
new file mode 100644
index 0000000000..2e7359ce29
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_sanitization.js
@@ -0,0 +1,187 @@
+"use strict";
+
+// This test checks color sanitization in various situations
+
+add_task(async function test_sanitization_invalid() {
+  // This test checks that invalid values are sanitized
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      theme: {
+        colors: {
+          frame: ACCENT_COLOR,
+          tab_background_text: TEXT_COLOR,
+          bookmark_text: "ntimsfavoriteblue",
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+
+  let navbar = document.querySelector("#nav-bar");
+  Assert.equal(
+    window.getComputedStyle(navbar).color,
+    "rgb(0, 0, 0)",
+    "All invalid values should always compute to black."
+  );
+
+  await extension.unload();
+});
+
+add_task(async function test_sanitization_css_variables() {
+  // This test checks that CSS variables are sanitized
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      theme: {
+        colors: {
+          frame: ACCENT_COLOR,
+          tab_background_text: TEXT_COLOR,
+          bookmark_text: "var(--arrowpanel-dimmed)",
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+
+  let navbar = document.querySelector("#nav-bar");
+  Assert.equal(
+    window.getComputedStyle(navbar).color,
+    "rgb(0, 0, 0)",
+    "All CSS variables should always compute to black."
+  );
+
+  await extension.unload();
+});
+
+add_task(async function test_sanitization_important() {
+  // This test checks that the sanitizer cannot be fooled with !important
+  let stylesheetAttr = `href="data:text/css,*{color:red!important}" type="text/css"`;
+  let stylesheet = document.createProcessingInstruction(
+    "xml-stylesheet",
+    stylesheetAttr
+  );
+  let load = BrowserTestUtils.waitForEvent(stylesheet, "load");
+  document.insertBefore(stylesheet, document.documentElement);
+  await load;
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      theme: {
+        colors: {
+          frame: ACCENT_COLOR,
+          tab_background_text: TEXT_COLOR,
+          bookmark_text: "green",
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+
+  let navbar = document.querySelector("#nav-bar");
+  Assert.equal(
+    window.getComputedStyle(navbar).color,
+    "rgb(255, 0, 0)",
+    "Sheet applies"
+  );
+
+  stylesheet.remove();
+
+  Assert.equal(
+    window.getComputedStyle(navbar).color,
+    "rgb(0, 128, 0)",
+    "Shouldn't be able to fool the color sanitizer with !important"
+  );
+
+  await extension.unload();
+});
+
+add_task(async function test_sanitization_transparent() {
+  // This test checks whether transparent values are applied properly
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      theme: {
+        colors: {
+          frame: ACCENT_COLOR,
+          tab_background_text: TEXT_COLOR,
+          toolbar_top_separator: "transparent",
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+
+  let navbar = document.querySelector("#nav-bar");
+  Assert.ok(
+    window.getComputedStyle(navbar).boxShadow.includes("rgba(0, 0, 0, 0)"),
+    "Top separator should be transparent"
+  );
+
+  await extension.unload();
+});
+
+add_task(async function test_sanitization_transparent_frame_color() {
+  // This test checks whether transparent frame color falls back to white.
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      theme: {
+        colors: {
+          frame: "transparent",
+          tab_background_text: TEXT_COLOR,
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+
+  let toolbox = document.querySelector("#navigator-toolbox");
+  let toolboxCS = window.getComputedStyle(toolbox);
+
+  if (backgroundColorSetOnRoot()) {
+    let docEl = document.documentElement;
+    let rootCS = window.getComputedStyle(docEl);
+    Assert.equal(
+      rootCS.backgroundColor,
+      "rgb(255, 255, 255)",
+      "Accent color should be white"
+    );
+  } else {
+    Assert.equal(
+      toolboxCS.backgroundColor,
+      "rgb(255, 255, 255)",
+      "Accent color should be white"
+    );
+  }
+
+  await extension.unload();
+});
+
+add_task(
+  async function test_sanitization_transparent_tab_background_text_color() {
+    // This test checks whether transparent textcolor falls back to black.
+    let extension = ExtensionTestUtils.loadExtension({
+      manifest: {
+        theme: {
+          colors: {
+            frame: ACCENT_COLOR,
+            tab_background_text: "transparent",
+          },
+        },
+      },
+    });
+
+    await extension.startup();
+
+    let docEl = document.documentElement;
+    Assert.equal(
+      window.getComputedStyle(docEl).color,
+      "rgb(0, 0, 0)",
+      "Text color should be black"
+    );
+
+    await extension.unload();
+  }
+);