diff --git a/components/script/animations.rs b/components/script/animations.rs
index cd581ed3cb3..73131763430 100644
--- a/components/script/animations.rs
+++ b/components/script/animations.rs
@@ -40,7 +40,7 @@ pub(crate) struct Animations {
     pub sets: DocumentAnimationSet,
 
     /// Whether or not we have animations that are running.
-    have_running_animations: Cell<bool>,
+    has_running_animations: Cell<bool>,
 
     /// A list of nodes with in-progress CSS transitions or pending events.
     rooted_nodes: DomRefCell<FxHashMap<OpaqueNode, Dom<Node>>>,
@@ -53,7 +53,7 @@ impl Animations {
     pub(crate) fn new() -> Self {
         Animations {
             sets: Default::default(),
-            have_running_animations: Cell::new(false),
+            has_running_animations: Cell::new(false),
             rooted_nodes: Default::default(),
             pending_events: Default::default(),
         }
@@ -97,6 +97,7 @@ impl Animations {
         }
 
         self.unroot_unused_nodes(&sets);
+        //self.update_running_animations_presence(window);
     }
 
     /// Cancel animations for the given node, if any exist.
@@ -142,17 +143,25 @@ impl Animations {
     }
 
     fn update_running_animations_presence(&self, window: &Window, new_value: bool) {
-        let have_running_animations = self.have_running_animations.get();
-        if new_value == have_running_animations {
+        let had_running_animations = self.has_running_animations.get();
+        if new_value == had_running_animations {
             return;
         }
 
-        self.have_running_animations.set(new_value);
-        let state = match new_value {
+        self.has_running_animations.set(new_value);
+        self.handle_animation_presence_or_pending_events_change(window);
+    }
+
+    fn handle_animation_presence_or_pending_events_change(&self, window: &Window) {
+        let has_running_animations = self.has_running_animations.get();
+        let has_pending_events = !self.pending_events.borrow().is_empty();
+
+        // Do not send the NoAnimationCallbacksPresent state until all pending
+        // animation events are delivered.
+        let state = match has_running_animations || has_pending_events {
             true => AnimationsPresentState::AnimationsPresent,
             false => AnimationsPresentState::NoAnimationsPresent,
         };
-
         window.send_to_constellation(ScriptMsg::ChangeRunningAnimationsState(state));
     }
 
@@ -425,10 +434,13 @@ impl Animations {
             });
     }
 
-    pub(crate) fn send_pending_events(&self) {
+    pub(crate) fn send_pending_events(&self, window: &Window) {
         // Take all of the events here, in case sending one of these events
         // triggers adding new events by forcing a layout.
         let events = std::mem::replace(&mut *self.pending_events.borrow_mut(), Vec::new());
+        if events.is_empty() {
+            return;
+        }
 
         for event in events.into_iter() {
             // We root the node here to ensure that sending this event doesn't
@@ -488,6 +500,10 @@ impl Animations {
                     .fire(node.upcast());
             }
         }
+
+        if self.pending_events.borrow().is_empty() {
+            self.handle_animation_presence_or_pending_events_change(window);
+        }
     }
 }
 
diff --git a/components/script/script_thread.rs b/components/script/script_thread.rs
index a82edd61cc3..b417f453cdf 100644
--- a/components/script/script_thread.rs
+++ b/components/script/script_thread.rs
@@ -1709,7 +1709,7 @@ impl ScriptThread {
         }
 
         for (_, document) in self.documents.borrow().iter() {
-            document.animations().send_pending_events();
+            document.animations().send_pending_events(document.window());
         }
     }
 
diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
index cbb7a753297..8eb3d7dd00f 100644
--- a/tests/wpt/mozilla/meta/MANIFEST.json
+++ b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -12980,6 +12980,13 @@
       ]
      ]
     },
+    "css-transition-cancel-event.html": [
+     "23400c556d58bb21b78a9cbed3b56028c7d299c3",
+     [
+      null,
+      {}
+     ]
+    ],
     "empty-keyframes.html": [
      "9f8935fb7f51219bb3ee07335e208a63c9edde81",
      [
diff --git a/tests/wpt/mozilla/tests/css/css-transition-cancel-event.html b/tests/wpt/mozilla/tests/css/css-transition-cancel-event.html
new file mode 100644
index 00000000000..23400c556d5
--- /dev/null
+++ b/tests/wpt/mozilla/tests/css/css-transition-cancel-event.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html>
+<head>
+<meta charset=utf-8>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+</head>
+<body>
+
+<script>
+const loaded = new Promise(resolve => {
+  addEventListener('load', () => {
+    setTimeout(resolve, 100);
+  });
+});
+
+promise_test(async t => {
+  await loaded;
+
+  const div1 = document.createElement('div');
+  const div2 = document.createElement('div');
+
+  div1.setAttribute('style', 'transition: all .01s linear; ' +
+                             'padding-left: 1px');
+  div2.setAttribute('style', 'transition: all 50s linear; ' +
+                             'padding-left: 1px');
+  document.body.appendChild(div1);
+  document.body.appendChild(div2);
+
+  getComputedStyle(div1).paddingLeft;
+  getComputedStyle(div2).paddingLeft;
+  div1.style.paddingLeft = '10px';
+  div2.style.paddingLeft = '10px';
+
+  div1.ontransitionend = () => {
+    // Cancel `div2`'s transition
+    div2.remove();
+  };
+
+  const watcher = new EventWatcher(t, div2, [ 'transitioncancel' ]);
+
+  // Check that we receive `transitioncancel` very soon.
+  //
+  // This test was written to catch a specific bug where the event loop blocks
+  // waiting for new incoming messages despite still having pending animation-
+  // related events (a `transitioncancel` event in this case) that need to be
+  // processed on a next "rendering opportunity".
+  //
+  // We want to check that the `transitioncancel` event is delivered soon
+  // enough, but we can't rely on test timeout because the timeout timer would
+  // unblock the event loop, resulting in a terribly belate delivery of the
+  // `transitioncancel` event. No matter how short the timeout is, it would
+  // look like the event was delivered just in time.
+  //
+  // Therefore, we are going to check the time taken to receive the event. If
+  // the test times out, we will probably receive the event anyway, but the
+  // duration will be some large value like 9800.
+  const start = Date.now();
+  await watcher.wait_for('transitioncancel');
+
+  assert_less_than(Date.now() - start, 1000);
+}, 'transitioncancel is delivered promptly');
+
+</script>
+</body>
+</html>