Add defintions for keywords on 'transform-origin' and 'perspective-origin'.

Author: dirkschulze

css3-transforms/ChangeLog

@@ -1,3 +1,6 @@
+2012-11-13 dschulze@adobe.com
+    Add defintions for keywords on 'transform-origin' and 'perspective-origin'.
+
 2012-11-05 dschulze@adobe.com
     Clarify multiplication order.
 

css3-transforms/Overview.html

@@ -12,11 +12,11 @@
    rel=dcterms.rights>
   <meta content="CSS Transforms" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2012-11-05 name=dcterms.issued>
+  <meta content=2012-11-13 name=dcterms.issued>
   <meta content="http://dev.w3.org/csswg/css3-transforms/"
    name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
-  <meta content="http://www.w3.org/TR/2012/ED-css3-transforms-20121105/"
+  <meta content="http://www.w3.org/TR/2012/ED-css3-transforms-20121113/"
    name=dcterms.identifier>
   <link href="../default.css" rel=stylesheet type="text/css">
   <script defer=defer
@@ -37,15 +37,15 @@
 
    <h1>CSS Transforms</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 5 November
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 13 November
     2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd> <a
-     href="http://www.w3.org/TR/2012/ED-css3-transforms-20121105/">http://dev.w3.org/csswg/css3-transforms/</a>
-     <!--http://www.w3.org/TR/2012/WD-css3-transforms-20121105/-->
+     href="http://www.w3.org/TR/2012/ED-css3-transforms-20121113/">http://dev.w3.org/csswg/css3-transforms/</a>
+     <!--http://www.w3.org/TR/2012/WD-css3-transforms-20121113/-->
 
     <dt>Latest version:
 
@@ -1345,8 +1345,8 @@ <h2 id=transform-property><span class=secno>7. </span> The ‘<a
     <tr>
      <td> <em>Percentages:</em>
 
-     <td> refer to the size of the element's <a
-      href="#TermBoundingBox">bounding box</a>
+     <td> refer to the size of <a href="#bounding-box"><var>bounding
+      box</var></a>
 
     <tr>
      <td> <em>Media:</em>
@@ -1407,8 +1407,8 @@ <h2 id=transform-origin-property><span class=secno>8. </span> The ‘<a
     <tr>
      <td> <em>Percentages:</em>
 
-     <td> refer to the size of the element's <a
-      href="#TermBoundingBox">bounding box</a>
+     <td> refer to the size of <a href="#bounding-box"><var>bounding
+      box</var></a>
 
     <tr>
      <td> <em>Media:</em>
@@ -1442,13 +1442,59 @@ <h2 id=transform-origin-property><span class=secno>8. </span> The ‘<a
    represents the Z position (or offset) and must be of type
    <var>&lt;length&gt;</var>.
 
-  <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 <a href="#TermBoundingBox">bounding box</a>.
+  <dl>
+   <dt><var>&lt;percentage&gt;</var>
+
+   <dd>
+    <p>A percentage for the horizontal offset is relative to the width of the
+     <a href="#bounding-box"><var>bounding box</var></a>. A percentage for
+     the vertical offset is relative to height of the <a
+     href="#bounding-box"><var>bounding box</var></a>. The value for the
+     horizontal and vertical offset represent an offset from the top left
+     corner of the <a href="#bounding-box"><var>bounding box</var></a>.
+
+   <dt><var>&lt;length&gt;</var>
+
+   <dd>
+    <p>A length value gives a fixed length as the offset. The value for the
+     horizontal and vertical offset represent an offset from the top left
+     corner of the <a href="#bounding-box"><var>bounding box</var></a>.
+
+    <p>For SVG elements without an associated CSS layout box the horizontal
+     and vertical offset represent an offset from the point of origin of the
+     element's local coordinate space.
+
+   <dt><dfn id=top title="''top''!!'transform-origin' value">‘<code
+    class=css>top</code>’</dfn>
+
+   <dd>Computes to ‘<code class=css>0%</code>’ for the vertical position.
+
+   <dt><dfn id=right title="''right''!!'transform-origin' value">‘<code
+    class=css>right</code>’</dfn>
+
+   <dd>Computes to ‘<code class=css>100%</code>’ for the horizontal
+    position.
+
+   <dt><dfn id=bottom title="''bottom''!!'transform-origin' value">‘<code
+    class=css>bottom</code>’</dfn>
+
+   <dd>Computes to ‘<code class=css>100%</code>’ for the vertical
+    position.
 
-  <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.
+   <dt><dfn id=left title="''left''!!'transform-origin' value">‘<code
+    class=css>left</code>’</dfn>
+
+   <dd>Computes to ‘<code class=css>0%</code>’ for the horizontal
+    position.
+
+   <dt><dfn id=center title="''center''!!'transform-origin' value">‘<code
+    class=css>center</code>’</dfn>
+
+   <dd>Computes to ‘<code class=css>50%</code>’ (‘<code class=css>left
+    50%</code>’) for the horizontal position if the horizontal position is
+    not otherwise specified, or ‘<code class=css>50%</code>’ (‘<code
+    class=css>top 50%</code>’) for the vertical position if it is.
+  </dl>
 
   <p> The <a href="http://www.w3.org/TR/cssom/#resolved-value">resolved
    value</a> of ‘<a href="#transform-origin"><code
@@ -1647,8 +1693,8 @@ <h2 id=perspective-origin-property><span class=secno>11. </span> The ‘<a
     <tr>
      <td> <em>Percentages:</em>
 
-     <td> refer to the size of the element's <a
-      href="#TermBoundingBox">bounding box</a>
+     <td> refer to the size of the <a href="#bounding-box"><var>bounding
+      box</var></a>
 
     <tr>
      <td> <em>Media:</em>
@@ -1675,9 +1721,62 @@ <h2 id=perspective-origin-property><span class=secno>11. </span> The ‘<a
    value represents the horizontal position (or offset) and the second
    represents the vertical position (or offset).
 
-  <p> <var>&lt;percentage&gt;</var> and <var>&lt;length&gt;</var> values
-   represent an offset of the perspective origin from the top left corner of
-   the element's <a class=term href="#bounding-box">bounding box</a>.
+  <p> The values for ‘<a href="#perspective-origin"><code
+   class=property>perspective-origin</code></a>’ represent an offset of the
+   perspective origin from the top left corner of the <a
+   href="#bounding-box"><var>bounding box</var></a>.
+
+  <dl>
+   <dt><var>&lt;percentage&gt;</var>
+
+   <dd>
+    <p>A percentage for the horizontal perspctive offset is relative to the
+     width of the <a href="#bounding-box"><var>bounding box</var></a>. A
+     percentage for the vertical offset is relative to height of the <a
+     href="#bounding-box"><var>bounding box</var></a>. The value for the
+     horizontal and vertical offset represent an offset from the top left
+     corner of the <a href="#bounding-box"><var>bounding box</var></a>.
+
+   <dt><var>&lt;length&gt;</var>
+
+   <dd>
+    <p>A length value gives a fixed length as the offset. The value for the
+     horizontal and vertical offset represent an offset from the top left
+     corner of the <a href="#bounding-box"><var>bounding box</var></a>.
+
+   <dt><dfn id=top0 title="''top''!!'perspective-origin' value">‘<code
+    class=css>top</code>’</dfn>
+
+   <dd>Computes to ‘<code class=css>0%</code>’ for the vertical position.
+
+   <dt><dfn id=right0 title="''right''!!'perspective-origin' value">‘<code
+    class=css>right</code>’</dfn>
+
+   <dd>Computes to ‘<code class=css>100%</code>’ for the horizontal
+    position.
+
+   <dt><dfn id=bottom0
+    title="''bottom''!!'perspective-origin' value">‘<code
+    class=css>bottom</code>’</dfn>
+
+   <dd>Computes to ‘<code class=css>100%</code>’ for the vertical
+    position.
+
+   <dt><dfn id=left0 title="''left''!!'perspective-origin' value">‘<code
+    class=css>left</code>’</dfn>
+
+   <dd>Computes to ‘<code class=css>0%</code>’ for the horizontal
+    position.
+
+   <dt><dfn id=center0
+    title="''center''!!'perspective-origin' value">‘<code
+    class=css>center</code>’</dfn>
+
+   <dd>Computes to ‘<code class=css>50%</code>’ (‘<code class=css>left
+    50%</code>’) for the horizontal position if the horizontal position is
+    not otherwise specified, or ‘<code class=css>50%</code>’ (‘<code
+    class=css>top 50%</code>’) for the vertical position if it is.
+  </dl>
 
   <p> The <a href="http://www.w3.org/TR/cssom/#resolved-value">resolved
    value</a> of ‘<a href="#perspective-origin"><code
@@ -2048,7 +2147,7 @@ <h3 id=svg-user-coordinate-space><span class=secno>13.6. </span> User
    values in the current user coordinate system of the parent. All percentage
    values of the ‘<a href="#effects"><code
    class=property>transform</code></a>’ presentation attribute are relative
-   to the element's <a class=term href="#bounding-box">bounding box</a>.
+   to the element's <a href="#bounding-box"><var>bounding box</var></a>.
 
   <div class=example>
    <p> The ‘<a href="#transform-origin"><code
@@ -2076,7 +2175,7 @@ <h3 id=svg-user-coordinate-space><span class=secno>13.6. </span> User
 &lt;/svg&gt;</pre>
 
    <p> An SVG ‘<code class=property>pattern</code>’ element doesn't have
-    a bounding box. The <a class=term href="#bounding-box">bounding box</a>
+    a bounding box. The <a href="#bounding-box"><var>bounding box</var></a>
     of the referencing ‘<code class=property>rect</code>’ element is used
     instead to solve the relative values of the ‘<a
     href="#transform-origin"><code
@@ -3347,7 +3446,7 @@ <h2 class=no-num id=property-index>Property index</h2>
 
      <td>no
 
-     <td>refer to the size of the element's bounding box
+     <td>refer to the size of the bounding box
 
      <td>visual
 
@@ -3380,7 +3479,7 @@ <h2 class=no-num id=property-index>Property index</h2>
 
      <td>no
 
-     <td>refer to the size of the element's bounding box
+     <td>refer to the size of bounding box
 
      <td>visual
 
@@ -3395,7 +3494,7 @@ <h2 class=no-num id=property-index>Property index</h2>
 
      <td>no
 
-     <td>refer to the size of the element's bounding box
+     <td>refer to the size of bounding box
 
      <td>visual
 
@@ -3430,16 +3529,51 @@ <h2 class=no-num id=index>Index</h2>
    <li>backface-visibility, <a href="#backface-visibility"
     title=backface-visibility><strong>12.</strong></a>
 
+   <li>‘<code class=css>bottom</code>’
+    <ul>
+     <li>‘<a href="#perspective-origin"><code
+      class=property>perspective-origin</code></a>’ value, <a
+      href="#bottom0"
+      title="''bottom'', 'perspective-origin' value"><strong>11.</strong></a>
+
+     <li>‘<a href="#transform-origin"><code
+      class=property>transform-origin</code></a>’ value, <a href="#bottom"
+      title="''bottom'', 'transform-origin' value"><strong>8.</strong></a>
+    </ul>
+
    <li>bounding box, <a href="#bounding-box"
     title="bounding box"><strong>4.</strong></a>
 
+   <li>‘<code class=css>center</code>’
+    <ul>
+     <li>‘<a href="#perspective-origin"><code
+      class=property>perspective-origin</code></a>’ value, <a
+      href="#center0"
+      title="''center'', 'perspective-origin' value"><strong>11.</strong></a>
+
+     <li>‘<a href="#transform-origin"><code
+      class=property>transform-origin</code></a>’ value, <a href="#center"
+      title="''center'', 'transform-origin' value"><strong>8.</strong></a>
+    </ul>
+
    <li>current transformation matrix (CTM), <a
     href="#current-transformation-matrix-ctm"
     title="current transformation matrix (CTM)"><strong>4.</strong></a>
 
    <li>identity transform function, <a href="#identity-transform-function"
     title="identity transform function"><strong>4.</strong></a>
 
+   <li>‘<code class=css>left</code>’
+    <ul>
+     <li>‘<a href="#perspective-origin"><code
+      class=property>perspective-origin</code></a>’ value, <a href="#left0"
+      title="''left'', 'perspective-origin' value"><strong>11.</strong></a>
+
+     <li>‘<a href="#transform-origin"><code
+      class=property>transform-origin</code></a>’ value, <a href="#left"
+      title="''left'', 'transform-origin' value"><strong>8.</strong></a>
+    </ul>
+
    <li>local coordinate system, <a href="#local-coordinate-system"
     title="local coordinate system"><strong>4.</strong></a>
 
@@ -3452,6 +3586,29 @@ <h2 class=no-num id=index>Index</h2>
    <li>perspective-origin, <a href="#perspective-origin"
     title=perspective-origin><strong>11.</strong></a>
 
+   <li>‘<code class=css>right</code>’
+    <ul>
+     <li>‘<a href="#perspective-origin"><code
+      class=property>perspective-origin</code></a>’ value, <a
+      href="#right0"
+      title="''right'', 'perspective-origin' value"><strong>11.</strong></a>
+
+     <li>‘<a href="#transform-origin"><code
+      class=property>transform-origin</code></a>’ value, <a href="#right"
+      title="''right'', 'transform-origin' value"><strong>8.</strong></a>
+    </ul>
+
+   <li>‘<code class=css>top</code>’
+    <ul>
+     <li>‘<a href="#perspective-origin"><code
+      class=property>perspective-origin</code></a>’ value, <a href="#top0"
+      title="''top'', 'perspective-origin' value"><strong>11.</strong></a>
+
+     <li>‘<a href="#transform-origin"><code
+      class=property>transform-origin</code></a>’ value, <a href="#top"
+      title="''top'', 'transform-origin' value"><strong>8.</strong></a>
+    </ul>
+
    <li>transform, <a href="#effects" title=transform><strong>7.</strong></a>
 
    <li>transformable element, <a href="#transformable-element"