1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>Tabbing with inert iframe</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#inert">
<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation">
<meta assert="assert" content="Tabbing can't enter an inert iframe from the outside, but can move within it and can leave it if focus is already there.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<div id="before" tabindex="0">before</div>
<div id="inert" inert>
<iframe id="iframe"></iframe>
</div>
<div id="after" tabindex="0">after</a>
<script>
const tabKey = "\uE004";
const before = document.getElementById("before");
const inert = document.getElementById("inert");
const after = document.getElementById("after");
const iframe = document.getElementById("iframe");
let iframeDoc;
let start;
let end;
promise_setup(async () => {
await new Promise(resolve => {
iframe.addEventListener("load", resolve, { once: true });
iframe.srcdoc = `
<div id="start" tabindex="0">target</div>
<div id="end" tabindex="0">target</div>
`;
});
iframeDoc = iframe.contentDocument;
start = iframeDoc.getElementById("start");
end = iframeDoc.getElementById("end");
});
promise_test(async function() {
before.focus();
assert_equals(document.activeElement, before, "#before got outer focus");
assert_false(iframeDoc.hasFocus(), "iframeDoc doesn't have focus");
await test_driver.send_keys(document.activeElement, tabKey);
assert_equals(document.activeElement, after, "#after got outer focus");
assert_false(iframeDoc.hasFocus(), "iframeDoc still doesn't have focus");
}, "Sequential navigation can't enter an inert iframe");
promise_test(async function() {
start.focus();
assert_equals(document.activeElement, iframe, "#iframe got outer focus");
assert_equals(iframeDoc.activeElement, start, "#start got inner focus");
assert_true(iframeDoc.hasFocus(), "iframeDoc has focus");
await test_driver.send_keys(iframeDoc.activeElement, tabKey);
assert_equals(document.activeElement, iframe, "#iframe still has outer focus");
assert_equals(iframeDoc.activeElement, end, "#end got inner focus");
assert_true(iframeDoc.hasFocus(), "iframeDoc still has focus");
}, "Sequential navigation can move within an inert iframe");
promise_test(async function() {
end.focus();
assert_equals(document.activeElement, iframe, "#iframe got outer focus");
assert_equals(iframeDoc.activeElement, end, "#end got inner focus");
assert_true(iframeDoc.hasFocus(), "iframeDoc has focus");
await test_driver.send_keys(iframeDoc.activeElement, tabKey);
assert_equals(document.activeElement, after, "#after got outer focus");
assert_false(iframeDoc.hasFocus(), "iframeDoc doesn't have focus");
}, "Sequential navigation can leave an inert iframe");
// Test again without inertness.
promise_test(async function() {
inert.inert = false;
before.focus();
assert_equals(document.activeElement, before, "#before got outer focus");
assert_false(iframeDoc.hasFocus(), "iframeDoc doesn't have focus");
await test_driver.send_keys(document.activeElement, tabKey);
assert_equals(document.activeElement, iframe, "#iframe got outer focus");
assert_true(iframeDoc.hasFocus(), "iframeDoc has focus");
// The document element is also focusable in Firefox.
if (iframeDoc.activeElement === iframeDoc.documentElement) {
await test_driver.send_keys(document.activeElement, tabKey);
assert_equals(document.activeElement, iframe, "#iframe got outer focus");
assert_true(iframeDoc.hasFocus(), "iframeDoc has focus");
}
assert_equals(iframeDoc.activeElement, start, "#start got inner focus");
}, "Sequential navigation can enter a no longer inert iframe");
promise_test(async function() {
inert.inert = false;
start.focus();
assert_equals(document.activeElement, iframe, "#iframe got outer focus");
assert_equals(iframeDoc.activeElement, start, "#start got inner focus");
assert_true(iframeDoc.hasFocus(), "iframeDoc has focus");
await test_driver.send_keys(iframeDoc.activeElement, tabKey);
assert_equals(document.activeElement, iframe, "#iframe still has outer focus");
assert_equals(iframeDoc.activeElement, end, "#end got inner focus");
assert_true(iframeDoc.hasFocus(), "iframeDoc still has focus");
}, "Sequential navigation can move within a no longer inert iframe");
promise_test(async function() {
inert.inert = false;
end.focus();
assert_equals(document.activeElement, iframe, "#iframe got outer focus");
assert_equals(iframeDoc.activeElement, end, "#end got inner focus");
assert_true(iframeDoc.hasFocus(), "iframeDoc has focus");
await test_driver.send_keys(iframeDoc.activeElement, tabKey);
assert_equals(document.activeElement, after, "#after got outer focus");
assert_false(iframeDoc.hasFocus(), "iframeDoc doesn't have focus");
}, "Sequential navigation can leave a no longer inert iframe");
</script>
|
