[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
web-platform-tests · Oct 25, 2021 · 73deb5c · 73deb5c
1 parent 590d697
commit 73deb5c
Showing 1 changed file with 98 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,98 @@
+<!DOCTYPE HTML>
+<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."
+promise_test(async t => {
+  const pageA = new RemoteContext(token());
+  const pageB = new RemoteContext(token());
+
+  const urlA = executorPath + pageA.context_id +
+               '&events=pagehide,pageshow,load';
+  const urlB = originCrossSite + executorPath + pageB.context_id;
+
+  window.open(urlA, '_blank', 'noopener');
+
+  // Create a <form>, focus on an <input>, and then submit the form to navigate
+  // to `urlB`. focus/blur events on the <input> are recorded.
+  await pageA.execute_script(waitForPageShow);
+  await pageA.execute_script(
+    (url) => {
+      // searchParams part of `url` (i.e. `uuid=` param) is passed via <input>,
+      // while other parts are via <form action> attribute.
+      url = new URL(url);
+      const targetId = url.searchParams.get('uuid');
+      url.search = '';
+
+      const form = document.createElement('form');
+      form.setAttribute('action', url.href);
+
+      const idInput = document.createElement('input');
+      idInput.setAttribute('type', 'text');
+      idInput.setAttribute('name', 'uuid');
+      idInput.setAttribute('value', targetId);
+      form.appendChild(idInput);
+
+      const textInput = document.createElement('input');
+      textInput.setAttribute('type', 'text');
+      textInput.setAttribute('id', 'toBeFocused');
+      textInput.onfocus = () => {
+        recordEvent('input.focus');
+      };
+      textInput.onblur = () => {
+        recordEvent('input.blur');
+      };
+      form.appendChild(textInput);
+
+      document.body.appendChild(form);
+
+      textInput.focus();
+
+      prepareNavigation(() => {
+        form.submit();
+      });
+    },
+    [urlB]
+  );
+
+  // Wait for navigation and then back navigate to `urlA`.
+  await pageB.execute_script(waitForPageShow);
+  await pageB.execute_script(
+    () => {
+      prepareNavigation(() => { history.back(); });
+    }
+  );
+
+  // Wait for navigation and assert that the page is restored from BFCache.
+  await pageA.execute_script(waitForPageShow);
+  await assert_bfcached(pageA);
+
+  assert_true(
+    await pageA.execute_script(() => {
+        return document.activeElement ===
+               document.querySelector('#toBeFocused');
+    }),
+    'activeElement should be the element focused before BFCache');
+
+  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>