tor-browser

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

worklet-animation-with-fill-mode.https.html (4378B)

      1 <!DOCTYPE html>
      2 <title>Test that worklet animation works with different fill modes</title>
      3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="/web-animations/testcommon.js"></script>
      7 <script src="common.js"></script>
      8 
      9 <style>
     10 .target {
     11  width: 100px;
     12  height: 100px;
     13  background-color: green;
     14 }
     15 </style>
     16 
     17 <div id="target" class='target'></div>
     18 
     19 <script>
     20 setup(setupAndRegisterTests, {explicit_done: true});
     21 
     22 function setupAndRegisterTests() {
     23  registerConstantLocalTimeAnimator(2000).then(() => {
     24    promise_test(
     25        effect_with_fill_mode_forwards,
     26        "Effect with fill mode forwards in after phase produces output that is equivalent to effect's end value.");
     27 
     28    promise_test(
     29        effect_without_fill_mode_forwards,
     30        'Effect without fill mode forwards in after phase (local time beyond end) should deactivate the animation.');
     31 
     32    promise_test(
     33        effect_without_fill_forwards_at_end,
     34        'Effect without fill mode in after phase (local time at end) should deactivate the animation.');
     35 
     36    promise_test(
     37        effect_with_fill_backwards,
     38        "Effect with fill mode backwards in before phase produces output that is equivalent to effect's start value.");
     39 
     40    promise_test(
     41        effect_without_fill_backwards,
     42        'Effect without fill mode backwards in before phase (local time before start) should deactivate the animation.');
     43 
     44    promise_test(
     45        effect_without_fill_backwards_at_start,
     46        'Effect with local time at start point is in active phase.');
     47 
     48    done();
     49  });
     50 }
     51 
     52 async function effect_with_fill_mode_forwards(t) {
     53  const effect_with_fill_forwards = new KeyframeEffect(
     54      target,
     55      { opacity: [0.5, 0] },
     56      { duration: 1000, fill: 'forwards' });
     57  const animation = new WorkletAnimation(
     58      'constant_time',
     59      effect_with_fill_forwards);
     60  animation.play();
     61  await waitForNotNullLocalTime(animation);
     62 
     63  assert_equals(getComputedStyle(target).opacity, '0');
     64 
     65  animation.cancel();
     66 }
     67 
     68 async function effect_without_fill_mode_forwards(t) {
     69  const effect_without_fill_forwards = new KeyframeEffect(
     70      target,
     71      { opacity: [0.5, 0] },
     72      { duration: 1000 });
     73  const animation = new WorkletAnimation(
     74      'constant_time',
     75      effect_without_fill_forwards);
     76  animation.play();
     77  await waitForNotNullLocalTime(animation);
     78 
     79  assert_equals(getComputedStyle(target).opacity, '1');
     80 
     81  animation.cancel();
     82 }
     83 
     84 async function effect_without_fill_forwards_at_end(t) {
     85  const effect_without_fill_forwards_at_end = new KeyframeEffect(
     86      target,
     87      { opacity: [0.5, 0] },
     88      { duration: 2000 });
     89  const animation = new WorkletAnimation(
     90      'constant_time',
     91      effect_without_fill_forwards_at_end);
     92  animation.play();
     93  await waitForNotNullLocalTime(animation);
     94 
     95  assert_equals(getComputedStyle(target).opacity, '1');
     96 
     97  animation.cancel();
     98 }
     99 
    100 async function effect_with_fill_backwards(t) {
    101  const effect_with_fill_backwards = new KeyframeEffect(
    102      target,
    103      { opacity: [0.5, 0] },
    104      { duration: 1000, delay: 2001, fill: 'backwards' });
    105  const animation = new WorkletAnimation(
    106      'constant_time',
    107      effect_with_fill_backwards);
    108  animation.play();
    109  await waitForNotNullLocalTime(animation);
    110 
    111  assert_equals(getComputedStyle(target).opacity, '0.5');
    112 
    113  animation.cancel();
    114 }
    115 
    116 async function effect_without_fill_backwards(t) {
    117  const effect_without_fill_backwards = new KeyframeEffect(
    118      target,
    119      { opacity: [0.5, 0] },
    120      { duration: 1000, delay: 2001 });
    121  const animation = new WorkletAnimation(
    122      'constant_time',
    123      effect_without_fill_backwards);
    124  animation.play();
    125  waitForNotNullLocalTime(animation);
    126 
    127  assert_equals(getComputedStyle(target).opacity, '1');
    128 
    129  animation.cancel();
    130 }
    131 
    132 async function effect_without_fill_backwards_at_start(t) {
    133  const effect_without_fill_backwards_at_start = new KeyframeEffect(
    134      target,
    135      { opacity: [0.5, 0] },
    136      { duration: 1000, delay: 2000 });
    137  const animation = new WorkletAnimation(
    138      'constant_time',
    139      effect_without_fill_backwards_at_start);
    140  animation.play();
    141  await waitForNotNullLocalTime(animation);
    142 
    143  assert_equals(getComputedStyle(target).opacity, '0.5');
    144 
    145  animation.cancel();
    146 }
    147 </script>