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
|
<!DOCTYPE html>
<html lang="en">
<title>HTMLSelectMenuElement Test: part structure</title>
<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<selectmenu id="selectMenu0">
<popup slot="listbox" part="listbox">
<option>one</option>
<option id="selectMenu0-child2">two</option>
<div part="option" id="selectMenu0-child3">three</div>
</popup>
<option id="selectMenu0-child4">four</option>
<div part="option" id="selectMenu0-child5">five</div>
</selectmenu>
<selectmenu id="selectMenu1">
<popup slot="listbox" part="listbox" id="selectMenu1-popup">
<div part="button" id="selectMenu1-button">
Custom button
</div>
<option>one</option>
<option id="selectMenu1-child2">two</option>
</popup>
</selectmenu>
<selectmenu id="selectMenu2">
<div slot="button" part="button" id="selectMenu2-button">
Custom button
<popup part="listbox" id="selectMenu2-popup">
<option>one</option>
<option id="selectMenu2-child2">two</option>
</popup>
</div>
<option>three</option>
<div>
This is some text.
<option id="selectMenu2-child4">four</option>
More text.
</div>
</selectmenu>
<script>
function clickOn(element) {
const actions = new test_driver.Actions();
return actions.pointerMove(0, 0, {origin: element})
.pointerDown({button: actions.ButtonType.LEFT})
.pointerUp({button: actions.ButtonType.LEFT})
.send();
}
promise_test(async () => {
const selectMenu0 = document.getElementById("selectMenu0");
const selectMenu0Child2 = document.getElementById("selectMenu0-child2");
const selectMenu0Child3 = document.getElementById("selectMenu0-child3");
const selectMenu0Child4 = document.getElementById("selectMenu0-child4");
const selectMenu0Child5 = document.getElementById("selectMenu0-child5");
assert_equals(selectMenu0.value, "one");
await clickOn(selectMenu0);
await clickOn(selectMenu0Child2);
assert_equals(selectMenu0.value, "two");
await clickOn(selectMenu0);
await clickOn(selectMenu0Child3);
assert_equals(selectMenu0.value, "three");
await clickOn(selectMenu0);
selectMenu0Child4.click();
assert_equals(selectMenu0.value, "three", "Clicking an option outside of the popup should not change the value");
await clickOn(selectMenu0);
selectMenu0Child5.click();
assert_equals(selectMenu0.value, "three", "Clicking an option part outside of the popup should not change the value");
}, "To receive option part controller code, an element labeled as an option must be a descendant of the listbox part in a flat tree traversal");
promise_test(async () => {
const selectMenu1 = document.getElementById("selectMenu1");
const selectMenu1Popup = document.getElementById("selectMenu1-popup");
const selectMenu1Button = document.getElementById("selectMenu1-button");
const selectMenu1Child2 = document.getElementById("selectMenu1-child2");
assert_false(selectMenu1Popup.open);
selectMenu1Button.click();
assert_false(selectMenu1Popup.open, "Clicking a button part that is a descendant of the listbox part should have no effect");
assert_equals(selectMenu1.value, "one");
await clickOn(selectMenu1);
assert_true(selectMenu1Popup.open);
await clickOn(selectMenu1Child2);
assert_equals(selectMenu1.value, "two", "Clicking an <option> should change the value");
}, "To receive button part controller code, an element labeled as a button must not be a descendant of the listbox part in a flat tree traversal");
promise_test(async () => {
const selectMenu2 = document.getElementById("selectMenu2");
const selectMenu2Popup = document.getElementById("selectMenu2-popup");
const selectMenu2Button = document.getElementById("selectMenu2-button");
const selectMenu2Child2 = document.getElementById("selectMenu2-child2");
const selectMenu2Child4 = document.getElementById("selectMenu2-child4");
assert_false(selectMenu2Popup.open);
await clickOn(selectMenu2Button);
assert_false(selectMenu2Popup.open, "Clicking a button part should not show an invalid listbox part");
assert_equals(selectMenu2.value, "three");
await clickOn(selectMenu2Button);
await clickOn(selectMenu2Child4);
assert_equals(selectMenu2.value, "four", "Clicking an <option> that is a descendant of a valid listbox part should update the value");
}, "To receive listbox part controller code, an element labeled as a listbox must not be a descendant of the button part in a flat tree traversal");
</script>
|
