[css-transitions-2] Simplify and correct generalized transition event dispatch

I decided to just ignore the initial playback rate of the animation
since it was getting far too complicated. To do it properly, you'd
actually have to change the initial set of events that get dispatched
based on the playback rate at a fairly arbitrary moment. Instead, the
revised behavior just assumes a positive playback rate for the
elapsedTime for the initial set of events.

Author: birtles

css-transitions-2/Overview.bs

@@ -214,77 +214,82 @@ after the sample as follows:
   </thead>
   <tbody>
     <tr>
-      <td>idle &rarr; <em>not</em> idle <a
-          href="#idle-to-active-note">&#x66d;</a></td>
-      <td><a idl>transitionrun</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>
+      <td>idle &rarr; pending or before</td>
+      <td>{{transitionrun}}</td>
+      <td><a>interval start</a></td>
+    </tr>
+    <tr>
+      <td rowspan="2">idle &rarr; active <a
+          href="#multiple-events-note">&#x66d;</a></td>
+      <td>{{transitionrun}}</td>
+      <td rowspan="2"><a>interval start</a></td>
     </tr>
     <tr>
-      <td>idle <em>or</em> pending &rarr; active <a
-          href="#idle-to-active-note">&#x66d;</a></td>
-      <td><a idl>transitionstart</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>
+      <td>{{transitionstart}}</td>
     </tr>
     <tr>
-      <td>before &rarr; active</td>
-      <td><a idl>transitionstart</a></td>
+      <td rowspan="3">idle &rarr; after <a
+          href="#multiple-events-note">&#x66d;</a></td>
+      <td>{{transitionrun}}</td>
+      <td rowspan="2"><a>interval start</a></td>
+    </tr>
+    <tr>
+      <td>{{transitionstart}}</td>
+    </tr>
+    <tr>
+      <td>{{transitionend}}</td>
+      <td><a>interval end</a></td>
+    </tr>
+    <tr>
+      <td>pending or before &rarr; active</td>
+      <td>{{transitionstart}}</td>
       <td><a>interval start</a></td>
     </tr>
     <tr>
-      <td rowspan="2">before &rarr; after <a
-                      href="#multiple-events-note">&dagger;</a></td>
-      <td><a idl>transitionstart</a></td>
+      <td rowspan="2">pending or before &rarr; after <a
+                      href="#multiple-events-note">&#x66d;</a></td>
+      <td>{{transitionstart}}</td>
       <td><a>interval start</a></td>
     </tr>
     <tr>
-      <td><a idl>transitionend</a></td>
+      <td>{{transitionend}}</td>
       <td><a>interval end</a></td>
     </tr>
     <tr>
       <td>active &rarr; after</td>
-      <td><a idl>transitionend</a></td>
+      <td>{{transitionend}}</td>
       <td><a>interval end</a></td>
     </tr>
     <tr>
       <td>active &rarr; before</td>
-      <td><a idl>transitionend</a></td>
+      <td>{{transitionend}}</td>
       <td><a>interval start</a></td>
     </tr>
     <tr>
       <td>after &rarr; active</td>
-      <td><a idl>transitionstart</a></td>
+      <td>{{transitionstart}}</td>
       <td><a>interval end</a></td>
     </tr>
     <tr>
       <td rowspan="2">after &rarr; before <a
-                      href="#multiple-events-note">&dagger;</a></td>
-      <td><a idl>transitionstart</a></td>
+                      href="#multiple-events-note">&#x66d;</a></td>
+      <td>{{transitionstart}}</td>
       <td><a>interval end</a></td>
     </tr>
     <tr>
-      <td><a idl>transitionend</a></td>
+      <td>{{transitionend}}</td>
       <td><a>interval start</a></td>
     </tr>
     <tr>
       <td><em>not</em> idle <em>or</em> after &rarr; idle</td>
-      <td><a idl>transitioncancel</a></td>
+      <td>{{transitioncancel}}</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>
 
-<p id="idle-to-active-note">&#x66d; If the transition phase changes from
-&lsquo;idle&rsquo; to &lsquo;active&rsquo; then <em>both</em> {{transitionrun}}
-run and {{transitionstart}} events are queued, in that order.</p>
-
-<p id="multiple-events-note">&dagger; Where multiple events are listed for
+<p id="multiple-events-note">&#x66d; Where multiple events are listed for
 a state change, all events are dispatched in the order listed and in immediate
 succession.</p>