Skip to content
Permalink
Browse files
[web-animations] add interpolation support for <transform-list>, + an… 
…d # custom properties

https://bugs.webkit.org/show_bug.cgi?id=249497

Reviewed by Antti Koivisto.

We add support for blending with a SyntaxValueList, with special treatments for <transform-list>.

* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-angle-comma-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-angle-comma-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-angle-space-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-angle-space-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-color-comma-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-color-comma-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-color-space-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-color-space-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-custom-ident-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-custom-ident.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-image-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-image.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-integer-comma-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-integer-comma-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-integer-space-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-integer-space-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-length-comma-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-length-comma-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-comma-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-comma-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-space-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage-space-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-length-space-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-length-space-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-number-comma-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-number-comma-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-number-space-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-number-space-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-percentage-comma-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-percentage-comma-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-percentage-space-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-percentage-space-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-resolution-comma-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-resolution-comma-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-resolution-space-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-resolution-space-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-time-comma-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-time-comma-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-time-space-list-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-time-space-list.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-transform-list-multiple-values-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-transform-list-multiple-values.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-transform-list-single-values-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-transform-list-single-values.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-url-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-url.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/resources/utils.js:
* Source/WebCore/animation/CSSPropertyAnimation.cpp:
(WebCore::CSSPropertyBlendingContext::CSSPropertyBlendingContext):
(WebCore::blendFunc):
(WebCore::blendStandardProperty):
(WebCore::blendSyntaxValueLists):
(WebCore::blendedCSSCustomPropertyValue):
(WebCore::blendCustomProperty):

Canonical link: https://commits.webkit.org/258039@main
  • Loading branch information
@graouts
graouts committed Dec 17, 2022
1 parent a7f14bf commit 384557c7e6f79e97512008d69b24f6490486172f
Show file tree
Hide file tree
Showing 48 changed files with 1,425 additions and 8 deletions.
8 ...s-properties-values-api/animation/custom-property-animation-angle-comma-list-expected.txt
View file
@@ -0,0 +1,8 @@

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
PASS Animating a custom property of type <angle># with different lengths is discrete

59 ...s/css/css-properties-values-api/animation/custom-property-animation-angle-comma-list.html
View file
@@ -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>
8 ...s-properties-values-api/animation/custom-property-animation-angle-space-list-expected.txt
View file
@@ -0,0 +1,8 @@

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
PASS Animating a custom property of type <angle>+ with different lengths is discrete

59 ...s/css/css-properties-values-api/animation/custom-property-animation-angle-space-list.html
View file
@@ -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>
8 ...s-properties-values-api/animation/custom-property-animation-color-comma-list-expected.txt
View file
@@ -0,0 +1,8 @@

PASS Animating a custom property of type <color>#
PASS Animating a custom property of type <color># with a single keyframe
PASS Animating a custom property of type <color># with additivity
PASS Animating a custom property of type <color># with a single keyframe and additivity
FAIL Animating a custom property of type <color># with iterationComposite assert_equals: expected "rgb(125, 125, 125), rgb(250, 250, 250)" but got "rgb(25, 25, 25), rgb(50, 50, 50)"
PASS Animating a custom property of type <color># with different lengths is discrete

59 ...s/css/css-properties-values-api/animation/custom-property-animation-color-comma-list.html
View file
@@ -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>
8 ...s-properties-values-api/animation/custom-property-animation-color-space-list-expected.txt
View file
@@ -0,0 +1,8 @@

PASS Animating a custom property of type <color>+
PASS Animating a custom property of type <color>+ with a single keyframe
PASS Animating a custom property of type <color>+ with additivity
PASS Animating a custom property of type <color>+ with a single keyframe and additivity
FAIL Animating a custom property of type <color>+ with iterationComposite assert_equals: expected "rgb(125, 125, 125) rgb(250, 250, 250)" but got "rgb(25, 25, 25) rgb(50, 50, 50)"
PASS Animating a custom property of type <color>+ with different lengths is discrete

59 ...s/css/css-properties-values-api/animation/custom-property-animation-color-space-list.html
View file
@@ -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>
2 ...s/css-properties-values-api/animation/custom-property-animation-custom-ident-expected.txt
View file
@@ -1,3 +1,5 @@

PASS Animating a custom property of type <custom-ident> is discrete
PASS Animating a custom property of type <custom-ident>+ is discrete
PASS Animating a custom property of type <custom-ident># is discrete

2 ...tests/css/css-properties-values-api/animation/custom-property-animation-custom-ident.html
View file
@@ -7,5 +7,7 @@
<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>
2 ...ests/css/css-properties-values-api/animation/custom-property-animation-image-expected.txt
View file
@@ -1,3 +1,5 @@

PASS Animating a custom property of type <image> is discrete
PASS Animating a custom property of type <image>+ is discrete
PASS Animating a custom property of type <image># is discrete

2 ...atform-tests/css/css-properties-values-api/animation/custom-property-animation-image.html
View file
@@ -7,5 +7,7 @@
<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>
8 ...properties-values-api/animation/custom-property-animation-integer-comma-list-expected.txt
View file
@@ -0,0 +1,8 @@

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
PASS Animating a custom property of type <integer># with different lengths is discrete

59 ...css/css-properties-values-api/animation/custom-property-animation-integer-comma-list.html
View file
@@ -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>
8 ...properties-values-api/animation/custom-property-animation-integer-space-list-expected.txt
View file
@@ -0,0 +1,8 @@

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
PASS Animating a custom property of type <integer>+ with different lengths is discrete

0 comments on commit 384557c

Please sign in to comment.