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-events.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<link rel=author href="mailto:masonf@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<div class=wrapper data-description="implicit button">
<select class=select>
<option class=option1>one</option>
<option class=option2>two</option>
<option class=option3>three</option>
</select>
</div>
<div class=wrapper data-description="explicit button">
<select class=select>
<button>Click</button>
<option class=option1>one</option>
<option class=option2>two</option>
<option class=option3>three</option>
</select>
</div>
<style>
select,::picker(select) {
appearance: base-select;
}
</style>
<script>
const events = ['click','keydown','keyup','mousedown','mouseup','pointerdown','pointerup',
'focusin','focusout','input','change','beforetoggle','toggle'];
const keys = {Enter:'\uE007',Escape:'\uE00C',ArrowLeft:'\uE012',ArrowUp:'\uE013',ArrowRight:'\uE014',ArrowDown:'\uE015',Space:' ',Tab:'\uE004',Shift:'\uE008'};
document.querySelectorAll('.wrapper').forEach(wrapper => {
const select = wrapper.querySelector('select');
const option1 = wrapper.querySelector('.option1');
const option2 = wrapper.querySelector('.option2');
const option3 = wrapper.querySelector('.option3');
promise_test(async (t) => {
assert_false(select.matches(':open'));
let eventList = [];
function assert_events(expectedEvents,message) {
message = message || "Mismatch";
assert_array_equals(eventList,expectedEvents,message);
eventList = [];
}
function getEventHandler(description) {
return (e) => eventList.push(`${e.type} on ${e.target.className} at ${description}`);
}
events.forEach(evt => wrapper.addEventListener(evt,getEventHandler('wrapper')));
events.forEach(evt => select.addEventListener(evt,getEventHandler('select')));
assert_events([]);
// Open the picker by clicking on it, which will focus the currently selected option.
await test_driver.click(select);
assert_true(select.matches(':open'));
assert_events([
'pointerdown on select at select', 'pointerdown on select at wrapper',
'mousedown on select at select', 'mousedown on select at wrapper',
'focusin on select at select', 'focusin on select at wrapper',
'focusout on select at select', 'focusout on select at wrapper',
'focusin on option1 at select', 'focusin on option1 at wrapper',
'pointerup on select at select', 'pointerup on select at wrapper',
'mouseup on select at select', 'mouseup on select at wrapper',
'click on select at select', 'click on select at wrapper'
],'after showing, events from test_driver.click');
// Press arrow-down, and preventDefault
wrapper.addEventListener('keydown',(e) => e.preventDefault(),{once:true});
await test_driver.send_keys(document.activeElement, keys.ArrowDown);
assert_equals(select.selectedOptions[0].innerText,'one');
assert_events([
'keydown on option1 at select', 'keydown on option1 at wrapper',
'keyup on option1 at select', 'keyup on option1 at wrapper'
],'arrow down, with preventDefault');
// Press arrow-down, no preventDefault
await test_driver.send_keys(document.activeElement, keys.ArrowDown);
assert_equals(select.selectedOptions[0].innerText,'one','selection does not follow focus');
assert_events([
'keydown on option1 at select', 'keydown on option1 at wrapper',
'focusout on option1 at select', 'focusout on option1 at wrapper',
'focusin on option2 at select', 'focusin on option2 at wrapper',
'keyup on option2 at select', 'keyup on option2 at wrapper'
],'arrow down, no preventDefault');
// Press escape, and preventDefault
wrapper.addEventListener('keydown',(e) => e.preventDefault(),{once:true});
await test_driver.send_keys(document.activeElement, keys.Escape);
assert_true(select.matches(':open'));
assert_events([
'keydown on option2 at select', 'keydown on option2 at wrapper',
'keyup on option2 at select', 'keyup on option2 at wrapper'
],'escape, with preventDefault');
// Press escape, no preventDefault
await test_driver.send_keys(document.activeElement, keys.Escape);
assert_false(select.matches(':open'));
assert_events([
'keydown on option2 at select', 'keydown on option2 at wrapper',
'focusout on option2 at select', 'focusout on option2 at wrapper',
'focusin on select at select', 'focusin on select at wrapper',
'keyup on select at select', 'keyup on select at wrapper'
],'escape, no preventDefault');
// Re-open the picker and hit arrow-down again.
await test_driver.click(select);
assert_true(select.matches(':open'));
assert_equals(select.value,'one');
await test_driver.send_keys(document.activeElement, keys.ArrowDown);
assert_equals(select.value,'one','selection does not follow focus');
eventList = [];
// Press enter to select an option, with preventDefault
wrapper.addEventListener('keydown',(e) => e.preventDefault(),{once:true});
await test_driver.send_keys(document.activeElement, keys.Enter);
assert_true(select.matches(':open'));
assert_equals(select.value,'one','value has not changed');
assert_events([
'keydown on option2 at select', 'keydown on option2 at wrapper',
'keyup on option2 at select', 'keyup on option2 at wrapper'
],'enter, with preventDefault');
// Press enter to select an option, no preventDefault
await test_driver.send_keys(document.activeElement, keys.Enter);
assert_false(select.matches(':open'));
assert_equals(select.value,'two');
assert_events([
'keydown on option2 at select', 'keydown on option2 at wrapper',
'input on select at select', 'input on select at wrapper', 'change on select at select',
'change on select at wrapper', 'focusout on option2 at select', 'focusout on option2 at wrapper',
'focusin on select at select', 'focusin on select at wrapper',
'keyup on select at select', 'keyup on select at wrapper'
],'enter, no preventDefault');
// Re-open the picker.
await test_driver.click(select);
assert_true(select.matches(':open'));
eventList = [];
// Click on an option, with preventDefault
wrapper.addEventListener('mouseup',(e) => e.preventDefault(),{once:true});
assert_equals(select.selectedOptions[0].innerText,'two');
await test_driver.click(option1);
assert_true(select.matches(':open'),'click should be cancelled');
assert_events([
'pointerdown on option1 at select', 'pointerdown on option1 at wrapper',
'mousedown on option1 at select', 'mousedown on option1 at wrapper',
'focusout on option2 at select', 'focusout on option2 at wrapper',
'focusin on select at select', 'focusin on select at wrapper',
'pointerup on option1 at select', 'pointerup on option1 at wrapper',
'mouseup on option1 at select', 'mouseup on option1 at wrapper',
'click on option1 at select', 'click on option1 at wrapper'
],'click option, with preventDefault');
// Click on an option, no preventDefault
assert_equals(select.selectedOptions[0].innerText,'two');
await test_driver.click(option1);
assert_false(select.matches(':open'));
assert_events([
'pointerdown on option1 at select', 'pointerdown on option1 at wrapper',
'mousedown on option1 at select', 'mousedown on option1 at wrapper',
'pointerup on option1 at select', 'pointerup on option1 at wrapper',
'mouseup on option1 at select', 'mouseup on option1 at wrapper',
'input on select at select', 'input on select at wrapper',
'change on select at select', 'change on select at wrapper',
'click on option1 at select', 'click on option1 at wrapper'
],'click option, no preventDefault');
},`Events, ${wrapper.dataset.description}`);
});
</script>