[web-animations-1][web-animations-2] Move iterationComposite to web-animations-2 (#4303)

stephenmcgruer · web-flow · commit ebda50a5809e · 2019-09-16T08:15:39.000-04:00
See #4300
diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs
@@ -190,6 +190,9 @@ urlPrefix: https://drafts.csswg.org/css-writing-modes-4/; type: dfn; spec: css-w
     text: equivalent physical property; url: logical-to-physical
 urlPrefix: https://drafts.csswg.org/css-style-attr/; type: dfn; spec: css-style-attr
     text: style attribute
+urlPrefix: https://drafts.csswg.org/web-animations-2/; type: dfn; spec: web-animations-2
+    text: iteration composite operation
+    text: iteration composite operation accumulate
 </pre>
 <pre class="link-defaults">
 spec:dom; type:interface; text:DocumentOrShadowRoot
@@ -3321,10 +3324,9 @@ a <a>target element</a> for which computed property values can be calculated.
 <h4 id="the-effect-value-of-a-keyframe-animation-effect">The effect value of
   a keyframe effect</h4>
 
-The <a>effect value</a> of a single property
-referenced by a <a>keyframe effect</a> as one of its
-<a lt="target property">target properties</a>, for a given
-<var>iteration progress</var>, <var>current iteration</var> and
+The <a>effect value</a> of a single property referenced by a <a>keyframe
+effect</a> as one of its <a lt="target property">target properties</a>, for a
+given <var>iteration progress</var>, <var ignore=''>current iteration</var> and
 <var>underlying value</var> is calculated as follows.
 
 1.  If <var>iteration progress</var> is <a>unresolved</a> abort this
@@ -3422,30 +3424,6 @@ referenced by a <a>keyframe effect</a> as one of its
             corresponding to the <var>target property</var>'s
             <a>animation type</a>.
 
-    1.  If this <a>keyframe effect</a> has an <a>iteration
-        composite operation</a> of <a
-        lt="iteration composite operation accumulate">accumulate</a>,
-        apply the following step <var>current iteration</var> times:
-
-        *   replace the property value of <var>target property</var>
-            on <var>keyframe</var> with the result of combining the
-            property value on the final keyframe in <var>property-specific
-            keyframes</var> (<var>V</var><sub>a</sub>) with the
-            property value on <var>keyframe</var>
-            (<var>V</var><sub>b</sub>) using the <a
-            lt="value accumulation">accumulation procedure</a>
-            defined for <var>target property</var>.
-
-        Note: The order of arguments here is important. In the case where
-              the animation type of the target property does not define a
-              procedure for accumulation or addition, the default definition
-              for these procedures result in <var>V</var><sub>b</sub> being
-              returned. When performing iteration composition on propreties
-              that do not support accumulation, the result should be the
-              initial property value of <var>target property</var> on
-              <var>keyframe</var>, hence we we make this
-              <var>V</var><sub>b</sub> in the above step.
-
 1.  If there is only one keyframe in <var>interval endpoints</var>
     return the property value of <var>target property</var> on that
     keyframe.
@@ -3733,29 +3711,6 @@ property</a> is applied using the following process.
     effect at the top of the <a>effect stack</a> established for the target
     property.
 
-<h3 id="effect-accumulation-section">Effect accumulation</h3>
-
-Similar to the compositing performed between <a>effect values</a>
-(see [[#effect-composition]]), the <dfn>iteration composite operation</dfn>
-determines how values are combined between successive iterations of
-the same <a>keyframe effect</a>.
-
-This specification defines two <a>iteration composite operations</a>
-as follows:
-
-:   <dfn lt="iteration composite operation replace">replace</dfn>
-::  Each successive iteration is calculated independently of previous
-    iterations.
-:   <dfn lt="iteration composite operation accumulate">accumulate
-::  Successive iterations of the animation are <a
-    lt="value accumulation">accumulated</a> with the
-    final value of the previous iteration.
-
-    The application of the <a>iteration composite operation</a> is
-    incorporated in the calculation of the <a>effect value</a> in <a
-    href="#the-effect-value-of-a-keyframe-animation-effect"
-    section></a>.
-
 <h3 id="replacing-animations">Replacing animations</h3>
 
 <div class="informative-bg"><em>This section is non-normative</em>
@@ -4689,7 +4644,6 @@ dictionary ComputedEffectTiming : EffectTiming {
  Constructor(KeyframeEffect source)]
 interface KeyframeEffect : AnimationEffect {
     attribute (Element or CSSPseudoElement)? target;
-    attribute IterationCompositeOperation    iterationComposite;
     attribute CompositeOperation             composite;
     sequence&lt;object&gt; getKeyframes();
     void             setKeyframes(object? keyframes);
@@ -4724,16 +4678,15 @@ interface KeyframeEffect : AnimationEffect {
         If that procedure causes an exception to be thrown, propagate the
         exception and abort this procedure.
 
-    1.  If <var>options</var> is a {{KeyframeEffectOptions}} object,
-        assign the {{KeyframeEffect/iterationComposite}}, and
-        {{KeyframeEffect/composite}}, properties of <var>effect</var> to the
-        corresponding value from <var>options</var>.
+    1.  If <var>options</var> is a {{KeyframeEffectOptions}} object, assign
+        the {{KeyframeEffect/composite}} property of <var>effect</var> to
+        the corresponding value from <var>options</var>.
 
-        When assigning these properties, the error-handling defined for the
-        corresponding setters on the {{KeyframeEffect}} interface is applied.
-        If any of those setters require an exception to be thrown
-        for the values specified by <var>options</var>, this procedure must
-        <a>throw</a> the same exception and abort all further steps.
+        When assigning this property, the error-handling defined for the
+        corresponding setter on the {{KeyframeEffect}} interface is applied.
+        If the setter requires an exception to be thrown for the value
+        specified by <var>options</var>, this procedure must <a>throw</a>
+        the same exception and abort all further steps.
 
     1.  Initialize the set of <a>keyframes</a> by performing the procedure
         defined for {{KeyframeEffect/setKeyframes()}} passing
@@ -4777,7 +4730,6 @@ interface KeyframeEffect : AnimationEffect {
 
         *    <a>target element</a>,
         *    <a>keyframes</a>,
-        *    <a>iteration composite operation</a>,
         *    <a>composite operation</a>, and
         *    all specified timing properties:
              *    [=start delay=],
@@ -4812,14 +4764,6 @@ interface KeyframeEffect : AnimationEffect {
     a specific element such as an animation that produces a sound
     using an audio API.
 
-:   <dfn attribute for=KeyframeEffect>iterationComposite</dfn>
-::  The <a>iteration composite operation</a> property of this
-    <a>keyframe effect</a> as specified by one of the
-    <a>IterationCompositeOperation</a> enumeration values.
-
-    On setting, sets the <a>iteration composite operation</a> property of this
-    <a>animation effect</a> to the provided value.
-
 :   <dfn attribute for=KeyframeEffect>composite</dfn>
 ::  The <a>composite operation</a> used to composite this
     <a>keyframe effect</a> with the <a>effect stack</a>, as
@@ -5603,17 +5547,12 @@ options)}} constructor by providing a {{KeyframeEffectOptions}} object.
 
 <pre class='idl'>
 dictionary KeyframeEffectOptions : EffectTiming {
-    IterationCompositeOperation iterationComposite = "replace";
     CompositeOperation          composite = "replace";
 };
 </pre>
 
 <div class="members">
 
-:   <dfn dict-member for=KeyframeEffectOptions>iterationComposite</dfn>
-::  The <a>iteration composite operation</a> used to define the way
-    animation values build from iteration to iteration.
-
 :   <dfn dict-member for=KeyframeEffectOptions>composite</dfn>
 ::  The <a>composite operation</a> used to composite this
     animation with the <a>effect stack</a>, as specified by one
@@ -5624,29 +5563,6 @@ dictionary KeyframeEffectOptions : EffectTiming {
 
 </div>
 
-<h3 id="the-iterationcompositeoperation-enumeration">The <code>IterationCompositeOperation</code> enumeration</h3>
-
-The possible values of an <a>animation effect</a>'s
-<a>iteration composite operation</a> are represented by the
-<dfn>IterationCompositeOperation</dfn> enumeration.
-
-<pre class='idl'>
-enum IterationCompositeOperation { "replace", "accumulate" };
-</pre>
-
-:   <code>replace</code>
-::  Corresponds to the <a
-    lt="iteration composite operation replace">replace</a>
-    <a>iteration composite operation</a> value such that the
-    <a>effect value</a> produced is independent of the
-    <a>current iteration</a>.
-:   <code>accumulate</code>
-::  Corresponds to the <a
-    lt="iteration composite operation accumulate">accumulate</a>
-    iteration composite operation value such that
-    subsequent iterations of an <a>animation effect</a> build
-    on the final value of the previous iteration.
-
 <h3 id="the-compositeoperation-enumeration">The <code>CompositeOperation</code> and <code>CompositeOperationOrAuto</code> enumerations</h3>
 
 The possible values of an <a>keyframe effect</a>'s
diff --git a/web-animations-2/Overview.bs b/web-animations-2/Overview.bs
@@ -1,3 +1,14 @@
+<style>
+.constructors::before, .members::before {
+  font: bold 100% sans-serif;
+  text-align: left;
+  margin: 1.33em 0px;
+  color: #005A9C;
+}
+
+.constructors::before { content: 'Constructors' }
+</style>
+
 <pre class='metadata'>
 Title: Web Animations Level 2
 Status: UD
@@ -1229,6 +1240,43 @@ Update the description of an effect that targets a non-animated property as:
 >     delaying the fulfilment of an <a>animation</a>'s <a>current finished
 >     promise</a>.
 
+<h3 id="keyframe-effects">Keyframe Effects</h3>
+
+<h4 id="the-effect-value-of-a-keyframe-animation-effect">The effect value of a keyframe effect</h4>
+
+The procedure for computing the <a>effect value</a> of a single property
+referenced by a <a>keyframe effect</a> as one of its <a>target properties</a>,
+for a given <var ignore=''>iteration progress</var>, <var>current iteration</var> and
+<var ignore=''>underlying value</var> is amended by inserting the following step
+after the step to apply the keyframe effect composite mode.
+
+12. For each <var>keyframe</var> in <var ignore=''>interval endpoints</var>:
+
+    1.  (As in web-animations-1).
+
+    1.  If this <a>keyframe effect</a> has an <a>iteration
+        composite operation</a> of <a
+        lt="iteration composite operation accumulate">accumulate</a>,
+        apply the following step <var>current iteration</var> times:
+
+        *   replace the property value of <var>target property</var>
+            on <var>keyframe</var> with the result of combining the
+            property value on the final keyframe in <var ignore=''>property-specific
+            keyframes</var> (<var>V</var><sub>a</sub>) with the
+            property value on <var>keyframe</var>
+            (<var>V</var><sub>b</sub>) using the <a
+            lt="value accumulation">accumulation procedure</a>
+            defined for <var>target property</var>.
+
+        Note: The order of arguments here is important. In the case where
+              the animation type of the target property does not define a
+              procedure for accumulation or addition, the default definition
+              for these procedures result in <var>V</var><sub>b</sub> being
+              returned. When performing iteration composition on propreties
+              that do not support accumulation, the result should be the
+              initial property value of <var>target property</var> on
+              <var>keyframe</var>, hence we we make this
+              <var>V</var><sub>b</sub> in the above step.
 
 <h3 id="combining-effects">Combining effects</h3>
 
@@ -1241,6 +1289,30 @@ The procedure for sorting effects appends the following step:
 >         same <a>animation</a> since otherwise the order would have been
 >         resolved in the previous step.)
 
+<h3 id="effect-accumulation-section">Effect accumulation</h3>
+
+Similar to the compositing performed between <a>effect values</a>
+(see [[web-animations-1#effect-composition]]), the <dfn>iteration composite operation</dfn>
+determines how values are combined between successive iterations of
+the same <a>keyframe effect</a>.
+
+This specification defines two <a>iteration composite operations</a>
+as follows:
+
+:   <dfn lt="iteration composite operation replace">replace</dfn>
+::  Each successive iteration is calculated independently of previous
+    iterations.
+:   <dfn lt="iteration composite operation accumulate">accumulate
+::  Successive iterations of the animation are <a
+    lt="value accumulation">accumulated</a> with the
+    final value of the previous iteration.
+
+    The application of the <a>iteration composite operation</a> is
+    incorporated in the calculation of the <a>effect value</a> in <a
+    href="#the-effect-value-of-a-keyframe-animation-effect"
+    section></a>.
+
+
 <h3 id="custom-effects">Custom effects</h3>
 
 (This section is added.)
@@ -2043,12 +2115,48 @@ SequenceEffect implements GroupEffectMutable;
 <h3 id="the-keyframeeffect-interfaces">The <code>KeyframeEffectReadOnly</code>
   and <code>KeyframeEffect</code> interfaces</h3>
 
-Add:
+The <a>KeyframeEffect</a> interface is modified to add the following:
 
 <pre class='idl'>
+partial interface KeyframeEffect {
+    attribute IterationCompositeOperation    iterationComposite;
+};
+
 KeyframeEffect implements AnimationEffectMutable;
 </pre>
 
+<div class="constructors">
+
+:   <dfn constructor for=KeyframeEffect
+     lt="KeyframeEffect(target, keyframes, options)">
+    KeyframeEffect (target, keyframes, options)</dfn>
+::  Amend step 5 of the procedure to create a new <a>KeyframeEffect</a> object as follows:
+
+    5.  If <var>options</var> is a {{KeyframeEffectOptions}} object,
+        assign the {{KeyframeEffect/iterationComposite}}, and
+        {{KeyframeEffect/composite}}, properties of <var>effect</var> to the
+        corresponding value from <var>options</var>.
+
+        When assigning these properties, the error-handling defined for the
+        corresponding setters on the {{KeyframeEffect}} interface is applied.
+        If any of those setters require an exception to be thrown
+        for the values specified by <var>options</var>, this procedure must
+        <a>throw</a> the same exception and abort all further steps.
+
+:   <dfn constructor for=KeyframeEffect lt="KeyframeEffect(source)">KeyframeEffect (source)</dfn>
+::  Amend the procedure to create a new {{KeyframeEffect}} object with the
+    same properties as {{KeyframeEffect/KeyframeEffect(source)/source}} to include setting the
+    <a>iteration composite operation</a> from <var>source</var> on <var>effect</var>.
+
+<div class="attributes">
+:   <dfn attribute for=KeyframeEffect>iterationComposite</dfn>
+::  The <a>iteration composite operation</a> property of this
+    <a>keyframe effect</a> as specified by one of the
+    <a>IterationCompositeOperation</a> enumeration values.
+
+    On setting, sets the <a>iteration composite operation</a> property of this
+    <a>animation effect</a> to the provided value.
+
 <h4 id="creating-a-new-keyframeeffect-object">Creating a new <code>KeyframeEffect</code> object</h4>
 
 <div class='informative-bg'><em>This section is non-normative</em>
@@ -2078,6 +2186,46 @@ new SequenceEffect(
 
 </div>
 
+<h4 id="the-keyframeeffectoptions-dictionary">The KeyframeEffectOptions dictionary</h4>
+
+The <a>KeyframeEffectOptions</a> dictionary interface is modified to add the
+following member:
+
+<pre class='idl'>
+partial dictionary KeyframeEffectOptions {
+    IterationCompositeOperation iterationComposite = "replace";
+};
+</pre>
+
+<div class="members">
+
+:   <dfn dict-member for=KeyframeEffectOptions>iterationComposite</dfn>
+::  The <a>iteration composite operation</a> used to define the way
+    animation values build from iteration to iteration.
+
+<h3 id="the-iterationcompositeoperation-enumeration">The IterationCompositeOperation enumeration</h3>
+
+The possible values of an <a>animation effect</a>'s
+<a>iteration composite operation</a> are represented by the
+<dfn>IterationCompositeOperation</dfn> enumeration.
+
+<pre class='idl'>
+enum IterationCompositeOperation { "replace", "accumulate" };
+</pre>
+
+:   <code>replace</code>
+::  Corresponds to the <a
+    lt="iteration composite operation replace">replace</a>
+    <a>iteration composite operation</a> value such that the
+    <a>effect value</a> produced is independent of the
+    <a>current iteration</a>.
+:   <code>accumulate</code>
+::  Corresponds to the <a
+    lt="iteration composite operation accumulate">accumulate</a>
+    iteration composite operation value such that
+    subsequent iterations of an <a>animation effect</a> build
+    on the final value of the previous iteration.
+
 <h3 id="the-effectcallback-callback-function">The <code>EffectCallback</code> callback function</h3>
 
 <a>Custom effects</a> can be defined in script by providing an
