diff --git a/dom/events/Event-dispatch-on-disabled-elements.html b/dom/events/Event-dispatch-on-disabled-elements.html
index a295ce1ef780d5..b4786ab16b5db6 100644
--- a/dom/events/Event-dispatch-on-disabled-elements.html
+++ b/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);