summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-properties-values-api/animation
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:47:29 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:47:29 +0000
commit0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch)
treea31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-properties-values-api/animation
parentInitial commit. (diff)
downloadfirefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz
firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-properties-values-api/animation')
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle-comma-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle-space-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle.html57
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color-comma-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color-space-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color.html57
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-custom-ident.html13
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-image.html13
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-inherited-used-by-standard-property.html29
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer-comma-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer-space-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer.html57
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-comma-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-comma-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-space-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage.html57
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-space-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length.html57
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-list-type-mismatch.html18
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-non-inherited-used-by-standard-property.html27
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-number-comma-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-number-space-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-number.html57
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-percentage-comma-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-percentage-space-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-percentage.html57
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-resolution-comma-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-resolution-space-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-resolution.html57
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-time-comma-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-time-space-list.html59
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-time.html57
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-transform-function.html57
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-transform-list-multiple-values.html66
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-transform-list-single-values.html57
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-url.html13
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-used-in-shorthand.html34
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-angle.html16
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-color.html16
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-custom-ident.html16
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-image.html16
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-inherited-used-by-standard-property.html31
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-integer.html16
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-length-percentage.html16
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-length.html16
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-inherited-property-numbers.html43
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-list.html177
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-property-numbers.html39
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-non-inherited-used-by-standard-property.html28
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-number.html16
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-percentage.html16
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-property-all.html17
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-resolution.html16
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-time.html16
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-transform-function.html16
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-transform-list.html16
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-url.html16
57 files changed, 2461 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle-comma-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle-comma-list.html
new file mode 100644
index 0000000000..a14b0bb09e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle-comma-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<angle>#",
+ inherits: false,
+ initialValue: "0deg"
+}, {
+ keyframes: ["100deg, 150deg", "200deg, 250deg"],
+ expected: "150deg, 200deg"
+}, 'Animating a custom property of type <angle>#');
+
+animation_test({
+ syntax: "<angle>#",
+ inherits: false,
+ initialValue: "100deg, 150deg"
+}, {
+ keyframes: "200deg, 250deg",
+ expected: "150deg, 200deg"
+}, 'Animating a custom property of type <angle># with a single keyframe');
+
+animation_test({
+ syntax: "<angle>#",
+ inherits: false,
+ initialValue: "50deg, 100deg"
+}, {
+ composite: "add",
+ keyframes: ["150deg, 200deg", "250deg, 300deg"],
+ expected: "250deg, 350deg"
+}, 'Animating a custom property of type <angle># with additivity');
+
+animation_test({
+ syntax: "<angle>#",
+ inherits: false,
+ initialValue: "50deg, 100deg"
+}, {
+ composite: "add",
+ keyframes: "150deg, 200deg",
+ expected: "125deg, 200deg"
+}, 'Animating a custom property of type <angle># with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<angle>#",
+ inherits: false,
+ initialValue: "0deg, 0deg"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0deg, 50deg", "100deg, 100deg"],
+ expected: "250deg, 275deg"
+}, 'Animating a custom property of type <angle># with iterationComposite');
+
+discrete_animation_test("<angle>#", '10deg, 20deg', '30deg', 'Animating a custom property of type <angle># with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle-space-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle-space-list.html
new file mode 100644
index 0000000000..8ce7a9deab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle-space-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<angle>+",
+ inherits: false,
+ initialValue: "0deg"
+}, {
+ keyframes: ["100deg 150deg", "200deg 250deg"],
+ expected: "150deg 200deg"
+}, 'Animating a custom property of type <angle>+');
+
+animation_test({
+ syntax: "<angle>+",
+ inherits: false,
+ initialValue: "100deg 150deg"
+}, {
+ keyframes: "200deg 250deg",
+ expected: "150deg 200deg"
+}, 'Animating a custom property of type <angle>+ with a single keyframe');
+
+animation_test({
+ syntax: "<angle>+",
+ inherits: false,
+ initialValue: "50deg 100deg"
+}, {
+ composite: "add",
+ keyframes: ["150deg 200deg", "250deg 300deg"],
+ expected: "250deg 350deg"
+}, 'Animating a custom property of type <angle>+ with additivity');
+
+animation_test({
+ syntax: "<angle>+",
+ inherits: false,
+ initialValue: "50deg 100deg"
+}, {
+ composite: "add",
+ keyframes: "150deg 200deg",
+ expected: "125deg 200deg"
+}, 'Animating a custom property of type <angle>+ with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<angle>+",
+ inherits: false,
+ initialValue: "0deg 0deg"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0deg 50deg", "100deg 100deg"],
+ expected: "250deg 275deg"
+}, 'Animating a custom property of type <angle>+ with iterationComposite');
+
+discrete_animation_test("<angle>+", '10deg 20deg', '30deg', 'Animating a custom property of type <angle>+ with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle.html
new file mode 100644
index 0000000000..0cb06aef0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<angle>",
+ inherits: false,
+ initialValue: "0deg"
+}, {
+ keyframes: ["100deg", "200deg"],
+ expected: "150deg"
+}, 'Animating a custom property of type <angle>');
+
+animation_test({
+ syntax: "<angle>",
+ inherits: false,
+ initialValue: "100deg"
+}, {
+ keyframes: "200deg",
+ expected: "150deg"
+}, 'Animating a custom property of type <angle> with a single keyframe');
+
+animation_test({
+ syntax: "<angle>",
+ inherits: false,
+ initialValue: "100deg"
+}, {
+ composite: "add",
+ keyframes: ["200deg", "300deg"],
+ expected: "350deg"
+}, 'Animating a custom property of type <angle> with additivity');
+
+animation_test({
+ syntax: "<angle>",
+ inherits: false,
+ initialValue: "100deg"
+}, {
+ composite: "add",
+ keyframes: "300deg",
+ expected: "250deg"
+}, 'Animating a custom property of type <angle> with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<angle>",
+ inherits: false,
+ initialValue: "100deg"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0deg", "100deg"],
+ expected: "250deg"
+}, 'Animating a custom property of type <angle> with iterationComposite');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color-comma-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color-comma-list.html
new file mode 100644
index 0000000000..7148df0724
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color-comma-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<color>#",
+ inherits: false,
+ initialValue: "black"
+}, {
+ keyframes: ["rgb(100, 100, 100), rgb(150, 150, 150)", "rgb(200, 200, 200), rgb(250, 250, 250)"],
+ expected: "rgb(150, 150, 150), rgb(200, 200, 200)"
+}, 'Animating a custom property of type <color>#');
+
+animation_test({
+ syntax: "<color>#",
+ inherits: false,
+ initialValue: "rgb(100, 100, 100), rgb(150, 150, 150)"
+}, {
+ keyframes: "rgb(200, 200, 200), rgb(250, 250, 250)",
+ expected: "rgb(150, 150, 150), rgb(200, 200, 200)"
+}, 'Animating a custom property of type <color># with a single keyframe');
+
+animation_test({
+ syntax: "<color>#",
+ inherits: false,
+ initialValue: "rgb(100, 100, 100), rgb(150, 150, 150)"
+}, {
+ composite: "add",
+ keyframes: ["rgb(25, 25, 25), rgb(50, 50, 50)", "rgb(75, 75, 75), rgb(100, 100, 100)"],
+ expected: "rgb(150, 150, 150), rgb(225, 225, 225)"
+}, 'Animating a custom property of type <color># with additivity');
+
+animation_test({
+ syntax: "<color>#",
+ inherits: false,
+ initialValue: "rgb(100, 100, 100), rgb(150, 150, 150)"
+}, {
+ composite: "add",
+ keyframes: "rgb(50, 50, 50), rgb(100, 100, 100)",
+ expected: "rgb(125, 125, 125), rgb(200, 200, 200)"
+}, 'Animating a custom property of type <color># with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<color>#",
+ inherits: false,
+ initialValue: "black"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["rgb(0, 0, 0), rgb(0, 0, 0)", "rgb(50, 50, 50), rgb(100, 100, 100)"],
+ expected: "rgb(125, 125, 125), rgb(250, 250, 250)"
+}, 'Animating a custom property of type <color># with iterationComposite');
+
+discrete_animation_test("<color>#", 'rgb(255, 0, 0), rgb(0, 255, 0)', 'rgb(0, 0, 255)', 'Animating a custom property of type <color># with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color-space-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color-space-list.html
new file mode 100644
index 0000000000..679e244667
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color-space-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<color>+",
+ inherits: false,
+ initialValue: "black"
+}, {
+ keyframes: ["rgb(100, 100, 100) rgb(150, 150, 150)", "rgb(200, 200, 200) rgb(250, 250, 250)"],
+ expected: "rgb(150, 150, 150) rgb(200, 200, 200)"
+}, 'Animating a custom property of type <color>+');
+
+animation_test({
+ syntax: "<color>+",
+ inherits: false,
+ initialValue: "rgb(100, 100, 100) rgb(150, 150, 150)"
+}, {
+ keyframes: "rgb(200, 200, 200) rgb(250, 250, 250)",
+ expected: "rgb(150, 150, 150) rgb(200, 200, 200)"
+}, 'Animating a custom property of type <color>+ with a single keyframe');
+
+animation_test({
+ syntax: "<color>+",
+ inherits: false,
+ initialValue: "rgb(100, 100, 100) rgb(150, 150, 150)"
+}, {
+ composite: "add",
+ keyframes: ["rgb(25, 25, 25) rgb(50, 50, 50)", "rgb(75, 75, 75) rgb(100, 100, 100)"],
+ expected: "rgb(150, 150, 150) rgb(225, 225, 225)"
+}, 'Animating a custom property of type <color>+ with additivity');
+
+animation_test({
+ syntax: "<color>+",
+ inherits: false,
+ initialValue: "rgb(100, 100, 100) rgb(150, 150, 150)"
+}, {
+ composite: "add",
+ keyframes: "rgb(50, 50, 50) rgb(100, 100, 100)",
+ expected: "rgb(125, 125, 125) rgb(200, 200, 200)"
+}, 'Animating a custom property of type <color>+ with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<color>+",
+ inherits: false,
+ initialValue: "black"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["rgb(0, 0, 0) rgb(0, 0, 0)", "rgb(50, 50, 50) rgb(100, 100, 100)"],
+ expected: "rgb(125, 125, 125) rgb(250, 250, 250)"
+}, 'Animating a custom property of type <color>+ with iterationComposite');
+
+discrete_animation_test("<color>+", 'rgb(255, 0, 0) rgb(0, 255, 0)', 'rgb(0, 0, 255)', 'Animating a custom property of type <color>+ with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color.html
new file mode 100644
index 0000000000..001fc407e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<color>",
+ inherits: false,
+ initialValue: "black"
+}, {
+ keyframes: ["rgb(100, 100, 100)", "rgb(200, 200, 200)"],
+ expected: "rgb(150, 150, 150)"
+}, 'Animating a custom property of type <color>');
+
+animation_test({
+ syntax: "<color>",
+ inherits: false,
+ initialValue: "rgb(100, 100, 100)"
+}, {
+ keyframes: "rgb(200, 200, 200)",
+ expected: "rgb(150, 150, 150)"
+}, 'Animating a custom property of type <color> with a single keyframe');
+
+animation_test({
+ syntax: "<color>",
+ inherits: false,
+ initialValue: "rgb(100, 100, 100)"
+}, {
+ composite: "add",
+ keyframes: ["rgb(50, 50, 50)", "rgb(150, 150, 150)"],
+ expected: "rgb(200, 200, 200)"
+}, 'Animating a custom property of type <color> with additivity');
+
+animation_test({
+ syntax: "<color>",
+ inherits: false,
+ initialValue: "rgb(100, 100, 100)"
+}, {
+ composite: "add",
+ keyframes: "rgb(150, 150, 150)",
+ expected: "rgb(175, 175, 175)"
+}, 'Animating a custom property of type <color> with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<color>",
+ inherits: false,
+ initialValue: "black"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["rgb(0, 0, 0)", "rgb(100, 100, 100)"],
+ expected: "rgb(250, 250, 250)"
+}, 'Animating a custom property of type <color> with iterationComposite');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-custom-ident.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-custom-ident.html
new file mode 100644
index 0000000000..5bc2bed343
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-custom-ident.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+discrete_animation_test("<custom-ident>", "from", "to");
+discrete_animation_test("<custom-ident>+", "from1 from2", "to1 to2");
+discrete_animation_test("<custom-ident>#", "from1, from2", "to1, to2");
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-image.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-image.html
new file mode 100644
index 0000000000..4f9505f9a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-image.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+discrete_animation_test("<image>", 'url("https://example.com/from")', 'url("https://example.com/to")');
+discrete_animation_test("<image>+", 'url("https://example.com/from1") url("https://example.com/from2")', 'url("https://example.com/to1") url("https://example.com/to2")');
+discrete_animation_test("<image>#", 'url("https://example.com/from1"), url("https://example.com/from2")', 'url("https://example.com/to1"), url("https://example.com/to2")');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-inherited-used-by-standard-property.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-inherited-used-by-standard-property.html
new file mode 100644
index 0000000000..231ecca8c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-inherited-used-by-standard-property.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="container">
+ <div id="target"></div>
+</div>
+<script>
+
+test(() => {
+ CSS.registerProperty({
+ name: "--my-length",
+ syntax: "<length>",
+ inherits: true,
+ initialValue: "0px"
+ });
+
+ target.style.marginLeft = "var(--my-length)";
+
+ const duration = 1000;
+ const animation = container.animate({ "--my-length": "100px" }, duration);
+ animation.pause();
+ animation.currentTime = duration / 4;
+
+ assert_equals(getComputedStyle(target).marginLeft, "25px");
+}, "Animating an inherited CSS variable on a parent is reflected on a standard property using that variable as a value on a child");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer-comma-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer-comma-list.html
new file mode 100644
index 0000000000..3f4beaedf1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer-comma-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<integer>#",
+ inherits: false,
+ initialValue: "0"
+}, {
+ keyframes: ["100, 150", "200, 250"],
+ expected: "150, 200"
+}, 'Animating a custom property of type <integer>#');
+
+animation_test({
+ syntax: "<integer>#",
+ inherits: false,
+ initialValue: "100, 150"
+}, {
+ keyframes: "200, 250",
+ expected: "150, 200"
+}, 'Animating a custom property of type <integer># with a single keyframe');
+
+animation_test({
+ syntax: "<integer>#",
+ inherits: false,
+ initialValue: "50, 100"
+}, {
+ composite: "add",
+ keyframes: ["150, 200", "250, 300"],
+ expected: "250, 350"
+}, 'Animating a custom property of type <integer># with additivity');
+
+animation_test({
+ syntax: "<integer>#",
+ inherits: false,
+ initialValue: "50, 100"
+}, {
+ composite: "add",
+ keyframes: "150, 200",
+ expected: "125, 200"
+}, 'Animating a custom property of type <integer># with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<integer>#",
+ inherits: false,
+ initialValue: "0, 0"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0, 50", "100, 100"],
+ expected: "250, 275"
+}, 'Animating a custom property of type <integer># with iterationComposite');
+
+discrete_animation_test("<integer>#", '10, 20', '30', 'Animating a custom property of type <integer># with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer-space-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer-space-list.html
new file mode 100644
index 0000000000..89feb3af15
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer-space-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<integer>+",
+ inherits: false,
+ initialValue: "0"
+}, {
+ keyframes: ["100 150", "200 250"],
+ expected: "150 200"
+}, 'Animating a custom property of type <integer>+');
+
+animation_test({
+ syntax: "<integer>+",
+ inherits: false,
+ initialValue: "100 150"
+}, {
+ keyframes: "200 250",
+ expected: "150 200"
+}, 'Animating a custom property of type <integer>+ with a single keyframe');
+
+animation_test({
+ syntax: "<integer>+",
+ inherits: false,
+ initialValue: "50 100"
+}, {
+ composite: "add",
+ keyframes: ["150 200", "250 300"],
+ expected: "250 350"
+}, 'Animating a custom property of type <integer>+ with additivity');
+
+animation_test({
+ syntax: "<integer>+",
+ inherits: false,
+ initialValue: "50 100"
+}, {
+ composite: "add",
+ keyframes: "150 200",
+ expected: "125 200"
+}, 'Animating a custom property of type <integer>+ with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<integer>+",
+ inherits: false,
+ initialValue: "0 0"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0 50", "100 100"],
+ expected: "250 275"
+}, 'Animating a custom property of type <integer>+ with iterationComposite');
+
+discrete_animation_test("<integer>+", '10 20', '30', 'Animating a custom property of type <integer>+ with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer.html
new file mode 100644
index 0000000000..400308a92e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<integer>",
+ inherits: false,
+ initialValue: 0
+}, {
+ keyframes: [100, 200],
+ expected: "150"
+}, 'Animating a custom property of type <integer>');
+
+animation_test({
+ syntax: "<integer>",
+ inherits: false,
+ initialValue: 100
+}, {
+ keyframes: 200,
+ expected: "150"
+}, 'Animating a custom property of type <integer> with a single keyframe');
+
+animation_test({
+ syntax: "<integer>",
+ inherits: false,
+ initialValue: 100
+}, {
+ composite: "add",
+ keyframes: [200, 300],
+ expected: "350"
+}, 'Animating a custom property of type <integer> with additivity');
+
+animation_test({
+ syntax: "<integer>",
+ inherits: false,
+ initialValue: 100
+}, {
+ composite: "add",
+ keyframes: 300,
+ expected: "250"
+}, 'Animating a custom property of type <integer> with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<integer>",
+ inherits: false,
+ initialValue: 100
+}, {
+ iterationComposite: "accumulate",
+ keyframes: [0, 100],
+ expected: "250"
+}, 'Animating a custom property of type <integer> with iterationComposite');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-comma-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-comma-list.html
new file mode 100644
index 0000000000..6f1fefb76f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-comma-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<length>#",
+ inherits: false,
+ initialValue: "0px"
+}, {
+ keyframes: ["100px, 150px", "200px, 250px"],
+ expected: "150px, 200px"
+}, 'Animating a custom property of type <length>#');
+
+animation_test({
+ syntax: "<length>#",
+ inherits: false,
+ initialValue: "100px, 150px"
+}, {
+ keyframes: "200px, 250px",
+ expected: "150px, 200px"
+}, 'Animating a custom property of type <length># with a single keyframe');
+
+animation_test({
+ syntax: "<length>#",
+ inherits: false,
+ initialValue: "50px, 100px"
+}, {
+ composite: "add",
+ keyframes: ["150px, 200px", "250px, 300px"],
+ expected: "250px, 350px"
+}, 'Animating a custom property of type <length># with additivity');
+
+animation_test({
+ syntax: "<length>#",
+ inherits: false,
+ initialValue: "50px, 100px"
+}, {
+ composite: "add",
+ keyframes: "150px, 200px",
+ expected: "125px, 200px"
+}, 'Animating a custom property of type <length># with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<length>#",
+ inherits: false,
+ initialValue: "0px, 0px"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0px, 50px", "100px, 100px"],
+ expected: "250px, 275px"
+}, 'Animating a custom property of type <length># with iterationComposite');
+
+discrete_animation_test("<length>#", '10px, 20px', '30px', 'Animating a custom property of type <length># with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-comma-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-comma-list.html
new file mode 100644
index 0000000000..bf3e75b791
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-comma-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<length-percentage>#",
+ inherits: false,
+ initialValue: "0px"
+}, {
+ keyframes: ["100px, 150%", "200%, 250px"],
+ expected: "calc(100% + 50px), calc(75% + 125px)"
+}, 'Animating a custom property of type <length-percentage>#');
+
+animation_test({
+ syntax: "<length-percentage>#",
+ inherits: false,
+ initialValue: "100px, 150%"
+}, {
+ keyframes: "200%, 250px",
+ expected: "calc(100% + 50px), calc(75% + 125px)"
+}, 'Animating a custom property of type <length-percentage># with a single keyframe');
+
+animation_test({
+ syntax: "<length-percentage>#",
+ inherits: false,
+ initialValue: "50px, 100%"
+}, {
+ composite: "add",
+ keyframes: ["150%, 200px", "250%, 300px"],
+ expected: "calc(200% + 50px), calc(100% + 250px)"
+}, 'Animating a custom property of type <length-percentage># with additivity');
+
+animation_test({
+ syntax: "<length-percentage>#",
+ inherits: false,
+ initialValue: "50px, 100%"
+}, {
+ composite: "add",
+ keyframes: "150%, 200px",
+ expected: "calc(75% + 50px), calc(100% + 100px)"
+}, 'Animating a custom property of type <length-percentage># with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<length-percentage>#",
+ inherits: false,
+ initialValue: "0px, 0px"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0px, 50%", "100%, 100px"],
+ expected: "250%, calc(25% + 50px)"
+}, 'Animating a custom property of type <length-percentage># with iterationComposite');
+
+discrete_animation_test("<length-percentage>#", '10px, 20%', '30px', 'Animating a custom property of type <length-percentage># with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-space-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-space-list.html
new file mode 100644
index 0000000000..9497093b6e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-space-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<length-percentage>+",
+ inherits: false,
+ initialValue: "0px"
+}, {
+ keyframes: ["100px 150%", "200% 250px"],
+ expected: "calc(100% + 50px) calc(75% + 125px)"
+}, 'Animating a custom property of type <length-percentage>+');
+
+animation_test({
+ syntax: "<length-percentage>+",
+ inherits: false,
+ initialValue: "100px 150%"
+}, {
+ keyframes: "200% 250px",
+ expected: "calc(100% + 50px) calc(75% + 125px)"
+}, 'Animating a custom property of type <length-percentage>+ with a single keyframe');
+
+animation_test({
+ syntax: "<length-percentage>+",
+ inherits: false,
+ initialValue: "50px 100%"
+}, {
+ composite: "add",
+ keyframes: ["150% 200px", "250% 300px"],
+ expected: "calc(200% + 50px) calc(100% + 250px)"
+}, 'Animating a custom property of type <length-percentage>+ with additivity');
+
+animation_test({
+ syntax: "<length-percentage>+",
+ inherits: false,
+ initialValue: "50px 100%"
+}, {
+ composite: "add",
+ keyframes: "150% 200px",
+ expected: "calc(75% + 50px) calc(100% + 100px)"
+}, 'Animating a custom property of type <length-percentage>+ with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<length-percentage>+",
+ inherits: false,
+ initialValue: "0px 0px"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0px 50%", "100% 100px"],
+ expected: "250% calc(25% + 50px)"
+}, 'Animating a custom property of type <length-percentage>+ with iterationComposite');
+
+discrete_animation_test("<length-percentage>+", '10px 20%', '30px', 'Animating a custom property of type <length-percentage>+ with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage.html
new file mode 100644
index 0000000000..096efd6ba7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<length-percentage>",
+ inherits: false,
+ initialValue: "0px"
+}, {
+ keyframes: ["100px", "100%"],
+ expected: "calc(50% + 50px)"
+}, 'Animating a custom property of type <length-percentage>');
+
+animation_test({
+ syntax: "<length-percentage>",
+ inherits: false,
+ initialValue: "100px"
+}, {
+ keyframes: "100%",
+ expected: "calc(50% + 50px)"
+}, 'Animating a custom property of type <length-percentage> with a single keyframe');
+
+animation_test({
+ syntax: "<length-percentage>",
+ inherits: false,
+ initialValue: "100px"
+}, {
+ composite: "add",
+ keyframes: ["200%", "300%"],
+ expected: "calc(250% + 100px)"
+}, 'Animating a custom property of type <length-percentage> with additivity');
+
+animation_test({
+ syntax: "<length-percentage>",
+ inherits: false,
+ initialValue: "100px"
+}, {
+ composite: "add",
+ keyframes: "300%",
+ expected: "calc(150% + 100px)"
+}, 'Animating a custom property of type <length-percentage> with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<length-percentage>",
+ inherits: false,
+ initialValue: "100px"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["50px", "100%"],
+ expected: "calc(250% + 25px)"
+}, 'Animating a custom property of type <length-percentage> with iterationComposite');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-space-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-space-list.html
new file mode 100644
index 0000000000..102259a070
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-space-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<length>+",
+ inherits: false,
+ initialValue: "0px"
+}, {
+ keyframes: ["100px 150px", "200px 250px"],
+ expected: "150px 200px"
+}, 'Animating a custom property of type <length>+');
+
+animation_test({
+ syntax: "<length>+",
+ inherits: false,
+ initialValue: "100px 150px"
+}, {
+ keyframes: "200px 250px",
+ expected: "150px 200px"
+}, 'Animating a custom property of type <length>+ with a single keyframe');
+
+animation_test({
+ syntax: "<length>+",
+ inherits: false,
+ initialValue: "50px 100px"
+}, {
+ composite: "add",
+ keyframes: ["150px 200px", "250px 300px"],
+ expected: "250px 350px"
+}, 'Animating a custom property of type <length>+ with additivity');
+
+animation_test({
+ syntax: "<length>+",
+ inherits: false,
+ initialValue: "50px 100px"
+}, {
+ composite: "add",
+ keyframes: "150px 200px",
+ expected: "125px 200px"
+}, 'Animating a custom property of type <length>+ with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<length>+",
+ inherits: false,
+ initialValue: "0px 0px"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0px 50px", "100px 100px"],
+ expected: "250px 275px"
+}, 'Animating a custom property of type <length>+ with iterationComposite');
+
+discrete_animation_test("<length>+", '10px 20px', '30px', 'Animating a custom property of type <length>+ with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length.html
new file mode 100644
index 0000000000..8849bf52d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<length>",
+ inherits: false,
+ initialValue: "0px"
+}, {
+ keyframes: ["100px", "200px"],
+ expected: "150px"
+}, 'Animating a custom property of type <length>');
+
+animation_test({
+ syntax: "<length>",
+ inherits: false,
+ initialValue: "100px"
+}, {
+ keyframes: "200px",
+ expected: "150px"
+}, 'Animating a custom property of type <length> with a single keyframe');
+
+animation_test({
+ syntax: "<length>",
+ inherits: false,
+ initialValue: "100px"
+}, {
+ composite: "add",
+ keyframes: ["200px", "300px"],
+ expected: "350px"
+}, 'Animating a custom property of type <length> with additivity');
+
+animation_test({
+ syntax: "<length>",
+ inherits: false,
+ initialValue: "100px"
+}, {
+ composite: "add",
+ keyframes: "300px",
+ expected: "250px"
+}, 'Animating a custom property of type <length> with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<length>",
+ inherits: false,
+ initialValue: "100px"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0px", "100px"],
+ expected: "250px"
+}, 'Animating a custom property of type <length> with iterationComposite');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-list-type-mismatch.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-list-type-mismatch.html
new file mode 100644
index 0000000000..95757445ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-list-type-mismatch.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<number>+ | <transform-list>",
+ inherits: false,
+ initialValue: "translateX(100px)"
+}, {
+ keyframes: ["200"],
+ expected: "200"
+}, 'Animating a custom property allowing multiple list types with two mismatching types');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-non-inherited-used-by-standard-property.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-non-inherited-used-by-standard-property.html
new file mode 100644
index 0000000000..11d3f6740d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-non-inherited-used-by-standard-property.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+test(() => {
+ CSS.registerProperty({
+ name: "--my-length",
+ syntax: "<length>",
+ inherits: false,
+ initialValue: "0px"
+ });
+
+ target.style.marginLeft = "var(--my-length)";
+
+ const duration = 1000;
+ const animation = target.animate({ "--my-length": "100px" }, duration);
+ animation.pause();
+ animation.currentTime = duration / 4;
+
+ assert_equals(getComputedStyle(target).marginLeft, "25px");
+}, "Animating a non-inherited CSS variable is reflected on a standard property using that variable as a value");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-number-comma-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-number-comma-list.html
new file mode 100644
index 0000000000..937b6caeeb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-number-comma-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<number>#",
+ inherits: false,
+ initialValue: "0"
+}, {
+ keyframes: ["100, 150", "200, 250"],
+ expected: "150, 200"
+}, 'Animating a custom property of type <number>#');
+
+animation_test({
+ syntax: "<number>#",
+ inherits: false,
+ initialValue: "100, 150"
+}, {
+ keyframes: "200, 250",
+ expected: "150, 200"
+}, 'Animating a custom property of type <number># with a single keyframe');
+
+animation_test({
+ syntax: "<number>#",
+ inherits: false,
+ initialValue: "50, 100"
+}, {
+ composite: "add",
+ keyframes: ["150, 200", "250, 300"],
+ expected: "250, 350"
+}, 'Animating a custom property of type <number># with additivity');
+
+animation_test({
+ syntax: "<number>#",
+ inherits: false,
+ initialValue: "50, 100"
+}, {
+ composite: "add",
+ keyframes: "150, 200",
+ expected: "125, 200"
+}, 'Animating a custom property of type <number># with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<number>#",
+ inherits: false,
+ initialValue: "0, 0"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0, 50", "100, 100"],
+ expected: "250, 275"
+}, 'Animating a custom property of type <number># with iterationComposite');
+
+discrete_animation_test("<number>#", '10, 20', '30', 'Animating a custom property of type <number># with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-number-space-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-number-space-list.html
new file mode 100644
index 0000000000..61f177eb05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-number-space-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<number>+",
+ inherits: false,
+ initialValue: "0"
+}, {
+ keyframes: ["100 150", "200 250"],
+ expected: "150 200"
+}, 'Animating a custom property of type <number>+');
+
+animation_test({
+ syntax: "<number>+",
+ inherits: false,
+ initialValue: "100 150"
+}, {
+ keyframes: "200 250",
+ expected: "150 200"
+}, 'Animating a custom property of type <number>+ with a single keyframe');
+
+animation_test({
+ syntax: "<number>+",
+ inherits: false,
+ initialValue: "50 100"
+}, {
+ composite: "add",
+ keyframes: ["150 200", "250 300"],
+ expected: "250 350"
+}, 'Animating a custom property of type <number>+ with additivity');
+
+animation_test({
+ syntax: "<number>+",
+ inherits: false,
+ initialValue: "50 100"
+}, {
+ composite: "add",
+ keyframes: "150 200",
+ expected: "125 200"
+}, 'Animating a custom property of type <number>+ with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<number>+",
+ inherits: false,
+ initialValue: "0 0"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0 50", "100 100"],
+ expected: "250 275"
+}, 'Animating a custom property of type <number>+ with iterationComposite');
+
+discrete_animation_test("<number>+", '10 20', '30', 'Animating a custom property of type <number>+ with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-number.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-number.html
new file mode 100644
index 0000000000..ea28acacf6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-number.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<number>",
+ inherits: false,
+ initialValue: 0
+}, {
+ keyframes: [100, 200],
+ expected: "150"
+}, 'Animating a custom property of type <number>');
+
+animation_test({
+ syntax: "<number>",
+ inherits: false,
+ initialValue: 100
+}, {
+ keyframes: 200,
+ expected: "150"
+}, 'Animating a custom property of type <number> with a single keyframe');
+
+animation_test({
+ syntax: "<number>",
+ inherits: false,
+ initialValue: 100
+}, {
+ composite: "add",
+ keyframes: [200, 300],
+ expected: "350"
+}, 'Animating a custom property of type <number> with additivity');
+
+animation_test({
+ syntax: "<number>",
+ inherits: false,
+ initialValue: 100
+}, {
+ composite: "add",
+ keyframes: 300,
+ expected: "250"
+}, 'Animating a custom property of type <number> with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<number>",
+ inherits: false,
+ initialValue: 100
+}, {
+ iterationComposite: "accumulate",
+ keyframes: [0, 100],
+ expected: "250"
+}, 'Animating a custom property of type <number> with iterationComposite');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-percentage-comma-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-percentage-comma-list.html
new file mode 100644
index 0000000000..c690046646
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-percentage-comma-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<percentage>#",
+ inherits: false,
+ initialValue: "0%"
+}, {
+ keyframes: ["100%, 150%", "200%, 250%"],
+ expected: "150%, 200%"
+}, 'Animating a custom property of type <percentage>#');
+
+animation_test({
+ syntax: "<percentage>#",
+ inherits: false,
+ initialValue: "100%, 150%"
+}, {
+ keyframes: "200%, 250%",
+ expected: "150%, 200%"
+}, 'Animating a custom property of type <percentage># with a single keyframe');
+
+animation_test({
+ syntax: "<percentage>#",
+ inherits: false,
+ initialValue: "50%, 100%"
+}, {
+ composite: "add",
+ keyframes: ["150%, 200%", "250%, 300%"],
+ expected: "250%, 350%"
+}, 'Animating a custom property of type <percentage># with additivity');
+
+animation_test({
+ syntax: "<percentage>#",
+ inherits: false,
+ initialValue: "50%, 100%"
+}, {
+ composite: "add",
+ keyframes: "150%, 200%",
+ expected: "125%, 200%"
+}, 'Animating a custom property of type <percentage># with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<percentage>#",
+ inherits: false,
+ initialValue: "0%, 0%"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0%, 50%", "100%, 100%"],
+ expected: "250%, 275%"
+}, 'Animating a custom property of type <percentage># with iterationComposite');
+
+discrete_animation_test("<percentage>#", '10%, 20%', '30%', 'Animating a custom property of type <percentage># with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-percentage-space-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-percentage-space-list.html
new file mode 100644
index 0000000000..d012b851fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-percentage-space-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<percentage>+",
+ inherits: false,
+ initialValue: "0%"
+}, {
+ keyframes: ["100% 150%", "200% 250%"],
+ expected: "150% 200%"
+}, 'Animating a custom property of type <percentage>+');
+
+animation_test({
+ syntax: "<percentage>+",
+ inherits: false,
+ initialValue: "100% 150%"
+}, {
+ keyframes: "200% 250%",
+ expected: "150% 200%"
+}, 'Animating a custom property of type <percentage>+ with a single keyframe');
+
+animation_test({
+ syntax: "<percentage>+",
+ inherits: false,
+ initialValue: "50% 100%"
+}, {
+ composite: "add",
+ keyframes: ["150% 200%", "250% 300%"],
+ expected: "250% 350%"
+}, 'Animating a custom property of type <percentage>+ with additivity');
+
+animation_test({
+ syntax: "<percentage>+",
+ inherits: false,
+ initialValue: "50% 100%"
+}, {
+ composite: "add",
+ keyframes: "150% 200%",
+ expected: "125% 200%"
+}, 'Animating a custom property of type <percentage>+ with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<percentage>+",
+ inherits: false,
+ initialValue: "0% 0%"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0% 50%", "100% 100%"],
+ expected: "250% 275%"
+}, 'Animating a custom property of type <percentage>+ with iterationComposite');
+
+discrete_animation_test("<percentage>+", '10% 20%', '30%', 'Animating a custom property of type <percentage>+ with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-percentage.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-percentage.html
new file mode 100644
index 0000000000..6af498e702
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-percentage.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<percentage>",
+ inherits: false,
+ initialValue: "0%"
+}, {
+ keyframes: ["100%", "200%"],
+ expected: "150%"
+}, 'Animating a custom property of type <percentage>');
+
+animation_test({
+ syntax: "<percentage>",
+ inherits: false,
+ initialValue: "100%"
+}, {
+ keyframes: "200%",
+ expected: "150%"
+}, 'Animating a custom property of type <percentage> with a single keyframe');
+
+animation_test({
+ syntax: "<percentage>",
+ inherits: false,
+ initialValue: "100%"
+}, {
+ composite: "add",
+ keyframes: ["200%", "300%"],
+ expected: "350%"
+}, 'Animating a custom property of type <percentage> with additivity');
+
+animation_test({
+ syntax: "<percentage>",
+ inherits: false,
+ initialValue: "100%"
+}, {
+ composite: "add",
+ keyframes: "300%",
+ expected: "250%"
+}, 'Animating a custom property of type <percentage> with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<percentage>",
+ inherits: false,
+ initialValue: "100%"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0%", "100%"],
+ expected: "250%"
+}, 'Animating a custom property of type <percentage> with iterationComposite');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-resolution-comma-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-resolution-comma-list.html
new file mode 100644
index 0000000000..22201947ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-resolution-comma-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<resolution>#",
+ inherits: false,
+ initialValue: "0dppx"
+}, {
+ keyframes: ["100dppx, 150dppx", "200dppx, 250dppx"],
+ expected: "150dppx, 200dppx"
+}, 'Animating a custom property of type <resolution>#');
+
+animation_test({
+ syntax: "<resolution>#",
+ inherits: false,
+ initialValue: "100dppx, 150dppx"
+}, {
+ keyframes: "200dppx, 250dppx",
+ expected: "150dppx, 200dppx"
+}, 'Animating a custom property of type <resolution># with a single keyframe');
+
+animation_test({
+ syntax: "<resolution>#",
+ inherits: false,
+ initialValue: "50dppx, 100dppx"
+}, {
+ composite: "add",
+ keyframes: ["150dppx, 200dppx", "250dppx, 300dppx"],
+ expected: "250dppx, 350dppx"
+}, 'Animating a custom property of type <resolution># with additivity');
+
+animation_test({
+ syntax: "<resolution>#",
+ inherits: false,
+ initialValue: "50dppx, 100dppx"
+}, {
+ composite: "add",
+ keyframes: "150dppx, 200dppx",
+ expected: "125dppx, 200dppx"
+}, 'Animating a custom property of type <resolution># with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<resolution>#",
+ inherits: false,
+ initialValue: "0dppx, 0dppx"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0dppx, 50dppx", "100dppx, 100dppx"],
+ expected: "250dppx, 275dppx"
+}, 'Animating a custom property of type <resolution># with iterationComposite');
+
+discrete_animation_test("<resolution>#", '10dppx, 20dppx', '30dppx', 'Animating a custom property of type <resolution># with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-resolution-space-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-resolution-space-list.html
new file mode 100644
index 0000000000..d4765d4e32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-resolution-space-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<resolution>+",
+ inherits: false,
+ initialValue: "0dppx"
+}, {
+ keyframes: ["100dppx 150dppx", "200dppx 250dppx"],
+ expected: "150dppx 200dppx"
+}, 'Animating a custom property of type <resolution>+');
+
+animation_test({
+ syntax: "<resolution>+",
+ inherits: false,
+ initialValue: "100dppx 150dppx"
+}, {
+ keyframes: "200dppx 250dppx",
+ expected: "150dppx 200dppx"
+}, 'Animating a custom property of type <resolution>+ with a single keyframe');
+
+animation_test({
+ syntax: "<resolution>+",
+ inherits: false,
+ initialValue: "50dppx 100dppx"
+}, {
+ composite: "add",
+ keyframes: ["150dppx 200dppx", "250dppx 300dppx"],
+ expected: "250dppx 350dppx"
+}, 'Animating a custom property of type <resolution>+ with additivity');
+
+animation_test({
+ syntax: "<resolution>+",
+ inherits: false,
+ initialValue: "50dppx 100dppx"
+}, {
+ composite: "add",
+ keyframes: "150dppx 200dppx",
+ expected: "125dppx 200dppx"
+}, 'Animating a custom property of type <resolution>+ with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<resolution>+",
+ inherits: false,
+ initialValue: "0dppx 0dppx"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0dppx 50dppx", "100dppx 100dppx"],
+ expected: "250dppx 275dppx"
+}, 'Animating a custom property of type <resolution>+ with iterationComposite');
+
+discrete_animation_test("<resolution>+", '10dppx 20dppx', '30dppx', 'Animating a custom property of type <resolution>+ with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-resolution.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-resolution.html
new file mode 100644
index 0000000000..3d05139edc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-resolution.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<resolution>",
+ inherits: false,
+ initialValue: "0dppx"
+}, {
+ keyframes: ["100dppx", "200dppx"],
+ expected: "150dppx"
+}, 'Animating a custom property of type <resolution>');
+
+animation_test({
+ syntax: "<resolution>",
+ inherits: false,
+ initialValue: "100dppx"
+}, {
+ keyframes: "200dppx",
+ expected: "150dppx"
+}, 'Animating a custom property of type <resolution> with a single keyframe');
+
+animation_test({
+ syntax: "<resolution>",
+ inherits: false,
+ initialValue: "100dppx"
+}, {
+ composite: "add",
+ keyframes: ["200dppx", "300dppx"],
+ expected: "350dppx"
+}, 'Animating a custom property of type <resolution> with additivity');
+
+animation_test({
+ syntax: "<resolution>",
+ inherits: false,
+ initialValue: "100dppx"
+}, {
+ composite: "add",
+ keyframes: "300dppx",
+ expected: "250dppx"
+}, 'Animating a custom property of type <resolution> with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<resolution>",
+ inherits: false,
+ initialValue: "100dppx"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0dppx", "100dppx"],
+ expected: "250dppx"
+}, 'Animating a custom property of type <resolution> with iterationComposite');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-time-comma-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-time-comma-list.html
new file mode 100644
index 0000000000..bf07baf130
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-time-comma-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<time>#",
+ inherits: false,
+ initialValue: "0s"
+}, {
+ keyframes: ["100s, 150s", "200s, 250s"],
+ expected: "150s, 200s"
+}, 'Animating a custom property of type <time>#');
+
+animation_test({
+ syntax: "<time>#",
+ inherits: false,
+ initialValue: "100s, 150s"
+}, {
+ keyframes: "200s, 250s",
+ expected: "150s, 200s"
+}, 'Animating a custom property of type <time># with a single keyframe');
+
+animation_test({
+ syntax: "<time>#",
+ inherits: false,
+ initialValue: "50s, 100s"
+}, {
+ composite: "add",
+ keyframes: ["150s, 200s", "250s, 300s"],
+ expected: "250s, 350s"
+}, 'Animating a custom property of type <time># with additivity');
+
+animation_test({
+ syntax: "<time>#",
+ inherits: false,
+ initialValue: "50s, 100s"
+}, {
+ composite: "add",
+ keyframes: "150s, 200s",
+ expected: "125s, 200s"
+}, 'Animating a custom property of type <time># with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<time>#",
+ inherits: false,
+ initialValue: "0s, 0s"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0s, 50s", "100s, 100s"],
+ expected: "250s, 275s"
+}, 'Animating a custom property of type <time># with iterationComposite');
+
+discrete_animation_test("<time>#", '10s, 20s', '30s', 'Animating a custom property of type <time># with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-time-space-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-time-space-list.html
new file mode 100644
index 0000000000..c0fe206ea7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-time-space-list.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<time>+",
+ inherits: false,
+ initialValue: "0s"
+}, {
+ keyframes: ["100s 150s", "200s 250s"],
+ expected: "150s 200s"
+}, 'Animating a custom property of type <time>+');
+
+animation_test({
+ syntax: "<time>+",
+ inherits: false,
+ initialValue: "100s 150s"
+}, {
+ keyframes: "200s 250s",
+ expected: "150s 200s"
+}, 'Animating a custom property of type <time>+ with a single keyframe');
+
+animation_test({
+ syntax: "<time>+",
+ inherits: false,
+ initialValue: "50s 100s"
+}, {
+ composite: "add",
+ keyframes: ["150s 200s", "250s 300s"],
+ expected: "250s 350s"
+}, 'Animating a custom property of type <time>+ with additivity');
+
+animation_test({
+ syntax: "<time>+",
+ inherits: false,
+ initialValue: "50s 100s"
+}, {
+ composite: "add",
+ keyframes: "150s 200s",
+ expected: "125s 200s"
+}, 'Animating a custom property of type <time>+ with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<time>+",
+ inherits: false,
+ initialValue: "0s 0s"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0s 50s", "100s 100s"],
+ expected: "250s 275s"
+}, 'Animating a custom property of type <time>+ with iterationComposite');
+
+discrete_animation_test("<time>+", '10s 20s', '30s', 'Animating a custom property of type <time>+ with different lengths is discrete');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-time.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-time.html
new file mode 100644
index 0000000000..b9f5984db7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-time.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<time>",
+ inherits: false,
+ initialValue: "0s"
+}, {
+ keyframes: ["100s", "200s"],
+ expected: "150s"
+}, 'Animating a custom property of type <time>');
+
+animation_test({
+ syntax: "<time>",
+ inherits: false,
+ initialValue: "100s"
+}, {
+ keyframes: "200s",
+ expected: "150s"
+}, 'Animating a custom property of type <time> with a single keyframe');
+
+animation_test({
+ syntax: "<time>",
+ inherits: false,
+ initialValue: "100s"
+}, {
+ composite: "add",
+ keyframes: ["200s", "300s"],
+ expected: "350s"
+}, 'Animating a custom property of type <time> with additivity');
+
+animation_test({
+ syntax: "<time>",
+ inherits: false,
+ initialValue: "100s"
+}, {
+ composite: "add",
+ keyframes: "300s",
+ expected: "250s"
+}, 'Animating a custom property of type <time> with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<time>",
+ inherits: false,
+ initialValue: "100s"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["0s", "100s"],
+ expected: "250s"
+}, 'Animating a custom property of type <time> with iterationComposite');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-transform-function.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-transform-function.html
new file mode 100644
index 0000000000..c4fcd5ce4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-transform-function.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<transform-function>",
+ inherits: false,
+ initialValue: "translateX(0px)"
+}, {
+ keyframes: ["translateX(100px)", "translateX(200px)"],
+ expected: "translateX(150px)"
+}, 'Animating a custom property of type <transform-function>');
+
+animation_test({
+ syntax: "<transform-function>",
+ inherits: false,
+ initialValue: "translateX(100px)"
+}, {
+ keyframes: "translateX(200px)",
+ expected: "translateX(150px)"
+}, 'Animating a custom property of type <transform-function> with a single keyframe');
+
+animation_test({
+ syntax: "<transform-function>",
+ inherits: false,
+ initialValue: "translateX(100px)"
+}, {
+ composite: "add",
+ keyframes: ["translateX(200px)", "translateX(300px)"],
+ expected: "translateX(350px)"
+}, 'Animating a custom property of type <transform-function> with additivity');
+
+animation_test({
+ syntax: "<transform-function>",
+ inherits: false,
+ initialValue: "translateX(100px)"
+}, {
+ composite: "add",
+ keyframes: "translateX(300px)",
+ expected: "translateX(250px)"
+}, 'Animating a custom property of type <transform-function> with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<transform-function>",
+ inherits: false,
+ initialValue: "translateX(100px)"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["translateX(0px)", "translateX(100px)"],
+ expected: "translateX(250px)"
+}, 'Animating a custom property of type <transform-function> with iterationComposite');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-transform-list-multiple-values.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-transform-list-multiple-values.html
new file mode 100644
index 0000000000..9ffaec830f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-transform-list-multiple-values.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<transform-list>",
+ inherits: false,
+ initialValue: "translateX(0px)"
+}, {
+ keyframes: ["translateX(100px) scale(2)", "translateX(200px) scale(4)"],
+ expected: "translateX(150px) scale(3)"
+}, 'Animating a custom property of type <transform-list> containing multiple values');
+
+animation_test({
+ syntax: "<transform-list>",
+ inherits: false,
+ initialValue: "translateX(100px) scale(2)"
+}, {
+ keyframes: "translateX(200px) scale(4)",
+ expected: "translateX(150px) scale(3)"
+}, 'Animating a custom property of type <transform-list> containing multiple values with a single keyframe');
+
+animation_test({
+ syntax: "<transform-list>",
+ inherits: false,
+ initialValue: "translateX(100px) scale(2)"
+}, {
+ composite: "add",
+ keyframes: ["translateX(200px) scale(3)", "translateX(300px) scale(4)"],
+ expected: "translateX(100px) scale(2) translateX(250px) scale(3.5)"
+}, 'Animating a custom property of type <transform-list> containing multiple values with additivity');
+
+animation_test({
+ syntax: "<transform-list>",
+ inherits: false,
+ initialValue: "translateX(100px) scale(2)"
+}, {
+ composite: "add",
+ keyframes: "translateX(300px) scale(3)",
+ expected: "translateX(100px) scale(2) translateX(150px) scale(2)"
+}, 'Animating a custom property of type <transform-list> containing multiple values with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<transform-list>",
+ inherits: false,
+ initialValue: "translateX(100px) scale(2)"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["translateX(0px) scale(3)", "translateX(100px) scale(4)"],
+ expected: "translateX(250px) scale(11.5)"
+}, 'Animating a custom property of type <transform-list> containing multiple values with iterationComposite');
+
+animation_test({
+ syntax: "<transform-list>",
+ inherits: false,
+ initialValue: "translateX(0px)"
+}, {
+ keyframes: ["translateX(100px) scale(2)", "rotate(180deg)"],
+ expected: "matrix(0, -1.5, 1.5, 0, 50, 0)"
+}, 'Animating a custom property of type <transform-list> containing multiple values and with mismatching list lengths');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-transform-list-single-values.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-transform-list-single-values.html
new file mode 100644
index 0000000000..b9bce6dd0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-transform-list-single-values.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+animation_test({
+ syntax: "<transform-list>",
+ inherits: false,
+ initialValue: "translateX(0px)"
+}, {
+ keyframes: ["translateX(100px)", "translateX(200px)"],
+ expected: "translateX(150px)"
+}, 'Animating a custom property of type <transform-list> containing a single value');
+
+animation_test({
+ syntax: "<transform-list>",
+ inherits: false,
+ initialValue: "translateX(100px)"
+}, {
+ keyframes: "translateX(200px)",
+ expected: "translateX(150px)"
+}, 'Animating a custom property of type <transform-list> containing a single value with a single keyframe');
+
+animation_test({
+ syntax: "<transform-list>",
+ inherits: false,
+ initialValue: "translateX(100px)"
+}, {
+ composite: "add",
+ keyframes: ["translateX(200px)", "translateX(300px)"],
+ expected: "translateX(100px) translateX(250px)"
+}, 'Animating a custom property of type <transform-list> containing a single value with additivity');
+
+animation_test({
+ syntax: "<transform-list>",
+ inherits: false,
+ initialValue: "translateX(100px)"
+}, {
+ composite: "add",
+ keyframes: "translateX(300px)",
+ expected: "translateX(100px) translateX(150px)"
+}, 'Animating a custom property of type <transform-list> containing a single value with a single keyframe and additivity');
+
+animation_test({
+ syntax: "<transform-list>",
+ inherits: false,
+ initialValue: "translateX(100px)"
+}, {
+ iterationComposite: "accumulate",
+ keyframes: ["translateX(0px)", "translateX(100px)"],
+ expected: "translateX(250px)"
+}, 'Animating a custom property of type <transform-list> containing a single value with iterationComposite');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-url.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-url.html
new file mode 100644
index 0000000000..830b9e1f49
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-url.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+discrete_animation_test("<url>", 'url("https://example.com/from")', 'url("https://example.com/to")');
+discrete_animation_test("<url>+", 'url("https://example.com/from1") url("https://example.com/from2")', 'url("https://example.com/to1") url("https://example.com/to2")');
+discrete_animation_test("<url>#", 'url("https://example.com/from1"), url("https://example.com/from2")', 'url("https://example.com/to1"), url("https://example.com/to2")');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-used-in-shorthand.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-used-in-shorthand.html
new file mode 100644
index 0000000000..63f7fd3fe7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-used-in-shorthand.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+
+@property --angle {
+ syntax: "<angle>";
+ inherits: false;
+ initial-value: 0deg;
+}
+
+@keyframes angle-animation {
+ from { --angle: 0deg }
+ to { --angle: 180deg }
+}
+
+#target {
+ animation: angle-animation 1000s linear -500s;
+ background: linear-gradient(var(--angle), black, white);
+}
+
+</style>
+
+<div id="target"></div>
+
+<script>
+
+test(() => {
+ assert_equals(getComputedStyle(target).backgroundImage, 'linear-gradient(90deg, rgb(0, 0, 0), rgb(255, 255, 255))')
+}, "Animated custom property is applied in a shorthand property.");
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-angle.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-angle.html
new file mode 100644
index 0000000000..974fc6c0db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-angle.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+transition_test({
+ syntax: "<angle>",
+ from: "100deg",
+ to: "200deg",
+ expected: "150deg"
+}, 'A custom property of type <angle> can yield a CSS Transition');
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-color.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-color.html
new file mode 100644
index 0000000000..445a2a6391
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-color.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+transition_test({
+ syntax: "<color>",
+ from: "rgb(100, 100, 100)",
+ to: "rgb(200, 200, 200)",
+ expected: "rgb(150, 150, 150)"
+}, 'A custom property of type <color> can yield a CSS Transition');
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-custom-ident.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-custom-ident.html
new file mode 100644
index 0000000000..73898d350d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-custom-ident.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+transition_test({
+ syntax: "<custom-ident>",
+ from: "from",
+ to: "to",
+ expected: "to",
+}, 'A custom property of type <custom-ident> can yield a discrete CSS Transition');
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-image.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-image.html
new file mode 100644
index 0000000000..30fe35db2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-image.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+transition_test({
+ syntax: "<image>",
+ from: 'url("https://example.com/from")',
+ to: 'url("https://example.com/to")',
+ expected: 'url("https://example.com/to")',
+}, 'A custom property of type <image> can yield a CSS Transition');
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-inherited-used-by-standard-property.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-inherited-used-by-standard-property.html
new file mode 100644
index 0000000000..0680722d4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-inherited-used-by-standard-property.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="container">
+ <div id="target"></div>
+</div>
+<script>
+
+test(() => {
+ const customProperty = "--my-length";
+
+ CSS.registerProperty({
+ name: customProperty,
+ syntax: "<length>",
+ inherits: true,
+ initialValue: "100px"
+ });
+
+ target.style.marginLeft = `var(${customProperty})`;
+ assert_equals(getComputedStyle(target).marginLeft, "100px");
+ assert_equals(getComputedStyle(target).getPropertyValue(customProperty), "100px");
+
+ container.style.transition = `${customProperty} 1s -500ms linear`;
+ container.style.setProperty(customProperty, "200px");
+
+ assert_equals(getComputedStyle(target).marginLeft, "150px");
+}, "Running a transition an inherited CSS variable is reflected on a standard property using that variable as a value");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-integer.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-integer.html
new file mode 100644
index 0000000000..64685fe07c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-integer.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+transition_test({
+ syntax: "<integer>",
+ from: "100",
+ to: "200",
+ expected: "150"
+}, 'A custom property of type <integer> can yield a CSS Transition');
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-length-percentage.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-length-percentage.html
new file mode 100644
index 0000000000..f1ed1dec26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-length-percentage.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+transition_test({
+ syntax: "<length-percentage>",
+ from: "100px",
+ to: "100%",
+ expected: "calc(50% + 50px)"
+}, 'A custom property of type <length-percentage> can yield a CSS Transition');
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-length.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-length.html
new file mode 100644
index 0000000000..f5a76490cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-length.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+transition_test({
+ syntax: "<length>",
+ from: "100px",
+ to: "200px",
+ expected: "150px"
+}, 'A custom property of type <length> can yield a CSS Transition');
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-inherited-property-numbers.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-inherited-property-numbers.html
new file mode 100644
index 0000000000..292e23b1fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-inherited-property-numbers.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="container"><div id="target"></div></div>
+<script>
+
+test(() => {
+ const customProperty = generate_name();
+ CSS.registerProperty({
+ name: customProperty,
+ syntax: "<number>",
+ inherits: false,
+ initialValue: "1"
+ });
+
+ // Create transitions for our custom property with
+ // a longer list of transition-duration values.
+ const container = document.getElementById("container");
+ container.style.transitionProperty = customProperty;
+ container.style.transitionDuration = "100s, 200s";
+
+ const target = document.getElementById("target");
+ target.style.transitionProperty = "inherit";
+ target.style.transitionDuration = "inherit";
+
+ // Trigger a style change by getting the custom property
+ // value from the computed style.
+ getComputedStyle(target).getPropertyValue(customProperty);
+
+ // Set a new value for the custom property, which will yield a
+ // transition.
+ target.style.setProperty(customProperty, "2");
+ const animations = target.getAnimations();
+ assert_equals(animations.length, 1, "A single transition was generated");
+
+ const transition = animations[0];
+ assert_class_string(transition, "CSSTransition", "A CSSTransition is running");
+ assert_equals(transition.transitionProperty, customProperty);
+}, 'Using a single "transition-property" value set to a custom property and two "transition-duration" values correctly yields a CSS Transition when the transition properties are set on a parent and the child inherits.');
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-list.html
new file mode 100644
index 0000000000..84473ca916
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-list.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+transition_test({
+ syntax: "<angle>#",
+ from: '100deg, 200deg',
+ to: '300deg',
+ expected: '300deg',
+}, 'A custom property of type <angle># yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<angle>+",
+ from: '100deg 200deg',
+ to: '300deg',
+ expected: '300deg',
+}, 'A custom property of type <angle>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<color>#",
+ from: 'rgb(100, 100, 100), rgb(150, 150, 150)',
+ to: 'rgb(200, 200, 200)',
+ expected: 'rgb(200, 200, 200)',
+}, 'A custom property of type <color># yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<color>+",
+ from: 'rgb(100, 100, 100) rgb(150, 150, 150)',
+ to: 'rgb(200, 200, 200)',
+ expected: 'rgb(200, 200, 200)',
+}, 'A custom property of type <color>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<custom-ident>#",
+ from: 'foo, bar',
+ to: 'baz',
+ expected: 'baz',
+}, 'A custom property of type <custom-ident># yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<custom-ident>+",
+ from: 'foo bar',
+ to: 'baz',
+ expected: 'baz',
+}, 'A custom property of type <custom-ident>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<image>#",
+ from: 'url("https://example.com/foo"), url("https://example.com/bar")',
+ to: 'url("https://example.com/to")',
+ expected: 'url("https://example.com/to")',
+}, 'A custom property of type <image># yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<image>+",
+ from: 'url("https://example.com/foo") url("https://example.com/bar")',
+ to: 'url("https://example.com/to")',
+ expected: 'url("https://example.com/to")',
+}, 'A custom property of type <image>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<integer>#",
+ from: '100, 200',
+ to: '300',
+ expected: '300',
+}, 'A custom property of type <integer># yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<integer>+",
+ from: '100 200',
+ to: '300',
+ expected: '300',
+}, 'A custom property of type <integer>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<length-percentage>#",
+ from: '100px, 200px',
+ to: '300%',
+ expected: '300%',
+}, 'A custom property of type <length-percentage># yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<length-percentage>+",
+ from: '100px 200px',
+ to: '300%',
+ expected: '300%',
+}, 'A custom property of type <length-percentage>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<length>#",
+ from: '100px, 200px',
+ to: '300px',
+ expected: '300px',
+}, 'A custom property of type <length># yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<length>+",
+ from: '100px 200px',
+ to: '300px',
+ expected: '300px',
+}, 'A custom property of type <length>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<number>#",
+ from: '100, 200',
+ to: '300',
+ expected: '300',
+}, 'A custom property of type <number># yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<number>+",
+ from: '100 200',
+ to: '300',
+ expected: '300',
+}, 'A custom property of type <number>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<percentage>#",
+ from: '100%, 200%',
+ to: '300%',
+ expected: '300%',
+}, 'A custom property of type <percentage># yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<percentage>+",
+ from: '100% 200%',
+ to: '300%',
+ expected: '300%',
+}, 'A custom property of type <percentage>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<resolution>#",
+ from: '100dppx, 200dppx',
+ to: '300dppx',
+ expected: '300dppx',
+}, 'A custom property of type <resolution># yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<resolution>+",
+ from: '100dppx 200dppx',
+ to: '300dppx',
+ expected: '300dppx',
+}, 'A custom property of type <resolution>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<time>#",
+ from: '100s, 200s',
+ to: '300s',
+ expected: '300s',
+}, 'A custom property of type <time># yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<time>+",
+ from: '100s 200s',
+ to: '300s',
+ expected: '300s',
+}, 'A custom property of type <time>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<url>#",
+ from: 'url("https://example.com/foo"), url("https://example.com/bar")',
+ to: 'url("https://example.com/to")',
+ expected: 'url("https://example.com/to")',
+}, 'A custom property of type <url># yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+transition_test({
+ syntax: "<url>+",
+ from: 'url("https://example.com/foo") url("https://example.com/bar")',
+ to: 'url("https://example.com/to")',
+ expected: 'url("https://example.com/to")',
+}, 'A custom property of type <url>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-property-numbers.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-property-numbers.html
new file mode 100644
index 0000000000..713a035320
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-property-numbers.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+test(() => {
+ const customProperty = generate_name();
+ CSS.registerProperty({
+ name: customProperty,
+ syntax: "<number>",
+ inherits: false,
+ initialValue: "1"
+ });
+
+ // Create transitions for our custom property with
+ // a longer list of transition-duration values.
+ const target = document.getElementById("target");
+ target.style.transitionProperty = customProperty;
+ target.style.transitionDuration = "100s, 200s";
+
+ // Trigger a style change by getting the custom property
+ // value from the computed style.
+ getComputedStyle(target).getPropertyValue(customProperty);
+
+ // Set a new value for the custom property, which will yield a
+ // transition.
+ target.style.setProperty(customProperty, "2");
+ const animations = target.getAnimations();
+ assert_equals(animations.length, 1, "A single transition was generated");
+
+ const transition = animations[0];
+ assert_class_string(transition, "CSSTransition", "A CSSTransition is running");
+ assert_equals(transition.transitionProperty, customProperty);
+}, 'Using a single "transition-property" value set to a custom property and two "transition-duration" values correctly yields a CSS Transition.');
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-non-inherited-used-by-standard-property.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-non-inherited-used-by-standard-property.html
new file mode 100644
index 0000000000..b96c28bc88
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-non-inherited-used-by-standard-property.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+test(() => {
+ const customProperty = "--my-length";
+
+ CSS.registerProperty({
+ name: customProperty,
+ syntax: "<length>",
+ inherits: false,
+ initialValue: "100px"
+ });
+
+ target.style.marginLeft = `var(${customProperty})`;
+ assert_equals(getComputedStyle(target).marginLeft, "100px");
+
+ target.style.transition = `${customProperty} 1s -500ms linear`;
+ target.style.setProperty(customProperty, "200px");
+
+ assert_equals(getComputedStyle(target).marginLeft, "150px");
+}, "Running a transition a non-inherited CSS variable is reflected on a standard property using that variable as a value");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-number.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-number.html
new file mode 100644
index 0000000000..a96e319686
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-number.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+transition_test({
+ syntax: "<number>",
+ from: "100",
+ to: "200",
+ expected: "150"
+}, 'A custom property of type <number> can yield a CSS Transition');
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-percentage.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-percentage.html
new file mode 100644
index 0000000000..71d51b0e27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-percentage.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+transition_test({
+ syntax: "<percentage>",
+ from: "100%",
+ to: "200%",
+ expected: "150%"
+}, 'A custom property of type <percentage> can yield a CSS Transition');
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-property-all.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-property-all.html
new file mode 100644
index 0000000000..6fc724cd35
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-property-all.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+transition_test({
+ syntax: "<length>",
+ from: "100px",
+ to: "200px",
+ expected: "150px",
+ transitionProperty: "all"
+}, 'A custom property can yield a CSS Transition with transition-property: all');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-resolution.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-resolution.html
new file mode 100644
index 0000000000..5631910b7c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-resolution.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+transition_test({
+ syntax: "<resolution>",
+ from: "100dppx",
+ to: "200dppx",
+ expected: "150dppx"
+}, 'A custom property of type <resolution> can yield a CSS Transition');
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-time.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-time.html
new file mode 100644
index 0000000000..eb579b71f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-time.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+transition_test({
+ syntax: "<time>",
+ from: "100s",
+ to: "200s",
+ expected: "150s"
+}, 'A custom property of type <time> can yield a CSS Transition');
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-transform-function.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-transform-function.html
new file mode 100644
index 0000000000..aa491555c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-transform-function.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+transition_test({
+ syntax: "<transform-function>",
+ from: "translateX(100px)",
+ to: "translateX(200px)",
+ expected: "translateX(150px)"
+}, 'A custom property of type <transform-function> can yield a CSS Transition');
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-transform-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-transform-list.html
new file mode 100644
index 0000000000..8b7424fec5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-transform-list.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+transition_test({
+ syntax: "<transform-list>",
+ from: "translateX(100px) scale(2)",
+ to: "translateX(200px) scale(4)",
+ expected: "translateX(150px) scale(3)"
+}, 'A custom property of type <transform-list> can yield a CSS Transition');
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-url.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-url.html
new file mode 100644
index 0000000000..4f22a91325
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-url.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
+<div id="target"></div>
+<script>
+
+transition_test({
+ syntax: "<url>",
+ from: 'url("https://example.com/from")',
+ to: 'url("https://example.com/to")',
+ expected: 'url("https://example.com/to")',
+}, 'A custom property of type <url> can yield a discrete CSS Transition');
+
+</script> \ No newline at end of file