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-creation.https.html | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.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-creation.https.html')
| -rw-r--r-- | testing/web-platform/tests/animation-worklet/worklet-animation-creation.https.html | 141 |
1 files changed, 141 insertions, 0 deletions
diff --git a/testing/web-platform/tests/animation-worklet/worklet-animation-creation.https.html b/testing/web-platform/tests/animation-worklet/worklet-animation-creation.https.html new file mode 100644 index 0000000000..b7d1a43721 --- /dev/null +++ b/testing/web-platform/tests/animation-worklet/worklet-animation-creation.https.html @@ -0,0 +1,141 @@ +<!DOCTYPE html> +<title>Verify that WorkletAnimation is correctly created</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> + .scroller { + height: 100px; + width: 100px; + overflow: scroll; + } + .content { + height: 500px; + width: 500px; + } +</style> + +<script> +function CreateKeyframeEffect(element) { + return new KeyframeEffect( + element, + [ + { transform: 'translateY(0%)' }, + { transform: 'translateY(100%)' } + ], + { duration: 3000, fill: 'forwards' } + ); +} +</script> +<script id="simple_animate" type="text/worklet"> + registerAnimator("test-animator", class { + animate(currentTime, effect) {} + }); +</script> + +<div id='element'></div> +<div id='element2'></div> +<div class='scroller'> + <div class='content'></div> +</div> + +<script> + promise_test(async t => { + await runInAnimationWorklet(document.getElementById('simple_animate').textContent); + let effect = CreateKeyframeEffect(document.querySelector('#element')); + let workletAnimation = new WorkletAnimation('test-animator', effect); + assert_equals(workletAnimation.playState, 'idle'); + assert_equals(workletAnimation.timeline, document.timeline); + }, 'WorkletAnimation creation without timeline should use default documentation timeline'); + + promise_test(async t => { + await runInAnimationWorklet(document.getElementById('simple_animate').textContent); + let effect = CreateKeyframeEffect(document.querySelector('#element')); + let workletAnimation = new WorkletAnimation('test-animator', effect); + assert_equals(workletAnimation.playState, 'idle'); + }, 'WorkletAnimation creation with timeline should work'); + + promise_test(async t => { + await runInAnimationWorklet(document.getElementById('simple_animate').textContent); + let iframe = document.createElement('iframe'); + iframe.src = 'resources/iframe.html'; + document.body.appendChild(iframe); + + await waitForAnimationFrameWithCondition(_ => { + return iframe.contentDocument.getElementById('iframe_box') != null; + }); + let iframe_document = iframe.contentDocument; + let effect = CreateKeyframeEffect(iframe_document.getElementById('iframe_box')); + + let animation_with_main_frame_timeline = + new WorkletAnimation('test-animator', effect, document.timeline); + assert_equals(animation_with_main_frame_timeline.timeline, document.timeline); + + let animation_with_iframe_timeline = + new WorkletAnimation('test-animator', effect, iframe_document.timeline); + assert_equals(animation_with_iframe_timeline.timeline, iframe_document.timeline); + + let animation_with_default_timeline = new WorkletAnimation('test-animator', effect); + // The spec says that the default timeline is taken from 'the Document that is + // associated with the window that is the current global object'. In this case + // that is the main document's timeline, not the iframe (despite the target + // being in the iframe). + assert_equals(animation_with_default_timeline.timeline, document.timeline); + + iframe.remove(); + }, 'WorkletAnimation creation should choose the correct timeline based on the current global object'); + + promise_test(async t => { + await runInAnimationWorklet(document.getElementById('simple_animate').textContent); + let effect = CreateKeyframeEffect(document.querySelector('#element')); + let options = { my_param: 'foo', my_other_param: true }; + let workletAnimation = new WorkletAnimation( + 'test-animator', effect, document.timeline, options); + assert_equals(workletAnimation.playState, 'idle'); + }, 'WorkletAnimation creation with timeline and options should work'); + + promise_test(async t => { + await runInAnimationWorklet(document.getElementById('simple_animate').textContent); + let effect = CreateKeyframeEffect(document.querySelector('#element')); + let scroller = document.querySelector('.scroller'); + let scrollTimeline = new ScrollTimeline( + { scrollSource: scroller, orientation: 'inline' }); + let workletAnimation = new WorkletAnimation( + 'test-animator', effect, scrollTimeline); + assert_equals(workletAnimation.playState, 'idle'); + }, 'ScrollTimeline is a valid timeline for a WorkletAnimation'); + + promise_test(async t => { + await runInAnimationWorklet(document.getElementById('simple_animate').textContent); + let constructorFunc = function() { new WorkletAnimation( + 'test-animator', []); }; + assert_throws_dom('NotSupportedError', constructorFunc); + }, 'If there are no effects specified, object construction should fail'); + + promise_test(async t => { + await runInAnimationWorklet(document.getElementById('simple_animate').textContent); + let effect = CreateKeyframeEffect(document.querySelector('#element')); + + let otherDoc = document.implementation.createHTMLDocument(); + let otherElement = otherDoc.createElement('div'); + otherDoc.body.appendChild(otherElement); + let otherEffect = CreateKeyframeEffect(otherElement); + + let workletAnimation = new WorkletAnimation( + 'test-animator', [ effect, otherEffect ]); + assert_equals(workletAnimation.playState, 'idle'); + }, 'Creating animation with effects from different documents is allowed'); + + promise_test(async t => { + await runInAnimationWorklet(document.getElementById('simple_animate').textContent); + let effect = CreateKeyframeEffect(document.querySelector('#element')); + let constructorFunc = function() { + new WorkletAnimation('unregistered-animator', effect); + }; + assert_throws_dom('InvalidStateError', constructorFunc); + }, 'Constructing worklet animation for unregisested animator should throw'); +</script> |