tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

test_animations_playbackrate.html (2755B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4  <title>Test for Animation.playbackRate on compositor animations</title>
      5  <script src="/tests/SimpleTest/SimpleTest.js"></script>
      6  <script src="/tests/SimpleTest/paint_listener.js"></script>
      7  <script type="application/javascript" src="animation_utils.js"></script>
      8  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
      9  <style type="text/css">
     10    @keyframes anim {
     11      0% { transform: translate(0px) }
     12      100% { transform: translate(100px) }
     13    }
     14    .target {
     15      /* The animation target needs geometry in order to qualify for OMTA */
     16      width: 100px;
     17      height: 100px;
     18      background-color: white;
     19    }
     20  </style>
     21 </head>
     22 <body>
     23 <div id="display"></div>
     24 <script type="application/javascript">
     25 "use strict";
     26 
     27 SimpleTest.waitForExplicitFinish();
     28 
     29 runOMTATest(function() {
     30  runAllAsyncAnimTests().then(SimpleTest.finish);
     31 }, SimpleTest.finish, SpecialPowers);
     32 
     33 addAsyncAnimTest(async function() {
     34  var [ div, cs ] = new_div("animation: anim 10s 1 linear forwards");
     35  var animation = div.getAnimations()[0];
     36  animation.playbackRate = 10;
     37 
     38  advance_clock(300);
     39 
     40  await waitForPaints();
     41  omta_is(div, "transform", { tx: 30 }, RunningOn.Compositor,
     42          "at 300ms");
     43  done_div();
     44 });
     45 
     46 addAsyncAnimTest(async function() {
     47  var [ div, cs ] = new_div("animation: anim 10s 1 linear forwards");
     48  var animation = div.getAnimations()[0];
     49  advance_clock(300);
     50  await waitForPaints();
     51 
     52  animation.playbackRate = 0;
     53 
     54  await waitForPaintsFlushed();
     55 
     56  omta_is(div, "transform", { tx: 3 }, RunningOn.MainThread,
     57          "animation with zero playback rate should stay in the " +
     58          "same position and be running on the main thread");
     59 
     60  done_div();
     61 });
     62 
     63 addAsyncAnimTest(async function() {
     64  var [ div, cs ] = new_div("animation: anim 10s 1s");
     65  var animation = div.getAnimations()[0];
     66  animation.playbackRate = 0.5;
     67 
     68  advance_clock(2000); // 1s * (1 / playbackRate)
     69 
     70  await waitForPaints();
     71  omta_is(div, "transform", { tx: 0 }, RunningOn.Compositor,
     72          "animation with positive delay and playbackRate > 1 should " +
     73          "start from the initial position at the beginning of the " +
     74          "active duration");
     75  done_div();
     76 });
     77 
     78 addAsyncAnimTest(async function() {
     79  var [ div, cs ] = new_div("animation: anim 10s 1s");
     80  var animation = div.getAnimations()[0];
     81  animation.playbackRate = 2.0;
     82 
     83  advance_clock(500); // 1s * (1 / playbackRate)
     84 
     85  await waitForPaints();
     86  omta_is(div, "transform", { tx: 0 }, RunningOn.Compositor,
     87          "animation with positive delay and playbackRate < 1 should " +
     88          "start from the initial position at the beginning of the " +
     89          "active duration");
     90  done_div();
     91 });
     92 </script>
     93 </body>
     94 </html>