- 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