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
|
<!DOCTYPE html>
<meta name=timeout content=long>
<link rel=author href="mailto:masonf@chromium.org">
<link rel=help href="https://issues.chromium.org/issues/382101095">
<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>
<style>
select,::picker(select) {
appearance: base-select;
}
</style>
<select></select>
<script>
const keyMap = {
'Home': '\uE011',
'End': '\uE010',
'PageUp': '\uE00E',
'PageDown': '\uE00F'
};
const select = document.querySelector('select');
for(let i=1;i<=1000;++i) {
const option = document.createElement('option');
option.textContent = `Option #${i}`;
option.id=i;
select.appendChild(option);
}
const firstOption = document.getElementById(1);
const middleOption = document.getElementById(500);
['Home', 'End', 'PageUp', 'PageDown'].forEach(keyName => {
promise_test(async () => {
assert_false(select.matches(':open'));
select.value = middleOption.value;
assert_equals(select.value, middleOption.value,'Initial value');
await test_driver.click(select);
assert_true(select.matches(':open'));
assert_equals(select.value, middleOption.value,'Value doesn\'t change when opening picker');
assert_equals(document.activeElement, middleOption, 'Selected option should be focused');
const keyCode = keyMap[keyName];
await test_driver.send_keys(document.activeElement, keyCode);
assert_equals(select.value, middleOption.value, 'Selected option should not change');
assert_not_equals(document.activeElement, middleOption, 'Focus should move');
select.value = firstOption.value;
await test_driver.click(select);
assert_false(select.matches(':open'),'Clicking select should close picker');
assert_equals(select.value, firstOption.value, 'Value should stay');
}, `Behavior of ${keyName} for customizable-<select>`);
});
</script>
|
