Make cancelAnimationFrame() cancel pending callbacks

Calling cancelAnimationFrame() from within a requestAnimationFrame()
callback should cancel any animation frame callbacks that are
pending for the current frame. The currently specified behavior does not
permit that, however, since it clones the set of callbacks before
iterating over them.

This patch updates the algorithm to run animation frame callbacks such
that it is possible to cancel a pending animation frame callback.
This also brings the specified behavior into line with its
implementation in Blink, EdgeHTML, and WebKit.

Tests: web-platform-tests/wpt#15455.

Closes #4359.

source

@@ -2510,7 +2510,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
              <dfn data-x="map exists" data-x-href="https://infra.spec.whatwg.org/#map-exists">exists</dfn>,
              <dfn data-x="map get" data-x-href="https://infra.spec.whatwg.org/#map-get">getting the value of an entry</dfn>,
              <dfn data-x="map set" data-x-href="https://infra.spec.whatwg.org/#map-set">setting the value of an entry</dfn>,
-             <dfn data-x="map remove" data-x-href="https://infra.spec.whatwg.org/#map-remove">removing an entry</dfn>, and
+             <dfn data-x="map remove" data-x-href="https://infra.spec.whatwg.org/#map-remove">removing an entry</dfn>,
+             <dfn data-x="map get the keys" data-x-href="https://infra.spec.whatwg.org/#map-getting-the-keys">getting the keys</dfn>, and
              <dfn data-x="map iterate" data-x-href="https://infra.spec.whatwg.org/#map-iterate">iterate</dfn></li>
      <li>The <dfn data-x-href="https://infra.spec.whatwg.org/#list">list</dfn> data structure and the associated definitions for
              <dfn data-x="list append" data-x-href="https://infra.spec.whatwg.org/#list-append">append</dfn>,
@@ -94502,16 +94503,28 @@ interface mixin <dfn>AnimationFrameProvider</dfn> {
   a timestamp <var>now</var>:</p>
 
   <ol>
-   <li><p>Let <var>callbacks</var> be a clone of <var>target</var>'s <span>map of animation frame
+   <li><p>Let <var>callbacks</var> be <var>target</var>'s <span>map of animation frame
    callbacks</span>.</p></li>
 
-   <li><p>Set <var>target</var>'s <span>map of animation frame callbacks</span> to a new empty
-   <span>ordered map</span>.</p></li>
+   <li><p>Let <var>callbackHandles</var> be the result of <span data-x="map get the keys">getting
+   the keys</span> of <var>callbacks</var>.</p></li>
+
+   <li>
+    <p><span data-x="list iterate">For each</span> <var>handle</var> in
+    <var>callbackHandles</var>, if <var>handle</var> <span data-x="map exists">exists</span> in
+    <var>callbacks</var>:</p>
+
+    <ol>
+     <li><p>Let <var>callback</var> be <var>callbacks</var>[<var>handle</var>].</p></li>
+
+     <li><p><span data-x="map remove">Remove</span>
+     <var>callbacks</var>[<var>handle</var>].</p></li>
 
-   <li><p><span data-x="map iterate">For each</span> <var>handle</var> → <var>callback</var> of
-   <var>callbacks</var>, <span data-x="es-invoking-callback-functions">invoke</span>
-   <var>callback</var>, passing <var>now</var> as the only argument, and if an exception is thrown,
-   <span>report the exception</span>.</p></li>
+     <li><p><span data-x="es-invoking-callback-functions">Invoke</span> <var>callback</var>, passing
+     <var>now</var> as the only argument, and if an exception is thrown,
+     <span>report the exception</span>.</p></li>
+    </ol>
+   </li>
   </ol>
 
   <div class="example">