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
|
<!DOCTYPE html>
<meta charset="utf-8" />
<title>Popover light dismiss behavior for hints</title>
<meta name="timeout" content="long">
<link rel="author" href="mailto:masonf@chromium.org">
<link rel=help href="https://open-ui.org/components/popover-hint.research.explainer">
<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="resources/popover-utils.js"></script>
<div id=outside></div>
<div popover id=auto1>auto 1
<div popover id=auto2>auto 2
<div popover=hint id=innerhint1>inner hint 1
<div popover=hint id=innerhint2>inner hint 2
<div popover id=invalidauto1>Improperly nested auto 1</div>
</div>
</div>
</div>
</div>
<div popover=hint id=hint1>hint 1
<div popover=hint id=hint2>hint 2
<div popover id=invalidauto2>Improperly nested auto 2</div>
</div>
</div>
<div popover=manual id=manual1>Manual</div>
<style>
[popover] {right:auto;bottom:auto;}
#auto1 {left:100px; top:100px;}
#auto2 {left:100px; top:200px;}
#innerhint1 {left:100px; top:300px;}
#innerhint2 {left:100px; top:400px;}
#invalidauto1 {left:100px; top:500px;}
#hint1 {left:200px; top:100px;}
#hint2 {left:200px; top:200px;}
#invalidauto1 {left:200px; top:400px;}
#manual1 {left:300px; top:100px;}
#outside {width:25px;height:25px}
</style>
<script>
const popovers = [
document.querySelector('#auto1'),
document.querySelector('#auto2'),
document.querySelector('#innerhint1'),
document.querySelector('#innerhint2'),
document.querySelector('#hint1'),
document.querySelector('#hint2'),
document.querySelector('#manual1'),
];
function assertState(expectedState,description) {
description = description || 'Error';
const n = popovers.length;
assert_equals(expectedState.length,n,'Invalid');
for(let i=0;i<n;++i) {
assert_equals(popovers[i].matches(':popover-open'),expectedState[i],`${description}, index ${i} (${popovers[i].id})`);
}
}
function openall(t) {
// All popovers can be open at once, if shown in order:
popovers.forEach((p) => p.hidePopover());
popovers.forEach((p) => p.showPopover());
assertState(Array(popovers.length).fill(true),'All popovers should be able to be open at once');
t.add_cleanup(() => popovers.forEach((p) => p.hidePopover()));
}
function nvals(n,val) {
return new Array(n).fill(val);
}
for(let i=0;i<(popovers.length-1);++i) {
promise_test(async (t) => {
openall(t);
await clickOn(popovers[i]);
let expectedState = [...nvals(i+1,true),...nvals(popovers.length-i-2,false),true];
assertState(expectedState);
},`Mixed auto/hint light dismiss behavior, click on ${popovers[i].id}`);
}
promise_test(async (t) => {
openall(t);
await clickOn(outside);
assertState([false,false,false,false,false,false,true]);
},'Clicking outside closes all');
promise_test(async (t) => {
openall(t);
invalidauto1.showPopover();
assertState([true,true,false,false,false,false,true],'auto inside hint ignores the hints and gets nested within auto2');
assert_true(invalidauto1.matches(':popover-open'),'the inner nested auto should be open');
invalidauto1.hidePopover();
assertState([true,true,false,false,false,false,true]);
assert_false(invalidauto1.matches(':popover-open'));
},'Auto cannot be nested inside hint (invalidauto1)');
promise_test(async (t) => {
openall(t);
invalidauto2.showPopover();
assertState([false,false,false,false,false,false,true],'auto inside hint works as an independent (non-nested) auto');
assert_true(invalidauto2.matches(':popover-open'),'the inner nested auto should be open');
invalidauto2.hidePopover();
assertState([false,false,false,false,false,false,true]);
assert_false(invalidauto2.matches(':popover-open'));
},'Auto cannot be nested inside hint (invalidauto2)');
</script>
|
