test_animations_pausing.html (2613B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 5 Test for Animation.play() and Animation.pause() on compositor animations 6 </title> 7 <script src="/tests/SimpleTest/SimpleTest.js"></script> 8 <script src="/tests/SimpleTest/paint_listener.js"></script> 9 <script type="application/javascript" src="animation_utils.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> 11 <style type="text/css"> 12 @keyframes anim { 13 0% { transform: translate(0px) } 14 100% { transform: translate(100px) } 15 } 16 .target { 17 /* The animation target needs geometry in order to qualify for OMTA */ 18 width: 100px; 19 height: 100px; 20 background-color: white; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="display"></div> 26 <script type="application/javascript"> 27 "use strict"; 28 29 SimpleTest.waitForExplicitFinish(); 30 31 runOMTATest(function() { 32 runAllAsyncAnimTests().then(SimpleTest.finish); 33 }, SimpleTest.finish, SpecialPowers); 34 35 addAsyncAnimTest(async function() { 36 var [ div, cs ] = new_div("animation: anim 10s 2 linear alternate"); 37 38 // Animation is initially running on compositor 39 await waitForPaintsFlushed(); 40 advance_clock(1000); 41 omta_is(div, "transform", { tx: 10 }, RunningOn.Compositor, 42 "Animation is initally animating on compositor"); 43 44 // pause() means it is no longer on the compositor 45 var animation = div.getAnimations()[0]; 46 animation.pause(); 47 // pause() should set up the changes to animations for the next layer 48 // transaction but it won't schedule a paint immediately so we need to tick 49 // the refresh driver before we can wait on the next paint. 50 advance_clock(0); 51 await waitForPaints(); 52 omta_is(div, "transform", { tx: 10 }, RunningOn.MainThread, 53 "After pausing, animation is removed from compositor"); 54 55 // Animation remains paused 56 advance_clock(1000); 57 omta_is(div, "transform", { tx: 10 }, RunningOn.MainThread, 58 "Animation remains paused"); 59 60 // play() puts the animation back on the compositor 61 animation.play(); 62 // As with pause(), play() will set up pending animations for the next layer 63 // transaction but won't schedule a paint so we need to tick the refresh 64 // driver before waiting on the next paint. 65 advance_clock(0); 66 await waitForPaints(); 67 omta_is(div, "transform", { tx: 10 }, RunningOn.Compositor, 68 "After playing, animation is sent to compositor"); 69 70 // Where it continues to run 71 advance_clock(1000); 72 omta_is(div, "transform", { tx: 20 }, RunningOn.Compositor, 73 "Animation continues playing on compositor"); 74 75 done_div(); 76 }); 77 </script> 78 </body> 79 </html>