Percentage values on transform properties are relative to the bounding box of the referencing element on resources.

Author: dirkschulze

css3-transforms/ChangeLog

@@ -1,3 +1,7 @@
+2012-10-26 dschulze@adobe.com
+    Percentage values on transform properties are relative to the bounding box of the referencing element on resources.
+    https://www.w3.org/Bugs/Public/show_bug.cgi?id=19638
+
 2012-10-21 dschulze@adobe.com
     Define that translation units on matrices are in CSS pixel in the current coordinate system.
 

css3-transforms/Overview.html

@@ -12,11 +12,11 @@
    rel=dcterms.rights>
   <meta content="CSS Transforms" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2012-10-22 name=dcterms.issued>
+  <meta content=2012-10-26 name=dcterms.issued>
   <meta content="http://dev.w3.org/csswg/css3-transforms/"
    name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
-  <meta content="http://www.w3.org/TR/2012/ED-css3-transforms-20121022/"
+  <meta content="http://www.w3.org/TR/2012/ED-css3-transforms-20121026/"
    name=dcterms.identifier>
   <link href="../default.css" rel=stylesheet type="text/css">
   <script defer=defer
@@ -26,19 +26,6 @@
       .term {
         font-style: italic;
       }
-
-     .todo {
-         font-weight: bold;
-         border-left: 0.5em solid #f44;
-         padding-left: 1em;
-         margin-top: 0.5em;
-         color: #a0a0a0;
-     }
-
-     .todo:before {
-         content: "TO DO : ";
-         color: #f44;
-     }
   </style>
   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
    type="text/css">
@@ -50,15 +37,15 @@
 
    <h1>CSS Transforms</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 22 October
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 October
     2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd> <a
-     href="http://www.w3.org/TR/2012/ED-css3-transforms-20121022/">http://dev.w3.org/csswg/css3-transforms/</a>
-     <!--http://www.w3.org/TR/2012/WD-css3-transforms-20121022/-->
+     href="http://www.w3.org/TR/2012/ED-css3-transforms-20121026/">http://dev.w3.org/csswg/css3-transforms/</a>
+     <!--http://www.w3.org/TR/2012/WD-css3-transforms-20121026/-->
 
     <dt>Latest version:
 
@@ -2045,14 +2032,9 @@ <h3 id=svg-user-coordinate-space><span class=secno>13.6. </span> User
    time when these elements are referenced (i.e., the user coordinate system
    for the element referencing the ‘<code class=property>pattern</code>’
    element via a ‘<code class=property>fill</code>’ or ‘<code
-   class=property>stroke</code>’ property).
-
-  <p class=issue> Should percentage values on transforms be relative the
-   viewport (the case for all other attributes on the mentioned attributes),
-   or should the be reletive the referencing objects bounding box (like it is
-   for all other transformable elements). The later choice seems to be more
-   consistent within CSS Transforms. See <a
-   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19638">Bug 19638</a>.
+   class=property>stroke</code>’ property). Percentage values are relative
+   to the <a href="#bounding-box">bounding box</a> of the referencing
+   element.
 
   <p> In particualar the ‘<code class=property>patternUnit</code>’,
    ‘<code class=property>gradientUnit</code>’ and ‘<code
@@ -2069,11 +2051,6 @@ <h3 id=svg-user-coordinate-space><span class=secno>13.6. </span> User
    to the element's <a class=term href="#bounding-box">bounding box</a>.
 
   <div class=example>
-   <p class=issue> The result in the example below depends on the decision
-    made on the previous issue. See <a
-    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19638">Bug
-    19638</a>.
-
    <p> The ‘<a href="#transform-origin"><code
     class=property>transform-origin</code></a>’ property on the pattern in
     the following example specifies a ‘<code class=css>50%</code>’
@@ -2095,7 +2072,7 @@ <h3 id=svg-user-coordinate-space><span class=secno>13.6. </span> User
     &lt;/pattern&gt;
     &lt;/defs&gt;
 
-    &lt;rect width="100" height="100" fill="url(#pattern-1)" /&gt;
+    &lt;rect width="200" height="200" fill="url(#pattern-1)" /&gt;
 &lt;/svg&gt;</pre>
 
    <p> An SVG ‘<code class=property>pattern</code>’ element doesn't have
@@ -2104,7 +2081,7 @@ <h3 id=svg-user-coordinate-space><span class=secno>13.6. </span> User
     instead to solve the relative values of the ‘<a
     href="#transform-origin"><code
     class=property>transform-origin</code></a>’ property. Therefore the
-    point of origin will get translated by 50 pixels temporarily to rotate
+    point of origin will get translated by 100 pixels temporarily to rotate
     the user space of the ‘<code class=property>pattern</code>’ elements
     content.
   </div>
@@ -3176,7 +3153,7 @@ <h2 id=mathematical-description><span class=secno>21. </span> Mathematical
    alt="\begin{bmatrix} m11 & m21 & m31 & m41 \\ m12 & m22 & m32 & m42 \\ m13 & m23 & m33 & m43 \\ m14 & m24 & m34 & m44 \end{bmatrix}"
    height=106 src=4x4matrix.png width=222>
 
-  <p>One translation unit on a matrix is equivalent to 1 pixel in the local
+  <p> One translation unit on a matrix is equivalent to 1 pixel in the local
    coordinate system of the element.
 
   <ul>

css3-transforms/Transforms.src.html

@@ -10,19 +10,6 @@
       .term {
         font-style: italic;
       }
-
-     .todo {
-         font-weight: bold;
-         border-left: 0.5em solid #f44;
-         padding-left: 1em;
-         margin-top: 0.5em;
-         color: #a0a0a0;
-     }
-
-     .todo:before {
-         content: "TO DO : ";
-         color: #f44;
-     }
   </style>
   <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" >
 
@@ -1912,14 +1899,8 @@ <h3 id="svg-user-coordinate-space">
                 attributes represents values in the current user coordinate system in place at the
                 time when these elements are referenced (i.e., the user coordinate system for the
                 element referencing the 'pattern' element via a 'fill' or 'stroke' property).
-              </p>
-
-              <p class="issue">
-                Should percentage values on transforms be relative the viewport (the case for all
-                other attributes on the mentioned attributes), or should the be reletive the 
-                referencing objects bounding box (like it is for all other transformable elements).
-                The later choice seems to be more consistent within CSS Transforms.
-                See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19638">Bug 19638</a>.
+                Percentage values are relative to the <span>bounding box</span> of the
+                referencing element.
               </p>
 
               <p>
@@ -1935,11 +1916,6 @@ <h3 id="svg-user-coordinate-space">
               </p>
 
               <div class="example">
-                <p class="issue">
-                  The result in the example below depends on the decision made on the previous issue.
-                  See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19638">Bug 19638</a>.
-                </p>
-
                 <p>
                   The 'transform-origin' property on the pattern in the following example specifies
                   a ''50%'' translation of the origin in the horizontal and vertical dimension. The
@@ -1960,14 +1936,14 @@ <h3 id="svg-user-coordinate-space">
     &lt;/pattern&gt;
     &lt;/defs&gt;
 
-    &lt;rect width="100" height="100" fill="url(#pattern-1)" /&gt;
+    &lt;rect width="200" height="200" fill="url(#pattern-1)" /&gt;
 &lt;/svg&gt;</pre>
 
                 <p>
                   An SVG 'pattern' element doesn't have a bounding box. The <span
                   class="term">bounding box</span> of the referencing 'rect' element is used
                   instead to solve the relative values of the 'transform-origin' property. Therefore
-                  the point of origin will get translated  by 50 pixels temporarily to rotate the
+                  the point of origin will get translated  by 100 pixels temporarily to rotate the
                   user space of the 'pattern' elements content.
                 </p>
               </div>
@@ -3060,7 +3036,9 @@ <h2 id="mathematical-description">
               </p>
               <p>
               <img src="4x4matrix.png" alt="\begin{bmatrix} m11 & m21 & m31 & m41 \\ m12 & m22 & m32 & m42 \\ m13 & m23 & m33 & m43 \\ m14 & m24 & m34 & m44 \end{bmatrix}" width="222" height="106">
-              <p>One translation unit on a matrix is equivalent to 1 pixel in the local coordinate system of the element.</p>
+              <p>
+                One translation unit on a matrix is equivalent to 1 pixel in the local coordinate system of the element.
+              </p>
 
               <ul>
                 <li id="MatrixDefined">