/* 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(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let { inspector, view } = await openRuleView();
info("Testing the background-image property on the body rule");
await testBodyRuleView(view);
info("Selecting the test div node");
await selectNode(".test-element", inspector);
info("Testing the the background property on the .test-element rule");
await testDivRuleView(view);
info(
"Testing that image preview tooltips show even when there are " +
"fields being edited"
);
await testTooltipAppearsEvenInEditMode(view);
info("Switching over to the computed-view");
const onComputedViewReady = inspector.once("computed-view-refreshed");
view = selectComputedView(inspector);
await onComputedViewReady;
info("Testing that the background-image computed style has a tooltip too");
await testComputedView(view);
});
async function testBodyRuleView(view) {
info("Testing tooltips in the rule view");
// XXX we have an intermittent here (Bug 1743594) where the rule view is still empty
// at this point. We're currently investigating what's going on and a proper way to
// wait in openRuleView, but for now, let's fix the intermittent by waiting until the
// rule view has the expected content.
const property = await waitFor(() =>
getRuleViewProperty(view, "body", "background-image")
);
// Get the background-image property inside the rule view
const { valueSpan } = property;
const uriSpan = valueSpan.querySelector(".theme-link");
const previewTooltip = await assertShowPreviewTooltip(view, uriSpan);
const images = previewTooltip.panel.getElementsByTagName("img");
is(images.length, 1, "Tooltip contains an image");
ok(
images[0]
.getAttribute("src")
.includes("iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHe"),
"The image URL seems fine"
);
await assertTooltipHiddenOnMouseOut(previewTooltip, uriSpan);
}
async function testDivRuleView(view) {
// Get the background property inside the rule view
const { valueSpan } = getRuleViewProperty(
view,
".test-element",
"background"
);
const uriSpan = valueSpan.querySelector(".theme-link");
const previewTooltip = await assertShowPreviewTooltip(view, uriSpan);
const images = previewTooltip.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"
);
await assertTooltipHiddenOnMouseOut(previewTooltip, uriSpan);
}
async function testTooltipAppearsEvenInEditMode(view) {
info("Switching to edit mode in the rule view");
const editor = await turnToEditMode(view);
info("Now trying to show the preview tooltip");
const { valueSpan } = getRuleViewProperty(
view,
".test-element",
"background"
);
const uriSpan = valueSpan.querySelector(".theme-link");
const previewTooltip = await assertShowPreviewTooltip(view, uriSpan);
is(
view.styleDocument.activeElement,
editor.input,
"Tooltip was shown in edit mode, and inplace-editor still focused"
);
await assertTooltipHiddenOnMouseOut(previewTooltip, uriSpan);
}
function turnToEditMode(ruleView) {
const brace = ruleView.styleDocument.querySelector(".ruleview-ruleclose");
return focusEditableField(ruleView, brace);
}
async function testComputedView(view) {
const { valueSpan } = getComputedViewProperty(view, "background-image");
const uriSpan = valueSpan.querySelector(".theme-link");
// Scroll to ensure the line is visible as we see the box model by default
valueSpan.scrollIntoView();
const previewTooltip = await assertShowPreviewTooltip(view, uriSpan);
const images = previewTooltip.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"
);
await assertTooltipHiddenOnMouseOut(previewTooltip, uriSpan);
}