michael@0: /* vim: set ts=2 et sw=2 tw=80: */
michael@0: /* Any copyright is dedicated to the Public Domain.
michael@0: http://creativecommons.org/publicdomain/zero/1.0/ */
michael@0:
michael@0: "use strict";
michael@0:
michael@0: // Test that image preview tooltips are shown on img and canvas tags in the
michael@0: // markup-view and that the tooltip actually contains an image and shows the
michael@0: // right dimension label
michael@0:
michael@0: const PAGE_CONTENT = [
michael@0: '
',
michael@0: '
',
michael@0: '
',
michael@0: ''
michael@0: ].join("\n");
michael@0:
michael@0: const TEST_NODES = [
michael@0: {selector: "img.local", size: "192 x 192"},
michael@0: {selector: "img.data", size: "64 x 64"},
michael@0: {selector: "img.remote", size: "22 x 23"},
michael@0: {selector: ".canvas", size: "600 x 600"}
michael@0: ];
michael@0:
michael@0: let test = asyncTest(function*() {
michael@0: yield addTab("data:text/html,markup view tooltip test");
michael@0: createPage();
michael@0:
michael@0: let {inspector} = yield openInspector();
michael@0:
michael@0: info("Selecting the first ![]()
tag");
michael@0: yield selectNode("img", inspector);
michael@0:
michael@0: for (let testNode of TEST_NODES) {
michael@0: let target = getImageTooltipTarget(testNode, inspector);
michael@0: yield assertTooltipShownOn(target, inspector);
michael@0: checkImageTooltip(testNode, inspector);
michael@0: }
michael@0: });
michael@0:
michael@0: function createPage() {
michael@0: info("Fill the page with the test content");
michael@0: content.document.body.innerHTML = PAGE_CONTENT;
michael@0:
michael@0: info("Fill the canvas");
michael@0: let doc = content.document;
michael@0: let context = doc.querySelector(".canvas").getContext("2d");
michael@0:
michael@0: context.beginPath();
michael@0: context.moveTo(300, 0);
michael@0: context.lineTo(600, 600);
michael@0: context.lineTo(0, 600);
michael@0: context.closePath();
michael@0: context.fillStyle = "#ffc821";
michael@0: context.fill();
michael@0: }
michael@0:
michael@0: function getImageTooltipTarget({selector}, inspector) {
michael@0: let node = getNode(selector);
michael@0: let isImg = node.tagName.toLowerCase() === "img";
michael@0:
michael@0: let container = getContainerForRawNode(node, inspector);
michael@0:
michael@0: let target = container.editor.tag;
michael@0: if (isImg) {
michael@0: target = container.editor.getAttributeElement("src");
michael@0: }
michael@0: return target;
michael@0: }
michael@0:
michael@0: function assertTooltipShownOn(element, {markup}) {
michael@0: return Task.spawn(function*() {
michael@0: info("Is the element a valid hover target");
michael@0: let isValid = yield markup.tooltip.isValidHoverTarget(element);
michael@0: ok(isValid, "The element is a valid hover target for the image tooltip");
michael@0: });
michael@0: }
michael@0:
michael@0: function checkImageTooltip({selector, size}, {markup}) {
michael@0: let images = markup.tooltip.panel.getElementsByTagName("image");
michael@0: is(images.length, 1, "Tooltip for [" + selector + "] contains an image");
michael@0:
michael@0: let label = markup.tooltip.panel.querySelector(".devtools-tooltip-caption");
michael@0: is(label.textContent, size, "Tooltip label for [" + selector + "] displays the right image size");
michael@0:
michael@0: markup.tooltip.hide();
michael@0: }