tor-browser

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

Element-getAnimations.tentative.html (4145B)

      1 <!doctype html>
      2 <meta charset=utf-8>
      3 <title>Element.getAnimations() for CSS transitions</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#animation-composite-order">
      5 <!-- TODO: Add a more specific link for this once it is specified. -->
      6 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 <script src="support/helper.js"></script>
     10 <div id="log"></div>
     11 <script>
     12 'use strict';
     13 
     14 promise_test(async t => {
     15  const div = addDiv(t);
     16 
     17  div.style.left = '0px';
     18  div.style.top = '0px';
     19  getComputedStyle(div).transitionProperty;
     20 
     21  div.style.transition = 'all 100s';
     22  div.style.left = '100px';
     23  div.style.top = '100px';
     24 
     25  assert_equals(div.getAnimations().length, 2);
     26 }, 'getAnimations returns one Animation per transitioning property');
     27 
     28 test(t => {
     29  const div = addDiv(t, { style: 'left: 0px; transition: all 100s' });
     30 
     31  getComputedStyle(div).left;
     32  div.style.left = '100px';
     33 
     34  assert_class_string(div.getAnimations()[0], 'CSSTransition',
     35                      'Interface of returned animation is CSSTransition');
     36 }, 'getAnimations returns CSSTransition objects for CSS Transitions');
     37 
     38 promise_test(async t => {
     39  const div = addDiv(t);
     40 
     41  div.style.left = '0px';
     42  getComputedStyle(div).left;
     43  div.style.transition = 'all 0.01s';
     44  div.style.left = '100px';
     45  const animation = div.getAnimations()[0];
     46 
     47  await animation.finished;
     48 
     49  assert_equals(div.getAnimations().length, 0);
     50 }, 'getAnimations does not return finished CSS Transitions');
     51 
     52 test(t => {
     53  const div = addDiv(t);
     54 
     55  // animation-duration is not animatable
     56  div.style.animationDuration = '10s';
     57  getComputedStyle(div).animationDuration;
     58 
     59  div.style.transition = 'all 100s';
     60  div.style.animationDuration = '100s';
     61 
     62  assert_equals(div.getAnimations().length, 0);
     63 }, 'getAnimations does not return a transition for a non-animatable property');
     64 
     65 test(t => {
     66  const div = addDiv(t);
     67 
     68  div.style.setProperty('-vendor-unsupported', '0px', '');
     69  getComputedStyle(div).transitionProperty;
     70  div.style.transition = 'all 100s';
     71  div.style.setProperty('-vendor-unsupported', '100px', '');
     72 
     73  assert_equals(div.getAnimations().length, 0);
     74 }, 'getAnimations does not return a transition for an unsupposed property');
     75 
     76 test(t => {
     77  const div = addDiv(t, { style: 'transform: translate(0px); ' +
     78                                 'opacity: 0; ' +
     79                                 'border-width: 0px; ' + // Shorthand
     80                                 'border-style: solid' });
     81  getComputedStyle(div).transform;
     82 
     83  div.style.transition = 'all 100s';
     84  div.style.transform = 'translate(100px)';
     85  div.style.opacity = '1';
     86  div.style.borderWidth = '1px';
     87 
     88  const animations = div.getAnimations();
     89  assert_equals(animations.length, 6,
     90                'Generated expected number of transitions');
     91  assert_equals(animations[0].transitionProperty, 'border-bottom-width');
     92  assert_equals(animations[1].transitionProperty, 'border-left-width');
     93  assert_equals(animations[2].transitionProperty, 'border-right-width');
     94  assert_equals(animations[3].transitionProperty, 'border-top-width');
     95  assert_equals(animations[4].transitionProperty, 'opacity');
     96  assert_equals(animations[5].transitionProperty, 'transform');
     97 }, 'getAnimations sorts simultaneous transitions by name');
     98 
     99 test(t => {
    100  const div = addDiv(t, { style: 'transform: translate(0px); ' +
    101                                 'opacity: 0' });
    102  getComputedStyle(div).transform;
    103 
    104  div.style.transition = 'all 100s';
    105  div.style.transform = 'translate(100px)';
    106  assert_equals(div.getAnimations().length, 1,
    107                'Initially there is only one (transform) transition');
    108  div.style.opacity = '1';
    109  assert_equals(div.getAnimations().length, 2,
    110                'Then a second (opacity) transition is added');
    111 
    112  const animations = div.getAnimations();
    113  assert_equals(animations[0].transitionProperty, 'transform');
    114  assert_equals(animations[1].transitionProperty, 'opacity');
    115 }, 'getAnimations sorts transitions by when they were generated');
    116 
    117 </script>