-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Reland "Add tests of events for customizable select"
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. On linux, test_driver.bless() seems flaky (crbug.com/379669748).
This patch disables this new test on Linux.
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 <[email protected]>
> Reviewed-by: Joey Arhar <[email protected]>
> Auto-Submit: Mason Freed <[email protected]>
> Cr-Commit-Position: refs/heads/main@{#1383214}
Change-Id: I243e92e889a44ae2cc459d4efb8a0bbfbe79cc51
Bug: 379669748
Change-Id: I243e92e889a44ae2cc459d4efb8a0bbfbe79cc51
Fixed: 379168836- Loading branch information
1 parent
a31f018
commit af73198
Showing
1 changed file
with
172 additions
and
0 deletions.
There are no files selected for viewing
172 changes: 172 additions & 0 deletions
172
html/semantics/forms/the-select-element/customizable-select/select-events.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,172 @@ | ||
| <!DOCTYPE html> | ||
| <link rel=author href="mailto:[email protected]"> | ||
| <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 class=select>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'); | ||
| const expectedSelectFocus = wrapper.querySelector('button') || select; | ||
| 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, which will focus the currently selected option. | ||
| await test_driver.click(select); | ||
| assert_true(select.matches(':open')); | ||
| assert_events([ | ||
| 'focusin on option1 at select', 'focusin on option1 at wrapper' | ||
| ],'after showing'); | ||
|
|
||
| // Press arrow-down, and preventDefault | ||
| wrapper.addEventListener('keydown',(e) => e.preventDefault(),{once:true}); | ||
| await test_driver.send_keys(document.activeElement, keys.ArrowDown); | ||
| assert_equals(document.activeElement,option1); | ||
| 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(document.activeElement,option2); | ||
| 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_equals(document.activeElement,option2); | ||
| 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_equals(document.activeElement,expectedSelectFocus); | ||
| 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(document.activeElement,option2); | ||
| 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_equals(document.activeElement,expectedSelectFocus); | ||
| 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_equals(document.activeElement,option2,'focus should not move'); | ||
| 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_equals(document.activeElement,expectedSelectFocus); | ||
| 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> |