diff --git a/html/browsers/browsing-the-web/back-forward-cache/focus.html b/html/browsers/browsing-the-web/back-forward-cache/focus.html
new file mode 100644
index 00000000000000..3901a5417ddc87
--- /dev/null
+++ b/html/browsers/browsing-the-web/back-forward-cache/focus.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<meta name="timeout" content="long">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#focused-area-of-the-document">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/utils.js"></script>
+<script src="/common/dispatcher/dispatcher.js"></script>
+<script src="resources/helper.sub.js"></script>
+<script>
+// Focus should remain the same and thus blur/focus events shouldn't be fired
+// when page gets into and out of BFCache, as explicitly noted in the spec:
+// https://html.spec.whatwg.org/multipage/interaction.html#focused-area-of-the-document
+// "Even if a document is not fully active and not shown to the user, it can still
+// have a focused area of the document. If a document's fully active state changes,
+// its focused area of the document will stay the same."
+runBfcacheTest({
+  openFunc: (url) => window.open(url + '&events=pagehide,pageshow,load',
+                               '_blank', 'noopener'),
+  funcBeforeNavigation: () => {
+    // Create and focus on an <input> before navigation.
+    // Focus/blur events on the <input> are recorded.
+    const textInput = document.createElement('input');
+    textInput.setAttribute('type', 'text');
+    textInput.setAttribute('id', 'toBeFocused');
+    textInput.onfocus = () => {
+      recordEvent('input.focus');
+    };
+    textInput.onblur = () => {
+      recordEvent('input.blur');
+    };
+    document.body.appendChild(textInput);
+    textInput.focus();
+    window.activeElementBeforePageHide = document.activeElement;
+    window.addEventListener('pagehide', () => {
+      window.activeElementOnPageHide = document.activeElement;
+    });
+  },
+  funcAfterAssertion: async (pageA) => {
+    assert_true(
+      await pageA.execute_script(() => {
+          return window.activeElementBeforePageHide ===
+                 document.querySelector('#toBeFocused');
+      }),
+      'activeElement before pagehide');
+
+    assert_true(
+      await pageA.execute_script(() => {
+          return window.activeElementOnPageHide ===
+                 document.querySelector('#toBeFocused');
+      }),
+      'activeElement on pagehide');
+
+    assert_true(
+      await pageA.execute_script(() => {
+          return document.activeElement ===
+                 document.querySelector('#toBeFocused');
+      }),
+      'activeElement after navigation');
+
+    assert_array_equals(
+      await pageA.execute_script(() => getRecordedEvents()),
+      [
+        'window.load',
+        'window.pageshow',
+        'input.focus',
+        'window.pagehide.persisted',
+        'window.pageshow.persisted'
+      ],
+      'blur/focus events should not be fired ' +
+      'when page gets into and out of BFCache');
+  }
+}, 'Focus should be kept when page gets into and out of BFCache');
+</script>
