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
|
<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=author href="mailto:falken@chromium.org">
<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=242848">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<iframe height=400 width=600 id="main-iframe">
<frameset rows="*" cols="50,50">
<frame src="resources/inert-focus-in-frames-frame1.html">
<frame src="resources/inert-focus-in-frames-frame2.html">
</frameset>
</iframe>
<script>
let framesLoadedResolver = null;
const framesLoadedPromise = new Promise(resolve => framesLoadedResolver = resolve);
framesLoaded = 0;
numFrames = 4;
function frameLoaded() {
framesLoaded++;
if (framesLoaded == numFrames)
framesLoadedResolver();
}
var mainIframe = document.getElementById('main-iframe');
mainIframe.contentDocument.write(mainIframe.textContent);
mainIframe.contentDocument.close();
mainIframe.contentWindow.frames[1].window.onload = frameLoaded;
window.onload = frameLoaded;
promise_test(async () => {
await framesLoadedPromise;
function testFocus(element, expectFocus) {
let focusedElement = null;
element.addEventListener('focus', function() { focusedElement = element; }, false);
element.focus();
if (expectFocus) {
assert_equals(focusedElement, element, element.id);
} else {
assert_not_equals(focusedElement, element, element.id);
}
}
// Opening a modal dialog in frame1. It blocks other nodes in its document.
const frame1 = mainIframe.contentWindow.frames[0].document;
frame1.querySelector('dialog').showModal();
testFocus(frame1.querySelector('.target'), false);
const iframe = frame1.querySelector('#iframe1').contentDocument;
testFocus(iframe.querySelector('.target'), true);
// Even a modal dialog in the iframe is blocked by the modal dialog in the parent frame1.
iframe.querySelector('dialog').showModal();
testFocus(iframe.querySelector('button'), false);
// An iframe within a modal dialog can still be focused.
var dialogIframe = frame1.querySelector('#iframe-in-dialog').contentDocument;
testFocus(dialogIframe.querySelector('.target'), true);
// A modal dialog does not block nodes in a sibling frame.
var frame2 = mainIframe.contentWindow.frames[1].document;
testFocus(frame2.querySelector('.target'), true);
// Closing the dialog in frame1. The modal dialog in the iframe does not block nodes in its parent.
frame1.querySelector('dialog').close();
testFocus(iframe.querySelector('.target'), false);
testFocus(frame1.querySelector('.target'), true);
}, 'Tests inert node focusing across frames and iframes.');
</script>
|
