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
|
<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://open-ui.org/components/combobox.explainer/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
input, datalist {
appearance: base;
}
</style>
<input list=datalist>
<datalist id=datalist>
<option class=one>one</option>
<option class=two>two</option>
</datalist>
<script>
const input = document.querySelector('input');
const datalist = document.querySelector('datalist');
const optionOne = document.querySelector('.one');
const optionTwo = document.querySelector('.two');
test(() => {
assert_false(datalist.matches(':popover-open'),
'datalist should not match :popover-open at the start of the test.');
assert_false(optionOne.matches(':active-option'),
'option one should not match :active-option when the datalist is closed.');
assert_false(optionTwo.matches(':active-option'),
'option two should not match :active-option when the datalist is closed.');
input.focus();
assert_true(datalist.matches(':popover-open'),
'datalist should open after focusing the input.');
assert_true(optionOne.matches(':active-option'),
'first option should match :active-option after opening the datalist.');
assert_false(optionTwo.matches(':active-option'),
'second option should not match :active-option after opening the datalist.');
input.blur();
}, 'When the datalist opens, the first option should match :active-option.');
test(() => {
assert_false(datalist.matches(':popover-open'),
'datalist should be closed at the start of the test.');
optionOne.setAttribute('disabled', '');
input.focus();
assert_true(datalist.matches(':popover-open'),
'datalist should open after focusing the input.');
assert_false(optionOne.matches(':active-option'),
'disabled option should not match :active-option.');
assert_true(optionTwo.matches(':active-option'),
'enabled option should match :active-option.');
input.blur();
}, 'Disabled options should not match :active-option.');
</script>
|
