diff --git a/html/semantics/forms/the-selectlist-element/selectlist-events.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-events.tentative.html index 94577815cd075c7..a88a3b1f7da0b62 100644 --- a/html/semantics/forms/the-selectlist-element/selectlist-events.tentative.html +++ b/html/semantics/forms/the-selectlist-element/selectlist-events.tentative.html @@ -130,20 +130,15 @@ promise_test(async () => { const selectList = document.getElementById("selectList2"); - let input_event_count = 0; - let change_event_count = 0; + const events = []; selectList.addEventListener("input", (e) => { - assert_true(e.composed, "input event should be composed"); - assert_equals(input_event_count, 0, "input event should not fire twice"); - assert_equals(change_event_count, 0, "input event should not fire before change"); - input_event_count++; + assert_true(e.composed, "input event should be composed."); + events.push('input'); }); selectList.addEventListener("change", (e) => { - assert_false(e.composed, "change event should not be composed"); - assert_equals(input_event_count, 1, "change event should fire after input"); - assert_equals(change_event_count, 0, "change event should not fire twice"); - change_event_count++; + assert_false(e.composed, "change event should not be composed."); + events.push('change'); }); await clickOn(selectList); @@ -151,47 +146,39 @@ await test_driver.send_keys(selectList, KEY_CODE_MAP.Enter); assert_false(selectList.open); assert_equals(selectList.value, "one"); - assert_equals(input_event_count, 0, "input event shouldn't fire if value wasn't changed"); - assert_equals(change_event_count, 0, "change event shouldn't fire if value wasn't changed"); + assert_array_equals(events, [], "input and change shouldn't fire if value wansn't changed."); await clickOn(selectList); assert_true(selectList.open); await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowDown); - assert_equals(selectList.value, "two", "value should change when user switches options with arrow key"); - assert_equals(input_event_count, 1, "input event should fire when user switches options with arrow key"); - assert_equals(change_event_count, 0, "change event shouldn't fire until popover is closed"); + assert_equals(selectList.value, "one", "value shouldn't change when user switches options with arrow key."); + assert_array_equals(events, ['input'], "input event should fire when user switches options with arrow key."); await test_driver.send_keys(selectList, KEY_CODE_MAP.Enter); assert_equals(selectList.value, "two"); - assert_equals(input_event_count, 1, "input event should have fired"); - assert_equals(change_event_count, 1, "change event should have fired"); - }, " should fire input and change events when new option is selected"); + assert_array_equals(events, ['input', 'input', 'change'], "input and change should fire after pressing enter."); + }, " should fire input and change events when new option is selected."); promise_test(async () => { const selectList = document.getElementById("selectList3"); - let input_event_count = 0; - let change_event_count = 0; + const events = []; selectList.addEventListener("input", (e) => { - assert_true(e.composed, "input event should be composed"); - assert_equals(input_event_count, 0, "input event should not fire twice"); - assert_equals(change_event_count, 0, "input event should not fire before change"); - input_event_count++; + assert_true(e.composed, "input event should be composed."); + events.push('input'); }); selectList.addEventListener("change", (e) => { - assert_false(e.composed, "change event should not be composed"); - assert_equals(input_event_count, 1, "change event should fire after input"); - assert_equals(change_event_count, 0, "change event should not fire twice"); - change_event_count++; + assert_false(e.composed, "change event should not be composed."); + events.push('change'); }); await clickOn(selectList); assert_true(selectList.open); await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowDown); + assert_array_equals(events, ['input'], "input event should have fired after ArrowDown."); await test_driver.send_keys(selectList, KEY_CODE_MAP.Enter); - assert_equals(input_event_count, 1, "input event should have fired"); - assert_equals(change_event_count, 1, "change event should have fired"); - }, " should fire input and change events even when new selected option has the same value as the old"); + assert_array_equals(events, ['input', 'input', 'change'], "input and change should fire after pressing Enter."); + }, " should fire input and change events even when new selected option has the same value as the old."); promise_test(async () => { const selectList = document.getElementById("selectList4"); diff --git a/html/semantics/forms/the-selectlist-element/selectlist-keyboard-behavior.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-keyboard-behavior.tentative.html new file mode 100644 index 000000000000000..a70ab7e6a5d5de5 --- /dev/null +++ b/html/semantics/forms/the-selectlist-element/selectlist-keyboard-behavior.tentative.html @@ -0,0 +1,182 @@ + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + +
+ + diff --git a/html/semantics/forms/the-selectlist-element/selectlist-keyboard.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-keyboard.tentative.html index 38c5fd7dc4ed95c..5d1c65e9413d0a6 100644 --- a/html/semantics/forms/the-selectlist-element/selectlist-keyboard.tentative.html +++ b/html/semantics/forms/the-selectlist-element/selectlist-keyboard.tentative.html @@ -6,10 +6,10 @@ -
button
- - - + + + +
@@ -17,17 +17,17 @@ -
button
+
-
button
- + + - +