summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-counter-styles/cssom
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-counter-styles/cssom')
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-additive-symbols-setter-invalid.html31
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-additive-symbols-setter-ref.html9
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-additive-symbols-setter.html26
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-fallback-setter-invalid.html30
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-fallback-setter-ref.html9
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-fallback-setter.html26
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-name-setter-invalid.html46
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-name-setter-ref.html14
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-name-setter.html43
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-negative-setter-invalid.html29
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-negative-setter-ref.html9
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-negative-setter.html25
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-pad-setter-invalid.html30
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-pad-setter-ref.html9
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-pad-setter.html25
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-prefix-suffix-setter-invalid.html36
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-prefix-suffix-setter-ref.html9
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-prefix-suffix-setter.html27
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-range-setter-invalid.html31
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-range-setter-ref.html9
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-range-setter.html26
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-symbols-setter-invalid.html30
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-symbols-setter-ref.html9
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-symbols-setter.html26
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-system-setter-1.html26
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-system-setter-2.html25
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-system-setter-invalid.html34
-rw-r--r--testing/web-platform/tests/css/css-counter-styles/cssom/cssom-system-setter-ref.html9
28 files changed, 658 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-additive-symbols-setter-invalid.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-additive-symbols-setter-invalid.html
new file mode 100644
index 0000000000..fd382553df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-additive-symbols-setter-invalid.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule additiveSymbols setter with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-additive-symbols-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: additive;
+ additive-symbols: 2 C, 1 B, 0 A;
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside" start=0>
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const foo_rule = sheet.sheet.rules[0];
+
+// Invalid values should be ignored
+foo_rule.additiveSymbols = '';
+foo_rule.additiveSymbols = 'A B C';
+foo_rule.additiveSymbols = '1 B, 2 C, 0 A';
+foo_rule.additiveSymbols = '2 C C, 1 B, 0 A';
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-additive-symbols-setter-ref.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-additive-symbols-setter-ref.html
new file mode 100644
index 0000000000..a09788e369
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-additive-symbols-setter-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule additiveSymbols setter</title>
+
+<ol>
+ <div>A.</div>
+ <div>B.</div>
+ <div>C.</div>
+</ol>
+
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-additive-symbols-setter.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-additive-symbols-setter.html
new file mode 100644
index 0000000000..1ff6b42446
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-additive-symbols-setter.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule additiveSymbols setter</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-additive-symbols-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: additive;
+ additive-symbols: 1 I, 0 O;
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside" start=0>
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const foo_rule = sheet.sheet.rules[0];
+foo_rule.additiveSymbols = '2 C, 1 B, 0 A';
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-fallback-setter-invalid.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-fallback-setter-invalid.html
new file mode 100644
index 0000000000..c5c43a3223
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-fallback-setter-invalid.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule fallback setter with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-fallback-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: fixed;
+ symbols: A B;
+ fallback: lower-roman;
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const foo_rule = sheet.sheet.rules[0];
+
+// Invalid values should be ignored
+foo_rule.fallback = 'none';
+foo_rule.fallback = 'lower-roman upper-roman'
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-fallback-setter-ref.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-fallback-setter-ref.html
new file mode 100644
index 0000000000..da4bb59820
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-fallback-setter-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule fallback setter</title>
+
+<ol>
+ <div>A.</div>
+ <div>B.</div>
+ <div>iii.</div>
+</ol>
+
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-fallback-setter.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-fallback-setter.html
new file mode 100644
index 0000000000..399463f3f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-fallback-setter.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule fallback setter</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-fallback-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: fixed;
+ symbols: A B;
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const foo_rule = sheet.sheet.rules[0];
+foo_rule.fallback = 'lower-roman';
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-name-setter-invalid.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-name-setter-invalid.html
new file mode 100644
index 0000000000..01edc415e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-name-setter-invalid.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule name setter with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-name-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: fixed;
+ symbols: A B C;
+}
+
+@counter-style bar {
+ system: fixed;
+ symbols: X Y Z;
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<ol style="list-style-type: bar; list-style-position: inside">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const rule = sheet.sheet.rules[0];
+
+// Invalid values should be ignored
+rule.name = '';
+rule.name = '123';
+rule.name = 'initial';
+rule.name = 'inherit';
+rule.name = 'unset';
+rule.name = 'none';
+rule.name = 'disc';
+rule.name = 'decimal';
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-name-setter-ref.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-name-setter-ref.html
new file mode 100644
index 0000000000..91251ad843
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-name-setter-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule name setter</title>
+
+<ol>
+ <div>A.</div>
+ <div>B.</div>
+ <div>C.</div>
+</ol>
+
+<ol>
+ <div>X.</div>
+ <div>Y.</div>
+ <div>Z.</div>
+</ol>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-name-setter.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-name-setter.html
new file mode 100644
index 0000000000..4cb926dd12
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-name-setter.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule name setter</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-name-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: fixed;
+ symbols: A B C;
+}
+
+@counter-style bar {
+ system: fixed;
+ symbols: '1' '2' '3';
+}
+
+@counter-style foo {
+ system: fixed;
+ symbols: X Y Z;
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<ol style="list-style-type: bar; list-style-position: inside">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+// Change the last counter style name from 'foo' to 'bar'
+const sheet = document.getElementById('sheet');
+const rule = sheet.sheet.rules[2];
+rule.name = 'bar';
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-negative-setter-invalid.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-negative-setter-invalid.html
new file mode 100644
index 0000000000..e15447ba4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-negative-setter-invalid.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule negative setter with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-negative-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: extends decimal;
+ negative: '(' ')';
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside" start="-3">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const foo_rule = sheet.sheet.rules[0];
+
+// Invalid values should be ignored
+foo_rule.negative = 'X Y Z';
+foo_rule.negative = '"X" "Y" "Z"';
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-negative-setter-ref.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-negative-setter-ref.html
new file mode 100644
index 0000000000..7d465a3335
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-negative-setter-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule negative setter</title>
+
+<ol>
+ <div>(3).</div>
+ <div>(2).</div>
+ <div>(1).</div>
+</ol>
+
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-negative-setter.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-negative-setter.html
new file mode 100644
index 0000000000..06238841ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-negative-setter.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule negative setter</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-negative-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: extends decimal;
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside" start="-3">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const foo_rule = sheet.sheet.rules[0];
+foo_rule.negative = '"(" ")"';
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-pad-setter-invalid.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-pad-setter-invalid.html
new file mode 100644
index 0000000000..c263a1bb5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-pad-setter-invalid.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule pad setter with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-pad-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: extends decimal;
+ pad: 3 '0';
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const foo_rule = sheet.sheet.rules[0];
+
+// Invalid values should be ignored
+foo_rule.pad = '-1 "0"';
+foo_rule.pad = '3';
+foo_rule.pad = '3 "X" "Y"';
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-pad-setter-ref.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-pad-setter-ref.html
new file mode 100644
index 0000000000..6184686f0e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-pad-setter-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule pad setter</title>
+
+<ol>
+ <div>001.</div>
+ <div>002.</div>
+ <div>003.</div>
+</ol>
+
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-pad-setter.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-pad-setter.html
new file mode 100644
index 0000000000..df1732dae6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-pad-setter.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule pad setter</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-pad-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: extends decimal;
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const foo_rule = sheet.sheet.rules[0];
+foo_rule.pad = '3 "0"';
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-prefix-suffix-setter-invalid.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-prefix-suffix-setter-invalid.html
new file mode 100644
index 0000000000..7aba3a0a5b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-prefix-suffix-setter-invalid.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule prefix and suffix setters with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-prefix-suffix-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: cyclic;
+ symbols: A B C;
+ prefix: '(';
+ suffix: ')';
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const foo_rule = sheet.sheet.rules[0];
+
+// Invalid values should be ignored
+foo_rule.prefix = '"(" "("';
+foo_rule.prefix = ')';
+foo_rule.prefix = '123';
+
+foo_rule.suffix = '")" ")"';
+foo_rule.suffix = '(';
+foo_rule.suffix = '456';
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-prefix-suffix-setter-ref.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-prefix-suffix-setter-ref.html
new file mode 100644
index 0000000000..bf52d54adb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-prefix-suffix-setter-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule prefix and suffix setters</title>
+
+<ol>
+ <div>(A)</div>
+ <div>(B)</div>
+ <div>(C)</div>
+</ol>
+
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-prefix-suffix-setter.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-prefix-suffix-setter.html
new file mode 100644
index 0000000000..899caa26ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-prefix-suffix-setter.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule prefix and suffix setters</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-prefix-suffix-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: cyclic;
+ symbols: A B C;
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const foo_rule = sheet.sheet.rules[0];
+foo_rule.prefix = '"("';
+foo_rule.suffix = '")"';
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-range-setter-invalid.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-range-setter-invalid.html
new file mode 100644
index 0000000000..2fc459551f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-range-setter-invalid.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule range setter with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-range-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: cyclic;
+ symbols: A B C;
+ range: 1 2;
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const foo_rule = sheet.sheet.rules[0];
+
+// Invalid values should be ignored
+foo_rule.range = "1 2 3";
+foo_rule.range = "3 1"
+foo_rule.range = "1 infinity"
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-range-setter-ref.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-range-setter-ref.html
new file mode 100644
index 0000000000..0129b467c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-range-setter-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule range setter</title>
+
+<ol>
+ <div>A.</div>
+ <div>B.</div>
+ <div>3.</div>
+</ol>
+
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-range-setter.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-range-setter.html
new file mode 100644
index 0000000000..10d94f0cdb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-range-setter.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule range setter</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-range-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: cyclic;
+ symbols: A B C;
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const foo_rule = sheet.sheet.rules[0];
+foo_rule.range = "1 2";
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-symbols-setter-invalid.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-symbols-setter-invalid.html
new file mode 100644
index 0000000000..3b40b0d4a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-symbols-setter-invalid.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule symbols setter with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-symbols-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: alphabetic;
+ symbols: A B C;
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const foo_rule = sheet.sheet.rules[0];
+
+// Invalid values should be ignored
+foo_rule.symbols = '';
+foo_rule.symbols = '1 2 *';
+foo_rule.symbols = 'A';
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-symbols-setter-ref.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-symbols-setter-ref.html
new file mode 100644
index 0000000000..64967db5ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-symbols-setter-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule symbols setter</title>
+
+<ol>
+ <div>A.</div>
+ <div>B.</div>
+ <div>C.</div>
+</ol>
+
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-symbols-setter.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-symbols-setter.html
new file mode 100644
index 0000000000..cd9f66d238
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-symbols-setter.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule symbols setter</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-symbols-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: cyclic;
+ symbols: X Y Z;
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const foo_rule = sheet.sheet.rules[0];
+foo_rule.symbols = "A B C";
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-system-setter-1.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-system-setter-1.html
new file mode 100644
index 0000000000..a616a60e0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-system-setter-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule system setter with 'fixed' system</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-system-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: fixed;
+ symbols: A B C;
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside" start=0>
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const foo_rule = sheet.sheet.rules[0];
+foo_rule.system = "fixed 0";
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-system-setter-2.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-system-setter-2.html
new file mode 100644
index 0000000000..f1cc65d7fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-system-setter-2.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule system setter with 'extends' system</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-system-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: extends decimal;
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const foo_rule = sheet.sheet.rules[0];
+foo_rule.system = "extends upper-alpha";
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-system-setter-invalid.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-system-setter-invalid.html
new file mode 100644
index 0000000000..e56ec1a23e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-system-setter-invalid.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule system setter with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="match" href="cssom-system-setter-ref.html">
+<style id="sheet">
+@counter-style foo {
+ system: fixed;
+ symbols: A B C;
+}
+</style>
+
+<ol style="list-style-type: foo; list-style-position: inside">
+ <li></li>
+ <li></li>
+ <li></li>
+</ol>
+
+<script>
+// Force layout update before changing the rule
+document.body.offsetWidth;
+
+const sheet = document.getElementById('sheet');
+const foo_rule = sheet.sheet.rules[0];
+
+// Values with syntax errors should be ignored
+foo_rule.system = '123';
+foo_rule.system = 'extends none';
+foo_rule.system = 'extends decimal decimal';
+
+// Values changing algorithm should be ignored
+foo_rule.system = 'numeric';
+foo_rule.system = 'extends lower-roman';
+</script>
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-system-setter-ref.html b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-system-setter-ref.html
new file mode 100644
index 0000000000..98bd994659
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/cssom-system-setter-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<title>CSSCounterStyleRule system setter</title>
+
+<ol>
+ <div>A.</div>
+ <div>B.</div>
+ <div>C.</div>
+</ol>
+