Repository navigation
The transition-behavior CSS property #580
Description
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
Activity
josepharhar commentedon Oct 12, 2023
Original proposal: #495
dholbert commentedon Oct 30, 2023
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 commentedon Oct 31, 2023
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.htmlandcss/css-contain/content-visibility/content-visibility-interpolation.htmlare 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 commentedon Nov 9, 2023
This WPT PR should add transition-behavior testing to many existing WPTs: web-platform-tests/wpt#42857
foolip commentedon Nov 13, 2023
@josepharhar with web-platform-tests/wpt#42857 landed, can you link to all of the tests that are in scope for this proposal?
dholbert commentedon Nov 16, 2023
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 commentedon Nov 16, 2023
(ah Joey already replied over there - thanks Joey!)
josepharhar commentedon Nov 16, 2023
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 commentedon Nov 16, 2023
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-behaviorinteracts 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 commentedon Nov 17, 2023
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 commentedon Feb 1, 2024
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.
Reapply "Add allow-discrete to non-interpolable WPTs"
Reapply "Add allow-discrete to non-interpolable WPTs"
Reapply "Add allow-discrete to non-interpolable WPTs"
Reapply "Add allow-discrete to non-interpolable WPTs"
Reapply "Add allow-discrete to non-interpolable WPTs"
Reapply "Add allow-discrete to non-interpolable WPTs"
Reapply "Add allow-discrete to non-interpolable WPTs"
Reapply "Add allow-discrete to non-interpolable WPTs"
Reapply "Add allow-discrete to non-interpolable WPTs"
Bug 1881331 [wpt PR 44713] - Reapply "Add allow-discrete to non-inter…
Bug 1881331 [wpt PR 44713] - Reapply "Add allow-discrete to non-inter…
Bug 1881331 [wpt PR 44713] - Reapply "Add allow-discrete to non-inter…