Edits from F2F resolutions:

  - Add 'content-box' value to 'background-clip'
  - Allow 'background' shorthand to set both 'background-origin' and
    'background-clip' as <box-keyword>{1,2} (one value sets both)
  - Require bg-pos immediately before / bg-size.

Author: fantasai

css3-background/Overview.html

@@ -1158,7 +1158,8 @@ <h3 id=the-background-clip><span class=secno>3.7. </span>The &lsquo;<code
     <tr>
      <th>Value:
 
-     <td>[border-box | padding-box ] [ , [border-box | padding-box ] ]*
+     <td><var><a href="#ltboxgt">&lt;box&gt;</a></var> [ , <var><a
+      href="#ltboxgt">&lt;box&gt;</a></var> ]*
 
     <tr>
      <th>Initial:
@@ -1192,19 +1193,30 @@ <h3 id=the-background-clip><span class=secno>3.7. </span>The &lsquo;<code
   </table>
 
   <p>Determines the <dfn id=background-painting-area>background painting
-   area</dfn>. Values have the following meanings:
+   area</dfn>. The syntax of the property is given with
+
+  <pre
+   class=prod><dfn id=ltboxgt><var>&lt;box&gt;</var></dfn> = border-box | padding-box | content-box</pre>
+
+  <p>Values have the following meanings:
 
   <dl>
+   <dt><dfn id=border-box title="''border-box''!!'background-clip' value">
+    &lsquo;<code class=css>border-box</code>&rsquo;</dfn>
+
+   <dd>The background is painted within (clipped to) the <span>border
+    box.</span>
+
    <dt><dfn id=padding-box title="''padding-box''!!'background-clip' value">
     &lsquo;<code class=css>padding-box</code>&rsquo;</dfn>
 
    <dd>The background is painted within (clipped to) the <span>padding
     box.</span>
 
-   <dt><dfn id=border-box title="''border-box''!!'background-clip' value">
-    &lsquo;<code class=css>border-box</code>&rsquo;</dfn>
+   <dt><dfn id=content-box title="''content-box''!!'background-clip' value">
+    &lsquo;<code class=css>content-box</code>&rsquo;</dfn>
 
-   <dd>The background is painted within (clipped to) the <span>border
+   <dd>The background is painted within (clipped to) the <span>content
     box.</span>
   </dl>
 
@@ -1236,8 +1248,8 @@ <h3 id=the-background-origin><span class=secno>3.8. </span>The &lsquo;<code
     <tr>
      <th>Value:
 
-     <td><var><a href="#ltbg-origingt">&lt;bg-origin&gt;</a></var> [ ,
-      <var><a href="#ltbg-origingt">&lt;bg-origin&gt;</a></var> ]*
+     <td><var><a href="#ltboxgt">&lt;box&gt;</a></var> [ , <var><a
+      href="#ltboxgt">&lt;box&gt;</a></var> ]*
 
     <tr>
      <th>Initial:
@@ -1276,10 +1288,7 @@ <h3 id=the-background-origin><span class=secno>3.8. </span>The &lsquo;<code
    boxes on several pages) specifies which boxes &lsquo;<code
    class=property><a
    href="#box-decoration-break">box-decoration-break</a></code>&rsquo;
-   operates on to determine the background positioning area(s). Where
-
-  <pre
-   class=prod><dfn id=ltbg-origingt><var>&lt;bg-origin&gt;</var></dfn> = border-box | padding-box | content-box</pre>
+   operates on to determine the background positioning area(s).
 
   <dl>
    <dt><dfn id=padding-box0 title="''padding-box''!!'background-origin'
@@ -1295,7 +1304,7 @@ <h3 id=the-background-origin><span class=secno>3.8. </span>The &lsquo;<code
 
    <dd>The position is relative to the border box.
 
-   <dt><dfn id=content-box>&lsquo;<code
+   <dt><dfn id=content-box0>&lsquo;<code
     class=css>content-box</code>&rsquo;</dfn>
 
    <dd>The position is relative to the content box.
@@ -1636,22 +1645,10 @@ <h3 id=the-background><span class=secno>3.10. </span>The &lsquo;<code
   <p>Where
 
   <pre
-   class=prod><dfn id=ltbg-layergt><var>&lt;bg-layer&gt;</var></dfn> = <var><a href="#ltbg-imagegt">&lt;bg-image&gt;</a></var> || <var><a href="#ltbg-positiongt">&lt;bg-position&gt;</a></var> || / <var><a href="#ltbg-sizegt">&lt;bg-size&gt;</a></var> || <var><a href="#ltrepeat-stylegt">&lt;repeat-style&gt;</a></var> || <var><a href="#ltattachmentgt">&lt;attachment&gt;</a></var> || <var><a href="#ltbg-origingt">&lt;bg-origin&gt;</a></var> </pre>
-
-  <p>where &lsquo;<code class=css><a
-   href="#ltbg-positiongt"><var>&lt;bg-position&gt;</var></a></code>&rsquo;
-   must occur before &lsquo;<code class=css>/ <var><a
-   href="#ltbg-sizegt">&lt;bg-size&gt;</a></var></code>&rsquo; if both are
-   present.
+   class=prod><dfn id=ltbg-layergt><var>&lt;bg-layer&gt;</var></dfn> = <var><a href="#ltbg-imagegt">&lt;bg-image&gt;</a></var> || <var><a href="#ltbg-positiongt">&lt;bg-position&gt;</a></var> [ / <var><a href="#ltbg-sizegt">&lt;bg-size&gt;</a></var> ]? || <var><a href="#ltrepeat-stylegt">&lt;repeat-style&gt;</a></var> || <var><a href="#ltattachmentgt">&lt;attachment&gt;</a></var> || <var><a href="#ltboxgt">&lt;box&gt;</a></var>{1,2} </pre>
 
   <pre
-   class=prod><dfn id=ltfinal-bg-layergt><var>&lt;final-bg-layer&gt;</var></dfn> = <var><a href="#ltbg-imagegt">&lt;bg-image&gt;</a></var> || <var><a href="#ltbg-positiongt">&lt;bg-position&gt;</a></var> || / <var><a href="#ltbg-sizegt">&lt;bg-size&gt;</a></var> || <var><a href="#ltrepeat-stylegt">&lt;repeat-style&gt;</a></var> || <var><a href="#ltattachmentgt">&lt;attachment&gt;</a></var> || <var><a href="#ltbg-origingt">&lt;bg-origin&gt;</a></var> || <var>&lt;'background-color'&gt;</var></pre>
-
-  <p>where &lsquo;<code class=css><a
-   href="#ltbg-positiongt"><var>&lt;bg-position&gt;</var></a></code>&rsquo;
-   must occur before &lsquo;<code class=css>/ <var><a
-   href="#ltbg-sizegt">&lt;bg-size&gt;</a></var></code>&rsquo; if both are
-   present.
+   class=prod><dfn id=ltfinal-bg-layergt><var>&lt;final-bg-layer&gt;</var></dfn> = <var><a href="#ltbg-imagegt">&lt;bg-image&gt;</a></var> || <var><a href="#ltbg-positiongt">&lt;bg-position&gt;</a></var> [ / <var><a href="#ltbg-sizegt">&lt;bg-size&gt;</a></var> ]? || <var><a href="#ltrepeat-stylegt">&lt;repeat-style&gt;</a></var> || <var><a href="#ltattachmentgt">&lt;attachment&gt;</a></var> || <var><a href="#ltboxgt">&lt;box&gt;</a></var>{1,2} || <var>&lt;'background-color'&gt;</var></pre>
 
   <p class=note>Note that a color is permitted in <var><a
    href="#ltfinal-bg-layergt">&lt;final-bg-layer&gt;</a></var>, but not in
@@ -1679,17 +1676,16 @@ <h3 id=the-background><span class=secno>3.10. </span>The &lsquo;<code
    href="#background-image">background-image</a></code>&rsquo; to its initial
    value, then assigns explicit values given in the declaration.
 
-  <p>If <var><a href="#ltbg-origingt">&lt;bg-origin&gt;</a></var> is present
-   and its value matches a possible value for &lsquo;<code class=property><a
-   href="#background-clip">background-clip</a></code>&rsquo; then it also
-   sets &lsquo;<code class=property><a
-   href="#background-clip">background-clip</a></code>&rsquo; to that value.
-   For example, &lsquo;<code class=css>background: border-box</code>&rsquo;
-   sets both &lsquo;<code class=property><a
+  <p>If one <var><a href="#ltboxgt">&lt;box&gt;</a></var> value is present
+   then it sets both &lsquo;<code class=property><a
    href="#background-origin">background-origin</a></code>&rsquo; and
    &lsquo;<code class=property><a
-   href="#background-clip">background-clip</a></code>&rsquo; to &lsquo;<code
-   class=css>border-box</code>&rsquo;.
+   href="#background-clip">background-clip</a></code>&rsquo; to that value.
+   If two values are present, then the first sets &lsquo;<code
+   class=property><a
+   href="#background-origin">background-origin</a></code>&rsquo; and the
+   second &lsquo;<code class=property><a
+   href="#background-clip">background-clip</a></code>&rsquo;.
 
   <div class=example>
    <p style="display:none">Examples:
@@ -4086,7 +4082,7 @@ <h2 class=no-num id=property-index>Property index</h2>
     <tr valign=baseline>
      <td><a class=property href="#background-clip">background-clip</a>
 
-     <td>[border-box | padding-box ] [ , [border-box | padding-box ] ]*
+     <td>&lt;box&gt; [ , &lt;box&gt; ]*
 
      <td>border-box
 
@@ -4131,7 +4127,7 @@ <h2 class=no-num id=property-index>Property index</h2>
     <tr valign=baseline>
      <td><a class=property href="#background-origin">background-origin</a>
 
-     <td>&lt;bg-origin&gt; [ , &lt;bg-origin&gt; ]*
+     <td>&lt;box&gt; [ , &lt;box&gt; ]*
 
      <td>padding-box
 
@@ -4557,10 +4553,6 @@ <h2 class=no-num id=index>Index</h2>
    <li><var><a href="#ltbg-layergt">&lt;bg-layer&gt;</a></var>, <a
     href="#ltbg-layergt" title="&lt;bg-layer&gt;"><strong>3.10.</strong></a>
 
-   <li><var><a href="#ltbg-origingt">&lt;bg-origin&gt;</a></var>, <a
-    href="#ltbg-origingt" title="&lt;bg-origin&gt;"><strong>3.8.</strong></a>
-    
-
    <li><var><a href="#ltbg-positiongt">&lt;bg-position&gt;</a></var>, <a
     href="#ltbg-positiongt"
     title="&lt;bg-position&gt;"><strong>3.6.</strong></a>
@@ -4692,6 +4684,9 @@ <h2 class=no-num id=index>Index</h2>
       value"><strong>3.6.</strong></a>
     </ul>
 
+   <li><var><a href="#ltboxgt">&lt;box&gt;</a></var>, <a href="#ltboxgt"
+    title="&lt;box&gt;"><strong>3.7.</strong></a>
+
    <li>box-decoration-break, <a href="#box-decoration-break"
     title=box-decoration-break><strong>6.1.</strong></a>
 
@@ -4719,7 +4714,13 @@ <h2 class=no-num id=index>Index</h2>
     title="''contain''"><strong>3.9.</strong></a>
 
    <li>&lsquo;<code class=css>content-box</code>&rsquo;, <a
-    href="#content-box" title="''content-box''"><strong>3.8.</strong></a>
+    href="#content-box0" title="''content-box''"><strong>3.8.</strong></a>
+    <ul>
+     <li>&lsquo;<code class=property><a
+      href="#background-clip">background-clip</a></code>&rsquo; value, <a
+      href="#content-box" title="''content-box'', 'background-clip'
+      value"><strong>3.7.</strong></a>
+    </ul>
 
    <li>&lsquo;<code class=css>cover</code>&rsquo;, <a href="#cover"
     title="''cover''"><strong>3.9.</strong></a>

css3-background/Overview.src.html

@@ -761,8 +761,7 @@ <h3 id="the-background-clip">The 'background-clip' property</h3>
       <td><dfn>background-clip</dfn>
     <tr>
       <th>Value:
-      <td>[border-box | padding-box ]
-      [ , [border-box | padding-box ] ]*
+      <td><var>&lt;box&gt;</var> [ , <var>&lt;box&gt;</var> ]*
     <tr>
       <th>Initial:
       <td>border-box
@@ -784,17 +783,25 @@ <h3 id="the-background-clip">The 'background-clip' property</h3>
 </table>
 
 <p>Determines the <dfn id="background-painting-area">background painting
-area</dfn>. Values have the following meanings:
+area</dfn>. The syntax of the property is given with
+
+<pre class=prod><dfn><var>&lt;box&gt;</var></dfn> = border-box | padding-box | content-box</pre>
+
+<p>Values have the following meanings:
 
 <dl>
+  <dt><dfn title="''border-box''!!'background-clip' value">
+      ''border-box''</dfn></dt>
+  <dd>The background is painted within (clipped to) the
+    <span>border box.</span>
   <dt><dfn title="''padding-box''!!'background-clip' value">
       ''padding-box''</dfn></dt>
   <dd>The background is painted within (clipped to) the
     <span>padding box.</span>
-  <dt><dfn title="''border-box''!!'background-clip' value">
-      ''border-box''</dfn></dt>
+  <dt><dfn title="''content-box''!!'background-clip' value">
+      ''content-box''</dfn></dt>
   <dd>The background is painted within (clipped to) the
-    <span>border box.</span>
+    <span>content box.</span>
 </dl>
 
 <p class=note>Note that the root element has a different background
@@ -820,8 +827,8 @@ <h3 id="the-background-origin">The 'background-origin' property</h3>
       <td><dfn>background-origin</dfn>
     <tr>
       <th>Value:
-      <td><var>&lt;bg-origin&gt;</var>
-        [ , <var>&lt;bg-origin&gt;</var> ]*
+      <td><var>&lt;box&gt;</var>
+        [ , <var>&lt;box&gt;</var> ]*
     <tr>
       <th>Initial:
       <td>padding-box
@@ -846,9 +853,7 @@ <h3 id="the-background-origin">The 'background-origin' property</h3>
 <dfn id="background-positioning-area">background positioning area</dfn>.
 For elements rendered as multiple boxes (e.g., inline boxes on several
 lines, boxes on several pages) specifies which boxes 'box-decoration-break'
-operates on to determine the background positioning area(s). Where
-
-<pre class=prod><dfn><var>&lt;bg-origin&gt;</var></dfn> = border-box | padding-box | content-box</pre>
+operates on to determine the background positioning area(s).
 
 <dl>
   <dt><dfn title="''padding-box''!!'background-origin' value">
@@ -1137,15 +1142,9 @@ <h3 id="the-background">The 'background' shorthand property</h3>
 
 <p>Where
 
-<pre class=prod><dfn><var>&lt;bg-layer&gt;</var></dfn> = <var>&lt;bg-image&gt;</var> || <var>&lt;bg-position&gt;</var> || / <var>&lt;bg-size&gt;</var> || <var>&lt;repeat-style&gt;</var> || <var>&lt;attachment&gt;</var> || <var>&lt;bg-origin&gt;</var> </pre>
-
-<p>where ''<var>&lt;bg-position&gt;</var>'' must occur before
-''/ <var>&lt;bg-size&gt;</var>'' if both are present.
-
-<pre class=prod><dfn><var>&lt;final-bg-layer&gt;</var></dfn> = <var>&lt;bg-image&gt;</var> || <var>&lt;bg-position&gt;</var> || / <var>&lt;bg-size&gt;</var> || <var>&lt;repeat-style&gt;</var> || <var>&lt;attachment&gt;</var> || <var>&lt;bg-origin&gt;</var> || <var>&lt;'background-color'&gt;</var></pre>
+<pre class=prod><dfn><var>&lt;bg-layer&gt;</var></dfn> = <var>&lt;bg-image&gt;</var> || <var>&lt;bg-position&gt;</var> [ / <var>&lt;bg-size&gt;</var> ]? || <var>&lt;repeat-style&gt;</var> || <var>&lt;attachment&gt;</var> || <var>&lt;box&gt;</var>{1,2} </pre>
 
-<p>where ''<var>&lt;bg-position&gt;</var>'' must occur before
-''/ <var>&lt;bg-size&gt;</var>'' if both are present.
+<pre class=prod><dfn><var>&lt;final-bg-layer&gt;</var></dfn> = <var>&lt;bg-image&gt;</var> || <var>&lt;bg-position&gt;</var> [ / <var>&lt;bg-size&gt;</var> ]? || <var>&lt;repeat-style&gt;</var> || <var>&lt;attachment&gt;</var> || <var>&lt;box&gt;</var>{1,2} || <var>&lt;'background-color'&gt;</var></pre>
 
 <p class=note>Note that a color is permitted in
 <var>&lt;final-bg-layer&gt;</var>, but not in <var>&lt;bg-layer&gt;</var>.
@@ -1164,10 +1163,10 @@ <h3 id="the-background">The 'background' shorthand property</h3>
 'background-image' to its initial value, then assigns explicit values
 given in the declaration.
 
-<p>If <var>&lt;bg-origin&gt;</var> is present and its value matches a possible
-value for 'background-clip' then it also sets 'background-clip' to
-that value. For example, ''background: border-box'' sets both
-'background-origin' and 'background-clip' to ''border-box''.
+<p>If one <var>&lt;box&gt;</var> value is present then it sets
+both 'background-origin' and 'background-clip' to that value.
+If two values are present, then the first sets 'background-origin'
+and the second 'background-clip'.
 
 <div class="example">
 <p style="display:none">Examples: