tor-browser

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

CSSAnimation-finished.tentative.html (2956B)

      1 <!doctype html>
      2 <meta charset=utf-8>
      3 <title>CSSAnimation.finished</title>
      4 <!-- TODO: Add a more specific link for this once it is specified. -->
      5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <script src="support/testcommon.js"></script>
      9 <style>
     10 @keyframes abc {
     11  to { transform: translate(10px) }
     12 }
     13 @keyframes def {}
     14 </style>
     15 <div id="log"></div>
     16 <script>
     17 'use strict';
     18 
     19 const ANIM_PROP_VAL = 'abc 100s';
     20 const ANIM_DURATION = 100 * MS_PER_SEC;
     21 
     22 promise_test(async t => {
     23  const div = addDiv(t);
     24 
     25  // Set up pending animation
     26  div.style.animation = ANIM_PROP_VAL;
     27  const animation = div.getAnimations()[0];
     28  const originalFinishedPromise = animation.finished;
     29 
     30  // Cancel the animation and flush styles
     31  div.style.animation = '';
     32  getComputedStyle(div).animation;
     33 
     34  await promise_rejects_dom(t, 'AbortError', originalFinishedPromise,
     35                        'finished promise is rejected with AbortError');
     36 
     37  assert_not_equals(animation.finished, originalFinishedPromise,
     38                    'Finished promise should change after the original is ' +
     39                    'rejected');
     40 }, 'finished promise is rejected when an animation is canceled by resetting ' +
     41   'the animation property');
     42 
     43 promise_test(async t => {
     44  const div = addDiv(t);
     45  // As before, but this time instead of removing all animations, simply update
     46  // the list of animations. At least for Firefox, updating is a different
     47  // code path.
     48 
     49  // Set up pending animation
     50  div.style.animation = ANIM_PROP_VAL;
     51  const animation = div.getAnimations()[0];
     52  const originalFinishedPromise = animation.finished;
     53 
     54  // Update the animation and flush styles
     55  div.style.animation = 'def 100s';
     56  getComputedStyle(div).animation;
     57 
     58  await promise_rejects_dom(t, 'AbortError', originalFinishedPromise,
     59                        'finished promise is rejected with AbortError');
     60 
     61  assert_not_equals(animation.finished, originalFinishedPromise,
     62                    'Finished promise should change after the original is ' +
     63                    'rejected');
     64 }, 'finished promise is rejected when an animation is canceled by changing ' +
     65   'the animation property');
     66 
     67 promise_test(async t => {
     68  const div = addDiv(t);
     69  div.style.animation = ANIM_PROP_VAL;
     70  const animation = div.getAnimations()[0];
     71  const originalFinishedPromise = animation.finished;
     72  animation.currentTime = ANIM_DURATION;
     73 
     74  await animation.finished;
     75 
     76  div.style.animationPlayState = 'running';
     77  await waitForAnimationFrames(2);
     78 
     79  assert_equals(animation.finished, originalFinishedPromise,
     80                'The finished promise should NOT be reset');
     81  assert_equals(animation.currentTime, ANIM_DURATION,
     82                'Sanity check: the current time should not change');
     83 }, 'finished promise is not reset when animationPlayState is set to running');
     84 
     85 </script>