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

[o-t-w]

Description

Enables animating to height: auto; and other intrinsic sizing keywords in CSS.

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

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.

Particularly useful for animating between height: 0 and a content-based height e.g. for a details/summary accordion animation.

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.

Chrome blog post.

Available in Chrome/Edge as of 129.

Specification

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/css/css-values/calc-size?label=master&label=experimental&aligned&q=calc-size

Additional Signals

Mozilla Standard Position

Webkit Standard Position

[github-actions]

This comment was automatically generated based on the information you provided. Please don't edit it.

Below is additional information about the web features (from the web-features project) which are referenced in your proposal.
If this doesn't accurately correspond to your proposal, please update your initial comment to include web-features: <feature-id>.
To find feature IDs, use the web-features explorer.

calc-size()

Feature calc-size()

• ID: calc-size
• Name: calc-size()
• Description: The calc-size() CSS function computes mathematical expressions that include height and width keyword values, for example calc-size(fit-content, size / 2). Not to be confused with the calc() CSS function, which cannot use keyword values.
• Baseline status: Limited Availability
• Docs: calc-size()
• Standard positions: Mozilla, WebKit
• Chrome use counter: chromestatus.com
• State of CSS/JS/HTML surveys: State of CSS 2025 (usage question), State of CSS 2025 (reading_list question), State of CSS 2025 (features question)
• WPT tests: wpt.fyi/results/?q=feature:calc-size
• More information: See the web-features explorer

interpolate-size

Feature interpolate-size

• ID: interpolate-size
• Name: interpolate-size
• Description: The interpolate-size CSS property sets whether animations and transitions interpolate between a numeric value and a keyword value, such as from a fixed length to auto or fit-content.
• Baseline status: Limited Availability
• Docs: interpolate-size
• Standard positions: Mozilla, WebKit
• Chrome use counter: chromestatus.com
• WPT tests: wpt.fyi/results/?q=feature:interpolate-size
• More information: See the web-features explorer

[foolip]

@o-t-w thank you for submitting this proposal! I just added https://web-platform-dx.github.io/web-features-explorer/features/calc-size/ to your description to help our bot (above) link to all the relevant information.

Since there are two features, a wpt.fyi link covering both looks like this:
https://wpt.fyi/results/?label=master&label=experimental&aligned&q=feature%3Acalc-size%20or%20feature%3Ainterpolate-size

(This looks very similar to the link you already provided.)

[wpt-interop]

Thank you for proposing CSS calc-size() and interpolate-size for Interop 2026.

We want to let you know it was not selected to be part of Interop this year.

On behalf of the entire Interop team, thank you for submitting it for consideration. We got many more proposals than we could include in this year's project, necessitating some difficult choices. Please note this should not be taken as a comment on the technology as a whole, or our willingness to consider it for Interop in the future. We appreciate the work you put into your proposal, and would welcome your participation in future rounds of Interop.

Posted on behalf of the Interop team.

[benface]

That one is a huge bummer for sure... oh well, there's always next year.