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
|
<!DOCTYPE html>
<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:dizhangg@chromium.org>
<link rel=help href=https://open-ui.org/components/menu.explainer>
<menubar>
<menuitem id=btn commandfor="list" command="toggle-popover">Open</menuitem>
</menubar>
<menulist id="list">
<menuitem id="A1">Command A1</menuitem>
<menuitem id="A2">Command A2</menuitem>
</menulist>
<menubar id="bar">
<menuitem id="B1">Command B1</menuitem>
<menuitem id="B2">Command B2</menuitem>
</menubar>
<script>
const Enter = '\uE007';
const ArrowLeft = '\uE012';
const ArrowUp = '\uE013';
const ArrowRight = '\uE014';
const ArrowDown = '\uE015';
promise_test(async (t) => {
await test_driver.click(btn);
assert_equals(document.activeElement, btn);
await test_driver.send_keys(document.activeElement, Enter);
assert_equals(document.activeElement, btn, 'btn invoked menulist, but focus is still on btn.');
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A1, 'arrow down moves focus into menulist.');
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A2, 'arrow down changes to next menuitem.');
await test_driver.send_keys(document.activeElement, ArrowUp);
assert_equals(document.activeElement, A1, 'arrow up changes to previous menuitem.');
await test_driver.send_keys(document.activeElement, ArrowUp);
assert_equals(document.activeElement, A1, 'arrow keys do not loop.');
list.hidePopover();
await test_driver.click(btn);
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A1, 'arrow down moves focus into menulist.');
await test_driver.send_keys(document.activeElement, ArrowLeft);
assert_equals(document.activeElement, btn, 'arrow left close the menulist and focus on invoker.');
await test_driver.click(btn);
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A1, 'arrow down moves focus into menulist.');
await test_driver.send_keys(document.activeElement, ArrowRight);
assert_equals(document.activeElement, btn, 'arrow right close the menulist and focus on invoker.');
}, 'Should use arrow keys to move between menuitems in menulist.');
promise_test(async (t) => {
list.style.display = 'block';
await test_driver.click(btn);
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A1, 'arrow down moves focus into menulist.');
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A2, 'arrow down changes to next menuitem.');
await test_driver.send_keys(document.activeElement, ArrowUp);
assert_equals(document.activeElement, A1, 'arrow up changes to previous menuitem.');
await test_driver.send_keys(document.activeElement, ArrowLeft);
assert_equals(document.activeElement, btn, 'arrow left moves focus from menulist to invoker.');
list.style.display = '';
}, 'Should use arrow keys to move between menuitems in menulist with display block.');
promise_test(async (t) => {
await test_driver.click(B1);
assert_equals(document.activeElement, B1);
await test_driver.send_keys(document.activeElement, ArrowUp);
assert_equals(document.activeElement, B1, 'arrow up does not change current focused element.');
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, B1, 'arrow down does not change current focused element.');
await test_driver.send_keys(document.activeElement, ArrowRight);
assert_equals(document.activeElement, B2, 'arrow right changes to next menuitem.');
await test_driver.send_keys(document.activeElement, ArrowLeft);
assert_equals(document.activeElement, B1, 'arrow left changes to previous menuitem.');
await test_driver.send_keys(document.activeElement, ArrowLeft);
assert_equals(document.activeElement, B1, 'arrow keys do not loop.');
}, 'Should use arrow keys to move between menuitems in menubar.');
</script>
|
