1 files changed, 66 insertions, 0 deletions
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector_theme-change.js b/devtools/client/inspector/fonts/test/browser_fontinspector_theme-change.js
new file mode 100644
index 0000000000..b3c91a727d
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_theme-change.js
@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+requestLongerTimeout(2);
+
+// Test that the preview images are updated when the theme changes.
+
+const {
+  getTheme,
+  setTheme,
+} = require("resource://devtools/client/shared/theme.js");
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
+const originalTheme = getTheme();
+
+registerCleanupFunction(() => {
+  info(`Restoring theme to '${originalTheme}.`);
+  setTheme(originalTheme);
+});
+
+add_task(async function () {
+  const { inspector, view } = await openFontInspectorForURL(TEST_URI);
+  const viewDoc = view.document;
+
+  await selectNode(".normal-text", inspector);
+  await expandFontsAccordion(viewDoc);
+  const allFontsEls = getAllFontsEls(viewDoc);
+  const fontEl = allFontsEls[0];
+
+  // Store the original preview URI for later comparison.
+  const originalURI = fontEl.querySelector(".font-preview").src;
+  const newTheme = originalTheme === "light" ? "dark" : "light";
+
+  info(`Original theme was '${originalTheme}'.`);
+
+  await setThemeAndWaitForUpdate(newTheme, inspector);
+  isnot(
+    fontEl.querySelector(".font-preview").src,
+    originalURI,
+    "The preview image changed with the theme."
+  );
+
+  await setThemeAndWaitForUpdate(originalTheme, inspector);
+  is(
+    fontEl.querySelector(".font-preview").src,
+    originalURI,
+    "The preview image is correct after the original theme was restored."
+  );
+});
+
+/**
+ * Sets the current theme and waits for fontinspector-updated event.
+ *
+ * @param {String} theme - the new theme
+ * @param {Object} inspector - the inspector panel
+ */
+async function setThemeAndWaitForUpdate(theme, inspector) {
+  const onUpdated = inspector.once("fontinspector-updated");
+
+  info(`Setting theme to '${theme}'.`);
+  setTheme(theme);
+
+  info("Waiting for font-inspector to update.");
+  await onUpdated;
+}