Skip to content
Permalink
Browse files
[web-animations] add interpolation support for <transform-function> c…
…ustom properties

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

Reviewed by Antti Koivisto.

* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-transform-function-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-transform-function.html: Added.
* Source/WebCore/animation/CSSPropertyAnimation.cpp:
(WebCore::blendFunc):
(WebCore::blendSyntaxValues):

Canonical link: https://commits.webkit.org/258009@main
  • Loading branch information
graouts committed Dec 16, 2022
1 parent 5ee0680 commit b841cb737eaeeafc7105d09214fa2f131cf7acc2
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 0 deletions.
@@ -0,0 +1,7 @@

PASS Animating a custom property of type <transform-function>
PASS Animating a custom property of type <transform-function> with a single keyframe
PASS Animating a custom property of type <transform-function> with additivity
PASS Animating a custom property of type <transform-function> with a single keyframe and additivity
PASS Animating a custom property of type <transform-function> 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: "<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>
@@ -306,6 +306,13 @@ static RefPtr<TranslateTransformOperation> blendFunc(TranslateTransformOperation
return nullptr;
}

static RefPtr<TransformOperation> blendFunc(TransformOperation* from, TransformOperation* to, const CSSPropertyBlendingContext& context)
{
if (from && to)
return to->blend(from, context);
return nullptr;
}

static inline RefPtr<PathOperation> blendFunc(PathOperation* from, PathOperation* to, const CSSPropertyBlendingContext& context)
{
if (is<ShapePathOperation>(from) && is<ShapePathOperation>(to)) {
@@ -3939,6 +3946,12 @@ static std::optional<CSSCustomPropertyValue::SyntaxValue> blendSyntaxValues(cons
return blendFunc(fromNumeric, toNumeric, blendingContext);
}

if (std::holds_alternative<RefPtr<TransformOperation>>(from) && std::holds_alternative<RefPtr<TransformOperation>>(to)) {
auto& fromTransformOperation = std::get<RefPtr<TransformOperation>>(from);
auto& toTransformOperation = std::get<RefPtr<TransformOperation>>(to);
return blendFunc(fromTransformOperation.get(), toTransformOperation.get(), blendingContext);
}

return std::nullopt;
}

0 comments on commit b841cb7

Please sign in to comment.