Skip to content

Commit f15c830

Browse files
acemiracemir
authored
Add failing test for cssText setter
See jsdom/cssstyle#249.
1 parent a833763 commit f15c830

2 files changed

Lines changed: 68 additions & 0 deletions

File tree

‎test/web-platform-tests/to-upstream-expectations.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ css/cssom/style-border-shorthand-var.html:
1313
"border shorthand containing var()": [fail, Need cssstyle fix; https://github.com/jsdom/cssstyle/issues/247]
1414
css/cssom/style-element-inline-important.html:
1515
"Element CSS inline style with !important": [fail, Need cssstyle fix; https://github.com/jsdom/jsdom/issues/3940]
16+
css/cssom/style-set-cssText.html: [fail, Need cssstyle fix; https://github.com/jsdom/cssstyle/pull/249]
1617
css/cssom/style-set-custom-property-priority.html: [fail, Need to fix getComputedStyle; related https://github.com/jsdom/cssstyle/issues/225]
1718
css/cssom/style-set-property.html:
1819
"set null for cssRule.style.setProperty": [fail, Need cssstyle fix; https://github.com/jsdom/cssstyle/issues/196]

‎test/web-platform-tests/to-upstream/css/cssom/style-set-cssText.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>Setting style.cssText keeps only valid properties</title>
4+
<link rel="help" href="https://drafts.csswg.org/cssom/#cssstyledeclaration">
5+
<link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-csstext">
6+
<script src="/resources/testharness.js"></script>
7+
<script src="/resources/testharnessreport.js"></script>
8+
<!-- regression test for https://github.com/jsdom/cssstyle/pull/249 -->
9+
10+
<style>
11+
.div {
12+
color: red;
13+
}
14+
</style>
15+
<div id="div" class="div"></div>
16+
<script>
17+
"use strict";
18+
19+
const cssRule = document.styleSheets[0].cssRules[0];
20+
21+
test(() => {
22+
assert_equals(cssRule.style.cssText, "color: red;");
23+
}, "initial value of cssRule.style.cssText");
24+
25+
test(() => {
26+
cssRule.style.cssText = "color: green!";
27+
assert_equals(cssRule.style.cssText, "");
28+
}, "sets empty string for invalid cssText");
29+
30+
test(() => {
31+
// valid property followed by invalid property followed by valid property
32+
cssRule.style.cssText = "color: green; color: invalid!; background: blue;";
33+
// ignores invalid properties
34+
assert_equals(cssRule.style.cssText, "color: green; background: blue;");
35+
36+
// only valid properties
37+
cssRule.style.cssText = "color: olivedrab; color: peru; background: bisque;";
38+
// keeps the last one of the same property
39+
assert_equals(cssRule.style.cssText, "color: peru; background: bisque;");
40+
41+
// valid property followed by a nested selector rule
42+
cssRule.style.cssText = "color: olivedrab; &.d { color: peru; }";
43+
// ignores the nested selector rule
44+
assert_equals(cssRule.style.cssText, "color: olivedrab;");
45+
46+
// valid property followed by a nested selector rule followed by two valid properties and an invalid property
47+
cssRule.style.cssText = "color: olivedrab; &.d { color: peru; } color: green; background: red; invalid: rule;";
48+
// ignores the property immediately after the nested rule
49+
assert_equals(cssRule.style.cssText, "color: olivedrab; background: red;");
50+
51+
// valid property followed by a at-rule followed by a valid property
52+
cssRule.style.cssText = "color: blue; @media screen { color: red; } color: orange;";
53+
// includes the the property immediately after an at-rule
54+
assert_equals(cssRule.style.cssText, "color: orange;");
55+
56+
// valid property followed by a nested rule, two at-rules and two valid properties
57+
cssRule.style.cssText = `
58+
color: blue;
59+
&.d { color: peru; }
60+
@media screen { color: red; }
61+
@layer { color: black; }
62+
color: pink;
63+
background: orange;`;
64+
// ignores the first property found after the nested selector rule along with the at-rules
65+
assert_equals(cssRule.style.cssText, "color: blue; background: orange;");
66+
}, "sets only the valid properties for partially valid cssText");
67+
</script>

0 commit comments

Comments
 (0)