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
|
<!doctype html>
<html>
<meta charset="utf-8">
<title>Accessing properties via CSSStyleDeclaration</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#the-cssstyledeclaration-interface">
<!-- this is really a crash test, but let's claim it's a testharness test -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@font-face {}
</style>
<div id="testElement"></div>
<script>
// Goal here is to test a cross-section of prefixed, properties, and descriptors.
const properties = [
"-apple-color-filter", "-apple-pay-button-style", "-epub-writing-mode",
"-webkit-flex", "gap", "grid-gap", "overscroll-behavior",
"src", "unicode-range",
];
const el = document.getElementById("testElement");
const decls = [window.getComputedStyle(el), el.style, document.styleSheets[0].cssRules[0].style];
for (const prop of properties) {
test(() => {
for (const decl of decls) {
let _;
_ = decl[prop];
try {
decl[prop] = "nonsense";
} catch {
assert_equals(decl, decls[0]);
}
_ = decl.cssText;
try {
decl.cssText = `${prop}: nonsense`;
} catch {
assert_equals(decl, decls[0]);
}
_ = decl.getPropertyValue(prop);
_ = decl.getPropertyPriority(prop);
if ("getPropertyCSSValue" in decl) {
_ = decl.getPropertyCSSValue(prop);
}
try {
decl.setProperty(prop, "nonsense", "");
} catch {
assert_equals(decl, decls[0]);
}
try {
decl.removeProperty(prop);
} catch {
assert_equals(decl, decls[0]);
}
}
}, prop);
}
</script>
|
