haikuwebkit/LayoutTests/webanimations/accelerated-transform-relat...

15 lines
269 B
HTML
Raw Permalink Normal View History

Support accelerated animation of individual transform CSS properties https://bugs.webkit.org/show_bug.cgi?id=217842 <rdar://problem/70391914> Reviewed by Dean Jackson. LayoutTests/imported/w3c: * web-platform-tests/css/css-transforms/animation/rotate-interpolation-expected.txt: * web-platform-tests/css/css-transforms/animation/scale-interpolation-expected.txt: * web-platform-tests/css/css-transforms/animation/translate-interpolation-expected.txt: Source/WebCore: In order to support accelerated animation of individual transform CSS properties, we make a list of the various animations targeting animation-related properties in GraphicsLayerCA::updateAnimations() and apply an animation for each of those properties in their expected application order – translate, scale, rotate and then transform – using Core Animation's additive animation mode. When one of those properties does not have an animation, we create a non-interpolating base transform value animation set with both from and to values matching the value set in CSS for this particular property. We use a new transformMatrixForProperty() method on the GraphicsLayerClient to obtain this value. We also add a non-additive, non-interpolating identity transform first to make sure all the additive animations build on top of a neutral transform and not the underlying value applied to the layer. Finally, when GraphicsLayerCA::setTransform() is updated, we update the animations to ensure that any base transform value animation is updated to match the current value of the CSS properties contributing to the compound layer transform. Tests: webanimations/accelerated-transform-related-animation-property-order.html webanimations/accelerated-translate-animation-additional-animation-added-in-flight.html webanimations/accelerated-translate-animation-underlying-transform-changed-in-flight.html webanimations/accelerated-translate-animation-with-transform.html webanimations/accelerated-translate-animation.html * animation/CSSPropertyAnimation.cpp: Add the necessary animationIsAccelerated() overrides for each of the individual CSS transform property animation wrappers to indicate that accelerated animations are supported. * platform/graphics/GraphicsLayer.cpp: (WebCore::GraphicsLayer::validateTransformOperations): Update the ASSERT to check that the animated property is any of the transform-related properties. * platform/graphics/GraphicsLayer.h: (WebCore::TransformAnimationValue::TransformAnimationValue): Add a new constructor that takes a single TransformOperation* value as input instead of a TransformOperations& so that the values coming from the individual CSS transform properties can be used to create a TransformAnimationValue in RenderLayerBacking::startAnimation(). * platform/graphics/GraphicsLayerClient.h: Add the new animated property identifiers for the individual CSS transform properties. (WebCore::animatedPropertyIsTransformOrRelated): Add a new utility to identify any of the transform-related animated property identifiers. (WebCore::GraphicsLayerClient::transformMatrixForProperty const): New method called from GraphicsLayerCA::updateAnimations() to query the client, such as RenderLayerBacking, for the TransformationMatrix representing a given CSS property value to be used for base transform value non-interpolating animations. * platform/graphics/ca/GraphicsLayerCA.cpp: (WebCore::propertyIdToString): Account for the new animated property identifiers. (WebCore::GraphicsLayerCA::setTransform): If we are currently running a transform-related animation, a change in underlying transform value means we must re-evaluate all transform-related animations to ensure that the base value transform animations are current. (WebCore::GraphicsLayerCA::moveOrCopyAnimations): (WebCore::GraphicsLayerCA::addAnimation): (WebCore::GraphicsLayerCA::updateAnimations): When updating animations, keep track of the most recent animation applicable to each individual CSS transform property and the list of animations targeting the transform CSS property. Then, ensure those animations are applied in the specified order – translate, scale, rotate and transform – by adding those animations as additive CA animations with non-interpolating base transform value animations for each property that does not have a specified interpolating animation. (WebCore::GraphicsLayerCA::isRunningTransformAnimation const): Ensure we also consider paused animations as "running" animations. (WebCore::GraphicsLayerCA::appendToUncommittedAnimations): Whether a transform animation needs to be run using the additive mode is now determined in updateAnimations() so we remove all code related to working out whether animations ought to be additive. (WebCore::GraphicsLayerCA::createTransformAnimationsFromKeyframes): We force the creation of CATransform3D values for individual CSS transform properties since only this mode guarantees that additivity of such animations will yield the expected result where the transforms are multiplied rather than simply adding float values of individual components. * platform/graphics/ca/GraphicsLayerCA.h: * rendering/RenderLayerBacking.cpp: (WebCore::RenderLayerBacking::startAnimation): Ensure we start animations for the individual CSS transform properties. (WebCore::RenderLayerBacking::graphicsLayerToCSSProperty): (WebCore::RenderLayerBacking::cssToGraphicsLayerProperty): (WebCore::RenderLayerBacking::transformMatrixForProperty const): Implement the new GraphicsLayerClient method to provide a matrix that can be used as a value for non-interpolating base value transform animations in GraphicsLayerCA::updateAnimations() for any of the transform-related CSS properties. * rendering/RenderLayerBacking.h: * rendering/RenderLayerCompositor.cpp: (WebCore::RenderLayerCompositor::requiresCompositingForAnimation const): Ensure that an animation for any of the transform-related CSS properties yields composition of the target layer. (WebCore::RenderLayerCompositor::isRunningTransformAnimation const): * rendering/style/WillChangeData.cpp: (WebCore::propertyTriggersCompositingOnBoxesOnly): Ensure that setting the will-change CSS property to any of the transform-related CSS properties yields composition of the target. LayoutTests: Add some new tests that check animations of individual CSS transform properties can be performed, checking on their relative order with the transform property, updating the transform property while an animation is in flight and adding animations while in flight. * TestExpectations: * webanimations/accelerated-transform-related-animation-property-order-expected.html: Added. * webanimations/accelerated-transform-related-animation-property-order.html: Added. * webanimations/accelerated-translate-animation-additional-animation-added-in-flight-expected.html: Added. * webanimations/accelerated-translate-animation-additional-animation-added-in-flight.html: Added. * webanimations/accelerated-translate-animation-expected.html: Added. * webanimations/accelerated-translate-animation-underlying-transform-changed-in-flight-expected.html: Added. * webanimations/accelerated-translate-animation-underlying-transform-changed-in-flight.html: Added. * webanimations/accelerated-translate-animation-with-transform-expected.html: Added. * webanimations/accelerated-translate-animation-with-transform.html: Added. * webanimations/accelerated-translate-animation.html: Added. Canonical link: https://commits.webkit.org/230577@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@268615 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2020-10-16 22:43:54 +00:00
<style>
#target {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: black;
transform: translateX(250px) scale(1.5) translateY(100px);
}
</style>
<div id="target"></div>