[webkit-changes] [WebKit/WebKit] d566d0: REGRESSION (260399 at main): animations flicker on ht...

[Antoine Quint]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: d566d000c7a56a384d728aff3dcd30c9ca173e0f
      https://github.com/WebKit/WebKit/commit/d566d000c7a56a384d728aff3dcd30c9ca173e0f
  Author: Antoine Quint <graouts at webkit.org>
  Date:   2023-04-12 (Wed, 12 Apr 2023)

  Changed paths:
    A LayoutTests/webanimations/accelerated-animation-addition-lower-in-effect-stack-expected.html
    A LayoutTests/webanimations/accelerated-animation-addition-lower-in-effect-stack.html
    M Source/WebCore/animation/DocumentTimeline.cpp
    M Source/WebCore/animation/KeyframeEffect.cpp
    M Source/WebCore/animation/KeyframeEffect.h
    M Source/WebCore/animation/KeyframeEffectStack.cpp
    M Source/WebCore/animation/KeyframeEffectStack.h
    M Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp

  Log Message:
  -----------
  REGRESSION (260399 at main): animations flicker on https://payto.com.au
https://bugs.webkit.org/show_bug.cgi?id=255338
rdar://107532064

Reviewed by Dean Jackson.

When creating a new animation of any type (CSS Transition, CSS Animation, Web Animations API)
that is accelerated, we add it to the list of animations on GraphicsLayerCA regardless of its
composite order relative to other effects for the given target.

In the case of https://payto.com.au, a CSS Animation is applied to an element for the "transform"
property, and that property also yields a CSS Transition that is canceled and recreated on each
frame (whether this is the right behavior is discussed in w3c/csswg-drafts#8701
as Firefox, Chrome and Safari all have different behavior).

That perpetually-recreated CSS Transition is lower in the composite order, but since it's created
after the CSS Animation, due to how we create accelerated animations it would override the CSS Animation.

In this patch we change the behavior of DocumentTimeline::applyPendingAcceleratedAnimations() to
update the entire effect stack with which an effect pending application of an accelerated action
is associated. This guarantees the effect stack's order to be preserved.

We also ensure we remove any similarly-named animation before adding new animations in GraphicsLayerCA.

* LayoutTests/webanimations/accelerated-animation-addition-lower-in-effect-stack-expected.html: Added.
* LayoutTests/webanimations/accelerated-animation-addition-lower-in-effect-stack.html: Added.
* Source/WebCore/animation/DocumentTimeline.cpp:
(WebCore::DocumentTimeline::applyPendingAcceleratedAnimations):
* Source/WebCore/animation/KeyframeEffect.cpp:
(WebCore::KeyframeEffect::applyPendingAcceleratedActionsOrUpdateTimingProperties):
* Source/WebCore/animation/KeyframeEffect.h:
* Source/WebCore/animation/KeyframeEffectStack.cpp:
(WebCore::KeyframeEffectStack::applyPendingAcceleratedActions const):
* Source/WebCore/animation/KeyframeEffectStack.h:
* Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp:
(WebCore::GraphicsLayerCA::createTransformAnimationsFromKeyframes):
(WebCore::GraphicsLayerCA::createFilterAnimationsFromKeyframes):

Canonical link: https://commits.webkit.org/262875@main