@@ -3679,49 +3679,39 @@ calc-size/interpolate-size-parsing.html
36793679<h3 id=resolving-calc-size>
36803680Resolving ''calc-size()''</h3>
36813681
3682- The value of a ''calc-size()''
3683- is resolved first by [= calc-size()/simplifying=] it
3684- as described below in [[#simplifying -calc-size]] .
3682+ Before [=used value=] time,
3683+ '' calc-size()'' functions are not resolved or simplified.
3684+ (But see [[#interpolate -calc-size]] .)
36853685
3686- Then, at used- value time,
3686+ At [= used value=] time,
36873687 the [=calc-size calculation=] is resolved
3688- just like the value of a ''calc()'' expression
3688+ just like the value of a ''calc()'' expression,
36893689 by substituting in the used value of the [=calc-size basis=]
36903690 for the ''calc-size()/size'' keyword in the [=calc-size calculation=] ,
36913691 and evaluating any percentages normally (if they are [=definite=] )
36923692 or against ''0px'' (if they are not).
36933693
3694- Note: If the [=calc-size basis=] is ''calc-size()/any'' ,
3695- the ''calc-size()'' resolves exactly as a [=definite=] length
3696- equal to its [=calc-size calculation=] .
3697-
3698- Note: A percentage in the [=calc-size basis=]
3699- is treated differently:
3700- [[#simplifying-calc-size|simplification]]
3701- moves the percentage into the [=calc-size calculation=]
3702- and replaces it with ''size'' references.
3703- The [=calc-size basis=] then becomes ''100%'' ,
3704- behaving as whatever ''100%'' would normally do in that context,
3705- including possibly making a property [=behave as auto=] , etc.
3706-
37073694 <div class=note>
3708- Percentages in the basis work as normal
3695+ Percentages in the [=calc-size basis=] resolve as normal
37093696 so you can always smoothly transition to <em> any</em> size,
37103697 regardless of its value or behavior.
3711- For example, without ''calc-size()'' ,
3712- transitioning from ''100%'' to ''0px''
3713- only works smoothly if the percentage is [=definite=] ;
3714- if it's not, then during the entire transition
3715- the property might [=behave as auto=]
3716- and not actually change size at all.
3717-
3718- Percentages in the calculation, on the other hand,
3719- are resolved to 0 when indefinite
3698+ For example, ''calc-size(100%, size)''
3699+ is guaranteed to interpolate smoothly with ''calc-size(100%, 0px)'' ,
3700+ producing intermediate values like ''calc-size(100%, size * .5)'' .
3701+ Without ''calc-size()'' ,
3702+ interpolation from ''100%'' to ''0px'' only works as expected
3703+ if the percentage is [=definite=] ;
3704+ otherwise, the intermediate values like ''calc(50%)''
3705+ might all [=behave as auto=]
3706+ and not change size at all.
3707+
3708+ Percentages in the [=calc-size calculation=] , on the other hand,
3709+ are resolved to ''0px'' when they would otherwise be indefinite,
37203710 to avoid making the ''calc-size()''
3721- potentially act in two different ways;
3722- there are some cases where a ''width/min-content'' size
3711+ potentially act in two different ways.
3712+ There are some cases where a ''width/min-content'' size, for example,
37233713 will cause different layout effects than a ''100%'' size,
3724- and so a ''calc-size()'' has to masquerade as one or the other.
3714+ and so a ''calc-size()'' has to commit to one behavior or the other.
37253715 </div>
37263716
37273717
@@ -3751,10 +3741,10 @@ calc-size/animation/interpolate-size-width-interpolation.html
37513741
37523742 Whether two ''calc-size()'' functions can be interpolated
37533743 depends on their [=calc-size basis=] values
3754- (after being [=calc-size()/simplified=] ):
3744+ (after being [=calc-size()/simplified for interpolation =] ):
37553745
37563746 <dl class=switch>
3757- : If either function returned failure from being [=calc-size()/simplified=]
3747+ : If either function returned failure from being [=calc-size()/simplified for interpolation =]
37583748 :: The values cannot be interpolated.
37593749
37603750 : If they are identical
@@ -3833,15 +3823,18 @@ calc-size/animation/interpolate-size-width-interpolation.html
38333823<h4 id=simplifying-calc-size>
38343824Simplifying ''calc-size()''</h4>
38353825
3836- Similar to [=math functions=] ,
3837- at both [=specified value=] and [=computed value=] times
3838- the [=calc-size calculation=]
3839- (and the [=calc-size basis=] , if it's a <<calc-sum>> )
3840- are simplified to the extent possible,
3841- as follows:
3826+ Before [=interpolation=] ,
3827+ ''calc-size()'' functions are [=calc-size()/simplified for interpolation=]
3828+ so their [=calc-size basises=] can be compared,
3829+ and their [=calc-size calculations=] can be interpolated properly.
3830+
3831+ Note: Unlike [=math functions=] ,
3832+ this simplification is <em> not</em> done at other times.
3833+ The simplification can fail due to substitution exploding,
3834+ similar to [[#long-substitution]] .
38423835
38433836 <div algorithm>
3844- To <dfn for=calc-size()>simplify</dfn>
3837+ To <dfn for=calc-size()>simplify for interpolation </dfn>
38453838 a ''calc-size()'' function:
38463839
38473840 <ol>
@@ -3875,14 +3868,12 @@ Simplifying ''calc-size()''</h4>
38753868 returns failure,
38763869 the entire operation immediately returns failure.
38773870
3878- ISSUE: And then what?
3879-
38803871 <li>
38813872 Next, simplify the [=calc-size calculation=]
38823873 as defined in [[css-values-4#calc-simplification]] .
38833874 </ol>
38843875
3885- Note: After canonicalization ,
3876+ Note: After simplification ,
38863877 the [=calc-size basis=] of a ''calc-size()'' function
38873878 will either be a single keyword or the value ''100%'' .
38883879 </div>
0 commit comments