tor-browser

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

cancel.html (4547B)

      1 <!DOCTYPE html>
      2 <meta charset=utf-8>
      3 <title>Animation.cancel</title>
      4 <link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-cancel">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="../../testcommon.js"></script>
      8 <body>
      9 <div id="log"></div>
     10 <script>
     11 'use strict';
     12 
     13 promise_test(t => {
     14  const div = createDiv(t);
     15  const animation = div.animate(
     16    { transform: ['translate(100px)', 'translate(100px)'] },
     17    100 * MS_PER_SEC
     18  );
     19  return animation.ready.then(() => {
     20    assert_not_equals(getComputedStyle(div).transform, 'none',
     21                      'transform style is animated before cancelling');
     22    animation.cancel();
     23    assert_equals(getComputedStyle(div).transform, 'none',
     24                  'transform style is no longer animated after cancelling');
     25  });
     26 }, 'Animated style is cleared after calling Animation.cancel()');
     27 
     28 test(t => {
     29  const div = createDiv(t);
     30  const animation = div.animate({ marginLeft: ['100px', '200px'] },
     31                                100 * MS_PER_SEC);
     32  animation.effect.updateTiming({ easing: 'linear' });
     33  animation.cancel();
     34  assert_equals(getComputedStyle(div).marginLeft, '0px',
     35                'margin-left style is not animated after cancelling');
     36 
     37  animation.currentTime = 50 * MS_PER_SEC;
     38  assert_equals(getComputedStyle(div).marginLeft, '150px',
     39                'margin-left style is updated when cancelled animation is'
     40                + ' seeked');
     41 }, 'After cancelling an animation, it can still be seeked');
     42 
     43 promise_test(t => {
     44  const div = createDiv(t);
     45  const animation = div.animate({ marginLeft:['100px', '200px'] },
     46                                100 * MS_PER_SEC);
     47  return animation.ready.then(() => {
     48    animation.cancel();
     49    assert_equals(getComputedStyle(div).marginLeft, '0px',
     50                  'margin-left style is not animated after cancelling');
     51    animation.play();
     52    assert_equals(getComputedStyle(div).marginLeft, '100px',
     53                  'margin-left style is animated after re-starting animation');
     54    return animation.ready;
     55  }).then(() => {
     56    assert_equals(animation.playState, 'running',
     57                  'Animation succeeds in running after being re-started');
     58  });
     59 }, 'After cancelling an animation, it can still be re-used');
     60 
     61 promise_test(async t => {
     62  for (const type of ["resolve", "reject"]) {
     63    const anim = new Animation();
     64 
     65    let isThenGet = false;
     66    let isThenCalled = false;
     67    let resolveFinished;
     68    let rejectFinished;
     69    const thenCalledPromise = new Promise(resolveThenCalledPromise => {
     70      // Make `anim` thenable.
     71      Object.defineProperty(anim, "then", {
     72        get() {
     73          isThenGet = true;
     74          return function(resolve, reject) {
     75            isThenCalled = true;
     76            resolveThenCalledPromise(true);
     77            resolveFinished = resolve;
     78            rejectFinished = reject;
     79          };
     80        },
     81      });
     82    });
     83 
     84    // Lazily create finished promise.
     85    const finishedPromise = anim.finished;
     86 
     87    assert_false(isThenGet, "then property shouldn't be accessed yet");
     88 
     89    // Resolve finished promise with `anim`, that gets `then`, and
     90    // calls in the thenable job.
     91    anim.finish();
     92 
     93    assert_true(isThenGet, "then property should be accessed");
     94    assert_false(isThenCalled, "then property shouldn't be called yet");
     95 
     96    // Reject finished promise.
     97    // This should be ignored.
     98    anim.cancel();
     99 
    100    // Wait for the thenable job.
    101    await thenCalledPromise;
    102 
    103    assert_true(isThenCalled, "then property should be called");
    104 
    105    const dummyPromise = new Promise(resolve => {
    106      step_timeout(() => {
    107        resolve("dummy");
    108      }, 100);
    109    });
    110    const dummy = await Promise.race([finishedPromise, dummyPromise]);
    111    assert_equals(dummy, "dummy", "finishedPromise shouldn't be settled yet");
    112 
    113    if (type === "resolve") {
    114      resolveFinished("hello");
    115      const finished = await finishedPromise;
    116      assert_equals(finished, "hello",
    117                    "finishedPromise should be resolved with given value");
    118    } else {
    119      rejectFinished("hello");
    120      try {
    121        await finishedPromise;
    122        assert_unreached("finishedPromise should be rejected")
    123      } catch (e) {
    124        assert_equals(e, "hello",
    125                      "finishedPromise should be rejected with given value");
    126      }
    127    }
    128  }
    129 }, "Animation.finished promise should not be rejected by cancel method once "
    130 + "it is resolved with inside finish method");
    131 
    132 </script>
    133 </body>