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
|
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" href="mailto:wpt@keithcirkel.co.uk">
<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#dialog-light-dismiss">
<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="../../popovers/resources/popover-utils.js"></script>
<button id="outside">Outside</button>
<dialog id=outer closedby="closerequest">
<dialog id=inner>
</dialog>
</dialog>
<script>
function awaitEvent(el, type, signal) {
const {promise, resolve} = Promise.withResolvers();
el.addEventListener(type, resolve, { once: true, signal });
return promise
}
promise_test(async (t) => {
inner.setAttribute('closedby', 'none');
outer.show();
// Need to ensure that CloseWatcher does not collapse
// both of these shows into a single CloseWatcher group.
await test_driver.bless();
inner.show();
assert_true(inner.open, "The inner dialog is open");
assert_true(outer.open, "The outer dialog is open");
let cancelFired = false;
inner.addEventListener('cancel', () => cancelFired = true, t.get_signal());
outer.addEventListener('cancel', () => cancelFired = true, t.get_signal());
const ESC = '\uE00C';
await test_driver.send_keys(document.documentElement,ESC);
assert_false(cancelFired, "The cancel event was not fired");
assert_true(inner.open, "The inner dialog is still open");
assert_true(outer.open, "The outer dialog is still open");
},'With an inner closedby=none, the outer & inner dialogs stays open when Esc is pressed');
promise_test(async (t) => {
inner.setAttribute('closedby', 'none');
outer.show();
// Need to ensure that CloseWatcher does not collapse
// both of these shows into a single CloseWatcher group.
await test_driver.bless();
inner.show();
assert_true(inner.open, "The inner dialog is open");
assert_true(outer.open, "The outer dialog is open");
let cancelFired = false;
inner.addEventListener('cancel', () => cancelFired = true, t.get_signal());
outer.addEventListener('cancel', () => cancelFired = true, t.get_signal());
// Try clicking outside
await clickOn(outside);
assert_false(cancelFired, "The cancel event was not fired");
assert_true(inner.open, "The inner dialog is open");
assert_true(outer.open, "The outer dialog is open");
},'With an inner closedby=none, the outer & inner dialogs stays open when clicked outside');
promise_test(async (t) => {
inner.setAttribute('closedby', 'any');
outer.show();
// Need to ensure that CloseWatcher does not collapse
// both of these shows into a single CloseWatcher group.
await test_driver.bless();
inner.show();
assert_true(inner.open, "The inner dialog is open");
assert_true(outer.open, "The outer dialog is open");
let innerCancelled = false;
let outerCancelled = false;
inner.addEventListener('cancel', () => innerCancelled = true, t.get_signal());
outer.addEventListener('cancel', () => outerCancelled = true, t.get_signal());
let innerClosed = awaitEvent(inner, 'close', t.get_signal());
// Try clicking outside
const ESC = '\uE00C';
await test_driver.send_keys(document.documentElement,ESC);
await innerClosed;
assert_false(outerCancelled, "The outer cancel event was not fired");
assert_true(innerCancelled, "The inner cancel event was fired");
assert_false(inner.open, "The inner dialog is NOT open");
assert_true(outer.open, "The outer dialog is open");
},'With an inner closedby=any, the outer dialog stays open but the inner dialogs should close, when Esc is pressed');
promise_test(async (t) => {
inner.setAttribute('closedby', 'any');
outer.show();
// Need to ensure that CloseWatcher does not collapse
// both of these shows into a single CloseWatcher group.
await test_driver.bless();
inner.show();
assert_true(inner.open, "The inner dialog is open");
assert_true(outer.open, "The outer dialog is open");
let innerCancelled = false;
let outerCancelled = false;
inner.addEventListener('cancel', () => innerCancelled = true, t.get_signal());
outer.addEventListener('cancel', () => outerCancelled = true, t.get_signal());
let innerClosed = awaitEvent(inner, 'close', t.get_signal());
// Try clicking outside
await clickOn(outside);
await innerClosed;
assert_false(outerCancelled, "The outer cancel event was not fired");
assert_true(innerCancelled, "The inner cancel event was fired");
assert_false(inner.open, "The inner dialog is NOT open");
assert_true(outer.open, "The outer dialog is open");
},'With an inner closedby=any, the outer dialog stays open but the inner dialogs should close, when clicked outside');
</script>
|
