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
|
<!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>
<!-- Once anchor positioning lands in the spec, the tests in this file can
be re-inserted into popover-shadow-dom.html. -->
<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 id=t2b1>Test 1 Popover 1</button>
<div popover anchor=t2b1 style="top: 200px;">
<p>Popover 1</p>
<button id=t2b2>Test 1 Popover 2</button>
</div>
<my-element>
<template shadowrootmode=open>
<div popover anchor=t2b2 style="top: 400px;">
<p>Hiding this popover will hide *all* open popovers,</p>
<p>because t2b2 doesn't exist in this context.</p>
</div>
</template>
</my-element>
</div>
<script>
test(function() {
const [popover1,popover2] = getPopoverReferences('test1');
popover1.showPopover();
assert_true(popover1.matches(':popover-open'));
assert_true(isElementVisible(popover1));
popover2.showPopover();
assert_false(popover1.matches(':popover-open'), 'popover1 open'); // P1 was closed by P2
assert_false(isElementVisible(popover1), 'popover1 visible');
assert_true(popover2.matches(':popover-open'), 'popover2 open'); // P2 is open
assert_true(isElementVisible(popover2), 'popover2 visible');
popover2.hidePopover(); // Cleanup
}, "anchor references do not cross shadow boundaries");
</script>
<div id=test2>
<my-element>
<template shadowrootmode=open>
<button id=t3b1>Test 2 Popover 1</button>
<div popover anchor=t3b1>
<p>This popover will stay open when popover2 shows.</p>
<slot></slot>
</div>
</template>
<button id=t3b2>Test 2 Popover 2</button>
</my-element>
<div popover anchor=t3b2>Popover 2</div>
</div>
<script>
promise_test(async function() {
const [popover1,popover2] = getPopoverReferences('test2');
popover1.showPopover();
assert_true(popover1.matches(':popover-open'));
assert_true(isElementVisible(popover1));
// Showing popover2 should not close popover1, since it is a flat
// tree ancestor of popover2's anchor button.
popover2.showPopover();
assert_true(popover2.matches(':popover-open'));
assert_true(isElementVisible(popover2));
assert_true(popover1.matches(':popover-open'));
assert_true(isElementVisible(popover1));
popover1.hidePopover();
await waitForRender();
assert_false(popover1.matches(':popover-open'));
assert_false(isElementVisible(popover1));
assert_false(popover2.matches(':popover-open'));
assert_false(isElementVisible(popover2));
}, "anchor references use the flat tree not the DOM tree");
</script>
|
