Skip to content
Permalink
Browse files
[web-animations] support interpolation of numeric custom properties
https://bugs.webkit.org/show_bug.cgi?id=249401

Reviewed by Antti Koivisto.

* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-angle-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-angle.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-integer-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-integer.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-number-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-number.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-percentage-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-percentage.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-resolution-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-resolution.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-time-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-time.html: Added.
* Source/WebCore/animation/CSSPropertyAnimation.cpp:
(WebCore::blendFunc):
(WebCore::blendSyntaxValues):

Canonical link: https://commits.webkit.org/257930@main
  • Loading branch information
graouts committed Dec 15, 2022
1 parent f468157 commit c7b7097190c62dc6c3a040c895c8e0e06039104e
Show file tree
Hide file tree
Showing 13 changed files with 397 additions and 0 deletions.
@@ -0,0 +1,7 @@

PASS Animating a custom property of type <angle>
PASS Animating a custom property of type <angle> with a single keyframe
PASS Animating a custom property of type <angle> with additivity
PASS Animating a custom property of type <angle> with a single keyframe and additivity
PASS Animating a custom property of type <angle> with iterationComposite

@@ -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>
@@ -0,0 +1,7 @@

PASS Animating a custom property of type <integer>
PASS Animating a custom property of type <integer> with a single keyframe
PASS Animating a custom property of type <integer> with additivity
PASS Animating a custom property of type <integer> with a single keyframe and additivity
PASS Animating a custom property of type <integer> with iterationComposite

@@ -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>
@@ -0,0 +1,7 @@

PASS Animating a custom property of type <number>
PASS Animating a custom property of type <number> with a single keyframe
PASS Animating a custom property of type <number> with additivity
PASS Animating a custom property of type <number> with a single keyframe and additivity
PASS Animating a custom property of type <number> with iterationComposite

@@ -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>
@@ -0,0 +1,7 @@

PASS Animating a custom property of type <percentage>
PASS Animating a custom property of type <percentage> with a single keyframe
PASS Animating a custom property of type <percentage> with additivity
PASS Animating a custom property of type <percentage> with a single keyframe and additivity
PASS Animating a custom property of type <percentage> with iterationComposite

@@ -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>
@@ -0,0 +1,7 @@

PASS Animating a custom property of type <resolution>
PASS Animating a custom property of type <resolution> with a single keyframe
PASS Animating a custom property of type <resolution> with additivity
PASS Animating a custom property of type <resolution> with a single keyframe and additivity
PASS Animating a custom property of type <resolution> with iterationComposite

@@ -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>
@@ -0,0 +1,7 @@

PASS Animating a custom property of type <time>
PASS Animating a custom property of type <time> with a single keyframe
PASS Animating a custom property of type <time> with additivity
PASS Animating a custom property of type <time> with a single keyframe and additivity
PASS Animating a custom property of type <time> with iterationComposite

@@ -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>

0 comments on commit c7b7097

Please sign in to comment.