Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-select-element/customizable-select/select-keyboard-focus-change-for-hidden-options.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta name="timeout" content="long">
<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,
select::picker(select) {
appearance: base-select;
}
</style>
<select id="target">
<option id="alpha">alpha</option>
<option hidden>bravo</option>
<option id="charlie">charlie</option>
<option hidden>delta</option>
<option hidden>echo</option>
<option id="foxtrot">foxtrot</option>
<option hidden>golf</option>
</select>
<script>
const Space = ' ';
const ArrowUp = '\uE013';
const ArrowDown = '\uE015';
promise_test(async (t) => {
assert_false(
target.matches(':open'),
'The select should initially be closed.'
);
assert_equals(
target.value,
'alpha',
'Initial select value should be alpha.'
);
target.focus();
assert_equals(
document.activeElement,
target,
'The select should be focused.'
);
await test_driver.send_keys(document.activeElement, Space);
assert_true(
target.matches(':open'),
'The select should be open after pressing space.'
);
assert_equals(
document.activeElement,
alpha,
'The `alpha` option should be initially focused.'
);
// ArrowDown tests
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(
document.activeElement,
charlie,
'The `charlie` option should be focused after pressing `ArrowDown`.'
);
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(
document.activeElement,
foxtrot,
'The `foxtrot` option should be focused after pressing `ArrowDown`.'
);
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(
document.activeElement,
foxtrot,
'The `foxtrot` option should still be focused after pressing `ArrowDown`.'
);
// ArrowUp tests
await test_driver.send_keys(document.activeElement, ArrowUp);
assert_equals(
document.activeElement,
charlie,
'The `charlie` option should be focused after pressing `ArrowUp`.'
);
await test_driver.send_keys(document.activeElement, ArrowUp);
assert_equals(
document.activeElement,
alpha,
'The `alpha` option should be focused after pressing `ArrowUp`.'
);
await test_driver.send_keys(document.activeElement, ArrowUp);
assert_equals(
document.activeElement,
alpha,
'The `alpha` option should still be focused after pressing `ArrowUp`.'
);
}, 'Hidden options should be skipped when changing focus using the up and down keys.');
</script>