Define additive behavior for transform-list on 'animate'.

Author: dirkschulze

css3-transforms/ChangeLog

@@ -1,3 +1,8 @@
+2012-05-31 dschulze@adobe.com
+    Define additive behavior for transform-list on 'animate'.
+    Disallow 'paced' animations for now.
+    Corrected some style errors.
+
 2012-05-29 dschulze@adobe.com
     Clarify that objects with non-invertible CTM don't get displayed.
 

css3-transforms/Overview.html

@@ -39,14 +39,14 @@
 
    <h1>CSS Transforms</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 May 2012</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 June 2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd> <a
-     href="http://www.w3.org/TR/2012/ED-css3-transforms-20120529/">http://dev.w3.org/csswg/css3-transforms/</a>
-     <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120529/-->
+     href="http://www.w3.org/TR/2012/ED-css3-transforms-20120601/">http://dev.w3.org/csswg/css3-transforms/</a>
+     <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120601/-->
 
     <dt>Latest version:
 
@@ -282,8 +282,9 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
    <li><a href="#svg-animation"><span class=secno>14. </span> SVG Animation
     </a>
     <ul class=toc>
-     <li><a href="#svg-animate-element"><span class=secno>14.1. </span>
-      Elements, attributes and properties that can be animated </a>
+     <li><a href="#svg-animate-element"><span class=secno>14.1. </span> The
+      ‘<code class=property>animate</code>’ and ‘<code
+      class=property>set</code>’ element </a>
 
      <li><a href="#neutral-element"><span class=secno>14.2. </span> Neutral
       element for addition </a>
@@ -1739,12 +1740,12 @@ <h2 id=backface-visibility-property><span class=secno>12. </span> The ‘<a
    follows:
 
   <ol>
-   <li> For an element in a <a href="#d-rendering-context">3D rendering
-    context</a>, compute its <a
-    href="#TermAccumulated3DTransformationMatrix"> accumulated 3D
-    transformation matrix</a>. For an element not in a <a
+   <li> For an element in a <a class=term href="#d-rendering-context">3D
+    rendering context</a>, compute its <a class=term
+    href="#accumulated-3d-transformation-matrix"> accumulated 3D
+    transformation matrix</a>. For an element not in a <a class=term
     href="#d-rendering-context">3D rendering context</a>, compute its <a
-    href="#TermTransformationMatrix">transformation matrix</a>.
+    class=term href="#transformation-matrix">transformation matrix</a>.
 
    <li> If the component of the matrix in row 3, column 3 is negative, then
     the element should be hidden. Otherwise it is visible.
@@ -1954,11 +1955,10 @@ <h3 id=svg-transform-functions><span class=secno>13.4. </span> SVG
     class=property>transform-origin</code></a>’ property. If the optional
     translation values are specified, the transform origin is translated by
     that amount (using the current transformation matrix) for the duration of
-    the rotate operation. For example ‘<code class=css><code
-    class=css>rotate(90deg, 100px, 100px)</code></code>’ would cause
-    elements to appear rotated one-quarter of a turn in the clockwise
-    direction after a translation of 100 pixel in the vertical and horizontal
-    direction.
+    the rotate operation. For example ‘<code class=css>rotate(90deg, 100px,
+    100px)</code>’ would cause elements to appear rotated one-quarter of a
+    turn in the clockwise direction after a translation of 100 pixel in the
+    vertical and horizontal direction.
   </dl>
 
   <p> User agents are just required to support the two optional arguments for
@@ -2004,8 +2004,8 @@ <h3 id=svg-three-dimensional-functions><span class=secno>13.5. </span>SVG
 
   <p> If the ‘<code class=property>vector-effect</code>’ property is set
    to ‘<code class=css>non-scaling-stroke</code>’ and an object is within
-   a <a href="#d-rendering-context">3D rendering context</a> the property has
-   no affect on stroking the object.
+   a <a class=term href="#d-rendering-context">3D rendering context</a> the
+   property has no affect on stroking the object.
 
   <h3 id=svg-user-coordinate-space><span class=secno>13.6. </span> User
    coordinate space</h3>
@@ -2025,10 +2025,12 @@ <h3 id=svg-user-coordinate-space><span class=secno>13.6. </span> User
    ‘<code class=css>objectBoundingBox</code>’ the user coordinate system
    for the ‘<a href="#effects"><code class=property>transform</code></a>’
    property and the ‘<code class=property>patternTransform</code>’
-   attribute is established using the bounding box of the element to which
-   the pattern is applied (see <a
+   attribute is established using the <a class=term
+   href="#bounding-box">bounding box</a> of the element to which the pattern
+   is applied (see <a
    href="http://www.w3.org/TR/SVG/coords.html#ObjectBoundingBoxUnits">Object
-   bounding box units</a>).
+   bounding box units</a> <a href="#SVG11"
+   rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>).
 
   <p> If the ‘<code class=property>gradientUnit</code>’ attribute of the
    SVG ‘<code class=property>linearGradient</code>’ element and the
@@ -2046,10 +2048,12 @@ <h3 id=svg-user-coordinate-space><span class=secno>13.6. </span> User
    ‘<code class=css>objectBoundingBox</code>’ the user coordinate system
    for the ‘<a href="#effects"><code class=property>transform</code></a>’
    property and the ‘<code class=property>patternTransform</code>’
-   attribute is established using the bounding box of the element to which
-   the gradient is applied (see <a
+   attribute is established using the <a class=term
+   href="#bounding-box">bounding box</a> of the element to which the gradient
+   is applied (see <a
    href="http://www.w3.org/TR/SVG/coords.html#ObjectBoundingBoxUnits">Object
-   bounding box units</a>).
+   bounding box units</a> <a href="#SVG11"
+   rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>).
 
   <p> If the ‘<code class=property>maskUnit</code>’ attribute of the SVG
    ‘<code class=property>mask</code>’ element is ‘<code
@@ -2063,10 +2067,12 @@ <h3 id=svg-user-coordinate-space><span class=secno>13.6. </span> User
    If the ‘<code class=property>maskUnit</code>’ attribute is set to
    ‘<code class=css>objectBoundingBox</code>’ the user coordinate system
    for the ‘<a href="#effects"><code class=property>transform</code></a>’
-   presentation attribute is established using the bounding box of the
-   element to which the mask is applied (see <a
+   presentation attribute is established using the <a class=term
+   href="#bounding-box">bounding box</a> of the element to which the mask is
+   applied (see <a
    href="http://www.w3.org/TR/SVG/coords.html#ObjectBoundingBoxUnits">Object
-   bounding box units</a>).
+   bounding box units</a> <a href="#SVG11"
+   rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>).
 
   <p> For the ‘<code class=property>clipPath</code>’ element the ‘<a
    href="#effects"><code class=property>transform</code></a>’ presentation
@@ -2076,13 +2082,13 @@ <h3 id=svg-user-coordinate-space><span class=secno>13.6. </span> User
    the ‘<code class=property>clipPath</code>’ element via the ‘<code
    class=property>clip-path</code>’ property).
 
-  <p> For all other <a href="#TermTransformableElement">transformable
+  <p> For all other <a class=term href="#transformable-element">transformable
    elements</a> the ‘<a href="#effects"><code
    class=property>transform</code></a>’ presentation attribute represents
    values in the current user coordinate system of the parent. All percentage
    values of the ‘<a href="#effects"><code
    class=property>transform</code></a>’ presentation attribute are relative
-   to the element's <a href=TermBoundingBox>bounding box</a>.
+   to the element's <a class=term href="#bounding-box">bounding box</a>.
 
   <div class=example>
    <p> The ‘<a href="#transform-origin"><code
@@ -2110,9 +2116,10 @@ <h3 id=svg-user-coordinate-space><span class=secno>13.6. </span> User
 &lt;/svg&gt;</pre>
 
    <p> An SVG ‘<code class=property>pattern</code>’ element doesn't have
-    a bounding box. The bounding box of the referencing ‘<code
-    class=property>rect</code>’ element is used instead to solve the
-    relative values of the ‘<a href="#transform-origin"><code
+    a bounding box. The <a class=term href="#bounding-box">bounding box</a>
+    of the referencing ‘<code class=property>rect</code>’ element is used
+    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
     the user space of the ‘<code class=property>pattern</code>’ elements
@@ -2161,11 +2168,10 @@ <h3 id=transform-attribute-dom><span class=secno>13.7. </span> SVG DOM
    of ‘<code class=css><a
    href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGTransform">SVGTransform</a></code>’
    must return ‘<code class=css><a
-   href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__SVG_TRANSFORM_UNKNOWN">
-   SVG_TRANSFORM_UNKNOWN</a></code>’ for <a
-   href="#transform-functions">Transform Functions</a> or unit types that are
-   not supported by this interface. If a two-dimensional transform function
-   is not supported, the attribute ‘<code class=css><a
+   href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__SVG_TRANSFORM_UNKNOWN">SVG_TRANSFORM_UNKNOWN</a></code>’
+   for <a href="#transform-functions">Transform Functions</a> or unit types
+   that are not supported by this interface. If a two-dimensional transform
+   function is not supported, the attribute ‘<code class=css><a
    href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__matrix">matrix</a></code>’
    must return a 3x2 ‘<code class=css><a
    href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix">SVGMatrix</a></code>’
@@ -2175,10 +2181,44 @@ <h3 id=transform-attribute-dom><span class=secno>13.7. </span> SVG DOM
 
   <h2 id=svg-animation><span class=secno>14. </span> SVG Animation</h2>
 
-  <h3 id=svg-animate-element><span class=secno>14.1. </span> Elements,
-   attributes and properties that can be animated</h3>
-
-  <p class=note>This section extends <a
+  <h3 id=svg-animate-element><span class=secno>14.1. </span> The ‘<code
+   class=property>animate</code>’ and ‘<code class=property>set</code>’
+   element</h3>
+
+  <p> With this specification, the ‘<code class=property>animate</code>’
+   element and the ‘<code class=property>set</code>’ element can animate
+   the data type <var>&lt;transform-list&gt;</var>.
+
+  <p> The animation effect is post-multiplied to the underlying value for
+   additive ‘<code class=property>animate</code>’ animations (see below)
+   instead of added to the underlying value, due to the specific behavior of
+   <var>&lt;transform-list&gt;</var> animations.
+
+  <p> <var>From-to</var>, <var>from-by</var> and <var>by</var> animations are
+   defined in SMIL to be equivalent to a corresponding <var>values</var>
+   animation. However, <var>to</var> animations are a mixture of additive and
+   non-additive behavior <a href="#SMIL3"
+   rel=biblioentry>[SMIL3]<!--{{SMIL3}}--></a>.
+
+  <p> <var>To</var> animations on ‘<code class=property>animate</code>’
+   provide specific functionality to get a smooth change from the underlying
+   value to the ‘<code class=property>to</code>’ attribute value, which
+   conflicts mathematically with the requirement for additive transform
+   animations to be post-multiplied. As a consequence, the behavior of
+   <var>to</var> animations for ‘<code class=property>animate</code>’ is
+   undefined. Authors are suggested to use <var>from-to</var>,
+   <var>from-by</var>, <var>by</var> or <var>values</var> animations to
+   achieve any desired transform animation.
+
+  <p> The value ‘<code class=property>paced</code>’ is undefined for the
+   attribute ‘<code class=property>calcMode</code>’ on ‘<code
+   class=property>animate</code>’ for animations of the data type
+   <var>&lt;transform-list&gt;</var>. If specified, UAs may choose the value
+   ‘<code class=property>linear</code>’ instead. Future versions of this
+   specification may define how paced animations can be performed on
+   <var>&lt;transform-list&gt;</var>.
+
+  <p class=note>The following paragraphs extend <a
    href="http://www.w3.org/TR/SVG/animate.html#complexDistances">Elements,
    attributes and properties that can be animated</a> <a href="#SVG11"
    rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>.
@@ -2269,33 +2309,37 @@ <h3 id=svg-animate-element><span class=secno>14.1. </span> Elements,
   <h3 id=neutral-element><span class=secno>14.2. </span> Neutral element for
    addition</h3>
 
-  <p> Some animations require a neutral element for addition. This neutral
-   element for transform functions must be equivalent to the null matrix.
-   Examples for transform functions and their values that fulfill this
-   requirement are ‘<code class=css>translate(0)</code>’, ‘<code
-   class=css>translate3d(0, 0, 0)</code>’, ‘<code
-   class=css>translateX(0)</code>’, ‘<code
+  <p> Some animations require a neutral element for addition. For transform
+   functions this is a scalar or a list of scalars of 0. Examples of neutral
+   elements for transform functions are ‘<code
+   class=css>translate(0)</code>’, ‘<code class=css>translate3d(0, 0,
+   0)</code>’, ‘<code class=css>translateX(0)</code>’, ‘<code
    class=css>translateY(0)</code>’, ‘<code
    class=css>translateZ(0)</code>’, ‘<code class=css>scale(0)</code>’,
    ‘<code class=css>scaleX(0)</code>’, ‘<code
    class=css>scaleY(0)</code>’, ‘<code class=css>scaleZ(0)</code>’,
-   ‘<code class=css>rotate(0)</code>’, <!--''rotate3d(1, 1, 1, 0)'',-->
-   ‘<code class=css>rotateX(0)</code>’, ‘<code
-   class=css>rotateY(0)</code>’, ‘<code class=css>rotateZ(0)</code>’,
-   ‘<code class=css>skewX(0)</code>’, ‘<code
-   class=css>skewY(0)</code>’, ‘<code class=css>matrix(0, 0, 0, 0, 0,
-   0)</code>’ and ‘<code class=css>matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-   0, 0, 0, 0, 0, 0)</code>’. A special case is perspective: ‘<code
-   class=css>perspective(infinity)</code>’. The value of m<sub>34</sub>
-   becomes infinitesimal small and the transform function is therefore
-   assumed to be equal to the null matrix.
+   ‘<code class=css>rotate(0)</code>’, ‘<code
+   class=css>rotate3d(v<sub>x</sub>, v<sub>y</sub>, v<sub>z</sub>,
+   0)</code>’ (where <var>v</var> is a context dependent vector), ‘<code
+   class=css>rotateX(0)</code>’, ‘<code class=css>rotateY(0)</code>’,
+   ‘<code class=css>rotateZ(0)</code>’, ‘<code
+   class=css>skewX(0)</code>’, ‘<code class=css>skewY(0)</code>’,
+   ‘<code class=css>matrix(0, 0, 0, 0, 0, 0)</code>’, ‘<code
+   class=css>matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+   0)</code>’ and ‘<code class=css>perspective(0)</code>’.
+
+  <p class=note> Some animations from or to a neutral element for addition
+   might need matrix interpolation. Since matrix interpolation is just
+   defined for invertible transform functions, any animation must fallback to
+   discrete animation as specified in <a
+   href="#matrix-interpolation">Interpolation of Matrices</a>.
 
   <div class=example>
    <p> A <var>by</var> animation with a by value v<sub>b</sub> is equivalent
     to the same animation with a values list with 2 values, the neutral
     element for addition for the domain of the target attribute (denoted 0)
-    and v<sub>b</sub>, and ‘<code class=css>additive="sum"</code>’.
-    [[SMILANIM]]</p>
+    and v<sub>b</sub>, and ‘<code class=css>additive="sum"</code>’. <a
+    href="#SMIL3" rel=biblioentry>[SMIL3]<!--{{SMIL3}}--></a></p>
 
    <pre>
 &lt;rect width="100" height="100"&gt;
@@ -3271,6 +3315,16 @@ <h3 class=no-num id=other-references>Other references</h3>
    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
     <!---->
 
+   <dt id=SMIL3>[SMIL3]
+
+   <dd>Dick Bulterman. <a
+    href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/"><cite>Synchronized
+    Multimedia Integration Language (SMIL 3.0).</cite></a> 1 December 2008.
+    W3C Recommendation. URL: <a
+    href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/">http://www.w3.org/TR/2008/REC-SMIL3-20081201/</a>
+    </dd>
+   <!---->
+
    <dt id=SVG11>[SVG11]
 
    <dd>Erik Dahlström; et al. <a