<!DOCTYPE html> <html> <head> <title> Test for Animation.effect.timing.iterationStart on compositor animations </title> <script src="/tests/SimpleTest/SimpleTest.js"></script> <script src="/tests/SimpleTest/paint_listener.js"></script> <script type="application/javascript" src="animation_utils.js"></script> <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> <style type="text/css"> .target { /* The animation target needs geometry in order to qualify for OMTA */ width: 100px; height: 100px; background-color: white; } </style> </head> <body> <div id="display"></div> <script type="application/javascript"> "use strict"; SimpleTest.waitForExplicitFinish(); runOMTATest(function() { runAllAsyncAnimTests().then(SimpleTest.finish); }, SimpleTest.finish, SpecialPowers); addAsyncAnimTest(async function() { var [ div ] = new_div("test"); var animation = div.animate( { transform: ["translate(0px)", "translate(100px)"] }, { iterationStart: 0.5, duration: 10000, fill: "both"} ); await waitForPaints(); omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor, "Start of Animation"); advance_clock(4000); await waitForPaints(); omta_is(div, "transform", { tx: 90 }, RunningOn.Compositor, "40% of Animation"); advance_clock(6000); await waitForPaints(); omta_is(div, "transform", { tx: 50 }, RunningOn.MainThread, "End of Animation"); done_div(); }); </script> </body> </html>