| <!doctype html> |
| <meta charset=utf-8> |
| <title>CustomEffect</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../imported/w3c/web-platform-tests/web-animations/testcommon.js"></script> |
| <body> |
| <script> |
| 'use strict'; |
| |
| promise_test(async t => { |
| let numberOfCalls = 0; |
| let customEffectProgress = null; |
| |
| const animation = document.timeline.animate(progress => { |
| customEffectProgress = progress; |
| numberOfCalls++; |
| }, { duration: 1 }); |
| |
| assert_equals(customEffectProgress, null, "Callback does not fire upon creation."); |
| |
| await waitForAnimationFrames(1); |
| assert_equals(customEffectProgress, 0, "Callback is first fired with progress = 0."); |
| |
| await animation.finished; |
| const numberOfCallsAfterEffectEnded = numberOfCalls; |
| |
| await waitForAnimationFrames(1); |
| assert_equals(numberOfCallsAfterEffectEnded, numberOfCalls, "Callback is no longer fired after custom effect entered the after phase."); |
| assert_not_equals(customEffectProgress, 1, "Callback is first fired with progress = 1."); |
| }, "Custom effects with no fill do not fire with progress = 1."); |
| |
| promise_test(async t => { |
| let numberOfCalls = 0; |
| let customEffectProgress = null; |
| |
| const animation = document.timeline.animate(progress => { |
| customEffectProgress = progress; |
| numberOfCalls++; |
| }, { fill: "forwards", duration: 1}); |
| |
| assert_equals(customEffectProgress, null, "Callback does not fire upon creation."); |
| |
| await animation.finished; |
| assert_equals(customEffectProgress, 1, "Callback is finally fired with progress = 1."); |
| |
| const numberOfCallsAfterEffectEnded = numberOfCalls; |
| |
| await waitForAnimationFrames(1); |
| assert_equals(numberOfCallsAfterEffectEnded, numberOfCalls, "Callback is no longer fired after custom effect entered the after phase."); |
| }, "Forward-filling custom effects fire once with progress = 1."); |
| |
| promise_test(async t => { |
| let numberOfCalls = 0; |
| let customEffectProgress = null; |
| |
| // Create an animation that won't start until long into the future. |
| const animation = new Animation; |
| animation.startTime = document.timeline.currentTime + (100 * 1000); |
| animation.effect = new CustomEffect(progress => { |
| customEffectProgress = progress; |
| numberOfCalls++; |
| }, { fill: "backwards", duration: 1}); |
| |
| assert_equals(customEffectProgress, null, "Callback does not fire upon creation."); |
| |
| await waitForAnimationFrames(1); |
| assert_equals(customEffectProgress, 0, "Callback is first fired with progress = 0."); |
| |
| await waitForAnimationFrames(1); |
| assert_equals(numberOfCalls, 1, "Callback is not fired after the first frame as it's still in the before phase and its progress hasn't changed."); |
| }, "Backward-filling custom effects fire only once with progress = 0 during the before phase."); |
| |
| promise_test(async t => { |
| let numberOfCalls = 0; |
| let customEffectProgress = null; |
| |
| const duration = 1000; |
| const animation = document.timeline.animate(progress => { |
| customEffectProgress = progress; |
| numberOfCalls++; |
| }, duration); |
| |
| animation.pause(); |
| assert_equals(customEffectProgress, null, "Callback does not fire upon creation."); |
| |
| await waitForAnimationFrames(1); |
| assert_equals(customEffectProgress, 0, "Callback is first fired with progress = 0."); |
| |
| await waitForAnimationFrames(1); |
| assert_equals(numberOfCalls, 1, "Callback is not called while animation is paused."); |
| |
| animation.currentTime = animation.startTime + (duration * 0.2); |
| animation.currentTime = animation.startTime + (duration * 0.1); |
| |
| await waitForAnimationFrames(1); |
| assert_equals(numberOfCalls, 2, "Callback is only called once if changing the current time several times between frames."); |
| assert_equals(customEffectProgress, 0.1, "Callback is called with the update progress when seeking the animation."); |
| }, "Custom effects are called when the associated animatoun is paused and seeked."); |
| |
| promise_test(async t => { |
| await new Promise(resolve => { |
| document.timeline.animate(progress => resolve(), 100 * 1000); |
| }); |
| }, "Custom effects fire callbacks with no other reason to update the page rendering."); |
| |
| </script> |
| </body> |
