- From: Dirk Schulze via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 10 Feb 2012 05:38:06 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-transforms
In directory hutz:/tmp/cvs-serv11397
Modified Files:
Overview.html Transforms.src.html ChangeLog
Log Message:
2012-02-09 dschulze@adobe.com
Introduce new term 'bounding box'.
Specify transform origin for SVG elements.
Change float to double for CSSOM.
Added two optional offset arguments for rotate().
Changed Z argument type to <length> in translateZ() and translate3d().
Removed link from translateZ() to SVG (was 2D translate).
Removed solved issues.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Overview.html,v
retrieving revision 1.20
retrieving revision 1.21
diff -u -d -r1.20 -r1.21
--- Overview.html 7 Feb 2012 10:25:17 -0000 1.20
+++ Overview.html 10 Feb 2012 05:38:04 -0000 1.21
@@ -36,15 +36,15 @@
<h1>CSS Transforms</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 7 February
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 February
2012</h2>
<dl>
<dt>This version:
<dd> <a
- href="http://www.w3.org/TR/2012/ED-css3-transforms-20120207/">http://dev.w3.org/csswg/css3-transforms/</a>
- <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120207-->
+ href="http://www.w3.org/TR/2012/ED-css3-transforms-20120210/">http://dev.w3.org/csswg/css3-transforms/</a>
+ <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120210-->
<dt>Latest version:
@@ -186,11 +186,6 @@
<li><a href="#transform-origin-property"><span class=secno>7. </span> The
<code class=property>'transform-origin'</code> Property </a>
- <ul class=toc>
- <li><a href="#svg-transform-origin"><span class=secno>7.1. </span>The
- ‘<code class=property>transform-origin</code>’ property for
- SVG elements</a>
- </ul>
<li><a href="#transform-style-property"><span class=secno>8. </span> The
<code class=property>'transform-style'</code> Property </a>
@@ -340,6 +335,13 @@
this section.
<dl>
+ <dt id=TermBoundingBox><dfn id=bounding-box>bounding box</dfn>
+
+ <dd>
+ <p> A bounding box is the object bounding box for all SVG elements
+ without an associated CSS layout box and the border box for all other
+ elements.</p>
+
<dt id=TermTransformableElement><dfn
id=transformable-element>transformable element</dfn>
@@ -848,7 +850,7 @@
<tr>
<td> <em>Percentages:</em>
- <td> refer to the size of the element's border box
+ <td> refer to the size of the element's bounding box
<tr>
<td> <em>Media:</em>
@@ -959,7 +961,8 @@
<tr>
<td> <em>Initial:</em>
- <td> 0 0 for SVG elements, 50% 50% for all other elements
+ <td> 0 0 for SVG elements without associated CSS layout box, 50% 50% for
+ all other elements
<tr>
<td> <em>Applies to:</em>
@@ -974,7 +977,7 @@
<tr>
<td> <em>Percentages:</em>
- <td> refer to the size of the element's border box
+ <td> refer to the size of the element's bounding box
<tr>
<td> <em>Media:</em>
@@ -1000,45 +1003,25 @@
the horizontal position (or offset) and the second represents the vertical
position (or offset). <var><percentage></var> and
<var><length></var> values here represent an offset of the transform
- origin from the top left corner of the element's border box.
+ origin from the top left corner of the element's bounding box.
+
+ <p>For SVG elements without an associated CSS layout box the
+ <var><length></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><percentage></var> or<var><length></var> represents an
offset and must be preceded by a keyword, which specifies from which edge
- the offset is given. For example, ‘<code class=css>transform-origin:
- bottom 10px right 20px</code>’ represents a ‘<code
- class=css>10px</code>’ vertical offset up from the bottom edge and a
- ‘<code class=css>20px</code>’ horizontal offset leftward from
- the right edge. If three values are given, the missing offset is assumed
- to be zero.
+ of the bounding box the offset is given. For example, ‘<code
+ class=css>transform-origin: bottom 10px right 20px</code>’
+ represents a ‘<code class=css>10px</code>’ vertical offset up
+ from the bottom edge and a ‘<code class=css>20px</code>’
+ 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
- border box. Negative values represent an offset <em>outward</em> from the
- edge of the border box.
-
- <h3 id=svg-transform-origin><span class=secno>7.1. </span>The ‘<a
- href="#transform-origin"><code
- class=property>transform-origin</code></a>’ property for SVG
- elements</h3>
-
- <div class=issue>
- <p class=desc>Should we use ‘<code
- class=property>auto</code>’, or explicitly say that
- transform-origin is 0 0 for SVG elements, 50% 50% for all other elements
- (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15504">bug
- 15504</a>)?</p>
- </div>
-
- <p>To keep the ‘<a href="#effects"><code
- class=property>transform</code></a>’ property compatible with
- existing SVG content that assumed a top/left coordinate system origin, the
- user agent stylesheet must contain the following:
-
- <pre class=css>
-svg | * {
- transform-origin: top left;
-}
- </pre>
+ 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
@@ -1234,7 +1217,7 @@
<tr>
<td> <em>Percentages:</em>
- <td> refer to the size of the element's border box
+ <td> refer to the size of the element's bounding box
<tr>
<td> <em>Media:</em>
@@ -1405,15 +1388,19 @@
<dd> specifies a scale operation using the [1,sy] scaling vector, where sy
is given as the parameter.
- <dt> <code class=css>rotate(<angle>)</code>
+ <dt> <code class=css>rotate(<angle>[, <translation-value>,
+ <translation-value>])</code>
<dd> specifies a <a
href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">2D
rotation</a> by the angle specified in the parameter about the origin of
the element, as defined by the <a
- href="#transform-origin"><em>transform-origin</em></a> property. For
- example, rotate(90deg) would cause elements to appear rotated one-quarter
- of a turn in the clockwise direction.
+ href="#transform-origin"><em>transform-origin</em></a> property, or a
+ given point as to the origin of the element. For example, rotate(90deg)
+ would cause elements to appear rotated one-quarter of a turn in the
+ clockwise direction. With rotate(90deg, 100px, 100px) the element appears
+ rotated after a translation of 100px in the vertical and horizontal
+ direction. The actual origin of the element is not affected.
<dt> <code class=css>skew(<x-angle>[, <y-angle>])</code>
@@ -1448,21 +1435,15 @@
values in column-major order.
<dt> <code class=css>translate3d(<translation-value>,
- <translation-value>, <translation-value>)</code>
+ <translation-value>, <length>)</code>
<dd> specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and
tz being the first, second and third translation-value parameters
- respectively. <Percentage> values are not allowed in the tz
- translation-value, and if present will cause the propery value to be
- invalid.
+ respectively.
- <dt> <code class=css>translateZ(<translation-value>)</code>
+ <dt> <code class=css>translateZ(<length>)</code>
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a>
- by the given amount in the Z direction. <Percentage> values are not
- allowed in the translateZ translation-value, and if present will cause
- the propery value to be invalid.
+ <dd> specifies a 3D translation by the given amount in the Z direction.
<dt> <code class=css>scale3d(<number>, <number>,
<number>)</code>
@@ -1773,21 +1754,21 @@
<div class=idl-code>
<pre>
interface CSSMatrix {
- attribute float a;
- attribute float b;
- attribute float c;
- attribute float d;
- attribute float e;
- attribute float f;
+ attribute double a;
+ attribute double b;
+ attribute double c;
+ attribute double d;
+ attribute double e;
+ attribute double f;
void setMatrixValue(in DOMString string) raises(DOMException);
CSSMatrix multiply(in CSSMatrix secondMatrix);
CSSMatrix inverse() raises(DOMException);
- CSSMatrix translate(in float x, in float y);
- CSSMatrix scale(in float scaleX, in float scaleY);
- CSSMatrix skewX(in float angle);
- CSSMatrix skewY(in float angle);
- CSSMatrix rotate(in float angle);
+ CSSMatrix translate(in double x, in double y);
+ CSSMatrix scale(in double scaleX, in double scaleY);
+ CSSMatrix skewX(in double angle);
+ CSSMatrix skewY(in double angle);
+ CSSMatrix rotate(in double angle);
};</pre>
</div>
<br>
@@ -1799,7 +1780,7 @@
<dd>
<dl>
<dt> <code class=attribute-name><a id=DOM-CSSMatrix-matrix
- name=DOM-CSSMatrix-matrix>a-f</a></code> of type <code>float</code>
+ name=DOM-CSSMatrix-matrix>a-f</a></code> of type <code>double</code>
<dd> Each of these attributes represents one of the values in the 3x2
matrix.<br>
@@ -1928,12 +1909,12 @@
<div class=paramtable>
<dl>
<dt> <code class=parameter-name>x</code> of type
- <code>float</code>
+ <code>double</code>
<dd> The X component of the translation value.<br>
<dt> <code class=parameter-name>y</code> of type
- <code>float</code>
+ <code>double</code>
<dd> The Y component of the translation value.<br>
</dl>
@@ -1969,12 +1950,12 @@
<div class=paramtable>
<dl>
<dt> <code class=parameter-name>scaleX</code> of type
- <code>float</code>
+ <code>double</code>
<dd> The X component of the scale value.<br>
<dt> <code class=parameter-name>scaleY</code> of type
- <code>float</code>
+ <code>double</code>
<dd> The (optional) Y component of the scale value.<br>
</dl>
@@ -2011,7 +1992,7 @@
<div class=paramtable>
<dl>
<dt> <code class=parameter-name>angle</code> of type
- <code>float</code>
+ <code>double</code>
<dd> The angle of rotation.<br>
</dl>
@@ -2048,7 +2029,7 @@
<div class=paramtable>
<dl>
<dt> <code class=parameter-name>angle</code> of type
- <code>float</code>
+ <code>double</code>
<dd> The angle of skew along the X axis.<br>
</dl>
@@ -2085,7 +2066,7 @@
<div class=paramtable>
<dl>
<dt> <code class=parameter-name>angle</code> of type
- <code>float</code>
+ <code>double</code>
<dd> The angle of skew along the Y axis.<br>
</dl>
@@ -2211,7 +2192,7 @@
<td>no
- <td>refer to the size of the element's border box
+ <td>refer to the size of the element's bounding box
<td>visual
@@ -2226,7 +2207,7 @@
<td>no
- <td>refer to the size of the element's border box
+ <td>refer to the size of the element's bounding box
<td>visual
@@ -2239,13 +2220,14 @@
<length> ]? ] && [ center | [ top | bottom ] [
<percentage> | <length> ]? ]
- <td>0 0 for SVG elements, 50% 50% for all other elements
+ <td>0 0 for SVG elements without associated CSS layout box, 50% 50% for
+ all other elements
<td>transformable elements
<td>no
- <td>refer to the size of the element's border box
+ <td>refer to the size of the element's bounding box
<td>visual
@@ -2276,6 +2258,9 @@
<li>backface-visibility, <a href="#backface-visibility"
title=backface-visibility><strong>11.</strong></a>
+ <li>bounding box, <a href="#bounding-box"
+ title="bounding box"><strong>4.</strong></a>
+
<li>perpsective matrix, <a href="#perpsective-matrix"
title="perpsective matrix"><strong>4.</strong></a>
Index: Transforms.src.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Transforms.src.html,v
retrieving revision 1.23
retrieving revision 1.24
diff -u -d -r1.23 -r1.24
--- Transforms.src.html 7 Feb 2012 10:25:17 -0000 1.23
+++ Transforms.src.html 10 Feb 2012 05:38:04 -0000 1.24
@@ -176,6 +176,14 @@
this section.
</p>
<dl>
+ <dt id="TermBoundingBox"><dfn>bounding box</dfn></dt>
+ <dd>
+ <p>
+ A bounding box is the object bounding box for all SVG elements without an associated CSS layout box and
+ the border box for all other elements.
+ </p>
+ </dd>
+
<dt id="TermTransformableElement"><dfn>transformable element</dfn></dt>
<dd>
<p>
@@ -620,7 +628,7 @@
<em>Percentages:</em>
</td>
<td>
- refer to the size of the element's border box
+ refer to the size of the element's bounding box
</td>
</tr>
<tr>
@@ -716,7 +724,7 @@
<em>Initial:</em>
</td>
<td>
- 0 0 for SVG elements, 50% 50% for all other elements
+ 0 0 for SVG elements without associated CSS layout box, 50% 50% for all other elements
</td>
</tr>
<tr>
@@ -740,7 +748,7 @@
<em>Percentages:</em>
</td>
<td>
- refer to the size of the element's border box
+ refer to the size of the element's bounding box
</td>
</tr>
<tr>
@@ -774,13 +782,17 @@
the second represents the vertical position (or
offset). <var><percentage></var> and <var><length></var>
values here represent an offset of the transform origin from the top left corner
- of the element's border box.
- </p>
+ of the element's bounding box.
+ </p>
+
+ <p>For SVG elements without an associated CSS layout box the <var><length></var>
+ values represent an offset from the point of origin of the element's local coordinate space.
+ </p>
<p>If three or four values are given, then
each <var><percentage></var> or<var><length></var>
represents an offset and must be preceded by a keyword,
- which specifies from which edge the offset is given. For example,
+ 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
@@ -788,23 +800,10 @@
</p>
<p>Positive values represent an offset <em>inward</em> from the edge of
- the border box. Negative values represent an offset
- <em>outward</em> from the edge of the border box.
- </p>
-
- <h3 id="svg-transform-origin">The 'transform-origin' property for SVG elements</h3>
-
- <div class="issue">
- <p class="desc">Should we use 'auto', or explicitly say that transform-origin is 0 0 for SVG elements, 50% 50% for all other elements (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15504">bug 15504</a>)?</p>
- </div>
- <p>To keep the 'transform' property compatible with existing SVG content that assumed a top/left
- coordinate system origin, the user agent stylesheet must contain the following:</p>
-
- <pre class="css">
-svg | * {
- transform-origin: top left;
-}
- </pre>
+ the bounding box. Negative values represent an offset
+ <em>outward</em> from the edge of the bounding box.
+ </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>
@@ -1057,7 +1056,7 @@
<em>Percentages:</em>
</td>
<td>
- refer to the size of the element's border box
+ refer to the size of the element's bounding box
</td>
</tr>
<tr>
@@ -1255,11 +1254,11 @@
specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.
</dd>
<dt>
- <code class="css">rotate(<angle>)</code>
+ <code class="css">rotate(<angle>[, <translation-value>, <translation-value>])</code>
</dt>
<dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">2D rotation</a> by the angle specified in the parameter about the origin of the element, as defined by the <em>transform-origin</em> property. For example, rotate(90deg) would cause elements to appear
- rotated one-quarter of a turn in the clockwise direction.
+ specifies a <a href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">2D rotation</a> by the angle specified in the parameter about the origin of the element, as defined by the <em>transform-origin</em> property, or a given point as to the origin of the element. For example, rotate(90deg) would cause elements to appear
+ rotated one-quarter of a turn in the clockwise direction. With rotate(90deg, 100px, 100px) the element appears rotated after a translation of 100px in the vertical and horizontal direction. The actual origin of the element is not affected.
</dd>
<dt>
<code class="css">skew(<x-angle>[, <y-angle>])</code>
@@ -1292,16 +1291,16 @@
specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order.
</dd>
<dt>
- <code class="css">translate3d(<translation-value>, <translation-value>, <translation-value>)</code>
+ <code class="css">translate3d(<translation-value>, <translation-value>, <length>)</code>
</dt>
<dd>
- specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively. <Percentage> values are not allowed in the tz translation-value, and if present will cause the propery value to be invalid.
+ specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively.
</dd>
<dt>
- <code class="css">translateZ(<translation-value>)</code>
+ <code class="css">translateZ(<length>)</code>
</dt>
<dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a> by the given amount in the Z direction. <Percentage> values are not allowed in the translateZ translation-value, and if present will cause the propery value to be invalid.
+ specifies a 3D translation by the given amount in the Z direction.
</dd>
<dt>
<code class="css">scale3d(<number>, <number>, <number>)</code>
@@ -1625,21 +1624,21 @@
<div class='idl-code'>
<pre>
interface CSSMatrix {
- attribute float a;
- attribute float b;
- attribute float c;
- attribute float d;
- attribute float e;
- attribute float f;
+ attribute double a;
+ attribute double b;
+ attribute double c;
+ attribute double d;
+ attribute double e;
+ attribute double f;
void setMatrixValue(in DOMString string) raises(DOMException);
CSSMatrix multiply(in CSSMatrix secondMatrix);
CSSMatrix inverse() raises(DOMException);
- CSSMatrix translate(in float x, in float y);
- CSSMatrix scale(in float scaleX, in float scaleY);
- CSSMatrix skewX(in float angle);
- CSSMatrix skewY(in float angle);
- CSSMatrix rotate(in float angle);
+ CSSMatrix translate(in double x, in double y);
+ CSSMatrix scale(in double scaleX, in double scaleY);
+ CSSMatrix skewX(in double angle);
+ CSSMatrix skewY(in double angle);
+ CSSMatrix rotate(in double angle);
};</pre>
</div><br>
</dd> <!-- IDL -->
@@ -1650,7 +1649,7 @@
<dd>
<dl>
<dt>
- <code class='attribute-name'><a id="DOM-CSSMatrix-matrix" name='DOM-CSSMatrix-matrix'>a-f</a></code> of type <code>float</code>
+ <code class='attribute-name'><a id="DOM-CSSMatrix-matrix" name='DOM-CSSMatrix-matrix'>a-f</a></code> of type <code>double</code>
</dt>
<dd>
Each of these attributes represents one of the values in the 3x2 matrix.<br>
@@ -1796,13 +1795,13 @@
<div class='paramtable'>
<dl>
<dt>
- <code class='parameter-name'>x</code> of type <code>float</code>
+ <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>float</code>
+ <code class='parameter-name'>y</code> of type <code>double</code>
</dt>
<dd>
The Y component of the translation value.<br>
@@ -1841,13 +1840,13 @@
<div class='paramtable'>
<dl>
<dt>
- <code class='parameter-name'>scaleX</code> of type <code>float</code>
+ <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>float</code>
+ <code class='parameter-name'>scaleY</code> of type <code>double</code>
</dt>
<dd>
The (optional) Y component of the scale value.<br>
@@ -1886,7 +1885,7 @@
<div class='paramtable'>
<dl>
<dt>
- <code class='parameter-name'>angle</code> of type <code>float</code>
+ <code class='parameter-name'>angle</code> of type <code>double</code>
</dt>
<dd>
The angle of rotation.<br>
@@ -1926,7 +1925,7 @@
<div class='paramtable'>
<dl>
<dt>
- <code class='parameter-name'>angle</code> of type <code>float</code>
+ <code class='parameter-name'>angle</code> of type <code>double</code>
</dt>
<dd>
The angle of skew along the X axis.<br>
@@ -1966,7 +1965,7 @@
<div class='paramtable'>
<dl>
<dt>
- <code class='parameter-name'>angle</code> of type <code>float</code>
+ <code class='parameter-name'>angle</code> of type <code>double</code>
</dt>
<dd>
The angle of skew along the Y axis.<br>
Index: ChangeLog
===================================================================
RCS file: /sources/public/csswg/css3-transforms/ChangeLog,v
retrieving revision 1.10
retrieving revision 1.11
diff -u -d -r1.10 -r1.11
--- ChangeLog 7 Feb 2012 10:25:17 -0000 1.10
+++ ChangeLog 10 Feb 2012 05:38:04 -0000 1.11
@@ -1,3 +1,11 @@
+2012-02-09 dschulze@adobe.com
+ Introduce new term 'bounding box'.
+ Specify transform origin for SVG elements.
+ Change float to double for CSSOM.
+ Added two optional offset arguments for rotate().
+ Changed Z argument type to <length> in translateZ() and translate3d().
+ Removed solved issues.
+
2012-02-07 simon.fraser@apple.com
Removed Vincent Hardy from authors list at his request.
Added links to the sections describing how to compute the transform and perspective matrices.
Received on Friday, 10 February 2012 05:38:09 UTC