test_animations_effect_timing_duration.html (2443B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 5 Test for animation.effect.updateTiming({ duration }) 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)', easing: "steps(2, start)" }, 40 { transform: 'translate(100px)' } ], 4000); 41 await waitForPaints(); 42 43 advance_clock(500); 44 omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor, 45 "Animation is running on compositor"); 46 animation.effect.updateTiming({ duration: 2000 }); 47 // Setter of timing option should set up the changes to animations for the 48 // next layer transaction but it won't schedule a paint immediately so we need 49 // to tick the refresh driver before we can wait on the next paint. 50 advance_clock(0); 51 52 await waitForPaints(); 53 omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor, 54 "Animation remains on compositor"); 55 56 advance_clock(1000); 57 omta_is(div, "transform", { tx: 100 }, RunningOn.Compositor, 58 "Animation is updated on compositor"); 59 60 done_div(); 61 }); 62 63 addAsyncAnimTest(async function() { 64 var [ div ] = new_div(""); 65 var animation = div.animate( 66 [ { transform: 'translate(0px)', easing: "steps(2, end)" }, 67 { transform: 'translate(100px)' } ], 4000); 68 await waitForPaints(); 69 70 advance_clock(1000); 71 animation.effect.updateTiming({ duration: 2000 }); 72 advance_clock(0); 73 await waitForPaints(); 74 omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor, 75 "Animation is running on compositor"); 76 done_div(); 77 }) 78 79 </script> 80 </body> 81 </html>