1 files changed, 63 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js b/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js
new file mode 100644
index 0000000000..f4a45c5079
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that image preview tooltips are shown on img and canvas tags in the
+// markup-view and that the tooltip actually contains an image and shows the
+// right dimension label
+
+const TEST_NODES = [
+  { selector: "img.local", size: "192" + " \u00D7 " + "192" },
+  { selector: "img.data", size: "64" + " \u00D7 " + "64" },
+  { selector: "img.remote", size: "22" + " \u00D7 " + "23" },
+  { selector: ".canvas", size: "600" + " \u00D7 " + "600" },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_markup_image_and_canvas_2.html");
+  const { inspector } = await openInspector();
+
+  info("Selecting the first <img> tag");
+  await selectNode("img", inspector);
+
+  for (const testNode of TEST_NODES) {
+    const target = await getImageTooltipTarget(testNode, inspector);
+    await assertTooltipShownOnHover(
+      inspector.markup.imagePreviewTooltip,
+      target
+    );
+    checkImageTooltip(testNode, inspector);
+    await assertTooltipHiddenOnMouseOut(
+      inspector.markup.imagePreviewTooltip,
+      target
+    );
+  }
+});
+
+async function getImageTooltipTarget({ selector }, inspector) {
+  const nodeFront = await getNodeFront(selector, inspector);
+  const isImg = nodeFront.tagName.toLowerCase() === "img";
+
+  const container = getContainerForNodeFront(nodeFront, inspector);
+
+  let target = container.editor.tag;
+  if (isImg) {
+    target = container.editor.getAttributeElement("src").querySelector(".link");
+  }
+  return target;
+}
+
+function checkImageTooltip({ selector, size }, { markup }) {
+  const panel = markup.imagePreviewTooltip.panel;
+  const images = panel.getElementsByTagName("img");
+  is(images.length, 1, "Tooltip for [" + selector + "] contains an image");
+
+  const label = panel.querySelector(".devtools-tooltip-caption");
+  is(
+    label.textContent,
+    size,
+    "Tooltip label for [" + selector + "] displays the right image size"
+  );
+
+  markup.imagePreviewTooltip.hide();
+}