[css-animations][css-animations-2] Move animationcancel to animations level 1

Author: birtles

css-animations-2/Overview.bs

@@ -60,6 +60,7 @@ urlPrefix: https://w3c.github.io/web-animations/; type: method; for: KeyframeEff
 urlPrefix: https://w3c.github.io/web-animations/; type: dfn; spec: web-animations
     text: active duration
     text: active phase
+    text: active time
     text: after phase
     text: animation
     text: animation class
@@ -69,6 +70,7 @@ urlPrefix: https://w3c.github.io/web-animations/; type: dfn; spec: web-animation
     text: composite operation
     text: current iteration
     text: current time
+    text: fill mode
     text: global animation list
     text: idle play state
     text: idle phase
@@ -387,21 +389,6 @@ keyframe specifying each property.
 
 # Animation Events # {#events}
 
-## Types of <code>AnimationEvent</code> ## {#event-animationevent}
-
-The <em>additional</em> types of animation events that can occur are:
-
-	<dl dfn-type=event dfn-for=animationevent>
-		<dt><dfn>animationcancel</dfn>
-		<dd>
-			The <a idl>animationcancel</a> event occurs when the animation stops running in a way that does not fire an <a idl>animationend</a> event, such as a change in the 'animation-name' that removes the animation, or the animating element or one of its ancestors becoming ''display:none''.
-			<ul>
-				<li>Bubbles: Yes</li>
-				<li>Cancelable: No</li>
-				<li>Context Info: animationName, elapsedTime, pseudoElement</li>
-			</ul>
-	</dl>
-
 ## Event dispatch ## {#event-dispatch}
 
 Note, this is a more general description of event dispatch than that of CSS
@@ -515,7 +502,8 @@ after the sample as follows:
       <td>Not <a lt="idle phase">idle</a> &rarr;
           <a lt="idle phase">idle</a></td>
       <td><a idl>animationcancel</a></td>
-      <td>0</td>
+      <td>The <a>active time</a> of the animation at the moment it was cancelled
+          calculated using a <a>fill mode</a> of both.</td>
     </tr>
   </tbody>
 </table>

css-animations/Overview.bs

@@ -901,9 +901,8 @@ Attributes</h4>
 		<dt><dfn>elapsedTime</dfn>, of type float, readonly
 		<dd>
 			The amount of time the animation has been running, in seconds, when this event fired,
-			excluding any time the animation was paused. For an ''animationstart'' event, the
-			elapsedTime is zero unless there was a negative value for 'animation-delay', in which
-			case the event will be fired with an elapsedTime of (-1 * delay).
+			excluding any time the animation was paused. The precise calculation for
+			of this member is defined along with each event type.
 		<dt><dfn>pseudoElement</dfn>, of type <a interface>DOMString</a>, readonly
 		<dd>
 			The name (beginning with two colons) of the CSS pseudo-element on which the animation
@@ -924,9 +923,15 @@ Types of <code>AnimationEvent</code></h3>
 		<dd>
 			The <a idl>animationstart</a> event occurs at the start of the animation.
 			If there is an 'animation-delay' then this event will fire once the delay
-			period has expired. A negative delay will cause the event to fire with
-			an elapsedTime equal to the absolute value of the delay; in this case the
-			event will fire whether 'animation-play-state' is set to ''running'' or ''paused''.
+			period has expired.
+			<p>
+			A negative delay will cause the event to fire with
+			an {{AnimationEvent/elapsedTime}} equal to the absolute value of the delay
+			capped to the <a>active duration</a> of the animation, that is,
+			<code>min(max(-'animation-delay', 0), <a>active duration</a>)</code>; in
+			this case the event will fire whether 'animation-play-state' is set to
+			''running'' or ''paused''.
+			</p>
 			<ul>
 				<li>Bubbles: Yes</li>
 				<li>Cancelable: No</li>
@@ -936,6 +941,8 @@ Types of <code>AnimationEvent</code></h3>
 		<dt><dfn>animationend</dfn>
 		<dd>
 			The <a idl>animationend</a> event occurs when the animation finishes.
+			In this case the value of the {{AnimationEvent/elapsedTime}} member of
+			the event is equal to the <a>active duration</a>.
 			<ul>
 				<li>Bubbles: Yes</li>
 				<li>Cancelable: No</li>
@@ -948,6 +955,37 @@ Types of <code>AnimationEvent</code></h3>
 			animation, except when an animationend event would fire at the same time.
 			This means that this event does not occur for animations with an iteration
 			count of one or less.
+
+			<p>The {{AnimationEvent/elapsedTime}} member in this case is equal to the
+			product of the <var>current iteration</var> and 'animation-duration' where
+			the <var>current iteration</var> is the zero-based index of the new
+			iteration. For example, assuming no negative 'animation-delay', after one
+			iteration completes the <var>current iteration</var> would be one.</p>
+
+			<ul>
+				<li>Bubbles: Yes</li>
+				<li>Cancelable: No</li>
+				<li>Context Info: animationName, elapsedTime, pseudoElement</li>
+			</ul>
+
+		<dt><dfn>animationcancel</dfn>
+		<dd>
+			The <a idl>animationcancel</a> event occurs when the animation stops
+			running in a way that does not fire an <a idl>animationend</a> event, such
+			as a change in the 'animation-name' that removes the animation, or the
+			animating element or one of its ancestors becoming ''display:none''.
+
+			<p>The {{AnimationEvent/elapsedTime}} member for this event indicates
+			the number of seconds that had elapsed since the beginning of the
+			animation at the moment when the animation was cancelled.
+			This excludes any time where the animation was paused. If the animation
+			had a negative 'animation-delay', the beginning of the animation is the
+			moment equal to the absolute value of 'animation-delay' seconds
+			<em>prior</em> to when the animation was actually triggered.
+			Alternatively, if the animation had a positive 'animation-delay' and the
+			event is fired before the animation's delay has expired, the
+			{{AnimationEvent/elapsedTime}} will be zero.</p>
+
 			<ul>
 				<li>Bubbles: Yes</li>
 				<li>Cancelable: No</li>
@@ -983,6 +1021,10 @@ objects, as <a>event handler IDL attributes</a>:
     <td><dfn>onanimationend</dfn></td>
     <td><dfn><a idl>animationend</a></dfn></td>
   </tr>
+  <tr>
+    <td><dfn>onanimationcancel</dfn></td>
+    <td><dfn><a idl>animationcancel</a></dfn></td>
+  </tr>
 </table>
 
 <h2 id="interface-dom">
@@ -1228,6 +1270,7 @@ partial interface GlobalEventHandlers {
   attribute EventHandler onanimationstart;
   attribute EventHandler onanimationiteration;
   attribute EventHandler onanimationend;
+  attribute EventHandler onanimationcancel;
 };
 </pre>