diff --git a/fetch/sec-metadata/resources/unload-with-beacon.html b/fetch/sec-metadata/resources/unload-with-beacon.html
new file mode 100644
index 0000000000..b00c9a5776
--- /dev/null
+++ b/fetch/sec-metadata/resources/unload-with-beacon.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<script>
+  // When told, register an unload handler that will trigger a beacon to the
+  // URL given by the sender of the message.
+  window.addEventListener('message', e => {
+      var url = e.data;
+      window.addEventListener('unload', () => {
+          navigator.sendBeacon(url, 'blah');
+      });
+      window.parent.postMessage('navigate-away', '*');
+  });
+</script>
diff --git a/fetch/sec-metadata/unload.tentative.https.sub.html b/fetch/sec-metadata/unload.tentative.https.sub.html
new file mode 100644
index 0000000000..89ebc05032
--- /dev/null
+++ b/fetch/sec-metadata/unload.tentative.https.sub.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src=/resources/testdriver.js></script>
+<script src=/resources/testdriver-vendor.js></script>
+<script src=/fetch/sec-metadata/resources/helper.js></script>
+<script src=/common/utils.js></script>
+<body>
+<script>
+  // The test
+  // 1. Creates a same-origin iframe
+  // 2. Adds to the iframe an unload handler that will
+  //    trigger a request to <unload_request_url>/.../record-header.py...
+  // 3. Navigate the iframe to a cross-origin url (to data: url)
+  // 4. Waits until the request goes through
+  // 5. Verifies Sec-Fetch-Site request header of the request.
+  //
+  // This is a regression test for https://crbug.com/986577.
+  function create_test(unload_request_origin, expectations) {
+    async_test(t => {
+      // STEP 1: Create an iframe.
+      let nonce = token();
+      let key = "unload-test-" + nonce;
+      let url = unload_request_origin +
+          "/fetch/sec-metadata/resources/record-header.py?file=" + key;
+      let i = document.createElement('iframe');
+      i.src = 'resources/unload-with-beacon.html';
+      i.onload = () => {
+          // STEP 2: Ask the iframe to add an unload handler.
+          i.contentWindow.postMessage(url, '*');
+      };
+      window.addEventListener('message', e => {
+          // STEP 3: Navigate the iframe away
+          i.contentWindow.location = 'data:text/html,DONE';
+      });
+      document.body.appendChild(i);
+
+      // STEPS 4 and 5: Wait for the beacon to go through and verify
+      // the request headers.
+      function wait_and_verify() {
+          t.step_timeout(() => {
+              fetch("resources/record-header.py?retrieve=true&file=" + key)
+                  .then(response => response.text())
+                  .then(text => t.step(() => {
+                      if (text == 'No header has been recorded') {
+                        wait_and_verify();
+                        return;
+                      }
+                      assert_header_equals(text, expectations);
+                      t.done();
+                  }))
+          }, 200);
+      }
+      wait_and_verify();
+    }, "Fetch from an unload handler");
+  }
+
+  create_test("https://{{host}}:{{ports[https][0]}}", {
+    "dest": "empty",
+    "site": "same-origin",
+    "user": "",
+    "mode": "no-cors"
+  });
+</script>
