Skip to content

Commit 5744456

Browse files
tabatkinstabatkins
committed
Tweak percentage text, move computed value stuff about calc() into a subexpression.
1 parent a696c7a commit 5744456

2 files changed

Lines changed: 76 additions & 60 deletions

File tree

‎css3-values/Overview.html‎

Lines changed: 39 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -288,7 +288,10 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
288288
<li><a href="#calc-type-checking"><span class=secno>8.1.2. </span>
289289
Type Checking</a>
290290

291-
<li><a href="#calc-range"><span class=secno>8.1.3. </span> Range
291+
<li><a href="#calc-computed-value"><span class=secno>8.1.3. </span>
292+
Computed Value</a>
293+
294+
<li><a href="#calc-range"><span class=secno>8.1.4. </span> Range
292295
Checking</a>
293296
</ul>
294297

@@ -1364,30 +1367,6 @@ <h3 id=calc-notation><span class=secno>8.1. </span> Mathematical
13641367
href="#percentage-value"><var>&lt;percentage></var></a> values that
13651368
resolve to one of the preceding types.
13661369

1367-
<p> The computed value of a ‘<a href="#calc"><code
1368-
class=css>calc()</code></a>’ expression is the expression with all
1369-
components computed, with all multiplication/division subexpressions
1370-
resolved, and with all addition/subtraction subexpressions resolved where
1371-
both sides are the same type. Where percentages are not resolved at
1372-
computed value, they are not resolved in ‘<a href="#calc"><code
1373-
class=css>calc()</code></a>’ expressions, e.g. ‘<code
1374-
class=css>height: calc(100% - 100% + 1em)</code>’ computes to ‘<code
1375-
class=css>height: calc(0% + 1em)</code>’, not to ‘<code
1376-
class=css>height: calc(1em)</code>’, and, due to containing a percentage
1377-
relative to the height of a containing block that depends on this
1378-
element's height, <a
1379-
href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">is
1380-
treated as ‘<code class=css>auto</code>’</a>. <a href="#CSS21"
1381-
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> <span class=note> Thus, the
1382-
computed value of a ‘<a href="#calc"><code
1383-
class=css>calc()</code></a>’ expression can be represented as either a
1384-
number or a tuple of a dimension and a percentage. </span>
1385-
<!-- http://lists.w3.org/Archives/Public/www-style/2010May/0001.html
1386-
This has notes on how we should handle things when calc() is extended to
1387-
handle unit mult/div. Related to this is <unit>mod<unit>, which can return
1388-
0 and thus introduce computed-time division-by-zero. -->
1389-
1390-
13911370
<div class=example>
13921371
<pre>
13931372
section {
@@ -1446,12 +1425,6 @@ <h3 id=calc-notation><span class=secno>8.1. </span> Mathematical
14461425
</pre>
14471426
</div>
14481427

1449-
<p> Given the complexities of width and height calculations on table cells
1450-
and table elements, math expressions involving percentages for widths and
1451-
heights on table columns, table column groups, table rows, table row
1452-
groups, and table cells in both auto and fixed layout tables MAY be
1453-
treated as if ‘<code class=property>auto</code>’ had been specified.
1454-
14551428
<h4 id=calc-syntax><span class=secno>8.1.1. </span> Syntax</h4>
14561429

14571430
<p>The expression language of these functions is described by the grammar
@@ -1561,7 +1534,41 @@ <h4 id=calc-type-checking><span class=secno>8.1.2. </span> Type Checking</h4>
15611534
- 5px + 10s)</code>’ or ‘<code class=css>calc(0 * 5px + 10s)</code>’
15621535
are both invalid due to the attempt to add a length and a time.
15631536

1564-
<h4 id=calc-range><span class=secno>8.1.3. </span> Range Checking</h4>
1537+
<h4 id=calc-computed-value><span class=secno>8.1.3. </span> Computed Value</h4>
1538+
1539+
<p> The computed value of a ‘<a href="#calc"><code
1540+
class=css>calc()</code></a>’ expression is the expression with all
1541+
components computed, with all multiplication/division subexpressions
1542+
resolved, and with all addition/subtraction subexpressions resolved where
1543+
both sides are the same type.
1544+
1545+
<p> Where percentages are not resolved at computed value, they are not
1546+
resolved in ‘<a href="#calc"><code class=css>calc()</code></a>’
1547+
expressions, e.g. ‘<code class=css>calc(100% - 100% + 1em)</code>’
1548+
resolves to ‘<code class=css>calc(0% + 1em)</code>’, not to ‘<code
1549+
class=css>calc(1em)</code>’. If there are special rules for computing
1550+
percentages in a value (e.g. <a
1551+
href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">the
1552+
‘<code class=property>height</code>’ property</a>), they apply
1553+
whenever a ‘<a href="#calc"><code class=css>calc()</code></a>’
1554+
expression contains percentages.
1555+
1556+
<p class=note> Thus, the computed value of a ‘<a href="#calc"><code
1557+
class=css>calc()</code></a>’ expression can be represented as either a
1558+
number or a tuple of a dimension and a percentage.
1559+
<!-- http://lists.w3.org/Archives/Public/www-style/2010May/0001.html
1560+
This has notes on how we should handle things when calc() is extended to
1561+
handle unit mult/div. Related to this is <unit>mod<unit>, which can return
1562+
0 and thus introduce computed-time division-by-zero. -->
1563+
1564+
1565+
<p> Given the complexities of width and height calculations on table cells
1566+
and table elements, math expressions involving percentages for widths and
1567+
heights on table columns, table column groups, table rows, table row
1568+
groups, and table cells in both auto and fixed layout tables MAY be
1569+
treated as if ‘<code class=css>auto</code>’ had been specified.
1570+
1571+
<h4 id=calc-range><span class=secno>8.1.4. </span> Range Checking</h4>
15651572

15661573
<p>The value resulting from an expression must be clamped to the range
15671574
allowed in the target context.

‎css3-values/Overview.src.html‎

Lines changed: 37 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -907,28 +907,6 @@ <h3 id="calc-notation">
907907
''attr()'' or ''calc()'' expressions, or <var>&lt;percentage></var> values
908908
that resolve to one of the preceding types.
909909

910-
<p>
911-
The computed value of a ''calc()'' expression is the expression
912-
with all components computed,
913-
with all multiplication/division subexpressions resolved,
914-
and with all addition/subtraction subexpressions resolved where both sides are the same type.
915-
Where percentages are not resolved at computed value,
916-
they are not resolved in ''calc()'' expressions,
917-
e.g. ''height: calc(100% - 100% + 1em)'' computes to ''height: calc(0% + 1em)'',
918-
not to ''height: calc(1em)'',
919-
and, due to containing a percentage relative to the height of a containing block that depends on this element's height,
920-
<a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">is treated as ''auto''</a>. [[!CSS21]]
921-
<span class='note'>
922-
Thus, the computed value of a ''calc()'' expression can be represented
923-
as either a number
924-
or a tuple of a dimension and a percentage.
925-
</span>
926-
927-
<!-- http://lists.w3.org/Archives/Public/www-style/2010May/0001.html
928-
This has notes on how we should handle things when calc() is extended to
929-
handle unit mult/div. Related to this is <unit>mod<unit>, which can return
930-
0 and thus introduce computed-time division-by-zero. -->
931-
932910
<div class="example">
933911
<pre>
934912
section {
@@ -984,12 +962,6 @@ <h3 id="calc-notation">
984962
</pre>
985963
</div>
986964

987-
<p>
988-
Given the complexities of width and height calculations on table cells and table elements,
989-
math expressions involving percentages for widths and heights on
990-
table columns, table column groups, table rows, table row groups, and table cells
991-
in both auto and fixed layout tables
992-
MAY be treated as if 'auto' had been specified.
993965

994966
<h4 id='calc-syntax'>
995967
Syntax</h4>
@@ -1027,6 +999,7 @@ <h4 id='calc-syntax'>
1027999
If a ''calc()'' expression contains more than the supported number of terms,
10281000
it must be treated as if it were invalid.
10291001

1002+
10301003
<h4 id='calc-type-checking'>
10311004
Type Checking</h4>
10321005

@@ -1095,6 +1068,42 @@ <h4 id='calc-type-checking'>
10951068
For example, ''calc(5px - 5px + 10s)'' or ''calc(0 * 5px + 10s)'' are both invalid
10961069
due to the attempt to add a length and a time.
10971070

1071+
<h4 id='calc-computed-value'>
1072+
Computed Value</h4>
1073+
1074+
<p>
1075+
The computed value of a ''calc()'' expression is the expression
1076+
with all components computed,
1077+
with all multiplication/division subexpressions resolved,
1078+
and with all addition/subtraction subexpressions resolved where both sides are the same type.
1079+
1080+
<p>
1081+
Where percentages are not resolved at computed value,
1082+
they are not resolved in ''calc()'' expressions,
1083+
e.g. ''calc(100% - 100% + 1em)'' resolves to ''calc(0% + 1em)'',
1084+
not to ''calc(1em)''.
1085+
If there are special rules for computing percentages in a value
1086+
(e.g. <a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">the 'height' property</a>),
1087+
they apply whenever a ''calc()'' expression contains percentages.
1088+
1089+
<p class='note'>
1090+
Thus, the computed value of a ''calc()'' expression can be represented
1091+
as either a number
1092+
or a tuple of a dimension and a percentage.
1093+
1094+
<!-- http://lists.w3.org/Archives/Public/www-style/2010May/0001.html
1095+
This has notes on how we should handle things when calc() is extended to
1096+
handle unit mult/div. Related to this is <unit>mod<unit>, which can return
1097+
0 and thus introduce computed-time division-by-zero. -->
1098+
1099+
<p>
1100+
Given the complexities of width and height calculations on table cells and table elements,
1101+
math expressions involving percentages for widths and heights on
1102+
table columns, table column groups, table rows, table row groups, and table cells
1103+
in both auto and fixed layout tables
1104+
MAY be treated as if ''auto'' had been specified.
1105+
1106+
10981107
<h4 id='calc-range'>
10991108
Range Checking</h4>
11001109

0 commit comments

Comments
 (0)