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
|
<!DOCTYPE html>
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/11185">
<link rel=author href="mailto:jarhar@chromium.org">
<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>
<select id=defaultbutton>
<option>option</option>
</select>
<select id=custombutton>
<button>button</button>
<option>option</option>
</select>
<style>
select, ::picker(select) {
appearance: base-select;
}
</style>
<script>
['defaultbutton', 'custombutton'].forEach(id => {
const select = document.getElementById(id);
const option = select.querySelector('option');
function assertSupport() {
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 () => {
assertSupport();
await (new test_driver.Actions()
.pointerMove(1, 1, {origin: select}))
.send();
await new Promise(requestAnimationFrame);
assert_true(select.matches(':hover'),
'select should match :hover.');
assert_true(document.body.matches(':hover'),
'document.body should match :hover.');
// sending a test_driver.Actions() which only has a pointerDown() will
// automatically add a pointerUp(), so we have to perform an entire click
// and check :active inside the mousedown listener instead.
let selectMatchedActive = false;
let bodyMatchedActive = false;
select.addEventListener('mousedown', () => {
selectMatchedActive = select.matches(':active');
bodyMatchedActive = document.body.matches(':active');
});
await test_driver.click(select);
assert_true(selectMatchedActive,
'select should match :active.');
assert_true(bodyMatchedActive,
'document.body should match :active.');
await test_driver.click(select);
assert_false(select.matches(':open'),
'select should be closed at the end of the test.');
}, `${id}: select should match :hover and :active when interacting with button.`);
promise_test(async () => {
assertSupport();
assert_false(select.matches(':open'),
'select should be closed at the start of the test.');
await test_driver.click(select);
await new Promise(requestAnimationFrame);
assert_true(select.matches(':open'),
'select should be open after clicking it.');
await (new test_driver.Actions()
.pointerMove(1, 1, {origin: option}))
.send();
await new Promise(requestAnimationFrame);
assert_true(option.matches(':hover'),
'option should match :hover.');
assert_false(select.matches(':hover'),
'select should not match :hover.');
assert_false(document.body.matches(':hover'),
'document.body should not match :hover.');
// sending a test_driver.Actions() which only has a pointerDown() will
// automatically add a pointerUp(), so we have to perform an entire click
// and check :active inside the mousedown listener instead.
let optionMatchedActive = false;
let selectMatchedActive = false;
let bodyMatchedActive = false;
option.addEventListener('mousedown', () => {
optionMatchedActive = option.matches(':active');
selectMatchedActive = select.matches(':active');
bodyMatchedActive = document.body.matches(':active');
});
await (new test_driver.Actions()
.pointerMove(1, 1, {origin: option})
.pointerDown()
.pointerUp())
.send();
assert_true(optionMatchedActive,
'option should match :active.');
assert_false(selectMatchedActive,
'select should not match :active.');
assert_false(bodyMatchedActive,
'document.body should not match :active.');
assert_false(select.matches(':open'),
'select should be closed at the end of the test.');
}, `${id}: select should not match :hover or :active when interacting with elements in the picker.`);
});
</script>
|
