Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-select-element/customizable-select/select-click-drag-option.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<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>
<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>