tor-browser

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

constructor.html (4118B)

      1 <!DOCTYPE html>
      2 <meta charset=utf-8>
      3 <title>Animation constructor</title>
      4 <link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-animation">
      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 <div id="target"></div>
     11 <script>
     12 'use strict';
     13 
     14 const gTarget = document.getElementById('target');
     15 
     16 function createEffect() {
     17  return new KeyframeEffect(gTarget, { opacity: [0, 1] });
     18 }
     19 
     20 function createNull() {
     21  return null;
     22 }
     23 
     24 const gTestArguments = [
     25  {
     26    createEffect: createNull,
     27    timeline: null,
     28    expectedTimeline: null,
     29    expectedTimelineDescription: 'null',
     30    description: 'with null effect and null timeline'
     31  },
     32  {
     33    createEffect: createNull,
     34    timeline: document.timeline,
     35    expectedTimeline: document.timeline,
     36    expectedTimelineDescription: 'document.timeline',
     37    description: 'with null effect and non-null timeline'
     38  },
     39  {
     40    createEffect: createNull,
     41    expectedTimeline: document.timeline,
     42    expectedTimelineDescription: 'document.timeline',
     43    description: 'with null effect and no timeline parameter'
     44  },
     45  {
     46    createEffect: createEffect,
     47    timeline: null,
     48    expectedTimeline: null,
     49    expectedTimelineDescription: 'null',
     50    description: 'with non-null effect and null timeline'
     51  },
     52  {
     53    createEffect: createEffect,
     54    timeline: document.timeline,
     55    expectedTimeline: document.timeline,
     56    expectedTimelineDescription: 'document.timeline',
     57    description: 'with non-null effect and non-null timeline'
     58  },
     59  {
     60    createEffect: createEffect,
     61    expectedTimeline: document.timeline,
     62    expectedTimelineDescription: 'document.timeline',
     63    description: 'with non-null effect and no timeline parameter'
     64  },
     65 ];
     66 
     67 for (const args of gTestArguments) {
     68  test(t => {
     69    const effect = args.createEffect();
     70    const animation = new Animation(effect, args.timeline);
     71 
     72    assert_not_equals(animation, null,
     73                      'An animation sohuld be created');
     74    assert_equals(animation.effect, effect,
     75                  'Animation returns the same effect passed to ' +
     76                  'the constructor');
     77    assert_equals(animation.timeline, args.expectedTimeline,
     78                  'Animation timeline should be ' + args.expectedTimelineDescription);
     79    assert_equals(animation.playState, 'idle',
     80                  'Animation.playState should be initially \'idle\'');
     81  }, 'Animation can be constructed ' + args.description);
     82 }
     83 
     84 test(t => {
     85  const effect = new KeyframeEffect(null,
     86                                    { left: ['10px', '20px'] },
     87                                    { duration: 10000, fill: 'forwards' });
     88  const anim = new Animation(effect, document.timeline);
     89  anim.pause();
     90  assert_equals(effect.getComputedTiming().progress, 0.0);
     91  anim.currentTime += 5000;
     92  assert_equals(effect.getComputedTiming().progress, 0.5);
     93  anim.finish();
     94  assert_equals(effect.getComputedTiming().progress, 1.0);
     95 }, 'Animation constructed by an effect with null target runs normally');
     96 
     97 async_test(t => {
     98  const iframe = document.createElement('iframe');
     99 
    100  iframe.addEventListener('load', t.step_func(() => {
    101    const div = createDiv(t, iframe.contentDocument);
    102    const effect = new KeyframeEffect(div, null, 10000);
    103    const anim = new Animation(effect);
    104    assert_equals(anim.timeline, document.timeline);
    105    iframe.remove();
    106    t.done();
    107  }));
    108 
    109  document.body.appendChild(iframe);
    110 }, 'Animation constructed with a keyframe that target element is in iframe');
    111 
    112 test(t => {
    113    const div = createDiv(t);
    114    const effect = new KeyframeEffect(div, { opacity: [0, 1]}, 10000);
    115    const anim1 = new Animation(effect);
    116    anim1.play();
    117    const anim2 = new Animation(effect);
    118    anim2.play();
    119    assert_equals(anim1.effect, null, 'Effect is reset on first animation');
    120    assert_equals(anim1.playState, 'finished',
    121                'Resetting the affect does not cancel the animation');
    122 }, 'Animation created with an affect associated with another animation.');
    123 </script>
    124 </body>