| <!doctype html> |
| <meta charset=utf-8> |
| <title>Update animations and send events</title> |
| <meta name="timeout" content="long"> |
| <link rel="help" href="https://drafts.csswg.org/web-animations/#update-animations-and-send-events"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="../../testcommon.js"></script> |
| <div id="log"></div> |
| <script> |
| 'use strict'; |
| |
| promise_test(async t => { |
| const div = createDiv(t); |
| const animation = div.animate(null, 100 * MS_PER_SEC); |
| |
| // The ready promise should be resolved as part of micro-task checkpoint |
| // after updating the current time of all timeslines in the procedure to |
| // "update animations and send events". |
| await animation.ready; |
| |
| let rAFReceived = false; |
| requestAnimationFrame(() => rAFReceived = true); |
| |
| const eventWatcher = new EventWatcher(t, animation, 'cancel'); |
| animation.cancel(); |
| |
| await eventWatcher.wait_for('cancel'); |
| |
| assert_false(rAFReceived, |
| 'cancel event should be fired before requestAnimationFrame'); |
| }, 'Fires cancel event before requestAnimationFrame'); |
| |
| promise_test(async t => { |
| const div = createDiv(t); |
| const animation = div.animate(null, 100 * MS_PER_SEC); |
| |
| // Like the above test, the ready promise should be resolved micro-task |
| // checkpoint after updating the current time of all timeslines in the |
| // procedure to "update animations and send events". |
| await animation.ready; |
| |
| let rAFReceived = false; |
| requestAnimationFrame(() => rAFReceived = true); |
| |
| const eventWatcher = new EventWatcher(t, animation, 'finish'); |
| animation.finish(); |
| |
| await eventWatcher.wait_for('finish'); |
| |
| assert_false(rAFReceived, |
| 'finish event should be fired before requestAnimationFrame'); |
| }, 'Fires finish event before requestAnimationFrame'); |
| |
| function animationType(anim) { |
| if (anim instanceof CSSAnimation) { |
| return 'CSSAnimation'; |
| } else if (anim instanceof CSSTransition) { |
| return 'CSSTransition'; |
| } else { |
| return 'ScriptAnimation'; |
| } |
| } |
| |
| promise_test(async t => { |
| createStyle(t, { '@keyframes anim': '' }); |
| const div = createDiv(t); |
| |
| getComputedStyle(div).marginLeft; |
| div.style = 'animation: anim 100s; ' + |
| 'transition: margin-left 100s; ' + |
| 'margin-left: 100px;'; |
| div.animate(null, 100 * MS_PER_SEC); |
| const animations = div.getAnimations(); |
| |
| let receivedEvents = []; |
| animations.forEach(anim => { |
| anim.onfinish = event => { |
| receivedEvents.push({ |
| type: animationType(anim) + ':' + event.type, |
| timeStamp: event.timeStamp |
| }); |
| }; |
| }); |
| |
| await Promise.all(animations.map(anim => anim.ready)); |
| |
| // Setting current time to the time just before the effect end. |
| animations.forEach(anim => anim.currentTime = 100 * MS_PER_SEC - 1); |
| |
| await waitForNextFrame(); |
| |
| assert_array_equals(receivedEvents.map(event => event.type), |
| [ 'CSSTransition:finish', 'CSSAnimation:finish', |
| 'ScriptAnimation:finish' ], |
| 'finish events for various animation type should be sorted by composite ' + |
| 'order'); |
| }, 'Sorts finish events by composite order'); |
| |
| promise_test(async t => { |
| createStyle(t, { '@keyframes anim': '' }); |
| const div = createDiv(t); |
| |
| let receivedEvents = []; |
| function receiveEvent(type, timeStamp) { |
| receivedEvents.push({ type, timeStamp }); |
| } |
| |
| div.onanimationcancel = event => receiveEvent(event.type, event.timeStamp); |
| div.ontransitioncancel = event => receiveEvent(event.type, event.timeStamp); |
| |
| getComputedStyle(div).marginLeft; |
| div.style = 'animation: anim 100s; ' + |
| 'transition: margin-left 100s; ' + |
| 'margin-left: 100px;'; |
| div.animate(null, 100 * MS_PER_SEC); |
| const animations = div.getAnimations(); |
| |
| animations.forEach(anim => { |
| anim.oncancel = event => { |
| receiveEvent(animationType(anim) + ':' + event.type, event.timeStamp); |
| }; |
| }); |
| |
| await Promise.all(animations.map(anim => anim.ready)); |
| |
| const timeInAnimationReady = document.timeline.currentTime; |
| |
| // Call cancel() in reverse composite order. I.e. canceling for script |
| // animation happen first, then for CSS animation and CSS transition. |
| // 'cancel' events for these animations should be sorted by composite |
| // order. |
| animations.reverse().forEach(anim => anim.cancel()); |
| |
| // requestAnimationFrame callback which is actually the _same_ frame since we |
| // are currently operating in the `ready` callbac of the animations which |
| // happens as part of the "Update animations and send events" procedure |
| // _before_ we run animation frame callbacks. |
| await waitForAnimationFrames(1); |
| |
| assert_times_equal(timeInAnimationReady, document.timeline.currentTime, |
| 'A rAF callback should happen in the same frame'); |
| |
| assert_array_equals(receivedEvents.map(event => event.type), |
| // This ordering needs more clarification in the spec, but the intention is |
| // that the cancel playback event fires before the equivalent CSS cancel |
| // event in each case. |
| [ 'CSSTransition:cancel', 'CSSAnimation:cancel', 'ScriptAnimation:cancel', |
| 'transitioncancel', 'animationcancel' ], |
| 'cancel events should be sorted by composite order'); |
| }, 'Sorts cancel events by composite order'); |
| |
| promise_test(async t => { |
| const div = createDiv(t); |
| getComputedStyle(div).marginLeft; |
| div.style = 'transition: margin-left 100s; margin-left: 100px;'; |
| const anim = div.getAnimations()[0]; |
| |
| let receivedEvents = []; |
| anim.oncancel = event => receivedEvents.push(event); |
| |
| const eventWatcher = new EventWatcher(t, div, 'transitionstart'); |
| await eventWatcher.wait_for('transitionstart'); |
| |
| const timeInEventCallback = document.timeline.currentTime; |
| |
| // Calling cancel() queues a cancel event |
| anim.cancel(); |
| |
| await waitForAnimationFrames(1); |
| assert_times_equal(timeInEventCallback, document.timeline.currentTime, |
| 'A rAF callback should happen in the same frame'); |
| |
| assert_array_equals(receivedEvents, [], |
| 'The queued cancel event shouldn\'t be dispatched in the same frame'); |
| |
| await waitForAnimationFrames(1); |
| assert_array_equals(receivedEvents.map(event => event.type), ['cancel'], |
| 'The cancel event should be dispatched in a later frame'); |
| }, 'Queues a cancel event in transitionstart event callback'); |
| |
| promise_test(async t => { |
| const div = createDiv(t); |
| getComputedStyle(div).marginLeft; |
| div.style = 'transition: margin-left 100s; margin-left: 100px;'; |
| const anim = div.getAnimations()[0]; |
| |
| let receivedEvents = []; |
| anim.oncancel = event => receivedEvents.push(event); |
| div.ontransitioncancel = event => receivedEvents.push(event); |
| |
| await anim.ready; |
| |
| anim.cancel(); |
| |
| await waitForAnimationFrames(1); |
| |
| assert_array_equals(receivedEvents.map(event => event.type), |
| [ 'cancel', 'transitioncancel' ], |
| 'Playback and CSS events for the same transition should be sorted by ' + |
| 'schedule event time and composite order'); |
| }, 'Sorts events for the same transition'); |
| |
| promise_test(async t => { |
| const div = createDiv(t); |
| const anim = div.animate(null, 100 * MS_PER_SEC); |
| |
| let receivedEvents = []; |
| anim.oncancel = event => receivedEvents.push(event); |
| anim.onfinish = event => receivedEvents.push(event); |
| |
| await anim.ready; |
| |
| anim.finish(); |
| anim.cancel(); |
| |
| await waitForAnimationFrames(1); |
| |
| assert_array_equals(receivedEvents.map(event => event.type), |
| [ 'finish', 'cancel' ], |
| 'Calling finish() synchronously queues a finish event when updating the ' + |
| 'finish state so it should appear before the cancel event'); |
| }, 'Playback events with the same timeline retain the order in which they are' + |
| 'queued'); |
| |
| promise_test(async t => { |
| const div = createDiv(t); |
| |
| // Create two animations with separate timelines |
| |
| const timelineA = document.timeline; |
| const animA = div.animate(null, 100 * MS_PER_SEC); |
| |
| const timelineB = new DocumentTimeline(); |
| const animB = new Animation( |
| new KeyframeEffect(div, null, 100 * MS_PER_SEC), |
| timelineB |
| ); |
| animB.play(); |
| |
| animA.currentTime = 99.9 * MS_PER_SEC; |
| animB.currentTime = 99.9 * MS_PER_SEC; |
| |
| // When the next tick happens both animations should be updated, and we will |
| // notice that they are now finished. As a result their finished promise |
| // callbacks should be queued. All of that should happen before we run the |
| // next microtask checkpoint and actually run the promise callbacks and |
| // hence the calls to cancel should not stop the existing callbacks from |
| // being run. |
| |
| animA.finished.then(() => { animB.cancel() }); |
| animB.finished.then(() => { animA.cancel() }); |
| |
| await Promise.all([animA.finished, animB.finished]); |
| }, 'All timelines are updated before running microtasks'); |
| |
| </script> |
