Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/browsers/browsing-the-web/back-forward-cache/focus.html - WPT Dashboard Interop Dashboard
<!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:
// "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>