--- a/layout/style/test/test_animations_event_handler_attribute.html
+++ b/layout/style/test/test_animations_event_handler_attribute.html
@@ -85,25 +85,32 @@ checkReceivedEvents("animationiteration"
 
 advance_clock(200);
 checkReceivedEvents("animationend", targets);
 
 targets.forEach(div => { div.remove(); });
 
 // 2. Test CSS Transition event handlers.
 
-advance_clock(0);
-var targets = createAndRegisterTargets([ 'ontransitionend' ]);
+var targets = createAndRegisterTargets([ 'ontransitionrun',
+                                         'ontransitionstart',
+                                         'ontransitionend' ]);
 targets.forEach(div => {
-  div.style.transition = 'margin-left 100ms';
+  div.style.transition = 'margin-left 100ms 200ms';
   getComputedStyle(div).marginLeft; // flush
   div.style.marginLeft = "200px";
   getComputedStyle(div).marginLeft; // flush
 });
 
+advance_clock(0);
+checkReceivedEvents("transitionrun", targets);
+
+advance_clock(200);
+checkReceivedEvents("transitionstart", targets);
+
 advance_clock(100);
 checkReceivedEvents("transitionend", targets);
 
 targets.forEach(div => { div.remove(); });
 
 // 3. Test prefixed CSS Animation event handlers.
 
 var targets = createAndRegisterTargets([ 'onwebkitanimationstart',

--- a/layout/style/test/test_animations_event_order.html
+++ b/layout/style/test/test_animations_event_order.html
@@ -41,16 +41,18 @@ advance_clock(0);
 // Common test scaffolding
 
 var gEventsReceived = [];
 var gDisplay = document.getElementById('display');
 
 [ 'animationstart',
   'animationiteration',
   'animationend',
+  'transitionrun',
+  'transitionstart',
   'transitionend' ]
   .forEach(event =>
              gDisplay.addEventListener(event,
                                        event => gEventsReceived.push(event),
                                        false));
 
 function checkEventOrder(...args) {
   // Argument format:
@@ -317,19 +319,23 @@ divs.forEach((div, i) => {
 
 getComputedStyle(divs[0]).marginLeft;
 divs.forEach(div => div.style.marginLeft = '100px');
 getComputedStyle(divs[0]).marginLeft;
 
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ divs[0], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionend' ],
                 [ divs[1], 'transitionend' ],
-                'Simultaneous transitionend on siblings');
+                'Simultaneous transitionrun/start/end on siblings');
 
 divs.forEach(div => div.remove());
 divs = [];
 
 // 4b. Test sorting transitions by document position (children)
 
 divs = [ document.createElement('div'),
          document.createElement('div'),
@@ -355,20 +361,26 @@ divs.forEach((div, i) => {
 
 getComputedStyle(divs[0]).marginLeft;
 divs.forEach(div => div.style.marginLeft = '100px');
 getComputedStyle(divs[0]).marginLeft;
 
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ divs[0], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[2], 'transitionrun' ],
+                [ divs[2], 'transitionstart' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionend' ],
                 [ divs[2], 'transitionend' ],
                 [ divs[1], 'transitionend' ],
-                'Simultaneous transitionend on children');
+                'Simultaneous transitionrun/start/end on children');
 
 divs.forEach(div => div.remove());
 divs = [];
 
 // 4c. Test sorting transitions by document position (pseudos)
 
 divs = [ document.createElement('div'),
          document.createElement('div') ];
@@ -403,21 +415,29 @@ sheet.insertRule('#div0::after, #div0::b
 
 getComputedStyle(divs[0]).marginLeft;
 divs.forEach(div => div.classList.add('active'));
 getComputedStyle(divs[0]).marginLeft;
 
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ divs[0], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[0], '::before', 'transitionrun' ],
+                [ divs[0], '::before', 'transitionstart' ],
+                [ divs[0], '::after', 'transitionrun' ],
+                [ divs[0], '::after', 'transitionstart' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionend' ],
                 [ divs[0], '::before', 'transitionend' ],
                 [ divs[0], '::after', 'transitionend' ],
                 [ divs[1], 'transitionend' ],
-                'Simultaneous transitionend on pseudo-elements');
+                'Simultaneous transitionrun/start/end on pseudo-elements');
 
 divs.forEach(div => div.remove());
 divs = [];
 
 sheet = undefined;
 extraStyle.remove();
 extraStyle = undefined;
 
@@ -436,19 +456,23 @@ divs[1].style.transition = 'margin-left 
 
 getComputedStyle(divs[0]).marginLeft;
 divs.forEach(div => div.style.marginLeft = '100px');
 getComputedStyle(divs[0]).marginLeft;
 
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ divs[1], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[1], 'transitionend' ],
                 [ divs[0], 'transitionend' ],
-                'Sorting of transitionend events by time');
+                'Sorting of transitionrun/start/end events by time');
 
 divs.forEach(div => div.remove());
 divs = [];
 
 // 4e. Test sorting transitions by time (with delay)
 
 divs = [ document.createElement('div'),
          document.createElement('div') ];
@@ -461,21 +485,26 @@ 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);
-advance_clock(10000);
+advance_clock(10 * 1000);
 
-checkEventOrder([ divs[1], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[1], 'transitionend' ],
                 [ divs[0], 'transitionend' ],
-                'Sorting of transitionend events by time (including delay)');
+                'Sorting of transitionrun/start/end events by time' +
+                '(including delay)');
 
 divs.forEach(div => div.remove());
 divs = [];
 
 // 4f. Test sorting transitions by transition-property
 
 div = document.createElement('div');
 gDisplay.appendChild(div);
@@ -486,19 +515,24 @@ div.style.transition = 'all 5s';
 getComputedStyle(div).marginLeft;
 div.style.opacity = '1';
 div.style.marginLeft = '100px';
 getComputedStyle(div).marginLeft;
 
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ 'margin-left', 'transitionend' ],
+checkEventOrder([ 'margin-left', 'transitionrun' ],
+                [ 'margin-left', 'transitionstart' ],
+                [ 'opacity', 'transitionrun' ],
+                [ 'opacity', 'transitionstart' ],
+                [ 'margin-left', 'transitionend' ],
                 [ 'opacity', 'transitionend' ],
-                'Sorting of transitionend events by transition-property');
+                'Sorting of transitionrun/start/end events by ' +
+                'transition-property')
 
 div.remove();
 div = undefined;
 
 // 4g. Test document position beats transition-property
 
 divs = [ document.createElement('div'),
          document.createElement('div') ];
@@ -513,17 +547,21 @@ 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);
 advance_clock(10000);
 
-checkEventOrder([ divs[0], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionend' ],
                 [ divs[1], 'transitionend' ],
                 'Transition events are sorted by document position first, ' +
                 'before transition-property');
 
 divs.forEach(div => div.remove());
 divs = [];
 
 // 4h. Test time beats transition-property
@@ -537,22 +575,56 @@ div.style.transition = 'margin-left 10s,
 getComputedStyle(div).marginLeft;
 div.style.opacity = '1';
 div.style.marginLeft = '100px';
 getComputedStyle(div).marginLeft;
 
 advance_clock(0);
 advance_clock(10000);
 
-checkEventOrder([ 'opacity', 'transitionend' ],
+checkEventOrder([ 'margin-left', 'transitionrun' ],
+                [ 'margin-left', 'transitionstart' ],
+                [ 'opacity', 'transitionrun' ],
+                [ 'opacity', 'transitionstart' ],
+                [ 'opacity', 'transitionend' ],
                 [ 'margin-left', 'transitionend' ],
                 'Transition events are sorted by time first, before ' +
                 'transition-property');
 
 div.remove();
 div = undefined;
 
+// 4i. Test sorting transitions by document position (negative delay)
+
+divs = [ document.createElement('div'),
+         document.createElement('div') ];
+divs.forEach((div, i) => {
+  gDisplay.appendChild(div);
+  div.style.marginLeft = '0px';
+  div.setAttribute('id', 'div' + i);
+});
+
+divs[0].style.transition = 'margin-left 10s 5s';
+divs[1].style.transition = 'margin-left 10s';
+
+getComputedStyle(divs[0]).marginLeft;
+divs.forEach(div => div.style.marginLeft = '100px');
+getComputedStyle(divs[0]).marginLeft;
+
+advance_clock(0);
+advance_clock(15 * 1000);
+
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[1], 'transitionend' ],
+                [ divs[0], 'transitionend' ],
+                'Simultaneous transitionrun/start/end on siblings');
+
+divs.forEach(div => div.remove());
+divs = [];
 
 SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
 
 </script>
 </body>
 </html>