@@ -2053,7 +2053,57 @@ between keywords and fixed lengths,
20532053even without an explicit ''calc-size()'' being used on one size?
20542054This would be nice, but compat analysis is required.
20552055
2056+ <h3 id=interpolate-size>
2057+ Interpolating sizing keywords: the 'interpolate-size' property</h3>
2058+
2059+ Note: If we had a time machine, this property wouldn't need to exist.
2060+ It exists because many existing style sheets assume that
2061+ intrinsic sizing keywords
2062+ (such as ''width/auto'' , ''width/min-content'' , etc.)
2063+ cannot animate.
2064+ Therefore this property exists to allow style sheets to choose
2065+ to get the expected behavior.
2066+ Specifying ''interpolate-size: allow-keywords'' on the root element
2067+ chooses the new behavior for the entire page.
2068+ We suggest doing this whenever compatibility isn't an issue.
2069+
2070+ <pre class="propdef">
2071+ Name : interpolate-size
2072+ Value : ''numeric-only'' | ''allow-keywords''
2073+ Initial : ''numeric-only''
2074+ Inherited : yes
2075+ Applies to : all elements
2076+ Computed value : as specified
2077+ Animation type : not animatable
2078+ </pre>
20562079
2080+ <dl dfn-for="interpolate-size" dfn-type="value">
2081+ <dt> <dfn>numeric-only</dfn>
2082+ <dd>
2083+ An <<intrinsic-size-keyword>> cannot be interpolated.
2084+ </dd>
2085+
2086+ <dt> <dfn>allow-keywords</dfn>
2087+ <dd>
2088+ Two values can be interpolated if
2089+ one of them is an <<intrinsic-size-keyword>>
2090+ and the other is a <<length-percentage>> .
2091+ This is done by treating
2092+ the <<intrinsic-size-keyword>> <var> keyword</var>
2093+ as though it is ''calc-size(<var>keyword</var>, size)''
2094+ and applying the rules in [[#interp-calc-size]] .
2095+ In other cases,
2096+ an <<intrinsic-size-keyword>> still cannot be interpolated.
2097+ </dd>
2098+ </dl>
2099+
2100+ The value of 'interpolate-size' that matters
2101+ is the computed value on the element
2102+ at the time the animation might start.
2103+ For CSS transitions,
2104+ this means the value in the [=after-change style=] .
2105+ An animation is not stopped or started later
2106+ because 'interpolate-size' changes.
20572107
20582108<!-- Big Text: etc
20592109
@@ -2115,4 +2165,4 @@ Security and Privacy Considerations</h2>
21152165 to be used in CSS values,
21162166 potentially exposing sensitive information
21172167 that was previously not accessible via CSS.
2118- See [[#attr-security]] .
2168+ See [[#attr-security]] .
0 commit comments