- From: Simon Fraser via cvs-syncmail <cvsmail@w3.org>
- Date: Sun, 29 Jan 2012 10:10:00 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-transforms
In directory hutz:/tmp/cvs-serv18218
Modified Files:
ChangeLog Overview.html Transforms.src.html
Log Message:
2012-01-29 simon.fraser@apple.com
Minor edits in various places.
Made the issue-markers float:left and clear:both, so they don't overlap.
Fix missing 'the': https://www.w3.org/Bugs/Public/show_bug.cgi?id=15757
Index: ChangeLog
===================================================================
RCS file: /sources/public/csswg/css3-transforms/ChangeLog,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- ChangeLog 27 Jan 2012 07:53:14 -0000 1.1
+++ ChangeLog 29 Jan 2012 10:09:57 -0000 1.2
@@ -1,3 +1,8 @@
+2012-01-29 simon.fraser@apple.com
+ Minor edits in various places.
+ Made the issue-markers float:left and clear:both, so they don't overlap.
+ Fix missing 'the': https://www.w3.org/Bugs/Public/show_bug.cgi?id=15757
+
2012-01-27 simon.fraser@apple.com
Add in 3D transform functions in their own section.
Move the basic 2D rendering examples up into the rendering model section.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Overview.html,v
retrieving revision 1.11
retrieving revision 1.12
diff -u -d -r1.11 -r1.12
--- Overview.html 28 Jan 2012 02:37:28 -0000 1.11
+++ Overview.html 29 Jan 2012 10:09:58 -0000 1.12
@@ -22,19 +22,20 @@
.term {
font-style: italic;
}
-
+
div.issue-marker {
- position: absolute;
+ float: left;
width: 20ex;
margin-left: -26ex;
padding-right: 0.5em;
font-weight: normal;
font-size: 11px;
text-align: right;
- background-color: white;
+ background-color: transparent;
font-size: 90%;
padding-top: 0px;
padding-bottom: 0px;
+ clear: both;
}
div.issue-marker a {
@@ -73,15 +74,15 @@
<h1>CSS Transforms</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 28 January
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 January
2012</h2>
<dl>
<dt>This version:
<dd> <a
- href="http://www.w3.org/TR/2012/ED-css3-transforms-20120128/">http://dev.w3.org/csswg/css3-transforms/</a>
- <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120128-->
+ href="http://www.w3.org/TR/2012/ED-css3-transforms-20120129/">http://dev.w3.org/csswg/css3-transforms/</a>
+ <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120129-->
<dt>Latest version:
@@ -468,10 +469,11 @@
}
</pre>
- <p>Move the element by 80 pixels in both the X and Y directions, then
- scale the element by 150%, then rotate it 45 degrees clockwise about the
- Z axis. Note that the scale and rotate operate about the center of the
- element, since the element has the default transform-origin of 50% 50%.</p>
+ <p>This transform moves the element by 80 pixels in both the X and Y
+ directions, then scales the element by 150%, then rotates it 45°
+ clockwise about the Z axis. Note that the scale and rotation operate
+ about the center of the element, since the element has the default
+ transform-origin of 50% 50%.</p>
<div class=figure> <img alt="The transform specified above"
src="compound_transform.png"></div>
@@ -490,9 +492,9 @@
<!-- This "in the HTML namespace" is awkward. Is there a better way? -->
<p> In the HTML namespace, the transform property does not affect the flow
- of the content surrounding the transformed element. However, the value of
+ of the content surrounding the transformed element. However, the extent of
the overflow area takes into account transformed elements. This behavior
- is similar to what happens when elements are translated via relative
+ is similar to what happens when elements are offset via relative
positioning. Therefore, if the value of the <span
class=prop-name>‘<code class=property>overflow</code>’</span>
property is <span class=prop-value>‘<code
@@ -519,7 +521,7 @@
same plane as their containing block. Often this is the plane shared by
the rest of the page. Two-dimensional transform functions can alter the
appearance of an element, but that element is still rendered into the same
- plane as the containing block.
+ plane as its containing block.
<p> Three-dimensional transforms can result in transformation matrices with
a non-zero Z component<!-- clarify -->, potentially lifting them off the
@@ -527,8 +529,8 @@
three-dimensional transformations could potentially render in an
front-to-back order that different from the normal CSS rendering order,
and intersect with each other. Whether they do so depends on whether the
- element is a member of a <span class=term>3D rendering context</span> or
- not, as described below.
+ element is a member of a <span class=term>3D rendering context</span>, as
+ described below.
<div class="issue issue-marker">
<p class=desc>This description does not exactly match what WebKit
@@ -609,34 +611,20 @@
given element, as described below.
<!-- More detail required, probably with matrices -->
- <p> A <span class=term>3D rendering context</span> is established via the
- following:
-
- <ul>
- <li> A transformable element has a value for the <a href="#perspective"
- type=prop-name>perspective</a> property which is not ‘<code
- class=property>none</code>’ and greater than 0, and which is not
- itself part of a 3D rendering context.</li>
- <!-- Part of is wooly. Need to clarify. -->
-
- <li> An transformable element whose computed value of <a
- href="#transform-style" type=prop-name>transform-style</a> is <span
- class=prop-value>‘<code class=css>perserve-3d</code>’</span>,
- and which itself is not part of a 3D rendering context.
- </ul>
-
- <div class="issue issue-marker">
- <p class=desc>Should intersection behavior be normative?</p>
- </div>
+ <p> A <span class=term>3D rendering context</span> is <em>established</em>
+ by a a transformable element which has a computed value of <a
+ href="#transform-style" type=prop-name>transform-style</a> is <span
+ class=prop-value>‘<code class=css>preserve-3d</code>’</span>,
+ and which itself is not part of a 3D rendering context. Note that such an
+ element is always a containing block.
<p> An element whose computed value for <a href="#transform-style"
type=prop-name>transform-style</a> is <span style=prop-value>‘<code
class=css>preserve-3d</code>’</span>, and which is itself a member
of a <span class=term>3D rendering context</span>, extends the 3D
- rendering context of which it is a member to the elements for which it
- acts as a containing block.
+ rendering context of which it is a member.
- <p> An element participates in a <span class=term>3D rendering
+ <p> An element <em>participates</em> in a <span class=term>3D rendering
context</span> if its containing block establishes or extends a <span
class=term>3D rendering context</span>.</p>
<!-- Need more exposition here on establishes vs. participates -->
@@ -652,8 +640,9 @@
perspective, multiply that into the matrix, taking perspective-origin
into account.
- <li>For each ancestor of the element in question, compute a transformation
- matrix by:
+ <li>For each containing block between the root of the <span class=term>3D
+ rendering context</span> and the element in question, compute a
+ transformation matrix by:
<ol>
<li>applying perpsective and perspective-origin, if any
@@ -665,6 +654,10 @@
</ol>
The target matrix is then multiplied with the matrix for this ancestor.
</ol>
+
+ <div class="issue issue-marker">
+ <p class=desc>Should intersection behavior be normative?</p>
+ </div>
<!-- Discuss whether an element that establishes a 3D rendering context also participates in it; notably,
does the foreground/background of the element intersect with transformed members of the 3D rendering context? -->
<!-- Discuss whether non-transformed memebers of the <span class="term">3D rendering context</span> participate in intersection -->
@@ -814,7 +807,12 @@
as a two-dimensional matrix with no loss of information, then a matrix()
value is returned, otherwise a matrix3d() value. For elements with no
transform applied, the computed value is ‘<code
- class=property>none</code>’.</p>
+ class=property>none</code>’.
+
+ <p>Any value other than ‘<code class=property>none</code>’ for
+ the transform results in the creation of both a stacking context and a
+ containing block. The object acts as a containing block for fixed
+ positioned descendants.</p>
<!-- ======================================================================================================= -->
<h3 id=svg-transform><span class=secno>6.1. </span>The SVG transform
@@ -1126,6 +1124,10 @@
<td> Same as specified value.
</table>
+ <div class=issue>
+ <p>Does perspective establish a containing block?
+ </div>
+
<p> If the value is <span class=prop-value>‘<code
class=property>none</code>’</span>, less than or equal to 0 no
perspective transform is applied.
@@ -1547,7 +1549,7 @@
<ul>
<li> Each transform function is animated with its corresponding
destination function in isolation using the rules described above. The
- individual values are then applied as a list to produce resulting
+ individual values are then applied as a list to produce the resulting
transform value.
</ul>
Index: Transforms.src.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Transforms.src.html,v
retrieving revision 1.14
retrieving revision 1.15
diff -u -d -r1.14 -r1.15
--- Transforms.src.html 28 Jan 2012 02:37:28 -0000 1.14
+++ Transforms.src.html 29 Jan 2012 10:09:58 -0000 1.15
@@ -18,19 +18,20 @@
.term {
font-style: italic;
}
-
+
div.issue-marker {
- position: absolute;
+ float: left;
width: 20ex;
margin-left: -26ex;
padding-right: 0.5em;
font-weight: normal;
font-size: 11px;
text-align: right;
- background-color: white;
+ background-color: transparent;
font-size: 90%;
padding-top: 0px;
padding-bottom: 0px;
+ clear: both;
}
div.issue-marker a {
@@ -284,7 +285,7 @@
transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
}
</pre>
- <p>Move the element by 80 pixels in both the X and Y directions, then scale the element by 150%, then rotate it 45 degrees clockwise about the Z axis. Note that the scale and rotate operate about the center of the element, since the element has the default transform-origin of 50% 50%.</p>
+ <p>This transform moves the element by 80 pixels in both the X and Y directions, then scales the element by 150%, then rotates it 45° clockwise about the Z axis. Note that the scale and rotation operate about the center of the element, since the element has the default transform-origin of 50% 50%.</p>
<div class="figure">
<img src="compound_transform.png" alt="The transform specified above">
</div>
@@ -303,9 +304,9 @@
<!-- This "in the HTML namespace" is awkward. Is there a better way? -->
<p>
In the HTML namespace, the transform property does not affect the flow of the content
- surrounding the transformed element. However, the value of the overflow
+ surrounding the transformed element. However, the extent of the overflow
area takes into account transformed elements. This behavior is similar
- to what happens when elements are translated via relative positioning.
+ to what happens when elements are offset via relative positioning.
Therefore, if the value of the <span class="prop-name">'overflow'</span>
property is <span class="prop-value">'scroll'</span> or <span
class="prop-value">'auto'</span>, scrollbars will appear as needed to
@@ -329,7 +330,7 @@
Normally, elements render as flat planes, and are rendered into the same plane
as their containing block. Often this is the plane shared by the rest of the page.
Two-dimensional transform functions can alter the appearance of an element, but
- that element is still rendered into the same plane as the containing block.
+ that element is still rendered into the same plane as its containing block.
</p>
<p>
Three-dimensional transforms can result in transformation matrices with a non-zero
@@ -337,7 +338,7 @@
containing block. Because of this, elements with three-dimensional transformations
could potentially render in an front-to-back order that different from the normal CSS rendering order,
and intersect with each other. Whether they do so depends on whether the element is a member
- of a <span class="term">3D rendering context</span> or not, as described below.
+ of a <span class="term">3D rendering context</span>, as described below.
</p>
<div class="issue issue-marker">
<p class="desc">This description does not exactly match what WebKit implements. Perhaps
@@ -411,32 +412,18 @@
</p>
<p>
- A <span class="term">3D rendering context</span> is established via the following:
+ A <span class="term">3D rendering context</span> is <em>established</em> by a
+ a transformable element which has a computed value of <span type="prop-name">transform-style</span> is
+ <span class="prop-value">'preserve-3d'</span>, and which itself is not part of a 3D rendering context.
+ Note that such an element is always a containing block.
</p>
- <ul>
- <li>
- A transformable element has a value for the <span type="prop-name">perspective</span> property
- which is not 'none' and greater than 0, and which is not itself part of a 3D rendering context.
- </li>
- <!-- Part of is wooly. Need to clarify. -->
- <li>
- An transformable element whose computed value of <span type="prop-name">transform-style</span> is
- <span class="prop-value">'perserve-3d'</span>, and which itself is not part of a 3D rendering context.
- </li>
- </ul>
-
- <div class="issue issue-marker">
- <p class="desc">Should intersection behavior be normative?</p>
- </div>
<p>
An element whose computed value for <span type="prop-name">transform-style</span> is
<span style="prop-value">'preserve-3d'</span>, and which is itself a member of a
- <span class="term">3D rendering context</span>, extends the 3D rendering context of which it is a member
- to the elements for which it acts as a containing block.
+ <span class="term">3D rendering context</span>, extends the 3D rendering context of which it is a member.
</p>
-
<p>
- An element participates in a <span class="term">3D rendering context</span> if its containing block
+ An element <em>participates</em> in a <span class="term">3D rendering context</span> if its containing block
establishes or extends a <span class="term">3D rendering context</span>.
</p>
@@ -451,7 +438,8 @@
<li>Start with the identity matrix</li>
<li>If the root of the <span class="term">3D rendering context</span> has perspective, multiply that into
the matrix, taking perspective-origin into account.</li>
- <li>For each ancestor of the element in question, compute a transformation matrix by:
+ <li>For each containing block between the root of the <span class="term">3D rendering context</span>
+ and the element in question, compute a transformation matrix by:
<ol>
<li>applying perpsective and perspective-origin, if any</li>
<li>applying a translation equivalent to the horizontal and vertical offset of the element relative to
@@ -462,6 +450,10 @@
</li>
</ol>
+ <div class="issue issue-marker">
+ <p class="desc">Should intersection behavior be normative?</p>
+ </div>
+
<!-- Discuss whether an element that establishes a 3D rendering context also participates in it; notably,
does the foreground/background of the element intersect with transformed members of the 3D rendering context? -->
<!-- Discuss whether non-transformed memebers of the <span class="term">3D rendering context</span> participate in intersection -->
@@ -632,6 +624,8 @@
</div>
<p>The computed value of the transform property is a matrix() or matrix3d() value that describes the matrix that results from concatenating the individual transform functions. If the resulting matrix can be represented as a two-dimensional matrix with no loss of information, then a matrix() value is returned, otherwise a matrix3d() value. For elements with no transform applied, the computed value is 'none'.</p>
+ <p>Any value other than 'none' for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.</p>
+
<!-- ======================================================================================================= -->
<h3 id="svg-transform">The SVG transform attribute</h3>
@@ -983,6 +977,7 @@
</tbody>
</table>
+ <div class="issue"><p>Does perspective establish a containing block?</p></div>
<p>
If the value is <span
class="prop-value">'none'</span>, less than or equal to 0 no perspective transform is applied.
@@ -1441,7 +1436,7 @@
<li>
Each transform function is animated with its corresponding
destination function in isolation using the rules described above.
- The individual values are then applied as a list to produce
+ The individual values are then applied as a list to produce the
resulting transform value.
</li>
</ul>
Received on Sunday, 29 January 2012 10:10:03 UTC