[css-animations-2] Tweaks to generalized animation event dispatch

* Mention skipping events while pending
* Add events when going from idle -> after
* Remove dependency on animation playback rate for initial events'
elapsedTime
* Order events to make them easier to follow

Author: birtles

css-animations-2/Overview.bs

@@ -77,6 +77,7 @@ urlPrefix: https://w3c.github.io/web-animations/; type: dfn; spec: web-animation
     text: iteration duration
     text: iteration start
     text: pause an animation
+    text: pending play state
     text: play an animation
     text: sampling
     text: start delay
@@ -419,9 +420,9 @@ definitions are used:
     <code>max(min(<a>target effect end</a> - <a>start delay</a>,
                   <a>active duration</a>), 0)</code>
 
-Each time an animation is <a lt="sampling">sampled</a>, the events to
-dispatch are determined by comparing the animation's phase before and
-after the sample as follows:
+Each time an animation is <a lt="sampling">sampled</a> and is <em>not</em> <a
+lt="pending play state">pending</a>, the events to dispatch are determined by
+comparing the animation's phase before and after the sample as follows:
 
 <table class="event-state-transitions">
   <thead>
@@ -433,60 +434,32 @@ after the sample as follows:
   </thead>
   <tbody>
     <tr>
-      <td><a lt="idle phase">idle</a> &rarr;
+      <td><a lt="idle phase">idle</a> or <a lt="before phase">before</a> &rarr;
           <a lt="active phase">active</a></td>
       <td><a idl>animationstart</a></td>
-      <td>If the <a>animation playback rate</a> is &ge; 0,
-          use the <a>interval start</a>, otherwise use the
-          <a>interval end</a>.
+      <td><a>interval start</a>
       </td>
     </tr>
     <tr>
-      <td><a lt="before phase">before</a> &rarr;
-          <a lt="active phase">active</a></td>
-      <td><a idl>animationstart</a></td>
-      <td><a>interval start</a></td>
-    </tr>
-    <tr>
-      <td><a lt="after phase">after</a> &rarr;
-          <a lt="active phase">active</a></td>
-      <td><a idl>animationstart</a></td>
-      <td><a>interval end</a></td>
-    </tr>
-    <tr>
-      <td rowspan="2"><a lt="before phase">before</a> &rarr;
-                      <a lt="after phase">after</a> <a
-                      href="#multiple-events-note">&#x66d;</a></td>
-      <td><a idl>animationstart</a></td>
-      <td><a>interval start</a></td>
-    </tr>
-    <tr>
-      <td><a idl>animationend</a></td>
-      <td><a>interval end</a></td>
-    </tr>
-    <tr>
-      <td rowspan="2"><a lt="after phase">after</a> &rarr;
-                      <a lt="before phase">before</a> <a
-                      href="#multiple-events-note">&#x66d;</a></td>
+      <td rowspan="2">
+        <a lt="idle phase">idle</a> or <a lt="before phase">before</a> &rarr;
+        <a lt="after phase">after</a> <a
+        href="#multiple-events-note">&#x66d;</a></td>
       <td><a idl>animationstart</a></td>
-      <td><a>interval end</a></td>
+      <td><a>interval start</a>
+      </td>
     </tr>
     <tr>
       <td><a idl>animationend</a></td>
-      <td><a>interval start</a></td>
+      <td><a>interval end</a>
+      </td>
     </tr>
     <tr>
       <td><a lt="active phase">active</a> &rarr;
           <a lt="before phase">before</a></td>
       <td><a idl>animationend</a></td>
       <td><a>interval start</a></td>
     </tr>
-    <tr>
-      <td><a lt="active phase">active</a> &rarr;
-          <a lt="after phase">after</a></td>
-      <td><a idl>animationend</a></td>
-      <td><a>interval end</a></td>
-    </tr>
     <tr>
       <td><a lt="active phase">active</a> &rarr;
           <a lt="active phase">active</a>
@@ -498,6 +471,29 @@ after the sample as follows:
       <td>(See below)
           <a href="#animation-iteration-elapsed-time">&dagger;</a></td>
     </tr>
+    <tr>
+      <td><a lt="active phase">active</a> &rarr;
+          <a lt="after phase">after</a></td>
+      <td><a idl>animationend</a></td>
+      <td><a>interval end</a></td>
+    </tr>
+    <tr>
+      <td><a lt="after phase">after</a> &rarr;
+          <a lt="active phase">active</a></td>
+      <td><a idl>animationstart</a></td>
+      <td><a>interval end</a></td>
+    </tr>
+    <tr>
+      <td rowspan="2"><a lt="after phase">after</a> &rarr;
+                      <a lt="before phase">before</a> <a
+                      href="#multiple-events-note">&#x66d;</a></td>
+      <td><a idl>animationstart</a></td>
+      <td><a>interval end</a></td>
+    </tr>
+    <tr>
+      <td><a idl>animationend</a></td>
+      <td><a>interval start</a></td>
+    </tr>
     <tr>
       <td>Not <a lt="idle phase">idle</a> &rarr;
           <a lt="idle phase">idle</a></td>