Skip to content

Commit 01ac71d

Browse files
committed
[css-values-5] Remove the single-argument form of calc-size().
This removes the one-argument form of calc-size() and leaves only the two-argument form, as resolved in w3c#10478
1 parent 7dd773c commit 01ac71d

File tree

2 files changed

+7
-25
lines changed

2 files changed

+7
-25
lines changed

css-values-5/Overview.bs

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1734,7 +1734,7 @@ allows math to be performed on intrinsic sizes
17341734
in a safe, well-defined way.
17351735

17361736
<pre class=prod>
1737-
<dfn function lt="calc-size()">&lt;calc-size()></dfn> = calc-size( <<calc-size-basis>>, <<calc-sum>>? )
1737+
<dfn function lt="calc-size()">&lt;calc-size()></dfn> = calc-size( <<calc-size-basis>>, <<calc-sum>> )
17381738
17391739
<dfn>&lt;calc-size-basis></dfn> = [ <<intrinsic-size-keyword>> | percentage | <<calc-size()>> | any | <<calc-sum>> ]
17401740
</pre>
@@ -1767,20 +1767,12 @@ indicates a basis size of ''100%''.
17671767
see [[#simplifying-calc-size]].
17681768
</details>
17691769

1770-
If two arguments are given,
1771-
the first is the <dfn>calc-size basis</dfn>,
1770+
The first argument given is the <dfn>calc-size basis</dfn>,
17721771
and the second is the <dfn>calc-size calculation</dfn>.
17731772
For either argument,
17741773
if a <<calc-sum>> is given,
17751774
it must resolve to a <<length>>.
17761775

1777-
If only one argument is given,
1778-
and it's a <<calc-sum>>,
1779-
then the provided argument is the [=calc-size calculation=],
1780-
and the [=calc-size basis=] defaults to ''calc-size()/any''.
1781-
Otherwise, the provided argument is the [=calc-size basis=],
1782-
and the [=calc-size calculation=] defaults to ''calc-size()/size''.
1783-
17841776
Within the [=calc-size calculation=],
17851777
if the [=calc-size basis=] is not ''calc-size()/any'',
17861778
the keyword <dfn for=calc-size() value>size</dfn> is allowed.
@@ -2032,7 +2024,8 @@ with a <<length-percentage>> or an <<intrinsic-size-keyword>>.
20322024
To determine whether the values can interpolate
20332025
and what the interpolation behavior is,
20342026
treat the non-''calc-size()'' value
2035-
as ''calc-size( <var ignore>value</var> )''
2027+
as ''calc-size(any, <var ignore>value</var> )'' if the value is a <<calc-sum>>
2028+
or as ''calc-size( <var ignore>value</var> , size)'' otherwise,
20362029
and apply the rules above.
20372030

20382031
<div class=example>
@@ -2049,7 +2042,7 @@ and apply the rules above.
20492042
height: auto;
20502043
}
20512044
details:not([open])::details-content {
2052-
height: calc-size(0px);
2045+
height: calc-size(any, 0px);
20532046
}
20542047
</pre>
20552048

@@ -2063,7 +2056,7 @@ and apply the rules above.
20632056
</div>
20642057

20652058
Note: ''calc-size()'' is designed such that
2066-
transitioning to/from ''calc-size([=definite=] length)''
2059+
transitioning to/from ''calc-size(any, [=definite=] length)''
20672060
will <em>always</em> work smoothly,
20682061
regardless of how the other side of the transition is specified.
20692062

css-values-5/calc-size-explainer.md

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -122,17 +122,6 @@ this would be a normal intermediate value at 70% of the way through an animation
122122

123123
This is specified [in css-values-5](https://drafts.csswg.org/css-values-5/#calc-size).
124124

125-
## `calc-size(<value>)`
126-
127-
`calc-size()` also has a single-argument form.
128-
If that single argument is an intrinsic sizing keyword or a `calc-size()` function,
129-
then the argument is treated as the `<basis>` and the calculation is `size`.
130-
Otherwise the single argument is a `<calc-sum>` expression that is treated as the calculation,
131-
and the basis is `any`.
132-
133-
This form makes it more convenient to opt in to animation using `calc-size()`
134-
by wrapping at least one endpoint of the animation in `calc-size()`.
135-
136125
The following slightly more involved example shows
137126
(while using the separately proposed `::details-content` pseudo-element)
138127
the CSS needed to make a `<details>` element
@@ -147,7 +136,7 @@ details::details-content {
147136
content-visibility var(--open-close-duration) allow-discrete;
148137
}
149138
details[open]::details-content {
150-
height: calc-size(max-content);
139+
height: calc-size(max-content, size);
151140
}
152141
```
153142

0 commit comments

Comments
 (0)