1 files changed, 178 insertions, 0 deletions
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js
new file mode 100644
index 0000000000..8a31e94918
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js
@@ -0,0 +1,178 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the fontfamily tooltip on longhand properties
+
+const TEST_URI = `
+  <style type="text/css">
+    #testElement {
+      font-family: cursive;
+      color: #333;
+      padding-left: 70px;
+    }
+  </style>
+  <div id="testElement">test element</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, view } = await openRuleView();
+  await selectNode("#testElement", inspector);
+  await testRuleView(view, inspector.selection.nodeFront);
+
+  info("Opening the computed view");
+  const onComputedViewReady = inspector.once("computed-view-refreshed");
+  view = selectComputedView(inspector);
+  await onComputedViewReady;
+
+  await testComputedView(view, inspector.selection.nodeFront);
+
+  await testExpandedComputedViewProperty(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 font family property inside the rule view
+  const { valueSpan } = getRuleViewProperty(
+    ruleView,
+    "#testElement",
+    "font-family"
+  );
+
+  // And verify that the tooltip gets shown on this property
+  valueSpan.scrollIntoView(true);
+  let previewTooltip = await assertShowPreviewTooltip(ruleView, valueSpan);
+
+  let 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"
+  );
+
+  let dataURL = await getFontFamilyDataURL(valueSpan.textContent, nodeFront);
+  is(
+    images[0].getAttribute("src"),
+    dataURL,
+    "Tooltip contains the correct data-uri image"
+  );
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, valueSpan);
+
+  // Do the tooltip test again, but now when hovering on the span that
+  // encloses each and every font family.
+  const fontFamilySpan = valueSpan.querySelector(".ruleview-font-family");
+  fontFamilySpan.scrollIntoView(true);
+
+  previewTooltip = await assertShowPreviewTooltip(ruleView, fontFamilySpan);
+
+  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"
+  );
+
+  dataURL = await getFontFamilyDataURL(fontFamilySpan.textContent, nodeFront);
+  is(
+    images[0].getAttribute("src"),
+    dataURL,
+    "Tooltip contains the correct data-uri image"
+  );
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, fontFamilySpan);
+}
+
+async function testComputedView(computedView, nodeFront) {
+  info("Testing font-family tooltips in the computed view");
+
+  const tooltip = computedView.tooltips.getTooltip("previewTooltip");
+  const panel = tooltip.panel;
+  const { valueSpan } = getComputedViewProperty(computedView, "font-family");
+
+  valueSpan.scrollIntoView(true);
+  const previewTooltip = await assertShowPreviewTooltip(
+    computedView,
+    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);
+}
+
+async function testExpandedComputedViewProperty(computedView, nodeFront) {
+  info(
+    "Testing font-family tooltips in expanded properties of the " +
+      "computed view"
+  );
+
+  info("Expanding the font-family property to reveal matched selectors");
+  const propertyView = getPropertyView(computedView, "font-family");
+  propertyView.matchedExpanded = true;
+  await propertyView.refreshMatchedSelectors();
+
+  const valueSpan = propertyView.matchedSelectorsContainer.querySelector(
+    ".bestmatch .computed-other-property-value"
+  );
+
+  const tooltip = computedView.tooltips.getTooltip("previewTooltip");
+  const panel = tooltip.panel;
+
+  valueSpan.scrollIntoView(true);
+  const previewTooltip = await assertShowPreviewTooltip(
+    computedView,
+    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);
+}
+
+function getPropertyView(computedView, name) {
+  let propertyView = null;
+  computedView.propertyViews.some(function (view) {
+    if (view.name == name) {
+      propertyView = view;
+      return true;
+    }
+    return false;
+  });
+  return propertyView;
+}