1 files changed, 39 insertions, 0 deletions
diff --git a/toolkit/components/extensions/test/browser/browser_ext_themes_tab_line.js b/toolkit/components/extensions/test/browser/browser_ext_themes_tab_line.js
new file mode 100644
index 0000000000..e4bd8cb99b
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_tab_line.js
@@ -0,0 +1,39 @@
+"use strict";
+
+// This test checks whether applied WebExtension themes that attempt to change
+// the color of the tab line are applied properly.
+
+add_task(async function test_support_tab_line() {
+  let newWin = await BrowserTestUtils.openNewBrowserWindow();
+
+  const TAB_LINE_COLOR = "#ff0000";
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      theme: {
+        colors: {
+          frame: ACCENT_COLOR,
+          tab_background_text: "#000",
+          tab_line: TAB_LINE_COLOR,
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+
+  info("Checking selected tab line color");
+  let selectedTab = newWin.document.querySelector(".tabbrowser-tab[selected]");
+  let tab = selectedTab.querySelector(".tab-background");
+  let element = tab;
+  let property = "outline-color";
+  let computedValue = newWin.getComputedStyle(element)[property];
+  let expectedColor = `rgb(${hexToRGB(TAB_LINE_COLOR).join(", ")})`;
+
+  Assert.ok(
+    computedValue.includes(expectedColor),
+    `Tab line should be displayed in the box shadow of the tab: ${computedValue}`
+  );
+
+  await extension.unload();
+  await BrowserTestUtils.closeWindow(newWin);
+});