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
|
<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="author" href="mailto:masonf@chromium.org">
<link rel=help href="https://github.com/whatwg/html/pull/10770">
<link rel=help href="https://issues.chromium.org/issues/379241451">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/popover-utils.js"></script>
<button id=case1 popovertarget=popover>Button
<div popover id=popover>
<span class=descendant>Popover</span>
</div>
</button>
<button id=case2 popovertarget=case2 popover>Self link</button>
<button popovertarget=case3>Button
<div popover id=case3>
<span class=descendant>Popover</span>
</div>
</button>
<div id=case4>
<template shadowrootmode=open>
<button popovertarget=case4>Button
<div popover id=case4>
<span class=descendant>Popover</span>
</div>
</button>
</template>
</div>
<script>
promise_test(async t => {
const invoker = document.querySelector('#case1');
const popover = invoker.querySelector('[popover]');
const descendant = invoker.querySelector('.descendant');
assert_false(popover.matches(':popover-open'));
invoker.click();
assert_true(popover.matches(':popover-open'));
popover.click();
assert_true(popover.matches(':popover-open'),'Should still be open');
descendant.click();
assert_true(popover.matches(':popover-open'),'Should still be open, even for descendant');
popover.hidePopover();
},'clicking a popover nested inside a button should not re-invoke the popover');
promise_test(async t => {
const element = document.querySelector('#case2');
assert_false(element.matches(':popover-open'));
element.showPopover();
assert_true(element.matches(':popover-open'));
element.click(); // This is a click on the button, which is also the popover
assert_false(element.matches(':popover-open'));
element.hidePopover();
},'corner case: invoker that is also a popover');
promise_test(async t => {
const popover = document.querySelector('#case3');
const outerInvoker = popover.parentElement;
const descendant = popover.querySelector('.descendant');
const innerInvoker = popover.appendChild(document.createElement('button'));
innerInvoker.popoverTargetElement = popover;
assert_false(popover.matches(':popover-open'));
outerInvoker.click();
assert_true(popover.matches(':popover-open'));
descendant.click();
assert_true(popover.matches(':popover-open'),'descendant doesn\'t close popover');
innerInvoker.click();
assert_false(popover.matches(':popover-open'),'inner invoker still works');
},'invoker inside popover still works, even with weird nesting');
promise_test(async t => {
const popover = document.querySelector('#case4').shadowRoot.querySelector('[popover]');
const invoker = popover.parentElement;
const descendant = popover.querySelector('.descendant');
assert_false(popover.matches(':popover-open'));
invoker.click();
assert_true(popover.matches(':popover-open'));
descendant.click();
assert_true(popover.matches(':popover-open'),'descendant doesn\'t close popover');
},'invoker inside popover still works, even inside of a shadowroot');
</script>
|
