tor-browser

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

worklet-animation-local-time-null-2.https.html (2857B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <title>Setting localTime to null means effect does not apply (reftest)</title>
      4 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
      5 <link rel="match" href="worklet-animation-local-time-null-2-ref.html">
      6 <meta name="timeout" content="long">
      7 
      8 <script src="/common/reftest-wait.js"></script>
      9 <script src="/web-animations/testcommon.js"></script>
     10 <script src="common.js"></script>
     11 
     12 <style>
     13 .box {
     14  width: 100px;
     15  height: 100px;
     16  background-color: green;
     17  display: inline-block;
     18 }
     19 </style>
     20 
     21 <div>
     22 <div class="box" id="target1"></div>
     23 <div class="box" id="target2"></div>
     24 <div class="box" id="target3"></div>
     25 <div class="box" id="target4"></div>
     26 <div class="box" id="control"></div>
     27 </div>
     28 
     29 
     30 <script>
     31 runInAnimationWorklet(`
     32  registerAnimator("blank_animator", class {
     33    animate(currentTime, effect) {
     34      // Unset effect.localTime is equivalent to 'null'
     35    }
     36  });
     37 
     38  registerAnimator("null_animator", class {
     39    animate(currentTime, effect) {
     40      effect.localTime = null;
     41    }
     42  });
     43 
     44  registerAnimator("drop_animator", class {
     45    animate(currentTime, effect) {
     46      if (currentTime < 500)
     47        effect.localTime = 500;
     48      else if (currentTime < 1000)
     49        effect.localTime = 0;
     50      else
     51        effect.localTime = null;
     52    }
     53  });
     54 
     55  registerAnimator("add_animator", class {
     56    animate(currentTime, effect) {
     57      if (currentTime < 1000)
     58        effect.localTime = 500;
     59      else
     60        effect.localTime = 0;
     61    }
     62  });
     63 `).then(() => {
     64 
     65  const start_animation = (animator, targetId, keyframes) => {
     66    const animation = new WorkletAnimation(animator,
     67      new KeyframeEffect(
     68        document.getElementById(targetId),
     69        keyframes,
     70        {duration: 1000}
     71      )
     72    );
     73    animation.play();
     74    return animation;
     75  };
     76 
     77  start_animation('blank_animator','target1', [
     78    { transform: 'translateY(100px)' },
     79    { transform: 'translateY(200px)' }
     80  ]);
     81 
     82  start_animation('null_animator','target2', [
     83    { transform: 'translateY(100px)' },
     84    { transform: 'translateY(200px)' }
     85  ]);
     86 
     87  start_animation('drop_animator','target3', [
     88    { transform: 'translateY(100px)' },
     89    { transform: 'translateY(200px)' }
     90  ]);
     91 
     92  start_animation('drop_animator','target4', [
     93    { backgroundColor: 'red' },
     94    { backgroundColor: 'blue' }
     95  ]);
     96 
     97  // check that animation worklets are running to stop accidental pass
     98  const control_anim = start_animation('add_animator','control', [
     99    { backgroundColor: 'red', transform: 'translateY(100px)' },
    100    { backgroundColor: 'blue', transform: 'translateY(200px)' }
    101  ]);
    102 
    103  waitForAnimationFrameWithCondition(() => control_anim.currentTime > 1000)
    104    // long timeout due to laggy compositor thread on debug build.
    105    .then(() => waitForAsyncAnimationFrames(120))
    106    .then(takeScreenshot);
    107 });
    108 
    109 
    110 </script>