| <!doctype html> |
| <meta charset=utf-8> |
| <title>Document.getAnimations() for CSS transitions</title> |
| <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#animation-composite-order"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="support/helper.js"></script> |
| <div id="log"></div> |
| <script> |
| 'use strict'; |
| |
| test(t => { |
| assert_equals(document.getAnimations().length, 0, |
| 'getAnimations returns an empty sequence for a document' |
| + ' with no animations'); |
| }, 'getAnimations for non-animated content'); |
| |
| test(t => { |
| const 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(t => { |
| addStyle(t, { '.init::after': 'content: ""; width: 0px; ' + |
| 'transition: all 100s;', |
| '.init::before': 'content: ""; width: 0px; ' + |
| 'transition: all 10s;', |
| '.change::after': 'width: 100px;', |
| '.change::before': 'width: 100px;' }); |
| // create two divs with these arrangement: |
| // parent |
| // ::before, |
| // ::after |
| // | |
| // child |
| const parent = addDiv(t); |
| const 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'; |
| getComputedStyle(parent).left; |
| |
| parent.style.left = '100px'; |
| parent.classList.add('change'); |
| child.style.left = '100px'; |
| |
| const 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].effect.target.type, '::before', |
| 'The animation targeting the ::before element comes second'); |
| assert_equals(anims[2].effect.target.type, '::after', |
| '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'); |
| |
| promise_test(async t => { |
| const div = addDiv(t, { style: 'left: 0px; transition: all 50ms' }); |
| getComputedStyle(div).left; |
| |
| div.style.left = '100px'; |
| const animations = div.getAnimations(); |
| assert_equals(animations.length, 1, 'Got transition'); |
| await animations[0].finished; |
| |
| assert_equals(document.getAnimations().length, 0, |
| 'No animations returned'); |
| }, 'Transitions are not returned after they have finished'); |
| |
| </script> |
