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
|
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" href="mailto:masonf@chromium.org">
<link rel=help href="https://open-ui.org/components/popover.research.explainer">
<link rel=help href="https://html.spec.whatwg.org/multipage/popover.html">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/popover-utils.js"></script>
<script>
function findPopovers(root) {
let popovers = [];
if (!root)
return popovers;
if (root instanceof Element && root.matches('[popover]'))
popovers.push(root);
popovers.push(...findPopovers(root.shadowRoot));
root.childNodes.forEach(child => {
popovers.push(...findPopovers(child));
})
return popovers;
}
function getPopoverReferences(testId) {
const testRoot = document.querySelector(`#${testId}`);
assert_true(!!testRoot);
return findPopovers(testRoot);
}
</script>
<div id=test1>
<button>Test1 Popover</button>
<my-element>
<template shadowrootmode=open>
<div popover>
<p>This should show, even though it is inside shadow DOM.</p>
</div>
</template>
</my-element>
</div>
<script>
test(function() {
const popover = getPopoverReferences('test1')[0];
popover.showPopover();
assert_true(popover.matches(':popover-open'));
assert_true(isElementVisible(popover));
popover.hidePopover(); // Cleanup
}, "Popovers located inside shadow DOM can still be shown");
</script>
<div id=test4>
<button>Test 4 Popover 1</button>
<div popover>
<p>This should not get hidden when popover2 opens.</p>
<my-element>
<template shadowrootmode=open>
<button id=t4b2>Test 4 Popover 2</button>
<div popover>
<p>This should not hide popover1.</p>
</div>
</template>
</my-element>
</div>
</div>
<script>
promise_test(async function() {
const [popover1,popover2] = getPopoverReferences('test4');
popover1.showPopover();
popover2.showPopover();
// Both 1 and 2 should be open at this point.
assert_true(popover1.matches(':popover-open'), 'popover1 not open');
assert_true(isElementVisible(popover1));
assert_true(popover2.matches(':popover-open'), 'popover2 not open');
assert_true(isElementVisible(popover2));
// This should hide both of them.
popover1.hidePopover();
await waitForRender();
assert_false(popover1.matches(':popover-open'));
assert_false(isElementVisible(popover1));
assert_false(popover2.matches(':popover-open'));
assert_false(isElementVisible(popover2));
}, "The popover stack is preserved across shadow-inclusive ancestors");
</script>
<div id=test5>
<template shadowrootmode=open>
<button popovertarget=p1>Test 5 Popover 1</button>
<div popover id=p1>Popover 1
<p>This should not get hidden when popover2 opens.</p>
<button popovertarget=p2>Click</button>
</div>
<div popover id=p2>Popover 2
<p>This should not hide popover1.</p>
</div>
</template>
</div>
<script>
promise_test(async function() {
const [popover1,popover2] = getPopoverReferences('test5');
popover1.showPopover();
popover1.querySelector('button').click(); // Use invoker to keep 2 visible
// Both 1 and 2 should be open at this point.
assert_true(popover1.matches(':popover-open'), 'popover1 not open');
assert_true(isElementVisible(popover1));
assert_true(popover2.matches(':popover-open'), 'popover2 not open');
assert_true(isElementVisible(popover2));
// This should hide both of them.
popover1.hidePopover();
await waitForRender();
assert_false(popover1.matches(':popover-open'));
assert_false(isElementVisible(popover1));
assert_false(popover2.matches(':popover-open'));
assert_false(isElementVisible(popover2));
}, "Popover ancestor relationships are within a root, not within the document");
</script>
|
