michael@0: /* vim: set ft=javascript 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 background-image URLs have image preview tooltips in the rule-view
michael@0: // and computed-view
michael@0:
michael@0: const PAGE_CONTENT = [
michael@0: '',
michael@0: 'test element
'
michael@0: ].join("\n");
michael@0:
michael@0: let test = asyncTest(function*() {
michael@0: yield addTab("data:text/html,rule view tooltip test");
michael@0: content.document.body.innerHTML = PAGE_CONTENT;
michael@0: let {toolbox, inspector, view} = yield openRuleView();
michael@0:
michael@0: info("Testing the background-image property on the body rule");
michael@0: yield testBodyRuleView(view);
michael@0:
michael@0: info("Selecting the test div node");
michael@0: yield selectNode(".test-element", inspector);
michael@0: info("Testing the the background property on the .test-element rule");
michael@0: yield testDivRuleView(view);
michael@0:
michael@0: info("Testing that image preview tooltips show even when there are fields being edited");
michael@0: yield testTooltipAppearsEvenInEditMode(view);
michael@0:
michael@0: info("Switching over to the computed-view");
michael@0: let {view} = yield openComputedView();
michael@0:
michael@0: info("Testing that the background-image computed style has a tooltip too");
michael@0: yield testComputedView(view);
michael@0: });
michael@0:
michael@0: function* testBodyRuleView(view) {
michael@0: info("Testing tooltips in the rule view");
michael@0: let panel = view.previewTooltip.panel;
michael@0:
michael@0: // Check that the rule view has a tooltip and that a XUL panel has been created
michael@0: ok(view.previewTooltip, "Tooltip instance exists");
michael@0: ok(panel, "XUL panel exists");
michael@0:
michael@0: // Get the background-image property inside the rule view
michael@0: let {valueSpan} = getRuleViewProperty(view, "body", "background-image");
michael@0: let uriSpan = valueSpan.querySelector(".theme-link");
michael@0:
michael@0: yield assertHoverTooltipOn(view.previewTooltip, uriSpan);
michael@0:
michael@0: let images = panel.getElementsByTagName("image");
michael@0: is(images.length, 1, "Tooltip contains an image");
michael@0: ok(images[0].getAttribute("src").indexOf("iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHe") !== -1,
michael@0: "The image URL seems fine");
michael@0: }
michael@0:
michael@0: function* testDivRuleView(view) {
michael@0: let panel = view.previewTooltip.panel;
michael@0:
michael@0: // Get the background property inside the rule view
michael@0: let {valueSpan} = getRuleViewProperty(view, ".test-element", "background");
michael@0: let uriSpan = valueSpan.querySelector(".theme-link");
michael@0:
michael@0: yield assertHoverTooltipOn(view.previewTooltip, uriSpan);
michael@0:
michael@0: let images = panel.getElementsByTagName("image");
michael@0: is(images.length, 1, "Tooltip contains an image");
michael@0: ok(images[0].getAttribute("src").startsWith("data:"), "Tooltip contains a data-uri image as expected");
michael@0: }
michael@0:
michael@0: function* testTooltipAppearsEvenInEditMode(view) {
michael@0: let panel = view.previewTooltip.panel;
michael@0:
michael@0: info("Switching to edit mode in the rule view");
michael@0: let editor = yield turnToEditMode(view);
michael@0:
michael@0: info("Now trying to show the preview tooltip");
michael@0: let {valueSpan} = getRuleViewProperty(view, ".test-element", "background");
michael@0: let uriSpan = valueSpan.querySelector(".theme-link");
michael@0: yield assertHoverTooltipOn(view.previewTooltip, uriSpan);
michael@0:
michael@0: is(view.doc.activeElement, editor.input,
michael@0: "Tooltip was shown in edit mode, and inplace-editor still focused");
michael@0: }
michael@0:
michael@0: function turnToEditMode(ruleView) {
michael@0: let brace = ruleView.doc.querySelector(".ruleview-ruleclose");
michael@0: return focusEditableField(brace);
michael@0: }
michael@0:
michael@0: function* testComputedView(view) {
michael@0: let tooltip = view.tooltip;
michael@0: ok(tooltip, "The computed-view has a tooltip defined");
michael@0:
michael@0: let panel = tooltip.panel;
michael@0: ok(panel, "The computed-view tooltip has a XUL panel");
michael@0:
michael@0: let {valueSpan} = getComputedViewProperty(view, "background-image");
michael@0: let uriSpan = valueSpan.querySelector(".theme-link");
michael@0:
michael@0: yield assertHoverTooltipOn(view.tooltip, uriSpan);
michael@0:
michael@0: let images = panel.getElementsByTagName("image");
michael@0: is(images.length, 1, "Tooltip contains an image");
michael@0:
michael@0: ok(images[0].getAttribute("src").startsWith("data:"), "Tooltip contains a data-uri in the computed-view too");
michael@0: }