tor-browser

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

worklet-animation-local-time-null-1.https.html (4810B)

      1 <!DOCTYPE html>
      2 <title>Setting localTime to null means effect does not apply</title>
      3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
      4 
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="/web-animations/testcommon.js"></script>
      8 <script src="common.js"></script>
      9 
     10 <style>
     11 .box {
     12  width: 100px;
     13  height: 100px;
     14  background-color: green;
     15  display: inline-block;
     16 }
     17 </style>
     18 
     19 <div>
     20 <div class="box" id="target1"></div>
     21 <div class="box" id="target2"></div>
     22 <div class="box" id="target3"></div>
     23 <div class="box" id="target4"></div>
     24 </div>
     25 
     26 
     27 <script>
     28 promise_test(async t => {
     29  await runInAnimationWorklet(`
     30    registerAnimator("blank_animator", class {
     31      animate(currentTime, effect) {
     32        // Unset effect.localTime is equivalent to 'null'
     33      }
     34    });
     35  `);
     36  const target = document.getElementById('target1');
     37 
     38  const animation = new WorkletAnimation('blank_animator',
     39    new KeyframeEffect(target,
     40      [
     41        { transform: 'translateY(100px)' },
     42        { transform: 'translateY(200px)' }
     43      ], {
     44        duration: 1000,
     45      }
     46    )
     47  );
     48  animation.play();
     49  await waitForAsyncAnimationFrames(1);
     50  assert_equals(getComputedStyle(target).transform, "none");
     51 }, "A worklet which never sets localTime has no effect.");
     52 
     53 promise_test(async t => {
     54  await runInAnimationWorklet(`
     55    registerAnimator("null_animator", class {
     56      animate(currentTime, effect) {
     57        effect.localTime = null;
     58      }
     59    });
     60  `);
     61  const target = document.getElementById('target2');
     62 
     63  const animation = new WorkletAnimation('null_animator',
     64    new KeyframeEffect(target,
     65      [
     66        { transform: 'translateY(100px)' },
     67        { transform: 'translateY(200px)' }
     68      ], {
     69        duration: 1000,
     70      }
     71    )
     72  );
     73  animation.play();
     74  await waitForAsyncAnimationFrames(1);
     75  assert_equals(getComputedStyle(target).transform, "none");
     76 }, "A worklet which sets localTime to null has no effect.");
     77 
     78 promise_test(async t => {
     79  await runInAnimationWorklet(`
     80    registerAnimator("drop_animator", class {
     81      animate(currentTime, effect) {
     82        if (currentTime < 500)
     83          effect.localTime = 500;
     84        else if (currentTime < 1000)
     85          effect.localTime = 0;
     86        else
     87          effect.localTime = null;
     88      }
     89    });
     90  `);
     91  const target = document.getElementById('target3');
     92 
     93  const animation = new WorkletAnimation('drop_animator',
     94    new KeyframeEffect(target,
     95      [
     96        { transform: 'translateY(100px)' },
     97        { transform: 'translateY(200px)' }
     98      ], {
     99        duration: 1000,
    100      }
    101    )
    102  );
    103  animation.play();
    104  await waitForAsyncAnimationFrames(5);
    105  assert_equals(getComputedStyle(target).transform, "matrix(1, 0, 0, 1, 0, 150)",
    106      "The animation has an effect at first");
    107 
    108  await waitForAnimationFrameWithCondition(() => animation.currentTime > 500);
    109  await waitForAsyncAnimationFrames(1);
    110  assert_equals(getComputedStyle(target).transform, "matrix(1, 0, 0, 1, 0, 100)",
    111      "The effect correctly changes");
    112 
    113  await waitForAnimationFrameWithCondition(() => animation.currentTime > 1000);
    114  await waitForAsyncAnimationFrames(1);
    115  assert_equals(getComputedStyle(target).transform, "none",
    116      "The effect stops on nulling of localTime");
    117 
    118 }, "A worklet which changes localTime to from a number to null has no effect on transform.");
    119 
    120 promise_test(async t => {
    121  await runInAnimationWorklet(`
    122    registerAnimator("drop2_animator", class {
    123      animate(currentTime, effect) {
    124        if (currentTime < 500)
    125          effect.localTime = 500;
    126        else if (currentTime < 1000)
    127          effect.localTime = 0;
    128        else
    129          effect.localTime = null;
    130      }
    131    });
    132  `);
    133  const target = document.getElementById('target4');
    134 
    135  const animation = new WorkletAnimation('drop2_animator',
    136    new KeyframeEffect(target,
    137      [
    138        { backgroundColor: 'red' },
    139        { backgroundColor: 'blue' }
    140      ], {
    141        duration: 1000,
    142      }
    143    )
    144  );
    145  animation.play();
    146  await waitForAsyncAnimationFrames(5);
    147  assert_equals(getComputedStyle(target).backgroundColor, "rgb(128, 0, 128)",
    148      "The animation has an effect at first");
    149 
    150  await waitForAnimationFrameWithCondition(() => animation.currentTime > 500);
    151  await waitForAsyncAnimationFrames(1);
    152  assert_equals(getComputedStyle(target).backgroundColor, "rgb(255, 0, 0)",
    153      "The effect correctly changes");
    154 
    155  await waitForAnimationFrameWithCondition(() => animation.currentTime > 1000);
    156  await waitForAsyncAnimationFrames(1);
    157  assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 128, 0)",
    158      "The effect stops on nulling of localTime");
    159 
    160 }, "A worklet which changes localTime to from a number to null has no effect on backgroundColor.");
    161 
    162 
    163 </script>