Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
const TEST_URI = `
<style type="text/css">
button {
color: tomato;
background-color: green;
}
</style>
<!-- The space as text context for the button is mandatory here, so that the
firstChild of the button is an whitespace text node -->
<button id="button-with-no-quads"> </button>
`;
/**
* Check that we can still open the color picker on elements for which getQuads
* returns an empty array, which is used to compute the background-color
* contrast.
*/
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const hasEmptyQuads = await SpecialPowers.spawn(
gBrowser.selectedBrowser,
[],
() => {
const button = content.document.querySelector("button");
const quads = button.firstChild.getBoxQuads({
box: "content",
relativeTo: content.document,
createFramesForSuppressedWhitespace: false,
});
return quads.length === 0;
}
);
ok(hasEmptyQuads, "The test element has empty quads");
const { inspector, view } = await openRuleView();
await selectNode("button", inspector);
const ruleEl = getRuleViewProperty(view, "button", "color");
ok(ruleEl, "The color declaration was found");
const swatchEl = ruleEl.valueSpan.querySelector(".ruleview-colorswatch");
const colorEl = ruleEl.valueSpan.querySelector(".ruleview-color");
is(colorEl.textContent, "tomato", "The right color value was found");
info("Open the color picker");
const cPicker = view.tooltips.getTooltip("colorPicker");
const onColorPickerReady = cPicker.once("ready");
swatchEl.click();
await onColorPickerReady;
info("Check that the background color of the button was correctly detected");
const contrastEl = cPicker.tooltip.container.querySelector(
".contrast-value-and-swatch.contrast-ratio-single"
);
ok(
contrastEl.style.cssText.includes(
"--accessibility-contrast-bg: rgba(0,128,0,1)"
),
"The background color contains the expected value"
);
info("Check that the color picker can be used");
await simulateColorPickerChange(view, cPicker, [255, 0, 0, 1], {
selector: "button",
name: "color",
value: "rgb(255, 0, 0)",
});
await hideTooltipAndWaitForRuleViewChanged(cPicker, view);
});