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

[jsnkuhn]

Description

dbaron's description from - WebKit/standards-positions#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:
mozilla/standards-positions#1022

Webkit Standard Position:
WebKit/standards-positions#348

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