chromium/src/third_party/blink/web_tests/external/wpt/css/css-animations/Document-getAnimations.tentative.html - manifest_repos/chromium_src - Git at Google

 <!doctype html>
 <meta charset=utf-8>
 <title>Document.getAnimations() for CSS animations</title>
 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-composite-order">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="support/testcommon.js"></script>
 <style>
 @keyframes animLeft {
   to { left: 100px }
 }
 @keyframes animTop {
   to { top: 100px }
 }
 @keyframes animBottom {
   to { bottom: 100px }
 }
 @keyframes animRight {
   to { right: 100px }
 }

 @keyframes anim1 {
   to { left: 100px }
 }
 @keyframes anim2 {
   to { top: 100px }
 }
 @keyframes anim3 {
   to { bottom: 100px }
 }
 @keyframes anim4 {
   to { right: 100px }
 }

 </style>
 <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 an animation
   div.style.animation = 'animLeft 100s';
   assert_equals(document.getAnimations().length, 1,
                 'getAnimations returns a running CSS Animation');

   // Add another animation
   div.style.animation = 'animLeft 100s, animTop 100s';
   assert_equals(document.getAnimations().length, 2,
                 'getAnimations returns two running CSS Animations');

   // Remove both
   div.style.animation = '';
   assert_equals(document.getAnimations().length, 0,
                 'getAnimations returns no running CSS Animations');
 }, 'getAnimations for CSS Animations');

 test(t => {
   const div = addDiv(t);
   const animation1 = 'animLeft 100s'
   const animation2 = 'animBottom 100s'
   div.style.animation = animation1;
   const animations1 = document.getAnimations();
   assert_equals(animations1.length, 1,
                 'getAnimations returns all running CSS Animations');
   div.style.animation = animation2 + ', ' + animation1;
   const animations = document.getAnimations();
   assert_equals(animations.length, 2,
                 'getAnimations returns all running CSS Animations');
   assert_equals(animations[0].animationName, 'animBottom',
                 'Order of first animation returned');
   assert_equals(animations[1].animationName, 'animLeft',
                 'Order of second animation returned');
 }, 'Order of CSS Animations - within an element unaffected by start time');

 test(t => {
   const div = addDiv(t);
   div.style.animation = 'animLeft 100s, animTop 100s, animRight 100s, ' +
                         'animBottom 100s';

   const animations = document.getAnimations();
   assert_equals(animations.length, 4,
                 'getAnimations returns all running CSS Animations');
   assert_equals(animations[0].animationName, 'animLeft',
                 'Order of first animation returned');
   assert_equals(animations[1].animationName, 'animTop',
                 'Order of second animation returned');
   assert_equals(animations[2].animationName, 'animRight',
                 'Order of third animation returned');
   assert_equals(animations[3].animationName, 'animBottom',
                 'Order of fourth animation returned');
 }, 'Order of CSS Animations - within an element');

 test(t => {
   const div1 = addDiv(t, { style: 'animation: animLeft 100s' });
   const div2 = addDiv(t, { style: 'animation: animLeft 100s' });
   const div3 = addDiv(t, { style: 'animation: animLeft 100s' });
   const div4 = addDiv(t, { style: 'animation: animLeft 100s' });

   let animations = document.getAnimations();
   assert_equals(animations.length, 4,
                 'getAnimations returns all running CSS Animations');
   assert_equals(animations[0].effect.target, div1,
                 'Order of first animation returned');
   assert_equals(animations[1].effect.target, div2,
                 'Order of second animation returned');
   assert_equals(animations[2].effect.target, div3,
                 'Order of third animation returned');
   assert_equals(animations[3].effect.target, div4,
                 'Order of fourth animation returned');

   // Order should be depth-first pre-order so add some depth as follows:
   //
   //      <parent>
   //       /  |
   //      2   3
   //    /  \
   //   1   4
   //
   // Which should give: 2, 1, 4, 3
   div2.appendChild(div1);
   div2.appendChild(div4);
   animations = document.getAnimations();
   assert_equals(animations[0].effect.target, div2,
                 'Order of first animation returned after tree surgery');
   assert_equals(animations[1].effect.target, div1,
                 'Order of second animation returned after tree surgery');
   assert_equals(animations[2].effect.target, div4,
                 'Order of third animation returned after tree surgery');
   assert_equals(animations[3].effect.target, div3,
                 'Order of fourth animation returned after tree surgery');

 }, 'Order of CSS Animations - across elements');

 test(t => {
   const div1 = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
   const div2 = addDiv(t, { style: 'animation: animBottom 100s' });

   let expectedResults = [ [ div1, 'animLeft' ],
                             [ div1, 'animTop' ],
                             [ div2, 'animBottom' ] ];
   let animations = document.getAnimations();
   assert_equals(animations.length, expectedResults.length,
                 'getAnimations returns all running CSS Animations');
   animations.forEach((anim, i) => {
     assert_equals(anim.effect.target, expectedResults[i][0],
                   'Target of animation in position ' + i);
     assert_equals(anim.animationName, expectedResults[i][1],
                   'Name of animation in position ' + i);
   });

   // Modify tree structure and animation list
   div2.appendChild(div1);
   div1.style.animation = 'animLeft 100s, animRight 100s, animTop 100s';

   expectedResults = [ [ div2, 'animBottom' ],
                       [ div1, 'animLeft' ],
                       [ div1, 'animRight' ],
                       [ div1, 'animTop' ] ];
   animations = document.getAnimations();
   assert_equals(animations.length, expectedResults.length,
                 'getAnimations returns all running CSS Animations after ' +
                 'making changes');
   animations.forEach((anim, i) => {
     assert_equals(anim.effect.target, expectedResults[i][0],
                   'Target of animation in position ' + i + ' after changes');
     assert_equals(anim.animationName, expectedResults[i][1],
                   'Name of animation in position ' + i + ' after changes');
   });
 }, 'Order of CSS Animations - across and within elements');

 test(t => {
   const div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
   const animLeft = document.getAnimations()[0];
   assert_equals(animLeft.animationName, 'animLeft',
                 'Originally, animLeft animation comes first');

   // Disassociate animLeft from markup and restart
   div.style.animation = 'animTop 100s';
   animLeft.play();

   const animations = document.getAnimations();
   assert_equals(animations.length, 2,
                 'getAnimations returns markup-bound and free animations');
   assert_equals(animations[0].animationName, 'animTop',
                 'Markup-bound animations come first');
   assert_equals(animations[1], animLeft, 'Free animations come last');
 }, 'Order of CSS Animations - markup-bound vs free animations');

 test(t => {
   // Add an animation first
   const div = addDiv(t, { style: 'animation: animLeft 100s' });
   const animLeft = document.getAnimations()[0];
   // Disassociate animLeft from markup and restart
   div.style.animation = '';
   animLeft.play();

   div.style.top = '0px';
   div.style.transition = 'all 100s';
   flushComputedStyle(div);
   // *Then* add a transition
   div.style.top = '100px';
   flushComputedStyle(div);

   // Although the transition was added later, it should come first in the list
   const animations = document.getAnimations();
   assert_equals(animations.length, 2,
                 'Both CSS animations and transitions are returned');
   assert_class_string(animations[0], 'CSSTransition', 'Transition comes first');
   assert_equals(animations[1], animLeft, 'Free animations come last');
 }, 'Order of CSS Animations - free animation vs CSS Transitions');

 test(t => {
   const div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
   const animLeft = document.getAnimations()[0];
   const animTop  = document.getAnimations()[1];

   // Disassociate both animations from markup and restart in opposite order
   div.style.animation = '';
   animTop.play();
   animLeft.play();

   const animations = document.getAnimations();
   assert_equals(animations.length, 2,
                 'getAnimations returns free animations');
   assert_equals(animations[0], animTop,
                 'Free animations are returned in the order they are started');
   assert_equals(animations[1], animLeft,
                 'Animations started later are returned later');

   // Restarting an animation should have no effect
   animTop.cancel();
   animTop.play();
   assert_equals(document.getAnimations()[0], animTop,
                 'After restarting, the ordering of free animations' +
                 ' does not change');
 }, 'Order of CSS Animations - free animations');

 test(t => {
   // Add an animation first
   const div = addDiv(t, { style: 'animation: animLeft 100s' });
   div.style.top = '0px';
   div.style.transition = 'all 100s';
   flushComputedStyle(div);

   // *Then* add a transition
   div.style.top = '100px';
   flushComputedStyle(div);

   // Although the transition was added later, it should come first in the list
   const animations = document.getAnimations();
   assert_equals(animations.length, 2,
                 'Both CSS animations and transitions are returned');
   assert_class_string(animations[0], 'CSSTransition', 'Transition comes first');
   assert_class_string(animations[1], 'CSSAnimation', 'Animation comes second');
 }, 'Order of CSS Animations and CSS Transitions');

 test(t => {
   const div = addDiv(t, { style: 'animation: animLeft 100s forwards' });
   div.getAnimations()[0].finish();
   assert_equals(document.getAnimations().length, 1,
                 'Forwards-filling CSS animations are returned');
 }, 'Finished but filling CSS Animations are returned');

 test(t => {
   const div = addDiv(t, { style: 'animation: animLeft 100s' });
   div.getAnimations()[0].finish();
   assert_equals(document.getAnimations().length, 0,
                 'Non-filling finished CSS animations are not returned');
 }, 'Finished but not filling CSS Animations are not returned');

 test(t => {
   const div = addDiv(t, { style: 'animation: animLeft 100s 100s' });
   assert_equals(document.getAnimations().length, 1,
                 'Yet-to-start CSS animations are returned');
 }, 'Yet-to-start CSS Animations are returned');

 test(t => {
   const div = addDiv(t, { style: 'animation: animLeft 100s' });
   div.getAnimations()[0].cancel();
   assert_equals(document.getAnimations().length, 0,
                 'CSS animations canceled by the API are not returned');
 }, 'CSS Animations canceled via the API are not returned');

 test(t => {
   const div = addDiv(t, { style: 'animation: animLeft 100s' });
   const anim = div.getAnimations()[0];
   anim.cancel();
   anim.play();
   assert_equals(document.getAnimations().length, 1,
                 'CSS animations canceled and restarted by the API are ' +
                 'returned');
 }, 'CSS Animations canceled and restarted via the API are returned');

 test(t => {
   addStyle(t, {
       '#parent::after': "content: ''; animation: anim1 100s ; ",
       '#parent::before': "content: ''; animation: anim2 100s;",
       '#child::after': "content: ''; animation: anim3 100s;",
       '#child::before': "content: ''; animation: anim4 100s;",
     });
   const parent = addDiv(t, { id: 'parent' });
   const child = addDiv(t, { id: 'child'});
   parent.appendChild(child);
   var animations = document.getAnimations();
   var expectedAnimations = [
       [parent, '::before', 'anim2'],
       [parent, '::after', 'anim1'],
       [child, '::before', 'anim4'],
       [child, '::after', 'anim3'],
     ];
   pseudoAnimCompare(animations, expectedAnimations)

   // Swap animation1 and aimation3's effect
   var anim1 = animations[0];
   var anim3 = animations[2];
   const temp = anim1.effect;
   anim1.effect = anim3.effect;
   anim3.effect = temp;

   animations = document.getAnimations();
   expectedAnimations = [
       [child, '::before', 'anim2'],
       [parent, '::after', 'anim1'],
       [parent, '::before', 'anim4'],
       [child, '::after', 'anim3'],
     ];
   pseudoAnimCompare(animations, expectedAnimations)
 }, 'pseudo element with replaced target does not affect animation ordering');

 function pseudoAnimCompare(animations, expectedAnimations) {
   assert_equals(
       animations.length,
       expectedAnimations.length,
       'CSS animations on both pseudo-elements and elements are returned'
     );
   for (const [index, expected] of expectedAnimations.entries()) {
       const [element, pseudo, name] = expected;
       const actual = animations[index];
       if (pseudo) {
         assert_equals(
           actual.effect.target,
           element,
           `Animation #${index + 1} has the expected target`
         );
         assert_equals(
           actual.effect.pseudoElement,
           pseudo,
           `Animation #${index + 1} has the expected pseudo type`
         );
         if (name) {
           assert_equals(
             actual.animationName,
             name,
             `Animation #${index + 1} has the expected name`
           );
         }
       } else {
         assert_equals(
           actual.effect.target,
           element,
           `Animation #${index + 1} has the expected target`
         );
         assert_equals(
           actual.effect.pseudoElement,
           null,
           `Animation #${index + 1} has a null pseudo type`
         );
       }
     }
 }

 function pseudoTest(description, testMarkerPseudos) {
   test(t => {
     // Create two divs with the following arrangement:
     //
     //       parent
     //    (::marker,)  // Optionally
     //     ::before,
     //     ::after
     //        |
     //       child

     addStyle(t, {
       '#parent::after': "content: ''; animation: animLeft 100s;",
       '#parent::before': "content: ''; animation: animRight 100s;",
     });

     if (testMarkerPseudos) {
       addStyle(t, {
         '#parent': 'display: list-item;',
         '#parent::marker': "content: ''; animation: animLeft 100s;",
       });
     }

     const parent = addDiv(t, { id: 'parent' });
     const child = addDiv(t);
     parent.appendChild(child);
     for (const div of [parent, child]) {
       div.setAttribute('style', 'animation: animBottom 100s');
     }

     const expectedAnimations = [
       [parent, undefined],
       [parent, '::marker'],
       [parent, '::before'],
       [parent, '::after'],
       [child, undefined],
     ];
     if (!testMarkerPseudos) {
       expectedAnimations.splice(1, 1);
     }

     const animations = document.getAnimations();
     pseudoAnimCompare(animations, expectedAnimations)
   }, description);
 }

 pseudoTest('CSS Animations targetting (pseudo-)elements should have correct '
      + 'order after sorting', false);
 pseudoTest('CSS Animations targetting (pseudo-)elements should have correct '
      + 'order after sorting (::marker)', true);
 </script>
	<!doctype html>
	<meta charset=utf-8>
	<title>Document.getAnimations() for CSS animations</title>
	<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-composite-order">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script src="support/testcommon.js"></script>
	<style>
	@keyframes animLeft {
	to { left: 100px }
	}
	@keyframes animTop {
	to { top: 100px }
	}
	@keyframes animBottom {
	to { bottom: 100px }
	}
	@keyframes animRight {
	to { right: 100px }
	}

	@keyframes anim1 {
	to { left: 100px }
	}
	@keyframes anim2 {
	to { top: 100px }
	}
	@keyframes anim3 {
	to { bottom: 100px }
	}
	@keyframes anim4 {
	to { right: 100px }
	}

	</style>
	<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 an animation
	div.style.animation = 'animLeft 100s';
	assert_equals(document.getAnimations().length, 1,
	'getAnimations returns a running CSS Animation');

	// Add another animation
	div.style.animation = 'animLeft 100s, animTop 100s';
	assert_equals(document.getAnimations().length, 2,
	'getAnimations returns two running CSS Animations');

	// Remove both
	div.style.animation = '';
	assert_equals(document.getAnimations().length, 0,
	'getAnimations returns no running CSS Animations');
	}, 'getAnimations for CSS Animations');

	test(t => {
	const div = addDiv(t);
	const animation1 = 'animLeft 100s'
	const animation2 = 'animBottom 100s'
	div.style.animation = animation1;
	const animations1 = document.getAnimations();
	assert_equals(animations1.length, 1,
	'getAnimations returns all running CSS Animations');
	div.style.animation = animation2 + ', ' + animation1;
	const animations = document.getAnimations();
	assert_equals(animations.length, 2,
	'getAnimations returns all running CSS Animations');
	assert_equals(animations[0].animationName, 'animBottom',
	'Order of first animation returned');
	assert_equals(animations[1].animationName, 'animLeft',
	'Order of second animation returned');
	}, 'Order of CSS Animations - within an element unaffected by start time');

	test(t => {
	const div = addDiv(t);
	div.style.animation = 'animLeft 100s, animTop 100s, animRight 100s, ' +
	'animBottom 100s';

	const animations = document.getAnimations();
	assert_equals(animations.length, 4,
	'getAnimations returns all running CSS Animations');
	assert_equals(animations[0].animationName, 'animLeft',
	'Order of first animation returned');
	assert_equals(animations[1].animationName, 'animTop',
	'Order of second animation returned');
	assert_equals(animations[2].animationName, 'animRight',
	'Order of third animation returned');
	assert_equals(animations[3].animationName, 'animBottom',
	'Order of fourth animation returned');
	}, 'Order of CSS Animations - within an element');

	test(t => {
	const div1 = addDiv(t, { style: 'animation: animLeft 100s' });
	const div2 = addDiv(t, { style: 'animation: animLeft 100s' });
	const div3 = addDiv(t, { style: 'animation: animLeft 100s' });
	const div4 = addDiv(t, { style: 'animation: animLeft 100s' });

	let animations = document.getAnimations();
	assert_equals(animations.length, 4,
	'getAnimations returns all running CSS Animations');
	assert_equals(animations[0].effect.target, div1,
	'Order of first animation returned');
	assert_equals(animations[1].effect.target, div2,
	'Order of second animation returned');
	assert_equals(animations[2].effect.target, div3,
	'Order of third animation returned');
	assert_equals(animations[3].effect.target, div4,
	'Order of fourth animation returned');

	// Order should be depth-first pre-order so add some depth as follows:
	//
	// <parent>
	// / \|
	// 2 3
	// / \
	// 1 4
	//
	// Which should give: 2, 1, 4, 3
	div2.appendChild(div1);
	div2.appendChild(div4);
	animations = document.getAnimations();
	assert_equals(animations[0].effect.target, div2,
	'Order of first animation returned after tree surgery');
	assert_equals(animations[1].effect.target, div1,
	'Order of second animation returned after tree surgery');
	assert_equals(animations[2].effect.target, div4,
	'Order of third animation returned after tree surgery');
	assert_equals(animations[3].effect.target, div3,
	'Order of fourth animation returned after tree surgery');

	}, 'Order of CSS Animations - across elements');

	test(t => {
	const div1 = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
	const div2 = addDiv(t, { style: 'animation: animBottom 100s' });

	let expectedResults = [ [ div1, 'animLeft' ],
	[ div1, 'animTop' ],
	[ div2, 'animBottom' ] ];
	let animations = document.getAnimations();
	assert_equals(animations.length, expectedResults.length,
	'getAnimations returns all running CSS Animations');
	animations.forEach((anim, i) => {
	assert_equals(anim.effect.target, expectedResults[i][0],
	'Target of animation in position ' + i);
	assert_equals(anim.animationName, expectedResults[i][1],
	'Name of animation in position ' + i);
	});

	// Modify tree structure and animation list
	div2.appendChild(div1);
	div1.style.animation = 'animLeft 100s, animRight 100s, animTop 100s';

	expectedResults = [ [ div2, 'animBottom' ],
	[ div1, 'animLeft' ],
	[ div1, 'animRight' ],
	[ div1, 'animTop' ] ];
	animations = document.getAnimations();
	assert_equals(animations.length, expectedResults.length,
	'getAnimations returns all running CSS Animations after ' +
	'making changes');
	animations.forEach((anim, i) => {
	assert_equals(anim.effect.target, expectedResults[i][0],
	'Target of animation in position ' + i + ' after changes');
	assert_equals(anim.animationName, expectedResults[i][1],
	'Name of animation in position ' + i + ' after changes');
	});
	}, 'Order of CSS Animations - across and within elements');

	test(t => {
	const div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
	const animLeft = document.getAnimations()[0];
	assert_equals(animLeft.animationName, 'animLeft',
	'Originally, animLeft animation comes first');

	// Disassociate animLeft from markup and restart
	div.style.animation = 'animTop 100s';
	animLeft.play();

	const animations = document.getAnimations();
	assert_equals(animations.length, 2,
	'getAnimations returns markup-bound and free animations');
	assert_equals(animations[0].animationName, 'animTop',
	'Markup-bound animations come first');
	assert_equals(animations[1], animLeft, 'Free animations come last');
	}, 'Order of CSS Animations - markup-bound vs free animations');

	test(t => {
	// Add an animation first
	const div = addDiv(t, { style: 'animation: animLeft 100s' });
	const animLeft = document.getAnimations()[0];
	// Disassociate animLeft from markup and restart
	div.style.animation = '';
	animLeft.play();

	div.style.top = '0px';
	div.style.transition = 'all 100s';
	flushComputedStyle(div);
	// Then add a transition
	div.style.top = '100px';
	flushComputedStyle(div);

	// Although the transition was added later, it should come first in the list
	const animations = document.getAnimations();
	assert_equals(animations.length, 2,
	'Both CSS animations and transitions are returned');
	assert_class_string(animations[0], 'CSSTransition', 'Transition comes first');
	assert_equals(animations[1], animLeft, 'Free animations come last');
	}, 'Order of CSS Animations - free animation vs CSS Transitions');

	test(t => {
	const div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
	const animLeft = document.getAnimations()[0];
	const animTop = document.getAnimations()[1];

	// Disassociate both animations from markup and restart in opposite order
	div.style.animation = '';
	animTop.play();
	animLeft.play();

	const animations = document.getAnimations();
	assert_equals(animations.length, 2,
	'getAnimations returns free animations');
	assert_equals(animations[0], animTop,
	'Free animations are returned in the order they are started');
	assert_equals(animations[1], animLeft,
	'Animations started later are returned later');

	// Restarting an animation should have no effect
	animTop.cancel();
	animTop.play();
	assert_equals(document.getAnimations()[0], animTop,
	'After restarting, the ordering of free animations' +
	' does not change');
	}, 'Order of CSS Animations - free animations');

	test(t => {
	// Add an animation first
	const div = addDiv(t, { style: 'animation: animLeft 100s' });
	div.style.top = '0px';
	div.style.transition = 'all 100s';
	flushComputedStyle(div);

	// Then add a transition
	div.style.top = '100px';
	flushComputedStyle(div);

	// Although the transition was added later, it should come first in the list
	const animations = document.getAnimations();
	assert_equals(animations.length, 2,
	'Both CSS animations and transitions are returned');
	assert_class_string(animations[0], 'CSSTransition', 'Transition comes first');
	assert_class_string(animations[1], 'CSSAnimation', 'Animation comes second');
	}, 'Order of CSS Animations and CSS Transitions');

	test(t => {
	const div = addDiv(t, { style: 'animation: animLeft 100s forwards' });
	div.getAnimations()[0].finish();
	assert_equals(document.getAnimations().length, 1,
	'Forwards-filling CSS animations are returned');
	}, 'Finished but filling CSS Animations are returned');

	test(t => {
	const div = addDiv(t, { style: 'animation: animLeft 100s' });
	div.getAnimations()[0].finish();
	assert_equals(document.getAnimations().length, 0,
	'Non-filling finished CSS animations are not returned');
	}, 'Finished but not filling CSS Animations are not returned');

	test(t => {
	const div = addDiv(t, { style: 'animation: animLeft 100s 100s' });
	assert_equals(document.getAnimations().length, 1,
	'Yet-to-start CSS animations are returned');
	}, 'Yet-to-start CSS Animations are returned');

	test(t => {
	const div = addDiv(t, { style: 'animation: animLeft 100s' });
	div.getAnimations()[0].cancel();
	assert_equals(document.getAnimations().length, 0,
	'CSS animations canceled by the API are not returned');
	}, 'CSS Animations canceled via the API are not returned');

	test(t => {
	const div = addDiv(t, { style: 'animation: animLeft 100s' });
	const anim = div.getAnimations()[0];
	anim.cancel();
	anim.play();
	assert_equals(document.getAnimations().length, 1,
	'CSS animations canceled and restarted by the API are ' +
	'returned');
	}, 'CSS Animations canceled and restarted via the API are returned');

	test(t => {
	addStyle(t, {
	'#parent::after': "content: ''; animation: anim1 100s ; ",
	'#parent::before': "content: ''; animation: anim2 100s;",
	'#child::after': "content: ''; animation: anim3 100s;",
	'#child::before': "content: ''; animation: anim4 100s;",
	});
	const parent = addDiv(t, { id: 'parent' });
	const child = addDiv(t, { id: 'child'});
	parent.appendChild(child);
	var animations = document.getAnimations();
	var expectedAnimations = [
	[parent, '::before', 'anim2'],
	[parent, '::after', 'anim1'],
	[child, '::before', 'anim4'],
	[child, '::after', 'anim3'],
	];
	pseudoAnimCompare(animations, expectedAnimations)

	// Swap animation1 and aimation3's effect
	var anim1 = animations[0];
	var anim3 = animations[2];
	const temp = anim1.effect;
	anim1.effect = anim3.effect;
	anim3.effect = temp;

	animations = document.getAnimations();
	expectedAnimations = [
	[child, '::before', 'anim2'],
	[parent, '::after', 'anim1'],
	[parent, '::before', 'anim4'],
	[child, '::after', 'anim3'],
	];
	pseudoAnimCompare(animations, expectedAnimations)
	}, 'pseudo element with replaced target does not affect animation ordering');

	function pseudoAnimCompare(animations, expectedAnimations) {
	assert_equals(
	animations.length,
	expectedAnimations.length,
	'CSS animations on both pseudo-elements and elements are returned'
	);
	for (const [index, expected] of expectedAnimations.entries()) {
	const [element, pseudo, name] = expected;
	const actual = animations[index];
	if (pseudo) {
	assert_equals(
	actual.effect.target,
	element,
	`Animation #${index + 1} has the expected target`
	);
	assert_equals(
	actual.effect.pseudoElement,
	pseudo,
	`Animation #${index + 1} has the expected pseudo type`
	);
	if (name) {
	assert_equals(
	actual.animationName,
	name,
	`Animation #${index + 1} has the expected name`
	);
	}
	} else {
	assert_equals(
	actual.effect.target,
	element,
	`Animation #${index + 1} has the expected target`
	);
	assert_equals(
	actual.effect.pseudoElement,
	null,
	`Animation #${index + 1} has a null pseudo type`
	);
	}
	}
	}

	function pseudoTest(description, testMarkerPseudos) {
	test(t => {
	// Create two divs with the following arrangement:
	//
	// parent
	// (::marker,) // Optionally
	// ::before,
	// ::after
	// \|
	// child

	addStyle(t, {
	'#parent::after': "content: ''; animation: animLeft 100s;",
	'#parent::before': "content: ''; animation: animRight 100s;",
	});

	if (testMarkerPseudos) {
	addStyle(t, {
	'#parent': 'display: list-item;',
	'#parent::marker': "content: ''; animation: animLeft 100s;",
	});
	}

	const parent = addDiv(t, { id: 'parent' });
	const child = addDiv(t);
	parent.appendChild(child);
	for (const div of [parent, child]) {
	div.setAttribute('style', 'animation: animBottom 100s');
	}

	const expectedAnimations = [
	[parent, undefined],
	[parent, '::marker'],
	[parent, '::before'],
	[parent, '::after'],
	[child, undefined],
	];
	if (!testMarkerPseudos) {
	expectedAnimations.splice(1, 1);
	}

	const animations = document.getAnimations();
	pseudoAnimCompare(animations, expectedAnimations)
	}, description);
	}

	pseudoTest('CSS Animations targetting (pseudo-)elements should have correct '
	+ 'order after sorting', false);
	pseudoTest('CSS Animations targetting (pseudo-)elements should have correct '
	+ 'order after sorting (::marker)', true);
	</script>