LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/Element-getAnimations.tentative.html

   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>