summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-animations/parsing
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-animations/parsing')
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-composition-computed.tentative.html18
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-composition-invalid.tentative.html21
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-composition-valid.tentative.html20
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-computed.html52
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-delay-computed.html20
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-computed.tentative.html12
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-invalid.tentative.html29
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-valid.tentative.html11
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-delay-invalid.html22
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand-computed.html16
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand.html49
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-computed.tentative.html12
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-invalid.tentative.html29
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-valid.tentative.html11
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-delay-valid.html20
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-direction-computed.html18
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-direction-invalid.html21
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-direction-valid.html21
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-duration-computed.html48
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-duration-invalid.html23
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-duration-valid.html19
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-computed.html18
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-invalid.html21
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-valid.html21
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-invalid.html30
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-computed.html18
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-invalid.html22
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-valid.html22
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-name-computed.html32
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-name-invalid.html25
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-name-valid.html29
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-play-state-computed.html18
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-play-state-invalid.html21
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-play-state-valid.html19
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-range-end-computed.html36
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-range-end-invalid.html20
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-range-end-valid.html32
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-range-shorthand.html178
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-range-start-computed.html35
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-range-start-invalid.html16
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-range-start-valid.html32
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-shorthand.html57
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/animation-valid.html38
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/keyframes-allowed-properties.html35
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/keyframes-name-invalid.html46
-rw-r--r--testing/web-platform/tests/css/css-animations/parsing/keyframes-name-valid.html70
46 files changed, 1383 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-composition-computed.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-composition-computed.tentative.html
new file mode 100644
index 0000000000..535a40c9ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-composition-computed.tentative.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: getComputedStyle().animationComposition</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-composition">
+<meta name="assert" content="animation-composition computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("animation-composition", "replace, add, accumulate");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-composition-invalid.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-composition-invalid.tentative.html
new file mode 100644
index 0000000000..a08b33c84d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-composition-invalid.tentative.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-composition with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-composition">
+<meta name="assert" content="animation-composition supports only the grammar '<single-animation-composition> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("animation-composition", "auto");
+test_invalid_value("animation-composition", "add replace");
+
+test_invalid_value("animation-composition", "add, initial");
+test_invalid_value("animation-composition", "initial, add");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-composition-valid.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-composition-valid.tentative.html
new file mode 100644
index 0000000000..8dca8dbabe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-composition-valid.tentative.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-composition with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-composition">
+<meta name="assert" content="animation-composition supports the full grammar '<single-animation-composition> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("animation-composition", "replace");
+test_valid_value("animation-composition", "add");
+test_valid_value("animation-composition", "accumulate");
+test_valid_value("animation-composition", "replace, add, accumulate");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-computed.html
new file mode 100644
index 0000000000..2a70585aad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-computed.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: getComputedStyle().animation</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation">
+<meta name="assert" content="animation computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+// <single-animation> = <time> || <easing-function> || <time> ||
+// <single-animation-iteration-count> || <single-animation-direction> ||
+// <single-animation-fill-mode> || <single-animation-play-state> ||
+// [ none | <keyframes-name> ]
+
+test(() => {
+ assert_equals(getComputedStyle(document.getElementById('target')).animation, "none");
+}, "Default animation value");
+
+test_computed_value("animation", "1s", "1s");
+test_computed_value("animation", "cubic-bezier(0, -2, 1, 3)", "cubic-bezier(0, -2, 1, 3)");
+test_computed_value("animation", "ease-in-out", "ease-in-out");
+test_computed_value("animation", "1s -3s", "1s -3s");
+test_computed_value("animation", "4", "4");
+test_computed_value("animation", "reverse", "reverse");
+test_computed_value("animation", "both", "both");
+test_computed_value("animation", "paused", "paused");
+test_computed_value("animation", "none", "none");
+test_computed_value("animation", "anim", "anim");
+
+test_computed_value("animation", "anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)",
+ "1s cubic-bezier(0, -2, 1, 3) -3s 4 reverse both paused anim");
+
+test_computed_value("animation", "anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)",
+ "reverse both paused anim, 1s cubic-bezier(0, -2, 1, 3) -3s 4");
+
+test_computed_value("animation", "none, none", "none, none");
+
+test(() => {
+ const target = document.getElementById('target');
+ target.style.animation = "initial";
+ target.style.animationDelay = "1s";
+ assert_equals(getComputedStyle(target).animation, "0s 1s");
+}, "Animation with a delay but no duration");
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-computed.html
new file mode 100644
index 0000000000..832466ac06
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-computed.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: getComputedStyle().animationDelay</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-delay">
+<meta name="assert" content="animation-delay converts to seconds.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("animation-delay", "-500ms", "-0.5s");
+test_computed_value("animation-delay", "calc(2 * 3s)", "6s");
+test_computed_value("animation-delay", "20s, 10s");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-computed.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-computed.tentative.html
new file mode 100644
index 0000000000..77f9670638
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-computed.tentative.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-end">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<div id="target"></div>
+<script>
+test_computed_value("animation-delay-end", "initial", "0s");
+test_computed_value("animation-delay-end", "-500ms", "-0.5s");
+test_computed_value("animation-delay-end", "calc(2 * 3s)", "6s");
+test_computed_value("animation-delay-end", "20s, 10s");
+</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-invalid.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-invalid.tentative.html
new file mode 100644
index 0000000000..7cabd4e8e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-invalid.tentative.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-end">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+test_invalid_value("animation-delay-end", "infinite");
+test_invalid_value("animation-delay-end", "0");
+test_invalid_value("animation-delay-end", "1s 2s");
+test_invalid_value("animation-delay-end", "1s / 2s");
+test_invalid_value("animation-delay-end", "100px");
+test_invalid_value("animation-delay-end", "100%");
+
+test_invalid_value("animation-delay-end", "peek 50%");
+test_invalid_value("animation-delay-end", "50% contain");
+test_invalid_value("animation-delay-end", "50% cover");
+test_invalid_value("animation-delay-end", "50% entry");
+test_invalid_value("animation-delay-end", "50% enter");
+test_invalid_value("animation-delay-end", "50% exit");
+test_invalid_value("animation-delay-end", "contain contain");
+test_invalid_value("animation-delay-end", "auto");
+test_invalid_value("animation-delay-end", "none");
+test_invalid_value("animation-delay-end", "cover 50% enter 50%");
+test_invalid_value("animation-delay-end", "cover 100px");
+test_invalid_value("animation-delay-end", "cover");
+test_invalid_value("animation-delay-end", "contain");
+test_invalid_value("animation-delay-end", "enter");
+test_invalid_value("animation-delay-end", "exit");
+</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-valid.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-valid.tentative.html
new file mode 100644
index 0000000000..162c781bb0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-valid.tentative.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-end">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+test_valid_value("animation-delay-end", "-5ms");
+test_valid_value("animation-delay-end", "0s");
+test_valid_value("animation-delay-end", "10s");
+test_valid_value("animation-delay-end", "20s, 10s");
+</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-invalid.html
new file mode 100644
index 0000000000..1569497bb6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-delay with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-delay">
+<meta name="assert" content="animation-delay supports only the grammar '<single-animation-play-state> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("animation-delay", "infinite");
+test_invalid_value("animation-delay", "0");
+test_invalid_value("animation-delay", "1s 2s 3s");
+
+test_invalid_value("animation-delay", "initial, -3s");
+test_invalid_value("animation-delay", "-3s, initial");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand-computed.html
new file mode 100644
index 0000000000..0a1eb96041
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand-computed.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>animation-delay shorthand (computed values)</title>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<div id="target"></div>
+<script>
+test_computed_value("animation-delay", "1s");
+test_computed_value("animation-delay", "-1s");
+test_computed_value("animation-delay", "1s 2s");
+test_computed_value("animation-delay", "1s, 2s");
+test_computed_value("animation-delay", "1s 2s, 3s");
+test_computed_value("animation-delay", "1s, 2s 3s");
+test_computed_value("animation-delay", "1s, 2s, 3s");
+</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand.html
new file mode 100644
index 0000000000..5c74a4d8e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<title>animation-delay shorthand</title>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+test_valid_value("animation-delay", "1s");
+test_valid_value("animation-delay", "-1s");
+test_valid_value("animation-delay", "1s 2s");
+test_valid_value("animation-delay", "1s, 2s");
+test_valid_value("animation-delay", "1s 2s, 3s");
+test_valid_value("animation-delay", "1s, 2s 3s");
+test_valid_value("animation-delay", "1s, 2s, 3s");
+
+test_invalid_value("animation-delay", "1s 2s 3s");
+test_invalid_value("animation-delay", "0s, 1s 2s 3s");
+test_invalid_value("animation-delay", "1s / 2s");
+test_invalid_value("animation-delay", "1s, 2px");
+test_invalid_value("animation-delay", "#ff0000");
+test_invalid_value("animation-delay", "red");
+test_invalid_value("animation-delay", "thing");
+test_invalid_value("animation-delay", "thing 0%");
+test_invalid_value("animation-delay", "thing 42%");
+test_invalid_value("animation-delay", "thing 100%");
+test_invalid_value("animation-delay", "thing 100px");
+test_invalid_value("animation-delay", "100% thing");
+
+test_shorthand_value('animation-delay', '1s 2s', {
+ 'animation-delay-start': '1s',
+ 'animation-delay-end': '2s',
+});
+
+test_shorthand_value('animation-delay', '1s', {
+ 'animation-delay-start': '1s',
+ 'animation-delay-end': '0s',
+});
+
+test_shorthand_value('animation-delay', '1s 2s, 3s 4s', {
+ 'animation-delay-start': '1s, 3s',
+ 'animation-delay-end': '2s, 4s',
+});
+
+test_shorthand_value('animation-delay', '1s 2s, 3s, 4s 5s', {
+ 'animation-delay-start': '1s, 3s, 4s',
+ 'animation-delay-end': '2s, 0s, 5s',
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-computed.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-computed.tentative.html
new file mode 100644
index 0000000000..bfb89d0267
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-computed.tentative.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<div id="target"></div>
+<script>
+test_computed_value("animation-delay-start", "initial", "0s");
+test_computed_value("animation-delay-start", "-500ms", "-0.5s");
+test_computed_value("animation-delay-start", "calc(2 * 3s)", "6s");
+test_computed_value("animation-delay-start", "20s, 10s");
+</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-invalid.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-invalid.tentative.html
new file mode 100644
index 0000000000..bff31f3789
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-invalid.tentative.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+test_invalid_value("animation-delay-start", "infinite");
+test_invalid_value("animation-delay-start", "0");
+test_invalid_value("animation-delay-start", "1s 2s");
+test_invalid_value("animation-delay-start", "1s / 2s");
+test_invalid_value("animation-delay-start", "100px");
+test_invalid_value("animation-delay-start", "100%");
+
+test_invalid_value("animation-delay-start", "peek 50%");
+test_invalid_value("animation-delay-start", "50% contain");
+test_invalid_value("animation-delay-start", "50% cover");
+test_invalid_value("animation-delay-start", "50% entry");
+test_invalid_value("animation-delay-start", "50% enter");
+test_invalid_value("animation-delay-start", "50% exit");
+test_invalid_value("animation-delay-start", "contain contain");
+test_invalid_value("animation-delay-start", "auto");
+test_invalid_value("animation-delay-start", "none");
+test_invalid_value("animation-delay-start", "cover 50% enter 50%");
+test_invalid_value("animation-delay-start", "cover 100px");
+test_invalid_value("animation-delay-start", "cover");
+test_invalid_value("animation-delay-start", "contain");
+test_invalid_value("animation-delay-start", "enter");
+test_invalid_value("animation-delay-start", "exit");
+</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-valid.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-valid.tentative.html
new file mode 100644
index 0000000000..f52286444e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-valid.tentative.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+test_valid_value("animation-delay-start", "-5ms");
+test_valid_value("animation-delay-start", "0s");
+test_valid_value("animation-delay-start", "10s");
+test_valid_value("animation-delay-start", "20s, 10s");
+</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-valid.html
new file mode 100644
index 0000000000..5ff0416cc6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-valid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-delay with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-delay">
+<meta name="assert" content="animation-delay supports the full grammar '<single-animation-play-state> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("animation-delay", "-5ms");
+test_valid_value("animation-delay", "0s");
+test_valid_value("animation-delay", "10s");
+test_valid_value("animation-delay", "20s, 10s");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-direction-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-direction-computed.html
new file mode 100644
index 0000000000..d99038b3ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-direction-computed.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: getComputedStyle().animationDirection</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-direction">
+<meta name="assert" content="animation-direction computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("animation-direction", "normal, reverse, alternate, alternate-reverse");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-direction-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-direction-invalid.html
new file mode 100644
index 0000000000..5c96216d04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-direction-invalid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-direction with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-direction">
+<meta name="assert" content="animation-direction supports only the grammar '<single-animation-direction> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("animation-direction", "auto");
+test_invalid_value("animation-direction", "normal reverse");
+
+test_invalid_value("animation-direction", "reverse, initial");
+test_invalid_value("animation-direction", "initial, reverse");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-direction-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-direction-valid.html
new file mode 100644
index 0000000000..bcc9acc342
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-direction-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-direction with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-direction">
+<meta name="assert" content="animation-direction supports the full grammar '<single-animation-direction> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("animation-direction", "normal");
+test_valid_value("animation-direction", "reverse");
+test_valid_value("animation-direction", "alternate");
+test_valid_value("animation-direction", "alternate-reverse");
+test_valid_value("animation-direction", "normal, reverse, alternate, alternate-reverse");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-duration-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-duration-computed.html
new file mode 100644
index 0000000000..a8bc1600f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-duration-computed.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: getComputedStyle().animationDuration</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-duration">
+<meta name="assert" content="animation-duration converts to seconds.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("animation-duration", "500ms", "0.5s");
+test_computed_value("animation-duration", "calc(2 * 3s)", "6s");
+test_computed_value("animation-duration", "20s, 10s");
+
+// https://github.com/w3c/csswg-drafts/issues/6530
+test_computed_value("animation-duration", "auto", "0s");
+test_computed_value("animation-duration", "auto, auto", "0s, 0s");
+
+// Test that the resolved value of the specified animation-duration
+// is as expected given some value for animation-timeline.
+function test_auto_duration(duration, timeline, expected) {
+ test((t) => {
+ t.add_cleanup(() => {
+ target.style = "";
+ });
+ target.style.animationDuration = duration;
+ target.style.animationTimeline = timeline;
+ assert_equals(expected, getComputedStyle(target).animationDuration);
+ }, `Resolved value of animation-duration:${duration} with animation-timeline:${timeline}`);
+}
+
+test_auto_duration("auto", "auto", "0s");
+test_auto_duration("auto", "auto, auto", "auto");
+test_auto_duration("auto", "--t", "auto");
+test_auto_duration("auto", "--t, --t2", "auto");
+test_auto_duration("auto", "none", "auto");
+test_auto_duration("auto", "scroll()", "auto");
+test_auto_duration("auto", "view()", "auto");
+test_auto_duration("0s", "auto", "0s");
+test_auto_duration("0s", "auto, auto", "0s");
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-duration-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-duration-invalid.html
new file mode 100644
index 0000000000..bd8cf2adfe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-duration-invalid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-duration with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-duration">
+<meta name="assert" content="animation-duration supports only the grammar '<time> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("animation-duration", '-3s');
+test_invalid_value("animation-duration", '0');
+test_invalid_value("animation-duration", 'infinite');
+test_invalid_value("animation-duration", '1s 2s');
+
+test_invalid_value("animation-duration", 'initial, 1s');
+test_invalid_value("animation-duration", '1s, initial');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-duration-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-duration-valid.html
new file mode 100644
index 0000000000..e65a1a7072
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-duration-valid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-duration with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-duration">
+<meta name="assert" content="animation-duration supports the full grammar '<time> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("animation-duration", '3s');
+test_valid_value("animation-duration", '500ms');
+test_valid_value("animation-duration", '1s, 2s, 3s');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-computed.html
new file mode 100644
index 0000000000..f4083b3833
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-computed.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: getComputedStyle().animationFillMode</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-fill-mode">
+<meta name="assert" content="animation-fill-mode computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("animation-fill-mode", "none, forwards, backwards, both");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-invalid.html
new file mode 100644
index 0000000000..2a82f23546
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-invalid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-fill-mode with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-fill-mode">
+<meta name="assert" content="animation-fill-mode supports only the grammar '<single-animation-fill-mode> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("animation-fill-mode", "auto");
+test_invalid_value("animation-fill-mode", "forwards backwards");
+
+test_invalid_value("animation-fill-mode", "both, initial");
+test_invalid_value("animation-fill-mode", "initial, both");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-valid.html
new file mode 100644
index 0000000000..1f73a821d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-fill-mode with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-fill-mode">
+<meta name="assert" content="animation-fill-mode supports the full grammar '<single-animation-fill-mode> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("animation-fill-mode", "none");
+test_valid_value("animation-fill-mode", "forwards");
+test_valid_value("animation-fill-mode", "backwards");
+test_valid_value("animation-fill-mode", "both");
+test_valid_value("animation-fill-mode", "none, forwards, backwards, both");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-invalid.html
new file mode 100644
index 0000000000..dce5c29fdc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-invalid.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation">
+<meta name="assert" content="animation supports only the grammar '<single-animation> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("animation", "1s 2s 3s");
+test_invalid_value("animation", "-1s -2s");
+
+test_invalid_value("animation", "steps(1) steps(2)");
+
+test_invalid_value("animation", "1 2");
+
+test_invalid_value("animation", "reverse alternate alternate-reverse anim");
+
+test_invalid_value("animation", "both backwards forwards anim");
+
+test_invalid_value("animation", "paused running paused anim");
+
+test_invalid_value("animation", "anim1 timeline1 anim2");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-computed.html
new file mode 100644
index 0000000000..0ac53aa651
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-computed.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: getComputedStyle().animationIterationCount</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-iteration-count">
+<meta name="assert" content="animation-iteration-count computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("animation-iteration-count", "0, infinite, 3");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-invalid.html
new file mode 100644
index 0000000000..621340f7c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-iteration-count with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-iteration-count">
+<meta name="assert" content="animation-iteration-count supports only the grammar '<single-animation-iteration-count> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("animation-iteration-count", "auto");
+test_invalid_value("animation-iteration-count", "-2");
+test_invalid_value("animation-iteration-count", "3 4");
+
+test_invalid_value("animation-iteration-count", "initial, 4");
+test_invalid_value("animation-iteration-count", "4, initial");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-valid.html
new file mode 100644
index 0000000000..be8a837989
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-valid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-iteration-count with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-iteration-count">
+<meta name="assert" content="animation-iteration-count supports the full grammar '<single-animation-iteration-count> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("animation-iteration-count", "0");
+test_valid_value("animation-iteration-count", "3");
+test_valid_value("animation-iteration-count", "4.5");
+test_valid_value("animation-iteration-count", "infinite");
+
+test_valid_value("animation-iteration-count", "0, infinite, 3");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-name-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-name-computed.html
new file mode 100644
index 0000000000..f05dd8b013
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-name-computed.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: getComputedStyle().animationName</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-name">
+<meta name="assert" content="animation-name computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("animation-name", 'none');
+
+test_computed_value("animation-name", 'foo');
+test_computed_value("animation-name", 'Both');
+test_computed_value("animation-name", 'ease-in');
+test_computed_value("animation-name", 'infinite');
+test_computed_value("animation-name", 'paused');
+test_computed_value("animation-name", 'first, second, third');
+test_computed_value("animation-name", '"something"', ["something", '"something"']);
+
+// TODO: Test more strings, after https://github.com/w3c/csswg-drafts/issues/2435
+// is resolved.
+// Examples that need testing either here or in animation-name-invalid.html :
+// '"Initial"', '"initial"', '"None"', '"Default"', '" x "', "1", '" "', '""',
+// '"multi word string"', '"---\\22---"'
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-name-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-name-invalid.html
new file mode 100644
index 0000000000..739641a51d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-name-invalid.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-name with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-name">
+<meta name="assert" content="animation-name supports only the grammar '[ none | <keyframes-name> ]#'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("animation-name", '12');
+test_invalid_value("animation-name", 'one two');
+
+test_invalid_value("animation-name", 'one, initial');
+test_invalid_value("animation-name", 'one, inherit');
+test_invalid_value("animation-name", 'one, unset');
+test_invalid_value("animation-name", 'default, two');
+test_invalid_value("animation-name", 'revert, three');
+test_invalid_value("animation-name", 'revert-layer, four');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-name-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-name-valid.html
new file mode 100644
index 0000000000..1906f9bdb7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-name-valid.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-name with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-name">
+<meta name="assert" content="animation-name supports the full grammar '[ none | <keyframes-name> ]#'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("animation-name", 'NONE', 'none');
+
+test_valid_value("animation-name", 'foo');
+test_valid_value("animation-name", 'Both');
+test_valid_value("animation-name", 'ease-in');
+test_valid_value("animation-name", 'infinite');
+test_valid_value("animation-name", 'paused');
+test_valid_value("animation-name", 'first, second, third');
+
+test_valid_value("animation-name", '"string"', ['"string"', "string"]);
+test_valid_value("animation-name", '"multi word string"', ['"multi word string"', "multi\\ word\\ string"]);
+test_valid_value("animation-name", '"initial"');
+test_valid_value("animation-name", '"---\\22---"', ['\"---\\\"---\"', '---\\\"---']);
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-computed.html
new file mode 100644
index 0000000000..c3ff2aa95f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-computed.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: getComputedStyle().animationPlayState</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-play-state">
+<meta name="assert" content="animation-play-state computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("animation-play-state", "running, paused");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-invalid.html
new file mode 100644
index 0000000000..91a6f01737
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-invalid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-play-state with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-play-state">
+<meta name="assert" content="animation-play-state supports only the grammar '<single-animation-play-state> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("animation-play-state", "auto");
+test_invalid_value("animation-play-state", "paused running");
+
+test_invalid_value("animation-play-state", "paused, initial");
+test_invalid_value("animation-play-state", "initial, paused");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-valid.html
new file mode 100644
index 0000000000..ce6d053ec2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-valid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-play-state with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-play-state">
+<meta name="assert" content="animation-play-state supports the full grammar '<single-animation-play-state> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("animation-play-state", "running");
+test_valid_value("animation-play-state", "paused");
+test_valid_value("animation-play-state", "running, paused");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-range-end-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-range-end-computed.html
new file mode 100644
index 0000000000..4c96ee81b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-range-end-computed.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<div id="target" style="font-size:10px;"></div>
+<script>
+test_computed_value("animation-range-end", "initial", "normal");
+test_computed_value("animation-range-end", "normal");
+test_computed_value("animation-range-end", "cover 0%");
+test_computed_value("animation-range-end", "cover 100%", "cover");
+test_computed_value("animation-range-end", "COVER 0%", "cover 0%");
+test_computed_value("animation-range-end", "COVER 100%", "cover");
+test_computed_value("animation-range-end", "cover 120%");
+test_computed_value("animation-range-end", "0", "0px");
+test_computed_value("animation-range-end", "120%");
+test_computed_value("animation-range-end", "120px");
+test_computed_value("animation-range-end", "cover 42%");
+test_computed_value("animation-range-end", "cover -42%");
+test_computed_value("animation-range-end", "contain 42%");
+test_computed_value("animation-range-end", "exit 42%");
+test_computed_value("animation-range-end", "exit calc(41% + 1%)", "exit 42%");
+test_computed_value("animation-range-end", "exit-crossing 42%");
+test_computed_value("animation-range-end", "exit 1%, cover 2%, contain 0%");
+test_computed_value("animation-range-end", "exit 1%, cover 2%, contain 100%", "exit 1%, cover 2%, contain");
+test_computed_value("animation-range-end", "entry 42px");
+test_computed_value("animation-range-end", "entry-crossing 42px");
+
+test_computed_value("animation-range-end", "contain calc(10% + 10px)");
+test_computed_value("animation-range-end", "entry 1em", "entry 10px");
+test_computed_value("animation-range-end", "exit calc(1em + 10px)", "exit 20px");
+test_computed_value("animation-range-end", "cover");
+test_computed_value("animation-range-end", "contain");
+test_computed_value("animation-range-end", "entry");
+test_computed_value("animation-range-end", "exit");
+</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-range-end-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-range-end-invalid.html
new file mode 100644
index 0000000000..459cdfd0cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-range-end-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+test_invalid_value("animation-range-end", "infinite");
+test_invalid_value("animation-range-end", "1s 2s");
+test_invalid_value("animation-range-end", "1s / 2s");
+
+test_invalid_value("animation-range-end", "peek 50%");
+test_invalid_value("animation-range-end", "50% contain");
+test_invalid_value("animation-range-end", "50% cover");
+test_invalid_value("animation-range-end", "50% entry");
+test_invalid_value("animation-range-end", "50% enter");
+test_invalid_value("animation-range-end", "50% exit");
+test_invalid_value("animation-range-end", "contain contain");
+test_invalid_value("animation-range-end", "none");
+test_invalid_value("animation-range-end", "cover 50% enter 50%");
+</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-range-end-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-range-end-valid.html
new file mode 100644
index 0000000000..c394c475fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-range-end-valid.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+// https://drafts.csswg.org/scroll-animations-1/#view-timelines-ranges
+test_valid_value("animation-range-end", "normal");
+test_valid_value("animation-range-end", "cover 0%");
+test_valid_value("animation-range-end", "cover 100%", "cover");
+test_valid_value("animation-range-end", "cover 120%");
+test_valid_value("animation-range-end", "cover 42%");
+test_valid_value("animation-range-end", "0", "0px");
+test_valid_value("animation-range-end", "120%");
+test_valid_value("animation-range-end", "120px");
+test_valid_value("animation-range-end", "cover -42%");
+test_valid_value("animation-range-end", "contain 42%");
+test_valid_value("animation-range-end", "exit 42%");
+test_valid_value("animation-range-end", "exit 1%, cover 2%, contain 0%");
+test_valid_value("animation-range-end", "exit 1%, cover 2%, contain 100%", "exit 1%, cover 2%, contain");
+test_valid_value("animation-range-end", "exit-crossing 42%");
+test_valid_value("animation-range-end", "entry 42px");
+test_valid_value("animation-range-end", "entry-crossing 42px");
+test_valid_value("animation-range-end", "contain calc(10px + 10%)", "contain calc(10% + 10px)");
+test_valid_value("animation-range-end", "entry 1em");
+test_valid_value("animation-range-end", "exit calc(1em + 10px)");
+test_valid_value("animation-range-end", "entry 42%");
+test_valid_value("animation-range-end", "cover");
+test_valid_value("animation-range-end", "contain");
+test_valid_value("animation-range-end", "entry");
+test_valid_value("animation-range-end", "exit");
+</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-range-shorthand.html b/testing/web-platform/tests/css/css-animations/parsing/animation-range-shorthand.html
new file mode 100644
index 0000000000..8acf0b1c55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-range-shorthand.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<title>animation-range shorthand</title>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<div id="target" style="font-size:10px"></div>
+<script>
+test_valid_value("animation-range", "normal");
+test_valid_value("animation-range", "normal normal", "normal");
+test_valid_value("animation-range", "cover");
+test_valid_value("animation-range", "contain");
+test_valid_value("animation-range", "entry");
+test_valid_value("animation-range", "entry-crossing");
+test_valid_value("animation-range", "exit");
+test_valid_value("animation-range", "exit-crossing");
+test_valid_value("animation-range", "entry, exit");
+
+test_valid_value("animation-range", "entry 0% entry 100%", "entry");
+test_valid_value("animation-range", "entry-crossing 0% entry-crossing 100%",
+ "entry-crossing");
+test_valid_value("animation-range", "exit 0% exit 100%", "exit");
+test_valid_value("animation-range", "exit-crossing 0% exit-crossing 100%",
+ "exit-crossing");
+test_valid_value("animation-range", "cover 0% cover 100%", "cover");
+test_valid_value("animation-range", "contain 0% contain 100%", "contain");
+test_valid_value("animation-range",
+ "entry calc(10% - 10%) entry calc(50% + 50%)", "entry");
+test_valid_value("animation-range", "cover 50%");
+test_valid_value("animation-range", "contain 50%");
+test_valid_value("animation-range", "entry 50%");
+test_valid_value("animation-range", "entry-crossing 50%");
+test_valid_value("animation-range", "exit 50%");
+test_valid_value("animation-range", "exit-crossing 50%");
+test_valid_value("animation-range", "entry 50px exit 100px");
+test_valid_value("animation-range", "exit calc(10% + 50px)");
+
+test_valid_value("animation-range", "entry 50% exit 50%");
+test_valid_value("animation-range",
+ "cover 50% entry 50%, contain 50% exit 50%");
+test_valid_value("animation-range", "50% exit 50%");
+test_valid_value("animation-range", "normal 100px");
+test_valid_value("animation-range", "100px");
+test_valid_value("animation-range", "100px normal", "100px");
+test_valid_value("animation-range", "10% normal", "10%");
+
+test_computed_value("animation-range", "normal");
+test_computed_value("animation-range", "normal normal", "normal");
+test_computed_value("animation-range", "cover");
+test_computed_value("animation-range", "contain");
+test_computed_value("animation-range", "entry");
+test_computed_value("animation-range", "entry-crossing");
+test_computed_value("animation-range", "exit");
+test_computed_value("animation-range", "exit-crossing");
+test_computed_value("animation-range", "entry, exit");
+
+test_computed_value("animation-range", "entry 0% entry 100%", "entry");
+test_computed_value("animation-range", "entry-crossing 0% entry-crossing 100%",
+ "entry-crossing");
+test_computed_value("animation-range", "exit 0% exit 100%", "exit");
+test_computed_value("animation-range", "exit-crossing 0% exit-crossing 100%",
+ "exit-crossing");
+test_computed_value("animation-range", "cover 0% cover 100%", "cover");
+test_computed_value("animation-range", "contain 0% contain 100%", "contain");
+test_computed_value("animation-range",
+ "entry calc(10% - 10%) entry calc(50% + 50%)", "entry");
+test_computed_value("animation-range", "cover 50%");
+test_computed_value("animation-range", "contain 50%");
+test_computed_value("animation-range", "entry 50%");
+test_computed_value("animation-range", "entry-crossing 50%");
+test_computed_value("animation-range", "exit 50%");
+test_computed_value("animation-range", "exit-crossing 50%");
+test_computed_value("animation-range", "entry 50px exit 100px");
+test_computed_value("animation-range", "exit calc(10% + 50px)");
+
+test_computed_value("animation-range", "entry 50% exit 50%");
+test_computed_value("animation-range",
+ "cover 50% entry 50%, contain 50% exit 50%");
+
+test_computed_value("animation-range", "entry 10em exit 20em", "entry 100px exit 200px");
+test_computed_value("animation-range", "10em exit 20em", "100px exit 200px");
+test_computed_value("animation-range", "normal 100px");
+test_computed_value("animation-range", "100px");
+test_computed_value("animation-range", "100px normal", "100px");
+test_computed_value("animation-range", "10% normal", "10%");
+
+test_invalid_value("animation-range", "entry 50% 0s", "entry 50%");
+test_invalid_value("animation-range", "0s entry 50%");
+test_invalid_value("animation-range", "1s");
+test_invalid_value("animation-range", "-1s");
+test_invalid_value("animation-range", "1s 2s");
+test_invalid_value("animation-range", "1s, 2s");
+test_invalid_value("animation-range", "1s 2s, 3s");
+test_invalid_value("animation-range", "1s, 2s 3s");
+test_invalid_value("animation-range", "1s, 2s, 3s");
+test_invalid_value("animation-range", "1s 2s 3s");
+test_invalid_value("animation-range", "0s, 1s 2s 3s");
+test_invalid_value("animation-range", "1s / 2s");
+test_invalid_value("animation-range", "1s, 2px");
+test_invalid_value("animation-range", "#ff0000");
+test_invalid_value("animation-range", "red");
+test_invalid_value("animation-range", "thing");
+test_invalid_value("animation-range", "thing 0%");
+test_invalid_value("animation-range", "thing 42%");
+test_invalid_value("animation-range", "thing 100%");
+test_invalid_value("animation-range", "thing 100px");
+test_invalid_value("animation-range", "100% thing");
+
+test_shorthand_value('animation-range', 'normal', {
+ 'animation-range-start': 'normal',
+ 'animation-range-end': 'normal',
+});
+
+test_shorthand_value('animation-range', 'normal normal', {
+ 'animation-range-start': 'normal',
+ 'animation-range-end': 'normal',
+});
+
+test_shorthand_value('animation-range', 'normal entry 100%', {
+ 'animation-range-start': 'normal',
+ 'animation-range-end': 'entry',
+});
+
+test_shorthand_value('animation-range', 'normal entry 10%', {
+ 'animation-range-start': 'normal',
+ 'animation-range-end': 'entry 10%',
+});
+
+test_shorthand_value('animation-range', 'cover', {
+ 'animation-range-start': 'cover',
+ 'animation-range-end': 'cover',
+});
+
+test_shorthand_value('animation-range', 'contain', {
+ 'animation-range-start': 'contain',
+ 'animation-range-end': 'contain',
+});
+
+test_shorthand_value('animation-range', 'contain 100% contain 0%', {
+ 'animation-range-start': 'contain 100%',
+ 'animation-range-end': 'contain 0%',
+});
+
+test_shorthand_value('animation-range', 'entry 10% exit 20%', {
+ 'animation-range-start': 'entry 10%',
+ 'animation-range-end': 'exit 20%',
+});
+
+test_shorthand_value('animation-range', 'entry calc(10% + 10px) exit 20px', {
+ 'animation-range-start': 'entry calc(10% + 10px)',
+ 'animation-range-end': 'exit 20px',
+});
+
+test_shorthand_value('animation-range', 'entry, exit', {
+ 'animation-range-start': 'entry, exit',
+ 'animation-range-end': 'entry, exit',
+});
+
+test_shorthand_value('animation-range', 'entry 0%, exit', {
+ 'animation-range-start': 'entry, exit',
+ 'animation-range-end': 'entry, exit',
+});
+
+test_shorthand_value('animation-range', 'exit calc(10% + 50px)', {
+ 'animation-range-start': 'exit calc(10% + 50px)',
+ 'animation-range-end': 'exit',
+});
+test_shorthand_value('animation-range', '100px', {
+ 'animation-range-start': '100px',
+ 'animation-range-end': 'normal',
+});
+test_shorthand_value('animation-range', '10%', {
+ 'animation-range-start': '10%',
+ 'animation-range-end': 'normal',
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-computed.html
new file mode 100644
index 0000000000..044aea2ca6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-computed.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<div id="target" style="font-size:10px;"></div>
+<script>
+test_computed_value("animation-range-start", "initial", "normal");
+test_computed_value("animation-range-start", "normal");
+test_computed_value("animation-range-start", "cover 0%", "cover");
+test_computed_value("animation-range-start", "cover 100%");
+test_computed_value("animation-range-start", "COVER 0%", "cover");
+test_computed_value("animation-range-start", "COVER 100%", "cover 100%");
+test_computed_value("animation-range-start", "cover 120%");
+test_computed_value("animation-range-start", "cover 42%");
+test_computed_value("animation-range-start", "0", "0px");
+test_computed_value("animation-range-start", "120%");
+test_computed_value("animation-range-start", "120px");
+test_computed_value("animation-range-start", "cover -42%");
+test_computed_value("animation-range-start", "contain 42%");
+test_computed_value("animation-range-start", "exit 42%");
+test_computed_value("animation-range-start", "exit calc(41% + 1%)", "exit 42%");
+test_computed_value("animation-range-start", "exit 1%, cover 2%, contain 0%", "exit 1%, cover 2%, contain");
+test_computed_value("animation-range-start", "exit 1%, cover 2%, contain 100%");
+test_computed_value("animation-range-start", "exit-crossing 42%");
+test_computed_value("animation-range-start", "entry 42px");
+test_computed_value("animation-range-start", "entry-crossing 42px");
+test_computed_value("animation-range-start", "contain calc(10% + 10px)");
+test_computed_value("animation-range-start", "entry 1em", "entry 10px");
+test_computed_value("animation-range-start", "exit calc(1em + 10px)", "exit 20px");
+test_computed_value("animation-range-start", "cover");
+test_computed_value("animation-range-start", "contain");
+test_computed_value("animation-range-start", "entry");
+test_computed_value("animation-range-start", "exit");
+</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-invalid.html
new file mode 100644
index 0000000000..32357d8bd4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-invalid.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+test_invalid_value("animation-range-start", "peek 50%");
+test_invalid_value("animation-range-start", "50% contain");
+test_invalid_value("animation-range-start", "50% cover");
+test_invalid_value("animation-range-start", "50% entry");
+test_invalid_value("animation-range-start", "50% enter");
+test_invalid_value("animation-range-start", "50% exit");
+test_invalid_value("animation-range-start", "contain contain");
+test_invalid_value("animation-range-start", "none");
+test_invalid_value("animation-range-start", "cover 50% enter 50%");
+</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-valid.html
new file mode 100644
index 0000000000..3ca885862e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-valid.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+// https://drafts.csswg.org/scroll-animations-1/#view-timelines-ranges
+test_valid_value("animation-range-start", "normal");
+test_valid_value("animation-range-start", "cover 0%", "cover");
+test_valid_value("animation-range-start", "cover 100%");
+test_valid_value("animation-range-start", "cover 120%");
+test_valid_value("animation-range-start", "cover 42%");
+test_valid_value("animation-range-start", "0", "0px");
+test_valid_value("animation-range-start", "120%");
+test_valid_value("animation-range-start", "120px");
+test_valid_value("animation-range-start", "cover -42%");
+test_valid_value("animation-range-start", "contain 42%");
+test_valid_value("animation-range-start", "exit 42%");
+test_valid_value("animation-range-start", "exit 1%, cover 2%, contain 0%", "exit 1%, cover 2%, contain");
+test_valid_value("animation-range-start", "exit 1%, cover 2%, contain 100%");
+test_valid_value("animation-range-start", "exit-crossing 42%");
+test_valid_value("animation-range-start", "entry 42px");
+test_valid_value("animation-range-start", "entry-crossing 42px");
+test_valid_value("animation-range-start", "contain calc(10px + 10%)", "contain calc(10% + 10px)");
+test_valid_value("animation-range-start", "entry 1em");
+test_valid_value("animation-range-start", "exit calc(1em + 10px)");
+test_valid_value("animation-range-start", "entry 42%");
+test_valid_value("animation-range-start", "cover");
+test_valid_value("animation-range-start", "contain");
+test_valid_value("animation-range-start", "entry");
+test_valid_value("animation-range-start", "exit");
+</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-shorthand.html b/testing/web-platform/tests/css/css-animations/parsing/animation-shorthand.html
new file mode 100644
index 0000000000..0856ab24a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-shorthand.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: animation sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation">
+<meta name="assert" content="animation supports the full grammar '<single-animation> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('animation', 'anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)', {
+ 'animation-duration': '1s',
+ 'animation-timing-function': 'cubic-bezier(0, -2, 1, 3)',
+ 'animation-delay': '-3s',
+ 'animation-iteration-count': '4',
+ 'animation-direction': 'reverse',
+ 'animation-fill-mode': 'both',
+ 'animation-play-state': 'paused',
+ 'animation-name': 'anim',
+ 'animation-timeline': 'auto',
+ 'animation-range-start': 'normal',
+ 'animation-range-end': 'normal',
+});
+
+test_shorthand_value('animation', 'anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)', {
+ 'animation-duration': 'auto, 1s',
+ 'animation-timing-function': 'ease, cubic-bezier(0, -2, 1, 3)',
+ 'animation-delay': '0s, -3s',
+ 'animation-iteration-count': '1, 4',
+ 'animation-direction': 'reverse, normal',
+ 'animation-fill-mode': 'both, none',
+ 'animation-play-state': 'paused, running',
+ 'animation-name': 'anim, none',
+ 'animation-timeline': 'auto',
+ 'animation-range-start': 'normal',
+ 'animation-range-end': 'normal',
+});
+
+test_shorthand_value('animation', '4 1s -3s cubic-bezier(0, -2, 1, 3), anim paused both reverse', {
+ 'animation-duration': '1s, auto',
+ 'animation-timing-function': 'cubic-bezier(0, -2, 1, 3), ease',
+ 'animation-delay': '-3s, 0s',
+ 'animation-iteration-count': '4, 1',
+ 'animation-direction': 'normal, reverse',
+ 'animation-fill-mode': 'none, both',
+ 'animation-play-state': 'running, paused',
+ 'animation-name': 'none, anim',
+ 'animation-timeline': 'auto',
+ 'animation-range-start': 'normal',
+ 'animation-range-end': 'normal',
+});
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-valid.html
new file mode 100644
index 0000000000..0c5d5713e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-valid.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation">
+<meta name="assert" content="animation supports the full grammar '<single-animation> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// <single-animation> = <time> || <easing-function> || <time> ||
+// <single-animation-iteration-count> || <single-animation-direction> ||
+// <single-animation-fill-mode> || <single-animation-play-state> ||
+// [ none | <keyframes-name> ]
+test_valid_value("animation", "1s", ["1s", "1s ease 0s 1 normal none running none"]);
+test_valid_value("animation", "cubic-bezier(0, -2, 1, 3)", ["cubic-bezier(0, -2, 1, 3)", "auto cubic-bezier(0, -2, 1, 3) 0s 1 normal none running none"]);
+test_valid_value("animation", "1s -3s", ["1s -3s", "1s ease -3s 1 normal none running none"]);
+test_valid_value("animation", "4", ["4", "auto ease 0s 4 normal none running none"]);
+test_valid_value("animation", "reverse", ["reverse", "auto ease 0s 1 reverse none running none"]);
+test_valid_value("animation", "both", ["both", "auto ease 0s 1 normal both running none"]);
+test_valid_value("animation", "paused", ["paused", "auto ease 0s 1 normal none paused none"]);
+test_valid_value("animation", "none", ["auto", "none", "auto ease 0s 1 normal none running none"]);
+test_valid_value("animation", "anim", ["anim", "auto ease 0s 1 normal none running anim"]);
+
+test_valid_value("animation", "anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)",
+ "1s cubic-bezier(0, -2, 1, 3) -3s 4 reverse both paused anim");
+
+test_valid_value("animation", "anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)",
+ ["reverse both paused anim, 1s cubic-bezier(0, -2, 1, 3) -3s 4", "auto ease 0s 1 reverse both paused anim, 1s cubic-bezier(0, -2, 1, 3) -3s 4 normal none running none"]);
+
+// TODO: Add test with a single negative time.
+// TODO: Add test with a single timing-function keyword.
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/keyframes-allowed-properties.html b/testing/web-platform/tests/css/css-animations/parsing/keyframes-allowed-properties.html
new file mode 100644
index 0000000000..f682920b35
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/keyframes-allowed-properties.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>Tests which properties are allowed in @keyframes</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#typedef-keyframe-block">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style id=sheet>
+@keyframes foo {
+ from {
+ /* Non-animation properties are allowed */
+ margin-top: 10px;
+ /* animation-timing-function is specially allowed */
+ animation-timing-function: ease;
+ /* All other animation properties are not allowed */
+ animation-name: none;
+ animation-duration: 1s;
+ animation-iteration-count: 1;
+ animation-direction: normal;
+ animation-play-state: running;
+ animation-delay: 0s;
+ animation-fill-mode: none;
+ /* The animation shorthand is also not allowed */
+ animation: bar 1s infinite;
+ }
+}
+</style>
+<script>
+test(() => {
+ const keyframe = sheet.sheet.cssRules[0].cssRules[0];
+ const style = keyframe.style;
+ assert_equals(style.length, 2);
+ assert_equals(style.marginTop, '10px');
+ assert_equals(style.animationTimingFunction, 'ease');
+}, '@keyframes allows all non-animation properties and animation-timing-function');
+</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/keyframes-name-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/keyframes-name-invalid.html
new file mode 100644
index 0000000000..f14dff3e2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/keyframes-name-invalid.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>CSS Animations: parsing @keyframes name with invalid values</title>
+ <link rel="author" title="yisibl(一丝)" href="https://github.com/yisibl"/>
+ <link rel="help" href="https://drafts.csswg.org/css-animations/#typedef-keyframes-name">
+ <meta name="assert" content="@keyframes name supports the full grammar '<custom-ident> | <string>'.">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+ <div>
+ <main id="main"></main>
+ </div>
+ <script>
+ test_keyframes_name_invalid('none');
+
+ // The CSS-wide keywords are not valid <custom-ident>s. The default keyword is reserved and is also not a valid <custom-ident>.
+ // Spec: https://drafts.csswg.org/css-values-4/#identifier-value
+ test_keyframes_name_invalid('default');
+ test_keyframes_name_invalid('initial');
+ test_keyframes_name_invalid('inherit');
+ test_keyframes_name_invalid('unset');
+ test_keyframes_name_invalid('revert');
+ test_keyframes_name_invalid('revert-layer');
+
+ test_keyframes_name_invalid('12');
+ test_keyframes_name_invalid('-12');
+ test_keyframes_name_invalid('12foo');
+ test_keyframes_name_invalid('foo.bar');
+ test_keyframes_name_invalid('one two');
+ test_keyframes_name_invalid('one, two');
+
+ test_keyframes_name_invalid('one, initial');
+ test_keyframes_name_invalid('one, inherit');
+ test_keyframes_name_invalid('one, unset');
+ test_keyframes_name_invalid('default, two');
+ test_keyframes_name_invalid('revert, three');
+ test_keyframes_name_invalid('revert-layer, four');
+ // TODO: https://bugs.chromium.org/p/chromium/issues/detail?id=1342609
+ // test_keyframes_name_invalid('--foo');
+ </script>
+</body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-animations/parsing/keyframes-name-valid.html b/testing/web-platform/tests/css/css-animations/parsing/keyframes-name-valid.html
new file mode 100644
index 0000000000..f44540e924
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/keyframes-name-valid.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>CSS Animations: parsing @keyframes name with valid values</title>
+ <link rel="author" title="yisibl(一丝)" href="https://github.com/yisibl"/>
+ <link rel="help" href="https://drafts.csswg.org/css-animations/#typedef-keyframes-name">
+ <meta name="assert" content="@keyframes name supports the full grammar '<custom-ident> | <string>'.">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+ <div>
+ <main id="main"></main>
+ </div>
+ <script>
+ // Test <custom-ident>
+ test_keyframes_name_valid(' foo ');
+ test_keyframes_name_valid(' foo');
+ test_keyframes_name_valid('-foo');
+ test_keyframes_name_valid('_bar');
+ test_keyframes_name_valid('__bar');
+ test_keyframes_name_valid('__bar__');
+ test_keyframes_name_valid('ease-out');
+ test_keyframes_name_valid('example');
+ test_keyframes_name_valid('EXAMPLE');
+
+ test_keyframes_name_valid('not');
+ test_keyframes_name_valid('and');
+ test_keyframes_name_valid('all');
+ test_keyframes_name_valid('or');
+
+ // <custom-ident> may disable the `auto/normal` keywords in the future
+ // https://github.com/w3c/csswg-drafts/issues/7431
+ test_keyframes_name_valid('auto');
+ test_keyframes_name_valid('normal');
+
+ // Test <string>
+ test_keyframes_name_valid('" foo "');
+ test_keyframes_name_valid('" foo"');
+ test_keyframes_name_valid('"-foo"');
+ test_keyframes_name_valid('"_bar"');
+ test_keyframes_name_valid('"__bar"');
+ test_keyframes_name_valid('"__bar__"');
+ test_keyframes_name_valid('"ease-out"');
+ test_keyframes_name_valid('"example"');
+ test_keyframes_name_valid('"EXAMPLE"');
+
+ test_keyframes_name_valid('"one two"');
+ test_keyframes_name_valid('"one, two"');
+
+ test_keyframes_name_valid('"not"');
+ test_keyframes_name_valid('"and"');
+ test_keyframes_name_valid('"all"');
+ test_keyframes_name_valid('"or"');
+
+ test_keyframes_name_valid('"auto"');
+ test_keyframes_name_valid('"normal"');
+ test_keyframes_name_valid('"none"');
+
+ test_keyframes_name_valid('"default"');
+ test_keyframes_name_valid('"initial"');
+ test_keyframes_name_valid('"inherit"');
+ test_keyframes_name_valid('"unset"');
+ test_keyframes_name_valid('"revert"');
+ test_keyframes_name_valid('"revert-layer"');
+ </script>
+</body>
+</html> \ No newline at end of file