Bug 1302648 part 6 - Add animationcancel test to legacy tests. r=birtles

MozReview-Commit-ID: ETOWjRQxUor

--HG--
extra : rebase_source : 2a00f8926832c760a6d154c19ae2ca30ff4c8a5b

layout/style/test/test_animations_event_handler_attribute.html

@@ -67,11 +67,12 @@ function checkReceivedEvents(eventType, elements) {
 // Take over the refresh driver right from the start.
 advance_clock(0);
 
-// 1. Test CSS Animation event handlers.
+// 1a. Test CSS Animation event handlers (without animationcancel)
 
 var targets = createAndRegisterTargets([ 'onanimationstart',
                                          'onanimationiteration',
-                                         'onanimationend' ]);
+                                         'onanimationend',
+                                         'onanimationcancel']);
 targets.forEach(div => {
   div.setAttribute('style', 'animation: anim 100ms 2');
   getComputedStyle(div).animationName;  // flush
@@ -88,6 +89,29 @@ checkReceivedEvents("animationend", targets);
 
 targets.forEach(div => { div.remove(); });
 
+// 1b. Test CSS Animation cancel event handler
+var targets = createAndRegisterTargets([ 'onanimationcancel' ]);
+
+targets.forEach(div => {
+  div.setAttribute('style', 'animation: anim 100ms 2 200ms');
+  getComputedStyle(div).animationName;  // flush
+});
+
+advance_clock(200);
+
+targets.forEach(div => {
+  div.style.display = "none"
+  getComputedStyle(div).display; // flush
+});
+
+advance_clock(0);
+checkReceivedEvents("animationcancel", targets);
+
+advance_clock(200);
+
+targets.forEach(div => { div.remove(); });
+
+
 // 2a. Test CSS Transition event handlers (without transitioncancel)
 
 var targets = createAndRegisterTargets([ 'ontransitionrun',

layout/style/test/test_animations_event_order.html

@@ -46,6 +46,7 @@ var gDisplay = document.getElementById('display');
 [ 'animationstart',
   'animationiteration',
   'animationend',
+  'animationcancel',
   'transitionrun',
   'transitionstart',
   'transitionend',
@@ -660,6 +661,35 @@ checkEventOrder([ divs[0], 'transitionrun' ],
 divs.forEach(div => div.remove());
 divs = [];
 
+
+// 4k. Test sorting animations with cancel
+
+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.animation = 'anim 10s 5s';
+divs[1].style.animation = 'anim 10s';
+
+getComputedStyle(divs[0]).animation; // flush
+
+advance_clock(0);  // divs[1]'s animation start
+advance_clock(5 * 1000);  // divs[0]'s animation start
+divs.forEach(div => div.style.display = 'none' );
+getComputedStyle(divs[0]).display;
+advance_clock(10 * 1000);
+
+checkEventOrder([ divs[1], 'animationstart' ],
+                [ divs[0], 'animationstart' ],
+                [ divs[1], 'animationcancel' ],
+                [ divs[0], 'animationcancel' ],
+                'Simultaneous animationcancel on siblings');
+
 SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
 
 </script>