/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that background-image URLs have image preview tooltips in the rule-view
// and computed-view
const TEST_URI = `
test element
`;
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
info("Testing the background-image property on the body rule");
yield testBodyRuleView(view);
info("Selecting the test div node");
yield selectNode(".test-element", inspector);
info("Testing the the background property on the .test-element rule");
yield testDivRuleView(view);
info("Testing that image preview tooltips show even when there are " +
"fields being edited");
yield testTooltipAppearsEvenInEditMode(view);
info("Switching over to the computed-view");
let onComputedViewReady = inspector.once("computed-view-refreshed");
view = selectComputedView(inspector);
yield onComputedViewReady;
info("Testing that the background-image computed style has a tooltip too");
yield testComputedView(view);
});
function* testBodyRuleView(view) {
info("Testing tooltips in the rule view");
let panel = view.tooltips.previewTooltip.panel;
// Check that the rule view has a tooltip and that a XUL panel has
// been created
ok(view.tooltips.previewTooltip, "Tooltip instance exists");
ok(panel, "XUL panel exists");
// Get the background-image property inside the rule view
let {valueSpan} = getRuleViewProperty(view, "body", "background-image");
let uriSpan = valueSpan.querySelector(".theme-link");
yield assertHoverTooltipOn(view.tooltips.previewTooltip, uriSpan);
let images = panel.getElementsByTagName("img");
is(images.length, 1, "Tooltip contains an image");
ok(images[0].getAttribute("src")
.indexOf("iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHe") !== -1,
"The image URL seems fine");
}
function* testDivRuleView(view) {
let panel = view.tooltips.previewTooltip.panel;
// Get the background property inside the rule view
let {valueSpan} = getRuleViewProperty(view, ".test-element", "background");
let uriSpan = valueSpan.querySelector(".theme-link");
yield assertHoverTooltipOn(view.tooltips.previewTooltip, uriSpan);
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");
}
function* testTooltipAppearsEvenInEditMode(view) {
info("Switching to edit mode in the rule view");
let editor = yield turnToEditMode(view);
info("Now trying to show the preview tooltip");
let {valueSpan} = getRuleViewProperty(view, ".test-element", "background");
let uriSpan = valueSpan.querySelector(".theme-link");
yield assertHoverTooltipOn(view.tooltips.previewTooltip, uriSpan);
is(view.styleDocument.activeElement, editor.input,
"Tooltip was shown in edit mode, and inplace-editor still focused");
}
function turnToEditMode(ruleView) {
let brace = ruleView.styleDocument.querySelector(".ruleview-ruleclose");
return focusEditableField(ruleView, brace);
}
function* testComputedView(view) {
let tooltip = view.tooltips.previewTooltip;
ok(tooltip, "The computed-view has a tooltip defined");
let panel = tooltip.panel;
ok(panel, "The computed-view tooltip has a XUL panel");
let {valueSpan} = getComputedViewProperty(view, "background-image");
let uriSpan = valueSpan.querySelector(".theme-link");
yield assertHoverTooltipOn(view.tooltips.previewTooltip, uriSpan);
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 in the computed-view too");
}