- From: Simon Fraser via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 22 Feb 2012 18:00:12 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-transforms
In directory hutz:/tmp/cvs-serv3234
Modified Files:
ChangeLog Overview.html Transforms.src.html
Log Message:
2012-02-22 simon.fraser@apple.com
Add Issues list section with a link to bugzilla.
Remove the DOM Interfaces section.
Add Aryeh Gregor as an editor.
Index: ChangeLog
===================================================================
RCS file: /sources/public/csswg/css3-transforms/ChangeLog,v
retrieving revision 1.16
retrieving revision 1.17
diff -u -d -r1.16 -r1.17
--- ChangeLog 21 Feb 2012 19:11:03 -0000 1.16
+++ ChangeLog 22 Feb 2012 18:00:10 -0000 1.17
@@ -1,4 +1,9 @@
-2012-02-07 simon.fraser@apple.com
+2012-02-22 simon.fraser@apple.com
+ Add Issues list section with a link to bugzilla.
+ Remove the DOM Interfaces section.
+ Add Aryeh Gregor as an editor.
+
+2012-02-21 simon.fraser@apple.com
Add a link to #perspective-function
2012-02-13 dschulze@adobe.com
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Overview.html,v
retrieving revision 1.26
retrieving revision 1.27
diff -u -d -r1.26 -r1.27
--- Overview.html 21 Feb 2012 19:11:03 -0000 1.26
+++ Overview.html 22 Feb 2012 18:00:10 -0000 1.27
@@ -36,15 +36,15 @@
<h1>CSS Transforms</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 21 February
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 22 February
2012</h2>
<dl>
<dt>This version:
<dd> <a
- href="http://www.w3.org/TR/2012/ED-css3-transforms-20120221/">http://dev.w3.org/csswg/css3-transforms/</a>
- <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120221-->
+ href="http://www.w3.org/TR/2012/ED-css3-transforms-20120222/">http://dev.w3.org/csswg/css3-transforms/</a>
+ <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120222-->
<dt>Latest version:
@@ -52,6 +52,10 @@
href="http://www.w3.org/TR/css3-transforms">http://www.w3.org/TR/css3-transforms/</a>
+ <dt>Editor's Draft:
+
+ <dd><a href="http://dev.w3.org/csswg/css3-transforms/"></a>
+
<dt>Previous version:
<dd>None
@@ -75,6 +79,19 @@
<dd>Dirk Schulze (<a href="http://www.adobe.com/">Adobe Systems, Inc</a>)
<dschulze @adobe.com>
+
+ <dd>Aryeh Gregor (<a href="http://www.mozilla.org/">Mozilla</a>) <ayg
+ @aryeh.name>
+
+ <dt>Issues list:
+
+ <dd><a
+ href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Transforms&resolution=---&cmdtype=doit">in
+ Bugzilla</a>
+
+ <dt>Test suite:
+
+ <dd>none yet
</dl>
<!--begin-copyright-->
<p class=copyright><a
@@ -230,17 +247,7 @@
<li><a href="#mathematical-description"><span class=secno>16. </span>
Mathematical Description of Transformation Functions </a>
- <li><a href="#dom-interfaces"><span class=secno>17. </span> DOM Interfaces
- </a>
- <ul class=toc>
- <li><a href="#cssmatrix-interface"><span class=secno>17.1. </span>
- CSSMatrix </a>
-
- <li><a href="#csstransformvalue-interface"><span class=secno>17.2.
- </span> CSSTransformValue </a>
- </ul>
-
- <li><a href="#references"><span class=secno>18. </span>References</a>
+ <li><a href="#references"><span class=secno>17. </span>References</a>
<ul class=toc>
<li class=no-num><a href="#normative-references">Normative
references</a>
@@ -1888,640 +1895,7 @@
width=143>
</ul>
- <h2 id=dom-interfaces><span class=secno>17. </span> DOM Interfaces</h2>
-
- <p> This section describes the interfaces and functionality added to the
- DOM to support runtime access to the functionality described above.
-
- <h3 id=cssmatrix-interface><span class=secno>17.1. </span> CSSMatrix</h3>
-
- <div class=issue>
- <p class=desc>We need to resolve how SVGMatrix and CSSMatrix work together
- (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15498">bug
- 15498</a>).</p>
- </div>
-
- <dl>
- <dt> <b>Interface <i><a id=DOM-CSSMatrix
- name=DOM-CSSMatrix>CSSMatrix</a></i></b>
-
- <dd>
- <p> The <code>CSSMatrix</code> interface represents a 4x4 homogeneous
- matrix.</p>
-
- <dl>
- <dt> <b>IDL Definition</b>
-
- <dd>
- <div class=idl-code>
- <pre>
- interface CSSMatrix {
- attribute double a;
- attribute double b;
- attribute double c;
- attribute double d;
- attribute double e;
- attribute double f;
-
- attribute double m11;
- attribute double m12;
- attribute double m13;
- attribute double m14;
- attribute double m21;
- attribute double m22;
- attribute double m23;
- attribute double m24;
- attribute double m31;
- attribute double m32;
- attribute double m33;
- attribute double m34;
- attribute double m41;
- attribute double m42;
- attribute double m43;
- attribute double m44;
-
- void setMatrixValue(in DOMString string) raises(DOMException);
- boolean isAffineTransform();
- CSSMatrix multiply(in CSSMatrix secondMatrix);
- CSSMatrix inverse() raises(DOMException);
- CSSMatrix translate(in double x, in double y, optional in double z);
- CSSMatrix scale(in double scaleX, optional in double scaleY, optional in double scaleZ);
- CSSMatrix rotate(in double rotX, optional in double rotY, optional in double rotZ);
- CSSMatrix rotateAxisAngle(in double x, in double y, in double z, in double angle);
- CSSMatrix skewX(in double angle);
- CSSMatrix skewY(in double angle);
- };</pre>
- </div>
- <br>
- </dd>
- <!-- IDL -->
-
- <dt> <b>Attributes</b>
-
- <dd>
- <dl>
- <dt> <code class=attribute-name>a</code> of type <code>double</code>
-
- <dd> Points to the value of attribute <code>m11</code> in the 4x4
- matrix.<br>
-
- <dt> <code class=attribute-name>b</code> of type <code>double</code>
-
- <dd> Points to the value of attribute <code>m12</code> in the 4x4
- matrix.<br>
-
- <dt> <code class=attribute-name>c</code> of type <code>double</code>
-
- <dd> Points to the value of attribute <code>m21</code> in the 4x4
- matrix.<br>
-
- <dt> <code class=attribute-name>d</code> of type <code>double</code>
-
- <dd> Points to the value of attribute <code>m22</code> in the 4x4
- matrix.<br>
-
- <dt> <code class=attribute-name>e</code> of type <code>double</code>
-
- <dd> Points to the value of attribute <code>m41</code> in the 4x4
- matrix.<br>
-
- <dt> <code class=attribute-name>f</code> of type <code>double</code>
-
- <dd> Points to the value of attribute <code>m42</code> in the 4x4
- matrix.<br>
-
- <dt> <code class=attribute-name>m11-m44</code> of type
- <code>double</code>
-
- <dd> Each of these attributes represents one of the values in the 4x4
- matrix.<br>
- </dl>
- </dd>
- <!-- Attributes -->
-
- <dt> <b>Methods</b>
-
- <dd>
- <dl><!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-setMatrixValue
- name=DOM-CSSMatrix-setMatrixValue>setMatrixValue</a></code>
-
- <dd>
- <div class=method> The <code>setMatrixValue</code> method replaces
- the existing matrix with one computed from parsing the passed string
- as though it had been assigned to the transform property in a CSS
- style rule.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>string</code> of type
- <code>DOMString</code>
-
- <dd> The string to parse.<br>
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div class=return-value> <b>No Return Value</b></div>
-
- <div> <b>Exceptions</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>DOMException SYNTAX_ERR</code>
-
- <dd> Thrown when the provided string can not be parsed into a
- CSSMatrix.
- </dl>
- </div>
- </div>
- </div>
- </dd>
- <!-- setMatrixValue -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-isAffineTransform
- name=DOM-CSSMatrix-isAffineTransform>isAffineTransform</a></code>
-
- <dd>
- <div class=method> The <code>isAffineTransform</code> returns true,
- if the matrix does not contain three dimensional components.
- Therefore if m13 = m14 = m23 = m24 = m31 = m32 = m34 = m43 = 0 and
- m33 = m44 = 1.
- <div class=parameters> <b>No Parameters</b></div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>boolean</code>
-
- <dd> Matrix does not contain three dimensional components.<br>
- </dl>
- </div>
- </div>
-
- <div> <b>No Exceptions</b></div>
- </div>
- </dd>
- <!-- isAffineTransform -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-multiply
- name=DOM-CSSMatrix-multiply>multiply</a></code>
-
- <dd>
- <div class=method> The <code>multiply</code> method returns a new
- CSSMatrix which is the result of this matrix multiplied by the
- passed matrix, with the passed matrix to the right. 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>
- <!-- multiply() -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-inverse
- name=DOM-CSSMatrix-inverse>inverse</a></code>
-
- <dd>
- <div class=method> The <code>inverse</code> method returns a new
- matrix which is the inverse of this matrix. This matrix is not
- modified.
- <div class=parameters> <b>No Parameters</b></div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>CSSMatrix</code>
-
- <dd> The inverted matrix.<br>
- </dl>
- </div>
- </div>
-
- <div> <b>Exceptions</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>DOMException NOT_SUPPORTED_ERR</code>
-
- <dd> Thrown when the CSSMatrix can not be inverted.
- </dl>
- </div>
- </div>
- </div>
- <!-- ======================================================================================================= -->
- </dd>
- <!-- inverse() -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-translate
- name=DOM-CSSMatrix-translate>translate</a></code>
-
- <dd>
- <div class=method> The <code>translate</code> method returns a new
- matrix which is this matrix post multiplied by a translation matrix
- containing the passed values. If the z component is undefined, a 0
- value is used in its place. This matrix is not modified.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>x</code> of type
- <code>double</code>
-
- <dd> The X component of the translation value.<br>
-
- <dt> <code class=parameter-name>y</code> of type
- <code>double</code>
-
- <dd> The Y component of the translation value.<br>
-
- <dt> <code class=parameter-name>z</code> of type
- <code>double</code>
-
- <dd> The (optional) Z component of the translation value.<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>
- <!-- translate() -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-scale
- name=DOM-CSSMatrix-scale>scale</a></code>
-
- <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
- value is used in its place. This matrix is not modified.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>scaleX</code> of type
- <code>double</code>
-
- <dd> The X component of the scale value.<br>
-
- <dt> <code class=parameter-name>scaleY</code> of type
- <code>double</code>
-
- <dd> The (optional) Y component of the scale value.<br>
-
- <dt> <code class=parameter-name>scaleZ</code> of type
- <code>double</code>
-
- <dd> The (optional) Z component of the scale value.<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>
- <!-- scale() -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-rotate
- name=DOM-CSSMatrix-rotate>rotate</a></code>
-
- <dd>
- <div class=method> The <code>rotate</code> method returns a new
- matrix which is this matrix post multiplied by each of 3 rotation
- matrices about the major axes, first X, then Y, then Z. If the y and
- z components are undefined, the x value is used to rotate the object
- about the z axis, as though the vector (0,0,x) were passed. All
- rotation values are in degrees. This matrix is not modified.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>rotX</code> of type
- <code>double</code>
-
- <dd> The X component of the rotation value, or the Z component if
- the rotY and rotZ parameters are undefined.<br>
-
- <dt> <code class=parameter-name>rotY</code> of type
- <code>double</code>
-
- <dd> The (optional) Y component of the rotation value.<br>
-
- <dt> <code class=parameter-name>rotZ</code> of type
- <code>double</code>
-
- <dd> The (optional) Z component of the rotation value.<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>
- <!-- rotate() -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-rotateAxisAngle
- name=DOM-CSSMatrix-rotateAxisAngle>rotateAxisAngle</a></code>
-
- <dd>
- <div class=method> The <code>rotateAxisAngle</code> method returns a
- new matrix which is this matrix post multiplied by a rotation matrix
- with the given axis and angle. The <a
- href="http://en.wikipedia.org/wiki/Right-hand_rule">right-hand
- rule</a> is used to determine the direction of rotation. All
- rotation values are in degrees. This matrix is not modified.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>x</code> of type
- <code>double</code>
-
- <dd> The X component of the axis vector.<br>
-
- <dt> <code class=parameter-name>y</code> of type
- <code>double</code>
-
- <dd> The Y component of the axis vector.<br>
-
- <dt> <code class=parameter-name>z</code> of type
- <code>double</code>
-
- <dd> The Z component of the axis vector.<br>
-
- <dt> <code class=parameter-name>angle</code> of type
- <code>double</code>
-
- <dd> The angle of rotation about the axis vector, in degrees.<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>
- <!-- rotateAxisAngle -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-skew-x
- name=DOM-CSSMatrix-skew-x>skewX</a></code>
-
- <dd>
- <div class=method> The <code>skewX</code> method returns a new matrix
- which is this matrix multiplied by a matrix representing a <a
- href="#SkewDefined">skew along the x-axis</a>. 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>angle</code> of type
- <code>double</code>
-
- <dd> The angle of skew along the X 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>
- <!-- skewX() -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-skew-y
- name=DOM-CSSMatrix-skew-y>skewY</a></code>
-
- <dd>
- <div class=method> The <code>skewX</code> method returns a new matrix
- which is this matrix multiplied by a matrix representing a <a
- href="#SkewDefined">skew along the y-axis</a>. 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>angle</code> of type
- <code>double</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>
- <!-- skewY() -->
- </dl>
- <!-- methods -->
- </dl>
- </dd>
- <!-- Interface CSSMatrix -->
- </dl>
-
- <h3 id=csstransformvalue-interface><span class=secno>17.2. </span>
- CSSTransformValue</h3>
-
- <dl>
- <dt> <b>Interface <i><a id=DOM-CSSTransformValue
- name=DOM-CSSTransformValue>CSSTransformValue</a></i></b>
-
- <dd>
- <p> The <code>CSSTransformValue</code> interface represents one transform
- function in the transform property. The <code>operationType</code>
- defines which operation is represented. The object also contains a list
- of values, which are the parameters of the function, in the same order
- in which they appear in the transform functions.</p>
-
- <dl>
- <dt> <b>IDL Definition</b>
-
- <dd>
- <div class=idl-code>
- <pre>
- interface CSSTransformValue : CSSValueList {
-
- // 2D OperationTypes
- const unsigned short CSS_TRANSLATE = 1;
- const unsigned short CSS_TRANSLATEX = 2;
- const unsigned short CSS_TRANSLATEY = 3;
- const unsigned short CSS_ROTATE = 4;
- const unsigned short CSS_SCALE = 5;
- const unsigned short CSS_SCALEX = 6;
- const unsigned short CSS_SCALEY = 7;
- const unsigned short CSS_SKEW = 8;
- const unsigned short CSS_SKEWX = 9;
- const unsigned short CSS_SKEWY = 10;
- const unsigned short CSS_MATRIX = 11;
-
- // 3D OperationTypes
- const unsigned short CSS_TRANSLATEZ = 12;
- const unsigned short CSS_TRANSLATE3D = 13;
- const unsigned short CSS_ROTATEX = 14;
- const unsigned short CSS_ROTATEY = 15;
- const unsigned short CSS_ROTATEZ = 16;
- const unsigned short CSS_ROTATE3D = 17;
- const unsigned short CSS_SCALEZ = 18;
- const unsigned short CSS_SCALE3D = 19;
- const unsigned short CSS_PERSPECTIVE = 20;
- const unsigned short CSS_MATRIX3D = 21;
-
- attribute unsigned short operationType;
-
- CSSMatrix getCSSMatrix() raises(DOMException);
- }; </pre>
- </div>
- </dd>
- <!-- IDL -->
-
- <dt> <b>Attributes</b>
-
- <dd>
- <dl>
- <dt> <code class=attribute-name><a
- id=DOM-CSSTransformValue-operationType
- name=DOM-CSSTransformValue-operationType>operationType</a></code> of
- type <code>unsigned short</code>
-
- <dd> One of the listed operation types.<br>
- </dl>
- </dd>
- <!-- Attributes -->
-
- <dt> <b>Methods</b>
-
- <dd>
- <dl><!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSTransformValue-getCSSMatrix
- name=DOM-CSSTransformValue-getCSSMatrix>getCSSMatrix</a></code>
-
- <dd>
- <div class=method> The <code>getCSSMatrix</code> method returns a
- CSSMatrix object representing this transform.
- <div class=parameters> <b>No Parameters</b></div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>CSSMatrix</code>
-
- <dd> The result matrix.
- </dl>
- </div>
- </div>
-
- <div> <b>Exceptions</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>NOT_SUPPORTED_ERROR</code>
-
- <dd> Thrown when the CSSTranformValue 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>
- </div>
- </div>
- </div>
- </dd>
- <!-- setMatrixValue -->
- </dl>
- </dd>
- <!-- methods -->
- </dl>
- </dd>
- <!-- Interface CSSTransformValue -->
- </dl>
-
- <h2 id=references><span class=secno>18. </span>References</h2>
+ <h2 id=references><span class=secno>17. </span>References</h2>
<h3 class=no-num id=normative-references>Normative references</h3>
<!--begin-normative-->
Index: Transforms.src.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Transforms.src.html,v
retrieving revision 1.29
retrieving revision 1.30
diff -u -d -r1.29 -r1.30
--- Transforms.src.html 21 Feb 2012 19:11:03 -0000 1.29
+++ Transforms.src.html 22 Feb 2012 18:00:10 -0000 1.30
@@ -50,7 +50,14 @@
<dd>Chris Marrin (<a href="http://www.apple.com/">Apple Inc</a>) <cmarrin @apple.com>
<dd>Edward O'Connor (<a href="http://www.apple.com/">Apple Inc</a>) <eoconnor @apple.com>
<dd>Dirk Schulze (<a href="http://www.adobe.com/">Adobe Systems, Inc</a>) <dschulze @adobe.com>
- </dl>
+ <dd>Aryeh Gregor (<a href="http://www.mozilla.org/">Mozilla</a>) <ayg @aryeh.name>
+
+ <dt>Issues list:
+ <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Transforms&resolution=---&cmdtype=doit">in Bugzilla</a>
+
+ <dt>Test suite:
+ <dd>none yet
+ </dl>
<!--copyright-->
@@ -1746,701 +1753,6 @@
</li>
</ul>
- <h2 id="dom-interfaces">
- DOM Interfaces
- </h2>
- <p>
- This section describes the interfaces and functionality added to the DOM
- to support runtime access to the functionality described above.
- </p>
-
- <h3 id="cssmatrix-interface">
- CSSMatrix
- </h3>
-
- <div class="issue">
- <p class="desc">We need to resolve how SVGMatrix and CSSMatrix work together (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15498">bug 15498</a>).</p>
- </div>
-
- <dl>
- <dt>
- <b>Interface <i><a id="DOM-CSSMatrix" name='DOM-CSSMatrix'>CSSMatrix</a></i></b>
- </dt>
- <dd>
- <p>
- The <code>CSSMatrix</code> interface represents a 4x4 homogeneous matrix.
- </p>
- <dl>
-
- <dt>
- <b>IDL Definition</b>
- </dt>
- <dd>
- <div class='idl-code'>
- <pre>
- interface CSSMatrix {
- attribute double a;
- attribute double b;
- attribute double c;
- attribute double d;
- attribute double e;
- attribute double f;
-
- attribute double m11;
- attribute double m12;
- attribute double m13;
- attribute double m14;
- attribute double m21;
- attribute double m22;
- attribute double m23;
- attribute double m24;
- attribute double m31;
- attribute double m32;
- attribute double m33;
- attribute double m34;
- attribute double m41;
- attribute double m42;
- attribute double m43;
- attribute double m44;
-
- void setMatrixValue(in DOMString string) raises(DOMException);
- boolean isAffineTransform();
- CSSMatrix multiply(in CSSMatrix secondMatrix);
- CSSMatrix inverse() raises(DOMException);
- CSSMatrix translate(in double x, in double y, optional in double z);
- CSSMatrix scale(in double scaleX, optional in double scaleY, optional in double scaleZ);
- CSSMatrix rotate(in double rotX, optional in double rotY, optional in double rotZ);
- CSSMatrix rotateAxisAngle(in double x, in double y, in double z, in double angle);
- CSSMatrix skewX(in double angle);
- CSSMatrix skewY(in double angle);
- };</pre>
- </div><br>
- </dd> <!-- IDL -->
-
- <dt>
- <b>Attributes</b>
- </dt>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'>a</code> of type <code>double</code>
- </dt>
- <dd>
- Points to the value of attribute <code>m11</code> in the 4x4 matrix.<br>
- </dd>
- <dt>
- <code class='attribute-name'>b</code> of type <code>double</code>
- </dt>
- <dd>
- Points to the value of attribute <code>m12</code> in the 4x4 matrix.<br>
- </dd>
- <dt>
- <code class='attribute-name'>c</code> of type <code>double</code>
- </dt>
- <dd>
- Points to the value of attribute <code>m21</code> in the 4x4 matrix.<br>
- </dd>
- <dt>
- <code class='attribute-name'>d</code> of type <code>double</code>
- </dt>
- <dd>
- Points to the value of attribute <code>m22</code> in the 4x4 matrix.<br>
- </dd>
- <dt>
- <code class='attribute-name'>e</code> of type <code>double</code>
- </dt>
- <dd>
- Points to the value of attribute <code>m41</code> in the 4x4 matrix.<br>
- </dd>
- <dt>
- <code class='attribute-name'>f</code> of type <code>double</code>
- </dt>
- <dd>
- Points to the value of attribute <code>m42</code> in the 4x4 matrix.<br>
- </dd>
- <dt>
- <code class='attribute-name'>m11-m44</code> of type <code>double</code>
- </dt>
- <dd>
- Each of these attributes represents one of the values in the 4x4 matrix.<br>
- </dd>
- </dl>
- </dd> <!-- Attributes -->
-
- <dt>
- <b>Methods</b>
- </dt>
- <dd>
- <dl>
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-setMatrixValue" name='DOM-CSSMatrix-setMatrixValue'>setMatrixValue</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>setMatrixValue</code> method replaces the existing matrix with one computed from parsing the passed string
- as though it had been assigned to the transform property in a CSS style rule.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>string</code> of type <code>DOMString</code>
- </dt>
- <dd>
- The string to parse.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>No Return Value</b>
- </div>
- <div>
- <b>Exceptions</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>DOMException SYNTAX_ERR</code>
- </dt>
- <dd>
- Thrown when the provided string can not be
- parsed into a CSSMatrix.
- </dd>
- </dl>
- </div>
- </div>
- </div>
- </dd> <!-- setMatrixValue -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-isAffineTransform" name='DOM-CSSMatrix-isAffineTransform'>isAffineTransform</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>isAffineTransform</code> returns true, if the matrix does not contain three dimensional components. Therefore if
- m13 = m14 = m23 = m24 = m31 = m32 = m34 = m43 = 0 and m33 = m44 = 1.
- <div class='parameters'>
- <b>No Parameters</b>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>boolean</code>
- </dt>
- <dd>
- Matrix does not contain three dimensional components.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div>
- </dd> <!-- isAffineTransform -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-multiply" name='DOM-CSSMatrix-multiply'>multiply</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>multiply</code> method returns a new CSSMatrix which is the result of this matrix multiplied by the passed matrix, with the passed matrix to the right. 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>
- </dt>
- <dd>
- The matrix to multiply.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div>
- </dd> <!-- multiply() -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-inverse" name='DOM-CSSMatrix-inverse'>inverse</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>inverse</code> method returns a new matrix which is the inverse of this matrix. This matrix is not modified.
- <div class='parameters'>
- <b>No Parameters</b>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The inverted matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>Exceptions</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>DOMException NOT_SUPPORTED_ERR</code>
- </dt>
- <dd>
- Thrown when the CSSMatrix can not be
- inverted.
- </dd>
- </dl>
- </div>
- </div>
- </div><!-- ======================================================================================================= -->
- </dd> <!-- inverse() -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-translate" name='DOM-CSSMatrix-translate'>translate</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>translate</code> method returns a new matrix which is this matrix post multiplied by a translation matrix containing the passed values. If the z component is undefined, a 0 value is used in its place. This matrix is not modified.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>x</code> of type <code>double</code>
- </dt>
- <dd>
- The X component of the translation value.<br>
- </dd>
- <dt>
- <code class='parameter-name'>y</code> of type <code>double</code>
- </dt>
- <dd>
- The Y component of the translation value.<br>
- </dd>
- <dt>
- <code class='parameter-name'>z</code> of type <code>double</code>
- </dt>
- <dd>
- The (optional) Z component of the translation value.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div><!-- ======================================================================================================= -->
- </dd> <!-- translate() -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-scale" name='DOM-CSSMatrix-scale'>scale</a></code>
- </dt>
- <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 value is used in its place. This matrix is not modified.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>scaleX</code> of type <code>double</code>
- </dt>
- <dd>
- The X component of the scale value.<br>
- </dd>
- <dt>
- <code class='parameter-name'>scaleY</code> of type <code>double</code>
- </dt>
- <dd>
- The (optional) Y component of the scale value.<br>
- </dd>
- <dt>
- <code class='parameter-name'>scaleZ</code> of type <code>double</code>
- </dt>
- <dd>
- The (optional) Z component of the scale value.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div><!-- ======================================================================================================= -->
- </dd> <!-- scale() -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-rotate" name='DOM-CSSMatrix-rotate'>rotate</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>rotate</code> method returns a new matrix which is this matrix post multiplied by each of 3 rotation matrices about the major axes, first X, then Y, then Z. If the y and z components are undefined, the x value is used to rotate the object about the z axis, as though the vector (0,0,x) were passed. All rotation values are in degrees. This matrix is not modified.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>rotX</code> of type <code>double</code>
- </dt>
- <dd>
- The X component of the rotation value, or the Z component if the rotY and rotZ parameters are undefined.<br>
- </dd>
- <dt>
- <code class='parameter-name'>rotY</code> of type <code>double</code>
- </dt>
- <dd>
- The (optional) Y component of the rotation value.<br>
- </dd>
- <dt>
- <code class='parameter-name'>rotZ</code> of type <code>double</code>
- </dt>
- <dd>
- The (optional) Z component of the rotation value.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div>
- <!-- ======================================================================================================= -->
- </dd> <!-- rotate() -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-rotateAxisAngle" name='DOM-CSSMatrix-rotateAxisAngle'>rotateAxisAngle</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>rotateAxisAngle</code> method returns a new matrix which is this matrix post multiplied by a rotation matrix with the given axis and angle. The <a href="http://en.wikipedia.org/wiki/Right-hand_rule">right-hand rule</a> is used to determine the direction of rotation. All rotation values are in degrees. This matrix is not modified.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>x</code> of type <code>double</code>
- </dt>
- <dd>
- The X component of the axis vector.<br>
- </dd>
- <dt>
- <code class='parameter-name'>y</code> of type <code>double</code>
- </dt>
- <dd>
- The Y component of the axis vector.<br>
- </dd>
- <dt>
- <code class='parameter-name'>z</code> of type <code>double</code>
- </dt>
- <dd>
- The Z component of the axis vector.<br>
- </dd>
- <dt>
- <code class='parameter-name'>angle</code> of type <code>double</code>
- </dt>
- <dd>
- The angle of rotation about the axis vector, in degrees.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div>
- </dd> <!-- rotateAxisAngle -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-skew-x" name='DOM-CSSMatrix-skew-x'>skewX</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>skewX</code> method returns a new matrix which is this matrix multiplied by a matrix representing a <a href="#SkewDefined">skew along the x-axis</a>. 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'>angle</code> of type <code>double</code>
- </dt>
- <dd>
- The angle of skew along the X axis.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div>
- <!-- ======================================================================================================= -->
- </dd> <!-- skewX() -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-skew-y" name='DOM-CSSMatrix-skew-y'>skewY</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>skewX</code> method returns a new matrix which is this matrix multiplied by a matrix representing a <a href="#SkewDefined">skew along the y-axis</a>. 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'>angle</code> of type <code>double</code>
- </dt>
- <dd>
- The angle of skew along the Y axis.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div>
- <!-- ======================================================================================================= -->
- </dd> <!-- skewY() -->
-
- </dl><!-- methods -->
- </dd>
-
- </dl>
- </dd> <!-- Interface CSSMatrix -->
- </dl>
-
- <h3 id="csstransformvalue-interface">
- CSSTransformValue
- </h3>
-
- <dl>
- <dt>
- <b>Interface <i><a id="DOM-CSSTransformValue" name='DOM-CSSTransformValue'>CSSTransformValue</a></i></b>
- </dt>
- <dd>
- <p>
- The <code>CSSTransformValue</code> interface represents one transform function in the transform property. The
- <code>operationType</code> defines which operation is represented. The object also contains a list of values,
- which are the parameters of the function, in the same order in which they appear in the transform functions.
- </p>
- <dl>
- <dt>
- <b>IDL Definition</b>
- </dt>
- <dd>
- <div class='idl-code'>
- <pre>
- interface CSSTransformValue : CSSValueList {
-
- // 2D OperationTypes
- const unsigned short CSS_TRANSLATE = 1;
- const unsigned short CSS_TRANSLATEX = 2;
- const unsigned short CSS_TRANSLATEY = 3;
- const unsigned short CSS_ROTATE = 4;
- const unsigned short CSS_SCALE = 5;
- const unsigned short CSS_SCALEX = 6;
- const unsigned short CSS_SCALEY = 7;
- const unsigned short CSS_SKEW = 8;
- const unsigned short CSS_SKEWX = 9;
- const unsigned short CSS_SKEWY = 10;
- const unsigned short CSS_MATRIX = 11;
-
- // 3D OperationTypes
- const unsigned short CSS_TRANSLATEZ = 12;
- const unsigned short CSS_TRANSLATE3D = 13;
- const unsigned short CSS_ROTATEX = 14;
- const unsigned short CSS_ROTATEY = 15;
- const unsigned short CSS_ROTATEZ = 16;
- const unsigned short CSS_ROTATE3D = 17;
- const unsigned short CSS_SCALEZ = 18;
- const unsigned short CSS_SCALE3D = 19;
- const unsigned short CSS_PERSPECTIVE = 20;
- const unsigned short CSS_MATRIX3D = 21;
-
- attribute unsigned short operationType;
-
- CSSMatrix getCSSMatrix() raises(DOMException);
- }; </pre>
- </div>
- </dd> <!-- IDL -->
-
- <dt>
- <b>Attributes</b>
- </dt>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'><a id="DOM-CSSTransformValue-operationType" name='DOM-CSSTransformValue-operationType'>operationType</a></code> of type <code>unsigned short</code>
- </dt>
- <dd>
- One of the listed operation types.<br>
- </dd>
- </dl>
- </dd> <!-- Attributes -->
-
- <dt>
- <b>Methods</b>
- </dt>
- <dd>
- <dl>
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSTransformValue-getCSSMatrix" name='DOM-CSSTransformValue-getCSSMatrix'>getCSSMatrix</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>getCSSMatrix</code> method returns
- a CSSMatrix object representing this transform.
- <div class='parameters'>
- <b>No Parameters</b>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>Exceptions</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>NOT_SUPPORTED_ERROR</code>
- </dt>
- <dd>
- Thrown when the CSSTranformValue 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.
- </dd>
- </dl>
- </div>
- </div>
- </div>
- </dd> <!-- setMatrixValue -->
- </dl>
- </dd> <!-- methods -->
-
- </dl>
- </dd> <!-- Interface CSSTransformValue -->
- </dl>
<h2>References</h2>
Received on Wednesday, 22 February 2012 18:00:18 UTC