layout/style/test/test_animations_effect_timing_duration.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>
   5     Test for animation.effect.updateTiming({ duration }) on compositor
   6     animations
   7   </title>
   8   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   9   <script src="/tests/SimpleTest/paint_listener.js"></script>
  10   <script type="application/javascript" src="animation_utils.js"></script>
  11   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
  12   <style type="text/css">
  13     @keyframes anim {
  14       0% { transform: translate(0px) }
  15       100% { transform: translate(100px) }
  16     }
  17     .target {
  18       /* The animation target needs geometry in order to qualify for OMTA */
  19       width: 100px;
  20       height: 100px;
  21       background-color: white;
  22     }
  23   </style>
  24 </head>
  25 <body>
  26 <div id="display"></div>
  27 <script type="application/javascript">
  28 "use strict";
  29
  30 SimpleTest.waitForExplicitFinish();
  31
  32 runOMTATest(function() {
  33   runAllAsyncAnimTests().then(SimpleTest.finish);
  34 }, SimpleTest.finish, SpecialPowers);
  35
  36 addAsyncAnimTest(async function() {
  37   var [ div ] = new_div("");
  38   var animation = div.animate(
  39     [ { transform: 'translate(0px)', easing: "steps(2, start)" },
  40       { transform: 'translate(100px)' } ], 4000);
  41   await waitForPaints();
  42
  43   advance_clock(500);
  44   omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor,
  45           "Animation is running on compositor");
  46   animation.effect.updateTiming({ duration: 2000 });
  47   // Setter of timing option should set up the changes to animations for the
  48   // next layer transaction but it won't schedule a paint immediately so we need
  49   // to tick the refresh driver before we can wait on the next paint.
  50   advance_clock(0);
  51
  52   await waitForPaints();
  53   omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor,
  54           "Animation remains on compositor");
  55
  56   advance_clock(1000);
  57   omta_is(div, "transform", { tx: 100 }, RunningOn.Compositor,
  58           "Animation is updated on compositor");
  59
  60   done_div();
  61 });
  62
  63 addAsyncAnimTest(async function() {
  64   var [ div ] = new_div("");
  65   var animation = div.animate(
  66     [ { transform: 'translate(0px)', easing: "steps(2, end)" },
  67       { transform: 'translate(100px)' } ], 4000);
  68   await waitForPaints();
  69
  70   advance_clock(1000);
  71   animation.effect.updateTiming({ duration: 2000 });
  72   advance_clock(0);
  73   await waitForPaints();
  74   omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor,
  75           "Animation is running on compositor");
  76   done_div();
  77 })
  78
  79 </script>
  80 </body>
  81 </html>