Deal with remaining <selectlist> tests

select-keyboard.tentative.html was replaced with select-keyboard-behavior.tentative.html, select-disabled.tentative.html, and select-synthetic-events.tentative.html. select-option-label-rendering.tentative.html is a duplicate of select-appearance-option-with-label.tentative.html. Fixed: 366394195 Bug: 40884429 Change-Id: Iff4a462005fbed73d0bb0478a9cf598db9ed5ff5 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6092351 Commit-Queue: Joey Arhar <[email protected]> Reviewed-by: Traian Captan <[email protected]> Cr-Commit-Position: refs/heads/main@{#1402729}
tkntjsdw · Jan 7, 2025 · f10fb64 · f10fb64
1 parent 9ff4054
commit f10fb64
Show file tree

Hide file tree

Showing 15 changed files with 190 additions and 295 deletions.
diff --git a/...ics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css b/...ics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css
@@ -81,6 +81,7 @@
 
 .customizable-select-button::after {
   content: counter(fake-counter-name, disclosure-open);
+  margin-inline-start: auto;
 }
 
 .customizable-select-legend {

diff --git a/html/semantics/forms/the-select-element/customizable-select/select-disabled.tentative.html b/html/semantics/forms/the-select-element/customizable-select/select-disabled.tentative.html
@@ -20,6 +20,9 @@
 <script>
 ['defaultbutton', 'custombutton'].forEach(id => {
   promise_test(async () => {
+    assert_true(CSS.supports('appearance', 'base-select'),
+      'This test requires appearance:base-select in order to run.');
+
     const select = document.getElementById(id);
     select.focus();
     assert_not_equals(document.activeElement, select,

diff --git a/...tics/forms/the-select-element/customizable-select/select-explicit-size-ref.tentative.html b/...tics/forms/the-select-element/customizable-select/select-explicit-size-ref.tentative.html
@@ -1,16 +1,12 @@
 <!DOCTYPE html>
-
 <link rel=stylesheet href="resources/customizable-select-styles.css">
-<div class="customizable-select-button open" style="anchor-name:--button" popovertarget=popover id=button>
+
+<div class=customizable-select-button>
   <span class=customizable-select-selectedcontent>option</span>
 </div>
-<div id=popover popover=auto style="position-anchor:--button" class=customizable-select-popover>
-  <div class="customizable-select-option selected">one</div>
-  <div class=customizable-select-option>two</div>
-</div>
 
 <style>
-  button {
+  .customizable-select-button {
     width: 400px;
     height: 50px;
   }

diff --git a/...emantics/forms/the-select-element/customizable-select/select-font-size-ref.tentative.html b/...emantics/forms/the-select-element/customizable-select/select-font-size-ref.tentative.html
@@ -1,13 +1,11 @@
 <!DOCTYPE html>
 <link rel=stylesheet href="resources/customizable-select-styles.css">
-<div class="customizable-select-button open" style="anchor-name:--button" popovertarget=popover id=button>
+<div class=customizable-select-button popovertarget=popover id=button>
   <span class=customizable-select-selectedcontent>option</span>
 </div>
-<div id=popover popover=auto style="position-anchor:--button" class=customizable-select-popover>
-</div>
 
 <style>
-  select {
+  div {
     font-size: 48px;
   }
 </style>
diff --git a/html/semantics/forms/the-select-element/customizable-select/select-font-size.tentative.html b/html/semantics/forms/the-select-element/customizable-select/select-font-size.tentative.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <!-- Tests that select respects explicit size -->
+<meta name=fuzzy content="maxDifference=0-55;totalPixels=0-32">
 <link rel=author href="mailto:[email protected]">
 <link rel="match" href="select-font-size-ref.tentative.html">
 

diff --git a/...tics/forms/the-select-element/customizable-select/select-selected-value-behavior-ref.html b/...tics/forms/the-select-element/customizable-select/select-selected-value-behavior-ref.html
@@ -1,10 +1,8 @@
 <!DOCTYPE html>
 <link rel=stylesheet href="resources/customizable-select-styles.css">
-<div class="customizable-select-button open" style="anchor-name:--button" popovertarget=popover id=button>
+<div class="customizable-select-button open">
   <span class=customizable-select-selectedcontent>option</span>
 </div>
-<div id=popover popover=auto style="position-anchor:--button" class=customizable-select-popover>
-</div>
 
 <style>
   .customizable-select-selectedcontent {

diff --git a/...orms/the-select-element/customizable-select/select-selected-value-behavior.tentative.html b/...orms/the-select-element/customizable-select/select-selected-value-behavior.tentative.html
@@ -1,9 +1,12 @@
 <!DOCTYPE html>
+<meta name=fuzzy content="maxDifference=0-41;totalPixels=0-1">
 <link rel=author href="mailto:[email protected]">
 <link rel=match href="select-selected-value-behavior-ref.html">
 
 <select>
-  <selectedcontent style="color:blue"></selectedcontent>
+  <button>
+    <selectedcontent style="color:blue"></selectedcontent>
+  </button>
   <option>option</option>
 </select>
 

diff --git a/...ntics/forms/the-select-element/customizable-select/select-synthetic-events.tentative.html b/...ntics/forms/the-select-element/customizable-select/select-synthetic-events.tentative.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:[email protected]">
+<link rel=help href="https://github.com/whatwg/html/issues/10762">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select, ::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<select id=defaultbutton>
+  <option class=one>one</option>
+  <option class=two>two</option>
+</select>
+
+<select id=custombutton>
+  <button>button</button>
+  <option class=one>one</option>
+  <option class=two>two</option>
+</select>
+
+<script>
+const keyCodes = ['Enter', 'Space', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+
+function dispatchKeyboardEvents(element, code) {
+  const key = code == 'Space' ? ' ' : code;
+  element.dispatchEvent(new KeyboardEvent('keydown', {key, code}));
+  element.dispatchEvent(new KeyboardEvent('keypress', {key, code}));
+  element.dispatchEvent(new KeyboardEvent('keyup', {key, code}));
+}
+
+function dispatchMouseEvents(element) {
+  element.dispatchEvent(new MouseEvent('pointerdown'));
+  element.dispatchEvent(new MouseEvent('mousedown'));
+  element.dispatchEvent(new MouseEvent('pointerup'));
+  element.dispatchEvent(new MouseEvent('mouseup'));
+  element.dispatchEvent(new MouseEvent('click'));
+}
+
+['defaultbutton', 'custombutton'].forEach(id => {
+  promise_test(async () => {
+    assert_true(CSS.supports('appearance', 'base-select'),
+      'This test requires appearance:base-select in order to run.');
+
+    const select = document.getElementById(id);
+    const firstOption = select.querySelector('option.one');
+    const secondOption = select.querySelector('option.two');
+
+    select.click();
+    assert_false(select.matches(':open'),
+      'select.click() should not open the picker.');
+
+    dispatchMouseEvents(select);
+    assert_false(select.matches(':open'),
+      'Synthetic mouse/pointer events should not open the picker.');
+
+    for (const keyCode of keyCodes) {
+      dispatchKeyboardEvents(select, keyCode);
+      assert_false(select.matches(':open'),
+        `Synthetic ${keyCode} events should not open the picker.`);
+      assert_equals(select.value, 'one',
+        `Synthetic ${keyCode} events should not change the selects value.`);
+    }
+
+    await test_driver.click(select);
+    assert_true(select.matches(':open'),
+      'Select should open after a real click occurs.');
+    assert_equals(document.activeElement, firstOption,
+      'Selected <option> should be focused after opening the picker.');
+
+    secondOption.click();
+    assert_true(select.matches(':open'),
+      'option.click() should not close the picker.');
+    assert_equals(select.value, 'one',
+      'option.click() should not change select.value.');
+
+    dispatchMouseEvents(secondOption);
+    assert_true(select.matches(':open'),
+      'Synthetic mouse/pointer events should not close the picker.');
+    assert_equals(select.value, 'one',
+      'Synthetic mouse/pointer events should not change select.value.');
+
+    for (const keyCode of keyCodes) {
+      dispatchKeyboardEvents(firstOption, keyCode);
+      assert_true(select.matches(':open'),
+        `Synthetic ${keyCode} events on selected <option> should not close the picker.`);
+      assert_equals(select.value, 'one',
+        `Synthetic ${keyCode} events on selected <option> should not change select.value.`);
+
+      dispatchKeyboardEvents(secondOption, keyCode);
+      assert_true(select.matches(':open'),
+        `Synthetic ${keyCode} events on non-selected <option> should not close the picker.`);
+      assert_equals(select.value, 'one',
+        `Synthetic ${keyCode} events on non-selected <option> should not change select.value.`);
+    }
+  }, `${id}: Synthetic events should not trigger behaviors of select element.`);
+});
+</script>
diff --git a/html/semantics/forms/the-select-element/customizable-select/select-text-only.tentative.html b/html/semantics/forms/the-select-element/customizable-select/select-text-only.tentative.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<meta name=fuzzy content="maxDifference=0-41;totalPixels=0-1">
 <link rel=author href="mailto:[email protected]">
 <link rel=help href="https://github.com/openui/open-ui/issues/702">
 <link rel=match href="select-text-only-ref.html">

diff --git a/html/semantics/forms/the-select-element/select-events.tentative.html b/html/semantics/forms/the-select-element/select-events.tentative.html
@@ -8,7 +8,7 @@
 
 <select id="select0">
   <button id="select0-button">
-    <selectedvalue></selectedvalue>
+    <selectedcontent></selectedcontent>
     select0-button
   </button>
   <option>one</option>
@@ -73,25 +73,24 @@
 
   promise_test(async (t) => {
     const select = document.getElementById("select0");
-    const selectButton = document.getElementById("select0-button");
     assert_false(select.matches(':open'));
 
-    const selectButtonWatcher = new EventWatcher(t, selectButton, ["click"]);
-    const selectButtonPromise = selectButtonWatcher.wait_for("click").then((e) => {
+    const selectButtonWatcher = new EventWatcher(t, select, ["mousedown"]);
+    const selectButtonPromise = selectButtonWatcher.wait_for("mousedown").then((e) => {
       assert_false(select.matches(':open'), "Listbox shouldn't have opened yet");
       // PreventDefaulting the event here should prevent UA controller code
       // on the button part from opening the listbox.
       e.preventDefault();
     });
 
-    const selectWatcher = new EventWatcher(t, select, ["click"]);
-    const selectPromise = selectWatcher.wait_for("click").then((e) => {
-      assert_true(e.defaultPrevented, "Event should have been defaultPrevented by selectButton click handler");
-      assert_false(select.matches(':open'), "Listbox shouldn't have opened, because click event was defaultPrevented.");
+    const selectWatcher = new EventWatcher(t, select, ["mousedown"]);
+    const selectPromise = selectWatcher.wait_for("mousedown").then((e) => {
+      assert_true(e.defaultPrevented, "Event should have been defaultPrevented by select mousedown handler");
+      assert_false(select.matches(':open'), "Listbox shouldn't have opened, because mousedown event was defaultPrevented.");
     });
 
-    return Promise.all([selectButtonPromise, selectPromise, clickOn(selectButton)]);
-  }, "Button controller code should not run if the click event is preventDefaulted.");
+    return Promise.all([selectButtonPromise, selectPromise, clickOn(select)]);
+  }, "Button controller code should not run if the mousedown event is preventDefaulted.");
 
   // See https://w3c.github.io/webdriver/#keyboard-actions
   const KEY_CODE_MAP = {
@@ -104,27 +103,26 @@
 
   promise_test(async (t) => {
     const select = document.getElementById("select1");
-    const selectButton = document.getElementById("select1-button");
     await clickOn(select);
     assert_true(select.matches(':open'));
 
-    const selectButtonWatcher = new EventWatcher(t, selectButton, ["click"]);
-    const selectButtonPromise = selectButtonWatcher.wait_for("click").then((e) => {
+    const selectButtonWatcher = new EventWatcher(t, select, ["mousedown"]);
+    const selectButtonPromise = selectButtonWatcher.wait_for("mousedown").then((e) => {
       assert_true(select.matches(':open'), "Listbox shouldn't have closed yet");
       // PreventDefaulting the event here should prevent UA controller code
       // on the listbox part from selecting the option and closing the listbox.
       e.preventDefault();
     });
 
-    const selectWatcher = new EventWatcher(t, select, ["click"]);
-    const selectPromise = selectWatcher.wait_for("click").then((e) => {
-      assert_true(e.defaultPrevented, "Event should have been defaultPrevented by selectButton click handler");
+    const selectWatcher = new EventWatcher(t, select, ["mousedown"]);
+    const selectPromise = selectWatcher.wait_for("mousedown").then((e) => {
+      assert_true(e.defaultPrevented, "Event should have been defaultPrevented by select mousedown handler");
       assert_true(select.matches(':open'), "Listbox shouldn't have closed, because keydown event was defaultPrevented.");
       assert_equals(select.value, "one", "<select> shouldn't have changed value, because keydown event was defaultPrevented.");
     });
 
-    return Promise.all([selectButtonPromise, selectPromise, clickOn(selectButton)]);
-  }, "Listbox controller code should not run if the click event is preventDefaulted.");
+    return Promise.all([selectButtonPromise, selectPromise, clickOn(select)]);
+  }, "Listbox controller code should not run if the mousedown event is preventDefaulted.");
 
   promise_test(async (t) => {
     const select = document.getElementById("select2");
@@ -141,20 +139,20 @@
 
     await clickOn(select);
     assert_true(select.matches(':open'));
-    await test_driver.send_keys(select, KEY_CODE_MAP.Enter);
+    await test_driver.send_keys(document.activeElement, KEY_CODE_MAP.Enter);
     assert_false(select.matches(':open'));
     assert_equals(select.value, "one");
     assert_array_equals(events, [], "input and change shouldn't fire if value wansn't changed.");
 
     await clickOn(select);
     assert_true(select.matches(':open'));
-    await test_driver.send_keys(select, KEY_CODE_MAP.ArrowDown);
+    await test_driver.send_keys(document.activeElement, KEY_CODE_MAP.ArrowDown);
     assert_equals(select.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.");
+    assert_array_equals(events, [], "input event should not fire when user switches options with arrow key.");
 
-    await test_driver.send_keys(select, KEY_CODE_MAP.Enter);
+    await test_driver.send_keys(document.activeElement, KEY_CODE_MAP.Enter);
     assert_equals(select.value, "two");
-    assert_array_equals(events, ['input', 'input', 'change'], "input and change should fire after pressing enter.");
+    assert_array_equals(events, ['input', 'change'], "input and change should fire after pressing enter.");
   }, "<select> should fire input and change events when new option is selected.");
 
   promise_test(async (t) => {
@@ -173,10 +171,10 @@
     await clickOn(select);
     assert_true(select.matches(':open'));
     await test_driver.send_keys(select, KEY_CODE_MAP.ArrowDown);
-    assert_array_equals(events, ['input'], "input event should have fired after ArrowDown.");
+    assert_array_equals(events, [], "input event not should have fired after ArrowDown.");
     await test_driver.send_keys(select, KEY_CODE_MAP.Enter);
-    assert_array_equals(events, ['input', 'input', 'change'], "input and change should fire after pressing Enter.");
-  }, "<select> should fire input and change events even when new selected option has the same value as the old.");
+    assert_array_equals(events, [], "input and change should not fire after pressing Enter.");
+  }, "<select> should not fire input and change events when new selected option has the same value as the old.");
 
   promise_test(async (t) => {
     const select = document.getElementById("select4");
@@ -209,34 +207,15 @@
     const select = document.getElementById("select2");
     await test_driver.send_keys(select, " ");
     assert_true(select.matches(':open'), "<Space> should open select");
-    await test_driver.send_keys(select, KEY_CODE_MAP.Enter);
+    await test_driver.send_keys(document.activeElement, KEY_CODE_MAP.Enter);
     assert_false(select.matches(':open'), "<Enter> should close select");
   }, "Check that <Space> opens <select>.");
 
   promise_test(async() => {
     const select = document.getElementById("select5WithTabIndex");
     await test_driver.send_keys(select, " ");
     assert_true(select.matches(':open'), "<Space> should open select");
-    await test_driver.send_keys(select, KEY_CODE_MAP.Enter);
+    await test_driver.send_keys(document.activeElement, KEY_CODE_MAP.Enter);
     assert_false(select.matches(':open'), "<Enter> should close select");
   }, "Check that <Space> opens <select> when <select> specifies tabindex");
-
-  promise_test(async() => {
-    const input6 = document.getElementById("input6");
-    const select = document.getElementById("select7");
-    const selectButton = document.getElementById("select7-button")
-
-    var keydown_count = 0;
-    selectButton.addEventListener("keydown", (e) => {
-      keydown_count++;
-    });
-
-    // Focus select via Tab traversal because focus() does not work when select
-    // has custom slot.
-    // TODO(http://crbug.com/1440573) Fix this.
-    await test_driver.send_keys(input6, KEY_CODE_MAP.Tab);
-
-    await test_driver.send_keys(select, "a");
-    assert_equals(keydown_count, 1, "button in shadowroot should have observed keydown");
-  }, "Test that <select> button slot receives key events.");
 </script>