1 files changed, 73 insertions, 0 deletions
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-shorthand-fontfamily.js b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-shorthand-fontfamily.js
new file mode 100644
index 0000000000..ef98a20a37
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-shorthand-fontfamily.js
@@ -0,0 +1,73 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the fontfamily tooltip on shorthand properties
+
+const TEST_URI = `
+  <style type="text/css">
+    #testElement {
+      font: italic bold .8em/1.2 Arial;
+    }
+  </style>
+  <div id="testElement">test element</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#testElement", inspector);
+  await testRuleView(view, inspector.selection.nodeFront);
+});
+
+async function testRuleView(ruleView, nodeFront) {
+  info("Testing font-family tooltips in the rule view");
+
+  const tooltip = ruleView.tooltips.getTooltip("previewTooltip");
+  const panel = tooltip.panel;
+
+  // Check that the rule view has a tooltip and that a XUL panel has
+  // been created
+  ok(tooltip, "Tooltip instance exists");
+  ok(panel, "XUL panel exists");
+
+  // Get the computed font family property inside the font rule view
+  const propertyList = ruleView.element.querySelectorAll(
+    ".ruleview-propertylist"
+  );
+  const fontExpander =
+    propertyList[1].querySelectorAll(".ruleview-expander")[0];
+  fontExpander.click();
+
+  const rule = getRuleViewRule(ruleView, "#testElement");
+  const computedlist = rule.querySelectorAll(".ruleview-computed");
+  let valueSpan;
+  for (const computed of computedlist) {
+    const propertyName = computed.querySelector(".ruleview-propertyname");
+    if (propertyName.textContent == "font-family") {
+      valueSpan = computed.querySelector(".ruleview-propertyvalue");
+      break;
+    }
+  }
+
+  // And verify that the tooltip gets shown on this property
+  const previewTooltip = await assertShowPreviewTooltip(ruleView, valueSpan);
+
+  const images = panel.getElementsByTagName("img");
+  is(images.length, 1, "Tooltip contains an image");
+  ok(
+    images[0].getAttribute("src").startsWith("data:"),
+    "Tooltip contains a data-uri image as expected"
+  );
+
+  const dataURL = await getFontFamilyDataURL(valueSpan.textContent, nodeFront);
+  is(
+    images[0].getAttribute("src"),
+    dataURL,
+    "Tooltip contains the correct data-uri image"
+  );
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, valueSpan);
+}