CSS interpolate-size property and calc-size() function

[dbaron]

WebKittens

No response

Title of the spec

CSS calc-size() function

URL to the spec

https://drafts.csswg.org/css-values-5/#calc-size

URL to the spec's repository

https://github.com/w3c/csswg-drafts/issues

Issue Tracker URL

No response

Explainer URL

https://github.com/w3c/csswg-drafts/blob/main/css-values-5/calc-size-explainer.md

TAG Design Review URL

https://github.com/w3ctag/design-reviews/issues/955

Mozilla standards-positions issue URL

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

WebKit Bugzilla URL

https://bugs.webkit.org/show_bug.cgi?id=274177

Radar URL

No response

Description

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.

[dbaron]

I've updated the title and description to also cover the interpolate-size property, particularly given the rationale described in https://github.com/w3c/csswg-drafts/issues/10294#issuecomment-2127202025 .