Resolve ambiguity in transform-origin syntax

As resolved in bug: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15432

Author: ayg

css3-transforms/Overview.html

@@ -1510,12 +1510,16 @@ <h2 id=transform-origin-property><span class=secno>8. </span> The &lsquo;<a
     <tr>
      <td> <em>Value:</em>
 
-     <td> [ top | bottom ] |<br>
-      [ &lt;percentage> | &lt;length&gt; | left | center | right ] [
-      &lt;percentage> | &lt;length&gt; | top | center | bottom ]? |<br>
-      [ center | [ left | right ] [ &lt;percentage> | &lt;length&gt; ]? ]
-      &amp;&amp; [ center | [ top | bottom ] [ &lt;percentage> |
-      &lt;length&gt; ]? ]<br>
+     <td> [ &lt;percentage> | &lt;length> | left | center | right | top |
+      bottom]<br>
+      |<br>
+      [<br>
+      &nbsp;&nbsp;[ &lt;percentage> | &lt;length&gt; | left | center | right
+      ]<br>
+      &nbsp;&nbsp;&amp;&amp;<br>
+      &nbsp;&nbsp;[ &lt;percentage> | &lt;length&gt; | top | center | bottom
+      ]<br>
+      ] &lt;length&gt;?<br>
 
     <tr>
      <td> <em>Initial:</em>
@@ -1557,37 +1561,22 @@ <h2 id=transform-origin-property><span class=secno>8. </span> The &lsquo;<a
    matrix</i></a>, as described above.
 
   <p>If only one value is specified, the second value is assumed to be
-   &lsquo;<code class=property>center</code>&rsquo;. If two values are given
-   and at least one value is not a keyword, then the first value represents
-   the horizontal position (or offset) and the second represents the vertical
-   position (or offset). <var>&lt;percentage&gt;</var> and
-   <var>&lt;length&gt;</var> values here represent an offset of the transform
-   origin from the top left corner of the element's bounding box.
+   &lsquo;<code class=property>center</code>&rsquo;. If one or two values are
+   specified, the third value is assumed to be &lsquo;<code
+   class=css>0px</code>&rsquo;.
+
+  <p>If at least one of the first two values is not a keyword, then the first
+   value represents the horizontal position (or offset) and the second
+   represents the vertical position (or offset). The third value always
+   represents the Z position (or offset).
+
+  <p><var>&lt;percentage&gt;</var> and <var>&lt;length&gt;</var> for the
+   first two values represent an offset of the transform origin from the top
+   left corner of the element's bounding box.
 
   <p>For SVG elements without an associated CSS layout box the
    <var>&lt;length&gt;</var> values represent an offset from the point of
-   origin of the element's local coordinate space.
-
-  <p>If three or four values are given, then each
-   <var>&lt;percentage&gt;</var> or<var>&lt;length&gt;</var> represents an
-   offset and must be preceded by a keyword, which specifies from which edge
-   of the bounding box the offset is given. For example, &lsquo;<code
-   class=css>transform-origin: bottom 10px right 20px</code>&rsquo;
-   represents a &lsquo;<code class=css>10px</code>&rsquo; vertical offset up
-   from the bottom edge and a &lsquo;<code class=css>20px</code>&rsquo;
-   horizontal offset leftward from the right edge. If three values are given,
-   the missing offset is assumed to be zero.
-
-  <p>Positive values represent an offset <em>inward</em> from the edge of the
-   bounding box. Negative values represent an offset <em>outward</em> from
-   the edge of the bounding box.
-
-  <div class=issue>
-   <p class=desc>Need to add 3D transform-origin variant in a way that is not
-    ambiguous with the background-origin syntax (<a
-    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15432">bug
-    15432</a>).</p>
-  </div>
+   origin of the element's local coordinate space.</p>
   <!-- ======================================================================================================= -->
 
   <h2 id=transform-style-property><span class=secno>9. </span> The &lsquo;<a
@@ -2570,11 +2559,10 @@ <h2 class=no-num id=property-index>Property index</h2>
     <tr>
      <th><a class=property href="#transform-origin">transform-origin</a>
 
-     <td>[ top | bottom ] | [ &lt;percentage> | &lt;length&gt; | left |
-      center | right ] [ &lt;percentage> | &lt;length&gt; | top | center |
-      bottom ]? | [ center | [ left | right ] [ &lt;percentage> |
-      &lt;length&gt; ]? ] &amp;&amp; [ center | [ top | bottom ] [
-      &lt;percentage> | &lt;length&gt; ]? ]
+     <td>[ &lt;percentage> | &lt;length> | left | center | right | top |
+      bottom] | [ &nbsp;&nbsp;[ &lt;percentage> | &lt;length&gt; | left |
+      center | right ] &nbsp;&nbsp;&amp;&amp; &nbsp;&nbsp;[ &lt;percentage> |
+      &lt;length&gt; | top | center | bottom ] ] &lt;length&gt;?
 
      <td>0 0 for SVG elements without associated CSS layout box, 50% 50% for
       all other elements

css3-transforms/Transforms.src.html

@@ -1045,9 +1045,13 @@ <h2 id="transform-origin-property">
                       <em>Value:</em>
                     </td>
                     <td>
-            [ top | bottom ] |<br>
-            [ &lt;percentage> | &lt;length&gt; | left | center | right ] [ &lt;percentage> | &lt;length&gt; | top | center | bottom ]? |<br>
-            [ center | [ left | right ] [ &lt;percentage> | &lt;length&gt; ]? ] &amp;&amp; [ center | [ top | bottom ] [ &lt;percentage> | &lt;length&gt; ]? ]<br>
+            [ &lt;percentage> | &lt;length> | left | center | right | top | bottom]<br>
+            |<br>
+            [<br>
+            &nbsp;&nbsp;[ &lt;percentage> | &lt;length&gt; | left | center | right ]<br>
+            &nbsp;&nbsp;&amp;&amp;<br>
+            &nbsp;&nbsp;[ &lt;percentage> | &lt;length&gt; | top | center | bottom ]<br>
+            ] &lt;length&gt;?<br>
                     </td>
                   </tr>
                   <tr>
@@ -1108,38 +1112,25 @@ <h2 id="transform-origin-property">
               </p>
 
               <p>If only one value is specified, the second value is assumed to be
-              'center'. If two values are given and at least one value is not a keyword,
-              then the first value represents the horizontal position (or offset) and
-              the second represents the vertical position (or
-              offset). <var>&lt;percentage&gt;</var> and <var>&lt;length&gt;</var>
-              values here represent an offset of the transform origin from the top left corner
-              of the element's bounding box.
+              'center'. If one or two values are specified, the third value is
+              assumed to be '0px'.
               </p>
 
-              <p>For SVG elements without an associated CSS layout box the <var>&lt;length&gt;</var>
-              values represent an offset from the point of origin of the element's local coordinate space.
+              <p>If at least one of the first two values is not a keyword, then
+              the first value represents the horizontal position (or offset)
+              and the second represents the vertical position (or offset).  The
+              third value always represents the Z position (or offset).
               </p>
 
-              <p>If three or four values are given, then
-              each <var>&lt;percentage&gt;</var> or<var>&lt;length&gt;</var>
-              represents an offset and must be preceded by a keyword,
-              which specifies from which edge of the bounding box the offset is given. For example,
-              ''transform-origin: bottom 10px right 20px'' represents a
-              ''10px'' vertical offset up from the bottom edge and a
-              ''20px'' horizontal offset leftward from the right edge. If
-              three values are given, the missing offset is assumed to be zero.
+              <p><var>&lt;percentage&gt;</var> and <var>&lt;length&gt;</var>
+              for the first two values represent an offset of the transform
+              origin from the top left corner of the element's bounding box.
               </p>
 
-              <p>Positive values represent an offset <em>inward</em> from the edge of
-              the bounding box. Negative values represent an offset
-              <em>outward</em> from the edge of the bounding box.
+              <p>For SVG elements without an associated CSS layout box the <var>&lt;length&gt;</var>
+              values represent an offset from the point of origin of the element's local coordinate space.
               </p>
 
-              <div class="issue">
-                <p class="desc">Need to add 3D transform-origin variant in a way that is not ambiguous
-                  with the background-origin syntax (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15432">bug 15432</a>).</p>
-              </div>
-
               <!-- ======================================================================================================= -->
 
               <h2 id="transform-style-property">