Permalink
Show file tree
Hide file tree
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
Showing
13 changed files
with
397 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
Oops, something went wrong.