diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-properties-values-api/animation')
52 files changed, 2283 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle-comma-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle-comma-list.html new file mode 100644 index 0000000000..a14b0bb09e --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle-comma-list.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="target"></div> +<script> + +animation_test({ + syntax: "<angle>#", + inherits: false, + initialValue: "0deg" +}, { + keyframes: ["100deg, 150deg", "200deg, 250deg"], + expected: "150deg, 200deg" +}, 'Animating a custom property of type <angle>#'); + +animation_test({ + syntax: "<angle>#", + inherits: false, + initialValue: "100deg, 150deg" +}, { + keyframes: "200deg, 250deg", + expected: "150deg, 200deg" +}, 'Animating a custom property of type <angle># with a single keyframe'); + +animation_test({ + syntax: "<angle>#", + inherits: false, + initialValue: "50deg, 100deg" +}, { + composite: "add", + keyframes: ["150deg, 200deg", "250deg, 300deg"], + expected: "250deg, 350deg" +}, 'Animating a custom property of type <angle># with additivity'); + +animation_test({ + syntax: "<angle>#", + inherits: false, + initialValue: "50deg, 100deg" +}, { + composite: "add", + keyframes: "150deg, 200deg", + expected: "125deg, 200deg" +}, 'Animating a custom property of type <angle># with a single keyframe and additivity'); + +animation_test({ + syntax: "<angle>#", + inherits: false, + initialValue: "0deg, 0deg" +}, { + iterationComposite: "accumulate", + keyframes: ["0deg, 50deg", "100deg, 100deg"], + expected: "250deg, 275deg" +}, 'Animating a custom property of type <angle># with iterationComposite'); + +discrete_animation_test("<angle>#", '10deg, 20deg', '30deg', 'Animating a custom property of type <angle># with different lengths is discrete'); + +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle-space-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle-space-list.html new file mode 100644 index 0000000000..8ce7a9deab --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle-space-list.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="target"></div> +<script> + +animation_test({ + syntax: "<angle>+", + inherits: false, + initialValue: "0deg" +}, { + keyframes: ["100deg 150deg", "200deg 250deg"], + expected: "150deg 200deg" +}, 'Animating a custom property of type <angle>+'); + +animation_test({ + syntax: "<angle>+", + inherits: false, + initialValue: "100deg 150deg" +}, { + keyframes: "200deg 250deg", + expected: "150deg 200deg" +}, 'Animating a custom property of type <angle>+ with a single keyframe'); + +animation_test({ + syntax: "<angle>+", + inherits: false, + initialValue: "50deg 100deg" +}, { + composite: "add", + keyframes: ["150deg 200deg", "250deg 300deg"], + expected: "250deg 350deg" +}, 'Animating a custom property of type <angle>+ with additivity'); + +animation_test({ + syntax: "<angle>+", + inherits: false, + initialValue: "50deg 100deg" +}, { + composite: "add", + keyframes: "150deg 200deg", + expected: "125deg 200deg" +}, 'Animating a custom property of type <angle>+ with a single keyframe and additivity'); + +animation_test({ + syntax: "<angle>+", + inherits: false, + initialValue: "0deg 0deg" +}, { + iterationComposite: "accumulate", + keyframes: ["0deg 50deg", "100deg 100deg"], + expected: "250deg 275deg" +}, 'Animating a custom property of type <angle>+ with iterationComposite'); + +discrete_animation_test("<angle>+", '10deg 20deg', '30deg', 'Animating a custom property of type <angle>+ with different lengths is discrete'); + +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle.html new file mode 100644 index 0000000000..0cb06aef0b --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-angle.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="target"></div> +<script> + +animation_test({ + syntax: "<angle>", + inherits: false, + initialValue: "0deg" +}, { + keyframes: ["100deg", "200deg"], + expected: "150deg" +}, 'Animating a custom property of type <angle>'); + +animation_test({ + syntax: "<angle>", + inherits: false, + initialValue: "100deg" +}, { + keyframes: "200deg", + expected: "150deg" +}, 'Animating a custom property of type <angle> with a single keyframe'); + +animation_test({ + syntax: "<angle>", + inherits: false, + initialValue: "100deg" +}, { + composite: "add", + keyframes: ["200deg", "300deg"], + expected: "350deg" +}, 'Animating a custom property of type <angle> with additivity'); + +animation_test({ + syntax: "<angle>", + inherits: false, + initialValue: "100deg" +}, { + composite: "add", + keyframes: "300deg", + expected: "250deg" +}, 'Animating a custom property of type <angle> with a single keyframe and additivity'); + +animation_test({ + syntax: "<angle>", + inherits: false, + initialValue: "100deg" +}, { + iterationComposite: "accumulate", + keyframes: ["0deg", "100deg"], + expected: "250deg" +}, 'Animating a custom property of type <angle> with iterationComposite'); + +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color-comma-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color-comma-list.html new file mode 100644 index 0000000000..7148df0724 --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color-comma-list.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="target"></div> +<script> + +animation_test({ + syntax: "<color>#", + inherits: false, + initialValue: "black" +}, { + keyframes: ["rgb(100, 100, 100), rgb(150, 150, 150)", "rgb(200, 200, 200), rgb(250, 250, 250)"], + expected: "rgb(150, 150, 150), rgb(200, 200, 200)" +}, 'Animating a custom property of type <color>#'); + +animation_test({ + syntax: "<color>#", + inherits: false, + initialValue: "rgb(100, 100, 100), rgb(150, 150, 150)" +}, { + keyframes: "rgb(200, 200, 200), rgb(250, 250, 250)", + expected: "rgb(150, 150, 150), rgb(200, 200, 200)" +}, 'Animating a custom property of type <color># with a single keyframe'); + +animation_test({ + syntax: "<color>#", + inherits: false, + initialValue: "rgb(100, 100, 100), rgb(150, 150, 150)" +}, { + composite: "add", + keyframes: ["rgb(25, 25, 25), rgb(50, 50, 50)", "rgb(75, 75, 75), rgb(100, 100, 100)"], + expected: "rgb(150, 150, 150), rgb(225, 225, 225)" +}, 'Animating a custom property of type <color># with additivity'); + +animation_test({ + syntax: "<color>#", + inherits: false, + initialValue: "rgb(100, 100, 100), rgb(150, 150, 150)" +}, { + composite: "add", + keyframes: "rgb(50, 50, 50), rgb(100, 100, 100)", + expected: "rgb(125, 125, 125), rgb(200, 200, 200)" +}, 'Animating a custom property of type <color># with a single keyframe and additivity'); + +animation_test({ + syntax: "<color>#", + inherits: false, + initialValue: "black" +}, { + iterationComposite: "accumulate", + keyframes: ["rgb(0, 0, 0), rgb(0, 0, 0)", "rgb(50, 50, 50), rgb(100, 100, 100)"], + expected: "rgb(125, 125, 125), rgb(250, 250, 250)" +}, 'Animating a custom property of type <color># with iterationComposite'); + +discrete_animation_test("<color>#", 'rgb(255, 0, 0), rgb(0, 255, 0)', 'rgb(0, 0, 255)', 'Animating a custom property of type <color># with different lengths is discrete'); + +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color-space-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color-space-list.html new file mode 100644 index 0000000000..679e244667 --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color-space-list.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="target"></div> +<script> + +animation_test({ + syntax: "<color>+", + inherits: false, + initialValue: "black" +}, { + keyframes: ["rgb(100, 100, 100) rgb(150, 150, 150)", "rgb(200, 200, 200) rgb(250, 250, 250)"], + expected: "rgb(150, 150, 150) rgb(200, 200, 200)" +}, 'Animating a custom property of type <color>+'); + +animation_test({ + syntax: "<color>+", + inherits: false, + initialValue: "rgb(100, 100, 100) rgb(150, 150, 150)" +}, { + keyframes: "rgb(200, 200, 200) rgb(250, 250, 250)", + expected: "rgb(150, 150, 150) rgb(200, 200, 200)" +}, 'Animating a custom property of type <color>+ with a single keyframe'); + +animation_test({ + syntax: "<color>+", + inherits: false, + initialValue: "rgb(100, 100, 100) rgb(150, 150, 150)" +}, { + composite: "add", + keyframes: ["rgb(25, 25, 25) rgb(50, 50, 50)", "rgb(75, 75, 75) rgb(100, 100, 100)"], + expected: "rgb(150, 150, 150) rgb(225, 225, 225)" +}, 'Animating a custom property of type <color>+ with additivity'); + +animation_test({ + syntax: "<color>+", + inherits: false, + initialValue: "rgb(100, 100, 100) rgb(150, 150, 150)" +}, { + composite: "add", + keyframes: "rgb(50, 50, 50) rgb(100, 100, 100)", + expected: "rgb(125, 125, 125) rgb(200, 200, 200)" +}, 'Animating a custom property of type <color>+ with a single keyframe and additivity'); + +animation_test({ + syntax: "<color>+", + inherits: false, + initialValue: "black" +}, { + iterationComposite: "accumulate", + keyframes: ["rgb(0, 0, 0) rgb(0, 0, 0)", "rgb(50, 50, 50) rgb(100, 100, 100)"], + expected: "rgb(125, 125, 125) rgb(250, 250, 250)" +}, 'Animating a custom property of type <color>+ with iterationComposite'); + +discrete_animation_test("<color>+", 'rgb(255, 0, 0) rgb(0, 255, 0)', 'rgb(0, 0, 255)', 'Animating a custom property of type <color>+ with different lengths is discrete'); + +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color.html new file mode 100644 index 0000000000..001fc407e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-color.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="target"></div> +<script> + +animation_test({ + syntax: "<color>", + inherits: false, + initialValue: "black" +}, { + keyframes: ["rgb(100, 100, 100)", "rgb(200, 200, 200)"], + expected: "rgb(150, 150, 150)" +}, 'Animating a custom property of type <color>'); + +animation_test({ + syntax: "<color>", + inherits: false, + initialValue: "rgb(100, 100, 100)" +}, { + keyframes: "rgb(200, 200, 200)", + expected: "rgb(150, 150, 150)" +}, 'Animating a custom property of type <color> with a single keyframe'); + +animation_test({ + syntax: "<color>", + inherits: false, + initialValue: "rgb(100, 100, 100)" +}, { + composite: "add", + keyframes: ["rgb(50, 50, 50)", "rgb(150, 150, 150)"], + expected: "rgb(200, 200, 200)" +}, 'Animating a custom property of type <color> with additivity'); + +animation_test({ + syntax: "<color>", + inherits: false, + initialValue: "rgb(100, 100, 100)" +}, { + composite: "add", + keyframes: "rgb(150, 150, 150)", + expected: "rgb(175, 175, 175)" +}, 'Animating a custom property of type <color> with a single keyframe and additivity'); + +animation_test({ + syntax: "<color>", + inherits: false, + initialValue: "black" +}, { + iterationComposite: "accumulate", + keyframes: ["rgb(0, 0, 0)", "rgb(100, 100, 100)"], + expected: "rgb(250, 250, 250)" +}, 'Animating a custom property of type <color> with iterationComposite'); + +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-custom-ident.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-custom-ident.html new file mode 100644 index 0000000000..5bc2bed343 --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-custom-ident.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="target"></div> +<script> + +discrete_animation_test("<custom-ident>", "from", "to"); +discrete_animation_test("<custom-ident>+", "from1 from2", "to1 to2"); +discrete_animation_test("<custom-ident>#", "from1, from2", "to1, to2"); + +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-image.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-image.html new file mode 100644 index 0000000000..4f9505f9a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-image.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="target"></div> +<script> + +discrete_animation_test("<image>", 'url("https://example.com/from")', 'url("https://example.com/to")'); +discrete_animation_test("<image>+", 'url("https://example.com/from1") url("https://example.com/from2")', 'url("https://example.com/to1") url("https://example.com/to2")'); +discrete_animation_test("<image>#", 'url("https://example.com/from1"), url("https://example.com/from2")', 'url("https://example.com/to1"), url("https://example.com/to2")'); + +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-inherited-used-by-standard-property.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-inherited-used-by-standard-property.html new file mode 100644 index 0000000000..231ecca8c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-inherited-used-by-standard-property.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="container"> + <div id="target"></div> +</div> +<script> + +test(() => { + CSS.registerProperty({ + name: "--my-length", + syntax: "<length>", + inherits: true, + initialValue: "0px" + }); + + target.style.marginLeft = "var(--my-length)"; + + const duration = 1000; + const animation = container.animate({ "--my-length": "100px" }, duration); + animation.pause(); + animation.currentTime = duration / 4; + + assert_equals(getComputedStyle(target).marginLeft, "25px"); +}, "Animating an inherited CSS variable on a parent is reflected on a standard property using that variable as a value on a child"); + +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer-comma-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer-comma-list.html new file mode 100644 index 0000000000..3f4beaedf1 --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer-comma-list.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="target"></div> +<script> + +animation_test({ + syntax: "<integer>#", + inherits: false, + initialValue: "0" +}, { + keyframes: ["100, 150", "200, 250"], + expected: "150, 200" +}, 'Animating a custom property of type <integer>#'); + +animation_test({ + syntax: "<integer>#", + inherits: false, + initialValue: "100, 150" +}, { + keyframes: "200, 250", + expected: "150, 200" +}, 'Animating a custom property of type <integer># with a single keyframe'); + +animation_test({ + syntax: "<integer>#", + inherits: false, + initialValue: "50, 100" +}, { + composite: "add", + keyframes: ["150, 200", "250, 300"], + expected: "250, 350" +}, 'Animating a custom property of type <integer># with additivity'); + +animation_test({ + syntax: "<integer>#", + inherits: false, + initialValue: "50, 100" +}, { + composite: "add", + keyframes: "150, 200", + expected: "125, 200" +}, 'Animating a custom property of type <integer># with a single keyframe and additivity'); + +animation_test({ + syntax: "<integer>#", + inherits: false, + initialValue: "0, 0" +}, { + iterationComposite: "accumulate", + keyframes: ["0, 50", "100, 100"], + expected: "250, 275" +}, 'Animating a custom property of type <integer># with iterationComposite'); + +discrete_animation_test("<integer>#", '10, 20', '30', 'Animating a custom property of type <integer># with different lengths is discrete'); + +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer-space-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer-space-list.html new file mode 100644 index 0000000000..89feb3af15 --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer-space-list.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="target"></div> +<script> + +animation_test({ + syntax: "<integer>+", + inherits: false, + initialValue: "0" +}, { + keyframes: ["100 150", "200 250"], + expected: "150 200" +}, 'Animating a custom property of type <integer>+'); + +animation_test({ + syntax: "<integer>+", + inherits: false, + initialValue: "100 150" +}, { + keyframes: "200 250", + expected: "150 200" +}, 'Animating a custom property of type <integer>+ with a single keyframe'); + +animation_test({ + syntax: "<integer>+", + inherits: false, + initialValue: "50 100" +}, { + composite: "add", + keyframes: ["150 200", "250 300"], + expected: "250 350" +}, 'Animating a custom property of type <integer>+ with additivity'); + +animation_test({ + syntax: "<integer>+", + inherits: false, + initialValue: "50 100" +}, { + composite: "add", + keyframes: "150 200", + expected: "125 200" +}, 'Animating a custom property of type <integer>+ with a single keyframe and additivity'); + +animation_test({ + syntax: "<integer>+", + inherits: false, + initialValue: "0 0" +}, { + iterationComposite: "accumulate", + keyframes: ["0 50", "100 100"], + expected: "250 275" +}, 'Animating a custom property of type <integer>+ with iterationComposite'); + +discrete_animation_test("<integer>+", '10 20', '30', 'Animating a custom property of type <integer>+ with different lengths is discrete'); + +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer.html new file mode 100644 index 0000000000..400308a92e --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-integer.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="target"></div> +<script> + +animation_test({ + syntax: "<integer>", + inherits: false, + initialValue: 0 +}, { + keyframes: [100, 200], + expected: "150" +}, 'Animating a custom property of type <integer>'); + +animation_test({ + syntax: "<integer>", + inherits: false, + initialValue: 100 +}, { + keyframes: 200, + expected: "150" +}, 'Animating a custom property of type <integer> with a single keyframe'); + +animation_test({ + syntax: "<integer>", + inherits: false, + initialValue: 100 +}, { + composite: "add", + keyframes: [200, 300], + expected: "350" +}, 'Animating a custom property of type <integer> with additivity'); + +animation_test({ + syntax: "<integer>", + inherits: false, + initialValue: 100 +}, { + composite: "add", + keyframes: 300, + expected: "250" +}, 'Animating a custom property of type <integer> with a single keyframe and additivity'); + +animation_test({ + syntax: "<integer>", + inherits: false, + initialValue: 100 +}, { + iterationComposite: "accumulate", + keyframes: [0, 100], + expected: "250" +}, 'Animating a custom property of type <integer> with iterationComposite'); + +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-comma-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-comma-list.html new file mode 100644 index 0000000000..6f1fefb76f --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-comma-list.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="target"></div> +<script> + +animation_test({ + syntax: "<length>#", + inherits: false, + initialValue: "0px" +}, { + keyframes: ["100px, 150px", "200px, 250px"], + expected: "150px, 200px" +}, 'Animating a custom property of type <length>#'); + +animation_test({ + syntax: "<length>#", + inherits: false, + initialValue: "100px, 150px" +}, { + keyframes: "200px, 250px", + expected: "150px, 200px" +}, 'Animating a custom property of type <length># with a single keyframe'); + +animation_test({ + syntax: "<length>#", + inherits: false, + initialValue: "50px, 100px" +}, { + composite: "add", + keyframes: ["150px, 200px", "250px, 300px"], + expected: "250px, 350px" +}, 'Animating a custom property of type <length># with additivity'); + +animation_test({ + syntax: "<length>#", + inherits: false, + initialValue: "50px, 100px" +}, { + composite: "add", + keyframes: "150px, 200px", + expected: "125px, 200px" +}, 'Animating a custom property of type <length># with a single keyframe and additivity'); + +animation_test({ + syntax: "<length>#", + inherits: false, + initialValue: "0px, 0px" +}, { + iterationComposite: "accumulate", + keyframes: ["0px, 50px", "100px, 100px"], + expected: "250px, 275px" +}, 'Animating a custom property of type <length># with iterationComposite'); + +discrete_animation_test("<length>#", '10px, 20px', '30px', 'Animating a custom property of type <length># with different lengths is discrete'); + +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-comma-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-comma-list.html new file mode 100644 index 0000000000..bf3e75b791 --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-comma-list.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="target"></div> +<script> + +animation_test({ + syntax: "<length-percentage>#", + inherits: false, + initialValue: "0px" +}, { + keyframes: ["100px, 150%", "200%, 250px"], + expected: "calc(100% + 50px), calc(75% + 125px)" +}, 'Animating a custom property of type <length-percentage>#'); + +animation_test({ + syntax: "<length-percentage>#", + inherits: false, + initialValue: "100px, 150%" +}, { + keyframes: "200%, 250px", + expected: "calc(100% + 50px), calc(75% + 125px)" +}, 'Animating a custom property of type <length-percentage># with a single keyframe'); + +animation_test({ + syntax: "<length-percentage>#", + inherits: false, + initialValue: "50px, 100%" +}, { + composite: "add", + keyframes: ["150%, 200px", "250%, 300px"], + expected: "calc(200% + 50px), calc(100% + 250px)" +}, 'Animating a custom property of type <length-percentage># with additivity'); + +animation_test({ + syntax: "<length-percentage>#", + inherits: false, + initialValue: "50px, 100%" +}, { + composite: "add", + keyframes: "150%, 200px", + expected: "calc(75% + 50px), calc(100% + 100px)" +}, 'Animating a custom property of type <length-percentage># with a single keyframe and additivity'); + +animation_test({ + syntax: "<length-percentage>#", + inherits: false, + initialValue: "0px, 0px" +}, { + iterationComposite: "accumulate", + keyframes: ["0px, 50%", "100%, 100px"], + expected: "250%, calc(25% + 50px)" +}, 'Animating a custom property of type <length-percentage># with iterationComposite'); + +discrete_animation_test("<length-percentage>#", '10px, 20%', '30px', 'Animating a custom property of type <length-percentage># with different lengths is discrete'); + +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-space-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-space-list.html new file mode 100644 index 0000000000..9497093b6e --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-space-list.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="target"></div> +<script> + +animation_test({ + syntax: "<length-percentage>+", + inherits: false, + initialValue: "0px" +}, { + keyframes: ["100px 150%", "200% 250px"], + expected: "calc(100% + 50px) calc(75% + 125px)" +}, 'Animating a custom property of type <length-percentage>+'); + +animation_test({ + syntax: "<length-percentage>+", + inherits: false, + initialValue: "100px 150%" +}, { + keyframes: "200% 250px", + expected: "calc(100% + 50px) calc(75% + 125px)" +}, 'Animating a custom property of type <length-percentage>+ with a single keyframe'); + +animation_test({ + syntax: "<length-percentage>+", + inherits: false, + initialValue: "50px 100%" +}, { + composite: "add", + keyframes: ["150% 200px", "250% 300px"], + expected: "calc(200% + 50px) calc(100% + 250px)" +}, 'Animating a custom property of type <length-percentage>+ with additivity'); + +animation_test({ + syntax: "<length-percentage>+", + inherits: false, + initialValue: "50px 100%" +}, { + composite: "add", + keyframes: "150% 200px", + expected: "calc(75% + 50px) calc(100% + 100px)" +}, 'Animating a custom property of type <length-percentage>+ with a single keyframe and additivity'); + +animation_test({ + syntax: "<length-percentage>+", + inherits: false, + initialValue: "0px 0px" +}, { + iterationComposite: "accumulate", + keyframes: ["0px 50%", "100% 100px"], + expected: "250% calc(25% + 50px)" +}, 'Animating a custom property of type <length-percentage>+ with iterationComposite'); + +discrete_animation_test("<length-percentage>+", '10px 20%', '30px', 'Animating a custom property of type <length-percentage>+ with different lengths is discrete'); + +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage.html new file mode 100644 index 0000000000..096efd6ba7 --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="target"></div> +<script> + +animation_test({ + syntax: "<length-percentage>", + inherits: false, + initialValue: "0px" +}, { + keyframes: ["100px", "100%"], + expected: "calc(50% + 50px)" +}, 'Animating a custom property of type <length-percentage>'); + +animation_test({ + syntax: "<length-percentage>", + inherits: false, + initialValue: "100px" +}, { + keyframes: "100%", + expected: "calc(50% + 50px)" +}, 'Animating a custom property of type <length-percentage> with a single keyframe'); + +animation_test({ + syntax: "<length-percentage>", + inherits: false, + initialValue: "100px" +}, { + composite: "add", + keyframes: ["200%", "300%"], + expected: "calc(250% + 100px)" +}, 'Animating a custom property of type <length-percentage> with additivity'); + +animation_test({ + syntax: "<length-percentage>", + inherits: false, + initialValue: "100px" +}, { + composite: "add", + keyframes: "300%", + expected: "calc(150% + 100px)" +}, 'Animating a custom property of type <length-percentage> with a single keyframe and additivity'); + +animation_test({ + syntax: "<length-percentage>", + inherits: false, + initialValue: "100px" +}, { + iterationComposite: "accumulate", + keyframes: ["50px", "100%"], + expected: "calc(250% + 25px)" +}, 'Animating a custom property of type <length-percentage> with iterationComposite'); + +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-space-list.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-space-list.html new file mode 100644 index 0000000000..102259a070 --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length-space-list.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="target"></div> +<script> + +animation_test({ + syntax: "<length>+", + inherits: false, + initialValue: "0px" +}, { + keyframes: ["100px 150px", "200px 250px"], + expected: "150px 200px" +}, 'Animating a custom property of type <length>+'); + +animation_test({ + syntax: "<length>+", + inherits: false, + initialValue: "100px 150px" +}, { + keyframes: "200px 250px", + expected: "150px 200px" +}, 'Animating a custom property of type <length>+ with a single keyframe'); + +animation_test({ + syntax: "<length>+", + inherits: false, + initialValue: "50px 100px" +}, { + composite: "add", + keyframes: ["150px 200px", "250px 300px"], + expected: "250px 350px" +}, 'Animating a custom property of type <length>+ with additivity'); + +animation_test({ + syntax: "<length>+", + inherits: false, + initialValue: "50px 100px" +}, { + composite: "add", + keyframes: "150px 200px", + expected: "125px 200px" +}, 'Animating a custom property of type <length>+ with a single keyframe and additivity'); + +animation_test({ + syntax: "<length>+", + inherits: false, + initialValue: "0px 0px" +}, { + iterationComposite: "accumulate", + keyframes: ["0px 50px", "100px 100px"], + expected: "250px 275px" +}, 'Animating a custom property of type <length>+ with iterationComposite'); + +discrete_animation_test("<length>+", '10px 20px', '30px', 'Animating a custom property of type <length>+ with different lengths is discrete'); + +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length.html new file mode 100644 index 0000000000..8849bf52d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-length.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/utils.js"></script> +<div id="target"></div> +<script> + +animation_test({ + syntax: "<length>", + inherits: false, + initialValue: "0px" +}, { + keyframes: ["100px", "200px"], + expected: "150px" +}, 'Animating a custom property of type <length>'); + +animation_test({ + syntax: "<length>", + inherits: false, + initialValue: "100px" +}, { + keyframes: "200px", + expected: "150px" +}, 'Animating a custom property of type <length> with a single keyframe'); + +animation_test({ + syntax: "<length>", + inherits: false, + initialValue: "100px" +}, { + composite: "add", + keyframes: ["200px", "300px"], + expected: "350px" +}, 'Animating a custom property of type <length> with additivity'); + +animation_test({ + syntax: "<length>", + inherits: false, + initialValue: "100px" +}, { + composite: "add", + keyframes: "300px", + expected: "250px" +}, 'Animating a custom property of type <length> with a single keyframe and additivity'); + +animation_test({ + syntax: "<length>", + inherits: false, + initialValue: "100px" +}, { + iterationComposite: "accumulate", + keyframes: ["0px", "100px"], + expected: "250px" +}, 'Animating a custom property of type <length> with iterationComposite'); + +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-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-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..e22d9ce882 --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-custom-ident.html @@ -0,0 +1,15 @@ +<!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> + +no_transition_test({ + syntax: "<custom-ident>", + from: "from", + to: "to", +}, 'A custom property of type <custom-ident> cannot 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-image.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-image.html new file mode 100644 index 0000000000..b7fc68e6b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-image.html @@ -0,0 +1,15 @@ +<!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> + +no_transition_test({ + syntax: "<image>", + from: 'url("https://example.com/from")', + to: 'url("https://example.com/to")', +}, 'A custom property of type <image> cannot 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-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..7796e36a2e --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-list.html @@ -0,0 +1,153 @@ +<!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> + +no_transition_test({ + syntax: "<angle>#", + from: '100deg, 200deg', + to: '300deg', +}, 'A custom property of type <angle># does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<angle>+", + from: '100deg 200deg', + to: '300deg', +}, 'A custom property of type <angle>+ does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<color>#", + from: 'rgb(100, 100, 100), rgb(150, 150, 150)', + to: 'rgb(200, 200, 200)', +}, 'A custom property of type <color># does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<color>+", + from: 'rgb(100, 100, 100) rgb(150, 150, 150)', + to: 'rgb(200, 200, 200)', +}, 'A custom property of type <color>+ does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<custom-ident>#", + from: 'foo, bar', + to: 'baz', +}, 'A custom property of type <custom-ident># does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<custom-ident>+", + from: 'foo bar', + to: 'baz', +}, 'A custom property of type <custom-ident>+ does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<image>#", + from: 'url("https://example.com/foo"), url("https://example.com/bar")', + to: 'url("https://example.com/to")', +}, 'A custom property of type <image># does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<image>+", + from: 'url("https://example.com/foo") url("https://example.com/bar")', + to: 'url("https://example.com/to")', +}, 'A custom property of type <image>+ does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<integer>#", + from: '100, 200', + to: '300', +}, 'A custom property of type <integer># does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<integer>+", + from: '100 200', + to: '300', +}, 'A custom property of type <integer>+ does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<length-percentage>#", + from: '100px, 200px', + to: '300%', +}, 'A custom property of type <length-percentage># does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<length-percentage>+", + from: '100px 200px', + to: '300%', +}, 'A custom property of type <length-percentage>+ does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<length>#", + from: '100px, 200px', + to: '300px', +}, 'A custom property of type <length># does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<length>+", + from: '100px 200px', + to: '300px', +}, 'A custom property of type <length>+ does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<number>#", + from: '100, 200', + to: '300', +}, 'A custom property of type <number># does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<number>+", + from: '100 200', + to: '300', +}, 'A custom property of type <number>+ does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<percentage>#", + from: '100%, 200%', + to: '300%', +}, 'A custom property of type <percentage># does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<percentage>+", + from: '100% 200%', + to: '300%', +}, 'A custom property of type <percentage>+ does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<resolution>#", + from: '100dppx, 200dppx', + to: '300dppx', +}, 'A custom property of type <resolution># does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<resolution>+", + from: '100dppx 200dppx', + to: '300dppx', +}, 'A custom property of type <resolution>+ does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<time>#", + from: '100s, 200s', + to: '300s', +}, 'A custom property of type <time># does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<time>+", + from: '100s 200s', + to: '300s', +}, 'A custom property of type <time>+ does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<url>#", + from: 'url("https://example.com/foo"), url("https://example.com/bar")', + to: 'url("https://example.com/to")', +}, 'A custom property of type <url># does not yield a CSS Transition if the lists do not contain the same number of values'); + +no_transition_test({ + syntax: "<url>+", + from: 'url("https://example.com/foo") url("https://example.com/bar")', + to: 'url("https://example.com/to")', +}, 'A custom property of type <url>+ does not yield a 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-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-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..785db04562 --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-transition-url.html @@ -0,0 +1,15 @@ +<!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> + +no_transition_test({ + syntax: "<url>", + from: 'url("https://example.com/from")', + to: 'url("https://example.com/to")', +}, 'A custom property of type <url> cannot yield a CSS Transition'); + +</script>
\ No newline at end of file |