Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 8 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /fenced-frame/script-focus.https.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Test Script-Based Focus for Fenced Frames</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/common/utils.js"></script>
<script src="resources/utils.js"></script>
<script src="/common/dispatcher/dispatcher.js"></script>
<script src="/common/get-host-info.sub.js"></script>
<body>
<script>
async function AttemptButtonFocus(frame, expecting_focus) {
await frame.execute(async (expecting_focus) => {
const button = document.createElement("button");
document.body.append(button);
button.focus();
assert_equals(document.activeElement == button, expecting_focus,
"Button's focus should match expected focus");
}, [expecting_focus]);
}
async function ClickOn(element, actions) {
// Wait until the window size is initialized.
while (window.innerWidth == 0) {
await new Promise(resolve => requestAnimationFrame(resolve));
}
await actions.pointerMove(0, 0, {origin: element})
.pointerDown()
.pointerUp()
.send();
}
async function SetupTest(click=true) {
// Clean up any leftover frames from prior tests.
document.querySelectorAll("fencedframe").forEach(e => {
e.remove();
})
const actions = new test_driver.Actions();
const frame = attachFencedFrameContext();
const fencedframe_element = frame.element;
if (click)
await ClickOn(document.body, actions);
return [actions, frame, fencedframe_element];
}
promise_test(async () => {
const [actions, ff1, ff1_element] = await SetupTest(false);
await ClickOn(ff1_element, actions);
await AttemptButtonFocus(ff1, true);
const button = document.createElement("button");
document.body.append(button);
button.focus();
assert_true(document.activeElement == button,
"The button should have focus");
assert_false(navigator.userActivation.isActive,
"Window should not have user activation");
}, "An embedder can focus out of a fenced frame");
promise_test(async () => {
const [actions, frame, fencedframe_element] = await SetupTest();
await AttemptButtonFocus(frame, false);
await ClickOn(fencedframe_element, actions);
await AttemptButtonFocus(frame, true);
}, "Fenced frames can't pull script focus until getting user activation");
promise_test(async t => {
const [actions, frame, fencedframe_element] = await SetupTest();
await ClickOn(fencedframe_element, actions);
await ClickOn(document.body, actions);
await AttemptButtonFocus(frame, true);
// Give the browser time to receive the focus event before attempting
// another focus.
await t.step_timeout(async () => {await AttemptButtonFocus(frame, true);},
500);
}, "Focused fenced frames can move programmatic focus within frame");
promise_test(async () => {
const [actions, frame, fencedframe_element] = await SetupTest();
await ClickOn(fencedframe_element, actions);
await ClickOn(document.body, actions);
// This will pull focus across a frame boundary and consume user activation.
await AttemptButtonFocus(frame, true);
await ClickOn(document.body, actions);
await AttemptButtonFocus(frame, false);
}, "Script focus into a fenced frame consumes user activation");
promise_test(async () => {
const [actions, ff1, ff1_element] = await SetupTest();
const ff2 = attachFencedFrameContext();
const ff2_element = ff2.element;
await ClickOn(ff1_element, actions);
await AttemptButtonFocus(ff1, true);
await AttemptButtonFocus(ff2, false);
}, "Another fenced frame cannot pull focus out of a focused fenced frame");
promise_test(async () => {
const [actions, ff1, ff1_element] = await SetupTest();
await ClickOn(ff1_element, actions);
await AttemptButtonFocus(ff1, true);
await ff1.execute(async () => {
const ff2 = attachFencedFrameContext();
await ff2.execute(async () => {
const button = document.createElement("button");
document.body.append(button);
button.focus();
assert_false(document.activeElement == button,
"The button should not have focus");
assert_false(navigator.userActivation.isActive,
"The fenced frame should not have user activation");
});
});
}, "A fenced frame nested in another fenced frame cannot pull focus");
promise_test(async () => {
const [actions, ff1, ff1_element] = await SetupTest();
await ClickOn(document.body, actions);
const button = document.createElement("button");
document.body.append(button);
button.focus();
assert_equals(document.activeElement, button,
"The button in the main page should have focus.");
await ff1.execute(async () => {
assert_false(navigator.userActivation.isActive,
"The fenced frame should not have user activation.");
window.focus();
});
assert_equals(document.activeElement, button,
"The button in the main page should still have focus.");
}, "A fenced frame cannot pull window.focus() without user activation");
promise_test(async () => {
const [actions, ff1, ff1_element] = await SetupTest();
await ClickOn(ff1_element, actions);
await ClickOn(document.body, actions);
const button = document.createElement("button");
document.body.append(button);
button.focus();
assert_equals(document.activeElement, button,
"The button should have focus.");
await ff1.execute(async () => {
assert_true(navigator.userActivation.isActive,
"The fenced frame should have user activation.");
window.focus();
assert_false(navigator.userActivation.isActive,
"The fenced frame's user activation should be consumed by the focus");
});
assert_equals(document.activeElement, document.body,
"The main page's focus should be pulled away from the button.");
}, "A fenced frame can pull window.focus() after user activation");
promise_test(async () => {
var actions = new test_driver.Actions();
const frame = attachIFrameContext(
{origin: get_host_info().HTTPS_REMOTE_ORIGIN});
const iframe_element =
document.body.getElementsByTagName('iframe')[0];
await frame.execute(async () => {
const button = document.createElement("button");
document.body.append(button);
button.focus();
assert_equals(document.activeElement, button,
"The button in the iframe should have focus.");
}, [true]);
const button = document.createElement("button");
document.body.append(button);
button.focus();
assert_equals(document.activeElement, button,
"The button in the main page should have focus.");
}, "An cross-origin iframe can pull focus back and forth without activation");
</script>
</body>