1 files changed, 212 insertions, 0 deletions
diff --git a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
new file mode 100644
index 0000000000..3fd7899cdc
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
@@ -0,0 +1,212 @@
+"use strict";
+
+// This test checks whether applied WebExtension themes that attempt to change
+// the background color and the color of the navbar text fields are applied properly.
+
+const { CustomizableUITestUtils } = ChromeUtils.importESModule(
+  "resource://testing-common/CustomizableUITestUtils.sys.mjs"
+);
+let gCUITestUtils = new CustomizableUITestUtils(window);
+
+add_setup(async function () {
+  await gCUITestUtils.addSearchBar();
+  registerCleanupFunction(() => {
+    gCUITestUtils.removeSearchBar();
+  });
+});
+
+add_task(async function test_support_toolbar_field_properties() {
+  const TOOLBAR_FIELD_BACKGROUND = "#ff00ff";
+  const TOOLBAR_FIELD_COLOR = "#00ff00";
+  const TOOLBAR_FIELD_BORDER = "#aaaaff";
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      theme: {
+        images: {
+          theme_frame: "image1.png",
+        },
+        colors: {
+          frame: ACCENT_COLOR,
+          tab_background_text: TEXT_COLOR,
+          toolbar_field: TOOLBAR_FIELD_BACKGROUND,
+          toolbar_field_text: TOOLBAR_FIELD_COLOR,
+          toolbar_field_border: TOOLBAR_FIELD_BORDER,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+
+  let root = document.documentElement;
+  // Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
+  root.removeAttribute("remotecontrol");
+  registerCleanupFunction(() => {
+    root.setAttribute("remotecontrol", "true");
+  });
+
+  let fields = [
+    document.querySelector("#urlbar-background"),
+    BrowserSearch.searchBar,
+  ].filter(field => {
+    let bounds = field.getBoundingClientRect();
+    return bounds.width > 0 && bounds.height > 0;
+  });
+
+  Assert.equal(fields.length, 2, "Should be testing two elements");
+
+  info(
+    `Checking toolbar background colors and colors for ${fields.length} toolbar fields.`
+  );
+  for (let field of fields) {
+    info(`Testing ${field.id || field.className}`);
+    Assert.equal(
+      window.getComputedStyle(field).backgroundColor,
+      hexToCSS(TOOLBAR_FIELD_BACKGROUND),
+      "Field background should be set."
+    );
+    Assert.equal(
+      window.getComputedStyle(field).color,
+      hexToCSS(TOOLBAR_FIELD_COLOR),
+      "Field color should be set."
+    );
+    testBorderColor(field, TOOLBAR_FIELD_BORDER);
+  }
+
+  await extension.unload();
+});
+
+add_task(async function test_support_toolbar_field_brighttext() {
+  let root = document.documentElement;
+  // Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
+  root.removeAttribute("remotecontrol");
+  registerCleanupFunction(() => {
+    root.setAttribute("remotecontrol", "true");
+  });
+  let urlbar = gURLBar.textbox;
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      theme: {
+        colors: {
+          frame: ACCENT_COLOR,
+          tab_background_text: TEXT_COLOR,
+          toolbar_field: "#fff",
+          toolbar_field_text: "#000",
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+
+  Assert.equal(
+    window.getComputedStyle(urlbar).color,
+    hexToCSS("#000000"),
+    "Color has been set"
+  );
+  Assert.equal(
+    root.getAttribute("lwt-toolbar-field"),
+    "light",
+    "Should be light"
+  );
+
+  await extension.unload();
+
+  extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      theme: {
+        colors: {
+          frame: ACCENT_COLOR,
+          tab_background_text: TEXT_COLOR,
+          toolbar_field: "#000",
+          toolbar_field_text: "#fff",
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+
+  Assert.equal(
+    window.getComputedStyle(urlbar).color,
+    hexToCSS("#ffffff"),
+    "Color has been set"
+  );
+  Assert.equal(
+    root.getAttribute("lwt-toolbar-field"),
+    "dark",
+    "Should be dark"
+  );
+
+  await extension.unload();
+});
+
+// Verifies that we apply the lwt-toolbar-field="dark" attribute when
+// toolbar fields are dark text on a dark background.
+add_task(async function test_support_toolbar_field_brighttext_dark_on_dark() {
+  let root = document.documentElement;
+  // Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
+  root.removeAttribute("remotecontrol");
+  registerCleanupFunction(() => {
+    root.setAttribute("remotecontrol", "true");
+  });
+  let urlbar = gURLBar.textbox;
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      theme: {
+        colors: {
+          frame: ACCENT_COLOR,
+          tab_background_text: TEXT_COLOR,
+          toolbar_field: "#000",
+          toolbar_field_text: "#111111",
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+
+  Assert.equal(
+    window.getComputedStyle(urlbar).color,
+    hexToCSS("#111111"),
+    "Color has been set"
+  );
+  Assert.equal(
+    root.getAttribute("lwt-toolbar-field"),
+    "dark",
+    "toolbar-field color-scheme should be dark"
+  );
+
+  await extension.unload();
+});
+
+add_task(async function test_no_explicit_toolbar_field_on_dark_toolbar() {
+  let root = document.documentElement;
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      theme: {
+        colors: {
+          frame: "#000",
+          tab_background_text: "#fff",
+          // Explicitly unset toolbar fields, but they default to light.
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+
+  Assert.equal(
+    root.getAttribute("lwt-toolbar-field"),
+    "light",
+    "toolbar-field color-scheme should be set and light"
+  );
+
+  await extension.unload();
+});