@@ -278,8 +278,8 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
278278 < li > < a href ="#functional-notation "> < span class =secno > 9. </ span > Functional
279279 Notations</ a >
280280 < ul class =toc >
281- < li > < a href ="#calc "> < span class =secno > 9.1. </ span > Calculations:
282- ‘< code class =css > calc()</ code > ’, ‘< code
281+ < li > < a href ="#calc "> < span class =secno > 9.1. </ span > Mathematical
282+ Expressions: ‘< code class =css > calc()</ code > ’, ‘< code
283283 class =css > min()</ code > ’ and ‘< code
284284 class =css > max()</ code > ’</ a >
285285
@@ -782,11 +782,11 @@ <h3 id=percentages><span class=secno>4.3. </span> Percentages: the
782782 ‘< a href ="#percentage-value "> < code
783783 class =css > <percentage></ code > </ a > ’ type</ h3 >
784784
785- < p > A percentage value is denoted by < dfn
785+ < p > A < dfn id = percentage > percentage </ dfn > value is denoted by < dfn
786786 id =percentage-value > < code > <percentage></ code > </ dfn > , consists of a
787787 < a href ="#number-value "> < i > <number></ i > </ a > immediately followed by
788788 a percent sign ‘< code class =css > %</ code > ’. It corresponds to
789- the < code > PERCENTAGE</ code > token in the < a
789+ the < a href =" #percentage " > < code > PERCENTAGE</ code > </ a > token in the < a
790790 href ="http://www.w3.org/TR/CSS21/syndata.html#tokenization "> grammar</ a > .
791791
792792 < p > Percentage values are always relative to another value, for example a
@@ -1297,15 +1297,19 @@ <h2 id=functional-notation><span class=secno>9. </span> Functional
12971297<!-- --> content: counter(list-item) ". ";
12981298<!-- --> width: calc(50% - 2em);</ pre >
12991299
1300- < h3 id =calc > < span class =secno > 9.1. </ span > Calculations: ‘ < a
1301- href ="#calc0 "> < code class =css > calc()</ code > </ a > ’, ‘ < a
1302- href ="#min "> < code class =css > min()</ code > </ a > ’ and ‘ < a
1303- href ="#max "> < code class =css > max()</ code > </ a > ’</ h3 >
1300+ < h3 id =calc > < span class =secno > 9.1. </ span > Mathematical Expressions:
1301+ ‘ < a href ="#calc0 "> < code class =css > calc()</ code > </ a > ’,
1302+ ‘ < a href ="#min "> < code class =css > min()</ code > </ a > ’ and
1303+ ‘ < a href ="#max "> < code class =css > max()</ code > </ a > ’</ h3 >
13041304
13051305 < p > The < dfn id =calc0 > calc()</ dfn > , < dfn id =min > min()</ dfn > , and < dfn
1306- id =max > max()</ dfn > functions allow mathematical expressions to be used as
1307- component values. They can be used wherever < a
1308- href ="#length-value "> < code > <length></ code > </ a > , < a
1306+ id =max > max()</ dfn > functions allow mathematical expressions with addition
1307+ (‘< code class =css > +</ code > ’), subtraction (‘< code
1308+ class =css > -</ code > ’), multiplication (‘< code
1309+ class =css > *</ code > ’), division (‘< code
1310+ class =css > /</ code > ’), and modulus (‘< code
1311+ class =css > mod</ code > ’) to be used as component values. They can be
1312+ used wherever < a href ="#length-value "> < code > <length></ code > </ a > , < a
13091313 href ="#frequency-value "> < code > <frequency></ code > </ a > , < a
13101314 href ="#angle-value "> < code > <angle></ code > </ a > , < a
13111315 href ="#time-value "> < code > <time></ code > </ a > , or < a
@@ -1337,6 +1341,9 @@ <h3 id=calc><span class=secno>9.1. </span> Calculations: ‘<a
13371341 < pre > .box { width: min(10% + 20px, 300px) }</ pre >
13381342 </ div >
13391343
1344+ < p class =issue > Add less trivial examples, particularly involving parens or
1345+ nesting.
1346+
13401347 < p > The expression language of these functions is described by the grammar
13411348 and prose below.
13421349
@@ -1350,22 +1357,26 @@ <h3 id=calc><span class=secno>9.1. </span> Calculations: ‘<a
13501357unit : ["+"|"-"]? [ NUMBER | DIMENSION | PERCENTAGE |
13511358 min | max | "(" S* sum S* ")" ];</ pre >
13521359
1353- < div class =note >
1354- < p > Additionally, the following redefinition is made to the informative
1355- grammar appearing in < a href ="http://www.w3.org/TR/CSS2/grammar.html "> CSS
1356- 2.1 Appendix G</ a > :</ p >
1360+ < p class =note > Note that the grammar requires spaces around binary
1361+ ‘< code class =css > +</ code > ’ and ‘< code
1362+ class =css > -</ code > ’ operators. The ‘< code
1363+ class =css > *</ code > ’, ‘< code class =css > /</ code > ’, and
1364+ ‘< code class =css > mod</ code > ’ operators do not require spaces.
13571365
1358- < pre >
1366+ < p > Additionally, the following redefinition is made to the informative
1367+ grammar appearing in < a href ="http://www.w3.org/TR/CSS2/grammar.html "> CSS
1368+ 2.1 Appendix G</ a > :
1369+
1370+ < pre >
13591371term
13601372 : unary_operator?
13611373 [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
13621374 TIME S* | FREQ S* ]
13631375 | STRING S* | IDENT S* | URI S* | hexcolor | function< ins > | math</ ins >
13641376 ;</ pre >
1365- </ div >
13661377
1367- < p > The expression has a < dfn id =resolved-type > resolved type</ dfn > , which is
1368- one of ‘< code class =css > <length> </ code > ’, ‘< code
1378+ < p > A math expression has a < dfn id =resolved-type > resolved type</ dfn > , which
1379+ is one of ‘< code class =css > <length> </ code > ’, ‘< code
13691380 class =css > <frequency> </ code > ’, ‘< code
13701381 class =css > <angle> </ code > ’, ‘< code
13711382 class =css > <time> </ code > ’, or ‘< code
@@ -1381,9 +1392,10 @@ <h3 id=calc><span class=secno>9.1. </span> Calculations: ‘<a
13811392 class =css > <length> </ code > ’, ‘< a href ="#deg "> < code
13821393 class =css > deg</ code > </ a > ’ is ‘< code
13831394 class =css > <angle> </ code > ’, etc.). If percentages are accepted in
1384- the context in which the expression is placed, a < code > PERCENTAGE</ code >
1385- token has the type of the value that percentages are relative to;
1386- otherwise, an expression containing percentages is invalid.
1395+ the context in which the expression is placed, a < a
1396+ href ="#percentage "> < code > PERCENTAGE</ code > </ a > token has the type of the
1397+ value that percentages are relative to; otherwise, a math expression
1398+ containing percentages is invalid.
13871399
13881400 < p > Operators form sub-expressions, which gain types based on their
13891401 arguments. To make expressions simpler, operators have restrictions on the
@@ -1427,7 +1439,7 @@ <h3 id=calc><span class=secno>9.1. </span> Calculations: ‘<a
14271439 </ div >
14281440
14291441 < p > Given the complexities of width and height calculations on table cells
1430- and table elements, expressions involving percentages for widths and
1442+ and table elements, math expressions involving percentages for widths and
14311443 heights on table columns, table column groups, table rows, table row
14321444 groups, and table cells in both auto and fixed layout tables MAY be
14331445 treated as if ‘< code class =property > auto</ code > ’ had been
@@ -2309,6 +2321,9 @@ <h2 class=no-num id=index>Index</h2>
23092321 < li > < a href ="#number-value "> < code > <number></ code > </ a > , < a
23102322 href ="#number-value " title ="<number> "> < strong > 4.2.</ strong > </ a >
23112323
2324+ < li > percentage, < a href ="#percentage "
2325+ title =percentage > < strong > 4.3.</ strong > </ a >
2326+
23122327 < li > < a href ="#percentage-value "> < code > <percentage></ code > </ a > , < a
23132328 href ="#percentage-value "
23142329 title ="<percentage> "> < strong > 4.3.</ strong > </ a >
0 commit comments