worklet-animation-creation.https.html (5902B)
1 <!DOCTYPE html> 2 <title>Verify that WorkletAnimation is correctly created</title> 3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 4 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="common.js"></script> 9 10 <style> 11 .scroller { 12 height: 100px; 13 width: 100px; 14 overflow: scroll; 15 } 16 .content { 17 height: 500px; 18 width: 500px; 19 } 20 </style> 21 22 <script> 23 function CreateKeyframeEffect(element) { 24 return new KeyframeEffect( 25 element, 26 [ 27 { transform: 'translateY(0%)' }, 28 { transform: 'translateY(100%)' } 29 ], 30 { duration: 3000, fill: 'forwards' } 31 ); 32 } 33 </script> 34 <script id="simple_animate" type="text/worklet"> 35 registerAnimator("test-animator", class { 36 animate(currentTime, effect) {} 37 }); 38 </script> 39 40 <div id='element'></div> 41 <div id='element2'></div> 42 <div class='scroller'> 43 <div class='content'></div> 44 </div> 45 46 <script> 47 promise_test(async t => { 48 await runInAnimationWorklet(document.getElementById('simple_animate').textContent); 49 let effect = CreateKeyframeEffect(document.querySelector('#element')); 50 let workletAnimation = new WorkletAnimation('test-animator', effect); 51 assert_equals(workletAnimation.playState, 'idle'); 52 assert_equals(workletAnimation.timeline, document.timeline); 53 }, 'WorkletAnimation creation without timeline should use default documentation timeline'); 54 55 promise_test(async t => { 56 await runInAnimationWorklet(document.getElementById('simple_animate').textContent); 57 let effect = CreateKeyframeEffect(document.querySelector('#element')); 58 let workletAnimation = new WorkletAnimation('test-animator', effect); 59 assert_equals(workletAnimation.playState, 'idle'); 60 }, 'WorkletAnimation creation with timeline should work'); 61 62 promise_test(async t => { 63 await runInAnimationWorklet(document.getElementById('simple_animate').textContent); 64 let iframe = document.createElement('iframe'); 65 iframe.src = 'resources/iframe.html'; 66 document.body.appendChild(iframe); 67 68 await waitForAnimationFrameWithCondition(_ => { 69 return iframe.contentDocument.getElementById('iframe_box') != null; 70 }); 71 let iframe_document = iframe.contentDocument; 72 let effect = CreateKeyframeEffect(iframe_document.getElementById('iframe_box')); 73 74 let animation_with_main_frame_timeline = 75 new WorkletAnimation('test-animator', effect, document.timeline); 76 assert_equals(animation_with_main_frame_timeline.timeline, document.timeline); 77 78 let animation_with_iframe_timeline = 79 new WorkletAnimation('test-animator', effect, iframe_document.timeline); 80 assert_equals(animation_with_iframe_timeline.timeline, iframe_document.timeline); 81 82 let animation_with_default_timeline = new WorkletAnimation('test-animator', effect); 83 // The spec says that the default timeline is taken from 'the Document that is 84 // associated with the window that is the current global object'. In this case 85 // that is the main document's timeline, not the iframe (despite the target 86 // being in the iframe). 87 assert_equals(animation_with_default_timeline.timeline, document.timeline); 88 89 iframe.remove(); 90 }, 'WorkletAnimation creation should choose the correct timeline based on the current global object'); 91 92 promise_test(async t => { 93 await runInAnimationWorklet(document.getElementById('simple_animate').textContent); 94 let effect = CreateKeyframeEffect(document.querySelector('#element')); 95 let options = { my_param: 'foo', my_other_param: true }; 96 let workletAnimation = new WorkletAnimation( 97 'test-animator', effect, document.timeline, options); 98 assert_equals(workletAnimation.playState, 'idle'); 99 }, 'WorkletAnimation creation with timeline and options should work'); 100 101 promise_test(async t => { 102 await runInAnimationWorklet(document.getElementById('simple_animate').textContent); 103 let effect = CreateKeyframeEffect(document.querySelector('#element')); 104 let scroller = document.querySelector('.scroller'); 105 let scrollTimeline = new ScrollTimeline( 106 { scrollSource: scroller, orientation: 'inline' }); 107 let workletAnimation = new WorkletAnimation( 108 'test-animator', effect, scrollTimeline); 109 assert_equals(workletAnimation.playState, 'idle'); 110 }, 'ScrollTimeline is a valid timeline for a WorkletAnimation'); 111 112 promise_test(async t => { 113 await runInAnimationWorklet(document.getElementById('simple_animate').textContent); 114 let constructorFunc = function() { new WorkletAnimation( 115 'test-animator', []); }; 116 assert_throws_dom('NotSupportedError', constructorFunc); 117 }, 'If there are no effects specified, object construction should fail'); 118 119 promise_test(async t => { 120 await runInAnimationWorklet(document.getElementById('simple_animate').textContent); 121 let effect = CreateKeyframeEffect(document.querySelector('#element')); 122 123 let otherDoc = document.implementation.createHTMLDocument(); 124 let otherElement = otherDoc.createElement('div'); 125 otherDoc.body.appendChild(otherElement); 126 let otherEffect = CreateKeyframeEffect(otherElement); 127 128 let workletAnimation = new WorkletAnimation( 129 'test-animator', [ effect, otherEffect ]); 130 assert_equals(workletAnimation.playState, 'idle'); 131 }, 'Creating animation with effects from different documents is allowed'); 132 133 promise_test(async t => { 134 await runInAnimationWorklet(document.getElementById('simple_animate').textContent); 135 let effect = CreateKeyframeEffect(document.querySelector('#element')); 136 let constructorFunc = function() { 137 new WorkletAnimation('unregistered-animator', effect); 138 }; 139 assert_throws_dom('InvalidStateError', constructorFunc); 140 }, 'Constructing worklet animation for unregisested animator should throw'); 141 </script>