Intent to Prototype: CSS calc-size() function

1,109 views
Skip to first unread message

David Baron

unread,
Dec 21, 2023, 4:14:21 PM12/21/23
to blink-dev

Contact emails

dba...@chromium.org

Explainer

None yet.  (But the starting point for writing one, particularly a section on alternatives considered, would probably be the discussion in the github issue starting from Tab's November 6 comment to the present.)

Specification

None yet, but the CSS Working Group has resolved (yesterday) to add this feature to CSS Values & Units Module Level 5.

Summary

The CSS calc-size() function is a CSS function similar to calc(), but that also supports operations on exactly one of the values auto, min-content, max-content, fit-content, stretch, or contain. This allows transitions and animations to and from these values (or mathematical functions of these values), as long as the calc-size() function is used on at least one of the endpoints of the transition or animation to opt in.


Blink component

Blink>Layout

Motivation

Animation to or from auto heights is a very commonly requested feature by web developers because it is important for animation of elements (such as the contents of disclosure widgets) opening/closing between a content-based height (or width) and a small (often zero) height (or width). This feature fits the desire to do such animations into the way that CSS transitions and animations work. More generally, this allows animating any height that can currently be specified in CSS to zero or to/from a small fixed value.


Initial public proposal

https://github.com/w3c/csswg-drafts/issues/626#issuecomment-1800254442

TAG review

None yet.

TAG review status

Pending

Risks



Interoperability and Compatibility

The CSS Working Group has so far had only a brief synchronous discussion of the proposal, so I didn't get a good sense of what other engine developers think of the proposal (and they also haven't yet had a lot of time to examine it). However, given the history of developer demand for the feature, I think a (hopefully) compelling prototype in Chromium may help make a strong case for implementation in other engines.


Gecko: No signal

WebKit: No signal

Web developers: Positive. Animation to/from auto height is a very commonly requested feature by developers. See citations, stars/votes, and comments in https://github.com/w3c/csswg-drafts/issues/626https://bugs.chromium.org/p/chromium/issues/detail?id=313072, and https://bugzilla.mozilla.org/show_bug.cgi?id=571344.

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None



Debuggability

Expected to be similar to existing CSS calc() function.



Is this feature fully tested by web-platform-tests?

No, but I intend to write WPT tests as I work on it, with the caveat that I might not be quite as thorough as I would be if I weren't expecting substantial future changes to the proposal based on what we learn from trying to prototype it.

Flag name on chrome://flags

None

Finch feature name

kCSSCalcSizeFunction

Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=313072

Estimated milestones

No milestones specified



Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5196713071738880

This intent message was generated by Chrome Platform Status and edited by hand.
Reply all
Reply to author
Forward
0 new messages