[css-transforms-2] Add definitions for transform list addition and accumulation

Author: birtles

css-transforms-2/Overview.bs

@@ -34,6 +34,9 @@ spec:css-transforms-1;
 		text: <transform-list>
 	type: function;
 		text: matrix()
+spec: infra
+	type:dfn;
+		text: list
 spec: filter-effects-1; type:property; text:filter;
 spec: html; type: element; text: a;
 </pre>
@@ -1106,6 +1109,74 @@ The transform functions <<matrix()>>, ''matrix3d()'' and ''perspective()'' get c
 
 For interpolations with the primitive ''rotate3d()'', the direction vectors of the transform functions get normalized first. If the normalized vectors are equal, the rotation angle gets interpolated numerically. Otherwise the transform functions get converted into 4x4 matrices first and interpolated as defined in section <a href="#matrix-interpolation">Interpolation of Matrices</a> afterwards.
 
+Addition and accumulation of transform lists {#combining-transform-lists}
+============================================
+
+<div algorithm="transform list addition">
+  <a lt="value addition">Addition</a> of two transform lists
+  <var>V<sub>a</sub></var> and <var>V<sub>b</sub></var>
+  is defined as [=list=] concatenation
+  such that <var ignore>V<sub>result</sub></var> is equal to
+  <var>V<sub>b</sub></var> [=list/appended=] to
+  <var>V<sub>a</sub></var>.
+</div>
+
+<div algorithm="transform list accumulation">
+  <a lt="value accumulation">Accumulation</a> of two transform lists
+  <var>V<sub>a</sub></var> and <var>V<sub>b</sub></var>
+  follows the same steps as interpolation
+  with regards to matching transform functions including
+  padding lists with <a>identity transform functions</a>,
+  converting ''transform/none'' to an <a>identity transform function</a>,
+  and converting both arguments to matrices as necessary (see
+  [[css-transforms-1#interpolation-of-transforms]]).
+  However, instead of interpolating the individual parameters,
+  they are combined using arithmetic addition--
+  except in the case of parameters whose value is one in the
+  <a>identity transform function</a>
+  (e.g. scale parameters and matrix elements
+  <var ignore>m11</var>, <var ignore>m22</var>,
+  <var ignore>m33</var>, and <var ignore>m44</var>),
+  which combine using <dfn export>accumulation for one-based values</dfn>
+  as follows:
+
+    <var ignore>V<sub>result</sub></var> =
+    <var>V<sub>a</sub></var> + <var>V<sub>b</sub></var> - 1
+
+  <div class="note">
+    The above definition preserves the intent of <a lt="value
+    accumulation">accumulation</a> which is that
+    <var>V<sub>b</sub></var> acts as
+    a delta from <var>V<sub>a</sub></var>
+    and allows an animation such as:
+
+    <pre class="lang-javascript">
+    div.animate(
+      { transform: ['scale(1)', 'scale(2)'] },
+      {
+        duration: 1000,
+        easing: 'ease',
+      }
+    );
+    </pre>
+
+    to produce the expected behavior when extended as follows:
+
+    <pre class="lang-javascript">
+    div.animate(
+      { transform: ['scale(1)', 'scale(2)'] },
+      {
+        duration: 1000,
+        easing: 'ease',
+        <strong>iterations: 5,
+        iterationComposite: 'accumulate',</strong>
+      }
+    );
+    </pre>
+  </div>
+</div>
+
+
 Mathematical Description of Transform Functions {#mathematical-description}
 ===============================================