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
100
101
102
103
104
105
106
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that custom properties are displayed in the computed view.
const TEST_URI = `
<style type="text/css">
body {
--global-custom-property: red;
}
h1 {
color: var(--global-custom-property);
}
#match-1 {
--global-custom-property: blue;
--custom-property-1: lime;
}
#match-2 {
--global-custom-property: gold;
--custom-property-2: cyan;
}
</style>
<h1 id="match-1">Hello</h1>
<h1 id="match-2">World</h1>
`;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openComputedView();
await assertComputedPropertiesForNode(inspector, view, "body", [
{
name: "--global-custom-property",
value: "red",
},
]);
await assertComputedPropertiesForNode(inspector, view, "#match-1", [
{
name: "color",
value: "rgb(0, 0, 255)",
},
{
name: "--custom-property-1",
value: "lime",
},
{
name: "--global-custom-property",
value: "blue",
},
]);
await assertComputedPropertiesForNode(inspector, view, "#match-2", [
{
name: "color",
value: "rgb(255, 215, 0)",
},
{
name: "--custom-property-2",
value: "cyan",
},
{
name: "--global-custom-property",
value: "gold",
},
]);
await assertComputedPropertiesForNode(inspector, view, "html", []);
});
async function assertComputedPropertiesForNode(
inspector,
view,
selector,
expected
) {
await selectNode(selector, inspector);
const computedItems = getComputedViewProperties(view);
is(
computedItems.length,
expected.length,
`Computed view has the expected number of items for "${selector}"`
);
for (let i = 0; i < computedItems.length; i++) {
const expectedData = expected[i];
const computedEl = computedItems[i];
const nameSpan = computedEl.querySelector(".computed-property-name");
const valueSpan = computedEl.querySelector(".computed-property-value");
is(
nameSpan.firstChild.textContent,
expectedData.name,
`computed item #${i} for "${selector}" is the expected one`
);
is(
valueSpan.textContent,
expectedData.value,
`computed item #${i} for "${selector}" has expected value`
);
}
}
|
