1 files changed, 34 insertions, 0 deletions
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector_expand-css-code.js b/devtools/client/inspector/fonts/test/browser_fontinspector_expand-css-code.js
new file mode 100644
index 0000000000..66aedf93e7
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_expand-css-code.js
@@ -0,0 +1,34 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the font-face css rule code is collapsed by default, and can be expanded.
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
+
+add_task(async function () {
+  const { view, inspector } = await openFontInspectorForURL(TEST_URI);
+  const viewDoc = view.document;
+  await selectNode("div", inspector);
+
+  await expandFontsAccordion(viewDoc);
+  info("Checking that the css font-face rule is collapsed by default");
+  const fontEl = getAllFontsEls(viewDoc)[0];
+  const codeEl = fontEl.querySelector(".font-css-code");
+  is(codeEl.textContent, "@font-face {}", "The font-face rule is collapsed");
+
+  info("Expanding the rule by clicking on the expander icon");
+  const onExpanded = BrowserTestUtils.waitForCondition(() => {
+    return (
+      codeEl.textContent ===
+      `@font-face { font-family: bar; src: url("bad/font/name.ttf"), url("ostrich-regular.ttf") format("truetype"); }`
+    );
+  }, "Waiting for the font-face rule 1");
+
+  const expander = fontEl.querySelector(".font-css-code .theme-twisty");
+  expander.click();
+  await onExpanded;
+
+  ok(true, "Font-face rule is now expanded");
+});