css animation events must fire even if an element is disabled.

Same as transitions.

Differential Revision: https://phabricator.services.mozilla.com/D21637

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1531605
gecko-commit: 214aa79533cd44a15f8a45ab9a3eee05dd957047
gecko-integration-branch: central
gecko-reviewers: smaug

dom/events/Event-dispatch-on-disabled-elements.html

@@ -170,6 +170,76 @@
   style.remove();
 }, "CSS Transitions events fire on disabled form elements");
 
+promise_test(async () => {
+  const style = document.createElement("style");
+  style.innerText = `
+    .animate {
+      animation: fade .1s 2;
+    }
+    @keyframes fade {
+      0% { opacity: 1; }
+      100% { opacity: 0.2; }
+    }
+  `;
+  document.head.appendChild(style);
+  // For each form element type, set up transition event handlers.
+  for (const localName of formElements) {
+    const elem = document.createElement(localName);
+    document.body.appendChild(elem);
+    elem.disabled = true;
+    const transitionPromises = [
+      "animationstart",
+      "animationiteration",
+      "animationend",
+    ].map(eventType => {
+      return new Promise(r => {
+        elem.addEventListener(eventType, r, { once: true });
+      });
+    });
+    elem.classList.add("animate");
+    // All the events fire...
+    await Promise.all(transitionPromises);
+    elem.remove();
+  }
+  // And we are done with the test... clean up.
+  style.remove();
+}, "CSS Animation events fire on disabled form elements");
+
+promise_test(async () => {
+  const style = document.createElement("style");
+  style.innerText = `
+    .animate {
+      animation: fade .1s 2;
+    }
+    @keyframes fade {
+      0% { opacity: 1; }
+      100% { opacity: 0.2; }
+    }
+  `;
+  document.head.appendChild(style);
+  // For each form element type, set up transition event handlers.
+  for (const localName of formElements) {
+    const elem = document.createElement(localName);
+    document.body.appendChild(elem);
+    elem.disabled = true;
+    // Let's now test the "animationcancel" event
+    const promiseToCancel = new Promise(r => {
+      elem.addEventListener("animationcancel", r);
+    });
+    elem.addEventListener("animationstart", () => {
+      // Cancel the animation by hiding it.
+      elem.style.display = "none";
+    });
+    elem.classList.add("animate");
+    // Trigger the animation again!
+    await promiseToCancel;
+    // And we are done with this element.
+    elem.remove();
+  }
+  // And we are done with the test... clean up.
+  style.remove();
+}, "CSS Animation's cancel events fire on disabled form elements");
+
 promise_test(async () => {
   for (const localName of formElements) {
     const elem = document.createElement(localName);