diff --git a/content/media/WebVTTListener.cpp b/content/media/WebVTTListener.cpp
index 4343c9d36678..b942ff0419e1 100644
--- a/content/media/WebVTTListener.cpp
+++ b/content/media/WebVTTListener.cpp
@@ -5,6 +5,8 @@
 
 #include "WebVTTListener.h"
 #include "mozilla/dom/TextTrackCue.h"
+#include "mozilla/dom/TextTrackRegion.h"
+#include "mozilla/dom/VTTRegionBinding.h"
 #include "mozilla/dom/HTMLTrackElement.h"
 #include "nsIInputStream.h"
 #include "nsIWebVTTParserWrapper.h"
@@ -172,7 +174,17 @@ WebVTTListener::OnCue(const JS::Value &aCue, JSContext* aCx)
 NS_IMETHODIMP
 WebVTTListener::OnRegion(const JS::Value &aRegion, JSContext* aCx)
 {
-  // TODO: Implement VTTRegions see bug 897504
+  if (!aRegion.isObject()) {
+    return NS_ERROR_FAILURE;
+  }
+
+  TextTrackRegion* region;
+  nsresult rv = UNWRAP_OBJECT(VTTRegion, aCx, &aRegion.toObject(),
+                              region);
+  NS_ENSURE_SUCCESS(rv, rv);
+
+  mElement->mTrack->AddRegion(*region);
+
   return NS_OK;
 }
 
diff --git a/content/media/test/Makefile.in b/content/media/test/Makefile.in
index 3d6b6ff79656..8a5e64b31527 100644
--- a/content/media/test/Makefile.in
+++ b/content/media/test/Makefile.in
@@ -140,6 +140,7 @@ MOCHITEST_FILES = \
 		$(filter disabled-for-intermittent-failures--bug-608634, test_error_in_video_document.html) \
 		test_texttrack.html \
 		test_texttrackcue.html \
+		test_texttrackregion.html \
 		test_timeupdate_small_files.html \
 		test_unseekable.html \
 		test_VideoPlaybackQuality.html \
@@ -272,6 +273,7 @@ MOCHITEST_FILES += \
 		notags.mp3 \
 		id3tags.mp3 \
 		basic.vtt \
+		region.vtt \
 		long.vtt \
 		$(NULL)
 
diff --git a/content/media/test/region.vtt b/content/media/test/region.vtt
new file mode 100644
index 000000000000..883341fc6882
--- /dev/null
+++ b/content/media/test/region.vtt
@@ -0,0 +1,5 @@
+WEBVTT
+Region: id=fred width=62% lines=5 regionanchor=4%,78% viewportanchor=10%,90% scroll=up
+
+00:01.000 --> 00:02.000 region:fred
+Test here.
diff --git a/content/media/test/test_texttrackregion.html b/content/media/test/test_texttrackregion.html
new file mode 100644
index 000000000000..b34e2c9864e3
--- /dev/null
+++ b/content/media/test/test_texttrackregion.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=917945
+-->
+<head>
+  <meta charset='utf-8'>
+  <title>Test for Bug 917945 - VTTRegion</title>
+  <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
+  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body>
+<p id="display"></p>
+<div id="content">
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+SimpleTest.waitForExplicitFinish();
+SpecialPowers.pushPrefEnv({"set": [["media.webvtt.enabled", true]]},
+  function() {
+    var video = document.createElement("video");
+    video.src = "seek.webm";
+    video.preload = "auto";
+    var trackElement = document.createElement("track");
+    trackElement.src = "region.vtt";
+    trackElement.kind = "subtitles";
+    document.getElementById("content").appendChild(video);
+    video.appendChild(trackElement);
+    video.addEventListener("loadedmetadata", function run_tests() {
+      // Re-que run_tests() at the end of the event loop until the track
+      // element has loaded its data.
+      if (trackElement.readyState == 1) {
+        setTimeout(run_tests, 0);
+        return;
+      }
+      is(trackElement.readyState, 2, "Track::ReadyState should be set to LOADED.");
+
+      var cues = trackElement.track.cues,
+          regions = trackElement.track.regions;
+
+      is(regions.length, 1, "Region list length should be 1.");
+      is(cues.length, 1, "Cue list length should be 1.");
+
+      is(cues[0].regionId, "fred", "Cue regionId should be 'fred'.");
+
+      var region = regions[0];
+
+      is(region.id, "fred", "Region ID should be 'fred'.");
+      is(region.width, 62, "Region width should be 50.");
+      is(region.lines, 5, "Region lines should be 5.");
+      is(region.regionAnchorX, 4, "Region regionAnchorX should be 4.");
+      is(region.regionAnchorY, 78, "Region regionAnchorY should be 78.");
+      is(region.viewportAnchorX, 10, "Region viewportAnchorX should be 10.");
+      is(region.viewportAnchorY, 90, "Region viewportAnchorY should be 90.");
+      is(region.scroll, "up", "Region scroll should be 'up'");
+
+      SimpleTest.finish();
+    });
+  }
+);
+
+</script>
+</pre>
+</body>
+</html>
