CSS `calc-size()` and `interpolate-size` (transition 0 to auto)

[jsnkuhn]

Description

dbaron's description from - https://github.com/WebKit/standards-positions/issues/348

"Animation to or from auto heights is commonly requested by web developers. 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 calc-size() proposal fits the desire to do such animations into the way that CSS transitions and animations work. More generally, this allows animating between a fixed length and almost any type of height (or width, or min/max-height/width) that can currently be specified in CSS.

The CSS interpolate-size property allows a page to opt in to animations and transitions of CSS intrinsic sizing keywords such as auto, min-content, fit-content, etc., in the cases where we can animate those keywords.

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, which are the intrinsic sizing keywords. This function is used to represent the values in the middle of the animations allowed by the interpolate-size property."

Specification

https://www.w3.org/TR/css-values-5/#calc-size

Additional Signals

Just added to Chrome stable as of 129. Chrome blog post: https://developer.chrome.com/docs/css-ui/animate-to-height-auto

Mozilla Standard Position: https://github.com/mozilla/standards-positions/issues/1022

Webkit Standard Position: https://github.com/WebKit/standards-positions/issues/348

Web Platform Test: https://wpt.fyi/results/css/css-values/calc-size?label=master&label=experimental&aligned&q=calc-size