Some clarifications to toggle().

Author: fantasai

css3-values/Overview.html

@@ -1529,13 +1529,15 @@ <h3 id=toggle-notation><span class=secno>8.2. </span> Toggling Between
 
   <pre>toggle( &lt;value&gt;# )</pre>
 
-  <p> where <var>&lt;value></var> is a CSS value that is valid where the
+  <p> where <var>&lt;value></var> is any CSS value that is valid where the
    expression is placed. If any of the values inside are not valid, then the
    entire ‘<a href="#toggle"><code class=css>toggle()</code></a>’
-   expression is invalid.
+   expression is invalid. The ‘<a href="#toggle"><code
+   class=css>toggle()</code></a>’ expression may be used as the value of
+   any property (but must be the only component in that property's value).
 
-  <p class=note> Note that values with commas at the top-level will be
-   incorrectly interpreted as separate values.
+  <p class=note> Note that because toggled values are separated by commas,
+   they cannot themselves include top-level commas.
 
   <p> The value returned by ‘<a href="#toggle"><code
    class=css>toggle()</code></a>’ must be determined by comparing the
@@ -1549,23 +1551,6 @@ <h3 id=toggle-notation><span class=secno>8.2. </span> Toggling Between
    are no <var>C<sub>n</sub></var> that equal <var>I</var>, the computed
    value of the first value is returned instead.
 
-  <p class=note> Note that "computed values" are abstract sets of values, not
-   particular serializations, so comparison between computed values should
-   always be unambiguous and have the expected result. For example, ‘<code
-   class=property>box-shadow</code>’ computed values are just two offsets,
-   a blur, a spread, and a color, so the declarations ‘<code
-   class=css>box-shadow: 1px 1px blue;</code>’ and ‘<code
-   class=css>box-shadow: 1px 1px 0px blue;</code>’ produce identical
-   computed values. If the "Computed Value" line of a property definition
-   seems to define something ambiguous or overly strict, please <a
-   href="#status">provide feedback</a> so we can fix it.
-
-  <p class=note>Note that ‘<a href="#toggle"><code
-   class=css>toggle()</code></a>’ explicitly looks at the computed value of
-   the parent, so it is useful even for non-inherited properties. This is
-   similar to the ‘<a href="#inherit"><code class=css>inherit</code></a>’
-   keyword, which is useful even for non-inherited properties.
-
   <div class=example>
    <pre>
   /* make em elements italic, but make them normal if they're inside
@@ -1588,6 +1573,23 @@ <h3 id=toggle-notation><span class=secno>8.2. </span> Toggling Between
    class=css>calc()</code></a>’ notations. Declarations containing such
    constructs are invalid.
 
+  <p class=note> Note that "computed values" are abstract sets of values, not
+   particular serializations, so comparison between computed values should
+   always be unambiguous and have the expected result. For example, ‘<code
+   class=property>box-shadow</code>’ computed values are just two offsets,
+   a blur, a spread, and a color, so the declarations ‘<code
+   class=css>box-shadow: 1px 1px blue;</code>’ and ‘<code
+   class=css>box-shadow: 1px 1px 0px blue;</code>’ produce identical
+   computed values. If the "Computed Value" line of a property definition
+   seems to define something ambiguous or overly strict, please <a
+   href="#status">provide feedback</a> so we can fix it.
+
+  <p class=note> Note that ‘<a href="#toggle"><code
+   class=css>toggle()</code></a>’ explicitly looks at the computed value of
+   the parent, so it works even on non-inherited properties. This is similar
+   to the ‘<a href="#inherit"><code class=css>inherit</code></a>’
+   keyword, which is works even on non-inherited properties.
+
   <h3 id=attr-notation><span class=secno>8.3. </span> Attribute References:
    ‘<a href="#attr"><code class=css>attr()</code></a>’</h3>
   <!--

css3-values/Overview.src.html

@@ -1087,14 +1087,16 @@ <h3 id="toggle-notation">
 	<pre>toggle( &lt;value&gt;# )</pre>
 
 	<p>
-		where <var>&lt;value></var> is a CSS value 
+		where <var>&lt;value></var> is any CSS value 
 		that is valid where the expression is placed.  
 		If any of the values inside are not valid, 
 		then the entire ''toggle()'' expression is invalid.
+		The ''toggle()'' expression may be used as the value of any property
+		(but must be the only component in that property's value).
 
 	<p class='note'>
-		Note that values with commas at the top-level
-		will be incorrectly interpreted as separate values.
+		Note that because toggled values are separated by commas,
+		they cannot themselves include top-level commas.
 
 	<p>
 		The value returned by ''toggle()'' must be determined 
@@ -1109,22 +1111,6 @@ <h3 id="toggle-notation">
 		or if there are no <var>C<sub>n</sub></var> that equal <var>I</var>, 
 		the computed value of the first value is returned instead.
 
-	<p class='note'>
-		Note that "computed values" are abstract sets of values,
-		not particular serializations,
-		so comparison between computed values should always be unambiguous and have the expected result.
-		For example,
-		'box-shadow' computed values are just two offsets, a blur, a spread, and a color,
-		so the declarations ''box-shadow: 1px 1px blue;'' and ''box-shadow: 1px 1px 0px blue;''
-		produce identical computed values.
-		If the "Computed Value" line of a property definition seems to define something ambiguous or overly strict,
-		please <a href="#status">provide feedback</a> so we can fix it.
-
-	<p class='note'>Note that ''toggle()'' explicitly looks at the computed value
-	of the parent, so it is useful even for non-inherited properties.  This
-	is similar to the ''inherit'' keyword, which is useful even for non-inherited
-	properties.</p>
-
 	<div class='example'>
 		<pre>
   /* make em elements italic, but make them normal if they're inside
@@ -1145,6 +1131,23 @@ <h3 id="toggle-notation">
 	contain ''attr()'' or ''calc()'' notations.
 	Declarations containing such constructs are invalid.</p>
 
+	<p class='note'>
+		Note that "computed values" are abstract sets of values,
+		not particular serializations,
+		so comparison between computed values should always be unambiguous and have the expected result.
+		For example,
+		'box-shadow' computed values are just two offsets, a blur, a spread, and a color,
+		so the declarations ''box-shadow: 1px 1px blue;'' and ''box-shadow: 1px 1px 0px blue;''
+		produce identical computed values.
+		If the "Computed Value" line of a property definition seems to define something ambiguous or overly strict,
+		please <a href="#status">provide feedback</a> so we can fix it.
+
+	<p class='note'>
+		Note that ''toggle()'' explicitly looks at the computed value of the parent,
+		so it works even on non-inherited properties.
+		This is similar to the ''inherit'' keyword,
+		which is works even on non-inherited properties.
+
 <h3 id="attr-notation">
 Attribute References: ''attr()''</h3>