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
|
<!DOCTYPE html>
<title>HTMLSelectListElement Test: popover</title>
<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>
<selectlist id="selectList0">
<option>one</option>
<option id="selectList0-child2">two</option>
<option>three</option>
<option>four</option>
</selectlist>
<selectlist id="selectList1">
<button type=selectlist class=button>
Custom button
</button>
<listbox>
<option>one</option>
<option class="child2">two</option>
<option class="child3">three</option>
</listbox>
</selectlist>
<selectlist id="selectList2">
<!-- Swap out the listbox part without providing a replacement -->
<div slot="listbox"></div>
</selectlist>
<selectlist id="selectList3">
<div slot="listbox">
<div popover behavior="listbox" id="selectList3-listbox">
<option>one</option>
</div>
</div>
</selectlist>
<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 selectList0 = document.getElementById("selectList0");
const selectList0Child2 = document.getElementById("selectList0-child2");
assert_equals(selectList0.value, "one");
assert_equals(selectList0.open, false);
await clickOn(selectList0);
assert_equals(selectList0.open, true);
await clickOn(selectList0Child2);
assert_equals(selectList0.value, "two");
assert_equals(selectList0.open, false);
await clickOn(selectList0);
assert_equals(selectList0.open, true);
await clickOn(selectList0Child2);
assert_equals(selectList0.open, false);
}, "Opening the popover and clicking an option should change the selectlist's value");
promise_test(async () => {
const selectList1 = document.getElementById("selectList1");
const button = selectList1.querySelector(".button");
const child2 = selectList1.querySelector(".child2");
const child3 = selectList1.querySelector(".child3");
assert_equals(selectList1.value, "one");
assert_equals(selectList1.open, false);
await clickOn(button);
assert_equals(selectList1.open, true);
await clickOn(child2);
assert_equals(selectList1.value, "two", "Clicking an <option> should change the value");
assert_equals(selectList1.open, false);
await clickOn(button);
assert_equals(selectList1.open, true);
await clickOn(child3);
assert_equals(selectList1.value, "three", "Clicking a <div part='option'> should change the value");
assert_equals(selectList1.open, false);
}, "With custom button and popover: opening the popover and clicking an option should change the selectlist's value");
promise_test(async () => {
const selectList2 = document.getElementById("selectList2");
await clickOn(selectList2);
assert_equals(selectList2.value, "");
assert_equals(selectList2.open, false);
}, "Clicking a popover with no listbox part does nothing");
promise_test(async () => {
const selectList3 = document.getElementById("selectList3");
const selectList3Listbox = document.getElementById("selectList3-listbox");
selectList3Listbox.remove();
await clickOn(selectList3);
assert_equals(selectList3.value, "");
assert_equals(selectList3.open, false);
}, "Clicking a popover with a listbox that was removed does nothing");
</script>
|
