test_animations_effect_timing_iterations.html (1827B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 5 Test for Animation.effect.updateTiming({ iterations }) on compositor 6 animations 7 </title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <script src="/tests/SimpleTest/paint_listener.js"></script> 10 <script type="application/javascript" src="animation_utils.js"></script> 11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> 12 <style type="text/css"> 13 @keyframes anim { 14 0% { transform: translate(0px) } 15 100% { transform: translate(100px) } 16 } 17 .target { 18 /* The animation target needs geometry in order to qualify for OMTA */ 19 width: 100px; 20 height: 100px; 21 background-color: white; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="display"></div> 27 <script type="application/javascript"> 28 "use strict"; 29 30 SimpleTest.waitForExplicitFinish(); 31 32 runOMTATest(function() { 33 runAllAsyncAnimTests().then(SimpleTest.finish); 34 }, SimpleTest.finish, SpecialPowers); 35 36 addAsyncAnimTest(async function() { 37 var [ div ] = new_div(""); 38 var animation = div.animate( 39 [ { transform: 'translate(0px)' }, 40 { transform: 'translate(100px)' } ], 41 { duration: 4000, 42 iterations: 2 43 }); 44 await waitForPaints(); 45 46 advance_clock(6000); 47 omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor, 48 "Animation is running on compositor"); 49 animation.effect.updateTiming({ iterations: 1 }); 50 advance_clock(0); 51 52 await waitForPaints(); 53 omta_is(div, "transform", { tx: 0 }, RunningOn.MainThread, 54 "Animation is on MainThread"); 55 56 animation.effect.updateTiming({ iterations: 3 }); 57 58 advance_clock(0); 59 await waitForPaints(); 60 omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor, 61 "Animation is running again on compositor"); 62 63 done_div(); 64 }); 65 66 </script> 67 </body> 68 </html>