| <!DOCTYPE html> |
| <title>Basic use of stateful animator</title> |
| <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| <script src="common.js"></script> |
| |
| <div id="target"></div> |
| |
| <script id="stateful_animator_basic" type="text/worklet"> |
| registerAnimator("stateful_animator_basic", class { |
| constructor(options, state = { test_local_time: 0 }) { |
| this.test_local_time = state.test_local_time; |
| } |
| animate(currentTime, effect) { |
| effect.localTime = this.test_local_time++; |
| } |
| state() { |
| return { |
| test_local_time: this.test_local_time |
| }; |
| } |
| }); |
| </script> |
| |
| <script id="stateless_animator_basic" type="text/worklet"> |
| registerAnimator("stateless_animator_basic", class { |
| constructor(options, state = { test_local_time: 0 }) { |
| this.test_local_time = state.test_local_time; |
| } |
| animate(currentTime, effect) { |
| effect.localTime = this.test_local_time++; |
| } |
| // Unless a valid state function is provided, the animator is considered |
| // stateless. e.g. animator with incorrect state function name. |
| State() { |
| return { |
| test_local_time: this.test_local_time |
| }; |
| } |
| }); |
| </script> |
| |
| <script id="stateless_animator_preserves_effect_local_time" type="text/worklet"> |
| registerAnimator("stateless_animator_preserves_effect_local_time", class { |
| animate(currentTime, effect) { |
| // The local time will be carried over to the new global scope. |
| effect.localTime = effect.localTime ? effect.localTime + 1 : 1; |
| } |
| }); |
| </script> |
| |
| <script id="stateless_animator_does_not_copy_effect_object" type="text/worklet"> |
| registerAnimator("stateless_animator_does_not_copy_effect_object", class { |
| animate(currentTime, effect) { |
| effect.localTime = effect.localTime ? effect.localTime + 1 : 1; |
| effect.foo = effect.foo ? effect.foo + 1 : 1; |
| // This condition becomes true once we switch global scope and only preserve local time |
| // otherwise these values keep increasing in lock step. |
| if (effect.localTime > effect.foo) { |
| // This works as long as we switch global scope before 10000 frames. |
| // which is a safe assumption. |
| effect.localTime = 10000; |
| } |
| } |
| }); |
| </script> |
| |
| <script id="state_function_returns_empty" type="text/worklet"> |
| registerAnimator("state_function_returns_empty", class { |
| constructor(options, state = { test_local_time: 0 }) { |
| this.test_local_time = state.test_local_time; |
| } |
| animate(currentTime, effect) { |
| effect.localTime = this.test_local_time++; |
| } |
| state() {} |
| }); |
| </script> |
| |
| <script id="state_function_returns_not_serializable" type="text/worklet"> |
| registerAnimator("state_function_returns_not_serializable", class { |
| constructor(options) { |
| this.test_local_time = 0; |
| } |
| animate(currentTime, effect) { |
| effect.localTime = this.test_local_time++; |
| } |
| state() { |
| return new Symbol('foo'); |
| } |
| }); |
| </script> |
| |
| <script> |
| const EXPECTED_FRAMES_TO_A_SCOPE_SWITCH = 15; |
| async function localTimeDoesNotUpdate(animation) { |
| // The local time stops increasing after the animator instance being dropped. |
| // e.g. 0, 1, 2, .., n, n, n, n, .. where n is the frame that the global |
| // scope switches at. |
| let last_local_time = animation.effect.getComputedTiming().localTime; |
| let frame_count = 0; |
| const FRAMES_WITHOUT_CHANGE = 10; |
| do { |
| await new Promise(window.requestAnimationFrame); |
| let current_local_time = animation.effect.getComputedTiming().localTime; |
| if (approxEquals(last_local_time, current_local_time)) |
| ++frame_count; |
| else |
| frame_count = 0; |
| last_local_time = current_local_time; |
| } while (frame_count < FRAMES_WITHOUT_CHANGE); |
| } |
| |
| async function localTimeResetsToZero(animation) { |
| // The local time is reset upon global scope switching. e.g. |
| // 0, 1, 2, .., 0, 1, 2, .., 0, 1, 2, .., 0, 1, 2, ... |
| let reset_count = 0; |
| const LOCAL_TIME_RESET_CHECK = 3; |
| do { |
| await new Promise(window.requestAnimationFrame); |
| if (approxEquals(0, animation.effect.getComputedTiming().localTime)) |
| ++reset_count; |
| } while (reset_count < LOCAL_TIME_RESET_CHECK); |
| } |
| |
| promise_test(async t => { |
| await runInAnimationWorklet(document.getElementById('stateful_animator_basic').textContent); |
| const target = document.getElementById('target'); |
| const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 }); |
| const animation = new WorkletAnimation('stateful_animator_basic', effect); |
| animation.play(); |
| |
| // effect.localTime should be correctly increased upon global scope |
| // switches for stateful animators. |
| await waitForAnimationFrameWithCondition(_ => { |
| return approxEquals(animation.effect.getComputedTiming().localTime, |
| EXPECTED_FRAMES_TO_A_SCOPE_SWITCH); |
| }); |
| |
| animation.cancel(); |
| }, "Stateful animator can use its state to update the animation. Pass if test does not timeout"); |
| |
| promise_test(async t => { |
| await runInAnimationWorklet(document.getElementById('stateless_animator_basic').textContent); |
| const target = document.getElementById('target'); |
| const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 }); |
| const animation = new WorkletAnimation('stateless_animator_basic', effect); |
| animation.play(); |
| |
| // The local time should be reset to 0 upon global scope switching for |
| // stateless animators. |
| await localTimeResetsToZero(animation); |
| |
| animation.cancel(); |
| }, "Stateless animator gets reecreated with 'undefined' state."); |
| |
| promise_test(async t => { |
| await runInAnimationWorklet(document.getElementById('stateless_animator_preserves_effect_local_time').textContent); |
| const target = document.getElementById('target'); |
| const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 }); |
| const animation = new WorkletAnimation('stateless_animator_preserves_effect_local_time', effect); |
| animation.play(); |
| |
| await waitForAnimationFrameWithCondition(_ => { |
| return approxEquals(animation.effect.getComputedTiming().localTime, |
| EXPECTED_FRAMES_TO_A_SCOPE_SWITCH); |
| }); |
| |
| animation.cancel(); |
| }, "Stateless animator should preserve the local time of its effect."); |
| |
| promise_test(async t => { |
| await runInAnimationWorklet(document.getElementById('stateless_animator_does_not_copy_effect_object').textContent); |
| const target = document.getElementById('target'); |
| const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 }); |
| const animation = new WorkletAnimation('stateless_animator_does_not_copy_effect_object', effect); |
| animation.play(); |
| |
| await waitForAnimationFrameWithCondition(_ => { |
| return approxEquals(animation.effect.getComputedTiming().localTime, 10000); |
| }); |
| |
| animation.cancel(); |
| }, "Stateless animator should not copy the effect object."); |
| |
| promise_test(async t => { |
| await runInAnimationWorklet(document.getElementById('state_function_returns_empty').textContent); |
| const target = document.getElementById('target'); |
| const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 }); |
| const animation = new WorkletAnimation('state_function_returns_empty', effect); |
| animation.play(); |
| |
| // The local time should be reset to 0 upon global scope switching for |
| // stateless animators. |
| await localTimeResetsToZero(animation); |
| |
| animation.cancel(); |
| }, "Stateful animator gets recreated with 'undefined' state if state function returns undefined."); |
| |
| promise_test(async t => { |
| await runInAnimationWorklet(document.getElementById('state_function_returns_not_serializable').textContent); |
| const target = document.getElementById('target'); |
| const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000, iteration: Infinity }); |
| const animation = new WorkletAnimation('state_function_returns_not_serializable', effect); |
| animation.play(); |
| |
| // The local time of an animation increases until the registered animator |
| // gets removed. |
| await localTimeDoesNotUpdate(animation); |
| |
| animation.cancel(); |
| }, "Stateful Animator instance gets dropped (does not get migrated) if state function is not serializable."); |
| </script> |
