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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
<!DOCTYPE html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1894251
-->
<title>Test for CSSStyleDeclaration::hasLonghandProperty</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
<div
id="target"
align="right"
style="
--in-style-attribute:red;
--in-style-attribute-empty: ;
color: blue;
outline: 1px solid lime;
caret-color: var(--in-style-attribute);"
></div>
<style>
#target {
--in-rule: hotpink;
--in-rule-empty: ;
background-color: peachpuff;
text-decoration-color: var(--in-rule);
padding: 1em;
}
@property --my-color {
syntax: "<color>";
inherits: false;
initial-value: #c0ffee;
}
</style>
<script>
add_task(async () => {
const InspectorUtils = SpecialPowers.InspectorUtils;
const el = document.querySelector("#target");
// Use InspectorUtils.getMatchingCSSRules so we get InspectorDeclaration instances, like
// we do in DevTools.
const rules = InspectorUtils.getMatchingCSSRules(el);
info("Check that hasProperty returns expected values for regular rule CSSStyleProperties")
const targetRule = rules.find(r => r.selectorText === "#target");
ok(
targetRule.style.hasLonghandProperty("background-color"),
`hasProperty returned true for "background-color" property on #target rule`
);
ok(
targetRule.style.hasLonghandProperty("text-decoration-color"),
`hasProperty returned true for property with a CSS variable value on #target rule`
);
ok(
!targetRule.style.hasLonghandProperty("caret-color"),
`hasProperty returned false for non-defined "caret-color" property on #target rule`
);
ok(
!targetRule.style.hasLonghandProperty("my-amazing-property"),
`hasProperty returned false for invalid property on #target rule`
);
ok(
targetRule.style.hasLonghandProperty("--in-rule"),
`hasProperty returned true for "--in-rule" property on #target rule`
);
ok(
targetRule.style.hasLonghandProperty("--in-rule-empty"),
`hasProperty returned true for "--in-rule-empty" property on #target rule`
);
ok(
!targetRule.style.hasLonghandProperty("--my-color"),
`hasProperty returned false for registered but unset "--my-color" property on #target rule`
);
ok(
!targetRule.style.hasLonghandProperty("--unknown"),
`hasProperty returned false for "--unknown" property on #target rule`
);
ok(
!targetRule.style.hasLonghandProperty("padding"),
`hasProperty returned false for shorthand property (padding) on #target rule`
);
ok(
targetRule.style.hasLonghandProperty("padding-top"),
`hasProperty returned true for longhand property (padding-top) on #target rule`
);
info("Check that hasProperty returns expected values for style attribute InspectorDeclaration CSSStyleProperties")
const styleAttributeInspectorDeclaration = rules.find(r => r.declarationOrigin === "style-attribute");
ok(
styleAttributeInspectorDeclaration.style.hasLonghandProperty("color"),
`hasProperty returned true for "color" property on style attribute`
);
ok(
styleAttributeInspectorDeclaration.style.hasLonghandProperty("caret-color"),
`hasProperty returned true for property with a CSS variable value on style attribute`
);
ok(
!styleAttributeInspectorDeclaration.style.hasLonghandProperty("background-color"),
`hasProperty returned false for non-defined "background-color" property on style attribute`
);
ok(
styleAttributeInspectorDeclaration.style.hasLonghandProperty("--in-style-attribute"),
`hasProperty returned true for "--in-style-attribute" property on style attribute`
);
ok(
styleAttributeInspectorDeclaration.style.hasLonghandProperty("--in-style-attribute-empty"),
`hasProperty returned true for "--in-style-attribute-empty" property on style attribute`
);
ok(
!styleAttributeInspectorDeclaration.style.hasLonghandProperty("--my-color"),
`hasProperty returned false for registered but unset "--my-color" property on style attribute`
);
ok(
!styleAttributeInspectorDeclaration.style.hasLonghandProperty("--unknown"),
`hasProperty returned false for "--unknown" property on style attribute`
);
ok(
!styleAttributeInspectorDeclaration.style.hasLonghandProperty("outline"),
`hasProperty returned false for shorthand property (outline) on style attribute`
);
ok(
styleAttributeInspectorDeclaration.style.hasLonghandProperty("outline-color"),
`hasProperty returned true for longhand property (outline-color) on style attribute`
);
info("Check that hasProperty returns expected values for pres hints InspectorDeclaration CSSStyleProperties")
const presHintsInspectorDeclaration = rules.find(r => r.declarationOrigin === "pres-hints");
ok(
presHintsInspectorDeclaration.style.hasLonghandProperty("text-align"),
`hasProperty returned true for "text-align" property on pres-hints style`
);
ok(
!presHintsInspectorDeclaration.style.hasLonghandProperty("background-color"),
`hasProperty returned false for non-defined "background-color" property on pres-hints style`
);
ok(
!presHintsInspectorDeclaration.style.hasLonghandProperty("--my-color"),
`hasProperty returned false for registered but unset "--my-color" property on pres-hints style`
);
ok(
!presHintsInspectorDeclaration.style.hasLonghandProperty("--unknown"),
`hasProperty returned false for "--unknown" property on pres-hints style`
);
});
</script>
|
