Bug 287789 – [scroll-animations] "In & Out" demos of https://nerdy.dev/notebook/scroll-driven-animations.html mostly do not work

• Status: RESOLVED
• Resolution: FIXED
• Component: Animations

[Antoine Quint]

The page https://nerdy.dev/notebook/scroll-driven-animations.html contains a fair few view timelines showcases and while all examples in the "Entrances" section work fine in WebKit, the "In & Out" section has a lot of different behavior between Chrome and WebKit. Those need investigating.

[Radar WebKit Bug Importer]

<rdar://problem/144974803>

[Antoine Quint]

Created attachment 474309 [details]
Candycane effect reduction

Started looking at just the "Candycane" example and I've attached a reduction with some console logging. The timeline and animation current times appear to be as expected. However, the computed progress is completely different in WebKit compared to Chrome, which directly maps to the margin-left value that is applied in style.

It appears the issue is that we're not computing keyframes correctly. This is the keyframes rule specified in CSS:

```
@keyframes candycane {
    entry 0% { margin-left: -200px }
    entry 200% { margin-left: 0 }
    exit -100% { margin-left: 0 }
    exit 100% { margin-left: 200px }
}
```

In Chrome, the offsets are computed as:

entry 0% → 0
entry 200% → 0.18181818181818182
exit -100% → 0.8181818181818182
exit 100% → 1

In WebKit, the offsets are computed as:

entry 0% → 0
exit 100% → 1

This indicates faulty logic in our parsing code dropping keyframes where the percentage value is not comprised in the [0%-100%] range.

[Antoine Quint]

Pull request: https://github.com/WebKit/WebKit/pull/40977

[Antoine Quint]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/50838

[EWS]

Committed 290776@main (c7ec9d7ff067): <https://commits.webkit.org/290776@main>

Reviewed commits have been landed. Closing PR #40977 and removing active labels.