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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that color swatches are displayed next to colors in the rule-view.
const TEST_URI = `
<style type="text/css">
body {
color: red;
background-color: #ededed;
background-image: url(chrome://branding/content/icon64.png);
border: 2em solid rgba(120, 120, 120, .5);
}
* {
color: blue;
background: linear-gradient(
to right,
#f00,
#f008,
#00ff00,
#00ff0080,
rgb(31,170,217),
rgba(31,170,217,.5),
hsl(5, 5%, 5%),
hsla(5, 5%, 5%, 0.25),
#F00,
#F008,
#00FF00,
#00FF0080,
RGB(31,170,217),
RGBA(31,170,217,.5),
HSL(5, 5%, 5%),
HSLA(5, 5%, 5%, 0.25)
),
radial-gradient(
red,
blue
),
conic-gradient(
from 90deg at 0 0,
lemonchiffon,
peachpuff
),
repeating-linear-gradient(blue, pink),
repeating-radial-gradient(limegreen, bisque),
repeating-conic-gradient(chocolate, olive);
box-shadow: inset 0 0 2px 20px red, inset 0 0 2px 40px blue;
filter: drop-shadow(2px 2px 2px salmon);
text-shadow: 2px 2px color-mix(
in srgb,
color-mix(in srgb, tomato 30%, #FA8072),
hsla(5, 5%, 5%, 0.25) 5%
);
}
</style>
Testing the color picker tooltip!
`;
// Tests that properties in the rule-view contain color swatches.
// Each entry in the test array should contain:
// {
// selector: the rule-view selector to look for the property in
// propertyName: the property to test
// nb: the number of color swatches this property should have
// }
const TESTS = [
{ selector: "body", propertyName: "color", nb: 1 },
{ selector: "body", propertyName: "background-color", nb: 1 },
{ selector: "body", propertyName: "border", nb: 1 },
{ selector: "*", propertyName: "color", nb: 1 },
{ selector: "*", propertyName: "background", nb: 26 },
{ selector: "*", propertyName: "box-shadow", nb: 2 },
{ selector: "*", propertyName: "filter", nb: 1 },
{ selector: "*", propertyName: "text-shadow", nb: 3 },
];
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { view } = await openRuleView();
for (const { selector, propertyName, nb } of TESTS) {
info(
"Looking for color swatches in property " +
propertyName +
" in selector " +
selector
);
const prop = (
await getRuleViewProperty(view, selector, propertyName, { wait: true })
).valueSpan;
const swatches = prop.querySelectorAll(".ruleview-colorswatch");
ok(swatches.length, "Swatches found in the property");
is(swatches.length, nb, "Correct number of swatches found in the property");
}
});
|
