From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 ...custom-property-animation-angle-comma-list.html |  59 +++++++
 ...custom-property-animation-angle-space-list.html |  59 +++++++
 .../animation/custom-property-animation-angle.html |  57 +++++++
 ...custom-property-animation-color-comma-list.html |  59 +++++++
 ...custom-property-animation-color-space-list.html |  59 +++++++
 .../animation/custom-property-animation-color.html |  57 +++++++
 .../custom-property-animation-custom-ident.html    |  13 ++
 .../animation/custom-property-animation-image.html |  13 ++
 ...mation-inherited-used-by-standard-property.html |  29 ++++
 ...stom-property-animation-integer-comma-list.html |  59 +++++++
 ...stom-property-animation-integer-space-list.html |  59 +++++++
 .../custom-property-animation-integer.html         |  57 +++++++
 ...ustom-property-animation-length-comma-list.html |  59 +++++++
 ...rty-animation-length-percentage-comma-list.html |  59 +++++++
 ...rty-animation-length-percentage-space-list.html |  59 +++++++
 ...ustom-property-animation-length-percentage.html |  57 +++++++
 ...ustom-property-animation-length-space-list.html |  59 +++++++
 .../custom-property-animation-length.html          |  57 +++++++
 ...stom-property-animation-list-type-mismatch.html |  18 +++
 ...on-non-inherited-used-by-standard-property.html |  27 ++++
 ...ustom-property-animation-number-comma-list.html |  59 +++++++
 ...ustom-property-animation-number-space-list.html |  59 +++++++
 .../custom-property-animation-number.html          |  57 +++++++
 ...m-property-animation-percentage-comma-list.html |  59 +++++++
 ...m-property-animation-percentage-space-list.html |  59 +++++++
 .../custom-property-animation-percentage.html      |  57 +++++++
 ...m-property-animation-resolution-comma-list.html |  59 +++++++
 ...m-property-animation-resolution-space-list.html |  59 +++++++
 .../custom-property-animation-resolution.html      |  57 +++++++
 .../custom-property-animation-time-comma-list.html |  59 +++++++
 .../custom-property-animation-time-space-list.html |  59 +++++++
 .../animation/custom-property-animation-time.html  |  57 +++++++
 ...stom-property-animation-transform-function.html |  57 +++++++
 ...y-animation-transform-list-multiple-values.html |  66 ++++++++
 ...rty-animation-transform-list-single-values.html |  57 +++++++
 .../animation/custom-property-animation-url.html   |  13 ++
 ...ustom-property-animation-used-in-shorthand.html |  34 ++++
 .../custom-property-transition-angle.html          |  16 ++
 .../custom-property-transition-color.html          |  16 ++
 .../custom-property-transition-custom-ident.html   |  16 ++
 .../custom-property-transition-image.html          |  16 ++
 ...sition-inherited-used-by-standard-property.html |  31 ++++
 .../custom-property-transition-integer.html        |  16 ++
 ...stom-property-transition-length-percentage.html |  16 ++
 .../custom-property-transition-length.html         |  16 ++
 ...tion-mismatched-inherited-property-numbers.html |  43 +++++
 ...custom-property-transition-mismatched-list.html | 177 +++++++++++++++++++++
 ...rty-transition-mismatched-property-numbers.html |  39 +++++
 ...on-non-inherited-used-by-standard-property.html |  28 ++++
 .../custom-property-transition-number.html         |  16 ++
 .../custom-property-transition-percentage.html     |  16 ++
 .../custom-property-transition-property-all.html   |  17 ++
 .../custom-property-transition-resolution.html     |  16 ++
 .../animation/custom-property-transition-time.html |  16 ++
 ...tom-property-transition-transform-function.html |  16 ++
 .../custom-property-transition-transform-list.html |  16 ++
 .../animation/custom-property-transition-url.html  |  16 ++
 57 files changed, 2461 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle-comma-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle-space-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color-comma-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color-space-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-custom-ident.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-image.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-inherited-used-by-standard-property.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer-comma-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer-space-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-comma-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-comma-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-space-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-space-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-list-type-mismatch.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-non-inherited-used-by-standard-property.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-number-comma-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-number-space-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-number.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-percentage-comma-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-percentage-space-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-percentage.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-resolution-comma-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-resolution-space-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-resolution.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-time-comma-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-time-space-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-time.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-transform-function.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-transform-list-multiple-values.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-transform-list-single-values.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-url.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-used-in-shorthand.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-angle.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-color.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-custom-ident.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-image.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-inherited-used-by-standard-property.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-integer.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-length-percentage.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-length.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-inherited-property-numbers.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-property-numbers.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-non-inherited-used-by-standard-property.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-number.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-percentage.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-property-all.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-resolution.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-time.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-transform-function.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-transform-list.html
 create mode 100644 testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-url.html

(limited to 'testing/web-platform/tests/css/css-properties-values-api/animation')

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
-- 
cgit v1.2.3