Source code
Revision control
Copy as Markdown
Other Tools
<!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>
<select size=4>
<option class=one>one</option>
<option>gap 1</option>
<option class=two>two</option>
<option>gap 2</option>
<option class=three>three</option>
</select>
<select multiple size=4>
<option class=one>one</option>
<option>gap 1</option>
<option class=two>two</option>
<option>gap 2</option>
<option class=three>three</option>
</select>
<style>
select {
appearance: base-select
}
</style>
<script>
function pressKey(key) {
return (new test_driver.Actions()
.keyDown(key)
.keyUp(key))
.send();
}
document.querySelectorAll('select').forEach(select => {
promise_test(async () => {
assert_equals(getComputedStyle(select).appearance, 'base-select',
'appearance: base-select must be supported to run this test.');
assert_equals(select.selectedOptions.length, 0,
'No options should be selected at the start of the test.');
const optionOne = select.querySelector('.one');
const optionTwo = select.querySelector('.two');
const optionThree = select.querySelector('.three');
optionOne.focus();
await pressKey('t');
assert_equals(document.activeElement, optionTwo,
'Pressing "t" should move focus to option "two".');
assert_equals(select.selectedOptions.length, 0,
'No options should be selected after typeahed to option two.');
await pressKey('h');
assert_equals(document.activeElement, optionThree,
'Pressing "th" should move focus to option "three".');
assert_equals(select.selectedOptions.length, 0,
'No options should be selected after typeahed to option three.');
}, `<select${select.multiple ? ' multiple' : ''}>: Typeahead should focus options without checking them.`);
});
</script>