layout/style/test/test_animations_iterationstart.html

   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>