diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/animation-worklet/worklet-animation-local-time-null-1.https.html | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/animation-worklet/worklet-animation-local-time-null-1.https.html')
| -rw-r--r-- | testing/web-platform/tests/animation-worklet/worklet-animation-local-time-null-1.https.html | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/testing/web-platform/tests/animation-worklet/worklet-animation-local-time-null-1.https.html b/testing/web-platform/tests/animation-worklet/worklet-animation-local-time-null-1.https.html new file mode 100644 index 0000000000..52727fa6ea --- /dev/null +++ b/testing/web-platform/tests/animation-worklet/worklet-animation-local-time-null-1.https.html @@ -0,0 +1,163 @@ +<!DOCTYPE html> +<title>Setting localTime to null means effect does not apply</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> + +<style> +.box { + width: 100px; + height: 100px; + background-color: green; + display: inline-block; +} +</style> + +<div> +<div class="box" id="target1"></div> +<div class="box" id="target2"></div> +<div class="box" id="target3"></div> +<div class="box" id="target4"></div> +</div> + + +<script> +promise_test(async t => { + await runInAnimationWorklet(` + registerAnimator("blank_animator", class { + animate(currentTime, effect) { + // Unset effect.localTime is equivalent to 'null' + } + }); + `); + const target = document.getElementById('target1'); + + const animation = new WorkletAnimation('blank_animator', + new KeyframeEffect(target, + [ + { transform: 'translateY(100px)' }, + { transform: 'translateY(200px)' } + ], { + duration: 1000, + } + ) + ); + animation.play(); + await waitForAsyncAnimationFrames(1); + assert_equals(getComputedStyle(target).transform, "none"); +}, "A worklet which never sets localTime has no effect."); + +promise_test(async t => { + await runInAnimationWorklet(` + registerAnimator("null_animator", class { + animate(currentTime, effect) { + effect.localTime = null; + } + }); + `); + const target = document.getElementById('target2'); + + const animation = new WorkletAnimation('null_animator', + new KeyframeEffect(target, + [ + { transform: 'translateY(100px)' }, + { transform: 'translateY(200px)' } + ], { + duration: 1000, + } + ) + ); + animation.play(); + await waitForAsyncAnimationFrames(1); + assert_equals(getComputedStyle(target).transform, "none"); +}, "A worklet which sets localTime to null has no effect."); + +promise_test(async t => { + await runInAnimationWorklet(` + registerAnimator("drop_animator", class { + animate(currentTime, effect) { + if (currentTime < 500) + effect.localTime = 500; + else if (currentTime < 1000) + effect.localTime = 0; + else + effect.localTime = null; + } + }); + `); + const target = document.getElementById('target3'); + + const animation = new WorkletAnimation('drop_animator', + new KeyframeEffect(target, + [ + { transform: 'translateY(100px)' }, + { transform: 'translateY(200px)' } + ], { + duration: 1000, + } + ) + ); + animation.play(); + await waitForAsyncAnimationFrames(5); + assert_equals(getComputedStyle(target).transform, "matrix(1, 0, 0, 1, 0, 150)", + "The animation has an effect at first"); + + await waitForAnimationFrameWithCondition(() => animation.currentTime > 500); + await waitForAsyncAnimationFrames(1); + assert_equals(getComputedStyle(target).transform, "matrix(1, 0, 0, 1, 0, 100)", + "The effect correctly changes"); + + await waitForAnimationFrameWithCondition(() => animation.currentTime > 1000); + await waitForAsyncAnimationFrames(1); + assert_equals(getComputedStyle(target).transform, "none", + "The effect stops on nulling of localTime"); + +}, "A worklet which changes localTime to from a number to null has no effect on transform."); + +promise_test(async t => { + await runInAnimationWorklet(` + registerAnimator("drop2_animator", class { + animate(currentTime, effect) { + if (currentTime < 500) + effect.localTime = 500; + else if (currentTime < 1000) + effect.localTime = 0; + else + effect.localTime = null; + } + }); + `); + const target = document.getElementById('target4'); + + const animation = new WorkletAnimation('drop2_animator', + new KeyframeEffect(target, + [ + { backgroundColor: 'red' }, + { backgroundColor: 'blue' } + ], { + duration: 1000, + } + ) + ); + animation.play(); + await waitForAsyncAnimationFrames(5); + assert_equals(getComputedStyle(target).backgroundColor, "rgb(128, 0, 128)", + "The animation has an effect at first"); + + await waitForAnimationFrameWithCondition(() => animation.currentTime > 500); + await waitForAsyncAnimationFrames(1); + assert_equals(getComputedStyle(target).backgroundColor, "rgb(255, 0, 0)", + "The effect correctly changes"); + + await waitForAnimationFrameWithCondition(() => animation.currentTime > 1000); + await waitForAsyncAnimationFrames(1); + assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 128, 0)", + "The effect stops on nulling of localTime"); + +}, "A worklet which changes localTime to from a number to null has no effect on backgroundColor."); + + +</script> |