Write the illegal example I wanted for @supports.

Author: dbaron

css3-conditional/Overview.html

@@ -639,11 +639,39 @@ <h2 id=at-supports><span class=secno>5. </span>Feature queries: the
 }</pre>
   </div>
 
-  <p>To avoid confusion between and and or, the syntax requires that both and
-   and or be specified explicitly (rather than, say, using commas or spaces
-   for one of them). Likewise, to avoid confusion caused by precedence rules,
-   the syntax does not allow and, or, and not operators to be mixed without a
-   layer of parentheses. <span class=issue>Add examples.</span>
+  <p>To avoid confusion between &lsquo;<code class=css>and</code>&rsquo; and
+   &lsquo;<code class=css>or</code>&rsquo;, the syntax requires that both
+   &lsquo;<code class=css>and</code>&rsquo; and &lsquo;<code
+   class=css>or</code>&rsquo; be specified explicitly (rather than, say,
+   using commas or spaces for one of them). Likewise, to avoid confusion
+   caused by precedence rules, the syntax does not allow &lsquo;<code
+   class=css>and</code>&rsquo;, &lsquo;<code class=css>or</code>&rsquo;, and
+   &lsquo;<code class=css>not</code>&rsquo; operators to be mixed without a
+   layer of parentheses.
+
+  <div class=example>
+   <p>For example, the following rule is not valid:
+
+   <pre class=illegal-example>@supports (transition-property: color) or
+          (animation-name: foo) and
+          (transform: rotate(10deg)) {
+  // ...
+}</pre>
+
+   <p>Instead, authors must write one of the following:</p>
+
+   <pre>@supports ((transition-property: color) or
+           (animation-name: foo)) and
+          (transform: rotate(10deg)) {
+  // ...
+}</pre>
+
+   <pre>@supports (transition-property: color) or
+          ((animation-name: foo)) and
+           (transform: rotate(10deg))) {
+  // ...
+}</pre>
+  </div>
 
   <h2 id=at-document><span class=secno>6. </span>Document queries: the
    &lsquo;<code class=css>@document</code>&rsquo; rule</h2>

css3-conditional/Overview.src.html

@@ -457,13 +457,31 @@ <h2 id="at-supports">Feature queries: the '@supports' rule</h2>
   }
 }</pre></div>
 
-<p>To avoid confusion between and and or, the syntax requires that both
-and and or be specified explicitly (rather than, say, using commas or
-spaces for one of them).  Likewise, to avoid confusion caused by
-precedence rules, the syntax does not allow and, or, and not operators
-to be mixed without a layer of parentheses.  <span class="issue">Add
-examples.</span></p>
+<p>To avoid confusion between ''and'' and ''or'', the syntax requires
+that both ''and'' and ''or'' be specified explicitly (rather than, say,
+using commas or spaces for one of them).  Likewise, to avoid confusion
+caused by precedence rules, the syntax does not allow ''and'', ''or'',
+and ''not'' operators to be mixed without a layer of parentheses.</p>
 
+<div class="example">
+<p>For example, the following rule is not valid:
+<pre class="illegal-example">@supports (transition-property: color) or
+          (animation-name: foo) and
+          (transform: rotate(10deg)) {
+  // ...
+}</pre>
+<p>Instead, authors must write one of the following:</p>
+<pre>@supports ((transition-property: color) or
+           (animation-name: foo)) and
+          (transform: rotate(10deg)) {
+  // ...
+}</pre>
+<pre>@supports (transition-property: color) or
+          ((animation-name: foo)) and
+           (transform: rotate(10deg))) {
+  // ...
+}</pre>
+</div>
 
 <h2 id="at-document">Document queries: the '@document' rule</h2>