tor-browser

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

test_animations_effect_timing_enddelay.html (4526B)

      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>