Fix customizable select keyboard navigation hang

This patch fixes an infinite loop when using the arrow keys to keyboard
navigate backwards over an <hr> element. The bug only occurs when the
select is opted into customizable select with appearance:base-select.

Fixed: 412578717
Change-Id: Ib665e56ddbd4b230194f393f559df82f5b41ba7a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6484650
Commit-Queue: Joey Arhar <[email protected]>
Reviewed-by: Di Zhang <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1451850}

Author: josepharhar

html/semantics/forms/the-select-element/customizable-select/select-iterate-before-beginning.tentative.html

@@ -12,18 +12,26 @@
 }
 </style>
 
-<select>
+<select id=s1>
   <button>button</button>
   <option class=one>one</option>
   <option>two</option>
 </select>
 
+<select id=s2>
+  <option class=one>one</option>
+  <hr>
+  <optgroup></optgroup>
+  <option class=two>two</option>
+</select>
+
 <script>
-promise_test(async () => {
-  const select = document.querySelector('select');
-  const firstOption = document.querySelector('option.one');
-  const arrowUp = '\uE013';
+const arrowUp = '\uE013';
+const arrowDown = '\uE015';
 
+promise_test(async () => {
+  const select = document.getElementById('s1');
+  const firstOption = select.querySelector('option.one');
   assert_equals(getComputedStyle(select).appearance, 'base-select',
     'appearance:base-select must be supported in order to run this test.');
 
@@ -38,5 +46,37 @@
     assert_equals(document.activeElement, firstOption,
       'The first option should remain focused after pressing ArrowUp.');
   }
+
+  // close select for the next test
+  await test_driver.click(select);
+  assert_false(select.matches(':open'),
+    'select should be closed at the end of the test.');
 }, 'Attempting to focus the previous option while focused on the first option should not crash.');
+
+promise_test(async () => {
+  const select = document.getElementById('s2');
+  const firstOption = select.querySelector('option.one');
+  const secondOption = select.querySelector('option.two');
+  assert_equals(getComputedStyle(select).appearance, 'base-select',
+    'appearance:base-select must be supported in order to run this test.');
+
+  await test_driver.click(select);
+  assert_true(select.matches(':open'),
+    'select should open after clicking it.');
+
+  assert_equals(document.activeElement, firstOption,
+    'first option should be focused after opening select.');
+
+  await test_driver.send_keys(document.activeElement, arrowDown);
+  assert_equals(document.activeElement, secondOption,
+    'second option should be focused after arrow down.');
+
+  await test_driver.send_keys(document.activeElement, arrowUp);
+  assert_equals(document.activeElement, firstOption,
+    'first option should be focused after arrow up.');
+
+  await test_driver.click(select);
+  assert_false(select.matches(':open'),
+    'select should be closed at the end of the test.');
+}, 'Keyboard navigating backwards over an <hr> and <optgroup> should not crash.');
 </script>