[css-values-5] Define all the functions with semicolons to use commas, now that they can rely on semicolon-upgrading.

Author: tabatkins

css-values-5/Overview.bs

@@ -169,8 +169,6 @@ Commas and Semicolons in Functions</h4>
 	* <<whole-value>>
 	* <<declaration-value>>
 
-	Issue: The functions defined in this spec with semicolons in their grammar
-	need fixing to just use commas, now.
 
 <!-- Big Text: url
 
@@ -602,7 +600,7 @@ Interpolated Property Values: the ''mix()'' notation</h3>
 
 	<pre class="prod">
 		<dfn><<mix()>></dfn> =
-		  mix( <<progress>> ';' <<whole-value>> ';' <<whole-value>> ) |
+		  mix( <<progress>> , <<whole-value>> , <<whole-value>> ) |
 		  mix( <<progress>> && of <<'animation-name'>> )
 	</pre>
 
@@ -751,7 +749,7 @@ Selecting the First Supported Value: the ''first-valid()'' notation</h3>
 	as the whole value of the property it's used in.
 
 	<pre class=prod>
-		<dfn>&lt;first-valid()></dfn> = first-valid( <<declaration-value>> [ ';' <<declaration-value>> ]* )
+		<dfn>&lt;first-valid()></dfn> = first-valid( <<declaration-value>># )
 	</pre>
 
 	If none of the arguments represent a valid value for the property,
@@ -800,13 +798,9 @@ Toggling Between Values: ''toggle()''</h3>
 	The syntax of the ''toggle()'' expression is:
 
 	<pre class=prod>
-		<dfn><<toggle()>></dfn> = toggle( <<whole-value>> [ ';' <<whole-value>> ]+ )
+		<dfn><<toggle()>></dfn> = toggle( <<whole-value>># )
 	</pre>
 
-	Note: This [=functional notation=] uses semicolons to separate arguments
-	rather than the more typical comma
-	because the values themselves can contain commas.
-
 	The ''toggle()'' notation is a <<whole-value>>.
 	However, it is not allowed to be nested,
 	nor may it contain ''attr()'' or ''calc()'' notations;
@@ -838,7 +832,7 @@ Toggling Between Values: ''toggle()''</h3>
 
 
 	Note: This means that repeating values in a ''toggle()'' short-circuits the list.
-	For example ''toggle(1em; 2em; 1em; 4em)'' will be equivalent to ''toggle(1em; 2em)''.
+	For example ''toggle(1em, 2em, 1em, 4em)'' will be equivalent to ''toggle(1em; 2em)''.
 
 	<!-- Issue: Should this short-circuiting affect the computed value? -->
 
@@ -847,7 +841,7 @@ Toggling Between Values: ''toggle()''</h3>
 	This is similar to the ''inherit'' keyword,
 	which works even on non-inherited properties.
 
-	Note: That the <a href="https://www.w3.org/TR/CSS21/cascade.html#computed-value">computed value</a> of a property is an abstract set of values,
+	Note: That the [=computed value=] of a property is an abstract set of values,
 	not a particular serialization [[!CSS21]],
 	so comparison between computed values should always be unambiguous and have the expected result.
 	For example,
@@ -871,10 +865,10 @@ Toggling Between Values: ''toggle()''</h3>
 		is equivalent to the following longhand declarations:
 
 		<pre>
-		margin-top:    toggle(1px; 4px; 1px);
-		margin-right:  toggle(2px; 4px; 5px);
-		margin-bottom: toggle(1px; 4px; 4px);
-		margin-left:   toggle(2px; 4px; 5px);
+		margin-top:    toggle(1px, 4px, 1px);
+		margin-right:  toggle(2px, 4px, 5px);
+		margin-bottom: toggle(1px, 4px, 4px);
+		margin-left:   toggle(2px, 4px, 5px);
 		</pre>
 
 		Note that, since ''1px'' appears twice in the top margin and ''4px'' appears twice in bottom margin,
@@ -884,10 +878,10 @@ Toggling Between Values: ''toggle()''</h3>
 		as the longhand declarations below:
 
 		<pre>
-		margin-top:    toggle(1px; 4px);
-		margin-right:  toggle(2px; 4px; 5px);
-		margin-bottom: toggle(1px; 4px);
-		margin-left:   toggle(2px; 4px; 5px);
+		margin-top:    toggle(1px, 4px);
+		margin-right:  toggle(2px, 4px, 5px);
+		margin-bottom: toggle(1px, 4px);
+		margin-left:   toggle(2px, 4px, 5px);
 		</pre>
 
 		which may not be what was intended.
@@ -1388,7 +1382,7 @@ Picking a Random Item From a List: the ''random-item()'' function</h3>
 	from among its list of items.
 
 	<pre class=prod>
-	&lt;random-item()> = random-item( <<random-caching-options>> ';' <<declaration-value>>? [ ';' <<declaration-value>>? ]* )
+	&lt;random-item()> = random-item( <<random-caching-options>> , [ <<declaration-value>>? ]# )
 	</pre>
 
 	The <em>required</em> <<random-caching-options>>
@@ -1430,16 +1424,10 @@ Picking a Random Item From a List: the ''random-item()'' function</h3>
 	is much easier to do accidentally,
 	since only the number of arguments is used to distinguish instances.
 
-	The remaining arguments are arbitrary sequences of CSS values,
-	separated by semicolons.
+	The remaining arguments are arbitrary sequences of CSS values.
 	The ''random-item()'' function resolves to one of these sequences,
 	chosen uniformly at random.
 
-	Note: Unlike most functions in CSS,
-	''random-item()'' separates its arguments with semicolons,
-	rather than commas,
-	because its arguments can contain commas themselves.
-
 	The ''random-item()'' function is an [=arbitrary substitution function=],
 	like ''var()''.