diff --git a/dom/media/mediasource/test/bipbop/bipbop_trailing_skip_box_video1.m4s b/dom/media/mediasource/test/bipbop/bipbop_trailing_skip_box_video1.m4s
new file mode 100644
index 000000000000..fa5d45427709
Binary files /dev/null and b/dom/media/mediasource/test/bipbop/bipbop_trailing_skip_box_video1.m4s differ
diff --git a/dom/media/mediasource/test/bipbop/bipbop_trailing_skip_box_video1.m4s^headers^ b/dom/media/mediasource/test/bipbop/bipbop_trailing_skip_box_video1.m4s^headers^
new file mode 100644
index 000000000000..4030ea1d3ddb
--- /dev/null
+++ b/dom/media/mediasource/test/bipbop/bipbop_trailing_skip_box_video1.m4s^headers^
@@ -0,0 +1 @@
+Cache-Control: no-store
diff --git a/dom/media/mediasource/test/mochitest.ini b/dom/media/mediasource/test/mochitest.ini
index 7549c3c7d971..0fbbebe081f9 100644
--- a/dom/media/mediasource/test/mochitest.ini
+++ b/dom/media/mediasource/test/mochitest.ini
@@ -6,6 +6,8 @@ support-files =
   seek_lowres.webm seek_lowres.webm^headers^
   bipbop/bipbop_300-3s.webm bipbop/bipbop_300-3s.webm^headers^
   bipbop/bipbop2s.mp4 bipbop/bipbop2s.mp4^headers^
+  bipbop/bipbop_trailing_skip_box_video1.m4s
+  bipbop/bipbop_trailing_skip_box_video1.m4s^headers^
   bipbop/bipbopinit.mp4 bipbop/bipbop_audioinit.mp4 bipbop/bipbop_videoinit.mp4
   bipbop/bipbop1.m4s bipbop/bipbop_audio1.m4s bipbop/bipbop_video1.m4s
   bipbop/bipbop2.m4s bipbop/bipbop_audio2.m4s bipbop/bipbop_video2.m4s
@@ -87,6 +89,7 @@ skip-if = os == 'win' # bug 1487973,
 [test_HaveMetadataUnbufferedSeek.html]
 [test_HaveMetadataUnbufferedSeek_mp4.html]
 [test_HEAAC_extradata.html]
+[test_InputBufferIsCleared.html]
 [test_LiveSeekable.html]
 [test_LoadedDataFired_mp4.html]
 [test_LoadedMetadataFired.html]
diff --git a/dom/media/mediasource/test/test_InputBufferIsCleared.html b/dom/media/mediasource/test/test_InputBufferIsCleared.html
new file mode 100644
index 000000000000..bad9a0c558c3
--- /dev/null
+++ b/dom/media/mediasource/test/test_InputBufferIsCleared.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>MSE: input buffer is cleared as expected (bug 1697476)</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="text/javascript" src="mediasource.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+SimpleTest.waitForExplicitFinish();
+
+// Test bug 1697476 is fixed. We do this by appending a number of segments with
+// trailing `skip` boxes. If the bug is fixed, then the data from these appends
+// will eventually be cleared from memory. If not fixed, we leak that memory.
+runWithMSE(async (ms, v) => {
+  await once(ms, "sourceopen");
+  const sb = ms.addSourceBuffer("video/mp4");
+  await fetchAndLoad(sb, "bipbop/bipbop_video", ["init"], ".mp4");
+  // Load ~1mb of media.
+  await fetchAndLoad(sb, "bipbop/bipbop_trailing_skip_box_video", ["1"], ".m4s");
+  // Load ~1mb more media several more times.
+  const numberOfAppends = 5;
+  for (let i = 1; i < numberOfAppends; ++i) {
+    sb.timestampOffset = v.buffered.end(0);
+    await fetchAndLoad(sb, "bipbop/bipbop_trailing_skip_box_video", ["1"], ".m4s");
+  }
+
+  // Grab a memory report. We'll use this to make sure we're not accumulating
+  // too much data in our buffers.
+  const mgr = SpecialPowers.Cc["@mozilla.org/memory-reporter-manager;1"]
+      .getService(SpecialPowers.Ci.nsIMemoryReporterManager);
+
+  let amount = 0;
+  const handleReport = (aProcess, aPath, aKind, aUnits, aAmount) => {
+    if (aPath == "explicit/media/resources") {
+      amount += aAmount;
+    }
+  };
+
+  await new Promise(r => mgr.getReports(handleReport, null, r, null, /* anonymized = */ false));
+  ok(true, "Yay didn't crash!");
+  ok(amount !== undefined, "Got media resources amount");
+  const sgementSize = 1023860;
+  // Set the limit to be equal to the total data we appended. If we're not
+  // clearing buffers, we'll have all the data from the appends + some other
+  // data, so will fail.
+  const limit = sgementSize * numberOfAppends - 1;
+  ok(amount < limit, `Should have less than ${limit} bytes of media usage. Got ${amount} bytes.`);
+  SimpleTest.finish();
+});
+
+</script>
+</pre>
+</body>
+</html>
