diff --git a/dom/animation/Animation.cpp b/dom/animation/Animation.cpp
index 9c49470cb4e..cf9bc7a797d 100644
--- a/dom/animation/Animation.cpp
+++ b/dom/animation/Animation.cpp
@@ -478,6 +478,8 @@ Animation::DoCancel()
   }
   ResetFinishedPromise();
 
+  DispatchPlaybackEvent(NS_LITERAL_STRING("cancel"));
+
   mHoldTime.SetNull();
   mStartTime.SetNull();
 
@@ -1118,7 +1120,9 @@ Animation::DispatchPlaybackEvent(const nsAString& aName)
 {
   AnimationPlaybackEventInit init;
 
-  init.mCurrentTime = GetCurrentTimeAsDouble();
+  if (aName.EqualsLiteral("finish")) {
+    init.mCurrentTime = GetCurrentTimeAsDouble();
+  }
   if (mTimeline) {
     init.mTimelineTime = mTimeline->GetCurrentTimeAsDouble();
   }
diff --git a/dom/animation/Animation.h b/dom/animation/Animation.h
index 34303f2489a..b079f134028 100644
--- a/dom/animation/Animation.h
+++ b/dom/animation/Animation.h
@@ -112,6 +112,7 @@ public:
   virtual void Reverse(ErrorResult& aRv);
   bool IsRunningOnCompositor() const { return mIsRunningOnCompositor; }
   IMPL_EVENT_HANDLER(finish);
+  IMPL_EVENT_HANDLER(cancel);
 
   // Wrapper functions for Animation DOM methods when called
   // from script.
diff --git a/dom/animation/test/css-animations/file_animation-oncancel.html b/dom/animation/test/css-animations/file_animation-oncancel.html
new file mode 100644
index 00000000000..563ef00613e
--- /dev/null
+++ b/dom/animation/test/css-animations/file_animation-oncancel.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src="../testcommon.js"></script>
+<style>
+@keyframes abc {
+  to { transform: translate(10px) }
+}
+</style>
+<body>
+<script>
+'use strict';
+
+async_test(function(t) {
+  var div = addDiv(t, {'style': 'animation: abc 100s'});
+  var animation = div.getAnimations()[0];
+
+  var finishedTimelineTime;
+  animation.finished.then().catch(function() {
+    finishedTimelineTime = animation.timeline.currentTime;
+  });
+
+  animation.oncancel = t.step_func_done(function(event) {
+    assert_equals(event.currentTime, null,
+      'event.currentTime should be null');
+    assert_equals(event.timelineTime, finishedTimelineTime,
+      'event.timelineTime should equal to the animation timeline ' +
+      'when finished promise is rejected');
+  });
+
+  animation.cancel();
+}, 'oncancel event is fired when animation.cancel()');
+
+done();
+</script>
+</body>
diff --git a/dom/animation/test/css-animations/test_animation-oncancel.html b/dom/animation/test/css-animations/test_animation-oncancel.html
new file mode 100644
index 00000000000..94b5f92fb06
--- /dev/null
+++ b/dom/animation/test/css-animations/test_animation-oncancel.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<script>
+'use strict';
+setup({explicit_done: true});
+SpecialPowers.pushPrefEnv(
+  { "set": [["dom.animations-api.core.enabled", true]]},
+  function() {
+    window.open("file_animation-oncancel.html");
+  });
+</script>
+</html>
diff --git a/dom/animation/test/mochitest.ini b/dom/animation/test/mochitest.ini
index 3c11fac729d..97b54b44d63 100644
--- a/dom/animation/test/mochitest.ini
+++ b/dom/animation/test/mochitest.ini
@@ -12,6 +12,8 @@ support-files = css-animations/file_animation-currenttime.html
 support-files = css-animations/file_animation-finish.html
 [css-animations/test_animation-finished.html]
 support-files = css-animations/file_animation-finished.html
+[css-animations/test_animation-oncancel.html]
+support-files = css-animations/file_animation-oncancel.html
 [css-animations/test_animation-onfinish.html]
 support-files = css-animations/file_animation-onfinish.html
 [css-animations/test_animation-pausing.html]
diff --git a/dom/base/nsGkAtomList.h b/dom/base/nsGkAtomList.h
index 341d8c574e8..9fb241155ef 100644
--- a/dom/base/nsGkAtomList.h
+++ b/dom/base/nsGkAtomList.h
@@ -696,6 +696,7 @@ GK_ATOM(onbroadcast, "onbroadcast")
 GK_ATOM(onbusy, "onbusy")
 GK_ATOM(oncached, "oncached")
 GK_ATOM(oncallschanged, "oncallschanged")
+GK_ATOM(oncancel, "oncancel")
 GK_ATOM(oncardstatechange, "oncardstatechange")
 GK_ATOM(oncfstatechange, "oncfstatechange")
 GK_ATOM(onchange, "onchange")
diff --git a/dom/webidl/Animation.webidl b/dom/webidl/Animation.webidl
index e7bfefc999d..6ca9d425358 100644
--- a/dom/webidl/Animation.webidl
+++ b/dom/webidl/Animation.webidl
@@ -31,6 +31,7 @@ interface Animation : EventTarget {
   [Throws]
   readonly attribute Promise<Animation> finished;
            attribute EventHandler       onfinish;
+           attribute EventHandler       oncancel;
   void cancel ();
   [Throws]
   void finish ();
