--- a/layout/style/test/test_animations_event_handler_attribute.html
+++ b/layout/style/test/test_animations_event_handler_attribute.html
@@ -83,21 +83,22 @@ checkReceivedEvents("animationstart", ta
 advance_clock(100);
 checkReceivedEvents("animationiteration", targets);
 
 advance_clock(200);
 checkReceivedEvents("animationend", targets);
 
 targets.forEach(div => { div.remove(); });
 
-// 2. Test CSS Transition event handlers.
+// 2a. Test CSS Transition event handlers (without transitioncancel)
 
 var targets = createAndRegisterTargets([ 'ontransitionrun',
                                          'ontransitionstart',
-                                         'ontransitionend' ]);
+                                         'ontransitionend',
+                                         'ontransitioncancel' ]);
 targets.forEach(div => {
   div.style.transition = 'margin-left 100ms 200ms';
   getComputedStyle(div).marginLeft; // flush
   div.style.marginLeft = "200px";
   getComputedStyle(div).marginLeft; // flush
 });
 
 advance_clock(0);
@@ -106,16 +107,41 @@ checkReceivedEvents("transitionrun", tar
 advance_clock(200);
 checkReceivedEvents("transitionstart", targets);
 
 advance_clock(100);
 checkReceivedEvents("transitionend", targets);
 
 targets.forEach(div => { div.remove(); });
 
+// 2b. Test CSS Transition cancel event handler.
+
+var targets = createAndRegisterTargets([ 'ontransitioncancel' ]);
+targets.forEach(div => {
+  div.style.transition = 'margin-left 100ms 200ms';
+  getComputedStyle(div).marginLeft; // flush
+  div.style.marginLeft = "200px";
+  getComputedStyle(div).marginLeft; // flush
+});
+
+advance_clock(200);
+
+targets.forEach(div => {
+  div.style.display = "none"
+});
+getComputedStyle(targets[0]).display; // flush
+
+advance_clock(0);
+checkReceivedEvents("transitioncancel", targets);
+
+advance_clock(100);
+targets.forEach( div => { is(div.receivedEventType, undefined); });
+
+targets.forEach(div => { div.remove(); });
+
 // 3. Test prefixed CSS Animation event handlers.
 
 var targets = createAndRegisterTargets([ 'onwebkitanimationstart',
                                          'onwebkitanimationiteration',
                                          'onwebkitanimationend' ]);
 targets.forEach(div => {
   div.setAttribute('style', 'animation: anim 100ms 2');
   getComputedStyle(div).animationName;  // flush

--- a/layout/style/test/test_animations_event_order.html
+++ b/layout/style/test/test_animations_event_order.html
@@ -43,17 +43,18 @@ advance_clock(0);
 var gEventsReceived = [];
 var gDisplay = document.getElementById('display');
 
 [ 'animationstart',
   'animationiteration',
   'animationend',
   'transitionrun',
   'transitionstart',
-  'transitionend' ]
+  'transitionend',
+  'transitioncancel' ]
   .forEach(event =>
              gDisplay.addEventListener(event,
                                        event => gEventsReceived.push(event),
                                        false));
 
 function checkEventOrder(...args) {
   // Argument format:
   // Arguments     = ExpectedEvent*, desc
@@ -618,13 +619,50 @@ checkEventOrder([ divs[0], 'transitionru
                 [ divs[0], 'transitionstart' ],
                 [ divs[1], 'transitionend' ],
                 [ divs[0], 'transitionend' ],
                 'Simultaneous transitionrun/start/end on siblings');
 
 divs.forEach(div => div.remove());
 divs = [];
 
+// 4j. Test sorting transitions with cancel
+// The order of transitioncancel is based on StyleManager.
+// So this test looks like wrong result at a glance. However
+// the gecko will cancel div1's transition before div2 in this case.
+
+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(5 * 1000);
+divs.forEach(div =>  div.style.display = 'none' );
+getComputedStyle(divs[0]).display;
+advance_clock(10 * 1000);
+
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[1], 'transitioncancel' ],
+                [ divs[0], 'transitioncancel' ],
+                'Simultaneous transitionrun/start/cancel on siblings');
+
+divs.forEach(div => div.remove());
+divs = [];
+
 SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
 
 </script>
 </body>
 </html>