1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"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);
});
|
