W3C home > Mailing lists > Public > public-css-commits@w3.org > January 2012

csswg/css3-transforms ChangeLog,1.1,1.2 Overview.html,1.11,1.12 Transforms.src.html,1.14,1.15

From: Simon Fraser via cvs-syncmail <cvsmail@w3.org>
Date: Sun, 29 Jan 2012 10:10:00 +0000
To: public-css-commits@w3.org
Message-Id: <E1RrRhw-0004k8-AG@lionel-hutz.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&deg;
+    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>&lsquo;<code class=property>overflow</code>&rsquo;</span>
    property is <span class=prop-value>&lsquo;<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 &lsquo;<code
-    class=property>none</code>&rsquo; 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>&lsquo;<code class=css>perserve-3d</code>&rsquo;</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>&lsquo;<code class=css>preserve-3d</code>&rsquo;</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>&lsquo;<code
    class=css>preserve-3d</code>&rsquo;</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 &lsquo;<code
-   class=property>none</code>&rsquo;.</p>
+   class=property>none</code>&rsquo;.
+
+  <p>Any value other than &lsquo;<code class=property>none</code>&rsquo; for
+   the transform results in the creation of both a stacking context and a
+   containing block. The object acts as 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>&lsquo;<code
    class=property>none</code>&rsquo;</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&deg; 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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:26:09 UTC