1 files changed, 106 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_preview-tooltips-sizes.js b/devtools/client/inspector/rules/test/browser_rules_preview-tooltips-sizes.js
new file mode 100644
index 0000000000..a90b6250cd
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_preview-tooltips-sizes.js
@@ -0,0 +1,106 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the dimensions of the preview tooltips are correctly updated to fit their
+// content.
+
+// Small 32x32 image.
+const BASE_64_URL =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr" +
+  "0AAAAUElEQVRYR+3UsQkAQAhD0TjJ7T+Wk3gbxMIizbcVITwwJWlkZtptpXp+v94TAAEE4gLTvgfOf770RB" +
+  "EAAQTiAvEiIgACCMQF4kVEAAQQSAt8xsyeAW6R8eIAAAAASUVORK5CYII=";
+
+add_task(async function () {
+  await addTab(
+    "data:text/html;charset=utf-8," +
+      encodeURIComponent(`
+      <style>
+        html {
+          /* Using a long variable name to ensure preview tooltip for variable will be */
+          /* wider than the preview tooltip for the test 32x32 image. */
+          --test-var-wider-than-image: red;
+        }
+
+        #target {
+          color: var(--test-var-wider-than-image);
+          background: url(${BASE_64_URL});
+        }
+      </style>
+      <div id="target">inspect me</div>
+    `)
+  );
+  const { inspector, view } = await openRuleView();
+  await selectNode("#target", inspector);
+
+  // Note: See intermittent Bug 1721743.
+  // On linux webrender opt, the inspector might open the ruleview before it has
+  // been populated with the rules for the div.
+  info("Wait until the rule view property is rendered");
+  const colorPropertyElement = await waitFor(() =>
+    getRuleViewProperty(view, "#target", "color")
+  );
+
+  // Retrieve the element for `--test-var` on which the CSS variable tooltip will appear.
+  const colorPropertySpan = colorPropertyElement.valueSpan;
+  const colorVariableElement =
+    colorPropertySpan.querySelector(".ruleview-variable");
+
+  // Retrieve the element for the background url on which the image preview will appear.
+  const backgroundPropertySpan = getRuleViewProperty(
+    view,
+    "#target",
+    "background"
+  ).valueSpan;
+  const backgroundUrlElement =
+    backgroundPropertySpan.querySelector(".theme-link");
+
+  info("Show preview tooltip for CSS variable");
+  let previewTooltip = await assertShowPreviewTooltip(
+    view,
+    colorVariableElement
+  );
+  // Measure tooltip dimensions.
+  let tooltipRect = previewTooltip.panel.getBoundingClientRect();
+  const originalHeight = tooltipRect.height;
+  const originalWidth = tooltipRect.width;
+  info(`Original dimensions: ${originalWidth} x ${originalHeight}`);
+  await assertTooltipHiddenOnMouseOut(previewTooltip, colorVariableElement);
+
+  info("Show preview tooltip for background url");
+  previewTooltip = await assertShowPreviewTooltip(view, backgroundUrlElement);
+  // Compare new tooltip dimensions to previous measures.
+  tooltipRect = previewTooltip.panel.getBoundingClientRect();
+  info(
+    `Image preview dimensions: ${tooltipRect.width} x ${tooltipRect.height}`
+  );
+  ok(
+    tooltipRect.height > originalHeight,
+    "Tooltip is taller for image preview"
+  );
+  ok(
+    tooltipRect.width < originalWidth,
+    "Tooltip is narrower for image preview"
+  );
+  await assertTooltipHiddenOnMouseOut(previewTooltip, colorVariableElement);
+
+  info("Show preview tooltip for CSS variable again");
+  previewTooltip = await assertShowPreviewTooltip(view, colorVariableElement);
+  // Check measures are identical to initial ones.
+  tooltipRect = previewTooltip.panel.getBoundingClientRect();
+  info(
+    `CSS variable tooltip dimensions: ${tooltipRect.width} x ${tooltipRect.height}`
+  );
+  is(
+    tooltipRect.height,
+    originalHeight,
+    "Tooltip has the same height as the original"
+  );
+  is(
+    tooltipRect.width,
+    originalWidth,
+    "Tooltip has the same width as the original"
+  );
+  await assertTooltipHiddenOnMouseOut(previewTooltip, colorVariableElement);
+});