[css-transforms-1] Backport more math from SVG spec. Mostly in examples. w3c#909

Author: dirkschulze

css-transforms-1/Overview.bs

@@ -180,9 +180,7 @@ The Transform Rendering Model {#transform-rendering}
 
 <em>This section is normative.</em>
 
-Specifying a value other than ''transform/none'' for the 'transform' property establishes a new [=local coordinate system=] at the element that it is applied to. The mapping from where the element would have rendered into that local coordinate system is given by the element's [=transformation matrix=]. Transformations are cumulative. That is, elements establish their local coordinate system within the coordinate system of their parent. From the perspective of the user, an element effectively accumulates all the 'transform' properties of its ancestors as well as any local transform applied to it. The accumulation of these transforms defines a [=current transformation matrix=] for the element.
-
-The coordinate space is a coordinate system with two axes: the X axis increases horizontally to the right; the Y axis increases vertically downwards.
+Specifying a value other than ''transform/none'' for the 'transform' property establishes a new [=local coordinate system=] at the element that it is applied to. The mapping from where the element would have rendered into that local coordinate system is given by the element's [=transformation matrix=].
 
 <p id="transformation-matrix-computation">
 The [=transformation matrix=] is computed from the 'transform' and 'transform-origin' properties as follows:
@@ -192,8 +190,63 @@ The [=transformation matrix=] is computed from the 'transform' and 'transform-or
 3. Multiply by each of the transform functions in 'transform' property from left to right
 4. Translate by the negated computed X and Y values of 'transform-origin'
 
+<div class=example>
+
+  An element has a 'transform' property that is not ''transform/none''.
+
+<pre><code highlight=css>
+div {
+  transform-origin: 0 0;
+  transform: translate(-10px, -20px) scale(2) rotate(45deg);
+}
+</code></pre>
+
+  The 'transform-origin' property is set to ''0 0'' and can be omitted. The [=transformation matrix=] <i>TM</i> gets computed by post-multying the <<translate()>>, <<scale()>> and <<rotate()>> <<transform-function>>s. 
+
+  <img src="images/tm.png" alt="TM = \begin{bmatrix} 1 & 0 & 0 & -10 \\ 0 & 1 & 0 & -20 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \cdot \begin{bmatrix} 2 & 0 & 0 & 0 \\ 0 & 2 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \cdot \begin{bmatrix} cos(45) & -sin(45) & 0 & 0 \\ sin(45) & cos(45) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="627">
+</div>
+
 Transforms apply to [=transformable elements=].
 
+The coordinate space is a coordinate system with two axes: the X axis increases horizontally to the right; the Y axis increases vertically downwards.
+
+Transformations are cumulative. That is, elements establish their local coordinate system within the coordinate system of their parent.
+
+To map a point <i>p<sub>local</sub></i> with the coordinate pair <i>x<sub>local</sub></i> and <i>y<sub>local</sub></i> from the [=local coordinate system=] of an element into the parent's coordinate system, post-multiply the [=transformation matrix=] <i>TM</i> of the element by <i>p<sub>local</sub></i>. The result is the mapped point <i>p<sub>parent</sub></i> with the coordinate pair <i>x<sub>parent</sub></i> and <i>y<sub>parent</sub></i> in the parent's [=local coordinate system=].
+
+<img src="images/tm-map.png" alt="\begin{bmatrix} x_{parent} \\ y_{parent} \\ 0 \\ 1 \end{bmatrix} = TM \cdot \begin{bmatrix} x_{local} \\ y_{local} \\ 0 \\ 1 \end{bmatrix}" width="276">
+
+From the perspective of the user, an element effectively accumulates all the 'transform' properties of its ancestors as well as any local transform applied to it. The accumulation of these transforms defines a [=current transformation matrix=] (CTM) for the element.
+
+<p id="current-transformation-matrix-computation">
+The [=current transformation matrix=] is computed by post-multiplying all transformation matrices starting from the [=viewport coordinate system=] and ending with the [=transformation matrix=] of an element.
+
+<div class=example>
+This example has multiple, nested elements in an SVG document. Some elements get transformed by a [=transformation matrix=].
+
+<pre><code highlight=html>
+&lt;svg xmlns="http://www.w3.org/2000/svg">
+  &lt;g transform="translate(-10, 20)">
+    &lt;g transform="scale(2)">
+      &lt;rect width="200" height="200" transform="rotate(45)"/>
+    &lt;/g>
+  &lt;/g>
+&lt;/svg>
+</code></pre>
+
+* ''translate(-10, 20)'' computes to the transformation matrix <i>T1</i>
+* ''scale(2)'' computes to the transformation matrix <i>T2</i>
+* ''rotate(45)'' computes to the transformation matrix <i>T3</i>
+
+The CTM for the SVG <a element>rect</a> element is the result of multiplying <i>T1</i>, <i>T2</i> and <i>T3</i> in order.
+
+<img src="images/ctm.png" alt="CTM = \begin{bmatrix} 1 & 0 & 0 & -10 \\ 0 & 1 & 0 & -20 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \cdot \begin{bmatrix} 2 & 0 & 0 & 0 \\ 0 & 2 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \cdot \begin{bmatrix} cos(45) & -sin(45) & 0 & 0 \\ sin(45) & cos(45) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="627">
+
+To map a point <i>p<sub>local</sub></i> with the coordinate pair <i>x<sub>local</sub></i> and <i>y<sub>local</sub></i> from the [=local coordinate system=] of the SVG <a element>rect</a> element into the [=viewport coordinate system=], post-multiply the [=current transformation matrix=] <i>CTM</i> of the element by <i>p<sub>local</sub></i>. The result is the mapped point <i>p<sub>viewport</sub></i> with the coordinate pair <i>x<sub>viewport</sub></i> and <i>y<sub>viewport</sub></i> in the [=viewport coordinate system=].
+
+<img src="images/ctm-map.png" alt="\begin{bmatrix} x_{viewport} \\ y_{viewport} \\ 0 \\ 1 \end{bmatrix} = CTM \cdot \begin{bmatrix} x_{local} \\ y_{local} \\ 0 \\ 1 \end{bmatrix}" width="276">
+</div>
+
 Note: Transformations do affect the visual rendering, but have no affect on the CSS layout other than affecting overflow. Transforms are also taken into account when computing client rectangles exposed via the Element Interface Extensions, namely <a href="https://www.w3.org/TR/cssom-view/#dom-element-getclientrects">getClientRects()</a> and <a href="https://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">getBoundingClientRect()</a>, which are specified in [[CSSOM-VIEW]].
 
 <div class="example">
@@ -952,28 +1005,28 @@ Some transform functions can be represented by more generic transform functions.
 The Transform Function Lists {#transform-function-lists}
 ========================================================
 
-If a list of <<transform-function>> is provided, then the net effect is as if each transform function had been specified separately in the order provided. For example,
+If a list of <<transform-function>>s is provided, then the net effect is as if each transform function had been specified separately in the order provided.
+
+That is, in the absence of other styling that affects position and dimensions, a nested set of transforms is equivalent to a single list of transform functions, applied from the coordinate system of the ancestor to the [=local coordinate system=] of a given element. The resulting transform is the matrix multiplication of the list of transforms.
+
+<div class=example>
+For example,
 
 <pre><code highlight=html>
-&lt;div style="transform: translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)"/>
+&lt;div style="transform: translate(-10px, -20px) scale(2) rotate(45deg)"/>
 </code></pre>
 
 is functionally equivalent to:
 
 <pre><code highlight=html>
-&lt;div style="transform: translate(-10px,-20px)" id="root">
+&lt;div style="transform: translate(-10px, -20px)" id="root">
   &lt;div style="transform: scale(2)">
     &lt;div style="transform: rotate(45deg)">
-      &lt;div style="transform: translate(5px,10px)" id="child">
-      &lt;/div>
     &lt;/div>
   &lt;/div>
 &lt;/div>
 </code></pre>
-
-That is, in the absence of other styling that affects position and dimensions, a nested set of transforms is equivalent to a single list of transform functions, applied from the top ancestor (with the id <code>root</code>) to the deepest descendant (with the id <code>child</code>). The resulting transform is the matrix multiplication of the list of transforms.
-
-Issue(w3c/csswg-drafts#909): Backport point mapping from one coordinate space to another from SVG.
+</div>
 
 If a transform function causes the [=current transformation matrix=] of an object to be non-invertible, the object and its content do not get displayed.
 
@@ -1414,6 +1467,7 @@ The following changes were made since the <a href="https://www.w3.org/TR/2017/WD
 * No 'transform' on non-replaced inline boxes, table-column boxes, and table-column-group boxes.
 * Define target coordinate space for transformations on <{pattern}>, <{linearGradient}>, <{radialGradient}> and <{clipPath}> elements.
 * Remove 3-value <<rotate()>> from transform function primitives.
+* Be more specific about computation of [=transformation matrix=] and [=current transformation matrix=].
 * Editorial changes.
 
 <h2 class=no-num id='acknowledgments'>Acknowledgments</h2>