test_animations_reverse.html (1979B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>Test for Animation.reverse() on compositor animations</title> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <script src="/tests/SimpleTest/paint_listener.js"></script> 8 <script type="application/javascript" src="animation_utils.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> 10 <style type="text/css"> 11 @keyframes anim { 12 0% { transform: translate(0px) } 13 100% { transform: translate(100px) } 14 } 15 .target { 16 /* The animation target needs geometry in order to qualify for OMTA */ 17 width: 100px; 18 height: 100px; 19 background-color: white; 20 } 21 </style> 22 </head> 23 <body> 24 <div id="display"></div> 25 <script type="application/javascript"> 26 "use strict"; 27 28 SimpleTest.waitForExplicitFinish(); 29 30 runOMTATest(function() { 31 runAllAsyncAnimTests().then(SimpleTest.finish); 32 }, SimpleTest.finish, SpecialPowers); 33 34 addAsyncAnimTest(async function() { 35 var [ div, cs ] = new_div("animation: anim 10s linear"); 36 const animation = div.getAnimations()[0]; 37 38 // Animation is initially running on compositor 39 await waitForPaintsFlushed(); 40 advance_clock(5000); 41 omta_is(div, 'transform', { tx: 50 }, RunningOn.Compositor, 42 'Animation is initally animating on compositor'); 43 44 // Reverse animation 45 animation.reverse(); 46 47 // At this point the playbackRate has changed but the transform will 48 // not have changed. 49 await waitForPaints(); 50 omta_is(div, 'transform', { tx: 50 }, RunningOn.Compositor, 51 'Animation value does not change after being reversed'); 52 53 // However, we should still have sent a layer transaction to update the 54 // playbackRate on the compositor so that on the next tick we advance 55 // in the right direction. 56 advance_clock(1000); 57 omta_is(div, 'transform', { tx: 40 }, RunningOn.Compositor, 58 'Animation proceeds in reverse direction'); 59 60 done_div(); 61 }); 62 </script> 63 </body> 64 </html>