<!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>
Codebase Browser
chromium