The transition-behavior CSS property

[josepharhar]

Description

The transition-behavior CSS property allows transitions be specified for discrete properties, like display. transition-behavior is needed in order to animate the entry and exit animations of top layer elements, like <dialog> and popovers: https://github.com/chrishtr/rendering/blob/master/entry-exit-animations.md

Specification

https://drafts.csswg.org/css-transitions-2/#transition-behavior-property

Open Issues

No response

Tests

https://wpt.fyi/results/css/css-transitions/parsing/transition-behavior.html

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

Gecko: mozilla/standards-positions#763

WebKit: WebKit/standards-positions#148

Browser bug reports

No bugs filed yet that I know of

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

https://chromestatus.com/metrics/css/timeline/popularity/766

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

[josepharhar]

Original proposal: #495

[dholbert]

Tests
https://wpt.fyi/results/css/css-transitions/parsing/transition-behavior.html

It looks like this test^ is testing whether the property parses as-expected. For this to be in interop-2024, we would probably also want tests for the functional behavior (i.e. computed values of properties that are being transitioned when this is in effect) -- do you know if we have any of those sorts of test in WPT yet?

[josepharhar]

There are a bunch of tests which are technically testing it: https://github.com/search?q=repo%3Aweb-platform-tests%2Fwpt%20allow-discrete&type=code

css/css-animations/display-interpolation.html and css/css-contain/content-visibility/content-visibility-interpolation.html are the big ones which currently test transition-behavior, but they have special behavior and rely on the display/content-visibility animatability feature.

I'll add some more tests for existing properties. I originally had one giant test for all discrete properties but it was too big and would have timeouts.

[josepharhar]

This WPT PR should add transition-behavior testing to many existing WPTs: web-platform-tests/wpt#42857

[foolip]

@josepharhar with web-platform-tests/wpt#42857 landed, can you link to all of the tests that are in scope for this proposal?

[dholbert]

This WPT PR should add transition-behavior testing to many existing WPTs: web-platform-tests/wpt#42857

Unfortunately some of those WPTs are part of interop-2023, so this change seems to have accidentally moved-the-goalposts for interop2023 to now require transition-behavior, per the comment I just posted on that PR.

Could we backout or fix things one way or another so as not to have an impact on interop-2023 targets?

[dholbert]

(ah Joey already replied over there - thanks Joey!)

[josepharhar]

If we can't change existing tests then I'm not sure what the best way is to test transition-behavior on all existing CSS properties, but maybe we can do that after interop2023 is over...?

In any case, the tests I mentioned in my previous comment are still good tests for transition-behavior.

[dbaron]

Yeah, this is sort of a sticky situation -- I think we definitely want to reland those tests after Interop2023 is "over" (in the sense that we can add to the tests that are part of Interop2023). (And we don't want to forget to do that!) I think the best way to test that transition-behavior interacts correctly with every CSS property for which it's relevant is clearly to update the one central piece of JS and have that generate all the correct tests for the interactions, from calls to that central JS that already exist. That's easier to maintain in the future as we add new properties, and gives good coverage based on the existing interpolation tests. The problem is just that it adds new tests to all those existing interpolation tests which we don't want to do for those that are part of Interop2023.

So we're stuck in a situation where, while we do have a bunch of tests, probably the bulk of the coverage of testing across all CSS properties can't land until Interop2023 is "done" (in the sense that we're free to add stuff to tests that are part of Interop2023). I don't think we should try to land a "workaround" for this problem because I'm having trouble imagining a workaround that doesn't impose ongoing maintenance costs as we add future CSS properties.

[dholbert]

Yeah -- for the purpose of assessing this interop-2024 proposal, I think we can consider the answer to "does this have WPT tests" to be: yes, they're in this PR which for technical/interop-2023 reasons can't be merged into upstream wpt until interop-2023 is "done" as dbaron noted (which I imagine is... mid-to-late-January, I guess?)

In the unlikely case that any implementer (outside of Chromium folks who've already implemented this property) happen to get to this before then, they can apply that PR locally so they can test their implementation, if they like.

[gsnedders]

This proposal has been accepted as part of Interop 2024! On behalf of the entire Interop team, thank you for proposing it. You’ll be able to track progress on this topic throughout the year via the Interop 2024 dashboard.