[WPT] BFCache: focus should be kept around BFCache

This CL adds a test to confirm that, when page gets into and out of BFCache, - Focus should be kept and - blur/focus events are not fired. The current results are Safari: Pass Firefox: Focus remains the same but blur/focus events are fired. Chrome: Focus is lost. See whatwg/html#6696 for other status and implementation bug links etc. Bug: 1107415, 1253728, whatwg/html#5878 Change-Id: I2bb9a420de19f24d7010917f7e6ce54cba8212fb Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3198456 Reviewed-by: Rakina Zata Amni <[email protected]> Commit-Queue: Hiroshige Hayashizaki <[email protected]> Cr-Commit-Position: refs/heads/main@{#968703}
mattwoodrow · Feb 15, 2022 · 0821a37 · 0821a37
1 parent 6e4a5b0
commit 0821a37
Showing 1 changed file with 73 additions and 0 deletions.
diff --git a/html/browsers/browsing-the-web/back-forward-cache/focus.html 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>