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
|
<!DOCTYPE html>
<meta name="timeout" content="long">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<link rel=author href=mailto:dom@chromium.org>
<link rel=help href=https://open-ui.org/components/menu.explainer>
<menubar>
<menuitem id=menubarmenuitem commandfor=mainmenu command=toggle-menu>Open first menu</menuitem>
</menubar>
<menulist id=mainmenu>
<menuitem id=mainmenuitem command=toggle-menu commandfor=submenu>Toggle menu</menuitem>
<menuitem id=mainmenuitem2 command=toggle-popover commandfor=popover>Show popover</menuitem>
</menulist>
<menulist id=submenu>
<menuitem>First item!</menuitem>
</menulist>
<div popover id=popover></div>
<button popovertarget=popoverwithmenu>Open popover with menu</button>
<div popover id=popoverwithmenu>
<button popovertarget=menuinpopover>Open menu in the popover</button>
<menulist id=menuinpopover>
<menuitem id=menuinpopoveritem1>First item</menuitem>
<menuitem id=menuinpopoveritem2 command=toggle-menu commandfor=menuinpopover2>Toggle menu 2</menuitem>
</menulist>
<menulist id=menuinpopover2>
<menuitem>Submenu item</menuitem>
</menulist>
</div>
<script>
promise_test(async () => {
assert_false(mainmenu.matches(":popover-open"), "mainmenu popover starts closed");
await test_driver.click(menubarmenuitem);
assert_true(mainmenu.matches(":popover-open"), "mainmenu opens");
assert_false(submenu.matches(":popover-open"), "submenu popover starts closed");
await test_driver.click(mainmenuitem);
assert_true(submenu.matches(":popover-open"), "submenu opens");
// Close the submenu.
await test_driver.click(mainmenuitem);
assert_false(submenu.matches(":popover-open"), "submenu popover gets closed");
assert_true(mainmenu.matches(":popover-open"), "mainmenu still open");
// Close the mainmenu.
await test_driver.click(menubarmenuitem);
assert_false(mainmenu.matches(":popover-open"), "mainmenu gets closed");
}, 'User menuitem activation works with the toggle-menu command');
promise_test(async () => {
assert_false(mainmenu.matches(":popover-open"), "mainmenu popover starts closed");
await test_driver.click(menubarmenuitem);
assert_true(mainmenu.matches(":popover-open"), "mainmenu popover opens");
assert_false(popover.matches(":popover-open"), "div popover starts closed");
await test_driver.click(mainmenuitem2);
assert_true(popover.matches(":popover-open"), "div popover opens");
// Close the popover.
await test_driver.click(mainmenuitem2);
assert_false(popover.matches(":popover-open"), "div popover gets closed");
assert_true(mainmenu.matches(":popover-open"), "mainmenu still open");
}, 'User menuitem activation works with show-popover command');
promise_test(async (t) => {
assert_false(popoverwithmenu.matches(":popover-open"),
"popover with menu starts closed");
// Open the popover that hosts two menulists.
await test_driver.click(
document.querySelector("button[popovertarget=popoverwithmenu]"));
assert_true(popoverwithmenu.matches(":popover-open"),
"popover with menu opens");
assert_false(menuinpopover.matches(":popover-open"),
"menu in popover starts closed");
// Open the first menu in the popover.
await test_driver.click(
document.querySelector('button[popovertarget=menuinpopover]'));
assert_true(menuinpopover.matches(":popover-open"), "menu in popover opens");
assert_true(popoverwithmenu.matches(":popover-open"),
"outer popover remains open");
assert_false(menuinpopover2.matches(":popover-open"),
"menu 2 in popover starts closed");
// Open the second menu in the popover.
await test_driver.click(menuinpopoveritem2);
assert_true(menuinpopover2.matches(":popover-open"),
"menu 2 in popover opens");
assert_true(popoverwithmenu.matches(":popover-open"),
"outer popover remains open after opening menu 2");
assert_true(menuinpopover.matches(":popover-open"),
"menu in popover remains open");
// Close the second, "sub", menu within the popover by just clicking off of
// it.
await test_driver.click(menuinpopoveritem1);
assert_false(menuinpopover2.matches(":popover-open"),
"menu 2 in popover closes");
assert_true(popoverwithmenu.matches(":popover-open"),
"outer popover remains open after closing menu 2");
assert_true(menuinpopover.matches(":popover-open"),
"menu in popover remains open");
}, 'Menulist inside a popover works correctly; does not get accidentally ' +
'dismissed by opening submenus');
</script>
|
