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

 <!doctype html>
 <meta charset=utf-8>
 <title>Tests for CSS animation event order</title>
 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#event-dispatch"/>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="support/testcommon.js"></script>
 <style>
 @keyframes anim {
   from { margin-left: 0px; }
   to { margin-left: 100px; }
 }
 @keyframes color-anim {
   from { color: red; }
   to { color: green; }
 }
 </style>
 <div id="log"></div>
 <script type='text/javascript'>
 'use strict';

 /**
  * Asserts that the set of actual and received events match.
  * @param actualEvents   An array of the received AnimationEvent objects.
  * @param expectedEvents A series of array objects representing the expected
  *        events, each having the form:
  *          [ event type, target element, [pseudo type], elapsed time ]
  */
 const checkEvents = (actualEvents, ...expectedEvents) => {
   const actualTypeSummary = actualEvents.map(event => event.type).join(', ');
   const expectedTypeSummary = expectedEvents.map(event => event[0]).join(', ');

   assert_equals(
     actualEvents.length,
     expectedEvents.length,
     `Number of events received (${actualEvents.length}) \
 should match expected number (${expectedEvents.length}) \
 (expected: ${expectedTypeSummary}, actual: ${actualTypeSummary})`
   );

   for (const [index, actualEvent] of actualEvents.entries()) {
     const expectedEvent = expectedEvents[index];
     const [type, target] = expectedEvent;
     const pseudoElement = expectedEvent.length === 4 ? expectedEvent[2] : '';
     const elapsedTime = expectedEvent[expectedEvent.length - 1];

     assert_equals(
       actualEvent.type,
       type,
       `Event #${index + 1} types should match \
 (expected: ${expectedTypeSummary}, actual: ${actualTypeSummary})`
     );
     assert_equals(
       actualEvent.target,
       target,
       `Event #${index + 1} targets should match`
     );
     assert_equals(
       actualEvent.pseudoElement,
       pseudoElement,
       `Event #${index + 1} pseudoElements should match`
     );
     assert_equals(
       actualEvent.elapsedTime,
       elapsedTime,
       `Event #${index + 1} elapsedTimes should match`
     );
   }
 };

 const setupAnimation = (t, animationStyle, receiveEvents) => {
   const div = addDiv(t, { style: 'animation: ' + animationStyle });

   for (const name of ['start', 'iteration', 'end']) {
     div['onanimation' + name] = evt => {
       receiveEvents.push({
         type: evt.type,
         target: evt.target,
         pseudoElement: evt.pseudoElement,
         elapsedTime: evt.elapsedTime,
       });
     };
   }

   const watcher = new EventWatcher(t, div, [
     'animationstart',
     'animationiteration',
     'animationend',
   ]);

   const animation = div.getAnimations()[0];

   return [animation, watcher, div];
 };

 promise_test(async t => {
   let events = [];
   const [animation1, watcher1, div1] =
     setupAnimation(t, 'anim 100s 2 paused', events);
   const [animation2, watcher2, div2] =
     setupAnimation(t, 'anim 100s 2 paused', events);

   await Promise.all([ watcher1.wait_for('animationstart'),
                       watcher2.wait_for('animationstart') ]);

   checkEvents(events, ['animationstart', div1, 0],
                       ['animationstart', div2, 0]);

   events.length = 0;  // Clear received event array

   animation1.currentTime = 100 * MS_PER_SEC;
   animation2.currentTime = 100 * MS_PER_SEC;

   await Promise.all([ watcher1.wait_for('animationiteration'),
                       watcher2.wait_for('animationiteration') ]);

   checkEvents(events, ['animationiteration', div1, 100],
                       ['animationiteration', div2, 100]);

   events.length = 0;  // Clear received event array

   animation1.finish();
   animation2.finish();

   await Promise.all([ watcher1.wait_for('animationend'),
                       watcher2.wait_for('animationend') ]);

   checkEvents(events, ['animationend', div1, 200],
                       ['animationend', div2, 200]);
 }, 'Same events are ordered by elements');

 function pseudoTest(description, testMarkerPseudos) {
   promise_test(async t => {
     // Setup a hierarchy as follows:
     //
     //              parent
     //                |
     //  (::marker, ::before, ::after) // ::marker optional
     //                |
     //              child
     const parentDiv = addDiv(t, { style: 'animation: anim 100s' });

     parentDiv.id = 'parent-div';
     addStyle(t, {
       '#parent-div::after': "content: ''; animation: anim 100s",
       '#parent-div::before': "content: ''; animation: anim 100s",
     });

     if (testMarkerPseudos) {
       parentDiv.style.display = 'list-item';
       addStyle(t, {
         '#parent-div::marker': "content: ''; animation: color-anim 100s",
       });
     }

     const childDiv = addDiv(t, { style: 'animation: anim 100s' });
     parentDiv.append(childDiv);

     // Setup event handlers
     let events = [];
     for (const name of ['start', 'iteration', 'end', 'cancel']) {
       parentDiv['onanimation' + name] = evt => {
         events.push({
           type: evt.type,
           target: evt.target,
           pseudoElement: evt.pseudoElement,
           elapsedTime: evt.elapsedTime,
         });
       };
     }

     // Wait a couple of frames for the events to be dispatched
     await waitForFrame();
     await waitForFrame();

     const expectedEvents = [
       ['animationstart', parentDiv, 0],
       ['animationstart', parentDiv, '::marker', 0],
       ['animationstart', parentDiv, '::before', 0],
       ['animationstart', parentDiv, '::after', 0],
       ['animationstart', childDiv, 0],
     ];
     if (!testMarkerPseudos) {
       expectedEvents.splice(1, 1);
     }

     checkEvents(events, ...expectedEvents);
   }, description);
 }

 pseudoTest('Same events on pseudo-elements follow the prescribed order', false);
 pseudoTest('Same events on pseudo-elements follow the prescribed order ' +
     '(::marker)', true);

 promise_test(async t => {
   let events = [];
   const [animation1, watcher1, div1] =
     setupAnimation(t, 'anim 200s 400s', events);
   const [animation2, watcher2, div2] =
     setupAnimation(t, 'anim 300s 2', events);

   await watcher2.wait_for('animationstart');

   animation1.currentTime = 400 * MS_PER_SEC;
   animation2.currentTime = 400 * MS_PER_SEC;

   events.length = 0;  // Clear received event array

   await Promise.all([ watcher1.wait_for('animationstart'),
                       watcher2.wait_for('animationiteration') ]);

   checkEvents(events, ['animationiteration', div2, 300],
                       ['animationstart',     div1, 0]);
 }, 'Start and iteration events are ordered by time');

 promise_test(async t => {
   let events = [];
   const [animation1, watcher1, div1] =
     setupAnimation(t, 'anim 150s', events);
   const [animation2, watcher2, div2] =
     setupAnimation(t, 'anim 100s 2', events);

   await Promise.all([ watcher1.wait_for('animationstart'),
                       watcher2.wait_for('animationstart') ]);

   animation1.currentTime = 150 * MS_PER_SEC;
   animation2.currentTime = 150 * MS_PER_SEC;

   events.length = 0;  // Clear received event array

   await Promise.all([ watcher1.wait_for('animationend'),
                       watcher2.wait_for('animationiteration') ]);

   checkEvents(events, ['animationiteration', div2, 100],
                       ['animationend',       div1, 150]);
 }, 'Iteration and end events are ordered by time');

 promise_test(async t => {
   let events = [];
   const [animation1, watcher1, div1] =
     setupAnimation(t, 'anim 100s 100s', events);
   const [animation2, watcher2, div2] =
     setupAnimation(t, 'anim 100s 2', events);

   animation1.finish();
   animation2.finish();

   await Promise.all([ watcher1.wait_for([ 'animationstart',
                                           'animationend' ]),
                       watcher2.wait_for([ 'animationstart',
                                           'animationend' ]) ]);

   checkEvents(events, ['animationstart', div2, 0],
                       ['animationstart', div1, 0],
                       ['animationend',   div1, 100],
                       ['animationend',   div2, 200]);
 }, 'Start and end events are sorted correctly when fired simultaneously');

 </script>
	<!doctype html>
	<meta charset=utf-8>
	<title>Tests for CSS animation event order</title>
	<link rel="help" href="https://drafts.csswg.org/css-animations-2/#event-dispatch"/>
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script src="support/testcommon.js"></script>
	<style>
	@keyframes anim {
	from { margin-left: 0px; }
	to { margin-left: 100px; }
	}
	@keyframes color-anim {
	from { color: red; }
	to { color: green; }
	}
	</style>
	<div id="log"></div>
	<script type='text/javascript'>
	'use strict';

	/**
	* Asserts that the set of actual and received events match.
	* @param actualEvents An array of the received AnimationEvent objects.
	* @param expectedEvents A series of array objects representing the expected
	* events, each having the form:
	* [ event type, target element, [pseudo type], elapsed time ]
	*/
	const checkEvents = (actualEvents, ...expectedEvents) => {
	const actualTypeSummary = actualEvents.map(event => event.type).join(', ');
	const expectedTypeSummary = expectedEvents.map(event => event[0]).join(', ');

	assert_equals(
	actualEvents.length,
	expectedEvents.length,
	`Number of events received (${actualEvents.length}) \
	should match expected number (${expectedEvents.length}) \
	(expected: ${expectedTypeSummary}, actual: ${actualTypeSummary})`
	);

	for (const [index, actualEvent] of actualEvents.entries()) {
	const expectedEvent = expectedEvents[index];
	const [type, target] = expectedEvent;
	const pseudoElement = expectedEvent.length === 4 ? expectedEvent[2] : '';
	const elapsedTime = expectedEvent[expectedEvent.length - 1];

	assert_equals(
	actualEvent.type,
	type,
	`Event #${index + 1} types should match \
	(expected: ${expectedTypeSummary}, actual: ${actualTypeSummary})`
	);
	assert_equals(
	actualEvent.target,
	target,
	`Event #${index + 1} targets should match`
	);
	assert_equals(
	actualEvent.pseudoElement,
	pseudoElement,
	`Event #${index + 1} pseudoElements should match`
	);
	assert_equals(
	actualEvent.elapsedTime,
	elapsedTime,
	`Event #${index + 1} elapsedTimes should match`
	);
	}
	};

	const setupAnimation = (t, animationStyle, receiveEvents) => {
	const div = addDiv(t, { style: 'animation: ' + animationStyle });

	for (const name of ['start', 'iteration', 'end']) {
	div['onanimation' + name] = evt => {
	receiveEvents.push({
	type: evt.type,
	target: evt.target,
	pseudoElement: evt.pseudoElement,
	elapsedTime: evt.elapsedTime,
	});
	};
	}

	const watcher = new EventWatcher(t, div, [
	'animationstart',
	'animationiteration',
	'animationend',
	]);

	const animation = div.getAnimations()[0];

	return [animation, watcher, div];
	};

	promise_test(async t => {
	let events = [];
	const [animation1, watcher1, div1] =
	setupAnimation(t, 'anim 100s 2 paused', events);
	const [animation2, watcher2, div2] =
	setupAnimation(t, 'anim 100s 2 paused', events);

	await Promise.all([ watcher1.wait_for('animationstart'),
	watcher2.wait_for('animationstart') ]);

	checkEvents(events, ['animationstart', div1, 0],
	['animationstart', div2, 0]);

	events.length = 0; // Clear received event array

	animation1.currentTime = 100 * MS_PER_SEC;
	animation2.currentTime = 100 * MS_PER_SEC;

	await Promise.all([ watcher1.wait_for('animationiteration'),
	watcher2.wait_for('animationiteration') ]);

	checkEvents(events, ['animationiteration', div1, 100],
	['animationiteration', div2, 100]);

	events.length = 0; // Clear received event array

	animation1.finish();
	animation2.finish();

	await Promise.all([ watcher1.wait_for('animationend'),
	watcher2.wait_for('animationend') ]);

	checkEvents(events, ['animationend', div1, 200],
	['animationend', div2, 200]);
	}, 'Same events are ordered by elements');

	function pseudoTest(description, testMarkerPseudos) {
	promise_test(async t => {
	// Setup a hierarchy as follows:
	//
	// parent
	// \|
	// (::marker, ::before, ::after) // ::marker optional
	// \|
	// child
	const parentDiv = addDiv(t, { style: 'animation: anim 100s' });

	parentDiv.id = 'parent-div';
	addStyle(t, {
	'#parent-div::after': "content: ''; animation: anim 100s",
	'#parent-div::before': "content: ''; animation: anim 100s",
	});

	if (testMarkerPseudos) {
	parentDiv.style.display = 'list-item';
	addStyle(t, {
	'#parent-div::marker': "content: ''; animation: color-anim 100s",
	});
	}

	const childDiv = addDiv(t, { style: 'animation: anim 100s' });
	parentDiv.append(childDiv);

	// Setup event handlers
	let events = [];
	for (const name of ['start', 'iteration', 'end', 'cancel']) {
	parentDiv['onanimation' + name] = evt => {
	events.push({
	type: evt.type,
	target: evt.target,
	pseudoElement: evt.pseudoElement,
	elapsedTime: evt.elapsedTime,
	});
	};
	}

	// Wait a couple of frames for the events to be dispatched
	await waitForFrame();
	await waitForFrame();

	const expectedEvents = [
	['animationstart', parentDiv, 0],
	['animationstart', parentDiv, '::marker', 0],
	['animationstart', parentDiv, '::before', 0],
	['animationstart', parentDiv, '::after', 0],
	['animationstart', childDiv, 0],
	];
	if (!testMarkerPseudos) {
	expectedEvents.splice(1, 1);
	}

	checkEvents(events, ...expectedEvents);
	}, description);
	}

	pseudoTest('Same events on pseudo-elements follow the prescribed order', false);
	pseudoTest('Same events on pseudo-elements follow the prescribed order ' +
	'(::marker)', true);

	promise_test(async t => {
	let events = [];
	const [animation1, watcher1, div1] =
	setupAnimation(t, 'anim 200s 400s', events);
	const [animation2, watcher2, div2] =
	setupAnimation(t, 'anim 300s 2', events);

	await watcher2.wait_for('animationstart');

	animation1.currentTime = 400 * MS_PER_SEC;
	animation2.currentTime = 400 * MS_PER_SEC;

	events.length = 0; // Clear received event array

	await Promise.all([ watcher1.wait_for('animationstart'),
	watcher2.wait_for('animationiteration') ]);

	checkEvents(events, ['animationiteration', div2, 300],
	['animationstart', div1, 0]);
	}, 'Start and iteration events are ordered by time');

	promise_test(async t => {
	let events = [];
	const [animation1, watcher1, div1] =
	setupAnimation(t, 'anim 150s', events);
	const [animation2, watcher2, div2] =
	setupAnimation(t, 'anim 100s 2', events);

	await Promise.all([ watcher1.wait_for('animationstart'),
	watcher2.wait_for('animationstart') ]);

	animation1.currentTime = 150 * MS_PER_SEC;
	animation2.currentTime = 150 * MS_PER_SEC;

	events.length = 0; // Clear received event array

	await Promise.all([ watcher1.wait_for('animationend'),
	watcher2.wait_for('animationiteration') ]);

	checkEvents(events, ['animationiteration', div2, 100],
	['animationend', div1, 150]);
	}, 'Iteration and end events are ordered by time');

	promise_test(async t => {
	let events = [];
	const [animation1, watcher1, div1] =
	setupAnimation(t, 'anim 100s 100s', events);
	const [animation2, watcher2, div2] =
	setupAnimation(t, 'anim 100s 2', events);

	animation1.finish();
	animation2.finish();

	await Promise.all([ watcher1.wait_for([ 'animationstart',
	'animationend' ]),
	watcher2.wait_for([ 'animationstart',
	'animationend' ]) ]);

	checkEvents(events, ['animationstart', div2, 0],
	['animationstart', div1, 0],
	['animationend', div1, 100],
	['animationend', div2, 200]);
	}, 'Start and end events are sorted correctly when fired simultaneously');

	</script>