REGRESSION(r272004): transform transition with delay doesn't behave correctly
https://bugs.webkit.org/show_bug.cgi?id=222545
<rdar://problem/74865413>
Reviewed by Dean Jackson.
Source/WebCore:
To support accelerated animations of individual transform properties, we introduced the notion of
non-interpolating animations to apply the underlying value for a given property before applying
the actual animations for this property with additivity set to true.
These non-interpolating animations were meant to last between the time at which animations were
committed and the effective start of the first animation for that property, accounting for any
delay.
However, we neglected to handle the case where that first animation had a fill mode that would
make it fill backwards, such as CSS Transitions. In that situation, the animation would have
its first keyframe applied on top of the underlying value, effectively applying the underlying
value twice with additivity.
We now only add these non-interpolating animations if the first animation has a delay and does
not fill backwards.
Test: webanimations/transform-transition-with-delay-on-forced-layer-with-transform.html
* platform/graphics/ca/GraphicsLayerCA.cpp:
(WebCore::GraphicsLayerCA::updateAnimations):
LayoutTests:
Add a new test where an element with a non-identity transform starts a transform transition with a
long delay. Prior to this patch, this test failed because, while in the delay phase, the transition
would mean the underlying transform was applied twice: once by the non-interpolating animation
generated for the underlying "transform" value, and once by the first keyframe of the transition
since it fills backwards.
* webanimations/transform-transition-with-delay-on-forced-layer-with-transform-expected.html: Added.
* webanimations/transform-transition-with-delay-on-forced-layer-with-transform.html: Added.
Canonical link: https://commits.webkit.org/234696@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@273656 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-03-01 18:47:02 +00:00
|
|
|
<body>
|
|
|
|
<style>
|
|
|
|
|
|
|
|
div {
|
|
|
|
position: absolute;
|
|
|
|
left: 150px;
|
|
|
|
top: 150px;
|
|
|
|
height: 100px;
|
|
|
|
width: 100px;
|
|
|
|
background-color: black;
|
|
|
|
transform: scale(2);
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
<div></div>
|
|
|
|
</body>
|