layout/style/test/test_animations_effect_timing_enddelay.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>
   5     Test for animation.effect.updateTiming({ endDelay }) 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     .target {
  14       /* The animation target needs geometry in order to qualify for OMTA */
  15       width: 100px;
  16       height: 100px;
  17       background-color: white;
  18     }
  19   </style>
  20 </head>
  21 <body>
  22 <div id="display"></div>
  23 <script type="application/javascript">
  24 "use strict";
  25
  26 SimpleTest.waitForExplicitFinish();
  27
  28 runOMTATest(function() {
  29   runAllAsyncAnimTests().then(SimpleTest.finish);
  30 }, SimpleTest.finish, SpecialPowers);
  31
  32 addAsyncAnimTest(async function() {
  33   var [ div ] = new_div("");
  34   var animation = div.animate(
  35     [ { transform: 'translate(0px)' }, { transform: 'translate(100px)' } ],
  36     { duration: 1000, fill: 'none' });
  37   await waitForPaints();
  38
  39   advance_clock(100);
  40   omta_is(div, "transform", { tx: 10 }, RunningOn.Compositor,
  41           "Animation is running on compositor");
  42   animation.effect.updateTiming({ endDelay: 1000 });
  43
  44   await waitForPaints();
  45   omta_is(div, "transform", { tx: 10 }, RunningOn.Compositor,
  46           "Animation remains on compositor when endDelay is changed");
  47
  48   advance_clock(1000);
  49   await waitForPaints();
  50   omta_is(div, "transform", { tx: 0 }, RunningOn.MainThread,
  51           "Animation is updated on main thread");
  52
  53   done_div();
  54 });
  55
  56 addAsyncAnimTest(async function() {
  57   var [ div ] = new_div("");
  58   var animation = div.animate(
  59     [ { transform: 'translate(0px)' }, { transform: 'translate(100px)' } ],
  60     { duration: 1000, endDelay: -500, fill: 'none' });
  61   await waitForPaints();
  62
  63   advance_clock(400);
  64   await waitForPaints();
  65   omta_is(div, "transform", { tx: 40 }, RunningOn.Compositor,
  66           "Animation is updated on compositor " +
  67           "duration 1000, endDelay -500, fill none, current time 400");
  68
  69   advance_clock(100);
  70   await waitForPaints();
  71   omta_is(div, "transform", { tx: 0 }, RunningOn.MainThread,
  72           "Animation is updated on main thread " +
  73           "duration 1000, endDelay -500, fill none, current time 500");
  74
  75   advance_clock(400);
  76   await waitForPaints();
  77   omta_is(div, "transform", { tx: 0 }, RunningOn.MainThread,
  78           "Animation is updated on main thread " +
  79           "duration 1000, endDelay -500, fill none, current time 900");
  80
  81   advance_clock(100);
  82   await waitForPaints();
  83   omta_is(div, "transform", { tx: 0 }, RunningOn.MainThread,
  84           "Animation is updated on main thread " +
  85           "duration 1000, endDelay -500, fill none, current time 1000");
  86
  87   done_div();
  88 });
  89
  90 addAsyncAnimTest(async function() {
  91   var [ div ] = new_div("");
  92   var animation = div.animate(
  93     [ { transform: 'translate(0px)' }, { transform: 'translate(100px)' } ],
  94     { duration: 1000, endDelay: 1000, fill: 'forwards' });
  95   await waitForPaints();
  96
  97   advance_clock(1500);
  98   await waitForPaints();
  99   omta_is(div, "transform", { tx: 100 }, RunningOn.Compositor,
 100           "The end delay is performed on the compositor thread");
 101
 102   done_div();
 103 });
 104
 105 addAsyncAnimTest(async function() {
 106   var [ div ] = new_div("");
 107   var animation = div.animate(
 108     [ { transform: 'translate(0px)' }, { transform: 'translate(100px)' } ],
 109     { duration: 1000, endDelay: -500, fill: 'forwards' });
 110   await waitForPaints();
 111
 112   advance_clock(400);
 113   await waitForPaints();
 114   omta_is(div, "transform", { tx: 40 }, RunningOn.Compositor,
 115           "Animation is updated on compositor " +
 116           "duration 1000, endDelay -500, fill forwards, current time 400");
 117
 118   advance_clock(100);
 119   await waitForPaints();
 120   omta_is(div, "transform", { tx: 50 }, RunningOn.MainThread,
 121           "Animation is updated on main thread " +
 122           "duration 1000, endDelay -500, fill forwards, current time 500");
 123
 124   advance_clock(400);
 125   await waitForPaints();
 126   omta_is(div, "transform", { tx: 50 }, RunningOn.MainThread,
 127           "Animation is updated on main thread " +
 128           "duration 1000, endDelay -500, fill forwards, current time 900");
 129
 130   advance_clock(100);
 131   await waitForPaints();
 132   omta_is(div, "transform", { tx: 50 }, RunningOn.MainThread,
 133           "Animation is updated on main thread " +
 134           "duration 1000, endDelay -500, fill forwards, current time 1000");
 135
 136   done_div();
 137 });
 138
 139 </script>
 140 </body>
 141 </html>