--- a/layout/style/test/test_animations_event_order.html
+++ b/layout/style/test/test_animations_event_order.html
@@ -1,9 +1,9 @@
-<!doctype html>
+o<!doctype html>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1183461
-->
<!--
This test is similar to those in test_animations.html with the exception
that those tests interact with a single element at a time. The tests in this
file are specifically concerned with testing the ordering of events between
@@ -41,29 +41,38 @@ advance_clock(0);
// Common test scaffolding
var gEventsReceived = [];
var gDisplay = document.getElementById('display');
[ 'animationstart',
'animationiteration',
'animationend',
+ 'transitionstart',
'transitionend' ]
.forEach(event =>
gDisplay.addEventListener(event,
event => gEventsReceived.push(event),
false));
function checkEventOrder(...args) {
// Argument format:
- // Arguments = ExpectedEvent*, desc
+ // Arguments = ExpectedEvent*, (evalFunction), desc
// ExpectedEvent =
// [ target|animationName|transitionProperty, (pseudo,) message ]
- var expectedEvents = args.slice(0, -1);
+ // If you don't specify the evalFunction, evalFunction will be is() function.
+ var expectedEvents = args.slice(0, -2);
+ var evalFunc = args[args.length - 2];
var desc = args[args.length - 1];
+ if (Array.isArray(evalFunc)) {
+ // Legacy parameter type.
+ expectedEvents = args.slice(0, -1);
+ evalFunc = is;
+ }
+
var isTestingNameOrProperty = expectedEvents.length &&
typeof expectedEvents[0][0] == 'string';
var formatEvent = (target, nameOrProperty, pseudo, message) =>
isTestingNameOrProperty ?
`${nameOrProperty}${pseudo}:${message}` :
`${target.id}${pseudo}:${message}`;
@@ -72,17 +81,17 @@ function checkEventOrder(...args) {
event.animationName || event.propertyName,
event.pseudoElement, event.type)
).join(';');
var expected = expectedEvents.map(
event => event.length == 3 ?
formatEvent(event[0], event[0], event[1], event[2]) :
formatEvent(event[0], event[0], '', event[1])
).join(';');
- is(actual, expected, desc);
+ evalFunc(actual, expected, desc);
gEventsReceived = [];
}
// 1. TESTS FOR SORTING BY TREE ORDER
// 1a. Test that simultaneous events are sorted by tree order (siblings)
var divs = [ document.createElement('div'),
@@ -315,16 +324,22 @@ divs.forEach((div, i) => {
div.setAttribute('id', 'div' + i);
});
getComputedStyle(divs[0]).marginLeft;
divs.forEach(div => div.style.marginLeft = '100px');
getComputedStyle(divs[0]).marginLeft;
advance_clock(0);
+
+checkEventOrder([ divs[0], 'transitionstart' ],
+ [ divs[1], 'transitionstart' ],
+ todo_is,
+ 'Simultaneous transitionstart on siblings');
+
advance_clock(10000);
checkEventOrder([ divs[0], 'transitionend' ],
[ divs[1], 'transitionend' ],
'Simultaneous transitionend on siblings');
divs.forEach(div => div.remove());
divs = [];
@@ -353,16 +368,23 @@ divs.forEach((div, i) => {
div.setAttribute('id', 'div' + i);
});
getComputedStyle(divs[0]).marginLeft;
divs.forEach(div => div.style.marginLeft = '100px');
getComputedStyle(divs[0]).marginLeft;
advance_clock(0);
+
+checkEventOrder([ divs[0], 'transitionstart' ],
+ [ divs[2], 'transitionstart' ],
+ [ divs[1], 'transitionstart' ],
+ todo_is,
+ 'Simultaneous transitionstart on children');
+
advance_clock(10000);
checkEventOrder([ divs[0], 'transitionend' ],
[ divs[2], 'transitionend' ],
[ divs[1], 'transitionend' ],
'Simultaneous transitionend on children');
divs.forEach(div => div.remove());
@@ -401,16 +423,24 @@ sheet.insertRule('div.active, #div0.acti
sheet.insertRule('#div0::after, #div0::before { ' +
' content: " " }', 2);
getComputedStyle(divs[0]).marginLeft;
divs.forEach(div => div.classList.add('active'));
getComputedStyle(divs[0]).marginLeft;
advance_clock(0);
+
+checkEventOrder([ divs[0], 'transitionstart' ],
+ [ divs[0], '::before', 'transitionstart' ],
+ [ divs[0], '::after', 'transitionstart' ],
+ [ divs[1], 'transitionstart' ],
+ todo_is,
+ 'Simultaneous transitionstart on pseudo-elements');
+
advance_clock(10000);
checkEventOrder([ divs[0], 'transitionend' ],
[ divs[0], '::before', 'transitionend' ],
[ divs[0], '::after', 'transitionend' ],
[ divs[1], 'transitionend' ],
'Simultaneous transitionend on pseudo-elements');
@@ -434,16 +464,22 @@ divs.forEach((div, i) => {
divs[0].style.transition = 'margin-left 10s';
divs[1].style.transition = 'margin-left 5s';
getComputedStyle(divs[0]).marginLeft;
divs.forEach(div => div.style.marginLeft = '100px');
getComputedStyle(divs[0]).marginLeft;
advance_clock(0);
+
+checkEventOrder([ divs[1], 'transitionstart' ],
+ [ divs[0], 'transitionstart' ],
+ todo_is,
+ 'Sorting of transitionstart events by time');
+
advance_clock(10000);
checkEventOrder([ divs[1], 'transitionend' ],
[ divs[0], 'transitionend' ],
'Sorting of transitionend events by time');
divs.forEach(div => div.remove());
divs = [];
@@ -461,16 +497,22 @@ divs.forEach((div, i) => {
divs[0].style.transition = 'margin-left 5s 5s';
divs[1].style.transition = 'margin-left 5s';
getComputedStyle(divs[0]).marginLeft;
divs.forEach(div => div.style.marginLeft = '100px');
getComputedStyle(divs[0]).marginLeft;
advance_clock(0);
+
+checkEventOrder([ divs[1], 'transitionstart' ],
+ [ divs[0], 'transitionstart' ],
+ todo_is,
+ 'Sorting of transitionstart events by time (including delay)');
+
advance_clock(10000);
checkEventOrder([ divs[1], 'transitionend' ],
[ divs[0], 'transitionend' ],
'Sorting of transitionend events by time (including delay)');
divs.forEach(div => div.remove());
divs = [];
@@ -484,16 +526,22 @@ div.style.marginLeft = '0px';
div.style.transition = 'all 5s';
getComputedStyle(div).marginLeft;
div.style.opacity = '1';
div.style.marginLeft = '100px';
getComputedStyle(div).marginLeft;
advance_clock(0);
+
+checkEventOrder([ 'margin-left', 'transitionstart' ],
+ [ 'opacity', 'transitionstart' ],
+ todo_is,
+ 'Sorting of transitionstart events by transition-property');
+
advance_clock(10000);
checkEventOrder([ 'margin-left', 'transitionend' ],
[ 'opacity', 'transitionend' ],
'Sorting of transitionend events by transition-property');
div.remove();
div = undefined;
@@ -511,16 +559,23 @@ divs.forEach((div, i) => {
});
getComputedStyle(divs[0]).marginLeft;
divs[0].style.opacity = '1';
divs[1].style.marginLeft = '100px';
getComputedStyle(divs[0]).marginLeft;
advance_clock(0);
+
+checkEventOrder([ divs[0], 'transitionstart' ],
+ [ divs[1], 'transitionstart' ],
+ todo_is,
+ 'Transition events are sorted by document position first, ' +
+ 'before transition-property');
+
advance_clock(10000);
checkEventOrder([ divs[0], 'transitionend' ],
[ divs[1], 'transitionend' ],
'Transition events are sorted by document position first, ' +
'before transition-property');
divs.forEach(div => div.remove());
@@ -535,16 +590,23 @@ div.style.marginLeft = '0px';
div.style.transition = 'margin-left 10s, opacity 5s';
getComputedStyle(div).marginLeft;
div.style.opacity = '1';
div.style.marginLeft = '100px';
getComputedStyle(div).marginLeft;
advance_clock(0);
+
+checkEventOrder([ 'opacity', 'transitionstart' ],
+ [ 'margin-left', 'transitionstart' ],
+ todo_is,
+ 'Transition events are sorted by time first, before ' +
+ 'transition-property');
+
advance_clock(10000);
checkEventOrder([ 'opacity', 'transitionend' ],
[ 'margin-left', 'transitionend' ],
'Transition events are sorted by time first, before ' +
'transition-property');
div.remove();