| <!doctype html> |
| <meta charset=utf-8> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <script src="../resources/testcommon.js"></script> |
| <body> |
| <div id="log"></div> |
| <script> |
| 'use strict'; |
| |
| test(function(t) { |
| assert_equals(document.getAnimations().length, 0, |
| 'getAnimations returns an empty sequence for a document' |
| + ' with no animations'); |
| }, 'getAnimations for non-animated content'); |
| |
| test(function(t) { |
| var div = addDiv(t); |
| |
| // Add a couple of transitions |
| div.style.left = '0px'; |
| div.style.top = '0px'; |
| getComputedStyle(div).transitionProperty; |
| |
| div.style.transition = 'all 100s'; |
| div.style.left = '100px'; |
| div.style.top = '100px'; |
| assert_equals(document.getAnimations().length, 2, |
| 'getAnimations returns two running CSS Transitions'); |
| |
| // Remove both |
| div.style.transitionProperty = 'none'; |
| assert_equals(document.getAnimations().length, 0, |
| 'getAnimations returns no running CSS Transitions'); |
| }, 'getAnimations for CSS Transitions'); |
| |
| test(function(t) { |
| addStyle(t, { '.init::after': 'content: ""; width: 0px; ' + |
| 'transition: all 100s;', |
| '.init::before': 'content: ""; height: 0px; ' + |
| 'transition: all 10s;', |
| '.change::after': 'width: 100px;', |
| '.change::before': 'height: 100px;' }); |
| // create two divs with these arrangement: |
| // parent |
| // ::before, |
| // ::after |
| // | |
| // child |
| var parent = addDiv(t); |
| var child = addDiv(t); |
| parent.appendChild(child); |
| |
| parent.style.left = '0px'; |
| parent.style.transition = 'left 10s'; |
| parent.classList.add('init'); |
| child.style.left = '0px'; |
| child.style.transition = 'left 10s'; |
| flushComputedStyle(parent); |
| |
| parent.style.left = '100px'; |
| parent.classList.add('change'); |
| child.style.left = '100px'; |
| |
| var anims = document.getAnimations(); |
| assert_equals(anims.length, 4, |
| 'CSS transition on both pseudo-elements and elements ' + |
| 'are returned'); |
| assert_equals(anims[0].effect.target, parent, |
| 'The animation targeting the parent element comes first'); |
| assert_equals(anims[1].transitionProperty, 'height', |
| 'The animation targeting the ::before element comes second'); |
| assert_equals(anims[2].transitionProperty, 'width', |
| 'The animation targeting the ::after element comes third'); |
| assert_equals(anims[3].effect.target, child, |
| 'The animation targeting the child element comes last'); |
| }, 'CSS Transitions targetting (pseudo-)elements should have correct order ' + |
| 'after sorting'); |
| |
| async_test(function(t) { |
| var div = addDiv(t, { style: 'left: 0px; transition: all 50ms' }); |
| flushComputedStyle(div); |
| |
| div.style.left = '100px'; |
| var animations = div.getAnimations(); |
| assert_equals(animations.length, 1, 'Got transition'); |
| animations[0].finished.then(t.step_func(function() { |
| assert_equals(document.getAnimations().length, 0, |
| 'No animations returned'); |
| t.done(); |
| })); |
| }, 'Transitions are not returned after they have finished'); |
| |
| </script> |
| </body> |
