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
|
<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://github.com/whatwg/html/issues/10762">
<link rel=help href="https://issues.chromium.org/issues/385300320">
<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>
<script src="/resources/testdriver-actions.js"></script>
<style>
select, ::picker(select) {
appearance: base-select;
}
#s2, #s2 > option {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
box-sizing: border-box;
border-radius: 0;
}
#s2 {
position: absolute;
top: 300px;
left: 300px;
}
#s2::picker(select) {
border: 0;
top: anchor(top);
}
</style>
<select id=s1>
<option class=one>one</option>
<option class=two>two</option>
</select>
<select id=s2>
<option class=one>one</option>
<option class=two>two</option>
</select>
<script>
function assertAppearance() {
const style = getComputedStyle(document.querySelector('select'));
assert_equals(style.appearance, 'base-select',
'appearance:base-select must be supported in order to run this test.');
}
promise_test(async () => {
assertAppearance();
const select = document.getElementById('s1');
const optionOne = select.querySelector('.one');
const optionTwo = select.querySelector('.two');
assert_false(select.matches(':open'),
'select should be closed at the start of the test.');
await (new test_driver.Actions()
.pointerMove(2, 2, {origin: select})
.pointerDown()
.pointerMove(2, 2, {origin: optionOne})
.pointerMove(2, 2, {origin: optionTwo})
.pointerUp())
.send();
assert_false(select.matches(':open'),
'select should be closed after pointerUp() on second option.');
assert_equals(select.value, 'two',
'select.value should be changed to two after releasing the pointer on the second option.');
await (new test_driver.Actions()
.pointerMove(2, 2, {origin: select})
.pointerDown()
.pointerMove(4, 4, {origin: select})
.pointerMove(2, 2, {origin: optionOne})
.pointerUp())
.send();
assert_false(select.matches(':open'),
'select should be closed after pointerUp() on first option.');
assert_equals(select.value, 'one',
'select.value should be changed to one after releasing the pointer on the first option.');
}, 'Clicking the invoker button and dragging to an option should choose that option and close the picker.');
promise_test(async () => {
assertAppearance();
const select = document.getElementById('s2');
const optionOne = select.querySelector('.one');
const optionTwo = select.querySelector('.two');
assert_false(select.matches(':open'),
'select should be closed at the start of the test.');
await (new test_driver.Actions()
.pointerMove(2, 2, {origin: select})
.pointerDown()
.pointerMove(2, 2, {origin: optionOne})
.pointerUp())
.send();
assert_true(select.matches(':open'),
'select should still be open after pointerUp() without moving the pointer.');
await (new test_driver.Actions()
.pointerMove(2, 2, {origin: optionOne})
.pointerDown()
.pointerUp())
.send();
assert_false(select.matches(':open'),
'select should close after clicking option on top of the invoker.');
await (new test_driver.Actions()
.pointerMove(2, 2, {origin: select})
.pointerDown()
.pointerMove(2, 2, {origin: optionOne})
.pointerMove(2, 2, {origin: optionTwo})
.pointerUp())
.send();
assert_false(select.matches(':open'),
'select should close after clicking and dragging to second option.');
assert_equals(select.value, 'two',
'select.value should change two after choosing the second option.');
}, 'Releasing the pointer on an option positioned on top of the invoker button should not close the picker.');
</script>
|
