Skip to content

Commit

Permalink
Reland "Add tests of events for customizable select"
Browse files Browse the repository at this point in the history 
This is a reland of commit 86eb111c7cd216df5bc6e896256795e420d1bf99

The original patch is listed in patchset 1. The failures were caused by flakiness in the failure mode in two cases:
 1. The two virtual suites. Other similar failures for other tests
    are listed in TestExpectations, so this patch now does that.
 2. Headless causes problems and flakiness.

Original change's description:
> Add tests of events for customizable select
>
> This adds a test that looks at the event behavior of select,
> particularly for interactions that open and close the picker,
> and select options.
>
> Change-Id: I5238360cecc83b48b0f8143380018d4781d65c72
> Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6006480
> Commit-Queue: Joey Arhar <jarhar@chromium.org>
> Reviewed-by: Joey Arhar <jarhar@chromium.org>
> Auto-Submit: Mason Freed <masonf@chromium.org>
> Cr-Commit-Position: refs/heads/main@{#1383214}

Change-Id: I243e92e889a44ae2cc459d4efb8a0bbfbe79cc51

Bug: 379669748
Change-Id: I243e92e889a44ae2cc459d4efb8a0bbfbe79cc51
Fixed: 379168836
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6032572
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Auto-Submit: Mason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1386900}
  • Loading branch information
@mfreed7 @chromium-wpt-export-bot
mfreed7 authored and chromium-wpt-export-bot committed Nov 22, 2024
1 parent d03bbd2 commit 9c52094
Showing 1 changed file with 170 additions and 0 deletions.
170 changes: 170 additions & 0 deletions html/semantics/forms/the-select-element/customizable-select/select-events.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
<!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('click',(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',
'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',
'click on option1 at select', 'click on option1 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'
],'click option, no preventDefault');
},`Events, ${wrapper.dataset.description}`);
});
</script>

0 comments on commit 9c52094

Please sign in to comment.