Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Checking tooltips dimensions, to make sure their big enough to display their
// content
const TEST_URI = `
<style type="text/css">
div {
width: 300px;height: 300px;border-radius: 50%;
background: red url(chrome://global/skin/icons/help.svg);
}
</style>
<div></div>
`;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
await selectNode("div", inspector);
await testImageDimension(view);
await testPickerDimension(view);
});
async function testImageDimension(ruleView) {
info("Testing background-image tooltip dimensions");
const tooltip = ruleView.tooltips.getTooltip("previewTooltip");
const panel = tooltip.panel;
const { valueSpan } = getRuleViewProperty(ruleView, "div", "background");
const uriSpan = valueSpan.querySelector(".theme-link");
// Make sure there is a hover tooltip for this property, this also will fill
// the tooltip with its content
const previewTooltip = await assertShowPreviewTooltip(ruleView, uriSpan);
// Let's not test for a specific size, but instead let's make sure it's at
// least as big as the image
const imageRect = panel.querySelector("img").getBoundingClientRect();
const panelRect = panel.getBoundingClientRect();
Assert.greaterOrEqual(
panelRect.width,
imageRect.width,
"The panel is wide enough to show the image"
);
Assert.greaterOrEqual(
panelRect.height,
imageRect.height,
"The panel is high enough to show the image"
);
await assertTooltipHiddenOnMouseOut(previewTooltip, uriSpan);
}
async function testPickerDimension(ruleView) {
info("Testing color-picker tooltip dimensions");
const { valueSpan } = getRuleViewProperty(ruleView, "div", "background");
const swatch = valueSpan.querySelector(".inspector-colorswatch");
const cPicker = ruleView.tooltips.getTooltip("colorPicker");
const onReady = cPicker.once("ready");
swatch.click();
await onReady;
// The colorpicker spectrum's iframe has a fixed width height, so let's
// make sure the tooltip is at least as big as that
const spectrumRect = cPicker.spectrum.element.getBoundingClientRect();
const panelRect = cPicker.tooltip.container.getBoundingClientRect();
Assert.greaterOrEqual(
panelRect.width,
spectrumRect.width,
"The panel is wide enough to show the picker"
);
Assert.greaterOrEqual(
panelRect.height,
spectrumRect.height,
"The panel is high enough to show the picker"
);
const onHidden = cPicker.tooltip.once("hidden");
const onRuleViewChanged = ruleView.once("ruleview-changed");
cPicker.hide();
await onHidden;
await onRuleViewChanged;
}