test_animations_iterationstart.html (1492B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 5 Test for Animation.effect.timing.iterationStart 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 .target { 13 /* The animation target needs geometry in order to qualify for OMTA */ 14 width: 100px; 15 height: 100px; 16 background-color: white; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="display"></div> 22 <script type="application/javascript"> 23 "use strict"; 24 25 SimpleTest.waitForExplicitFinish(); 26 27 runOMTATest(function() { 28 runAllAsyncAnimTests().then(SimpleTest.finish); 29 }, SimpleTest.finish, SpecialPowers); 30 31 addAsyncAnimTest(async function() { 32 var [ div ] = new_div("test"); 33 var animation = div.animate( 34 { transform: ["translate(0px)", "translate(100px)"] }, 35 { iterationStart: 0.5, duration: 10000, fill: "both"} 36 ); 37 await waitForPaints(); 38 omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor, "Start of Animation"); 39 40 advance_clock(4000); 41 await waitForPaints(); 42 omta_is(div, "transform", { tx: 90 }, RunningOn.Compositor, "40% of Animation"); 43 44 advance_clock(6000); 45 await waitForPaints(); 46 omta_is(div, "transform", { tx: 50 }, RunningOn.MainThread, "End of Animation"); 47 48 done_div(); 49 }); 50 51 </script> 52 </body> 53 </html>