2009-10-30 dino@apple.com

- noted that CSSValue is deprecated, so CSSTransformList will need updating
- added a multiplyLeft function to CSSMatrix
- noted that when animations produce singular matrices they are not rendered
- noted that the convert* methods really should be in CSSOM View
- removed mention that transforms act like position: relative
- added the text from CSS 2.1 background-position into transform-origin, in relation to the number of attributes and default values
- removed "none" from the list of accepted transform functions
- fixed error where translateZ was present and skew was missing in the animations section
- s/functions/methods in DOM section
- added DOMException to exceptions, and fixed s/ERROR/ERR/ typo
- removed mention of Z component from scale definition
- added missing skew() method to CSSMatrix

Author: grorg

css3-2d-transforms/ChangeLog

@@ -0,0 +1,14 @@
+2009-10-30 dino@apple.com
+
+- noted that CSSValue is deprecated, so CSSTransformList will need updating
+- added a multiplyLeft function to CSSMatrix
+- noted that when animations produce singular matrices they are not rendered
+- noted that the convert* methods really should be in CSSOM View
+- removed mention that transforms act like position: relative
+- added the text from CSS 2.1 background-position into transform-origin, in relation to the number of attributes and default values
+- removed "none" from the list of accepted transform functions
+- fixed error where translateZ was present and skew was missing in the animations section
+- s/functions/methods in DOM section
+- added DOMException to exceptions, and fixed s/ERROR/ERR/ typo
+- removed mention of Z component from scale definition
+- added missing skew() method to CSSMatrix

css3-2d-transforms/Overview.html

@@ -21,14 +21,15 @@
 
    <h1>CSS 2D Transforms Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 April 2009</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 31 October
+    2009</h2>
 
    <dl>
     <dt>This version:
 
     <dd> <a
-     href="http://www.w3.org/TR/2009/ED-css3-2d-transforms-20090414">http://dev.w3.org/csswg/css3-2d-transforms/</a>
-     <!--http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090414-->
+     href="http://www.w3.org/TR/2009/ED-css3-2d-transforms-20091031">http://dev.w3.org/csswg/css3-2d-transforms/</a>
+     <!--http://www.w3.org/TR/2009/WD-css3-2d-transforms-20091031-->
 
     <dt>Latest version:
 
@@ -111,6 +112,9 @@ <h2 class="no-num no-toc" id=status>Status of this document</h2>
    W3C Patent Policy</a>.</p>
   <!--end-status-->
 
+  <p> The <a href=ChangeLog>list of changes made to this specification</a>
+   are available.
+
   <h2 class="no-num no-toc" id=contents>Table of contents</h2>
   <!--begin-toc-->
 
@@ -210,9 +214,8 @@ <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
 
   <p> Any value other than &lsquo;<code class=property>none</code>&rsquo; for
    the transform results in the creation of both a stacking context and a
-   containing block. The object acts as though position: relative has been
-   specified, but also acts as a containing block for fixed positioned
-   descendants.
+   containing block. The object acts as a containing block for fixed
+   positioned descendants.
 
   <div class=todo> Need to go into more detail here about why fixed
    positioned objects should do this, i.e., that it's much harder to
@@ -321,6 +324,12 @@ <h2 id=transform-origin-property><span class=secno>3 </span> The <span
    applies the element's transform, then moves the element back to its
    original position.
 
+  <p> If only one value is specified, the second value is assumed to be
+   &lsquo;<code class=property>center</code>&rsquo;. If at least one value is
+   not a keyword, then the first value represents the horizontal position and
+   the second represents the vertical position. Negative &lt;percentage&gt;
+   and &lt;length&gt; values are allowed.
+
   <table class=propdef>
    <tbody>
     <tr>
@@ -379,10 +388,6 @@ <h2 id=transform-functions><span class=secno>4 </span> The Transformation
    href="http://www.w3.org/TR/css3-values/">CSS Values and Units.</a>
 
   <dl>
-   <dt> <span class=prop-value>none</span>
-
-   <dd> specifies an identity transform.
-
    <dt> <span class=prop-value>matrix(&lt;number&gt;, &lt;number&gt;,
     &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)</span>
 
@@ -532,8 +537,8 @@ <h2 id=animation><span class=secno>6 </span> Transitions and animations
     &lsquo;<code class=property>to</code>&rsquo; transforms are both single
     functions of the same type:
     <ul>
-     <li> For translate, translateX, translateY, translateZ, scale, scaleX,
-      scaleY, rotate, skewX and skewY functions:
+     <li> For translate, translateX, translateY, scale, scaleX, scaleY,
+      rotate, skew, skewX and skewY functions:
       <ul>
        <li> the individual components of the function are interpolated
         numerically.
@@ -575,7 +580,8 @@ <h2 id=animation><span class=secno>6 </span> Transitions and animations
 
       <p> The identity functions are translate(0), translateX(0),
        translateY(0), scale(1), scaleX(1), scaleY(1), rotate(0), rotateX(0),
-       rotateY(0), skewX(0), skewY(0), and matrix(1, 0, 0, 1, 0, 0).</p>
+       rotateY(0), skewX(0), skewY(0), skew(0, 0) and matrix(1, 0, 0, 1, 0,
+       0).</p>
     </ul>
 
    <li> If both the &lsquo;<code class=property>from</code>&rsquo; and
@@ -597,6 +603,11 @@ <h2 id=animation><span class=secno>6 </span> Transitions and animations
     </ul>
   </ul>
 
+  <p> In some cases, an animation might cause a transformation matrix to be
+   singular or non-invertible. For example, an animation in which scale moves
+   from 1 to -1. At the time when the matrix is in such a state, the
+   transformed element is not rendered.
+
   <h2 id=dom-interfaces><span class=secno>7 </span> DOM Interfaces</h2>
 
   <p> This section describes the interfaces and functionality added to the
@@ -653,7 +664,7 @@ <h3 id=window-interface><span class=secno>7.2 </span> Window</h3>
    <dt> <b>Interface <i><a id=DOM-Window name=DOM-Window>Window</a></i></b>
 
    <dd>
-    <p> The following 2 functions are added to the <code>Window</code>
+    <p> The following 2 methods are added to the <code>Window</code>
      interface. They provide conversions between the page and node coordinate
      spaces.</p>
 
@@ -688,6 +699,9 @@ <h3 id=window-interface><span class=secno>7.2 </span> Window</h3>
          returns a point in the coordinate space of the passed Node that is
          at the same location in the page as the passed point, which is in
          the coordinate space of the page.
+         <div class=issue> This interface should be moved into CSSOM View,
+          but that is not yet transform-aware.</div>
+
          <div class=parameters> <b>Parameters</b>
           <div class=paramtable>
            <dl>
@@ -734,6 +748,9 @@ <h3 id=window-interface><span class=secno>7.2 </span> Window</h3>
          returns a point in the coordinate space of the page that is at the
          same location in the page as the passed point, which is in the
          coordinate space of the passed Node.
+         <div class=issue> This interface should be moved into CSSOM View,
+          but that is not yet transform-aware.</div>
+
          <div class=parameters> <b>Parameters</b>
           <div class=paramtable>
            <dl>
@@ -802,9 +819,11 @@ <h3 id=cssmatrix-interface><span class=secno>7.3 </span> CSSMatrix</h3>
 
       void        setMatrixValue(in DOMString string) raises(DOMException);
       CSSMatrix   multiply(in CSSMatrix secondMatrix);
+      CSSMatrix   multiplyLeft(in CSSMatrix secondMatrix);
       CSSMatrix   inverse() raises(DOMException);
       CSSMatrix   translate(in float x, in float y);
       CSSMatrix   scale(in float scaleX, in float scaleY);
+      CSSMatrix   skew(in float angleX, in float angleY);
       CSSMatrix   rotate(in float angle);
   };</pre>
       </div>
@@ -854,7 +873,7 @@ <h3 id=cssmatrix-interface><span class=secno>7.3 </span> CSSMatrix</h3>
          <div> <b>Exceptions</b>
           <div class=returnvalue>
            <dl>
-            <dt> <code>SYNTAX_ERR</code>
+            <dt> <code>DOMException SYNTAX_ERR</code>
 
             <dd> Thrown when the provided string can not be parsed into a
              CSSMatrix.
@@ -880,7 +899,7 @@ <h3 id=cssmatrix-interface><span class=secno>7.3 </span> CSSMatrix</h3>
             <dt> <code class=parameter-name>secondMatrix</code> of type
              <code>CSSMatrix</code>
 
-            <dd> The matrix to multipy.<br>
+            <dd> The matrix to multiply.<br>
            </dl>
           </div>
          </div>
@@ -901,6 +920,41 @@ <h3 id=cssmatrix-interface><span class=secno>7.3 </span> CSSMatrix</h3>
        <!-- multiply() -->
        <!-- ===================================================== -->
 
+       <dt> <code class=method-name><a id=DOM-CSSMatrix-multiplyLeft
+        name=DOM-CSSMatrix-multiplyLeft>multiplyLeft</a></code>
+
+       <dd>
+        <div class=method> The <code>multiplyLeft</code> method returns a new
+         CSSMatrix which is the result of this matrix multiplied by the
+         passed matrix, with the passed matrix to the left. This matrix is
+         not modified.
+         <div class=parameters> <b>Parameters</b>
+          <div class=paramtable>
+           <dl>
+            <dt> <code class=parameter-name>secondMatrix</code> of type
+             <code>CSSMatrix</code>
+
+            <dd> The matrix to multiply.<br>
+           </dl>
+          </div>
+         </div>
+         <!-- parameters -->
+         <div class=return-value> <b>Return Value</b>
+          <div class=returnvalue>
+           <dl>
+            <dt> <code>CSSMatrix</code>
+
+            <dd> The result matrix.<br>
+           </dl>
+          </div>
+         </div>
+
+         <div> <b>No Exceptions</b></div>
+        </div>
+       </dd>
+       <!-- multiplyLeft() -->
+       <!-- ===================================================== -->
+
        <dt> <code class=method-name><a id=DOM-CSSMatrix-inverse
         name=DOM-CSSMatrix-inverse>inverse</a></code>
 
@@ -923,7 +977,7 @@ <h3 id=cssmatrix-interface><span class=secno>7.3 </span> CSSMatrix</h3>
          <div> <b>Exceptions</b>
           <div class=returnvalue>
            <dl>
-            <dt> <code>NOT_SUPPORTED_ERROR</code>
+            <dt> <code>DOMException NOT_SUPPORTED_ERR</code>
 
             <dd> Thrown when the CSSMatrix can not be inverted.
            </dl>
@@ -981,8 +1035,7 @@ <h3 id=cssmatrix-interface><span class=secno>7.3 </span> CSSMatrix</h3>
        <dd>
         <div class=method> The <code>scale</code> method returns a new matrix
          which is this matrix post multiplied by a scale matrix containing
-         the passed values. If the z component is undefined, a 1 value is
-         used in its place. If the y component is undefined, the x component
+         the passed values. If the y component is undefined, the x component
          value is used in its place. This matrix is not modified.
          <div class=parameters> <b>Parameters</b>
           <div class=paramtable>
@@ -1050,6 +1103,46 @@ <h3 id=cssmatrix-interface><span class=secno>7.3 </span> CSSMatrix</h3>
         <!-- ======================================================================================================= -->
         </dd>
        <!-- rotate() -->
+       <!-- ===================================================== -->
+
+       <dt> <code class=method-name><a id=DOM-CSSMatrix-skew
+        name=DOM-CSSMatrix-skew>skew</a></code>
+
+       <dd>
+        <div class=method> The <code>skew</code> method returns a new matrix
+         which is this matrix post multiplied by a skew matrix. The rotation
+         value is in degrees. This matrix is not modified.
+         <div class=parameters> <b>Parameters</b>
+          <div class=paramtable>
+           <dl>
+            <dt> <code class=parameter-name>angleX</code> of type
+             <code>float</code>
+
+            <dd> The angle of skew along the X axis.<br>
+
+            <dt> <code class=parameter-name>angleY</code> of type
+             <code>float</code>
+
+            <dd> The angle of skew along the Y axis.<br>
+           </dl>
+          </div>
+         </div>
+         <!-- parameters -->
+         <div class=return-value> <b>Return Value</b>
+          <div class=returnvalue>
+           <dl>
+            <dt> <code>CSSMatrix</code>
+
+            <dd> The result matrix.<br>
+           </dl>
+          </div>
+         </div>
+
+         <div> <b>No Exceptions</b></div>
+        </div>
+        <!-- ======================================================================================================= -->
+        </dd>
+       <!-- skew() -->
       </dl>
       <!-- methods -->
     </dl>
@@ -1072,6 +1165,9 @@ <h3 id=csstransformvalue-interface><span class=secno>7.4 </span>
      of values, which are the parameters of the function, in the same order
      in which they appear in the transform functions.</p>
 
+    <p class=issue> Since CSSValue is deprecated, this interface will need to
+     change.</p>
+
     <dl>
      <dt> <b>IDL Definition</b>
 
@@ -1142,10 +1238,10 @@ <h3 id=csstransformvalue-interface><span class=secno>7.4 </span>
          <div> <b>Exceptions</b>
           <div class=returnvalue>
            <dl>
-            <dt> <code>NOT_SUPPORTED_ERROR</code>
+            <dt> <code>DOMException NOT_SUPPORTED_ERR</code>
 
-            <dd> Thrown when the CSSTranformValue can not be converted into a
-             CSSMatrix, such as when the CSSTransformValue contains
+            <dd> Thrown when the CSSTransformValue can not be converted into
+             a CSSMatrix, such as when the CSSTransformValue contains
              percentage units and is being called on an object with unknown
              dimensions.
            </dl>
@@ -1169,59 +1265,7 @@ <h3 id=csstransformvalue-interface><span class=secno>7.4 </span>
    single CSSTransformValue with a type of CSS_MATRIX. The 6 parameters
    represent the 3x2 matrix that is the result of applying the individual
    functions listed in the <code><a href="#effects">transform</a></code>
-   property.</p>
-  <!--
-<p class=issue>Editor's Note: This list needs to be updated (or
-dropped).
-
-<p>This specification is the product of the W3C Working Group on
-Cascading Style Sheets and Formatting Properties. In addition to the
-editor of this specification, the members of the Working Group
-are:
-<ul>
-  <li>Marc Attinasi (Netscape/AOL)
-  <li>Bert Bos (W3C)
-  <li>Tantek &Ccedil;elik (Microsoft Corp.)
-  <li>Don Day (IBM)
-  <li>Martin D&uuml;rst (W3C)
-  <li>Angel Diaz (IBM)
-  <li>Daniel Glazman (Netscape/AOL from nov. 2000, and Electricit&eacute; de France
-    until feb. 2000)
-  <li>H&aring;kon W. Lie (Opera Software from April 1999, and W3C until April
-  1999)
-  <li>Chris Lilley (W3C)
-  <li>Dave Raggett (W3C/Openwave Systems Inc.)
-  <li>Pierre Saslawsky (Netscape/AOL)
-  <li>Michel Suignard (Microsoft Corp.)
-  <li>Ted Wugofski (Openwave Systems Inc.)
-  <li>Steve Zilles (Adobe)
-</ul>
-
-<p>A number of invited experts to the Working Group have significantly
-contributed to CSS 3 : David. L Baron, Todd Fahrner, Daniel Glazman,
-Ian Hickson, Eric Meyer (The OPAL Group), Jeff Veen.
-
-<p>Former members of the Working Group:
-<ul>
-  <li>Chris Brichford (Adobe)
-  <li>Troy Chevalier (Netscape/AOL)
-  <li>Dwayne Dicks (Softquad)
-  <li>Ian Jacobs (W3C)
-  <li>Lorin Jurow (Quark)
-  <li>Sho Kuwamoto (Macromedia)
-  <li>Peter Linss (Netscape/AOL)
-  <li>Steven Pemberton (W3C/CWI)
-  <li>Robert Pernett (Lotus)
-  <li>Douglas Rand (SGI)
-  <li>Nisheeth Ranjan (Netscape/AOL)
-  <li>Ed Tecot (Microsoft Corp.)
-  <li>Jared Sorensen (Novell)
-  <li>Robert Stevahn (Hewlett-Packard)
-  <li>Mike Wexler (Adobe)
-  <li>John Williams (Quark)
-  <li>Chris Wilson (Microsoft Corp.)
-</ul>
--->
+   property.
 
   <h2 id=references><span class=secno>8 </span>References</h2>