Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: 02f6ec0873f7cb4cccf05facfddda6f6b0753f13
https://github.com/WebKit/WebKit/commit/02f6ec0873f7cb4cccf05facfddda6f6b0753f13
Author: Ahmad Saleem <[email protected]>
Date: 2026-08-19 (Wed, 19 Aug 2026)
Changed paths:
A LayoutTests/webanimations/pseudo-element-composite-order-expected.txt
A LayoutTests/webanimations/pseudo-element-composite-order.html
M Source/WebCore/animation/WebAnimationUtilities.cpp
Log Message:
-----------
[web-animations] Animations targeting ::picker-icon and ::-webkit-scrollbar
have the wrong composite order
https://bugs.webkit.org/show_bug.cgi?id=322079
rdar://185270753
Reviewed by Antoine Quint.
Animatable.getAnimations() returns its list "sorted using the composite order
described for the associated animations of effects in § 5.4.2 The effect
stack" [1][2].
For two CSS Animations that comparison resolves entirely on step 2 of § 5.4.2,
the class-specific composite order. Since an owning element is an (element,
pseudo-element) pair, two animations on different pseudo-elements of a single
element take the "if the owning element of A and B differs" branch of
css-animations-2 § 2.2 [3], which orders pseudo-elements as:
element, ::marker, ::before, any other pseudo-elements not mentioned
specifically in this list, sorted in ascending order by the Unicode
codepoints that make up each selector, ::after, element children
The SortingIndex enum in
compareStyleOriginatedAnimationOwningElementPositionsInDocumentTreeOrder()
deviated from that order in three ways, because each newly-supported
pseudo-element was appended to the enum instead of being inserted in codepoint
order:
- PickerIcon sorted after After, so an animation on ::picker-icon was
composited and returned after one on ::after.
- WebKitScrollbar sorted after FirstLetter, FirstLine, GrammarError and
Highlight, but "-" (U+002D) sorts before "f", "g" and "h".
- Checkmark sorted after TargetText, but "c" sorts before "f".
Reorder the enum to match the order specified in [3], and spell out in the
comment above it that the enumerators are listed in sort order, so that a future
pseudo-element is inserted at its codepoint position rather than appended.
The ::view-transition pseudo-elements are left after After: their relative order
is additionally constrained by css-view-transitions [4] and is already
special-cased above by nameOrPart.
This is observable both through getAnimations() [1] and through the dispatch
order of animation and transition events, since
compareAnimationEventsByCompositeOrder() sorts with the same comparison. Chrome
already returns ::picker-icon before ::after; Firefox creates no animations for
any of the affected pseudo-elements. ::checkmark's position is corrected by the
same rule but is not yet observable, as no engine creates an animation for it.
The new test is a WebKit test rather than a web-platform-test because the
ordering ::-webkit-scrollbar takes part in cannot be tested cross-engine: it is
not a standardized pseudo-element, and Firefox has no equivalent. It reports the
subtests for the pseudo-elements WebKit creates no animation for — ::checkmark,
::selection, ::highlight(), ::grammar-error, ::spelling-error and ::target-text
—
as unsupported rather than asserting on them, so that an unsupported
pseudo-element cannot mask a misordering.
[1] https://drafts.csswg.org/web-animations-1/#dom-animatable-getanimations
[2] https://drafts.csswg.org/web-animations-1/#the-effect-stack
[3] https://drafts.csswg.org/css-animations-2/#animation-composite-order
[4] https://drafts.csswg.org/css-view-transitions-1/
Test: webanimations/pseudo-element-composite-order.html
* LayoutTests/webanimations/pseudo-element-composite-order-expected.txt: Added.
* LayoutTests/webanimations/pseudo-element-composite-order.html: Added.
* Source/WebCore/animation/WebAnimationUtilities.cpp:
(WebCore::compareStyleOriginatedAnimationOwningElementPositionsInDocumentTreeOrder):
Canonical link: https://commits.webkit.org/319448@main
To unsubscribe from these emails, change your notification settings at
https://github.com/WebKit/WebKit/settings/notifications
