Add test cases to select-mouse-behavior.tentative.html

This test was missing the combinations of having author provided or fallback datalists or buttons. This patch also adds select-mouse-behavior to TestExpectations due to different failure messages on different platforms, just like the keyboard test in this patch: http://crrev.com/1339476 Change-Id: I60481c5525d03656891ecf1550b34fb656edf4d1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5766778 Reviewed-by: Traian Captan <[email protected]> Commit-Queue: Joey Arhar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1344470}
Westbrook · Aug 21, 2024 · 2daed40 · 2daed40
1 parent ba3c32a
commit 2daed40
Showing 1 changed file with 57 additions and 36 deletions.
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-mouse-behavior.tentative.html b/html/semantics/forms/the-select-element/stylable-select/select-mouse-behavior.tentative.html
@@ -15,48 +15,69 @@
 }
 </style>
 
-<!-- TODO(http://crbug.com/1511354): Add test cases with no <button> and no <datalist>. -->
-<select>
+<select id=custombutton-customdatalist>
   <button>button</button>
   <datalist>
     <option class=one>one</option>
     <option class=two>two</option>
   </datalist>
 </select>
 
+<select id=custombutton-fallbackdatalist>
+  <button>button</button>
+  <option class=one>one</option>
+  <option class=two>two</option>
+</select>
+
+<select id=fallbackbutton-customdatalist>
+  <datalist>
+    <option class=one>one</option>
+    <option class=two>two</option>
+  </datalist>
+</select>
+
+<select id=fallbackbutton-fallbackdatalist>
+  <option class=one>one</option>
+  <option class=two>two</option>
+</select>
+
 <script>
-const select = document.querySelector('select');
-const button = document.querySelector('button');
-const optionOne = document.querySelector('option.one');
-const optionTwo = document.querySelector('option.two');
-
-promise_test(async () => {
-  assert_false(select.matches(':open'),
-    'Select should be closed at the start of the test.');
-
-  await test_driver.click(button);
-  assert_true(select.matches(':open'),
-    'Select should be open after clicking the button.');
-
-  await test_driver.click(button);
-  assert_false(select.matches(':open'),
-    'Select should be closed after clicking the button a second time.');
-}, 'Select with appearance:base-select should open and close when clicking the button.');
-
-promise_test(async () => {
-  assert_false(select.matches(':open'),
-    'Select should be closed at the start of the test.');
-  assert_equals(select.value, 'one',
-    'Select.value should be one at the start of the test.');
-
-  await test_driver.click(button);
-  assert_true(select.matches(':open'),
-    'Select should be open after clicking the button.');
-
-  await test_driver.click(optionTwo);
-  assert_false(select.matches(':open'),
-    'Select should be closed after clicking an option.');
-  assert_equals(select.value, 'two',
-    'Select.value should be two after clicking the option.');
-}, 'Clicking an option in an appearance:base-select select should choose the option and close the popover.');
+for (const id of ['fallbackbutton-fallbackdatalist',
+                  'fallbackbutton-customdatalist',
+                  'custombutton-fallbackdatalist',
+                  'custombutton-customdatalist']) {
+  const select = document.getElementById(id);
+  const optionOne = select.querySelector('option.one');
+  const optionTwo = select.querySelector('option.two');
+
+  promise_test(async () => {
+    assert_false(select.matches(':open'),
+      'Select should be closed at the start of the test.');
+
+    await test_driver.click(select);
+    assert_true(select.matches(':open'),
+      'Select should be open after clicking the button.');
+
+    await test_driver.click(select);
+    assert_false(select.matches(':open'),
+      'Select should be closed after clicking the button a second time.');
+  }, `${id}: Select with appearance:base-select should open and close when clicking the button.`);
+
+  promise_test(async () => {
+    assert_false(select.matches(':open'),
+      'Select should be closed at the start of the test.');
+    assert_equals(select.value, 'one',
+      'Select.value should be one at the start of the test.');
+
+    await test_driver.click(select);
+    assert_true(select.matches(':open'),
+      'Select should be open after clicking the button.');
+
+    await test_driver.click(optionTwo);
+    assert_false(select.matches(':open'),
+      'Select should be closed after clicking an option.');
+    assert_equals(select.value, 'two',
+      'Select.value should be two after clicking the option.');
+  }, `${id}: Clicking an option in an appearance:base-select select should choose the option and close the popover.`);
+}
 </script>