[css-values] Added and shuffled examples.

Author: tabatkins

css-values/Overview.html

@@ -1720,6 +1720,17 @@ <h3 id=toggle-notation><span class=secno>8.2. </span> Toggling Between
    <pre>em { font-style: toggle(italic, normal); }</pre>
   </div>
 
+  <div class=example>
+   <p>The following example cycles markers for nested lists, so that a top
+    level list has ‘<code class=css>disc</code>’-shaped markers, but
+    nested lists use ‘<code class=css>circle</code>’, then ‘<code
+    class=css>square</code>’, then ‘<code class=css>box</code>’, and
+    then repeat through the list of marker shapes, starting again (for the
+    5th list deep) with ‘<code class=css>disc</code>’.
+
+   <pre>ul { list-style-type: toggle(disc, circle, square, box); }</pre>
+  </div>
+
   <p>The syntax of the ‘<a href="#toggle"><code
    class=css>toggle()</code></a>’ expression is:
 
@@ -1730,18 +1741,25 @@ <h3 id=toggle-notation><span class=secno>8.2. </span> Toggling Between
    any of the values inside are not valid, then the entire ‘<a
    href="#toggle"><code class=css>toggle()</code></a>’ 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 because toggled values are separated by commas,
-   they cannot themselves include top-level commas.
+   expression may be used as the value of any property, but must be the only
+   component in that property's value.
 
   <p> The ‘<a href="#toggle"><code class=css>toggle()</code></a>’
    notation is not allowed to be nested; nor may it contain ‘<a
    href="#attr"><code class=css>attr()</code></a>’ or ‘<a
    href="#calc"><code class=css>calc()</code></a>’ notations. Declarations
    containing such constructs are invalid.
 
+  <div class=example> The following ‘<a href="#toggle"><code
+   class=css>toggle()</code></a>’ examples are all invalid:
+   <pre>
+background-position: 10px toggle(50px, 100px);
+/* toggle() must be the sole value of the property */
+
+list-style-type: toggle(disc, 50px);
+/* ''50px'' isn't a valid value of 'list-style-type' */</pre>
+  </div>
+
   <p> To determine the computed value of ‘<a href="#toggle"><code
    class=css>toggle()</code></a>’, first evaluate each argument as if it
    were the sole value of the property in which ‘<a href="#toggle"><code
@@ -1758,18 +1776,6 @@ <h3 id=toggle-notation><span class=secno>8.2. </span> Toggling Between
    class=css>toggle()</code></a>’ is the computed value that the first
    argument represents.
 
-  <div class=example>
-   <p>The following example cycles markers for nested lists, so that a top
-    level list has <code>disc</code>-shaped markers, but nested lists use
-    <code>circle</code>, then <code>square</code>, then <code>box</code>, and
-    then repeat through the list of marker shapes, starting again (for the
-    5th list deep) with <code>disc</code>.
-
-   <pre>
-  ul { list-style-type: disc; }
-  ul ul { list-style-type: toggle(disc, circle, square, box); }</pre>
-  </div>
-
   <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

css-values/Overview.src.html

@@ -1251,6 +1251,15 @@ <h3 id="toggle-notation">
 		<pre>em { font-style: toggle(italic, normal); }</pre>
 	</div>
 
+	<div class='example'>
+		<p>The following example cycles markers for nested lists,
+		so that a top level list has ''disc''-shaped markers,
+		but nested lists use ''circle'', then ''square'', then ''box'',
+		and then repeat through the list of marker shapes,
+		starting again (for the 5th list deep) with ''disc''.
+
+		<pre>ul { list-style-type: toggle(disc, circle, square, box); }</pre>
+	</div>
 
 	<p>The syntax of the ''toggle()'' expression is:
 
@@ -1262,17 +1271,24 @@ <h3 id="toggle-notation">
 		and that doesn't contain any top-level commas.
 		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 because toggled values are separated by commas,
-		they cannot themselves include top-level commas.
+		The ''toggle()'' expression may be used as the value of any property,
+		but must be the only component in that property's value.
 
 	<p>
 		The ''toggle()'' notation is not allowed to be nested; nor may it
 		contain ''attr()'' or ''calc()'' notations.
-		Declarations containing such constructs are invalid.</p>
+		Declarations containing such constructs are invalid.
+
+	<div class="example">
+		The following ''toggle()'' examples are all invalid:
+
+		<pre>
+background-position: 10px toggle(50px, 100px);
+/* toggle() must be the sole value of the property */
+
+list-style-type: toggle(disc, 50px);
+/* ''50px'' isn't a valid value of 'list-style-type' */</pre>
+	</div>
 
 	<p>
 		To determine the computed value of ''toggle()'',
@@ -1287,17 +1303,6 @@ <h3 id="toggle-notation">
 		or there was no match,
 		the computed value of ''toggle()'' is the computed value that the first argument represents.
 
-	<div class='example'>
-		<p>The following example cycles markers for nested lists,
-		so that a top level list has <code>disc</code>-shaped markers,
-		but nested lists use <code>circle</code>, then <code>square</code>, then <code>box</code>,
-		and then repeat through the list of marker shapes,
-		starting again (for the 5th list deep) with <code>disc</code>.
-		<pre>
-  ul { list-style-type: disc; }
-  ul ul { list-style-type: toggle(disc, circle, square, box); }</pre>
-		</div>
-
 	<p class='note'>
 		Note that ''toggle()'' explicitly looks at the computed value of the parent,
 		so it works even on non-inherited properties.