[css-values] Switch calc() away from 2.1 grammars.

Author: tabatkins

css-values/Overview.bs

@@ -1006,32 +1006,19 @@ Mathematical Expressions: ''calc()''</h3>
 <h4 id='calc-syntax'>
 Syntax</h4>
 
-	The expression language of these functions is described by
-	the grammar and prose below.
+	The syntax of a ''calc()'' function is:
 
-	<pre>
-	math    : calc S*;
-	calc    : "calc(" S* sum S* ")";
-	sum     : product [ S+ [ "+" | "-" ] S+ product ]*;
-	product : unit [ S* [ "*" S* unit | "/" S* NUMBER ] ]*;
-	attr    : "attr(" S* qname [ S+ type-keyword ]? S* [ "," [ unit | calc ] S* ]? ")";
-	unit    : [ NUMBER | DIMENSION | PERCENTAGE | "(" S* sum S* ")" | calc | attr ];
+	<pre class='prod'>
+	<<calc()>> = calc( <<calc-sum>> )
+	<dfn>&lt;calc-sum></dfn> = <<calc-product>> [ [ '+' | '-' ] <<calc-product>> ]*
+	<dfn>&lt;calc-product></dfn> = <<calc-value>> [ '*' <<calc-value>> | '/' <<number>> ]*
+	<dfn>&lt;calc-value></dfn> = <<number>> | <<dimension>> | <<percentage>> | ( <<calc-sum>> )
 	</pre>
 
-	Note: Note that the grammar requires spaces around binary ''+'' and ''-'' operators.
-	The ''*'' and ''/'' operators do not require spaces.
-
-	Additionally, the following redefinition is made to the informative grammar appearing in
-	<a href="http://www.w3.org/TR/CSS2/grammar.html">CSS 2.1 Appendix G</a>:
+	<p noexport>Where a <dfn>&lt;dimension></dfn> is a <a>dimension</a>.
 
-	<pre>
-	term
-	  : unary_operator?
-	    [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
-	      TIME S* | FREQ S* ]
-	  | STRING S* | IDENT S* | URI S* | hexcolor | function<ins> | math</ins>
-	  ;
-	</pre>
+	In addition, whitespace is required on both sides of the ''+'' and ''-'' operators.
+	(The ''*'' and ''/'' operaters can be used without whitespace around them.)
 
 	UAs must support ''calc()'' expressions of at least 20 terms,
 	where each <code>NUMBER</code>, <code>DIMENSION</code>, or <code>PERCENTAGE</code> is a term.

css-values/Overview.html

@@ -1126,29 +1126,18 @@ <h3 class="heading settled heading" data-level=8.1 id=calc-notation><span class=
 <h4 class="heading settled heading" data-level=8.1.1 id=calc-syntax><span class=secno>8.1.1 </span><span class=content>
 Syntax</span><a class=self-link href=#calc-syntax></a></h4>
 
-<p>	The expression language of these functions is described by
-	the grammar and prose below.
-
-	<pre>math    : calc S*;
-calc    : "calc(" S* sum S* ")";
-sum     : product [ S+ [ "+" | "-" ] S+ product ]*;
-product : unit [ S* [ "*" S* unit | "/" S* NUMBER ] ]*;
-attr    : "attr(" S* qname [ S+ type-keyword ]? S* [ "," [ unit | calc ] S* ]? ")";
-unit    : [ NUMBER | DIMENSION | PERCENTAGE | "(" S* sum S* ")" | calc | attr ];
-</pre>
-<p class=note>	Note: Note that the grammar requires spaces around binary <span class=css data-link-type=maybe title=+>+</span> and <span class=css data-link-type=maybe title=->-</span> operators.
-	The <span class=css data-link-type=maybe title=*>*</span> and <span class=css data-link-type=maybe title=/>/</span> operators do not require spaces.
-
-<p>	Additionally, the following redefinition is made to the informative grammar appearing in
-	<a href=http://www.w3.org/TR/CSS2/grammar.html>CSS 2.1 Appendix G</a>:
-
-	<pre>term
-  : unary_operator?
-    [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
-      TIME S* | FREQ S* ]
-  | STRING S* | IDENT S* | URI S* | hexcolor | function<ins> | math</ins>
-  ;
+<p>	The syntax of a <a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a> function is:
+
+	<pre class=prod><a class="production css-code" data-link-type=function href=#funcdef-calc title=calc()>&lt;calc()&gt;</a> = calc( <a class="production css-code" data-link-type=type href=#typedef-calc-sum title="<calc-sum>">&lt;calc-sum&gt;</a> )
+<dfn class=css-code data-dfn-type=type data-export="" id=typedef-calc-sum>&lt;calc-sum&gt;<a class=self-link href=#typedef-calc-sum></a></dfn> = <a class="production css-code" data-link-type=type href=#typedef-calc-product title="<calc-product>">&lt;calc-product&gt;</a> [ [ '+' | '-' ] <a class="production css-code" data-link-type=type href=#typedef-calc-product title="<calc-product>">&lt;calc-product&gt;</a> ]*
+<dfn class=css-code data-dfn-type=type data-export="" id=typedef-calc-product>&lt;calc-product&gt;<a class=self-link href=#typedef-calc-product></a></dfn> = <a class="production css-code" data-link-type=type href=#typedef-calc-value title="<calc-value>">&lt;calc-value&gt;</a> [ '*' <a class="production css-code" data-link-type=type href=#typedef-calc-value title="<calc-value>">&lt;calc-value&gt;</a> | '/' <a class="production css-code" data-link-type=type href=#number-value title="<number>">&lt;number&gt;</a> ]*
+<dfn class=css-code data-dfn-type=type data-export="" id=typedef-calc-value>&lt;calc-value&gt;<a class=self-link href=#typedef-calc-value></a></dfn> = <a class="production css-code" data-link-type=type href=#number-value title="<number>">&lt;number&gt;</a> | <a class="production css-code" data-link-type=type href=#typedef-dimension title="<dimension>">&lt;dimension&gt;</a> | <a class="production css-code" data-link-type=type href=#percentage-value title="<percentage>">&lt;percentage&gt;</a> | ( <a class="production css-code" data-link-type=type href=#typedef-calc-sum title="<calc-sum>">&lt;calc-sum&gt;</a> )
 </pre>
+	<p data-noexport="">Where a <dfn class=css-code data-dfn-type=type data-noexport="" id=typedef-dimension>&lt;dimension&gt;<a class=self-link href=#typedef-dimension></a></dfn> is a <a data-link-type=dfn href=#dimension title=dimension>dimension</a>.
+
+<p>	In addition, whitespace is required on both sides of the <span class=css data-link-type=maybe title=+>+</span> and <span class=css data-link-type=maybe title=->-</span> operators.
+	(The <span class=css data-link-type=maybe title=*>*</span> and <span class=css data-link-type=maybe title=/>/</span> operaters can be used without whitespace around them.)
+
 <p>	UAs must support <a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a> expressions of at least 20 terms,
 	where each <code>NUMBER</code>, <code>DIMENSION</code>, or <code>PERCENTAGE</code> is a term.
 	If a <a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a> expression contains more than the supported number of terms,
@@ -1853,11 +1842,15 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>&lt;attr-fallback&gt;, <a href=#typedef-attr-fallback title="section 8.3">8.3</a>
 <li>&lt;attr-name&gt;, <a href=#typedef-attr-name title="section 8.3">8.3</a>
 <li>calc(), <a href=#funcdef-calc title="section 8.1">8.1</a>
+<li>&lt;calc-product&gt;, <a href=#typedef-calc-product title="section 8.1.1">8.1.1</a>
+<li>&lt;calc-sum&gt;, <a href=#typedef-calc-sum title="section 8.1.1">8.1.1</a>
+<li>&lt;calc-value&gt;, <a href=#typedef-calc-value title="section 8.1.1">8.1.1</a>
 <li>ch, <a href=#ch title="section 5.1.1">5.1.1</a>
 <li>cm, <a href=#cm title="section 5.2">5.2</a>
 <li>CSS-wide keywords, <a href=#css-wide-keywords title="section 3.1.1">3.1.1</a>
 <li>&lt;custom-ident&gt;, <a href=#identifier-value title="section 3.2">3.2</a>
 <li>deg, <a href=#deg title="section 6.1">6.1</a>
+<li>&lt;dimension&gt;, <a href=#typedef-dimension title="section 8.1.1">8.1.1</a>
 <li>dimension, <a href=#dimension title="section 4.4">4.4</a>
 <li>dpcm, <a href=#dpcm title="section 6.4">6.4</a>
 <li>dpi, <a href=#dpi title="section 6.4">6.4</a>