Bug 1915311 [wpt PR 47827] - Remove author-provided <datalist> from <…

…select>, a=testonly

Automatic update from web-platform-tests
Remove author-provided <datalist> from <select>

The author-provided datalist imposes a lot of complexity, and now that
we aren't requiring it for HTML parser changes, it doesn't provide any
additional capabilities.

This patch also makes the UA popover actually have the popover attribute
and makes it a <div> instead of a <datalist>.

No code or concepts have "datalist" in them anymore except
::select-fallback-datalist because that is likely to get a different
standards-approved name soon.

This was discussed here: openui/open-ui#1082

This patch also moves a bunch of tests from external/wpt to wpt_internal
because we aren't allowed to use test_driver in reftests in
external/wpt, and I was using datalist.showPicker() in a bunch of
reftests which we can't do anymore because the popover is now a
pseudo-element which can only be opened via select.showPicker() which
requires user activation, and in order to get user activation, we have
to run test_driver.bless().

Change-Id: Ib8230bc5eec214f09147ae806490df729f1e4412
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5801649
Commit-Queue: Joey Arhar <[email protected]>
Reviewed-by: David Baron <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1348235}

--

wpt-commits: 0e5708e71e2ea4743e5da44e511579f31c33064c
wpt-pr: 47827

testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-datalist-options-idl.tentative.html

@@ -6,16 +6,16 @@
 
 <select>
   <option class=one>one</option>
-  <datalist id=datalist1>
+  <div id=div1>
     <option class=two>two</option>
-    <div id=div1>
+    <div>
       <option class=three>three</option>
     </div>
     <option class=four>four</option>
-  </datalist>
-  <datalist>
+  </div>
+  <div>
     <option class=five>five</option>
-  </datalist>
+  </div>
   <div id=div2>
     <option class=six>six</option>
   </div>
@@ -25,14 +25,13 @@
 const select = document.querySelector('select');
 
 function runTest() {
-  const datalist = document.getElementById('datalist1');
+  const wrapperDiv = document.getElementById('div1');
   const firstOption = select.querySelector('option.one');
   const secondOption = select.querySelector('option.two');
   const thirdOption = select.querySelector('option.three');
   const fourthOption = select.querySelector('option.four');
   const fifthOption = select.querySelector('option.five');
   const sixthOption = select.querySelector('option.six');
-  const datalistChildDiv = document.getElementById('div1');
   const selectChildDiv = document.getElementById('div2');
 
   assert_equals(select.length, 6, 'select.length');
@@ -57,7 +56,7 @@
   assert_equals(select.options[3], fifthOption, 'select.options[1] after removing an option');
   assert_equals(select.options[4], sixthOption, 'select.options[1] after removing an option');
 
-  datalist.appendChild(fourthOption);
+  wrapperDiv.appendChild(fourthOption);
   assert_equals(select.length, 6, 'select.length after re-adding an option');
   assert_equals(select.options.length, 6, 'select.options.length after re-adding an option');
   assert_equals(select.options[0], firstOption, 'select.options[0] after re-adding an option');
@@ -78,22 +77,22 @@
   assert_equals(select.options[5], fourthOption, 'select.options[5] after moving option to child div');
 
   // reset back to normal for the next test
-  datalist.appendChild(fourthOption);
+  wrapperDiv.appendChild(fourthOption);
   select.value = 'one';
 }
 
 test(() => {
   runTest();
-}, 'Option elements should work if they are a descendant of a selects datalist.');
+}, 'Option elements should work if they are a descendant of a selects wrapper div.');
 
 test(() => {
   select.setAttribute('multiple', '');
   runTest();
-}, 'Options in datalist should still work when the multiple attribute is added.');
+}, 'Options in wrapper div should still work when the multiple attribute is added.');
 
 test(() => {
   select.innerHTML = select.innerHTML;
   select.value = 'one';
   runTest();
-}, 'Options in datalist in multiple should work after re-parsing and re-attaching.');
+}, 'Options in wrapper div in multiple should work after re-parsing and re-attaching.');
 </script>