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
124
125
126
127
128
129
130
131
|
<!DOCTYPE html>
<meta charset="utf-8" />
<title>Inertness with modal dialogs and iframes</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">
<meta name="assert" content="Checks that a modal dialog marks outer nodes as inert,
but only in its document, not in the parent browsing context,
nor in nested browsing contexts.">
<div id="log"></div>
<div id="wrapper">
(main document: outer text)
<iframe id="outerIframe" srcdoc="
<div id='wrapper'>
(outer iframe: outer text)
<dialog id='dialog' style='display: block'>
(outer iframe: dialog)
</dialog>
</div>
"></iframe>
<dialog id="dialog" style="display: block">
(main document: dialog)
<iframe id="innerIframe" srcdoc="
<div id='wrapper'>
(inner iframe: outer text)
<dialog id='dialog' style='display: block'>
(inner iframe: dialog)
</dialog>
</div>
"></iframe>
</dialog>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
const innerIframeWindow = innerIframe.contentWindow;
const outerIframeWindow = outerIframe.contentWindow;
promise_setup(async () => {
for (let global of [innerIframeWindow, outerIframeWindow]) {
if (global.location.href === "about:blank" ||
global.document.readyState !== "complete") {
await new Promise(resolve => {
global.frameElement.addEventListener("load", resolve, {once: true});
});
}
}
});
add_completion_callback(() => {
for (let global of [window, innerIframeWindow, outerIframeWindow]) {
global.getSelection().removeAllRanges();
}
});
function checkSelection(global, expectedText) {
const selection = global.getSelection();
selection.selectAllChildren(global.wrapper);
// Remove whitespace between parentheses since it varies among browsers,
// but that's not relevant to this test.
const actualText = selection.toString().replace(/\)\s*\(/g, ")(").trim();
assert_equals(actualText, expectedText);
}
function showModals(test, globals) {
for (let global of globals) {
global.dialog.showModal();
test.add_cleanup(() => { global.dialog.close(); });
}
}
promise_test(async function() {
checkSelection(window, "(main document: outer text)(main document: dialog)");
checkSelection(innerIframeWindow, "(inner iframe: outer text)(inner iframe: dialog)");
checkSelection(outerIframeWindow, "(outer iframe: outer text)(outer iframe: dialog)");
}, "Initially, no node is inert");
promise_test(async function() {
showModals(this, [outerIframeWindow]);
checkSelection(window, "(main document: outer text)(main document: dialog)");
checkSelection(innerIframeWindow, "(inner iframe: outer text)(inner iframe: dialog)");
checkSelection(outerIframeWindow, "(outer iframe: dialog)");
}, "Modal dialog in the outer iframe marks outer nodes in that iframe as inert.");
promise_test(async function() {
showModals(this, [innerIframeWindow]);
checkSelection(window, "(main document: outer text)(main document: dialog)");
checkSelection(innerIframeWindow, "(inner iframe: dialog)");
checkSelection(outerIframeWindow, "(outer iframe: outer text)(outer iframe: dialog)");
}, "Modal dialog in the inner iframe marks outer nodes in that iframe as inert.");
promise_test(async function() {
showModals(this, [innerIframeWindow, outerIframeWindow]);
checkSelection(window, "(main document: outer text)(main document: dialog)");
checkSelection(innerIframeWindow, "(inner iframe: dialog)");
checkSelection(outerIframeWindow, "(outer iframe: dialog)");
}, "Modal dialogs in both iframes mark outer nodes in these iframes as inert.");
promise_test(async function() {
showModals(this, [window]);
checkSelection(window, "(main document: dialog)");
checkSelection(innerIframeWindow, "(inner iframe: outer text)(inner iframe: dialog)");
checkSelection(outerIframeWindow, "(outer iframe: outer text)(outer iframe: dialog)");
}, "Modal dialog in the main document marks outer nodes as inert. Contents of the outer iframe aren't marked as inert.");
promise_test(async function() {
showModals(this, [innerIframeWindow, window]);
checkSelection(window, "(main document: dialog)");
checkSelection(innerIframeWindow, "(inner iframe: dialog)");
checkSelection(outerIframeWindow, "(outer iframe: outer text)(outer iframe: dialog)");
}, "Modal dialogs in the main document and inner iframe mark outer nodes as inert. Contents of the outer iframe aren't marked as inert.");
promise_test(async function() {
showModals(this, [outerIframeWindow, window]);
checkSelection(window, "(main document: dialog)");
checkSelection(innerIframeWindow, "(inner iframe: outer text)(inner iframe: dialog)");
checkSelection(outerIframeWindow, "(outer iframe: dialog)");
}, "Modal dialogs in the main document and outer iframe mark outer nodes as inert. Contents of the outer iframe aren't marked as inert.");
promise_test(async function() {
showModals(this, [innerIframeWindow, outerIframeWindow, window]);
checkSelection(window, "(main document: dialog)");
checkSelection(innerIframeWindow, "(inner iframe: dialog)");
checkSelection(outerIframeWindow, "(outer iframe: dialog)");
}, "Modal dialogs in the main document and both iframes mark outer nodes as inert. Contents of the outer iframe aren't marked as inert.");
</script>
|
