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
107
108
109
|
<!DOCTYPE HTML>
<html>
<head>
<title>Test InspectorUtils.getCSSRegisteredProperties</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style>
@property --color-1 {
syntax: "<color>";
inherits: true;
initial-value: blue;
}
@property --color-2 {
syntax: "*";
inherits: false;
}
</style>
</head>
<body>
<code>InspectorUtils.getCSSRegisteredProperties</code>
<script>
"use strict";
/** Test for InspectorUtils.getCSSRegisteredProperties */
const { Assert } = SpecialPowers.ChromeUtils.importESModule(
"resource://testing-common/Assert.sys.mjs"
);
const InspectorUtils = SpecialPowers.InspectorUtils;
CSS.registerProperty({
name: "--length-1",
syntax: "<length>",
initialValue: "10px",
inherits: true,
});
CSS.registerProperty({
name: "--length-2",
syntax: "foo | <integer>+ | <percentage> | <length># | auto",
initialValue: "100vw",
inherits: true
});
CSS.registerProperty({
name: "--length-3",
syntax: "*",
inherits: false
});
CSS.registerProperty({
name: "--length-4",
syntax: "*",
initialValue: "",
inherits: false
});
// The order isn't guaranteed, so sort variable by their name.
// We get a Proxy, so build another array to properly sort it.
const results = Array.from(InspectorUtils.getCSSRegisteredProperties(document));
results.sort((a,b) => a.name < b.name ? -1 : 1)
Assert.deepEqual(
results,
[{
name: "--color-1",
syntax: "<color>",
inherits: true,
initialValue: "blue",
fromJS: false,
},{
name: "--color-2",
syntax: "*",
inherits: false,
initialValue: null,
fromJS: false,
},{
name: "--length-1",
syntax: "<length>",
inherits: true,
initialValue: "10px",
fromJS: true,
}, {
name: "--length-2",
syntax: "foo | <integer>+ | <percentage> | <length># | auto",
inherits: true,
initialValue: "100vw",
fromJS: true,
}, {
name: "--length-3",
syntax: "*",
inherits: false,
initialValue: null,
fromJS: true,
}, {
name: "--length-4",
syntax: "*",
inherits: false,
initialValue: "",
fromJS: true,
}],
`Got registered CSS properties`
);
// Test needs at least one `ok/is` call
ok(true, "Success!")
</script>
</pre>
</body>
</html>
|
