[webkit-changes] [WebKit/WebKit] f0e70a: [web-animations] opacity should use unclamped valu...

Antoine Quint noreply at github.com
Sat Nov 26 05:47:25 PST 2022


  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: f0e70ac5078d742d598da042f4728d042aca3e98
      https://github.com/WebKit/WebKit/commit/f0e70ac5078d742d598da042f4728d042aca3e98
  Author: Antoine Quint <graouts at apple.com>
  Date:   2022-11-26 (Sat, 26 Nov 2022)

  Changed paths:
    M LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/keyframe-effects/effect-value-iteration-composite-operation-expected.txt
    M Source/WebCore/animation/CSSPropertyAnimation.cpp
    M Source/WebCore/animation/CSSPropertyAnimation.h
    M Source/WebCore/animation/KeyframeEffect.cpp
    M Source/WebCore/platform/Length.cpp
    M Source/WebCore/platform/animation/AnimationUtilities.h

  Log Message:
  -----------
  [web-animations] opacity should use unclamped values for from/to keyframes with iterationComposite
https://bugs.webkit.org/show_bug.cgi?id=248338

Reviewed by Antti Koivisto.

Our last failure in web-animations/animation-model/keyframe-effects/effect-value-iteration-composite-operation.html
was because of code that looks like this:

    const animation = div.animate({ opacity: [0, 0.4] }, { duration: 1000, iterations: 10, iterationComposite: 'accumulate' });
    animation.currentTime += animation.effect.getComputedTiming().duration * 2.5;
    assert_equals(getComputedStyle(div).opacity, '1', // (0.8 + 1.2) * 0.5
        'Animated opacity style in the middle of the third iteration');

We failed this test is because in the third iteration we would compute from/to kefyrames to be 0.8 and 1.0, instead
of 0.8 and 1.2. The reason this happens is because in KeyframeEffect::setAnimatedPropertiesInStyle(), we would compute
the from/to values by blending the from/to keyframes with the to keyframe with accumulation to match the current iteration
with CSSPropertyAnimation::blendProperties(). That method stores the resulting value in a RenderStyle which means in this
case RenderStyle::setOpacity() is called and the blended value is clamped to the specified [0-1] range for opacity.

Some property types require special blending code to run for accumulation, for instance transforms, filters, colors and
shadows. But for most other types where the encapsulated values are numbers, we can run some simple maths to accumulate
the values by the number of iterations. The math looks something like this:

    iterationIncrement = currentIteration * to;
    from += iterationIncrement;
    to += iterationIncrement;

We implement this logic in the various blending functions for float, int, etc. and add a requiresBlendingForAccumulativeIteration()
virtual method on animation wrappers such that methods that require the more complex blending code to be ran iteratively can do so.
This includes lengths and length-based types that will yield calc() values as well as the aforementioned transforms, filters,
colors and shadows.

Then in KeyframeEffect::setAnimatedPropertiesInStyle(), we call CSSPropertyAnimation::propertyRequiresBlendingForAccumulativeIteration()
to check whether we must run blending code to compute the from/to keyframes or simply let those values be computed in the final call
to CSSPropertyAnimation::blendProperties() at the end of the function when the composite operation is "replace".

To do this, we must also expose the "compositeIteration" and "currentIteration" values to the blending context, so we add those two
members to BlendingContext.

* LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/keyframe-effects/effect-value-iteration-composite-operation-expected.txt:
* Source/WebCore/animation/CSSPropertyAnimation.cpp:
(WebCore::CSSPropertyBlendingContext::CSSPropertyBlendingContext):
(WebCore::blendFunc):
(WebCore::AnimationPropertyWrapperBase::requiresBlendingForAccumulativeIteration const):
(WebCore::lengthsRequireBlendingForAccumulativeIteration):
(WebCore::lengthVariantRequiresBlendingForAccumulativeIteration):
(WebCore::CSSPropertyAnimation::blendProperties):
(WebCore::CSSPropertyAnimation::propertyRequiresBlendingForAccumulativeIteration):
* Source/WebCore/animation/CSSPropertyAnimation.h:
* Source/WebCore/animation/KeyframeEffect.cpp:
(WebCore::KeyframeEffect::setAnimatedPropertiesInStyle):
* Source/WebCore/platform/Length.cpp:
(WebCore::blend):
* Source/WebCore/platform/animation/AnimationUtilities.h:
(WebCore::BlendingContext::BlendingContext):
(WebCore::BlendingContext::isReplace const):
(WebCore::blend):

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




More information about the webkit-changes mailing list