[webkit-changes] [WebKit/WebKit] 21ebfd: [scroll-animations] allow timeline ranges to be us...

Antoine Quint noreply at github.com
Thu Feb 6 10:59:00 PST 2025 

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: 21ebfdcf906c11c01ead1af39be3fa7de873002e
      https://github.com/WebKit/WebKit/commit/21ebfdcf906c11c01ead1af39be3fa7de873002e
  Author: Antoine Quint <graouts at webkit.org>
  Date:   2025-02-06 (Thu, 06 Feb 2025)

  Changed paths:
    M LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/animation-timeline-view-functional-notation.tentative-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/merge-timeline-offset-keyframes-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/timeline-offset-in-keyframe-change-timeline.tentative-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/timeline-offset-keyframes-hidden-subject-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/timeline-offset-keyframes-hidden-subject.html
    M LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/timeline-offset-keyframes-with-document-timeline-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/timeline-range-name-offset-in-keyframes.tentative-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/view-timeline-keyframe-boundary-interpolation-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/view-timeline-keyframe-boundary-interpolation.html
    M LayoutTests/imported/w3c/web-platform-tests/scroll-animations/view-timelines/contain-alignment-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/scroll-animations/view-timelines/get-keyframes-with-timeline-offset-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/scroll-animations/view-timelines/timeline-offset-in-keyframe-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/scroll-animations/view-timelines/view-timeline-source.tentative-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/scroll-animations/view-timelines/zero-intrinsic-iteration-duration.tentative-expected.txt
    M Source/WebCore/animation/AnimationEffect.cpp
    M Source/WebCore/animation/AnimationEffect.h
    M Source/WebCore/animation/BlendingKeyframes.cpp
    M Source/WebCore/animation/BlendingKeyframes.h
    M Source/WebCore/animation/KeyframeEffect.cpp
    M Source/WebCore/animation/KeyframeEffect.h
    M Source/WebCore/animation/KeyframeEffect.idl
    M Source/WebCore/animation/KeyframeInterpolation.cpp
    M Source/WebCore/animation/KeyframeInterpolation.h
    M Source/WebCore/animation/ScrollTimeline.cpp
    M Source/WebCore/animation/ViewTimeline.cpp
    M Source/WebCore/animation/ViewTimeline.h
    M Source/WebCore/animation/WebAnimation.cpp
    M Source/WebCore/css/CSSKeyframeRule.cpp
    M Source/WebCore/css/CSSKeyframeRule.h
    M Source/WebCore/css/CSSKeyframesRule.cpp
    M Source/WebCore/css/parser/CSSParser.cpp
    M Source/WebCore/css/parser/CSSParser.h
    M Source/WebCore/css/parser/CSSParserImpl.cpp
    M Source/WebCore/css/parser/CSSParserImpl.h
    M Source/WebCore/css/parser/CSSPropertyParserConsumer+Animations.cpp
    M Source/WebCore/css/parser/CSSPropertyParserConsumer+Animations.h
    M Source/WebCore/css/parser/CSSPropertyParserConsumer+Timeline.cpp
    M Source/WebCore/css/parser/CSSPropertyParserConsumer+Timeline.h
    M Source/WebCore/style/StyleResolver.cpp
    M Source/WebCore/style/StyleResolver.h

  Log Message:
  -----------
  [scroll-animations] allow timeline ranges to be used when specifying keyframes
https://bugs.webkit.org/show_bug.cgi?id=286920

Reviewed by Sam Weinig.

The Scroll-driven Animations specification extends the definition of keyframes
to allow for timeline ranges to be used on top of the existing percentage values.
This means that for view timelines, authors can specify specific points within
that timeline's range as keyframe offsets. For instance, here is an animation
which would animate the opacity from 0 to 1 as the target element enters the
visible range within its scrolling container, and then from 1 to 0 as it leaves
it:

```
@keyframes my-anim {
    cover 0% { opacity: 0 }
    contain 0% { opacity: 1 }
    contain 100% { opacity: 1 }
    cover 100% { opacity: 0 }
}
```

This is a pretty big change since until now, keyframe offsets were either implicit
omitted values or explicit numeric values that could synchronously be computed to
a finite value. With timeline ranges, computed offsets will be NaN until we have
viable metrics for the view timeline's source and subject and will dynamically
update as the view timeline's metrics and scroll offset changes.

To that end, we introduce the notion of a `specifiedOffset` on `BlendingKeyframe`
and make the existing `offset` be the computed value. Specified offsets are
represented via the new `BlendingKeyframe::Offset` struct which encompasses the
range name (including `Omitted` and `Normal` values) and the numeric value.
This provides a way to determine whether a specified value was implicit or
explicit.

As for computed values, they are all NaN by default and resolved using the new
`BlendingKeyframes::updatedComputedOffsets()` method which will let the caller
provide a callback to convert each specified offset, leaving the mapping from
the view timeline range to keyframe effects.

* LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/animation-timeline-view-functional-notation.tentative-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/merge-timeline-offset-keyframes-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/timeline-offset-in-keyframe-change-timeline.tentative-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/timeline-offset-keyframes-hidden-subject-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/timeline-offset-keyframes-hidden-subject.html:
* LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/timeline-offset-keyframes-with-document-timeline-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/timeline-range-name-offset-in-keyframes.tentative-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/view-timeline-keyframe-boundary-interpolation-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/view-timeline-keyframe-boundary-interpolation.html:
* LayoutTests/imported/w3c/web-platform-tests/scroll-animations/view-timelines/contain-alignment-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/scroll-animations/view-timelines/get-keyframes-with-timeline-offset-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/scroll-animations/view-timelines/timeline-offset-in-keyframe-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/scroll-animations/view-timelines/view-timeline-source.tentative-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/scroll-animations/view-timelines/zero-intrinsic-iteration-duration.tentative-expected.txt:
* Source/WebCore/animation/AnimationEffect.cpp:
(WebCore::AnimationEffect::animationProgressBasedTimelineSourceDidChangeMetrics):
* Source/WebCore/animation/AnimationEffect.h:
* Source/WebCore/animation/BlendingKeyframes.cpp:
(WebCore::BlendingKeyframes::insert):
(WebCore::BlendingKeyframes::copyKeyframes):
(WebCore::zeroPercentKeyframe):
(WebCore::hundredPercentKeyframe):
(WebCore::BlendingKeyframes::fillImplicitKeyframes):
(WebCore::BlendingKeyframes::analyzeKeyframe):
(WebCore::BlendingKeyframes::updatedComputedOffsets):
(WebCore::BlendingKeyframe::BlendingKeyframe):
(WebCore::BlendingKeyframe::usesRangeOffset const):
* Source/WebCore/animation/BlendingKeyframes.h:
(WebCore::BlendingKeyframes::hasKeyframeNotUsingRangeOffset const):
* Source/WebCore/animation/KeyframeEffect.cpp:
(WebCore::rangeStringToSingleTimelineRangeName):
(WebCore::isTimelineRangeOffsetValid):
(WebCore::rangeStringFromSingleTimelineRangeName):
(WebCore::doubleOrTimelineRangeOffsetFromString):
(WebCore::validateKeyframeOffset):
(WebCore::computedOffset):
(WebCore::computeMissingKeyframeOffsets):
(WebCore::processKeyframeLikeObject):
(WebCore::processIterableKeyframes):
(WebCore::processPropertyIndexedKeyframes):
(WebCore::timelineRangeOffsetFromSpecifiedOffset):
(WebCore::KeyframeEffect::getKeyframes):
(WebCore::KeyframeEffect::processKeyframes):
(WebCore::specifiedOffsetForParsedKeyframe):
(WebCore::KeyframeEffect::updateBlendingKeyframes):
(WebCore::KeyframeEffect::setBlendingKeyframes):
(WebCore::KeyframeEffect::computeCSSAnimationBlendingKeyframes):
(WebCore::KeyframeEffect::animationTimelineDidChange):
(WebCore::KeyframeEffect::setAnimatedPropertiesInStyle):
(WebCore::KeyframeEffect::animationDidTick):
(WebCore::KeyframeEffect::applyPendingAcceleratedActionsOrUpdateTimingProperties):
(WebCore::KeyframeEffect::computeHasImplicitKeyframeForAcceleratedProperty):
(WebCore::KeyframeEffect::activeViewTimeline):
(WebCore::KeyframeEffect::animationProgressBasedTimelineSourceDidChangeMetrics):
(WebCore::KeyframeEffect::updateComputedKeyframeOffsetsIfNeeded):
* Source/WebCore/animation/KeyframeEffect.h:
* Source/WebCore/animation/KeyframeEffect.idl:
* Source/WebCore/animation/KeyframeInterpolation.cpp:
(WebCore::KeyframeInterpolation::interpolationKeyframes const):
* Source/WebCore/animation/KeyframeInterpolation.h:
(WebCore::KeyframeInterpolation::Keyframe::hasResolvedOffset const):
* Source/WebCore/animation/ScrollTimeline.cpp:
(WebCore::ScrollTimeline::create):
* Source/WebCore/animation/ViewTimeline.cpp:
(WebCore::ViewTimeline::create):
(WebCore::ViewTimeline::intervalForTimelineRangeName const):
(WebCore::ViewTimeline::mapOffsetToTimelineRange const):
(WebCore::ViewTimeline::offsetIntervalForTimelineRangeName const):
(WebCore::ViewTimeline::offsetIntervalForAttachmentRange const):
(WebCore::ViewTimeline::intervalForAttachmentRange const):
* Source/WebCore/animation/ViewTimeline.h:
* Source/WebCore/animation/WebAnimation.cpp:
(WebCore::WebAnimation::progressBasedTimelineSourceDidChangeMetrics):
* Source/WebCore/css/CSSKeyframeRule.cpp:
(WebCore::StyleRuleKeyframe::Key::writeToString const):
(WebCore::StyleRuleKeyframe::StyleRuleKeyframe):
(WebCore::StyleRuleKeyframe::create):
(WebCore::StyleRuleKeyframe::keyText const):
(WebCore::StyleRuleKeyframe::setKeyText):
* Source/WebCore/css/CSSKeyframeRule.h:
* Source/WebCore/css/CSSKeyframesRule.cpp:
(WebCore::StyleRuleKeyframes::findKeyframeIndex const):
* Source/WebCore/css/parser/CSSParser.cpp:
(WebCore::CSSParser::parseKeyframeKeyList):
* Source/WebCore/css/parser/CSSParser.h:
* Source/WebCore/css/parser/CSSParserImpl.cpp:
(WebCore::CSSParserImpl::parseKeyframeKeyList):
(WebCore::CSSParserImpl::consumeKeyframeStyleRule):
(WebCore::CSSParserImpl::consumeKeyframeKeyList): Deleted.
* Source/WebCore/css/parser/CSSParserImpl.h:
* Source/WebCore/css/parser/CSSPropertyParserConsumer+Animations.cpp:
(WebCore::CSSPropertyParserHelpers::consumeKeyframeKeyList):
* Source/WebCore/css/parser/CSSPropertyParserConsumer+Animations.h:
* Source/WebCore/css/parser/CSSPropertyParserConsumer+Timeline.cpp:
(WebCore::CSSPropertyParserHelpers::isAnimationRangeKeyword):
* Source/WebCore/css/parser/CSSPropertyParserConsumer+Timeline.h:
* Source/WebCore/style/StyleResolver.cpp:
(WTF::StyleRuleKeyframeKeyHash::hash):
(WTF::StyleRuleKeyframeKeyHash::equal):
(WTF::HashTraits<WebCore::StyleRuleKeyframe::Key>::emptyValue):
(WTF::HashTraits<WebCore::StyleRuleKeyframe::Key>::isEmptyValue):
(WTF::HashTraits<WebCore::StyleRuleKeyframe::Key>::constructDeletedValue):
(WTF::HashTraits<WebCore::StyleRuleKeyframe::Key>::isDeletedValue):
(WebCore::Style::Resolver::keyframeRulesForName const):
(WebCore::Style::Resolver::keyframeStylesForAnimation):
* Source/WebCore/style/StyleResolver.h:

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



To unsubscribe from these emails, change your notification settings at https://github.com/WebKit/WebKit/settings/notifications

More information about the webkit-changes mailing list