1 files changed, 28 insertions, 2 deletions
diff --git a/layout/style/test/test_animations_event_handler_attribute.html b/layout/style/test/test_animations_event_handler_attribute.html
index 23a749daa..036a77779 100644
--- a/layout/style/test/test_animations_event_handler_attribute.html
+++ b/layout/style/test/test_animations_event_handler_attribute.html
@@ -88,11 +88,12 @@ 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
@@ -111,6 +112,31 @@ 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',