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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel=author href=mailto:dizhangg@chromium.org>
<link rel=help href=https://open-ui.org/components/menu.explainer>
<menubar>
<menuitem id="menubaritem">More commands</menuitem>
<menuitem>Command 2</menuitem>
<menuitem>Command 3</menuitem>
</menubar>
<menulist id="more">
<menuitem id="menulistitem" disabled>Command 1</menuitem>
<menuitem>Command 2</menuitem>
</menulist>
<menulist>
<fieldset checkable>
<menuitem id="checkable-menuitem">Show menu</menuitem>
</fieldset>
</menulist>
<script>
const menubar = document.querySelector("menubar");
const menubaritem = document.getElementById("menubaritem");
const menulist = document.querySelector("menulist");
const menulistitem = document.getElementById("menulistitem");
const checkableMenuitem = document.getElementById("checkable-menuitem");
test(() => {
assert_equals(menubar.constructor, HTMLMenuBarElement);
assert_equals(menubaritem.constructor, HTMLMenuItemElement);
assert_false(menubaritem.disabled);
menubaritem.disabled = true;
assert_true(menubaritem.disabled);
assert_equals(menulist.constructor, HTMLMenuListElement);
assert_equals(menulistitem.constructor, HTMLMenuItemElement);
assert_true(menulistitem.disabled);
menulistitem.disabled = false;
assert_false(menulistitem.disabled);
}, "Menu elements are HTML elements.");
test(() => {
menubaritem.setAttribute("command", "toggle-popover");
menubaritem.setAttribute("commandfor", "more");
menubaritem.disabled = true;
menubaritem.click();
assert_false(menulist.matches(':popover-open'),
'The menulist should not open because the menuitem is disabled.');
menubaritem.disabled = false;
menubaritem.click();
assert_true(menulist.matches(':popover-open'),
'toggle-popover opens the menulist');
menubaritem.click();
assert_false(menulist.matches(':popover-open'),
"toggle-popover closes the menulist");
menubaritem.setAttribute("command", "show-popover");
menubaritem.click();
assert_true(menulist.matches(':popover-open'),
"show-popover shows the menulist");
menubaritem.setAttribute("command", "hide-popover");
menubaritem.click();
assert_false(menulist.matches(':popover-open'),
"hide-popover hides the menulist");
}, "Menuitem with toggle-popover, show-popover, hide-popover commands can invoke menulist popover.");
test(() => {
menubaritem.setAttribute("command", "toggle-menu");
menubaritem.setAttribute("commandfor", "more");
menubaritem.disabled = true;
menubaritem.click();
assert_false(menulist.matches(':popover-open'),
'The menulist should not open because the menuitem is disabled.');
menubaritem.disabled = false;
menubaritem.click();
assert_true(menulist.matches(':popover-open'),
'toggle-menu opens the menulist');
menubaritem.click();
assert_false(menulist.matches(':popover-open'),
"toggle-menu closes the menulist");
menubaritem.setAttribute("command", "show-menu");
menubaritem.click();
assert_true(menulist.matches(':popover-open'),
"show-menu opens the menulist");
menubaritem.setAttribute("command", "hide-menu");
menubaritem.click();
assert_false(menulist.matches(':popover-open'),
"hide-menu hides the menulist");
}, "Menuitem with toggle-menu, show-menu, hide-menu commands can invoke menulist popover.");
test(() => {
menubaritem.command = "show-menu";
menubaritem.commandForElement = menulist;
menubaritem.click();
assert_true(menulist.matches(':popover-open'),
'show-menu opens the menulist.');
menulist.hidePopover();
assert_false(menulist.matches(':popover-open'),
'The global hidePopover() method hides the menulist');
}, "hidePopover() on menulist closes the popover.");
test(() => {
menubaritem.setAttribute("command", "toggle-menu");
menubaritem.setAttribute("commandfor", "dne");
menubaritem.click();
assert_false(menulist.matches(':popover-open'),
'The menulist should not open because the menuitem commandfor is invalid');
menubaritem.setAttribute("command", "toggle-menu-dne");
menubaritem.setAttribute("commandfor", "more");
menubaritem.click();
assert_false(menulist.matches(':popover-open'),
'The menulist should not open because the menuitem command is invalid');
}, "Menuitem with invalid command/commandfor cannot invoke menulist popover.");
test(() => {
checkableMenuitem.command = "toggle-menu";
checkableMenuitem.commandForElement = menulist;
checkableMenuitem.click();
assert_true(checkableMenuitem.checked,
"checkable menu item becomes checked");
assert_true(menulist.matches(":popover-open"),
"menulist matches :popover-open");
checkableMenuitem.click();
assert_false(checkableMenuitem.checked,
"checkable menu item is no longer checked");
assert_false(menulist.matches(":popover-open"),
"menulist no longer matches :popover-open");
}, "Checkable menuitems can still invoke menulist popovers");
</script>
|
