CSS `interpolate-size` and `calc-size()`

Description

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. A common use case is to transition between height: 0 and height: auto, for example in accordion components.

:root {
    interpolate-size: allow-keywords; 
}

Closely related is the new calc-size() function, which allows you to perform calculations on intrinsic size values (not supported by the regular calc() function).

.foo {
  width: calc-size(min-content, size + 100px);
}

These features are supported in Chrome v129.

References:

• https://developer.chrome.com/docs/css-ui/animate-to-height-auto
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/calc-size

Specification

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

web-feature

• https://web-platform-dx.github.io/web-features-explorer/features/calc-size/
• https://web-platform-dx.github.io/web-features-explorer/features/interpolate-size/

Test Links

https://wpt.fyi/results/?label=master&aligned&q=feature%3Acalc-size%20or%20feature%3Ainterpolate-size

Additional Signals

• Mozilla standards position: positive
• WebKit standards position: pending
• Dev signal: last year's proposal got 81 likes: https://github.com/web-platform-tests/interop/issues/1008

Start with the CSS Values Level 5 specification, the two web-feature pages, and the linked WPT results for calc-size and interpolate-size. Determine how the Interop project represents these features and what existing test coverage shows; done means the requested treatment of both CSS features is recorded consistently with the project and supported by the relevant tests.