1834876 - [css-transitions-2] Implement `@starting-style` to fill in initial state for CSS transitions

Status: RESOLVED FIXED

(Core :: CSS Transitions and Animations, enhancement)

Description

[Daniel Holbert [:dholbert]]

This tracks the @starting-style CSS at-rule, which is a way to specify a starting state to let you play css transitions for elements that have no actual starting style (e.g. if they're coming from display:none). See summary by Tab in https://github.com/w3c/csswg-drafts/issues/8174#issuecomment-1512244500 for more details.

(At that point they were using the strawman name @initial, but in today's CSSWG call, we resolved to call it @starting-style)

I think spec text is still to come, but the above quoted comment from Tab gets the idea across. Also, based on the discussion in the issue, it looks like there's a connection to popover, though it's also relevant for e.g. an element playing a transition on some property as it loses display:none.

mozilla-apprentice issues for the resolutions getting us to this point, for reference:
https://github.com/mozilla/wg-decisions/issues/1109
https://github.com/mozilla/wg-decisions/issues/1130

Comment 1

[Boris Chiou [:boris]]

This was added into [css-transitions-2] already (https://github.com/w3c/csswg-drafts/commit/c9f5f544d0253a28a760a8b0cb0b865a0acdd35c)

Comment 2

[Boris Chiou [:boris]]

Attachment: Bug 1834876 - Part 1: Parse @starting-style rule.

Comment 3

[Phabricator Automation]

Comment on attachment 9394654 [details]
Bug 1834876 - Part 1: Parse @starting-style rule.

Revision D206428 was moved to bug 1889496. Setting attachment 9394654 [details] to obsolete.

Comment 7

[Boris Chiou [:boris]]

Attachment: Bug 1834876 - Part 1: Add a flag in Rule if it is inside @starting-style.

The rules inside @starting-style doesn't apply to primary style, and
they are used only for CSS transitions (when computing starting style).

So adding a flag to make us easier to filter them out.

Comment 8

[Boris Chiou [:boris]]

Attachment: Bug 1834876 - Part 2: Resolve starting style if we don't have before-change style.

Per spec, we define starting style for an element as the after-change style
with @starting-style rules applied in addition.

If an element does not have a before-change style for a given style change
event, the starting style is used instead of the before-change style to
compare with the after-change style to start transitions.

The implmentation in process_animations() and tests are in the following
patches.

Comment 9

[Boris Chiou [:boris]]

Attachment: Bug 1834876 - Part 3: Use starting style for CSS Transitions.

Now we use the starting style if we have, for CSS transitions.

Comment 10

[Boris Chiou [:boris]]

Attachment: Bug 1834876 - Part 4: Fix the case when changing the display from none.

Add one extra branch if we have before-change style but its display
is none, and the new style is not display:none.

Comment 11

[Boris Chiou [:boris]]

Attachment: Bug 1834876 - Part 5: Enable the preference of @starting-style on Nightly.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2016a6631d26
Part 1: Add a flag in Rule if it is inside @starting-style. r=layout-reviewers,firefox-style-system-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/bb0d11251f9e
Part 2: Resolve starting style if we don't have before-change style. r=layout-reviewers,firefox-style-system-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/f62d69fb6e3f
Part 3: Use starting style for CSS Transitions. r=layout-reviewers,firefox-style-system-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/4a70e54db9b5
Part 4: Fix the case when changing the display from none. r=layout-reviewers,firefox-style-system-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/a8efeedc6899
Part 5: Enable the preference of @starting-style on Nightly. r=webidl,layout-reviewers,saschanaz,emilio

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/45976 for changes under testing/web-platform/tests

Comment 14

[Aron Cseh]

https://hg.mozilla.org/mozilla-central/rev/2016a6631d26
https://hg.mozilla.org/mozilla-central/rev/bb0d11251f9e
https://hg.mozilla.org/mozilla-central/rev/f62d69fb6e3f
https://hg.mozilla.org/mozilla-central/rev/4a70e54db9b5
https://hg.mozilla.org/mozilla-central/rev/a8efeedc6899

Comment 15

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 17

[Sebastian Zartner [:sebo]]

Release Note Request (optional, but appreciated)
[Why is this notable]: Allows authors to define before-change styles to transition from when they are not defined yet.
[Affects Firefox for Android]: yes
[Suggested wording]: Starting with Firefox 127, @starting-style is supported in Nightly builds. This at-rule allows to define styles that are applied to an element when it is first rendered, enabling transitions on elements that are added to the DOM or that have their display type changed from none to another value.
[Links (documentation, blog post, etc)]: https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style

Comment 18

[Pascal Chevrel:pascalc]

Note added to our Nightly release notes:
https://www.mozilla.org/en-US/firefox/128.0a1/releasenotes/
https://www.mozilla.org/en-US/firefox/127.0a1/releasenotes/

Comment 19

[Dave Letorey]

• Experimental Release note PR
• BCD PR