diff --git a/accessibility/crashtests/displaylocked-serialize.html b/accessibility/crashtests/displaylocked-serialize.html
index 76784291b44156..04be6ddf71a7f7 100644
--- a/accessibility/crashtests/displaylocked-serialize.html
+++ b/accessibility/crashtests/displaylocked-serialize.html
@@ -2,13 +2,13 @@
 <link rel=author href="mailto:jarhar@chromium.org">
 <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1291169">
 
-<selectmenu></selectmenu>
+<selectlist></selectlist>
 <div></div>
 
 <script>
   (async () => {
-    const selectmenu = document.querySelector('selectmenu');
+    const selectlist = document.querySelector('selectlist');
     await getComputedAccessibleNode(document.querySelector('div'));
-    selectmenu.style.setProperty('content-visibility', 'hidden');
+    selectlist.style.setProperty('content-visibility', 'hidden');
   })();
 </script>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-ask-for-reset.html b/html/semantics/forms/the-selectlist-element/selectlist-ask-for-reset.html
new file mode 100644
index 00000000000000..7cf2aff51594fa
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-ask-for-reset.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<title>HTMLSelectListElement Test: ask-for-reset</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<form name="fm1" id="form1">
+  <selectlist id="selectlist1">
+    <option>one</option>
+    <option>two</option>
+  </selectlist>
+
+  <selectlist id="selectlist2">
+    <option>one</option>
+    <option selected>two</option>
+  </selectlist>
+
+  <selectlist id="selectlist3">
+    <option>one</option>
+    <option selected>two</option>
+    <option selected>three</option>
+  </selectlist>
+</form>
+
+<script>
+function createSelectList(numberOfOptions) {
+  let selectList = document.createElement("selectlist");
+  for (let i = 0; i < numberOfOptions; i++) {
+    let option = document.createElement("option");
+    option.value = i;
+    selectList.appendChild(option);
+  }
+  return selectList;
+}
+
+function checkSelection(selectList, selectedOptionIndex, msg) {
+  for (let i = 0; i < selectList.children.length; i++) {
+    if (i != selectedOptionIndex) {
+      assert_false(selectList.children[i].selected);
+    }
+  }
+  assert_true(selectList.children[selectedOptionIndex].selected, msg);
+  assert_equals(selectList.value, selectList.children[selectedOptionIndex].value);
+}
+
+test(() => {
+  let selectList = createSelectList(5);
+
+  selectList.children[4].selected = true;
+  checkSelection(selectList, 4);
+
+  selectList.children[4].remove();
+  checkSelection(selectList, 0, "After removing the selected option, selection should default to first option.");
+
+  selectList.children[3].selected = true;
+  checkSelection(selectList, 3);
+  selectList.children[0].remove();
+  checkSelection(selectList, 2, "Removing non-selected option should have no effect.");
+}, "ask-for-reset when removing option");
+
+test(() => {
+  let selectList = createSelectList(3);
+  selectList.children[1].selected = true;
+
+  let newOption = document.createElement("option");
+  newOption.selected = true;
+  selectList.appendChild(newOption);
+  checkSelection(selectList, 3, "Inserting a selected option should update selection.");
+
+  let newOption2 = document.createElement("option");
+  newOption2.selected = true;
+  selectList.prepend(newOption2);
+  checkSelection(selectList, 0, "Inserting a selected option should update selection, even though it's not last in tree order.");
+
+  let newOption3 = document.createElement("option");
+  selectList.appendChild(newOption3);
+  checkSelection(selectList, 0, "Inserting a non-selected option should have no effect.");
+}, "ask-for-reset when inserting option");
+
+test(() => {
+  let selectList = createSelectList(3);
+  let options = selectList.children;
+
+  // select options from first to last
+  for (let i = 0; i < options.length; i++) {
+    options[i].selected = true;
+    checkSelection(selectList, i);
+  }
+
+  // select options from last to first
+  for (let i = options.length - 1; i >= 0; i--) {
+    options[i].selected = true;
+    checkSelection(selectList, i);
+  }
+
+  options[2].selected = true;
+  checkSelection(selectList, 2);
+  options[2].selected = false;
+  checkSelection(selectList, 0, "First non-disabled option should be selected.");
+
+  options[0].disabled = true;
+  options[2].selected = true;
+  checkSelection(selectList, 2);
+  options[2].selected = false;
+  checkSelection(selectList, 1, "First non-disabled option should be selected.");
+}, "ask-for-reset when changing selectedness of option");
+
+test(() => {
+  let selectList1 = document.getElementById("selectlist1");
+  let selectList2 = document.getElementById("selectlist2");
+  let selectList3 = document.getElementById("selectlist3");
+
+  document.getElementById("form1").reset();
+
+  assert_equals(selectList1.value, "one", "First non-disabled option should be selected.");
+  assert_equals(selectList2.value, "two", "The selected option should be selected.");
+  assert_equals(selectList3.value, "three", "Last selected option should be selected.")
+}, "ask-for-reset for form");
+</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-disabled.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-disabled.tentative.html
similarity index 72%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-disabled.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-disabled.tentative.html
index 0fe722fdfed192..f557804d9bf3d8 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-disabled.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-disabled.tentative.html
@@ -13,16 +13,16 @@
 }
 </script>
 
-<selectmenu id="selectmenu" onfocus="OnFocus(event)" disabled>
+<selectlist id="selectlist" onfocus="OnFocus(event)" disabled>
   <option>one</option>
   <option>two</option>
   <option>three</option>
-</selectmenu>
+</selectlist>
 
 <script>
 promise_test(async () => {
-  const selectmenu = document.getElementById("selectmenu");
-  selectmenu.focus();
+  const selectlist = document.getElementById("selectlist");
+  selectlist.focus();
   assert_equals(focused_element_id, null);
-}, "Check that disabled <selectmenu> cannot be focused");
+}, "Check that disabled <selectlist> cannot be focused");
 </script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-events.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-events.tentative.html
similarity index 55%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-events.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-events.tentative.html
index 830daaabc38611..94577815cd075c 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-events.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-events.tentative.html
@@ -1,59 +1,59 @@
 <!DOCTYPE html>
-<title>HTMLSelectMenuElement Test: events</title>
+<title>HTMLSelectListElement Test: events</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/testdriver.js"></script>
 <script src="/resources/testdriver-actions.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
 
-<selectmenu id="selectMenu0">
+<selectlist id="selectList0">
   <div slot="button" behavior="button">
     <span behavior="selected-value"></span>
-    <button id="selectMenu0-button">selectMenu0-button</button>
+    <button id="selectList0-button">selectList0-button</button>
   </div>
   <option>one</option>
   <option>two</option>
   <option>three</option>
-</selectmenu>
+</selectlist>
 
-<selectmenu id="selectMenu1">
+<selectlist id="selectList1">
   <option>one</option>
   <option>
     two
-    <button id="selectMenu1-button">selectMenu1-button</button>
+    <button id="selectList1-button">selectList1-button</button>
   </option>
   <option>three</option>
-</selectmenu>
+</selectlist>
 
-<selectmenu id="selectMenu2">
+<selectlist id="selectList2">
   <option>one</option>
   <option>two</option>
   <option>three</option>
-</selectmenu>
+</selectlist>
 
-<selectmenu id="selectMenu3">
+<selectlist id="selectList3">
   <option>same</option>
   <option>same</option>
-</selectmenu>
+</selectlist>
 
-<selectmenu id="selectMenu4">
+<selectlist id="selectList4">
   <option>one</option>
-  <option id="selectMenu4-option2">two</option>
-</selectmenu>
+  <option id="selectList4-option2">two</option>
+</selectlist>
 
-<selectmenu id="selectMenu5WithTabIndex" tabindex="1">
+<selectlist id="selectList5WithTabIndex" tabindex="1">
   <option>one</option>
   <option>two</option>
-</selectmenu>
+</selectlist>
 
 <input id="input6"/>
-<selectmenu id="selectMenu7">
-  <button slot="button" behavior="button" id="selectMenu7-button">
-    selectMenu7-button
+<selectlist id="selectList7">
+  <button slot="button" behavior="button" id="selectList7-button">
+    selectList7-button
   </button>
   <option>one</option>
   <option>two</option>
-</selectmenu>
+</selectlist>
 
 <script>
 
@@ -66,12 +66,12 @@
   }
 
   promise_test(async () => {
-    const selectMenu = document.getElementById("selectMenu0");
-    const selectMenuButton = document.getElementById("selectMenu0-button");
-    assert_false(selectMenu.open);
-    const selectMenuButtonPromise = new Promise(async resolve => {
-      selectMenuButton.addEventListener("click", (e) => {
-        assert_false(selectMenu.open, "Listbox shouldn't have opened yet");
+    const selectList = document.getElementById("selectList0");
+    const selectListButton = document.getElementById("selectList0-button");
+    assert_false(selectList.open);
+    const selectListButtonPromise = new Promise(async resolve => {
+      selectListButton.addEventListener("click", (e) => {
+        assert_false(selectList.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();
@@ -79,16 +79,16 @@
       });
     });
 
-    const selectMenuPromise = new Promise(async resolve => {
-      selectMenu.addEventListener("click", (e) => {
-        assert_true(e.defaultPrevented, "Event should have been defaultPrevented by selectMenuButton click handler");
-        assert_false(selectMenu.open, "Listbox shouldn't have opened, because click event was defaultPrevented.");
+    const selectListPromise = new Promise(async resolve => {
+      selectList.addEventListener("click", (e) => {
+        assert_true(e.defaultPrevented, "Event should have been defaultPrevented by selectListButton click handler");
+        assert_false(selectList.open, "Listbox shouldn't have opened, because click event was defaultPrevented.");
         resolve();
       });
     });
 
-    await clickOn(selectMenuButton);
-    return Promise.all([selectMenuButtonPromise, selectMenuPromise]);
+    await clickOn(selectListButton);
+    return Promise.all([selectListButtonPromise, selectListPromise]);
   }, "Button controller code should not run if the click event is preventDefaulted.");
 
   // See https://w3c.github.io/webdriver/#keyboard-actions
@@ -101,13 +101,13 @@
   };
 
   promise_test(async () => {
-    const selectMenu = document.getElementById("selectMenu1");
-    const selectMenuButton = document.getElementById("selectMenu1-button");
-    await clickOn(selectMenu);
-    assert_true(selectMenu.open);
-    const selectMenuButtonPromise = new Promise(async resolve => {
-      selectMenuButton.addEventListener("click", (e) => {
-        assert_true(selectMenu.open, "Listbox shouldn't have closed yet");
+    const selectList = document.getElementById("selectList1");
+    const selectListButton = document.getElementById("selectList1-button");
+    await clickOn(selectList);
+    assert_true(selectList.open);
+    const selectListButtonPromise = new Promise(async resolve => {
+      selectListButton.addEventListener("click", (e) => {
+        assert_true(selectList.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();
@@ -115,143 +115,143 @@
       });
     });
 
-    const selectMenuPromise = new Promise(async resolve => {
-      selectMenu.addEventListener("click", (e) => {
-        assert_true(e.defaultPrevented, "Event should have been defaultPrevented by selectMenuButton click handler");
-        assert_true(selectMenu.open, "Listbox shouldn't have closed, because keydown event was defaultPrevented.");
-        assert_equals(selectMenu.value, "one", "<selectmenu> shouldn't have changed value, because keydown event was defaultPrevented.");
+    const selectListPromise = new Promise(async resolve => {
+      selectList.addEventListener("click", (e) => {
+        assert_true(e.defaultPrevented, "Event should have been defaultPrevented by selectListButton click handler");
+        assert_true(selectList.open, "Listbox shouldn't have closed, because keydown event was defaultPrevented.");
+        assert_equals(selectList.value, "one", "<selectlist> shouldn't have changed value, because keydown event was defaultPrevented.");
         resolve();
       });
     });
 
-    await clickOn(selectMenuButton);
-    return Promise.all([selectMenuButtonPromise, selectMenuPromise]);
+    await clickOn(selectListButton);
+    return Promise.all([selectListButtonPromise, selectListPromise]);
   }, "Listbox controller code should not run if the click event is preventDefaulted.");
 
   promise_test(async () => {
-    const selectMenu = document.getElementById("selectMenu2");
+    const selectList = document.getElementById("selectList2");
     let input_event_count = 0;
     let change_event_count = 0;
 
-    selectMenu.addEventListener("input", (e) => {
+    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++;
     });
-    selectMenu.addEventListener("change", (e) => {
+    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++;
     });
 
-    await clickOn(selectMenu);
-    assert_true(selectMenu.open);
-    await test_driver.send_keys(selectMenu, KEY_CODE_MAP.Enter);
-    assert_false(selectMenu.open);
-    assert_equals(selectMenu.value, "one");
+    await clickOn(selectList);
+    assert_true(selectList.open);
+    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");
 
-    await clickOn(selectMenu);
-    assert_true(selectMenu.open);
-    await test_driver.send_keys(selectMenu, KEY_CODE_MAP.ArrowDown);
-    assert_equals(selectMenu.value, "two", "value should change when user switches options with arrow key");
+    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");
 
-    await test_driver.send_keys(selectMenu, KEY_CODE_MAP.Enter);
-    assert_equals(selectMenu.value, "two");
+    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");
-  }, "<selectmenu> should fire input and change events when new option is selected");
+  }, "<selectlist> should fire input and change events when new option is selected");
 
   promise_test(async () => {
-    const selectMenu = document.getElementById("selectMenu3");
+    const selectList = document.getElementById("selectList3");
     let input_event_count = 0;
     let change_event_count = 0;
 
-    selectMenu.addEventListener("input", (e) => {
+    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++;
     });
-    selectMenu.addEventListener("change", (e) => {
+    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++;
     });
 
-    await clickOn(selectMenu);
-    assert_true(selectMenu.open);
-    await test_driver.send_keys(selectMenu, KEY_CODE_MAP.ArrowDown);
-    await test_driver.send_keys(selectMenu, KEY_CODE_MAP.Enter);
+    await clickOn(selectList);
+    assert_true(selectList.open);
+    await test_driver.send_keys(selectList, KEY_CODE_MAP.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");
-  }, "<selectmenu> should fire input and change events even when new selected option has the same value as the old");
+  }, "<selectlist> should fire input and change events even when new selected option has the same value as the old");
 
   promise_test(async () => {
-    const selectMenu = document.getElementById("selectMenu4");
-    const selectMenuOption2 = document.getElementById("selectMenu4-option2");
+    const selectList = document.getElementById("selectList4");
+    const selectListOption2 = document.getElementById("selectList4-option2");
     let input_event_count = 0;
     let change_event_count = 0;
 
-    selectMenu.addEventListener("input", (e) => {
+    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++;
     });
 
-    selectMenu.addEventListener("change", (e) => {
+    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++;
     });
 
-    await clickOn(selectMenu);
-    assert_true(selectMenu.open);
-    await clickOn(selectMenuOption2);
+    await clickOn(selectList);
+    assert_true(selectList.open);
+    await clickOn(selectListOption2);
     assert_equals(input_event_count, 1, "input event shouldn't fire when selected option didn't change");
     assert_equals(change_event_count, 1, "change event shouldn't fire when selected option didn't change");
-  }, "<selectmenu> should fire input and change events when option in listbox is clicked");
+  }, "<selectlist> should fire input and change events when option in listbox is clicked");
 
   promise_test(async() => {
-    const selectMenu = document.getElementById("selectMenu2");
-    await test_driver.send_keys(selectMenu, " ");
-    assert_true(selectMenu.open, "<Space> should open selectmenu");
-    await test_driver.send_keys(selectMenu, KEY_CODE_MAP.Enter);
-    assert_false(selectMenu.open, "<Enter> should close selectmenu");
-  }, "Check that <Space> opens <selectmenu>.");
+    const selectList = document.getElementById("selectList2");
+    await test_driver.send_keys(selectList, " ");
+    assert_true(selectList.open, "<Space> should open selectlist");
+    await test_driver.send_keys(selectList, KEY_CODE_MAP.Enter);
+    assert_false(selectList.open, "<Enter> should close selectlist");
+  }, "Check that <Space> opens <selectlist>.");
 
   promise_test(async() => {
-    const selectMenu = document.getElementById("selectMenu5WithTabIndex");
-    await test_driver.send_keys(selectMenu, " ");
-    assert_true(selectMenu.open, "<Space> should open selectmenu");
-    await test_driver.send_keys(selectMenu, KEY_CODE_MAP.Enter);
-    assert_false(selectMenu.open, "<Enter> should close selectmenu");
-  }, "Check that <Space> opens <selectmenu> when <selectmenu> specifies tabindex");
+    const selectList = document.getElementById("selectList5WithTabIndex");
+    await test_driver.send_keys(selectList, " ");
+    assert_true(selectList.open, "<Space> should open selectlist");
+    await test_driver.send_keys(selectList, KEY_CODE_MAP.Enter);
+    assert_false(selectList.open, "<Enter> should close selectlist");
+  }, "Check that <Space> opens <selectlist> when <selectlist> specifies tabindex");
 
   promise_test(async() => {
     const input6 = document.getElementById("input6");
-    const selectMenu = document.getElementById("selectMenu7");
-    const selectMenuButton = document.getElementById("selectMenu7-button")
+    const selectList = document.getElementById("selectList7");
+    const selectListButton = document.getElementById("selectList7-button")
 
     var keydown_count = 0;
-    selectMenuButton.addEventListener("keydown", (e) => {
+    selectListButton.addEventListener("keydown", (e) => {
       keydown_count++;
     });
 
-    // Focus selectmenu via Tab traversal because focus() does not work when selectmenu
+    // Focus selectlist via Tab traversal because focus() does not work when selectlist
     // 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(selectMenu, "a");
+    await test_driver.send_keys(selectList, "a");
     assert_equals(keydown_count, 1, "button in shadowroot should have observed keydown");
-}, "Test that <selectmenu> button slot receives key events.");
+}, "Test that <selectlist> button slot receives key events.");
 </script>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-explicit-size-ref.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-explicit-size-ref.tentative.html
new file mode 100644
index 00000000000000..3e967d03ed0874
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-explicit-size-ref.tentative.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<script src="support/fake-selectlist.js"></script>
+<body>
+<script>
+  const selectlist = createFakeSelectlist('option');
+  document.body.appendChild(selectlist);
+  selectlist.style.width = "400px";
+  selectlist.style.height = "50px";
+</script>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-explicit-size.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-explicit-size.tentative.html
new file mode 100644
index 00000000000000..d9e52a9fff74ab
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-explicit-size.tentative.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<!-- Tests that selectlist respects explicit size -->
+<link rel=author href="mailto:pkotwicz@chromium.org">
+<link rel="match" href="selectlist-explicit-size-ref.tentative.html">
+
+<style>
+selectlist {
+  width:400px;
+  height:50px;
+}
+</style>
+<selectlist>
+  <option>option</option>
+</selectlist>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-font-size-ref.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-font-size-ref.tentative.html
new file mode 100644
index 00000000000000..46d6dbdb9b2c74
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-font-size-ref.tentative.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<script src="support/fake-selectlist.js"></script>
+<body>
+<script>
+  const selectlist = createFakeSelectlist('option');
+  document.body.appendChild(selectlist);
+  selectlist.style.fontSize = "48px";
+</script>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-font-size.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-font-size.tentative.html
new file mode 100644
index 00000000000000..9c30e71bda38ea
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-font-size.tentative.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<!-- Tests that selectlist respects explicit size -->
+<link rel=author href="mailto:pkotwicz@chromium.org">
+<link rel="match" href="selectlist-font-size-ref.tentative.html">
+
+<style>
+selectlist {
+  font-size:48px;
+}
+</style>
+<selectlist>
+  <option>option</option>
+</selectlist>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-form-attribute.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-form-attribute.tentative.html
similarity index 98%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-form-attribute.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-form-attribute.tentative.html
index 16ee1b8045654a..c1872b930392d1 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-form-attribute.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-form-attribute.tentative.html
@@ -1,4 +1,4 @@
-<!-- This test is tentative until the <selectmenu> gets adopted by standards. When that happens,
+<!-- This test is tentative until the <selectlist> gets adopted by standards. When that happens,
      this test can be folded back into these tests:
         html/semantics/forms/form-control-infrastructure/form_attribute.html
         html/semantics/forms/form-control-infrastructure/form.html -->
@@ -49,7 +49,7 @@
 
     <script>
       var reassociateableElements = [
-        "selectmenu",
+        "selectlist",
       ];
 
       var form1 = null;
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-form-elements.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-form-elements.tentative.html
similarity index 68%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-form-elements.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-form-elements.tentative.html
index eed098256ca41f..07e5be6ef4f47f 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-form-elements.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-form-elements.tentative.html
@@ -1,25 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
-<title>HTMLSelectMenuElement Test: form.elements</title>
+<title>HTMLSelectListElement Test: form.elements</title>
 <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>
 
 <form id="form0">
-<selectmenu id="selectmenu0">
+<selectlist id="selectlist0">
   <option>one</option>
   <option>two</option>
   <option>three</option>
-</selectmenu>
+</selectlist>
 <form>
 
 <script>
 promise_test(async t => {
   // TODO: Move test to /the-form-element/form-elements-filter.html once
-  // <selectmenu> becomes part of the HTML spec.
+  // <selectlist> becomes part of the HTML spec.
   const formElements = document.querySelector("#form0").elements;
   assert_equals(formElements.length, 1);
-  assert_equals(formElements[0].id, "selectmenu0");
-}, "Check that <selectmenu> is exposed in form.elements");
+  assert_equals(formElements[0].id, "selectlist0");
+}, "Check that <selectlist> is exposed in form.elements");
 </script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-form-state-restore.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-form-state-restore.tentative.html
similarity index 76%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-form-state-restore.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-form-state-restore.tentative.html
index 1002355a5ab1ea..f98494a950719e 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-form-state-restore.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-form-state-restore.tentative.html
@@ -1,37 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
-<title>HTMLSelectMenuElement Test: form state restore</title>
+<title>HTMLSelectListElement Test: form state restore</title>
 <link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
 <input id="emptyOnFirstVisit">
 <form action="support/back.html" id="form0">
-<selectmenu id="selectmenu0">
+<selectlist id="selectlist0">
   <option>one</option>
   <option>two</option>
   <option>three</option>
-</selectmenu>
+</selectlist>
 </form>
 
 <script>
 async_test(t => {
   window.onload = () => t.step_timeout(() => {
     let state = document.getElementById('emptyOnFirstVisit');
-    let selectMenu = document.getElementById("selectmenu0");
+    let selectList = document.getElementById("selectlist0");
 
     if (!state.value) {
       // First visit.
       t.step_timeout(() => {
         state.value = 'visited';
-        assert_equals(selectMenu.value, "one");
-        selectMenu.value = "two";
+        assert_equals(selectList.value, "one");
+        selectList.value = "two";
         // The form is submitted in a timeout to make sure that a new back/forward list item is created.
         document.getElementById('form0').submit();
       }, 0);
     } else {
       // Went back to this page again, and the form state should be restored.
-      assert_equals(selectMenu.value, "two");
+      assert_equals(selectList.value, "two");
       t.done();
     }
   }, 1);
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-form-submission.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-form-submission.tentative.html
similarity index 68%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-form-submission.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-form-submission.tentative.html
index 75a2b17e9037a5..4b5e4970287b4d 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-form-submission.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-form-submission.tentative.html
@@ -1,33 +1,33 @@
 <!DOCTYPE html>
 <html lang="en">
-<title>HTMLSelectMenuElement Test: form submission</title>
+<title>HTMLSelectListElement Test: form submission</title>
 <link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
 <form id="form0">
-  <selectmenu name="s0" id="selectmenu0">
+  <selectlist name="s0" id="selectlist0">
     <option selected>one</option>
     <option>two</option>
     <option>three</option>
-  </selectmenu>
+  </selectlist>
 </form>
 
 <form id="form1">
   <input type="text" name="i1" value="test">
-  <selectmenu id="selectmenu1">
+  <selectlist id="selectlist1">
     <option selected>one</option>
     <option>two</option>
     <option>three</option>
-  </selectmenu>
+  </selectlist>
 </form>
 
 <script>
 
 test(() => {
   const form0 = document.getElementById("form0");
-  const selectMenu0 = document.getElementById("selectmenu0");
-  assert_equals(selectMenu0.value, "one");
+  const selectList0 = document.getElementById("selectlist0");
+  assert_equals(selectList0.value, "one");
 
   const formData = new FormData(form0);
   let entries = 0;
@@ -37,12 +37,12 @@
     entries++;
   }
   assert_equals(entries, 1);
-}, "Test that HTMLSelectMenu.value is used for form submission");
+}, "Test that HTMLSelectList.value is used for form submission");
 
 test(() => {
   const form1 = document.getElementById("form1");
-  const selectMenu1 = document.getElementById("selectmenu1");
-  assert_equals(selectMenu1.value, "one");
+  const selectList1 = document.getElementById("selectlist1");
+  assert_equals(selectList1.value, "one");
 
   const formData = new FormData(form1);
   let entries = 0;
@@ -52,6 +52,6 @@
     entries++;
   }
   assert_equals(entries, 1);
-}, "Test that HTMLSelectMenu.value is not used for form submission without name attribute");
+}, "Test that HTMLSelectList.value is not used for form submission without name attribute");
 
 </script>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-keyboard.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-keyboard.tentative.html
new file mode 100644
index 00000000000000..38c5fd7dc4ed95
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-keyboard.tentative.html
@@ -0,0 +1,123 @@
+<!doctype html>
+<title>HTMLSelectListElement Test: keyboard accessibility</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+  <selectlist id="selectList0">
+    <div id="selectList0-button0" slot="button" behavior="button" tabindex="0">button</div>
+    <option>one</option>
+    <option>two</option>
+    <option>three</option>
+  </selectlist>
+
+  <selectlist id="selectList1">
+    <option id="selectList1-child0">one</option>
+  </selectlist>
+
+  <selectlist id="selectList2" disabled>
+    <div id="selectList2-button0" slot="button" behavior="button" tabindex="0">button</div>
+    <option disabled>one</option>
+    <option>two</option>
+    <option>three</option>
+  </selectlist>
+
+  <selectlist id="selectList3">
+    <div id="selectList3-button0" slot="button" behavior="button" tabindex="0">button</div>
+    <option>one</option>
+    <option disabled>two</option>
+    <option>three</option>
+  </selectlist>
+<script>
+// See https://w3c.github.io/webdriver/#keyboard-actions
+const KEY_CODE_MAP = {
+  'Enter':      '\uE007',
+  'Space':      '\uE00D',
+  'ArrowUp':    '\uE013',
+  'ArrowDown':  '\uE015'
+};
+
+function clickOn(element) {
+    const actions = new test_driver.Actions();
+    return actions.pointerMove(0, 0, {origin: element})
+      .pointerDown({button: actions.ButtonType.LEFT})
+      .pointerUp({button: actions.ButtonType.LEFT})
+      .send();
+  }
+
+promise_test(async t => {
+  const selectList = document.querySelector("#selectList0");
+  const button = document.querySelector("#selectList0-button0");
+  assert_false(selectList.open, "selectlist should not be initially open");
+
+  await test_driver.send_keys(button, KEY_CODE_MAP.Enter);
+  assert_true(selectList.open, "Enter key should open selectlist");
+  assert_equals(selectList.value, "one");
+
+  await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowDown);
+  assert_equals(selectList.value, "two", "Down arrow should go to next option");
+
+  await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowDown);
+  assert_equals(selectList.value, "three", "Down arrow should go to next option");
+
+  await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowDown);
+  assert_equals(selectList.value, "three", "Down arrow should do nothing if already at the last option");
+
+  await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowUp);
+  assert_equals(selectList.value, "two", "Up arrow should go to the previous option");
+
+  await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowUp);
+  assert_equals(selectList.value, "one", "Up arrow should go to the previous option");
+
+  await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowUp);
+  assert_equals(selectList.value, "one", "Up arrow should do nothing if already at the first option");
+
+  await test_driver.send_keys(selectList, KEY_CODE_MAP.Enter);
+  assert_false(selectList.open, "Enter key should close selectlist");
+
+  await test_driver.send_keys(selectList, " ");
+  assert_true(selectList.open, "Space key should open selectlist");
+
+  // This behavior is suspicious (since Space key can open the selectlist),
+  // but it maches <select>. See https://github.com/openui/open-ui/issues/386
+  await test_driver.send_keys(selectList, " ");
+  assert_true(selectList.open, "Space key should *not* close selectlist");
+
+  await test_driver.send_keys(selectList, KEY_CODE_MAP.Enter);
+  assert_false(selectList.open, "Enter key should close selectlist");
+}, "Validate Enter, Up/Down Arrow, and Space keyboard accessibility support for <selectlist>");
+
+promise_test(async t => {
+  const selectListOption = document.getElementById("selectList1-child0");
+  const event = document.createEvent("Event");
+  event.initEvent("keydown");
+  selectListOption.dispatchEvent(event);
+}, "Firing a synthetic event at a selectlist's option doesn't crash");
+
+promise_test(async t => {
+  const selectList2 = document.querySelector("#selectList2");
+  const selectList2Button = document.querySelector("#selectList2-button0");
+  assert_false(selectList2.open, "selectlist should not be initially open");
+
+  await test_driver.send_keys(selectList2Button, KEY_CODE_MAP.Enter);
+  assert_false(selectList2.open, "Enter key should not open a disabled selectlist");
+  await clickOn(selectList2);
+  assert_false(selectList2.open, "Click should not open a disabled selectlist");
+  assert_equals(selectList2.value, "one");
+
+  const selectList3 = document.querySelector("#selectList3");
+  const selectList3Button = document.querySelector("#selectList3-button0");
+  assert_false(selectList3.open, "selectlist should not be initially open");
+
+  await test_driver.send_keys(selectList3Button, KEY_CODE_MAP.Enter);
+  assert_true(selectList3.open, "Enter key should open selectlist");
+  assert_equals(selectList3.value, "one");
+
+  await test_driver.send_keys(selectList3, KEY_CODE_MAP.ArrowDown);
+  assert_equals(selectList3.value, "three", "Down arrow should go to next non-disabled option");
+
+  await test_driver.send_keys(selectList3, KEY_CODE_MAP.ArrowUp);
+  assert_equals(selectList3.value, "one", "Up arrow should go to the previous non-disabled option");
+}, "Validate Enter, Up/Down Arrow keyboard accessibility support for disabled <selectlist>");
+</script>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-labels.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-labels.tentative.html
new file mode 100644
index 00000000000000..819da49fdd4137
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-labels.tentative.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<title>HTMLSelectListElement Test: labels</title>
+<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<label id="label1" for="selectlist1">Label 1</label>
+<selectlist id="selectlist1">
+  <option>one</option>
+  <option>two</option>
+  <option>three</option>
+  <option>four</option>
+</selectlist>
+<label id="label2" for="selectlist1">Label 2</label>
+<label id="label3" for="invalid-selectlist1">Label 3</label>
+
+<script>
+
+test(() => {
+  let selectList = document.getElementById("selectlist1");
+
+  assert_true(selectList.labels instanceof NodeList);
+  assert_equals(selectList.labels.length, 2);
+  assert_equals(selectList.labels[0], document.getElementById("label1"));
+  assert_equals(selectList.labels[1], document.getElementById("label2"));
+}, "Validate selectlist.labels");
+
+</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-listbox-fallback-change-crash.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-listbox-fallback-change-crash.tentative.html
similarity index 77%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-listbox-fallback-change-crash.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-listbox-fallback-change-crash.tentative.html
index 690a98dcf3219e..1a9e81d8178a24 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-listbox-fallback-change-crash.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-listbox-fallback-change-crash.tentative.html
@@ -3,19 +3,19 @@
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1400522">
 <link rel="author" href="mailto:xiaochengh@chromium.org">
 
-<selectmenu id="selectMenu" style="position: absolute;">
+<selectlist id="selectList" style="position: absolute;">
     <div slot="button">
         <button id="b1" behavior="button"></button>
     </div>
-    <selectmenu>
+    <selectlist>
         <div slot="button">
             <button id="b2" behavior="button">x</button>
         </div>
         <div id="listbox" popover slot="listbox" behavior="listbox">
             <option>y</option>
         </div>
-    </selectmenu>
-</selectmenu>
+    </selectlist>
+</selectlist>
 
 <script type="module">
     const raf = () => new Promise(resolve => requestAnimationFrame(resolve));
@@ -23,12 +23,12 @@
     document.querySelector('#b1').click();
     document.querySelector('#b2').click();
 
-    document.querySelector('#selectMenu').style.top = '-25px';
+    document.querySelector('#selectList').style.top = '-25px';
 
     await raf();
     await raf();
 
-    document.querySelector('#selectMenu').style.top = '0px';
+    document.querySelector('#selectList').style.top = '0px';
 
     document.documentElement.classList.remove('test-wait');
 </script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-many-options.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-many-options.tentative.html
similarity index 82%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-many-options.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-many-options.tentative.html
index b828326197b636..36bae1a82baec5 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-many-options.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-many-options.tentative.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-<title>HTMLSelectMenuElement Test: many options</title>
+<title>HTMLSelectListElement Test: many options</title>
 <link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
@@ -9,13 +9,13 @@
 <script src="/resources/testdriver-vendor.js"></script>
 
 <style>
-  #selectMenu0 {
+  #selectList0 {
     position: absolute;
     top: 0px;
     left: 0px;
   }
 
-  #selectMenu0-popover {
+  #selectList0-popover {
     border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 4px;
     box-shadow: 0px 12.8px 28.8px rgba(0, 0, 0, 0.13), 0px 0px 9.2px rgba(0, 0, 0, 0.11);
@@ -25,8 +25,8 @@
   }
 </style>
 
-<selectmenu id="selectMenu0">
-  <div popover slot="listbox" behavior="listbox" id="selectMenu0-popover">
+<selectlist id="selectList0">
+  <div popover slot="listbox" behavior="listbox" id="selectList0-popover">
     <option>bottom left</option>
     <option>two</option>
     <option>three</option>
@@ -115,7 +115,7 @@
     <option>two</option>
     <option>three</option>
   </div>
-</selectmenu>
+</selectlist>
 <br>
 
 <script>
@@ -128,13 +128,13 @@
   }
 
   promise_test(async () => {
-    const selectMenu0 = document.getElementById("selectMenu0");
-    const selectMenu0Popover = document.getElementById("selectMenu0-popover");
+    const selectList0 = document.getElementById("selectList0");
+    const selectList0Popover = document.getElementById("selectList0-popover");
 
-    await clickOn(selectMenu0);
-    assert_equals(Math.round(selectMenu0.getBoundingClientRect().bottom), Math.round(selectMenu0Popover.getBoundingClientRect().top));
-    assert_equals(Math.round(selectMenu0.getBoundingClientRect().left), Math.round(selectMenu0Popover.getBoundingClientRect().left));
-    assert_equals(window.innerHeight, Math.round(selectMenu0Popover.getBoundingClientRect().bottom));
+    await clickOn(selectList0);
+    assert_equals(Math.round(selectList0.getBoundingClientRect().bottom), Math.round(selectList0Popover.getBoundingClientRect().top));
+    assert_equals(Math.round(selectList0.getBoundingClientRect().left), Math.round(selectList0Popover.getBoundingClientRect().left));
+    assert_equals(window.innerHeight, Math.round(selectList0Popover.getBoundingClientRect().bottom));
   }, "The popover should be bottom left positioned");
 
 </script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-marker-end-aligned-ref.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-marker-end-aligned-ref.tentative.html
similarity index 74%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-marker-end-aligned-ref.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-marker-end-aligned-ref.tentative.html
index 5985df5936bcec..b1df8a65816380 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-marker-end-aligned-ref.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-marker-end-aligned-ref.tentative.html
@@ -5,15 +5,15 @@
   display:flex;
   justify-content:flex-end;
 }
-selectmenu {
+selectlist {
   width:100px;
 }
-selectmenu::part(button) {
+selectlist::part(button) {
   border-style:none;
   background-color:rgba(0,0,0,0)
 }
 </style>
 <div>
-<selectmenu>
+<selectlist>
   <option></option>
-</selectmenu>
+</selectlist>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-marker-end-aligned.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-marker-end-aligned.tentative.html
similarity index 58%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-marker-end-aligned.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-marker-end-aligned.tentative.html
index a419108e3d2fdd..c2540acb368c7b 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-marker-end-aligned.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-marker-end-aligned.tentative.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<!-- Tests that <selectmenu> marker is end-aligned -->
+<!-- Tests that <selectlist> marker is end-aligned -->
 <link rel=author href="mailto:pkotwicz@chromium.org">
-<link rel="match" href="selectmenu-marker-end-aligned-ref.tentative.html">
+<link rel="match" href="selectlist-marker-end-aligned-ref.tentative.html">
 
 <style>
 div {
@@ -9,15 +9,15 @@
   display:flex;
   justify-content:flex-end;
 }
-selectmenu {
+selectlist {
   width:200px;
 }
-selectmenu::part(button) {
+selectlist::part(button) {
   border-style:none;
   background-color:rgba(0,0,0,0)
 }
 </style>
 <div>
-<selectmenu>
+<selectlist>
   <option></option>
-</selectmenu>
+</selectlist>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-marker-part-ref.html b/html/semantics/forms/the-selectlist-element/selectlist-marker-part-ref.html
new file mode 100644
index 00000000000000..1a1302b96db7ac
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-marker-part-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<script src="support/fake-selectlist.js"></script>
+<body>
+<script>
+  const selectlist = createFakeSelectlist('hello world');
+  document.body.appendChild(selectlist);
+  selectlist.querySelector('.fake-selectlist-internal-selectlist-button-icon')
+    .style.backgroundColor = 'red';
+</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-marker-part.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-marker-part.tentative.html
similarity index 56%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-marker-part.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-marker-part.tentative.html
index b6e94c947a4273..dedabc9bab78d9 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-marker-part.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-marker-part.tentative.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <link rel=author href="mailto:jarhar@chromium.org">
-<link rel=match href="selectmenu-marker-part-ref.html">
+<link rel=match href="selectlist-marker-part-ref.html">
 
 <style>
-selectmenu::part(marker) {
+selectlist::part(marker) {
   background-color: red;
 }
 </style>
-<selectmenu>
+<selectlist>
   <option>hello world</option>
-</selectmenu>
+</selectlist>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-marker-slot-ref.html b/html/semantics/forms/the-selectlist-element/selectlist-marker-slot-ref.html
new file mode 100644
index 00000000000000..e910df4c5abc60
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-marker-slot-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<script src="support/fake-selectlist.js"></script>
+<body>
+<script>
+  const selectlist = createFakeSelectlist('hello world');
+  document.body.appendChild(selectlist);
+
+  const oldMarker = selectlist.querySelector('.fake-selectlist-internal-selectlist-button-icon');
+  const newMarker = document.createElement('div');
+  newMarker.textContent = 'marker';
+
+  replaceChildElement(newMarker, oldMarker);
+</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-marker-slot.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-marker-slot.tentative.html
similarity index 61%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-marker-slot.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-marker-slot.tentative.html
index fff911005d8710..de43a02c33f0e7 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-marker-slot.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-marker-slot.tentative.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <link rel=author href="mailto:jarhar@chromium.org">
-<link rel=match href="selectmenu-marker-slot-ref.html">
+<link rel=match href="selectlist-marker-slot-ref.html">
 
-<selectmenu>
+<selectlist>
   <div slot=marker>marker</div>
   <option>hello world</option>
-</selectmenu>
+</selectlist>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-marker-visible-overflow-ref.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-marker-visible-overflow-ref.tentative.html
similarity index 67%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-marker-visible-overflow-ref.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-marker-visible-overflow-ref.tentative.html
index 674de192e4c43c..dda53db5bf859f 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-marker-visible-overflow-ref.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-marker-visible-overflow-ref.tentative.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <style>
-selectmenu {
+selectlist {
   width:100px;
 }
 </style>
 <div>
-<selectmenu>
+<selectlist>
   <option>&nbsp;</option>
-</selectmenu>
+</selectlist>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-marker-visible-overflow.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-marker-visible-overflow.tentative.html
similarity index 59%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-marker-visible-overflow.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-marker-visible-overflow.tentative.html
index 6d39f6f3c50107..345c2059837af3 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-marker-visible-overflow.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-marker-visible-overflow.tentative.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
-<!-- Tests that the marker is visible when the <selectmenu> contains more text than it can show -->
+<!-- Tests that the marker is visible when the <selectlist> contains more text than it can show -->
 <link rel=author href="mailto:pkotwicz@chromium.org">
-<link rel="match" href="selectmenu-marker-visible-overflow-ref.tentative.html">
+<link rel="match" href="selectlist-marker-visible-overflow-ref.tentative.html">
 
 <style>
-selectmenu {
+selectlist {
   width:100px;
 }
 </style>
 <div>
-<selectmenu>
+<selectlist>
   <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
-</selectmenu>
+</selectlist>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-nested.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-nested.tentative.html
similarity index 52%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-nested.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-nested.tentative.html
index 06b4fb6eb248f4..1d15fb90160f3d 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-nested.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-nested.tentative.html
@@ -1,23 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-<title>HTMLSelectMenuElement Test: nested selects</title>
+<title>HTMLSelectListElement Test: nested selects</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/testdriver.js"></script>
 <script src="/resources/testdriver-actions.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
 
-<selectmenu id="selectMenu0">
+<selectlist id="selectList0">
   <div popover slot="listbox" behavior="listbox">
-    <selectmenu id="nested0">
+    <selectlist id="nested0">
       <option id="child1">one</option>
       <option id="child2">two</option>
-    </selectmenu>
+    </selectlist>
     <option id="child3">three</option>
   </div>
-</selectmenu>
+</selectlist>
 
-<selectmenu id="selectMenu1">
+<selectlist id="selectList1">
   <div popover slot="listbox" behavior="listbox">
     <select>
       <option>one</option>
@@ -25,18 +25,18 @@
     </select>
     <option>three</option>
   </div>
-</selectmenu>
+</selectlist>
 
-<selectmenu id="selectMenu2">
+<selectlist id="selectList2">
   <div slot="button">
-    <selectmenu id="nested2">
-      <div slot="button" behavior="button" id="selectMenu2-button0">button0</div>
+    <selectlist id="nested2">
+      <div slot="button" behavior="button" id="selectList2-button0">button0</div>
       <option id="nested2-option1">one</option>
-    </selectmenu>
-    <div behavior="button" id="selectMenu2-button1">button1</div>
+    </selectlist>
+    <div behavior="button" id="selectList2-button1">button1</div>
   </div>
   <option>two</option>
-</selectmenu>
+</selectlist>
 
 <script>
   function clickOn(element) {
@@ -48,12 +48,12 @@
   }
 
   promise_test(async () => {
-    const selectMenu0 = document.getElementById("selectMenu0");
+    const selectList0 = document.getElementById("selectList0");
     const nested0 = document.getElementById("nested0");
     const child2 = document.getElementById("child2");
-    assert_equals(selectMenu0.value, "three", "Options nested in another <selectmenu> should not get controller code from outer <selectmenu>");
-    await clickOn(selectMenu0);
-    assert_true(selectMenu0.open);
+    assert_equals(selectList0.value, "three", "Options nested in another <selectlist> should not get controller code from outer <selectlist>");
+    await clickOn(selectList0);
+    assert_true(selectList0.open);
     assert_false(nested0.open);
 
     await clickOn(nested0);
@@ -62,33 +62,33 @@
     await clickOn(child2);
     assert_false(nested0.open);
     assert_equals(nested0.value, "two");
-    assert_true(selectMenu0.open, "click on option in inner <selectmenu> should not close outer <selectmenu>");
-    assert_equals(selectMenu0.value, "three", "click on option in inner <selectmenu> should not change value of outer <selectmenu>");
-  }, "A <selectmenu> shouldn't apply controller code to parts nested in a <selectmenu> child");
+    assert_true(selectList0.open, "click on option in inner <selectlist> should not close outer <selectlist>");
+    assert_equals(selectList0.value, "three", "click on option in inner <selectlist> should not change value of outer <selectlist>");
+  }, "A <selectlist> shouldn't apply controller code to parts nested in a <selectlist> child");
 
   promise_test(async () => {
-    const selectMenu1 = document.getElementById("selectMenu1");
-    assert_equals(selectMenu0.value, "three");
-  }, "A <selectmenu> shouldn't apply controller code to parts nested in a <select> child");
+    const selectList1 = document.getElementById("selectList1");
+    assert_equals(selectList0.value, "three");
+  }, "A <selectlist> shouldn't apply controller code to parts nested in a <select> child");
 
   promise_test(async () => {
-    const selectMenu2 = document.getElementById("selectMenu2");
+    const selectList2 = document.getElementById("selectList2");
     const nested2 = document.getElementById("nested2");
-    const button0 = document.getElementById("selectMenu2-button0");
-    const button1 = document.getElementById("selectMenu2-button1");
+    const button0 = document.getElementById("selectList2-button0");
+    const button1 = document.getElementById("selectList2-button1");
     const nested2Option1 = document.getElementById("nested2-option1");
-    assert_false(selectMenu2.open);
+    assert_false(selectList2.open);
     assert_false(nested2.open);
 
     await clickOn(button0);
-    assert_false(selectMenu2.open, "Clicking the button of a nested <selectmenu> should not open the outer <selectmenu>");
-    assert_true(nested2.open, "Clicking the button of a nested <selectmenu> should open the outer <selectmenu>");
+    assert_false(selectList2.open, "Clicking the button of a nested <selectlist> should not open the outer <selectlist>");
+    assert_true(nested2.open, "Clicking the button of a nested <selectlist> should open the outer <selectlist>");
 
     await clickOn(nested2Option1);
     assert_false(nested2.open);
 
     await clickOn(button1);
-    assert_true(selectMenu2.open);
+    assert_true(selectList2.open);
     assert_false(nested2.open);
-  }, "A nested button part in a nested <selectmenu> shouldn't get controller code even if it comes first in document order");
+  }, "A nested button part in a nested <selectlist> shouldn't get controller code even if it comes first in document order");
 </script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-displayed-ref.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed-ref.tentative.html
similarity index 92%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-displayed-ref.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed-ref.tentative.html
index c890bb63f1bdd4..61b1c1a7108b93 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-displayed-ref.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed-ref.tentative.html
@@ -3,16 +3,16 @@
 <link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
 <link rel="stylesheet" href="/fonts/ahem.css">
 
-<selectmenu id="selectMenu0">
+<selectlist id="selectList0">
   <option>option with image displayed</option>
-</selectmenu>
+</selectlist>
 <div id=fakelistbox>
   option with image displayed
   <img src="/images/green-256x256.png">
 </div>
 
 <style>
-  html,selectmenu {
+  html,selectlist {
     font-family: Ahem;
   }
   #fakelistbox {
@@ -35,7 +35,7 @@
     padding: 4px;
   }
 
-  selectmenu {
+  selectlist {
     position: absolute;
     top: 0px;
     left: 0px;
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-displayed.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html
similarity index 82%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-displayed.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html
index 416f2dc2ac0aa5..2d51002fb2e7e3 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-displayed.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html
@@ -1,18 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
-<title>HTMLSelectMenuElement Test: option arbitrary content displayed</title>
+<title>HTMLSelectListElement Test: option arbitrary content displayed</title>
 <link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
-<link rel=match href="selectmenu-option-arbitrary-content-displayed-ref.tentative.html">
+<link rel=match href="selectlist-option-arbitrary-content-displayed-ref.tentative.html">
 <link rel="stylesheet" href="/fonts/ahem.css">
 <script src="/resources/testdriver.js"></script>
 <script src="/resources/testdriver-actions.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
 
 <style>
-  html,selectmenu {
+  html,selectlist {
     font-family: Ahem;
   }
-  selectmenu {
+  selectlist {
     position: absolute;
     top: 0px;
     left: 0px;
@@ -38,14 +38,14 @@
   }
 </style>
 
-<selectmenu id="selectMenu0">
+<selectlist id="selectList0">
   <div popover slot="listbox" behavior="listbox">
     <option>
       option with image displayed
       <img src="/images/green-256x256.png">
     </option>
   </div>
-</selectmenu>
+</selectlist>
 
 <script>
   function clickOn(element) {
@@ -57,9 +57,9 @@
   }
 
   async function test() {
-    const selectMenu0 = document.getElementById("selectMenu0");
+    const selectList0 = document.getElementById("selectList0");
 
-    await clickOn(selectMenu0);
+    await clickOn(selectList0);
     document.documentElement.classList.remove('reftest-wait');
   }
 
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-not-displayed-ref.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-not-displayed-ref.tentative.html
similarity index 89%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-not-displayed-ref.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-not-displayed-ref.tentative.html
index d12943105f8c47..fa44198fff0a91 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-not-displayed-ref.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-not-displayed-ref.tentative.html
@@ -6,8 +6,8 @@
   option with image not displayed
 </option>
 
-<selectmenu>
-</selectmenu>
+<selectlist>
+</selectlist>
 
 <option>
   option with image not displayed
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-not-displayed.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-not-displayed.tentative.html
similarity index 57%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-not-displayed.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-not-displayed.tentative.html
index 7bc936e7dc48f1..66b87ec33b9cc2 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-not-displayed.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-not-displayed.tentative.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
-<title>HTMLSelectMenuElement Test: option arbitrary content not displayed</title>
+<title>HTMLSelectListElement Test: option arbitrary content not displayed</title>
 <link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
-<link rel=match href="selectmenu-option-arbitrary-content-not-displayed-ref.tentative.html">
+<link rel=match href="selectlist-option-arbitrary-content-not-displayed-ref.tentative.html">
 <script src="/resources/testdriver.js"></script>
 <script src="/resources/testdriver-actions.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
@@ -12,17 +12,17 @@
   <img src="/images/green-256x256.png">
 </option>
 
-<selectmenu id="selectMenu0">
-  <option id="selectMenu0-option">
+<selectlist id="selectList0">
+  <option id="selectList0-option">
     option with image not displayed
     <img src="/images/green-256x256.png">
   </option>
-</selectmenu>
+</selectlist>
 
 <script>
-  const selectMenu0Option = document.getElementById("selectMenu0-option");
+  const selectList0Option = document.getElementById("selectList0-option");
 
-  // removing an option from <selectmenu> should revert back to its original display behavior
-  selectMenu0Option.remove();
-  document.body.append(selectMenu0Option);
+  // removing an option from <selectlist> should revert back to its original display behavior
+  selectList0Option.remove();
+  document.body.append(selectList0Option);
 </script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-option-focusable.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-option-focusable.tentative.html
similarity index 65%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-option-focusable.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-option-focusable.tentative.html
index a78b972a2a7b4e..993ef007e68305 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-option-focusable.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-option-focusable.tentative.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-<title>HTMLSelectMenuElement Test: option facusable</title>
+<title>HTMLSelectListElement Test: option facusable</title>
 <link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
@@ -8,11 +8,11 @@
 <script src="/resources/testdriver-actions.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
 
-<selectmenu id="selectmenu0">
+<selectlist id="selectlist0">
   <option>one</option>
-  <option id="selectmenu0-option2">two</option>
+  <option id="selectlist0-option2">two</option>
   <option>three</option>
-</selectmenu>
+</selectlist>
 
 <script>
 // See https://w3c.github.io/webdriver/#keyboard-actions
@@ -32,18 +32,18 @@
 }
 
 promise_test(async t => {
-  const selectMenu = document.querySelector("#selectmenu0");
-  assert_false(selectMenu.open, "selectmenu should not be initially open");
+  const selectList = document.querySelector("#selectlist0");
+  assert_false(selectList.open, "selectlist should not be initially open");
 
-  await clickOn(selectMenu);
-  assert_true(selectMenu.open);
-  assert_equals(selectMenu.value, "one");
+  await clickOn(selectList);
+  assert_true(selectList.open);
+  assert_equals(selectList.value, "one");
 
-  const option2 = document.querySelector('#selectmenu0-option2');
+  const option2 = document.querySelector('#selectlist0-option2');
   option2.focus();
   assert_equals(document.activeElement, option2);
 
-  await test_driver.send_keys(selectMenu, KEY_CODE_MAP.Enter);
-  assert_equals(selectMenu.value, "two");
-}, "Validate <option> is focusable when is a descendant of <selectmenu>");
+  await test_driver.send_keys(selectList, KEY_CODE_MAP.Enter);
+  assert_equals(selectList.value, "two");
+}, "Validate <option> is focusable when is a descendant of <selectlist>");
 </script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-overflow-x-ref.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-overflow-x-ref.tentative.html
similarity index 63%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-overflow-x-ref.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-overflow-x-ref.tentative.html
index 8fd33dbc0722c0..df87060359bc38 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-overflow-x-ref.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-overflow-x-ref.tentative.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <style>
-selectmenu {
+selectlist {
   width:30px;
   height:20px;
 }
-selectmenu::part(button) {
+selectlist::part(button) {
   background-color:blue;
 }
 </style>
-<selectmenu>
+<selectlist>
   <option>&nbsp;</option>
-</selectmenu>
+</selectlist>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-overflow-x.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-overflow-x.tentative.html
similarity index 56%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-overflow-x.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-overflow-x.tentative.html
index 0e0c3dba5e852d..93c1b948a09602 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-overflow-x.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-overflow-x.tentative.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
-<!-- Tests that selectmenu button part text is truncated by the button. -->
+<!-- Tests that selectlist button part text is truncated by the button. -->
 <link rel=author href="mailto:pkotwicz@chromium.org">
-<link rel="match" href="selectmenu-overflow-x-ref.tentative.html">
+<link rel="match" href="selectlist-overflow-x-ref.tentative.html">
 <style>
-selectmenu {
+selectlist {
   width:30px;
   height:20px;
 }
-selectmenu::part(button) {
+selectlist::part(button) {
   background-color:blue;
 }
 </style>
-<selectmenu>
+<selectlist>
   <option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</option>
-</selectmenu>
+</selectlist>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-parts-structure.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-parts-structure.tentative.html
new file mode 100644
index 00000000000000..f60ba65be17d18
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-parts-structure.tentative.html
@@ -0,0 +1,530 @@
+<!DOCTYPE html>
+<html lang="en">
+<title>HTMLSelectListElement Test: part structure</title>
+<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<selectlist id="selectList0">
+  <div popover slot="listbox" behavior="listbox">
+    <option id="selectList0-child1">one</option>
+    <option id="selectList0-child2">two</option>
+    <div behavior="option" id="selectList0-child3">three</div>
+  </div>
+  <option id="selectList0-child4">four</option>
+</selectlist>
+
+<selectlist id="selectList1">
+  <div popover slot="listbox" behavior="listbox" id="selectList1-popover">
+    <div behavior="button" id="selectList1-button">
+      Custom button
+    </div>
+    <option>one</option>
+    <option id="selectList1-child2">two</option>
+  </div>
+</selectlist>
+
+<selectlist id="selectList2">
+  <div slot="button" behavior="button" id="selectList2-button">
+    Custom button
+    <div popover behavior="listbox" id="selectList2-popover">
+      <option>one</option>
+      <option id="selectList2-child2">two</option>
+    </div>
+  </div>
+  <option>three</option>
+  <div>
+    This is some text.
+    <option id="selectList2-child4">four</option>
+    More text.
+  </div>
+</selectlist>
+
+<selectlist id="selectList3">
+  <div slot="button" id="selectList3-button-slot">
+    <div behavior="button" id="selectList3-button0">button0</div>
+  </div>
+  <option>one</option>
+</selectlist>
+
+<selectlist id="selectList4">
+  <div slot="button" behavior="button" id="selectList4-button0">button0</div>
+  <div slot="listbox" id="selectList4-listbox-slot">
+    <div popover behavior="listbox" id="selectList4-listbox0">
+      <option>one</option>
+      <option id="selectList4-option2">two</option>
+    </div>
+  </div>
+</selectlist>
+
+<selectlist id="selectList5">
+  <div slot="button" id="selectList5-button-slot">
+    <div behavior="button" id="selectList5-button0">button0</div>
+    <div behavior="selected-value" id="selectList5-selectedValue0"></div>
+  </div>
+  <option>one</option>
+  <option id="selectList5-option0">two</option>
+</selectlist>
+
+<!-- No associated JS test -- just don't crash when parsing! -->
+<selectlist id="selectList6">
+  <div slot="button"></div>
+  <div popover slot="listbox" behavior="listbox"></div>
+</selectlist>
+
+<!-- No associated JS test -- just don't crash when parsing! -->
+<selectlist id="selectList7">
+  <div slot="listbox"></div>
+  <div slot="button" behavior="button"></div>
+</selectlist>
+
+<!-- No associated JS test -- just don't crash when parsing! -->
+<selectlist id="selectList8">
+  <div slot="listbox"></div>
+  <option>one</option>
+</selectlist>
+
+<selectlist id="selectList9">
+  <div slot="listbox" id="selectList9-listbox-slot">
+    <div popover behavior="listbox" id="selectList9-originalListbox">
+      <option>one</option>
+      <option id="selectList9-option2">two</option>
+    </div>
+  </div>
+</selectlist>
+
+<selectlist id="selectList10">
+  <option slot="button" id="selectList10-slottedOption">Test 10</option>
+  <option>one</option>
+  <option id="selectList10-option2">two</option>
+</selectlist>
+
+<selectlist id="selectList11">
+  <div popover slot="listbox" behavior="listbox">
+    <option>one</option>
+  </div>
+  <div slot="button" behavior="listbox" id="selectList11-button">Test</div>
+</selectlist>
+
+<selectlist id="selectList12">
+  <div slot="button" id="selectList12-button-slot">
+    <div behavior="button" id="selectList12-button0">button0</div>
+  </div>
+  <div slot="listbox" id="selectList12-listbox-slot">
+    <div popover behavior="listbox" id="selectList12-originalListbox">
+      <option id="selectList12-option1">one</option>
+      <option>two</option>
+    </div>
+  </div>
+</selectlist>
+
+<selectlist id="selectList13">
+  <div slot="button" id="selectList12-button-slot">
+    <div id="selectList13-removeContent-button">
+      <div behavior="button" id="selectList13-button0">button0</div>
+      <div behavior="button" id="selectList13-button1">button1</div>
+    </div>
+    <div behavior="button" id="selectList13-button2">button2</div>
+  </div>
+  <div slot="listbox" id="selectList13-listbox-slot">
+    <div id="selectList13-removeContent-listbox">
+      <div popover behavior="listbox" id="selectList13-originalListbox">
+        <option id="selectList13-option1">one</option>
+        <option id="selectList13-option2">two</option>
+      </div>
+    </div>
+    <div popover behavior="listbox" id="selectList13-newListbox">
+      <option>three</option>
+      <option id="selectList13-option4">four</option>
+    </div>
+  </div>
+</selectlist>
+
+<selectlist id="selectList14">
+  <div slot="button" behavior="button" id="selectList14-button0">button0</div>
+  <option>one</option>
+  <option id="selectList14-option2">two</option>
+</selectlist>
+
+<selectlist id="selectList15">
+  <div slot="button" id="selectList15-div0"></div>
+  <option>one</option>
+</selectlist>
+
+<selectlist id="selectList16">
+  <div slot="button">
+    <div id="selectList16-div0">
+      <div behavior="button" id="selectList16-button0">button</div>
+    </div>
+  </div>
+  <option>one</option>
+</selectlist>
+
+<script>
+  function clickOn(element) {
+    const actions = new test_driver.Actions();
+    return actions.pointerMove(0, 0, {origin: element})
+      .pointerDown({button: actions.ButtonType.LEFT})
+      .pointerUp({button: actions.ButtonType.LEFT})
+      .send();
+  }
+
+  promise_test(async () => {
+    const selectList0 = document.getElementById("selectList0");
+    const selectList0Child1 = document.getElementById("selectList0-child1");
+    const selectList0Child2 = document.getElementById("selectList0-child2");
+    const selectList0Child3 = document.getElementById("selectList0-child3");
+    assert_equals(selectList0.value, "one");
+    await clickOn(selectList0);
+    await clickOn(selectList0Child2);
+    assert_equals(selectList0.value, "two");
+
+    await clickOn(selectList0);
+    await clickOn(selectList0Child3);
+    assert_equals(selectList0.value, "two", "Clicking a non-HTMLOptionElement labeled as an option should do nothing");
+
+    await clickOn(selectList0Child1);
+    assert_equals(selectList0.value, "one");
+    assert_false(selectList0.open);
+  }, "HTMLOptionElements (and not other element types) should receive option controller code");
+
+
+  promise_test(async () => {
+    const selectList0 = document.getElementById("selectList0");
+    const selectList0Child4 = document.getElementById("selectList0-child4");
+
+    assert_equals(selectList0.value, "one");
+    await clickOn(selectList0);
+    assert_true(selectList0.open);
+    selectList0Child4.click();
+    assert_equals(selectList0.value, "one", "Clicking an option outside of the popover should not change the value");
+  }, "To receive option part controller code, an option must be a descendant of the listbox part in a flat tree traversal");
+
+  promise_test(async () => {
+    const selectList1 = document.getElementById("selectList1");
+    const selectList1Popover = document.getElementById("selectList1-popover");
+    const selectList1Button = document.getElementById("selectList1-button");
+    const selectList1Child2 = document.getElementById("selectList1-child2");
+    assert_false(selectList1Popover.matches(':popover-open'));
+    selectList1Button.click();
+    assert_false(selectList1Popover.matches(':popover-open'), "Clicking a button part that is a descendant of the listbox part should have no effect");
+
+    assert_equals(selectList1.value, "one");
+    await clickOn(selectList1);
+    assert_true(selectList1Popover.matches(':popover-open'));
+    await clickOn(selectList1Child2);
+    assert_equals(selectList1.value, "two", "Clicking an <option> should change the value");
+  }, "To receive button part controller code, an element labeled as a button must not be a descendant of the listbox part in a flat tree traversal");
+
+  promise_test(async () => {
+    const selectList2 = document.getElementById("selectList2");
+    const selectList2Popover = document.getElementById("selectList2-popover");
+    const selectList2Button = document.getElementById("selectList2-button");
+    const selectList2Child2 = document.getElementById("selectList2-child2");
+    const selectList2Child4 = document.getElementById("selectList2-child4");
+
+    assert_false(selectList2Popover.matches(':popover-open'));
+    await clickOn(selectList2Button);
+    assert_false(selectList2Popover.matches(':popover-open'), "Clicking a button part should not show an invalid listbox part");
+
+    assert_equals(selectList2.value, "three");
+    await clickOn(selectList2Button);
+    await clickOn(selectList2Child4);
+    assert_equals(selectList2.value, "four", "Clicking an <option> that is a descendant of a valid listbox part should update the value");
+  }, "To receive listbox part controller code, an element labeled as a listbox must not be a descendant of the button part in a flat tree traversal");
+
+  promise_test(async () => {
+    const selectList3 = document.getElementById("selectList3");
+    const selectList3ButtonSlot = document.getElementById("selectList3-button-slot");
+    const selectList3Button0 = document.getElementById("selectList3-button0");
+
+    assert_false(selectList3.open);
+
+    let button1 = document.createElement("div");
+    button1.innerText = "button1";
+    button1.setAttribute("behavior", "button");
+    selectList3ButtonSlot.appendChild(button1);
+
+    await clickOn(button1);
+    assert_false(selectList3.open, "A button part should only get controller code if it's first in document order, even if added dynamically");
+
+    await clickOn(selectList3Button0);
+    assert_true(selectList3.open, "A button part should get controller code if it's first in document order");
+  }, "Button controller code should be applied in flat tree traversal order regardless of dynamic insertion order");
+
+  promise_test(async () => {
+    const selectList4 = document.getElementById("selectList4");
+    const selectList4Button0 = document.getElementById("selectList4-button0");
+    const selectList4ListboxSlot = document.getElementById("selectList4-listbox-slot");
+    const selectList4Option2 = document.getElementById("selectList4-option2");
+
+    assert_false(selectList4.open);
+
+    let listbox2 = document.createElement("div");
+    listbox2.innerHTML = `
+      <option>three</option>
+      <option id="selectList4-option4">four</option>
+    `;
+    listbox2.setAttribute("behavior", "listbox");
+    selectList4ListboxSlot.appendChild(listbox2);
+
+    await clickOn(selectList4Button0);
+    assert_true(selectList4.open);
+
+    const selectList4Option4 = document.getElementById("selectList4-option4");
+    await clickOn(selectList4Option4);
+    assert_equals(selectList3.value, "one", "An option in a listbox should not get controller code if its listbox isn't first in document order, even if added dynamically");
+
+    await clickOn(selectList4Button0);
+    assert_true(selectList4.open);
+
+    await clickOn(selectList4Option2);
+    assert_equals(selectList4.value, "two", "An option in a listbox should get controller code if its listbox is first in document order, even if another listbox was added dynamically");
+}, "Listbox controller code should be applied in flat tree traversal order regardless of dynamic insertion order");
+
+promise_test(async () => {
+    const selectList5 = document.getElementById("selectList5");
+    const selectList5ButtonSlot = document.getElementById("selectList5-button-slot");
+    const selectList5Button0 = document.getElementById("selectList5-button0");
+    const selectList5SelectedValue0 = document.getElementById("selectList5-selectedValue0");
+
+    assert_false(selectList3.open);
+    assert_equals(selectList5SelectedValue0.innerText, "one");
+
+    let selectedValue1 = document.createElement("div");
+    selectList5ButtonSlot.appendChild(selectedValue1);
+
+    await clickOn(selectList5Button0);
+    assert_true(selectList5.open);
+
+    await clickOn(document.getElementById("selectList5-option0"));
+    assert_false(selectList5.open);
+    assert_equals(selectList5SelectedValue0.innerText, "two", "first selected-value part in flat tree order should get controller code");
+    assert_equals(selectedValue1.innerText, "", "Dynamically inserted selected-value part shouldn't get controller code if it's not first in flat tree order");
+  }, "selected-value controller code should be applied in flat tree traversal order regardless of dynamic insertion order");
+
+  promise_test(async () => {
+    const selectList = document.getElementById("selectList9");
+    const originalListbox = document.getElementById("selectList9-originalListbox");
+    const option2 = document.getElementById("selectList9-option2");
+    assert_equals(selectList.value, "one", "Initial value should be the first option");
+
+    let newListbox = document.createElement("div");
+    newListbox.setAttribute("popover", "auto");
+    newListbox.setAttribute("behavior", "listbox");
+    let newOption = document.createElement("option");
+    newOption.innerText = "three";
+    newListbox.appendChild(newOption);
+    let newOption2 = document.createElement("option");
+    newOption2.innerText = "four";
+    newListbox.appendChild(newOption2);
+    originalListbox.parentElement.insertBefore(newListbox, originalListbox);
+
+    await clickOn(selectList);
+    assert_true(selectList.open, "Menu should open when clicked");
+
+    option2.click(); // clickOn doesn't work because the old options are not displayed
+    assert_equals(selectList.value, "three", "Elements in second popover should no longer be option parts");
+    assert_true(selectList.open, "Clicking non-part options shouldn't close the popover");
+
+    await clickOn(newOption2);
+    assert_false(selectList.open);
+    assert_equals(selectList.value, "four", "New options should get controller code after listbox switch");
+    }, "Ensure that option controller code is updated when listbox changes");
+
+  promise_test(async () => {
+    const selectList = document.getElementById("selectList10");
+    const selectList10SlottedOption = document.getElementById("selectList10-slottedOption");
+
+    await clickOn(selectList10SlottedOption);
+    assert_false(selectList.open, "Controller code not applied due to part attribute missing");
+    selectList10SlottedOption.setAttribute("behavior", "button");
+    await clickOn(selectList10SlottedOption);
+    assert_true(selectList.open);
+
+    const option2 = document.getElementById("selectList10-option2");
+    await clickOn(option2);
+    assert_equals(selectList.value, "two");
+    assert_false(selectList.open);
+
+    selectList10SlottedOption.slot = "";
+    await clickOn(selectList);
+    assert_true(selectList.open, "Default button part should be used");
+    await clickOn(selectList10SlottedOption);
+    assert_equals(selectList.value, "Test 10");
+  }, "Ensure that controller code is applied after updating the slot attribute");
+
+  promise_test(async () => {
+    const selectList = document.getElementById("selectList11");
+    const selectList11Button= document.getElementById("selectList11-button");
+
+    await clickOn(selectList11Button);
+    assert_false(selectList.open, "Controller code not applied due to part attribute not being button");
+    selectList11Button.remove();
+
+    await clickOn(selectList);
+    assert_true(selectList.open, "Default button part should be used");
+  }, "Ensure that controller code is applied when slot and part attributes are different");
+
+  promise_test(async () => {
+    const selectList = document.getElementById("selectList12");
+    const originalListbox = document.getElementById("selectList12-originalListbox");
+    assert_equals(selectList.value, "one", "Initial value should be the first option");
+
+    const selectListButtonSlot = document.getElementById("selectList12-button-slot");
+    const selectListButton0 = document.getElementById("selectList12-button0");
+    const selectListOption1 = document.getElementById("selectList12-option1");
+
+    assert_false(selectList.open);
+    let button1 = document.createElement("div");
+    button1.innerText = "button1";
+    button1.setAttribute("behavior", "button");
+    selectListButtonSlot.insertBefore(button1, selectListButton0);
+    button1.click();
+    assert_true(selectList.open, "Controller code should be applied to the new first button in document order");
+    await clickOn(selectListOption1);
+    assert_false(selectList.open);
+    selectListButton0.click();
+    assert_false(selectList.open);
+
+    let button2 = document.createElement("div");
+    button2.innerText = "button2";
+    selectListButtonSlot.insertBefore(button2, button1);
+    button2.click();
+    assert_false(selectList.open, "Controller code should not be applied to button2 since it doesn't have behavior attribute set");
+    button2.setAttribute("behavior", "button");
+    button2.click();
+    assert_true(selectList.open, "Controller code should be applied to the new button part");
+    await clickOn(selectListOption1);
+    assert_false(selectList.open);
+
+    let newListbox = document.createElement("div");
+    newListbox.setAttribute("popover", "auto");
+    newListbox.setAttribute("behavior", "listbox");
+    let newOption = document.createElement("option");
+    newOption.innerText = "three";
+    newListbox.appendChild(newOption);
+    let newOption2 = document.createElement("option");
+    newOption2.innerText = "four";
+    newListbox.appendChild(newOption2);
+    originalListbox.parentElement.insertBefore(newListbox, originalListbox);
+    assert_equals(selectList.value, "three", "New value should be the first option");
+
+    newListbox.innerHTML = "<option>five</option><option>six</option>";
+    assert_equals(selectList.value, "five", "New value should be the first option");
+
+    selectList.innerHTML = "<option>seven</option><option id='selectList12-option2'>eight</option>";
+    assert_equals(selectList.value, "seven", "New value should be the first option");
+    const selectListOption2 = document.getElementById("selectList12-option2");
+    await clickOn(selectList);
+    assert_true(selectList.open);
+    await clickOn(selectListOption2);
+    assert_equals(selectList.value, "eight", "Controller code should be applied to new options");
+
+    selectListOption2.slot = "button";
+    assert_equals(selectList.value, "seven", "Previous selected option should become invalid");
+  }, "Ensure that controller code is synchronously applied");
+
+  promise_test(async () => {
+    const selectList = document.getElementById("selectList13");
+    assert_equals(selectList.value, "one");
+
+    const selectListButton0 = document.getElementById("selectList13-button0");
+    const selectListButton1 = document.getElementById("selectList13-button1");
+    selectListButton1.click();
+    assert_false(selectList.open);
+    selectListButton0.click();
+    assert_true(selectList.open, "First button should receive controller code");
+    await clickOn(document.getElementById("selectList13-option2"));
+    assert_equals(selectList.value, "two");
+    let divButtonToRemove = document.getElementById("selectList13-removeContent-button");
+    divButtonToRemove.innerHTML = "";
+    selectListButton0.click();
+    assert_false(selectList.open, "The first button is invalid");
+    const selectListButton2 = document.getElementById("selectList13-button2");
+    selectListButton2.click();
+    assert_true(selectList.open, "The button part should be updated")
+    await clickOn(document.getElementById("selectList13-option1"));
+    assert_equals(selectList.value, "one");
+
+    const selectListOption4 = document.getElementById("selectList13-option4");
+    selectListOption4.click();
+    assert_equals(selectList.value, "one");
+    let divListboxToRemove = document.getElementById("selectList13-removeContent-listbox");
+    divListboxToRemove.innerHTML = "";
+    assert_equals(selectList.value, "three", "The listbox part should be updated");
+    selectListOption4.click();
+    assert_equals(selectList.value, "four", "Controller code should be applied to the new options");
+
+    let selectListNewListbox = document.getElementById("selectList13-newListbox");
+    selectListNewListbox.innerHTML = "";
+    assert_equals(selectList.value, "");
+    selectListOption4.click();
+    assert_equals(selectList.value, "");
+  }, "Controller code should be updated when nested parts are removed");
+
+  promise_test(async () => {
+    let selectList = document.getElementById("selectList14");
+    assert_equals(selectList.value, "one");
+    const selectListButton0 = document.getElementById("selectList14-button0");
+    const selectListOption2 = document.getElementById("selectList14-option2");
+
+    selectListButton0.click();
+    assert_true(selectList.open);
+    await clickOn(selectListOption2);
+    assert_equals(selectList.value, "two");
+
+    document.body.removeChild(selectList);
+    selectList.removeChild(selectListOption2);
+    assert_equals(selectList.value, "one");
+    let newOption = document.createElement("option");
+    newOption.innerText = "three";
+    selectList.appendChild(newOption);
+    newOption.click();
+    assert_equals(selectList.value, "three", "New option should receive controller code");
+
+    let doc = document.implementation.createHTMLDocument('');
+    let selectList1 = doc.createElement('selectlist');
+    let firstOption = doc.createElement('option');
+    firstOption.innerText = 'one';
+    let secondOption = doc.createElement('option');
+    secondOption.innerText = 'two';
+    selectList1.appendChild(firstOption);
+    selectList1.appendChild(secondOption);
+    assert_equals(selectList1.value, "one");
+    secondOption.click();
+    assert_equals(selectList1.value, "two");
+    document.body.appendChild(selectList1);
+    selectList1.removeChild(secondOption);
+    assert_equals(selectList1.value, "one");
+  }, "Moving a selectlist between documents should keep controller code active");
+
+  promise_test(async () => {
+    const selectList = document.getElementById("selectList15");
+    const selectListButtonContainer = document.getElementById("selectList15-div0");
+
+    const outerDiv = document.createElement("div");
+    const button = document.createElement("input");
+    button.type = button.value = "button";
+    button.setAttribute("behavior", "button");
+    outerDiv.appendChild(button);
+    selectListButtonContainer.appendChild(outerDiv);
+
+    await clickOn(selectList);
+    assert_true(selectList.open, "New button should receive controller code");
+  }, "New parts should be detected even when in the subtree of an inserted node");
+
+  promise_test(async () => {
+    const selectList = document.getElementById("selectList16");
+    const selectListButtonContainer = document.getElementById("selectList16-div0");
+    const selectListButton = document.getElementById("selectList16-button0");
+
+    selectListButtonContainer.remove();
+
+    selectListButton.click();
+    assert_false(selectList.open, "Removed button should no longer have controller code");
+  }, "Part removals should be detected even when in the subtree of a removed node");
+</script>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-popover-position-with-zoom.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-popover-position-with-zoom.tentative.html
new file mode 100644
index 00000000000000..2f61af1a11f73c
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-popover-position-with-zoom.tentative.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+<title>HTMLSelectListElement Test: popover position with zoom</title>
+<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+  #selectList0 {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    zoom: 2;
+  }
+
+  #selectList1 {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    zoom: 1.5;
+  }
+
+  #selectList1-popover {
+    zoom: 2;
+  }
+
+  #selectList2 {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    zoom: 3;
+  }
+
+  #selectList3 {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    zoom: 4;
+  }
+
+  #selectList3-popover {
+    zoom: 1.5;
+  }
+</style>
+
+<selectlist id="selectList0">
+  <div slot="button" behavior="button" id="selectList0-button">Custom bottom left</div>
+  <div popover slot="listbox" behavior="listbox" id="selectList0-popover">
+    <option>bottom left</option>
+    <option>two</option>
+    <option>three</option>
+  </div>
+</selectlist>
+<br>
+
+<selectlist id="selectList1">
+  <div slot="button" behavior="button" id="selectList1-button">Custom top left</div>
+  <div popover slot="listbox" behavior="listbox" id="selectList1-popover">
+    <option>top left</option>
+    <option>two</option>
+    <option>three</option>
+  </div>
+</selectlist>
+
+<selectlist id="selectList2">
+  <div slot="button" behavior="button" id="selectList2-button">Custom bottom right</div>
+  <div popover slot="listbox" behavior="listbox" id="selectList2-popover">
+    <option>bottom right</option>
+    <option>two</option>
+    <option>three</option>
+  </div>
+</selectlist>
+
+<selectlist id="selectList3">
+  <div slot="button" behavior="button" id="selectList3-button">Custom top right</div>
+  <div popover slot="listbox" behavior="listbox" id="selectList3-popover">
+    <option>top right</option>
+    <option>two</option>
+    <option>three</option>
+  </div>
+</selectlist>
+
+<script>
+  function clickOn(element) {
+    const actions = new test_driver.Actions();
+    return actions.pointerMove(0, 0, {origin: element})
+      .pointerDown({button: actions.ButtonType.LEFT})
+      .pointerUp({button: actions.ButtonType.LEFT})
+      .send();
+  }
+
+  promise_test(async () => {
+    const selectList0 = document.getElementById("selectList0");
+    const selectList0Popover = document.getElementById("selectList0-popover");
+    const selectList0Button = document.getElementById("selectList0-button");
+
+    await clickOn(selectList0);
+    assert_equals(Math.abs(Math.trunc(selectList0.getBoundingClientRect().bottom - selectList0Popover.getBoundingClientRect().top)), 0);
+    assert_equals(Math.abs(Math.trunc(selectList0.getBoundingClientRect().left - selectList0Popover.getBoundingClientRect().left)), 0);
+  }, "The popover should be bottom left positioned");
+
+  promise_test(async () => {
+    const selectList1 = document.getElementById("selectList1");
+    const selectList1Popover = document.getElementById("selectList1-popover");
+    const selectList1Button = document.getElementById("selectList1-button");
+
+    selectList1Button.click();
+    assert_equals(Math.abs(Math.trunc(selectList1.getBoundingClientRect().top - selectList1Popover.getBoundingClientRect().bottom * 2)), 0);
+    assert_equals(Math.abs(Math.trunc(selectList1.getBoundingClientRect().left - selectList1Popover.getBoundingClientRect().left * 2)), 0);
+  }, "The popover should be top left positioned");
+
+  promise_test(async () => {
+    const selectList2 = document.getElementById("selectList2");
+    const selectList2Popover = document.getElementById("selectList2-popover");
+    const selectList2Button = document.getElementById("selectList2-button");
+
+    selectList2Button.click();
+    assert_equals(Math.abs(Math.trunc(selectList2.getBoundingClientRect().bottom - selectList2Popover.getBoundingClientRect().top)), 0);
+    assert_equals(Math.abs(Math.trunc(selectList2.getBoundingClientRect().right - selectList2Popover.getBoundingClientRect().right)), 0);
+  }, "The popover should be bottom right positioned");
+
+  promise_test(async () => {
+    const selectList3 = document.getElementById("selectList3");
+    const selectList3Popover = document.getElementById("selectList3-popover");
+    const selectList3Button = document.getElementById("selectList3-button");
+
+    selectList3Button.click();
+    assert_equals(Math.abs(Math.trunc(selectList3.getBoundingClientRect().top - selectList3Popover.getBoundingClientRect().bottom * 1.5)), 0);
+    assert_equals(Math.abs(Math.trunc(selectList3.getBoundingClientRect().right - selectList3Popover.getBoundingClientRect().right * 1.5)), 0);
+  }, "The popover should be top right positioned");
+
+</script>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-popover-position.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-popover-position.tentative.html
new file mode 100644
index 00000000000000..a19e2b0d282def
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-popover-position.tentative.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+<title>HTMLSelectListElement Test: popover position</title>
+<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+  #selectList0 {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+
+  #selectList1 {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+  }
+
+  #selectList2 {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+  }
+
+  #selectList3 {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+  }
+</style>
+
+<selectlist id="selectList0">
+  <div popover slot="listbox" behavior="listbox" id="selectList0-popover">
+    <option>bottom left</option>
+    <option>two</option>
+    <option>three</option>
+  </div>
+</selectlist>
+<br>
+
+<selectlist id="selectList1">
+  <div popover slot="listbox" behavior="listbox" id="selectList1-popover">
+    <option>top left</option>
+    <option>two</option>
+    <option>three</option>
+  </div>
+</selectlist>
+
+<selectlist id="selectList2">
+  <div popover slot="listbox" behavior="listbox" id="selectList2-popover">
+    <option>bottom right</option>
+    <option>two</option>
+    <option>three</option>
+  </div>
+</selectlist>
+
+<selectlist id="selectList3">
+  <div popover slot="listbox" behavior="listbox" id="selectList3-popover">
+    <option>top right</option>
+    <option>two</option>
+    <option>three</option>
+  </div>
+</selectlist>
+
+<script>
+  function clickOn(element) {
+    const actions = new test_driver.Actions();
+    return actions.pointerMove(0, 0, {origin: element})
+      .pointerDown({button: actions.ButtonType.LEFT})
+      .pointerUp({button: actions.ButtonType.LEFT})
+      .send();
+  }
+
+  promise_test(async () => {
+    const selectList0 = document.getElementById("selectList0");
+    const selectList0Popover = document.getElementById("selectList0-popover");
+
+    await clickOn(selectList0);
+    assert_equals(Math.abs(Math.trunc(selectList0.getBoundingClientRect().bottom - selectList0Popover.getBoundingClientRect().top)), 0);
+    assert_equals(Math.abs(Math.trunc(selectList0.getBoundingClientRect().left - selectList0Popover.getBoundingClientRect().left)), 0);
+  }, "The popover should be bottom left positioned");
+
+  promise_test(async () => {
+    const selectList1 = document.getElementById("selectList1");
+    const selectList1Popover = document.getElementById("selectList1-popover");
+
+    await clickOn(selectList1);
+    assert_equals(Math.abs(Math.trunc(selectList1.getBoundingClientRect().top - selectList1Popover.getBoundingClientRect().bottom)), 0);
+    assert_equals(Math.abs(Math.trunc(selectList1.getBoundingClientRect().left - selectList1Popover.getBoundingClientRect().left)), 0);
+  }, "The popover should be top left positioned");
+
+  promise_test(async () => {
+    const selectList2 = document.getElementById("selectList2");
+    const selectList2Popover = document.getElementById("selectList2-popover");
+
+    await clickOn(selectList2);
+    assert_equals(Math.abs(Math.trunc(selectList2.getBoundingClientRect().bottom - selectList2Popover.getBoundingClientRect().top)), 0);
+    assert_equals(Math.abs(Math.trunc(selectList2.getBoundingClientRect().right - selectList2Popover.getBoundingClientRect().right)), 0);
+  }, "The popover should be bottom right positioned");
+
+  promise_test(async () => {
+    const selectList3 = document.getElementById("selectList3");
+    const selectList3Popover = document.getElementById("selectList3-popover");
+
+    await clickOn(selectList3);
+    assert_equals(Math.abs(Math.trunc(selectList3.getBoundingClientRect().top - selectList3Popover.getBoundingClientRect().bottom)), 0);
+    assert_equals(Math.abs(Math.trunc(selectList3.getBoundingClientRect().right - selectList3Popover.getBoundingClientRect().right)), 0);
+  }, "The popover should be top right positioned");
+
+</script>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-popover.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-popover.tentative.html
new file mode 100644
index 00000000000000..b7663875ce0643
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-popover.tentative.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<title>HTMLSelectListElement Test: popover</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<selectlist id="selectList0">
+  <option>one</option>
+  <option id="selectList0-child2">two</option>
+  <div id="selectList0-child3">I'm a div with no part attr</div>
+  <option>three</option>
+  <option>four</option>
+</selectlist>
+
+<selectlist id="selectList1">
+  <div slot="button" behavior="button" class="button">
+    Custom button
+  </div>
+  <div popover slot="listbox" behavior="listbox">
+    <option>one</option>
+    <option class="child2">two</option>
+    <option class="child3">three</option>
+  </div>
+</selectlist>
+
+<selectlist id="selectList2">
+  <!-- Swap out the listbox part without providing a replacement -->
+  <div slot="listbox"></div>
+</selectlist>
+
+<selectlist id="selectList3">
+  <div slot="listbox">
+    <div popover behavior="listbox" id="selectList3-listbox">
+      <option>one</option>
+    </div>
+  </div>
+</selectlist>
+<script>
+
+  function clickOn(element) {
+    const actions = new test_driver.Actions();
+    return actions.pointerMove(0, 0, {origin: element})
+      .pointerDown({button: actions.ButtonType.LEFT})
+      .pointerUp({button: actions.ButtonType.LEFT})
+      .send();
+  }
+
+  promise_test(async () => {
+    const selectList0 = document.getElementById("selectList0");
+    const selectList0Child2 = document.getElementById("selectList0-child2");
+    const selectList0Child3 = document.getElementById("selectList0-child3");
+    assert_equals(selectList0.value, "one");
+    assert_equals(selectList0.open, false);
+    await clickOn(selectList0);
+    assert_equals(selectList0.open, true);
+    await clickOn(selectList0Child2);
+    assert_equals(selectList0.value, "two");
+    assert_equals(selectList0.open, false);
+
+    await clickOn(selectList0);
+    assert_equals(selectList0.open, true);
+    await clickOn(selectList0Child3);
+    assert_equals(selectList0.value, "two", "Clicking a non-option should not change the value");
+    assert_equals(selectList0.open, true);
+    await clickOn(selectList0Child2);
+    assert_equals(selectList0.open, false);
+  }, "Opening the popover and clicking an option should change the selectlist's value");
+
+  promise_test(async () => {
+    const selectList1 = document.getElementById("selectList1");
+    const button = selectList1.querySelector(".button");
+    const child2 = selectList1.querySelector(".child2");
+    const child3 = selectList1.querySelector(".child3");
+    assert_equals(selectList1.value, "one");
+    assert_equals(selectList1.open, false);
+    await clickOn(button);
+    assert_equals(selectList1.open, true);
+    await clickOn(child2);
+    assert_equals(selectList1.value, "two", "Clicking an <option> should change the value");
+    assert_equals(selectList1.open, false);
+
+    await clickOn(button);
+    assert_equals(selectList1.open, true);
+    await clickOn(child3);
+    assert_equals(selectList1.value, "three", "Clicking a <div part='option'> should change the value");
+    assert_equals(selectList1.open, false);
+  }, "With custom button and popover: opening the popover and clicking an option should change the selectlist's value");
+
+  promise_test(async () => {
+    const selectList2 = document.getElementById("selectList2");
+    await clickOn(selectList2);
+    assert_equals(selectList2.value, "");
+    assert_equals(selectList2.open, false);
+  }, "Clicking a popover with no listbox part does nothing");
+
+  promise_test(async () => {
+    const selectList3 = document.getElementById("selectList3");
+    const selectList3Listbox = document.getElementById("selectList3-listbox");
+    selectList3Listbox.remove();
+
+    await clickOn(selectList3);
+    assert_equals(selectList3.value, "");
+    assert_equals(selectList3.open, false);
+  }, "Clicking a popover with a listbox that was removed does nothing");
+</script>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-pseudo-light-dismiss-invalidation.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-pseudo-light-dismiss-invalidation.tentative.html
new file mode 100644
index 00000000000000..bda5842a37c4bd
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-pseudo-light-dismiss-invalidation.tentative.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="http://crbug.com/1429839">
+<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>
+
+<selectlist id=selectlist>
+  <option id=optone>one</option>
+  <option id=opttwo>two</option>
+</selectlist>
+<style>
+selectlist {
+  background-color: rgb(0, 0, 255);
+}
+selectlist:closed {
+  background-color: rgb(0, 255, 0);
+}
+selectlist:open {
+  background-color: rgb(255, 0, 0);
+}
+</style>
+<button id=button>hello world</button>
+
+<script>
+promise_test(async () => {
+  assert_equals(getComputedStyle(selectlist).backgroundColor, 'rgb(0, 255, 0)',
+    'The selectlist should match :closed at the start of the test.');
+
+  await test_driver.click(selectlist);
+  assert_equals(getComputedStyle(selectlist).backgroundColor, 'rgb(255, 0, 0)',
+    'The selectlist should match :open when opened.');
+
+  await test_driver.click(opttwo);
+  assert_equals(getComputedStyle(selectlist).backgroundColor, 'rgb(0, 255, 0)',
+    'The selectlist should match :closed after clicking an option.');
+
+  await test_driver.click(selectlist);
+  assert_equals(getComputedStyle(selectlist).backgroundColor, 'rgb(255, 0, 0)',
+    'The selectlist should match :open when reopened.');
+
+  await test_driver.click(button);
+  assert_equals(getComputedStyle(selectlist).backgroundColor, 'rgb(0, 255, 0)',
+    'The selectlist should match :closed after light dismiss.');
+}, 'selectlist should not match :open when light dismissed.');
+</script>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-pseudo-open-closed.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-pseudo-open-closed.tentative.html
new file mode 100644
index 00000000000000..3184fe786c1944
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-pseudo-open-closed.tentative.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/openui/open-ui/issues/547">
+<link rel=help href="https://drafts.csswg.org/selectors/#open-state">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<selectlist id=myselectlist>
+  <button id=custombutton slot=button behavior=button>button</button>
+  <option>one</option>
+  <option>two</option>
+</selectlist>
+
+<script>
+test(() => {
+  assert_false(myselectlist.matches(':open'),
+    'Selectlist should not match :open while it is closed.');
+  assert_true(myselectlist.matches(':closed'),
+    'Selectlist should match :closed while it is closed.');
+
+  custombutton.click();
+
+  assert_true(myselectlist.matches(':open'),
+    'Selectlist should match :open while it is open.');
+  assert_false(myselectlist.matches(':closed'),
+    'Selectlist should not match :closed while it is open.');
+}, 'Selectlist should support :open and :closed pseudo selectors.');
+</script>
+
+<selectlist id=selectlistinvalidation>
+  <button slot=button behavior=button>button</button>
+  <option>one</option>
+  <option>two</option>
+</selectlist>
+<style>
+selectlist:closed {
+  background-color: red;
+}
+selectlist:open {
+  background-color: green;
+}
+</style>
+
+<script>
+test(() => {
+  const selectlist = document.getElementById('selectlistinvalidation');
+  const button = selectlist.querySelector('button');
+  const option = selectlist.querySelector('option');
+
+  assert_equals(getComputedStyle(selectlist).backgroundColor, 'rgb(255, 0, 0)',
+    'The style rules from :closed should apply when the selectlist is closed.');
+
+  button.click();
+  assert_equals(getComputedStyle(selectlist).backgroundColor, 'rgb(0, 128, 0)',
+    'The style rules from :open should apply when the selectlist is open.');
+
+  option.click();
+  assert_equals(getComputedStyle(selectlist).backgroundColor, 'rgb(255, 0, 0)',
+    'The style rules from :closed should apply when the selectlist is opened and closed again.');
+}, 'Selectlist :open and :closed should invalidate correctly.');
+</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-required-attribute.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-required-attribute.tentative.html
similarity index 58%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-required-attribute.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-required-attribute.tentative.html
index ea6d1b215d721a..ef4408915b3243 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-required-attribute.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-required-attribute.tentative.html
@@ -1,37 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
-<title>HTMLSelectMenuElement Test: required attribute</title>
+<title>HTMLSelectListElement Test: required attribute</title>
 <link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
 <style>
-  selectmenu:required {
+  selectlist:required {
     border: 3px dashed rgb(255, 0, 0);
   }
 
-  selectmenu:optional {
+  selectlist:optional {
     border: 1px solid rgb(128, 128, 128);
   }
 </style>
 
-<selectmenu id="selectmenu0" required>
+<selectlist id="selectlist0" required>
   <option>one</option>
   <option>two</option>
   <option>three</option>
-</selectmenu>
+</selectlist>
 
-<selectmenu id="selectmenu1">
+<selectlist id="selectlist1">
   <option>one</option>
   <option>two</option>
   <option>three</option>
-</selectmenu>
+</selectlist>
 
-<selectmenu id="selectmenu2">
+<selectlist id="selectlist2">
   <option>one</option>
   <option>two</option>
   <option>three</option>
-</selectmenu>
+</selectlist>
 
 <script>
 function checkRequired(style) {
@@ -47,15 +47,15 @@
 }
 
 test(() => {
-  const selectMenu0 = document.getElementById("selectmenu0");
-  const selectMenu1 = document.getElementById("selectmenu1");
-  const selectMenu2 = document.getElementById("selectmenu2");
-
-  checkRequired(window.getComputedStyle(selectMenu0));
-  checkOptional(window.getComputedStyle(selectMenu1));
-  checkOptional(window.getComputedStyle(selectMenu2));
-  selectMenu2.required = true;
-  checkRequired(window.getComputedStyle(selectMenu2));
+  const selectList0 = document.getElementById("selectlist0");
+  const selectList1 = document.getElementById("selectlist1");
+  const selectList2 = document.getElementById("selectlist2");
+
+  checkRequired(window.getComputedStyle(selectList0));
+  checkOptional(window.getComputedStyle(selectList1));
+  checkOptional(window.getComputedStyle(selectList2));
+  selectList2.required = true;
+  checkRequired(window.getComputedStyle(selectList2));
 }, "Test required attribute");
 
 </script>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-rtl-ref.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-rtl-ref.tentative.html
new file mode 100644
index 00000000000000..70d2b98d33081e
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-rtl-ref.tentative.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<script src="support/fake-selectlist.js"></script>
+<body>
+<script>
+  const selectlist = createFakeSelectlist('option');
+  document.body.appendChild(selectlist);
+  selectlist.style.direction = "rtl";
+  selectlist.style.width = "300px";
+</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-rtl.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-rtl.tentative.html
similarity index 50%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-rtl.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-rtl.tentative.html
index 90c06c93d76ef9..24f79596321f41 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-rtl.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-rtl.tentative.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
-<!-- Tests selectmenu text alignment in rtl -->
+<!-- Tests selectlist text alignment in rtl -->
 <link rel=author href="mailto:pkotwicz@chromium.org">
-<link rel="match" href="selectmenu-rtl-ref.tentative.html">
+<link rel="match" href="selectlist-rtl-ref.tentative.html">
 
 <style>
-selectmenu {
+selectlist {
   direction:rtl;
   width:300px;
 }
 </style>
-<selectmenu>
+<selectlist>
   <option>option</option>
-</selectmenu>
+</selectlist>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-selected-value-behavior-ref.html b/html/semantics/forms/the-selectlist-element/selectlist-selected-value-behavior-ref.html
new file mode 100644
index 00000000000000..7d76f1c8176d89
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-selected-value-behavior-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<script src="support/fake-selectlist.js"></script>
+<body>
+<script>
+  const selectlist = createFakeSelectlist('hello world');
+  document.body.appendChild(selectlist);
+  selectlist.querySelector('.fake-selectlist-selected-value')
+    .style.color = 'blue';
+</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-behavior.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-selected-value-behavior.tentative.html
similarity index 66%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-behavior.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-selected-value-behavior.tentative.html
index 799b4451141202..a43e43d267a6bb 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-behavior.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-selected-value-behavior.tentative.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <link rel=author href="mailto:jarhar@chromium.org">
-<link rel=match href="selectmenu-selected-value-behavior-ref.html">
+<link rel=match href="selectlist-selected-value-behavior-ref.html">
 
-<selectmenu>
+<selectlist>
   <div style="color:blue" slot=selected-value behavior=selected-value></div>
   <option>hello world</option>
-</selectmenu>
+</selectlist>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-selected-value-part-ref.html b/html/semantics/forms/the-selectlist-element/selectlist-selected-value-part-ref.html
new file mode 100644
index 00000000000000..3be168beba95e2
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-selected-value-part-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<script src="support/fake-selectlist.js"></script>
+<body>
+<script>
+  const selectlist = createFakeSelectlist('hello world');
+  document.body.appendChild(selectlist);
+  selectlist.querySelector('.fake-selectlist-selected-value')
+    .style.backgroundColor = 'red';
+</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-part.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-selected-value-part.tentative.html
similarity index 53%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-part.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-selected-value-part.tentative.html
index e41d2ddfd66d3a..8fc05480d15ebf 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-part.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-selected-value-part.tentative.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <link rel=author href="mailto:jarhar@chromium.org">
-<link rel=match href="selectmenu-selected-value-part-ref.html">
+<link rel=match href="selectlist-selected-value-part-ref.html">
 
 <style>
-selectmenu::part(selected-value) {
+selectlist::part(selected-value) {
   background-color: red;
 }
 </style>
-<selectmenu>
+<selectlist>
   <option>hello world</option>
-</selectmenu>
+</selectlist>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-selected-value-slot-ref.html b/html/semantics/forms/the-selectlist-element/selectlist-selected-value-slot-ref.html
new file mode 100644
index 00000000000000..ecb8c886a1d1ec
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-selected-value-slot-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<script src="support/fake-selectlist.js"></script>
+<body>
+<script>
+  const selectlist = createFakeSelectlist('hello world');
+  document.body.appendChild(selectlist);
+
+  const oldSelectedValue = selectlist.querySelector('.fake-selectlist-selected-value');
+  const newSelectedValue = document.createElement('div');
+  newSelectedValue.textContent = 'new selected value';
+
+  replaceChildElement(newSelectedValue, oldSelectedValue);
+</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-slot.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-selected-value-slot.tentative.html
similarity index 62%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-slot.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-selected-value-slot.tentative.html
index 9bbf2dfc06e874..c69a962c295673 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-slot.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-selected-value-slot.tentative.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <link rel=author href="mailto:jarhar@chromium.org">
-<link rel=match href="selectmenu-selected-value-slot-ref.html">
+<link rel=match href="selectlist-selected-value-slot-ref.html">
 
-<selectmenu>
+<selectlist>
   <div slot=selected-value>new selected value</div>
   <option>hello world</option>
-</selectmenu>
+</selectlist>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-tab-navigation.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-tab-navigation.tentative.html
similarity index 71%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-tab-navigation.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-tab-navigation.tentative.html
index 3d583335ed1e51..3b7d9d3d9ada9a 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-tab-navigation.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-tab-navigation.tentative.html
@@ -6,11 +6,11 @@
 <script src="/resources/testdriver-vendor.js"></script>
 
 <input id="input1">
-<selectmenu id="selectmenu">
+<selectlist id="selectlist">
   <option>one</option>
   <option>two</option>
   <option>three</option>
-</selectmenu>
+</selectlist>
 <input id="input3">
 
 <script>
@@ -18,16 +18,16 @@
   const TAB_KEY = "\uE004";
 
   const input1 = document.getElementById("input1");
-  const selectmenu = document.getElementById("selectmenu");
+  const selectlist = document.getElementById("selectlist");
 
   input1.focus();
   assert_equals(document.activeElement.id, "input1", "input1 should be active");
 
   await test_driver.send_keys(input1, TAB_KEY);
-  assert_equals(document.activeElement.id, "selectmenu", "selectmenu should be active");
+  assert_equals(document.activeElement.id, "selectlist", "selectlist should be active");
 
-  await test_driver.send_keys(selectmenu, TAB_KEY);
+  await test_driver.send_keys(selectlist, TAB_KEY);
   assert_equals(document.activeElement.id, "input3", "input3 should be active");
-}, "Check that <selectmenu> occupies just one slot in tab navigation.");
+}, "Check that <selectlist> occupies just one slot in tab navigation.");
 </script>
 
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-tabindex-order.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-tabindex-order.tentative.html
similarity index 81%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-tabindex-order.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-tabindex-order.tentative.html
index b4fa2a1e757f2c..c93efe1118e16b 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-tabindex-order.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-tabindex-order.tentative.html
@@ -6,11 +6,11 @@
 <script src="/resources/testdriver-vendor.js"></script>
 
 <input id="input1">
-<selectmenu id="selectmenu" tabindex="2">
+<selectlist id="selectlist" tabindex="2">
   <option>one</option>
   <option>two</option>
   <option>three</option>
-</selectmenu>
+</selectlist>
 <input id="input3" tabindex="1">
 
 <script>
@@ -27,7 +27,7 @@
   assert_equals(document.activeElement.id, "input3", "input3 should be active");
 
   await test_driver.send_keys(input3, TAB_KEY);
-  assert_equals(document.activeElement.id, "selectmenu", "selectmenu should be active");
-}, "Check that tabindex applies to <selectmenu>");
+  assert_equals(document.activeElement.id, "selectlist", "selectlist should be active");
+}, "Check that tabindex applies to <selectlist>");
 </script>
 
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-user-select.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-user-select.tentative.html
similarity index 81%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-user-select.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-user-select.tentative.html
index dc6e2e230c0486..078e8a4d83c0d0 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-user-select.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-user-select.tentative.html
@@ -4,30 +4,30 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
-<selectmenu id=useragent>
+<selectlist id=useragent>
   <option id=useragentoptionone>one</option>
   <option id=useragentoptiontwo>two</option>
-</selectmenu>
+</selectlist>
 
-<selectmenu id=custom>
+<selectlist id=custom>
   <div id=custombutton slot=button behavior=button>button</div>
   <div id=customlistbox popover=auto slot=listbox behavior=listbox>listbox</div>
-</selectmenu>
+</selectlist>
 
-<selectmenu id=customwithselection style="user-select:auto">
+<selectlist id=customwithselection style="user-select:auto">
   <div id=custombuttonwithselection slot=button behavior=button>button</div>
   <div id=customlistboxwithselection popover=auto slot=listbox behavior=listbox>listbox</div>
-</selectmenu>
+</selectlist>
 
-<selectmenu id=customwithmixedselection>
+<selectlist id=customwithmixedselection>
   <div id=custombuttonwithmixedselection slot=button behavior=button style="user-select:auto">button</div>
   <div id=customlistboxwithmixedselection popover=auto slot=listbox behavior=listbox style="user-select:auto">listbox</div>
-</selectmenu>
+</selectlist>
 
 <script>
 test(() => {
   assert_equals(getComputedStyle(useragent).userSelect, 'none',
-    'The selectmenu should have user-select:none.');
+    'The selectlist should have user-select:none.');
   assert_equals(getComputedStyle(useragentoptionone).userSelect, 'none',
     'The first option should have user-select:none.');
   assert_equals(getComputedStyle(useragentoptiontwo).userSelect, 'none',
@@ -36,7 +36,7 @@
 
 test(() => {
   assert_equals(getComputedStyle(custom).userSelect, 'none',
-    'The selectmenu should have user-select:none.');
+    'The selectlist should have user-select:none.');
   assert_equals(getComputedStyle(custombutton).userSelect, 'none',
     'The custom button should have user-select:none.');
   assert_equals(getComputedStyle(customlistbox).userSelect, 'none',
@@ -45,19 +45,19 @@
 
 test(() => {
   assert_equals(getComputedStyle(customwithselection).userSelect, 'auto',
-    'The selectmenu should have user-select:auto.');
+    'The selectlist should have user-select:auto.');
   assert_equals(getComputedStyle(custombuttonwithselection).userSelect, 'auto',
     'The custom button should have user-select:auto.');
   assert_equals(getComputedStyle(customlistboxwithselection).userSelect, 'auto',
     'The custom listbox should have user-select:auto.');
-}, 'Setting user-select:auto on selectmenus should re-enable selection.');
+}, 'Setting user-select:auto on selectlists should re-enable selection.');
 
 test(() => {
   assert_equals(getComputedStyle(customwithmixedselection).userSelect, 'none',
-    'The selectmenu should have user-select:none.');
+    'The selectlist should have user-select:none.');
   assert_equals(getComputedStyle(custombuttonwithmixedselection).userSelect, 'auto',
     'The custom button should have user-select:auto.');
   assert_equals(getComputedStyle(customlistboxwithmixedselection).userSelect, 'auto',
     'The custom listbox should have user-select:auto.');
-}, 'Children of selectmenu should be able to opt-in to user-select.');
+}, 'Children of selectlist should be able to opt-in to user-select.');
 </script>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-validity.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-validity.tentative.html
new file mode 100644
index 00000000000000..2b2033f668856b
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-validity.tentative.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<title>HTMLSelectListElement Test: validity</title>
+<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<selectlist id="selectlist1" required>
+  <option>one</option>
+  <option>two</option>
+  <option>three</option>
+  <option>four</option>
+</selectlist>
+
+<form>
+  <selectlist id="selectlist2" required>
+  </selectlist>
+</form>
+
+<script>
+
+test(() => {
+  let selectList = document.createElement('selectlist');
+  assert_true(selectList.willValidate, "A selectlist element is a submittable element that is a candidate for constraint validation.");
+  let option = document.createElement('option');
+  selectList.appendChild(option);
+  assert_true(selectList.checkValidity(), "Always valid when the selectlist isn't a required value.");
+
+  selectList.required = true;
+  assert_equals(selectList.value, "");
+  assert_false(selectList.checkValidity(), "A selected placeholder option should invalidate the selectlist.");
+
+  let emptyOption = document.createElement('option');
+  selectList.appendChild(emptyOption);
+  assert_false(selectList.checkValidity(), "A selected placeholder option should invalidate the selectlist even if there are multiple options.");
+  emptyOption.selected = true;
+  assert_true(selectList.checkValidity(), "An empty non-placeholder option should be a valid choice.");
+
+  let filledOption = document.createElement('option');
+  filledOption.value = "test";
+  selectList.appendChild(filledOption);
+  filledOption.selected = true;
+  assert_equals(selectList.value, "test", "The non-empty value should be set.");
+  assert_true(selectList.checkValidity(), "A non-empty non-placeholder option should be a valid choice.");
+
+  selectList.removeChild(option);
+  selectList.appendChild(emptyOption);
+  emptyOption.selected = true;
+  assert_equals(selectList.value, "", "The empty value should be set.");
+  assert_true(selectList.checkValidity(), "Only the first option can be seen as a placeholder.");
+
+  selectList.removeChild(filledOption);
+  assert_false(selectList.checkValidity(), "A selected placeholder option should invalidate the selectlist.");
+
+  emptyOption.value = "test2";
+  assert_equals(selectList.value, "test2");
+  assert_true(selectList.checkValidity(), "A non-empty option value should be a valid choice.");
+
+  emptyOption.removeAttribute("value");
+  assert_equals(selectList.value, "");
+  assert_false(selectList.checkValidity());
+  emptyOption.innerText = "test";
+  assert_equals(selectList.value, "test");
+  assert_true(selectList.checkValidity(), "A non-empty option should be a valid choice.");
+
+  const selectList1 = document.getElementById('selectlist1');
+  assert_equals(selectList1.value, "one");
+  assert_true(selectList1.checkValidity(), "A selectlist with non-empty placeholder option should be valid.");
+}, "Validation for placeholder option");
+
+test(() => {
+  const selectList2 = document.getElementById('selectlist2');
+  assert_equals(selectList2.value, "");
+  assert_false(selectList2.checkValidity());
+  let form = document.querySelector('form');
+  let invalidControl = form.querySelector('selectlist:invalid');
+  assert_equals(selectList2, invalidControl);
+  let didDispatchInvalid = false;
+  invalidControl.addEventListener('invalid', e => { didDispatchInvalid = true; });
+  let didDispatchSubmit = false;
+  form.addEventListener('submit', event => { event.preventDefault(); didDispatchSubmit = true; });
+
+  form.requestSubmit();
+  assert_true(didDispatchInvalid);
+  assert_false(didDispatchSubmit);
+}, "Check form not submitted for invalid selectlist");
+
+</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-value-option.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-value-option.tentative.html
similarity index 68%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-value-option.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-value-option.tentative.html
index bf58630816addc..243067937cb981 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-value-option.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-value-option.tentative.html
@@ -4,17 +4,17 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
-<selectmenu id=selectmenu>
+<selectlist id=selectlist>
   <option id=optone>innertext one</option>
   <option id=opttwo value=valueattribute>innertext two</option>
-</selectmenu>
+</selectlist>
 
 <script>
 test(() => {
-  assert_equals(selectmenu.value, 'innertext one',
+  assert_equals(selectlist.value, 'innertext one',
     'The first option should be selected initially.');
-  selectmenu.value = 'valueattribute';
-  assert_equals(selectmenu.value, 'valueattribute',
+  selectlist.value = 'valueattribute';
+  assert_equals(selectlist.value, 'valueattribute',
     'Assigning value should look at the options value, not innertext');
-}, 'selectmenu.value should reflect option.value');
+}, 'selectlist.value should reflect option.value');
 </script>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-value-selectedOption.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-value-selectedOption.tentative.html
new file mode 100644
index 00000000000000..20e72ac1dcb554
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-value-selectedOption.tentative.html
@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<title>HTMLSelectListElement Test: value and selectedOption</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<selectlist id="selectList0"></selectlist>
+
+<selectlist id="selectList1">
+  <option>one</option>
+  <option>two</option>
+  <div>I'm a div with no part attr</div>
+  <option id="selectList1-option3">three</option>
+  <option>four</option>
+</selectlist>
+
+<selectlist id="selectList2">
+  <div behavior="option">one</div>
+  <div behavior="option">two</div>
+  <div>I'm a div with no part attr</div>
+  <div behavior="option">three</div>
+  <div behavior="option">four</div>
+</selectlist>
+
+<selectlist id="selectList3">
+  <div>I'm a div with no part attr</div>
+  <option id="selectList3-child1">one</option>
+  <option id="selectList3-child2">two</option>
+  <option id="selectList3-child3">three</option>
+</selectlist>
+
+<selectlist id="selectList4">
+  <div slot="button" behavior="button">
+    <div behavior="selected-value" id="selectList4-custom-selected-value">Default custom selected-value text</div>
+  </div>
+  <option id="selectList4-option1">one</option>
+  <option id="selectList4-option2">two</option>
+</selectlist>
+
+<selectlist id="selectList5">
+  <div slot="button" behavior="button">
+    <div behavior="selected-value" id="selectList5-custom-selected-value">Default custom selected-value text</div>
+  </div>
+  <div popover slot="listbox" behavior="listbox">
+    <option id="selectList5-option1">one</option>
+    <option id="selectList5-option2">two</option>
+  </div>
+</selectlist>
+
+<selectlist id="selectList6">
+  <option id="selectList6-option1">one</option>
+  <option id="selectList6-option2" selected>two</option>
+  <option id="selectList6-option3">three</option>
+</selectlist>
+
+<selectlist id="selectList7">
+  <option id="selectList7-option1">one</option>
+  <option id="selectList7-option2" selected value="test">two</option>
+  <option>three</option>
+</selectlist>
+
+<script>
+
+test(() => {
+  const selectList0 = document.getElementById("selectList0");
+  assert_equals(selectList0.value, "");
+  assert_equals(selectList0.selectedOption, null);
+  selectList0.value = "something";
+  assert_equals(selectList0.value, "", "If there is no matching option, selectlist should be cleared");
+  assert_equals(selectList0.selectedOption, null);
+}, "Test that HTMLSelectList with no options has empty string for value and null for selectedOption");
+
+test(() => {
+  const selectList1 = document.getElementById("selectList1");
+  assert_equals(selectList1.value, "one", "value should start with the text of the first option part");
+
+  selectList1.value = "three";
+  assert_equals(selectList1.value, "three", "value can be set to the text of an option part");
+  assert_equals(selectList1.selectedOption, document.getElementById("selectList1-option3"));
+
+  selectList1.value = "I'm a div with no part attr";
+  assert_equals(selectList1.value, "", "If there is no matching option selectlist should be cleared");
+  assert_equals(selectList1.selectedOption, null);
+}, "Test value and selectedOption with HTMLOptionElement element option parts");
+
+test(() => {
+  const selectList1 = document.getElementById("selectList1");
+  selectList1.value = "one";
+  assert_equals(selectList1.value, "one");
+
+  selectList1.value = null;
+  assert_equals(selectList1.value, "");
+  assert_equals(selectList1.selectedOption, null);
+}, "Test value and selectedOption when value is null");
+
+test(() => {
+  const selectList1 = document.getElementById("selectList1");
+  selectList1.value = "one";
+  assert_equals(selectList1.value, "one");
+
+  selectList1.value = undefined;
+  assert_equals(selectList1.value, "");
+  assert_equals(selectList1.selectedOption, null);
+}, "Test value and selectedOption when value is undefined");
+
+test(() => {
+  const selectList2 = document.getElementById("selectList2");
+  assert_equals(selectList2.value, "", "Non-HTMLOptionElements shouldn't be treated as option parts");
+  assert_equals(selectList2.selectedOption, null);
+
+  selectList2.value = "three";
+  assert_equals(selectList2.value, "", "value can't be set when there are no option parts'");
+  assert_equals(selectList2.selectedOption, null);
+}, "Test value with non-HTMLOptionElement elements labeled as parts");
+
+test(() => {
+  const selectList3 = document.getElementById("selectList3");
+  assert_equals(selectList3.value, "one", "value should start with the text of the first option part");
+  assert_equals(selectList3.selectedOption, document.getElementById("selectList3-child1"));
+
+  document.getElementById("selectList3-child3").remove();
+  assert_equals(selectList3.value, "one", "Removing a non-selected option should not change the value");
+  assert_equals(selectList3.selectedOption, document.getElementById("selectList3-child1"));
+
+  document.getElementById("selectList3-child1").remove();
+  assert_equals(selectList3.value, "two", "When the selected option is removed, the new first option should become selected");
+  assert_equals(selectList3.selectedOption, document.getElementById("selectList3-child2"));
+
+  document.getElementById("selectList3-child2").remove();
+  assert_equals(selectList3.value, "", "When all options are removed, value should be the empty string");
+  assert_equals(selectList3.selectedOption, null);
+}, "Test that value and selectedOption are updated when options are removed");
+
+test(() => {
+  const selectList4 = document.getElementById("selectList4");
+  let customSelectedValuePart = document.getElementById("selectList4-custom-selected-value");
+  assert_equals(selectList4.value, "one", "value should start with the text of the first option part");
+  assert_equals(selectList4.selectedOption, document.getElementById("selectList4-option1"));
+  assert_equals(customSelectedValuePart.innerText, "one", "Custom selected value part should be set to initial value of selectlist");
+
+  selectList4.value = "two";
+  assert_equals(customSelectedValuePart.innerText, "two", "Custom selected value part should be updated when value of selectlist changes");
+  assert_equals(selectList4.selectedOption, document.getElementById("selectList4-option2"));
+}, "Test that slotted-in selected-value part is updated to value of selectlist");
+
+test(() => {
+  const selectList5 = document.getElementById("selectList5");
+  let customSelectedValuePart = document.getElementById("selectList5-custom-selected-value");
+  assert_equals(selectList5.value, "one", "value should start with the text of the first option part");
+  assert_equals(selectList5.selectedOption, document.getElementById("selectList5-option1"));
+  assert_equals(customSelectedValuePart.innerText, "one", "Custom selected value part should be set to initial value of selectlist");
+
+  selectList5.value = "two";
+  assert_equals(customSelectedValuePart.innerText, "two", "Custom selected value part should be updated when value of selectlist changes");
+  assert_equals(selectList5.selectedOption, document.getElementById("selectList5-option2"));
+}, "Test that option parts in a slotted-in listbox are reflected in the value property");
+
+test(() => {
+  let selectList = document.createElement('selectlist');
+  assert_equals(selectList.value, "");
+  let option = document.createElement('option');
+  option.innerText = "one";
+  selectList.appendChild(option);
+  assert_equals(selectList.value, "one");
+  assert_equals(selectList.selectedOption, option);
+
+  let newOption = document.createElement('option');
+  newOption.innerText = 'two';
+  selectList.appendChild(newOption);
+  selectList.value = "two";
+  assert_equals(selectList.value, "two");
+  assert_equals(selectList.selectedOption, newOption);
+
+  option.click();
+  assert_equals(selectList.value, "one");
+  assert_equals(selectList.selectedOption, option);
+}, "Test that value and selectedOption are correctly updated");
+
+test(() => {
+  const selectList = document.getElementById("selectList6");
+  let selectListOption1 = document.getElementById("selectList6-option1");
+
+  assert_equals(selectList.value, "two");
+  assert_equals(selectList.selectedOption, document.getElementById("selectList6-option2"));
+  assert_false(selectListOption1.selected);
+  selectListOption1.selected = true;
+  assert_equals(selectList.value, "one");
+  assert_equals(selectList.selectedOption, selectListOption1);
+
+  let newOption = document.createElement("option");
+  newOption.innerText = "four";
+  newOption.selected = true;
+  selectList.appendChild(newOption);
+  assert_equals(selectList.value, "four");
+  assert_equals(selectList.selectedOption, newOption);
+  assert_false(selectListOption1.selected);
+
+  selectList.value = "three";
+  assert_equals(selectList.selectedOption, document.getElementById("selectList6-option3"));
+  assert_false(newOption.selected);
+}, "Test that HTMLOption.selected updates selectlist.value and selectlist.selectedOption");
+
+test(() => {
+  const selectList = document.getElementById("selectList7");
+  let selectListOption1 = document.getElementById("selectList7-option1");
+
+  assert_equals(selectList.value, "test");
+  assert_equals(selectList.selectedOption, document.getElementById("selectList7-option2"));
+  assert_false(selectListOption1.selected);
+  selectListOption1.selected = true;
+  assert_equals(selectList.value, "one");
+  assert_equals(selectList.selectedOption, selectListOption1);
+
+  selectListOption1.value = "new test";
+  assert_equals(selectList.value, "new test");
+  assert_equals(selectList.selectedOption, selectListOption1);
+  selectListOption1.removeAttribute("value");
+  assert_equals(selectList.value, "one");
+  assert_equals(selectList.selectedOption, selectListOption1);
+  selectListOption1.value = "";
+  assert_equals(selectList.value, "");
+  assert_equals(selectList.selectedOption, selectListOption1);
+}, "Test that HTMLOption.value updates selectlist.value");
+
+</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-writingmode-lr.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-writingmode-lr.tentative.html
similarity index 56%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-writingmode-lr.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-writingmode-lr.tentative.html
index 15bd5916bdf0c6..9973696ddd75f5 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-writingmode-lr.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-writingmode-lr.tentative.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <link rel=author href="mailto:jarhar@chromium.org">
 <link rel=help href="https://github.com/openui/open-ui/issues/600">
-<link rel=mismatch href="selectmenu-writingmode-tb-ref.html">
+<link rel=mismatch href="selectlist-writingmode-tb-ref.html">
 
-<selectmenu style="writing-mode: vertical-lr">
+<selectlist style="writing-mode: vertical-lr">
   <option>hello</option>
-</selectmenu>
+</selectlist>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-writingmode-rl.tentative.html b/html/semantics/forms/the-selectlist-element/selectlist-writingmode-rl.tentative.html
similarity index 56%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-writingmode-rl.tentative.html
rename to html/semantics/forms/the-selectlist-element/selectlist-writingmode-rl.tentative.html
index 9cc1056e35aca5..dc74203e69c89b 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-writingmode-rl.tentative.html
+++ b/html/semantics/forms/the-selectlist-element/selectlist-writingmode-rl.tentative.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <link rel=author href="mailto:jarhar@chromium.org">
 <link rel=help href="https://github.com/openui/open-ui/issues/600">
-<link rel=mismatch href="selectmenu-writingmode-tb-ref.html">
+<link rel=mismatch href="selectlist-writingmode-tb-ref.html">
 
-<selectmenu style="writing-mode: vertical-rl">
+<selectlist style="writing-mode: vertical-rl">
   <option>hello</option>
-</selectmenu>
+</selectlist>
diff --git a/html/semantics/forms/the-selectlist-element/selectlist-writingmode-tb-ref.html b/html/semantics/forms/the-selectlist-element/selectlist-writingmode-tb-ref.html
new file mode 100644
index 00000000000000..db922f5f9fbb80
--- /dev/null
+++ b/html/semantics/forms/the-selectlist-element/selectlist-writingmode-tb-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<selectlist style="writing-mode: horizontal-tb">
+  <option>hello</option>
+</selectlist>
diff --git a/html/semantics/forms/the-selectmenu-element/support/back.html b/html/semantics/forms/the-selectlist-element/support/back.html
similarity index 66%
rename from html/semantics/forms/the-selectmenu-element/support/back.html
rename to html/semantics/forms/the-selectlist-element/support/back.html
index 0d13a0f3b7c9c7..9cc5a1d6034e7c 100644
--- a/html/semantics/forms/the-selectmenu-element/support/back.html
+++ b/html/semantics/forms/the-selectlist-element/support/back.html
@@ -1 +1,2 @@
+<!DOCTYPE html>
 <script>history.back()</script>
diff --git a/html/semantics/forms/the-selectmenu-element/support/fake-selectmenu.js b/html/semantics/forms/the-selectlist-element/support/fake-selectlist.js
similarity index 63%
rename from html/semantics/forms/the-selectmenu-element/support/fake-selectmenu.js
rename to html/semantics/forms/the-selectlist-element/support/fake-selectlist.js
index 2e084450a364ec..c17fe1afc5fd20 100644
--- a/html/semantics/forms/the-selectmenu-element/support/fake-selectmenu.js
+++ b/html/semantics/forms/the-selectlist-element/support/fake-selectlist.js
@@ -2,14 +2,14 @@ function replaceChildElement(newChild, oldChild) {
   oldChild.parentElement.replaceChild(newChild, oldChild);
 }
 
-function createFakeSelectmenu(selectedValueText) {
-  const selectmenu = document.createElement('div');
-  selectmenu.classList.add('fake-selectmenu-internal-selectmenu-button');
-  selectmenu.innerHTML = `
-    <div class="fake-selectmenu-selected-value"></div>
-    <div class="fake-selectmenu-internal-selectmenu-button-icon"></div>
+function createFakeSelectlist(selectedValueText) {
+  const selectlist = document.createElement('div');
+  selectlist.classList.add('fake-selectlist-internal-selectlist-button');
+  selectlist.innerHTML = `
+    <div class="fake-selectlist-selected-value"></div>
+    <div class="fake-selectlist-internal-selectlist-button-icon"></div>
     <style>
-    .fake-selectmenu-internal-selectmenu-button {
+    .fake-selectlist-internal-selectlist-button {
       align-items: center;
       appearance: none;
       background-color: Field;
@@ -27,13 +27,13 @@ function createFakeSelectmenu(selectedValueText) {
       padding: 0.25em;
     }
 
-    .fake-selectmenu-selected-value {
+    .fake-selectlist-selected-value {
       color: FieldText;
       flex-grow:1;
     }
 
-    .fake-selectmenu-internal-selectmenu-button-icon {
-      background-image: url(support/selectmenu_button_icon.svg);
+    .fake-selectlist-internal-selectlist-button-icon {
+      background-image: url(support/selectlist_button_icon.svg);
       background-origin: content-box;
       background-repeat: no-repeat;
       background-size: contain;
@@ -51,8 +51,8 @@ function createFakeSelectmenu(selectedValueText) {
   `;
 
   if (selectedValueText) {
-    selectmenu.querySelector('.fake-selectmenu-selected-value').textContent = selectedValueText;
+    selectlist.querySelector('.fake-selectlist-selected-value').textContent = selectedValueText;
   }
 
-  return selectmenu;
+  return selectlist;
 }
diff --git a/html/semantics/forms/the-selectmenu-element/support/selectmenu_button_icon.svg b/html/semantics/forms/the-selectlist-element/support/selectlist_button_icon.svg
similarity index 100%
rename from html/semantics/forms/the-selectmenu-element/support/selectmenu_button_icon.svg
rename to html/semantics/forms/the-selectlist-element/support/selectlist_button_icon.svg
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-ask-for-reset.html b/html/semantics/forms/the-selectmenu-element/selectmenu-ask-for-reset.html
deleted file mode 100644
index 3993c139506188..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-ask-for-reset.html
+++ /dev/null
@@ -1,119 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<title>HTMLSelectMenuElement Test: ask-for-reset</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-
-<form name="fm1" id="form1">
-  <selectmenu id="selectmenu1">
-    <option>one</option>
-    <option>two</option>
-  </selectmenu>
-
-  <selectmenu id="selectmenu2">
-    <option>one</option>
-    <option selected>two</option>
-  </selectmenu>
-
-  <selectmenu id="selectmenu3">
-    <option>one</option>
-    <option selected>two</option>
-    <option selected>three</option>
-  </selectmenu>
-</form>
-
-<script>
-function createSelectMenu(numberOfOptions) {
-  let selectMenu = document.createElement("selectmenu");
-  for (let i = 0; i < numberOfOptions; i++) {
-    let option = document.createElement("option");
-    option.value = i;
-    selectMenu.appendChild(option);
-  }
-  return selectMenu;
-}
-
-function checkSelection(selectMenu, selectedOptionIndex, msg) {
-  for (let i = 0; i < selectMenu.children.length; i++) {
-    if (i != selectedOptionIndex) {
-      assert_false(selectMenu.children[i].selected);
-    }
-  }
-  assert_true(selectMenu.children[selectedOptionIndex].selected, msg);
-  assert_equals(selectMenu.value, selectMenu.children[selectedOptionIndex].value);
-}
-
-test(() => {
-  let selectMenu = createSelectMenu(5);
-
-  selectMenu.children[4].selected = true;
-  checkSelection(selectMenu, 4);
-
-  selectMenu.children[4].remove();
-  checkSelection(selectMenu, 0, "After removing the selected option, selection should default to first option.");
-
-  selectMenu.children[3].selected = true;
-  checkSelection(selectMenu, 3);
-  selectMenu.children[0].remove();
-  checkSelection(selectMenu, 2, "Removing non-selected option should have no effect.");
-}, "ask-for-reset when removing option");
-
-test(() => {
-  let selectMenu = createSelectMenu(3);
-  selectMenu.children[1].selected = true;
-
-  let newOption = document.createElement("option");
-  newOption.selected = true;
-  selectMenu.appendChild(newOption);
-  checkSelection(selectMenu, 3, "Inserting a selected option should update selection.");
-
-  let newOption2 = document.createElement("option");
-  newOption2.selected = true;
-  selectMenu.prepend(newOption2);
-  checkSelection(selectMenu, 0, "Inserting a selected option should update selection, even though it's not last in tree order.");
-
-  let newOption3 = document.createElement("option");
-  selectMenu.appendChild(newOption3);
-  checkSelection(selectMenu, 0, "Inserting a non-selected option should have no effect.");
-}, "ask-for-reset when inserting option");
-
-test(() => {
-  let selectMenu = createSelectMenu(3);
-  let options = selectMenu.children;
-
-  // select options from first to last
-  for (let i = 0; i < options.length; i++) {
-    options[i].selected = true;
-    checkSelection(selectMenu, i);
-  }
-
-  // select options from last to first
-  for (let i = options.length - 1; i >= 0; i--) {
-    options[i].selected = true;
-    checkSelection(selectMenu, i);
-  }
-
-  options[2].selected = true;
-  checkSelection(selectMenu, 2);
-  options[2].selected = false;
-  checkSelection(selectMenu, 0, "First non-disabled option should be selected.");
-
-  options[0].disabled = true;
-  options[2].selected = true;
-  checkSelection(selectMenu, 2);
-  options[2].selected = false;
-  checkSelection(selectMenu, 1, "First non-disabled option should be selected.");
-}, "ask-for-reset when changing selectedness of option");
-
-test(() => {
-  let selectMenu1 = document.getElementById("selectmenu1");
-  let selectMenu2 = document.getElementById("selectmenu2");
-  let selectMenu3 = document.getElementById("selectmenu3");
-
-  document.getElementById("form1").reset();
-
-  assert_equals(selectMenu1.value, "one", "First non-disabled option should be selected.");
-  assert_equals(selectMenu2.value, "two", "The selected option should be selected.");
-  assert_equals(selectMenu3.value, "three", "Last selected option should be selected.")
-}, "ask-for-reset for form");
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-explicit-size-ref.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-explicit-size-ref.tentative.html
deleted file mode 100644
index 53296f6daac135..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-explicit-size-ref.tentative.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<script src="support/fake-selectmenu.js"></script>
-<body>
-<script>
-  const selectmenu = createFakeSelectmenu('option');
-  document.body.appendChild(selectmenu);
-  selectmenu.style.width = "400px";
-  selectmenu.style.height = "50px";
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-explicit-size.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-explicit-size.tentative.html
deleted file mode 100644
index 8c09f6c88964d5..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-explicit-size.tentative.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<!-- Tests that selectmenu respects explicit size -->
-<link rel=author href="mailto:pkotwicz@chromium.org">
-<link rel="match" href="selectmenu-explicit-size-ref.tentative.html">
-
-<style>
-selectmenu {
-  width:400px;
-  height:50px;
-}
-</style>
-<selectmenu>
-  <option>option</option>
-</selectmenu>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-font-size-ref.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-font-size-ref.tentative.html
deleted file mode 100644
index a01455aab09955..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-font-size-ref.tentative.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<script src="support/fake-selectmenu.js"></script>
-<body>
-<script>
-  const selectmenu = createFakeSelectmenu('option');
-  document.body.appendChild(selectmenu);
-  selectmenu.style.fontSize = "48px";
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-font-size.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-font-size.tentative.html
deleted file mode 100644
index 4a4d129cb94e55..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-font-size.tentative.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<!-- Tests that selectmenu respects explicit size -->
-<link rel=author href="mailto:pkotwicz@chromium.org">
-<link rel="match" href="selectmenu-font-size-ref.tentative.html">
-
-<style>
-selectmenu {
-  font-size:48px;
-}
-</style>
-<selectmenu>
-  <option>option</option>
-</selectmenu>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-keyboard.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-keyboard.tentative.html
deleted file mode 100644
index 9f937d7b7004e1..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-keyboard.tentative.html
+++ /dev/null
@@ -1,123 +0,0 @@
-<!doctype html>
-<title>HTMLSelectMenuElement Test: keyboard accessibility</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/resources/testdriver.js"></script>
-<script src="/resources/testdriver-actions.js"></script>
-<script src="/resources/testdriver-vendor.js"></script>
-  <selectmenu id="selectMenu0">
-    <div id="selectMenu0-button0" slot="button" behavior="button" tabindex="0">button</div>
-    <option>one</option>
-    <option>two</option>
-    <option>three</option>
-  </selectmenu>
-
-  <selectmenu id="selectMenu1">
-    <option id="selectMenu1-child0">one</option>
-  </selectmenu>
-
-  <selectmenu id="selectMenu2" disabled>
-    <div id="selectMenu2-button0" slot="button" behavior="button" tabindex="0">button</div>
-    <option disabled>one</option>
-    <option>two</option>
-    <option>three</option>
-  </selectmenu>
-
-  <selectmenu id="selectMenu3">
-    <div id="selectMenu3-button0" slot="button" behavior="button" tabindex="0">button</div>
-    <option>one</option>
-    <option disabled>two</option>
-    <option>three</option>
-  </selectmenu>
-<script>
-// See https://w3c.github.io/webdriver/#keyboard-actions
-const KEY_CODE_MAP = {
-  'Enter':      '\uE007',
-  'Space':      '\uE00D',
-  'ArrowUp':    '\uE013',
-  'ArrowDown':  '\uE015'
-};
-
-function clickOn(element) {
-    const actions = new test_driver.Actions();
-    return actions.pointerMove(0, 0, {origin: element})
-      .pointerDown({button: actions.ButtonType.LEFT})
-      .pointerUp({button: actions.ButtonType.LEFT})
-      .send();
-  }
-
-promise_test(async t => {
-  const selectMenu = document.querySelector("#selectMenu0");
-  const button = document.querySelector("#selectMenu0-button0");
-  assert_false(selectMenu.open, "selectmenu should not be initially open");
-
-  await test_driver.send_keys(button, KEY_CODE_MAP.Enter);
-  assert_true(selectMenu.open, "Enter key should open selectmenu");
-  assert_equals(selectMenu.value, "one");
-
-  await test_driver.send_keys(selectMenu, KEY_CODE_MAP.ArrowDown);
-  assert_equals(selectMenu.value, "two", "Down arrow should go to next option");
-
-  await test_driver.send_keys(selectMenu, KEY_CODE_MAP.ArrowDown);
-  assert_equals(selectMenu.value, "three", "Down arrow should go to next option");
-
-  await test_driver.send_keys(selectMenu, KEY_CODE_MAP.ArrowDown);
-  assert_equals(selectMenu.value, "three", "Down arrow should do nothing if already at the last option");
-
-  await test_driver.send_keys(selectMenu, KEY_CODE_MAP.ArrowUp);
-  assert_equals(selectMenu.value, "two", "Up arrow should go to the previous option");
-
-  await test_driver.send_keys(selectMenu, KEY_CODE_MAP.ArrowUp);
-  assert_equals(selectMenu.value, "one", "Up arrow should go to the previous option");
-
-  await test_driver.send_keys(selectMenu, KEY_CODE_MAP.ArrowUp);
-  assert_equals(selectMenu.value, "one", "Up arrow should do nothing if already at the first option");
-
-  await test_driver.send_keys(selectMenu, KEY_CODE_MAP.Enter);
-  assert_false(selectMenu.open, "Enter key should close selectmenu");
-
-  await test_driver.send_keys(selectMenu, " ");
-  assert_true(selectMenu.open, "Space key should open selectmenu");
-
-  // This behavior is suspicious (since Space key can open the selectmenu),
-  // but it maches <select>. See https://github.com/openui/open-ui/issues/386
-  await test_driver.send_keys(selectMenu, " ");
-  assert_true(selectMenu.open, "Space key should *not* close selectmenu");
-
-  await test_driver.send_keys(selectMenu, KEY_CODE_MAP.Enter);
-  assert_false(selectMenu.open, "Enter key should close selectmenu");
-}, "Validate Enter, Up/Down Arrow, and Space keyboard accessibility support for <selectmenu>");
-
-promise_test(async t => {
-  const selectMenuOption = document.getElementById("selectMenu1-child0");
-  const event = document.createEvent("Event");
-  event.initEvent("keydown");
-  selectMenuOption.dispatchEvent(event);
-}, "Firing a synthetic event at a selectmenu's option doesn't crash");
-
-promise_test(async t => {
-  const selectMenu2 = document.querySelector("#selectMenu2");
-  const selectMenu2Button = document.querySelector("#selectMenu2-button0");
-  assert_false(selectMenu2.open, "selectmenu should not be initially open");
-
-  await test_driver.send_keys(selectMenu2Button, KEY_CODE_MAP.Enter);
-  assert_false(selectMenu2.open, "Enter key should not open a disabled selectmenu");
-  await clickOn(selectMenu2);
-  assert_false(selectMenu2.open, "Click should not open a disabled selectmenu");
-  assert_equals(selectMenu2.value, "one");
-
-  const selectMenu3 = document.querySelector("#selectMenu3");
-  const selectMenu3Button = document.querySelector("#selectMenu3-button0");
-  assert_false(selectMenu3.open, "selectmenu should not be initially open");
-
-  await test_driver.send_keys(selectMenu3Button, KEY_CODE_MAP.Enter);
-  assert_true(selectMenu3.open, "Enter key should open selectmenu");
-  assert_equals(selectMenu3.value, "one");
-
-  await test_driver.send_keys(selectMenu3, KEY_CODE_MAP.ArrowDown);
-  assert_equals(selectMenu3.value, "three", "Down arrow should go to next non-disabled option");
-
-  await test_driver.send_keys(selectMenu3, KEY_CODE_MAP.ArrowUp);
-  assert_equals(selectMenu3.value, "one", "Up arrow should go to the previous non-disabled option");
-}, "Validate Enter, Up/Down Arrow keyboard accessibility support for disabled <selectmenu>");
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-labels.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-labels.tentative.html
deleted file mode 100644
index 6f940432999329..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-labels.tentative.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<title>HTMLSelectMenuElement Test: labels</title>
-<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-
-<label id="label1" for="selectmenu1">Label 1</label>
-<selectmenu id="selectmenu1">
-  <option>one</option>
-  <option>two</option>
-  <option>three</option>
-  <option>four</option>
-</selectmenu>
-<label id="label2" for="selectmenu1">Label 2</label>
-<label id="label3" for="invalid-selectmenu1">Label 3</label>
-
-<script>
-
-test(() => {
-  let selectMenu = document.getElementById("selectmenu1");
-
-  assert_true(selectMenu.labels instanceof NodeList);
-  assert_equals(selectMenu.labels.length, 2);
-  assert_equals(selectMenu.labels[0], document.getElementById("label1"));
-  assert_equals(selectMenu.labels[1], document.getElementById("label2"));
-}, "Validate selectmenu.labels");
-
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-marker-part-ref.html b/html/semantics/forms/the-selectmenu-element/selectmenu-marker-part-ref.html
deleted file mode 100644
index cec447509eba28..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-marker-part-ref.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<script src="support/fake-selectmenu.js"></script>
-<body>
-<script>
-  const selectmenu = createFakeSelectmenu('hello world');
-  document.body.appendChild(selectmenu);
-  selectmenu.querySelector('.fake-selectmenu-internal-selectmenu-button-icon')
-    .style.backgroundColor = 'red';
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-marker-slot-ref.html b/html/semantics/forms/the-selectmenu-element/selectmenu-marker-slot-ref.html
deleted file mode 100644
index 54bdefb76192c5..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-marker-slot-ref.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<script src="support/fake-selectmenu.js"></script>
-<body>
-<script>
-  const selectmenu = createFakeSelectmenu('hello world');
-  document.body.appendChild(selectmenu);
-
-  const oldMarker = selectmenu.querySelector('.fake-selectmenu-internal-selectmenu-button-icon');
-  const newMarker = document.createElement('div');
-  newMarker.textContent = 'marker';
-
-  replaceChildElement(newMarker, oldMarker);
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-parts-structure.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-parts-structure.tentative.html
deleted file mode 100644
index 08c283322d54a3..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-parts-structure.tentative.html
+++ /dev/null
@@ -1,530 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<title>HTMLSelectMenuElement Test: part structure</title>
-<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/resources/testdriver.js"></script>
-<script src="/resources/testdriver-actions.js"></script>
-<script src="/resources/testdriver-vendor.js"></script>
-
-<selectmenu id="selectMenu0">
-  <div popover slot="listbox" behavior="listbox">
-    <option id="selectMenu0-child1">one</option>
-    <option id="selectMenu0-child2">two</option>
-    <div behavior="option" id="selectMenu0-child3">three</div>
-  </div>
-  <option id="selectMenu0-child4">four</option>
-</selectmenu>
-
-<selectmenu id="selectMenu1">
-  <div popover slot="listbox" behavior="listbox" id="selectMenu1-popover">
-    <div behavior="button" id="selectMenu1-button">
-      Custom button
-    </div>
-    <option>one</option>
-    <option id="selectMenu1-child2">two</option>
-  </div>
-</selectmenu>
-
-<selectmenu id="selectMenu2">
-  <div slot="button" behavior="button" id="selectMenu2-button">
-    Custom button
-    <div popover behavior="listbox" id="selectMenu2-popover">
-      <option>one</option>
-      <option id="selectMenu2-child2">two</option>
-    </div>
-  </div>
-  <option>three</option>
-  <div>
-    This is some text.
-    <option id="selectMenu2-child4">four</option>
-    More text.
-  </div>
-</selectmenu>
-
-<selectmenu id="selectMenu3">
-  <div slot="button" id="selectMenu3-button-slot">
-    <div behavior="button" id="selectMenu3-button0">button0</div>
-  </div>
-  <option>one</option>
-</selectmenu>
-
-<selectmenu id="selectMenu4">
-  <div slot="button" behavior="button" id="selectMenu4-button0">button0</div>
-  <div slot="listbox" id="selectMenu4-listbox-slot">
-    <div popover behavior="listbox" id="selectMenu4-listbox0">
-      <option>one</option>
-      <option id="selectMenu4-option2">two</option>
-    </div>
-  </div>
-</selectmenu>
-
-<selectmenu id="selectMenu5">
-  <div slot="button" id="selectMenu5-button-slot">
-    <div behavior="button" id="selectMenu5-button0">button0</div>
-    <div behavior="selected-value" id="selectMenu5-selectedValue0"></div>
-  </div>
-  <option>one</option>
-  <option id="selectMenu5-option0">two</option>
-</selectmenu>
-
-<!-- No associated JS test -- just don't crash when parsing! -->
-<selectmenu id="selectMenu6">
-  <div slot="button"></div>
-  <div popover slot="listbox" behavior="listbox"></div>
-</selectmenu>
-
-<!-- No associated JS test -- just don't crash when parsing! -->
-<selectmenu id="selectMenu7">
-  <div slot="listbox"></div>
-  <div slot="button" behavior="button"></div>
-</selectmenu>
-
-<!-- No associated JS test -- just don't crash when parsing! -->
-<selectmenu id="selectMenu8">
-  <div slot="listbox"></div>
-  <option>one</option>
-</selectmenu>
-
-<selectmenu id="selectMenu9">
-  <div slot="listbox" id="selectMenu9-listbox-slot">
-    <div popover behavior="listbox" id="selectMenu9-originalListbox">
-      <option>one</option>
-      <option id="selectMenu9-option2">two</option>
-    </div>
-  </div>
-</selectmenu>
-
-<selectmenu id="selectMenu10">
-  <option slot="button" id="selectMenu10-slottedOption">Test 10</option>
-  <option>one</option>
-  <option id="selectMenu10-option2">two</option>
-</selectmenu>
-
-<selectmenu id="selectMenu11">
-  <div popover slot="listbox" behavior="listbox">
-    <option>one</option>
-  </div>
-  <div slot="button" behavior="listbox" id="selectMenu11-button">Test</div>
-</selectmenu>
-
-<selectmenu id="selectMenu12">
-  <div slot="button" id="selectMenu12-button-slot">
-    <div behavior="button" id="selectMenu12-button0">button0</div>
-  </div>
-  <div slot="listbox" id="selectMenu12-listbox-slot">
-    <div popover behavior="listbox" id="selectMenu12-originalListbox">
-      <option id="selectMenu12-option1">one</option>
-      <option>two</option>
-    </div>
-  </div>
-</selectmenu>
-
-<selectmenu id="selectMenu13">
-  <div slot="button" id="selectMenu12-button-slot">
-    <div id="selectMenu13-removeContent-button">
-      <div behavior="button" id="selectMenu13-button0">button0</div>
-      <div behavior="button" id="selectMenu13-button1">button1</div>
-    </div>
-    <div behavior="button" id="selectMenu13-button2">button2</div>
-  </div>
-  <div slot="listbox" id="selectMenu13-listbox-slot">
-    <div id="selectMenu13-removeContent-listbox">
-      <div popover behavior="listbox" id="selectMenu13-originalListbox">
-        <option id="selectMenu13-option1">one</option>
-        <option id="selectMenu13-option2">two</option>
-      </div>
-    </div>
-    <div popover behavior="listbox" id="selectMenu13-newListbox">
-      <option>three</option>
-      <option id="selectMenu13-option4">four</option>
-    </div>
-  </div>
-</selectmenu>
-
-<selectmenu id="selectMenu14">
-  <div slot="button" behavior="button" id="selectMenu14-button0">button0</div>
-  <option>one</option>
-  <option id="selectMenu14-option2">two</option>
-</selectmenu>
-
-<selectmenu id="selectMenu15">
-  <div slot="button" id="selectMenu15-div0"></div>
-  <option>one</option>
-</selectmenu>
-
-<selectmenu id="selectMenu16">
-  <div slot="button">
-    <div id="selectMenu16-div0">
-      <div behavior="button" id="selectMenu16-button0">button</div>
-    </div>
-  </div>
-  <option>one</option>
-</selectmenu>
-
-<script>
-  function clickOn(element) {
-    const actions = new test_driver.Actions();
-    return actions.pointerMove(0, 0, {origin: element})
-      .pointerDown({button: actions.ButtonType.LEFT})
-      .pointerUp({button: actions.ButtonType.LEFT})
-      .send();
-  }
-
-  promise_test(async () => {
-    const selectMenu0 = document.getElementById("selectMenu0");
-    const selectMenu0Child1 = document.getElementById("selectMenu0-child1");
-    const selectMenu0Child2 = document.getElementById("selectMenu0-child2");
-    const selectMenu0Child3 = document.getElementById("selectMenu0-child3");
-    assert_equals(selectMenu0.value, "one");
-    await clickOn(selectMenu0);
-    await clickOn(selectMenu0Child2);
-    assert_equals(selectMenu0.value, "two");
-
-    await clickOn(selectMenu0);
-    await clickOn(selectMenu0Child3);
-    assert_equals(selectMenu0.value, "two", "Clicking a non-HTMLOptionElement labeled as an option should do nothing");
-
-    await clickOn(selectMenu0Child1);
-    assert_equals(selectMenu0.value, "one");
-    assert_false(selectMenu0.open);
-  }, "HTMLOptionElements (and not other element types) should receive option controller code");
-
-
-  promise_test(async () => {
-    const selectMenu0 = document.getElementById("selectMenu0");
-    const selectMenu0Child4 = document.getElementById("selectMenu0-child4");
-
-    assert_equals(selectMenu0.value, "one");
-    await clickOn(selectMenu0);
-    assert_true(selectMenu0.open);
-    selectMenu0Child4.click();
-    assert_equals(selectMenu0.value, "one", "Clicking an option outside of the popover should not change the value");
-  }, "To receive option part controller code, an option must be a descendant of the listbox part in a flat tree traversal");
-
-  promise_test(async () => {
-    const selectMenu1 = document.getElementById("selectMenu1");
-    const selectMenu1Popover = document.getElementById("selectMenu1-popover");
-    const selectMenu1Button = document.getElementById("selectMenu1-button");
-    const selectMenu1Child2 = document.getElementById("selectMenu1-child2");
-    assert_false(selectMenu1Popover.matches(':popover-open'));
-    selectMenu1Button.click();
-    assert_false(selectMenu1Popover.matches(':popover-open'), "Clicking a button part that is a descendant of the listbox part should have no effect");
-
-    assert_equals(selectMenu1.value, "one");
-    await clickOn(selectMenu1);
-    assert_true(selectMenu1Popover.matches(':popover-open'));
-    await clickOn(selectMenu1Child2);
-    assert_equals(selectMenu1.value, "two", "Clicking an <option> should change the value");
-  }, "To receive button part controller code, an element labeled as a button must not be a descendant of the listbox part in a flat tree traversal");
-
-  promise_test(async () => {
-    const selectMenu2 = document.getElementById("selectMenu2");
-    const selectMenu2Popover = document.getElementById("selectMenu2-popover");
-    const selectMenu2Button = document.getElementById("selectMenu2-button");
-    const selectMenu2Child2 = document.getElementById("selectMenu2-child2");
-    const selectMenu2Child4 = document.getElementById("selectMenu2-child4");
-
-    assert_false(selectMenu2Popover.matches(':popover-open'));
-    await clickOn(selectMenu2Button);
-    assert_false(selectMenu2Popover.matches(':popover-open'), "Clicking a button part should not show an invalid listbox part");
-
-    assert_equals(selectMenu2.value, "three");
-    await clickOn(selectMenu2Button);
-    await clickOn(selectMenu2Child4);
-    assert_equals(selectMenu2.value, "four", "Clicking an <option> that is a descendant of a valid listbox part should update the value");
-  }, "To receive listbox part controller code, an element labeled as a listbox must not be a descendant of the button part in a flat tree traversal");
-
-  promise_test(async () => {
-    const selectMenu3 = document.getElementById("selectMenu3");
-    const selectMenu3ButtonSlot = document.getElementById("selectMenu3-button-slot");
-    const selectMenu3Button0 = document.getElementById("selectMenu3-button0");
-
-    assert_false(selectMenu3.open);
-
-    let button1 = document.createElement("div");
-    button1.innerText = "button1";
-    button1.setAttribute("behavior", "button");
-    selectMenu3ButtonSlot.appendChild(button1);
-
-    await clickOn(button1);
-    assert_false(selectMenu3.open, "A button part should only get controller code if it's first in document order, even if added dynamically");
-
-    await clickOn(selectMenu3Button0);
-    assert_true(selectMenu3.open, "A button part should get controller code if it's first in document order");
-  }, "Button controller code should be applied in flat tree traversal order regardless of dynamic insertion order");
-
-  promise_test(async () => {
-    const selectMenu4 = document.getElementById("selectMenu4");
-    const selectMenu4Button0 = document.getElementById("selectMenu4-button0");
-    const selectMenu4ListboxSlot = document.getElementById("selectMenu4-listbox-slot");
-    const selectMenu4Option2 = document.getElementById("selectMenu4-option2");
-
-    assert_false(selectMenu4.open);
-
-    let listbox2 = document.createElement("div");
-    listbox2.innerHTML = `
-      <option>three</option>
-      <option id="selectMenu4-option4">four</option>
-    `;
-    listbox2.setAttribute("behavior", "listbox");
-    selectMenu4ListboxSlot.appendChild(listbox2);
-
-    await clickOn(selectMenu4Button0);
-    assert_true(selectMenu4.open);
-
-    const selectMenu4Option4 = document.getElementById("selectMenu4-option4");
-    await clickOn(selectMenu4Option4);
-    assert_equals(selectMenu3.value, "one", "An option in a listbox should not get controller code if its listbox isn't first in document order, even if added dynamically");
-
-    await clickOn(selectMenu4Button0);
-    assert_true(selectMenu4.open);
-
-    await clickOn(selectMenu4Option2);
-    assert_equals(selectMenu4.value, "two", "An option in a listbox should get controller code if its listbox is first in document order, even if another listbox was added dynamically");
-}, "Listbox controller code should be applied in flat tree traversal order regardless of dynamic insertion order");
-
-promise_test(async () => {
-    const selectMenu5 = document.getElementById("selectMenu5");
-    const selectMenu5ButtonSlot = document.getElementById("selectMenu5-button-slot");
-    const selectMenu5Button0 = document.getElementById("selectMenu5-button0");
-    const selectMenu5SelectedValue0 = document.getElementById("selectMenu5-selectedValue0");
-
-    assert_false(selectMenu3.open);
-    assert_equals(selectMenu5SelectedValue0.innerText, "one");
-
-    let selectedValue1 = document.createElement("div");
-    selectMenu5ButtonSlot.appendChild(selectedValue1);
-
-    await clickOn(selectMenu5Button0);
-    assert_true(selectMenu5.open);
-
-    await clickOn(document.getElementById("selectMenu5-option0"));
-    assert_false(selectMenu5.open);
-    assert_equals(selectMenu5SelectedValue0.innerText, "two", "first selected-value part in flat tree order should get controller code");
-    assert_equals(selectedValue1.innerText, "", "Dynamically inserted selected-value part shouldn't get controller code if it's not first in flat tree order");
-  }, "selected-value controller code should be applied in flat tree traversal order regardless of dynamic insertion order");
-
-  promise_test(async () => {
-    const selectMenu = document.getElementById("selectMenu9");
-    const originalListbox = document.getElementById("selectMenu9-originalListbox");
-    const option2 = document.getElementById("selectMenu9-option2");
-    assert_equals(selectMenu.value, "one", "Initial value should be the first option");
-
-    let newListbox = document.createElement("div");
-    newListbox.setAttribute("popover", "auto");
-    newListbox.setAttribute("behavior", "listbox");
-    let newOption = document.createElement("option");
-    newOption.innerText = "three";
-    newListbox.appendChild(newOption);
-    let newOption2 = document.createElement("option");
-    newOption2.innerText = "four";
-    newListbox.appendChild(newOption2);
-    originalListbox.parentElement.insertBefore(newListbox, originalListbox);
-
-    await clickOn(selectMenu);
-    assert_true(selectMenu.open, "Menu should open when clicked");
-
-    option2.click(); // clickOn doesn't work because the old options are not displayed
-    assert_equals(selectMenu.value, "three", "Elements in second popover should no longer be option parts");
-    assert_true(selectMenu.open, "Clicking non-part options shouldn't close the popover");
-
-    await clickOn(newOption2);
-    assert_false(selectMenu.open);
-    assert_equals(selectMenu.value, "four", "New options should get controller code after listbox switch");
-    }, "Ensure that option controller code is updated when listbox changes");
-
-  promise_test(async () => {
-    const selectMenu = document.getElementById("selectMenu10");
-    const selectMenu10SlottedOption = document.getElementById("selectMenu10-slottedOption");
-
-    await clickOn(selectMenu10SlottedOption);
-    assert_false(selectMenu.open, "Controller code not applied due to part attribute missing");
-    selectMenu10SlottedOption.setAttribute("behavior", "button");
-    await clickOn(selectMenu10SlottedOption);
-    assert_true(selectMenu.open);
-
-    const option2 = document.getElementById("selectMenu10-option2");
-    await clickOn(option2);
-    assert_equals(selectMenu.value, "two");
-    assert_false(selectMenu.open);
-
-    selectMenu10SlottedOption.slot = "";
-    await clickOn(selectMenu);
-    assert_true(selectMenu.open, "Default button part should be used");
-    await clickOn(selectMenu10SlottedOption);
-    assert_equals(selectMenu.value, "Test 10");
-  }, "Ensure that controller code is applied after updating the slot attribute");
-
-  promise_test(async () => {
-    const selectMenu = document.getElementById("selectMenu11");
-    const selectMenu11Button= document.getElementById("selectMenu11-button");
-
-    await clickOn(selectMenu11Button);
-    assert_false(selectMenu.open, "Controller code not applied due to part attribute not being button");
-    selectMenu11Button.remove();
-
-    await clickOn(selectMenu);
-    assert_true(selectMenu.open, "Default button part should be used");
-  }, "Ensure that controller code is applied when slot and part attributes are different");
-
-  promise_test(async () => {
-    const selectMenu = document.getElementById("selectMenu12");
-    const originalListbox = document.getElementById("selectMenu12-originalListbox");
-    assert_equals(selectMenu.value, "one", "Initial value should be the first option");
-
-    const selectMenuButtonSlot = document.getElementById("selectMenu12-button-slot");
-    const selectMenuButton0 = document.getElementById("selectMenu12-button0");
-    const selectMenuOption1 = document.getElementById("selectMenu12-option1");
-
-    assert_false(selectMenu.open);
-    let button1 = document.createElement("div");
-    button1.innerText = "button1";
-    button1.setAttribute("behavior", "button");
-    selectMenuButtonSlot.insertBefore(button1, selectMenuButton0);
-    button1.click();
-    assert_true(selectMenu.open, "Controller code should be applied to the new first button in document order");
-    await clickOn(selectMenuOption1);
-    assert_false(selectMenu.open);
-    selectMenuButton0.click();
-    assert_false(selectMenu.open);
-
-    let button2 = document.createElement("div");
-    button2.innerText = "button2";
-    selectMenuButtonSlot.insertBefore(button2, button1);
-    button2.click();
-    assert_false(selectMenu.open, "Controller code should not be applied to button2 since it doesn't have behavior attribute set");
-    button2.setAttribute("behavior", "button");
-    button2.click();
-    assert_true(selectMenu.open, "Controller code should be applied to the new button part");
-    await clickOn(selectMenuOption1);
-    assert_false(selectMenu.open);
-
-    let newListbox = document.createElement("div");
-    newListbox.setAttribute("popover", "auto");
-    newListbox.setAttribute("behavior", "listbox");
-    let newOption = document.createElement("option");
-    newOption.innerText = "three";
-    newListbox.appendChild(newOption);
-    let newOption2 = document.createElement("option");
-    newOption2.innerText = "four";
-    newListbox.appendChild(newOption2);
-    originalListbox.parentElement.insertBefore(newListbox, originalListbox);
-    assert_equals(selectMenu.value, "three", "New value should be the first option");
-
-    newListbox.innerHTML = "<option>five</option><option>six</option>";
-    assert_equals(selectMenu.value, "five", "New value should be the first option");
-
-    selectMenu.innerHTML = "<option>seven</option><option id='selectMenu12-option2'>eight</option>";
-    assert_equals(selectMenu.value, "seven", "New value should be the first option");
-    const selectMenuOption2 = document.getElementById("selectMenu12-option2");
-    await clickOn(selectMenu);
-    assert_true(selectMenu.open);
-    await clickOn(selectMenuOption2);
-    assert_equals(selectMenu.value, "eight", "Controller code should be applied to new options");
-
-    selectMenuOption2.slot = "button";
-    assert_equals(selectMenu.value, "seven", "Previous selected option should become invalid");
-  }, "Ensure that controller code is synchronously applied");
-
-  promise_test(async () => {
-    const selectMenu = document.getElementById("selectMenu13");
-    assert_equals(selectMenu.value, "one");
-
-    const selectMenuButton0 = document.getElementById("selectMenu13-button0");
-    const selectMenuButton1 = document.getElementById("selectMenu13-button1");
-    selectMenuButton1.click();
-    assert_false(selectMenu.open);
-    selectMenuButton0.click();
-    assert_true(selectMenu.open, "First button should receive controller code");
-    await clickOn(document.getElementById("selectMenu13-option2"));
-    assert_equals(selectMenu.value, "two");
-    let divButtonToRemove = document.getElementById("selectMenu13-removeContent-button");
-    divButtonToRemove.innerHTML = "";
-    selectMenuButton0.click();
-    assert_false(selectMenu.open, "The first button is invalid");
-    const selectMenuButton2 = document.getElementById("selectMenu13-button2");
-    selectMenuButton2.click();
-    assert_true(selectMenu.open, "The button part should be updated")
-    await clickOn(document.getElementById("selectMenu13-option1"));
-    assert_equals(selectMenu.value, "one");
-
-    const selectMenuOption4 = document.getElementById("selectMenu13-option4");
-    selectMenuOption4.click();
-    assert_equals(selectMenu.value, "one");
-    let divListboxToRemove = document.getElementById("selectMenu13-removeContent-listbox");
-    divListboxToRemove.innerHTML = "";
-    assert_equals(selectMenu.value, "three", "The listbox part should be updated");
-    selectMenuOption4.click();
-    assert_equals(selectMenu.value, "four", "Controller code should be applied to the new options");
-
-    let selectMenuNewListbox = document.getElementById("selectMenu13-newListbox");
-    selectMenuNewListbox.innerHTML = "";
-    assert_equals(selectMenu.value, "");
-    selectMenuOption4.click();
-    assert_equals(selectMenu.value, "");
-  }, "Controller code should be updated when nested parts are removed");
-
-  promise_test(async () => {
-    let selectMenu = document.getElementById("selectMenu14");
-    assert_equals(selectMenu.value, "one");
-    const selectMenuButton0 = document.getElementById("selectMenu14-button0");
-    const selectMenuOption2 = document.getElementById("selectMenu14-option2");
-
-    selectMenuButton0.click();
-    assert_true(selectMenu.open);
-    await clickOn(selectMenuOption2);
-    assert_equals(selectMenu.value, "two");
-
-    document.body.removeChild(selectMenu);
-    selectMenu.removeChild(selectMenuOption2);
-    assert_equals(selectMenu.value, "one");
-    let newOption = document.createElement("option");
-    newOption.innerText = "three";
-    selectMenu.appendChild(newOption);
-    newOption.click();
-    assert_equals(selectMenu.value, "three", "New option should receive controller code");
-
-    let doc = document.implementation.createHTMLDocument('');
-    let selectMenu1 = doc.createElement('selectmenu');
-    let firstOption = doc.createElement('option');
-    firstOption.innerText = 'one';
-    let secondOption = doc.createElement('option');
-    secondOption.innerText = 'two';
-    selectMenu1.appendChild(firstOption);
-    selectMenu1.appendChild(secondOption);
-    assert_equals(selectMenu1.value, "one");
-    secondOption.click();
-    assert_equals(selectMenu1.value, "two");
-    document.body.appendChild(selectMenu1);
-    selectMenu1.removeChild(secondOption);
-    assert_equals(selectMenu1.value, "one");
-  }, "Moving a selectmenu between documents should keep controller code active");
-
-  promise_test(async () => {
-    const selectMenu = document.getElementById("selectMenu15");
-    const selectMenuButtonContainer = document.getElementById("selectMenu15-div0");
-
-    const outerDiv = document.createElement("div");
-    const button = document.createElement("input");
-    button.type = button.value = "button";
-    button.setAttribute("behavior", "button");
-    outerDiv.appendChild(button);
-    selectMenuButtonContainer.appendChild(outerDiv);
-
-    await clickOn(selectMenu);
-    assert_true(selectMenu.open, "New button should receive controller code");
-  }, "New parts should be detected even when in the subtree of an inserted node");
-
-  promise_test(async () => {
-    const selectMenu = document.getElementById("selectMenu16");
-    const selectMenuButtonContainer = document.getElementById("selectMenu16-div0");
-    const selectMenuButton = document.getElementById("selectMenu16-button0");
-
-    selectMenuButtonContainer.remove();
-
-    selectMenuButton.click();
-    assert_false(selectMenu.open, "Removed button should no longer have controller code");
-  }, "Part removals should be detected even when in the subtree of a removed node");
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-popover-position-with-zoom.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-popover-position-with-zoom.tentative.html
deleted file mode 100644
index 85d73d6a407bfd..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-popover-position-with-zoom.tentative.html
+++ /dev/null
@@ -1,135 +0,0 @@
-<!DOCTYPE html>
-<html>
-<title>HTMLSelectMenuElement Test: popover position with zoom</title>
-<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/resources/testdriver.js"></script>
-<script src="/resources/testdriver-actions.js"></script>
-<script src="/resources/testdriver-vendor.js"></script>
-
-<style>
-  #selectMenu0 {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    zoom: 2;
-  }
-
-  #selectMenu1 {
-    position: absolute;
-    bottom: 0px;
-    left: 0px;
-    zoom: 1.5;
-  }
-
-  #selectMenu1-popover {
-    zoom: 2;
-  }
-
-  #selectMenu2 {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    zoom: 3;
-  }
-
-  #selectMenu3 {
-    position: absolute;
-    bottom: 0px;
-    right: 0px;
-    zoom: 4;
-  }
-
-  #selectMenu3-popover {
-    zoom: 1.5;
-  }
-</style>
-
-<selectmenu id="selectMenu0">
-  <div slot="button" behavior="button" id="selectMenu0-button">Custom bottom left</div>
-  <div popover slot="listbox" behavior="listbox" id="selectMenu0-popover">
-    <option>bottom left</option>
-    <option>two</option>
-    <option>three</option>
-  </div>
-</selectmenu>
-<br>
-
-<selectmenu id="selectMenu1">
-  <div slot="button" behavior="button" id="selectMenu1-button">Custom top left</div>
-  <div popover slot="listbox" behavior="listbox" id="selectMenu1-popover">
-    <option>top left</option>
-    <option>two</option>
-    <option>three</option>
-  </div>
-</selectmenu>
-
-<selectmenu id="selectMenu2">
-  <div slot="button" behavior="button" id="selectMenu2-button">Custom bottom right</div>
-  <div popover slot="listbox" behavior="listbox" id="selectMenu2-popover">
-    <option>bottom right</option>
-    <option>two</option>
-    <option>three</option>
-  </div>
-</selectmenu>
-
-<selectmenu id="selectMenu3">
-  <div slot="button" behavior="button" id="selectMenu3-button">Custom top right</div>
-  <div popover slot="listbox" behavior="listbox" id="selectMenu3-popover">
-    <option>top right</option>
-    <option>two</option>
-    <option>three</option>
-  </div>
-</selectmenu>
-
-<script>
-  function clickOn(element) {
-    const actions = new test_driver.Actions();
-    return actions.pointerMove(0, 0, {origin: element})
-      .pointerDown({button: actions.ButtonType.LEFT})
-      .pointerUp({button: actions.ButtonType.LEFT})
-      .send();
-  }
-
-  promise_test(async () => {
-    const selectMenu0 = document.getElementById("selectMenu0");
-    const selectMenu0Popover = document.getElementById("selectMenu0-popover");
-    const selectMenu0Button = document.getElementById("selectMenu0-button");
-
-    await clickOn(selectMenu0);
-    assert_equals(Math.abs(Math.trunc(selectMenu0.getBoundingClientRect().bottom - selectMenu0Popover.getBoundingClientRect().top)), 0);
-    assert_equals(Math.abs(Math.trunc(selectMenu0.getBoundingClientRect().left - selectMenu0Popover.getBoundingClientRect().left)), 0);
-  }, "The popover should be bottom left positioned");
-
-  promise_test(async () => {
-    const selectMenu1 = document.getElementById("selectMenu1");
-    const selectMenu1Popover = document.getElementById("selectMenu1-popover");
-    const selectMenu1Button = document.getElementById("selectMenu1-button");
-
-    selectMenu1Button.click();
-    assert_equals(Math.abs(Math.trunc(selectMenu1.getBoundingClientRect().top - selectMenu1Popover.getBoundingClientRect().bottom * 2)), 0);
-    assert_equals(Math.abs(Math.trunc(selectMenu1.getBoundingClientRect().left - selectMenu1Popover.getBoundingClientRect().left * 2)), 0);
-  }, "The popover should be top left positioned");
-
-  promise_test(async () => {
-    const selectMenu2 = document.getElementById("selectMenu2");
-    const selectMenu2Popover = document.getElementById("selectMenu2-popover");
-    const selectMenu2Button = document.getElementById("selectMenu2-button");
-
-    selectMenu2Button.click();
-    assert_equals(Math.abs(Math.trunc(selectMenu2.getBoundingClientRect().bottom - selectMenu2Popover.getBoundingClientRect().top)), 0);
-    assert_equals(Math.abs(Math.trunc(selectMenu2.getBoundingClientRect().right - selectMenu2Popover.getBoundingClientRect().right)), 0);
-  }, "The popover should be bottom right positioned");
-
-  promise_test(async () => {
-    const selectMenu3 = document.getElementById("selectMenu3");
-    const selectMenu3Popover = document.getElementById("selectMenu3-popover");
-    const selectMenu3Button = document.getElementById("selectMenu3-button");
-
-    selectMenu3Button.click();
-    assert_equals(Math.abs(Math.trunc(selectMenu3.getBoundingClientRect().top - selectMenu3Popover.getBoundingClientRect().bottom * 1.5)), 0);
-    assert_equals(Math.abs(Math.trunc(selectMenu3.getBoundingClientRect().right - selectMenu3Popover.getBoundingClientRect().right * 1.5)), 0);
-  }, "The popover should be top right positioned");
-
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-popover-position.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-popover-position.tentative.html
deleted file mode 100644
index d83015f4efdabe..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-popover-position.tentative.html
+++ /dev/null
@@ -1,115 +0,0 @@
-<!DOCTYPE html>
-<html>
-<title>HTMLSelectMenuElement Test: popover position</title>
-<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/resources/testdriver.js"></script>
-<script src="/resources/testdriver-actions.js"></script>
-<script src="/resources/testdriver-vendor.js"></script>
-
-<style>
-  #selectMenu0 {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-  }
-
-  #selectMenu1 {
-    position: absolute;
-    bottom: 0px;
-    left: 0px;
-  }
-
-  #selectMenu2 {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-  }
-
-  #selectMenu3 {
-    position: absolute;
-    bottom: 0px;
-    right: 0px;
-  }
-</style>
-
-<selectmenu id="selectMenu0">
-  <div popover slot="listbox" behavior="listbox" id="selectMenu0-popover">
-    <option>bottom left</option>
-    <option>two</option>
-    <option>three</option>
-  </div>
-</selectmenu>
-<br>
-
-<selectmenu id="selectMenu1">
-  <div popover slot="listbox" behavior="listbox" id="selectMenu1-popover">
-    <option>top left</option>
-    <option>two</option>
-    <option>three</option>
-  </div>
-</selectmenu>
-
-<selectmenu id="selectMenu2">
-  <div popover slot="listbox" behavior="listbox" id="selectMenu2-popover">
-    <option>bottom right</option>
-    <option>two</option>
-    <option>three</option>
-  </div>
-</selectmenu>
-
-<selectmenu id="selectMenu3">
-  <div popover slot="listbox" behavior="listbox" id="selectMenu3-popover">
-    <option>top right</option>
-    <option>two</option>
-    <option>three</option>
-  </div>
-</selectmenu>
-
-<script>
-  function clickOn(element) {
-    const actions = new test_driver.Actions();
-    return actions.pointerMove(0, 0, {origin: element})
-      .pointerDown({button: actions.ButtonType.LEFT})
-      .pointerUp({button: actions.ButtonType.LEFT})
-      .send();
-  }
-
-  promise_test(async () => {
-    const selectMenu0 = document.getElementById("selectMenu0");
-    const selectMenu0Popover = document.getElementById("selectMenu0-popover");
-
-    await clickOn(selectMenu0);
-    assert_equals(Math.abs(Math.trunc(selectMenu0.getBoundingClientRect().bottom - selectMenu0Popover.getBoundingClientRect().top)), 0);
-    assert_equals(Math.abs(Math.trunc(selectMenu0.getBoundingClientRect().left - selectMenu0Popover.getBoundingClientRect().left)), 0);
-  }, "The popover should be bottom left positioned");
-
-  promise_test(async () => {
-    const selectMenu1 = document.getElementById("selectMenu1");
-    const selectMenu1Popover = document.getElementById("selectMenu1-popover");
-
-    await clickOn(selectMenu1);
-    assert_equals(Math.abs(Math.trunc(selectMenu1.getBoundingClientRect().top - selectMenu1Popover.getBoundingClientRect().bottom)), 0);
-    assert_equals(Math.abs(Math.trunc(selectMenu1.getBoundingClientRect().left - selectMenu1Popover.getBoundingClientRect().left)), 0);
-  }, "The popover should be top left positioned");
-
-  promise_test(async () => {
-    const selectMenu2 = document.getElementById("selectMenu2");
-    const selectMenu2Popover = document.getElementById("selectMenu2-popover");
-
-    await clickOn(selectMenu2);
-    assert_equals(Math.abs(Math.trunc(selectMenu2.getBoundingClientRect().bottom - selectMenu2Popover.getBoundingClientRect().top)), 0);
-    assert_equals(Math.abs(Math.trunc(selectMenu2.getBoundingClientRect().right - selectMenu2Popover.getBoundingClientRect().right)), 0);
-  }, "The popover should be bottom right positioned");
-
-  promise_test(async () => {
-    const selectMenu3 = document.getElementById("selectMenu3");
-    const selectMenu3Popover = document.getElementById("selectMenu3-popover");
-
-    await clickOn(selectMenu3);
-    assert_equals(Math.abs(Math.trunc(selectMenu3.getBoundingClientRect().top - selectMenu3Popover.getBoundingClientRect().bottom)), 0);
-    assert_equals(Math.abs(Math.trunc(selectMenu3.getBoundingClientRect().right - selectMenu3Popover.getBoundingClientRect().right)), 0);
-  }, "The popover should be top right positioned");
-
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-popover.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-popover.tentative.html
deleted file mode 100644
index 74aa4f828c3410..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-popover.tentative.html
+++ /dev/null
@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<title>HTMLSelectMenuElement Test: popover</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/resources/testdriver.js"></script>
-<script src="/resources/testdriver-actions.js"></script>
-<script src="/resources/testdriver-vendor.js"></script>
-
-<selectmenu id="selectMenu0">
-  <option>one</option>
-  <option id="selectMenu0-child2">two</option>
-  <div id="selectMenu0-child3">I'm a div with no part attr</div>
-  <option>three</option>
-  <option>four</option>
-</selectmenu>
-
-<selectmenu id="selectMenu1">
-  <div slot="button" behavior="button" class="button">
-    Custom button
-  </div>
-  <div popover slot="listbox" behavior="listbox">
-    <option>one</option>
-    <option class="child2">two</option>
-    <option class="child3">three</option>
-  </div>
-</selectmenu>
-
-<selectmenu id="selectMenu2">
-  <!-- Swap out the listbox part without providing a replacement -->
-  <div slot="listbox"></div>
-</selectmenu>
-
-<selectmenu id="selectMenu3">
-  <div slot="listbox">
-    <div popover behavior="listbox" id="selectMenu3-listbox">
-      <option>one</option>
-    </div>
-  </div>
-</selectmenu>
-<script>
-
-  function clickOn(element) {
-    const actions = new test_driver.Actions();
-    return actions.pointerMove(0, 0, {origin: element})
-      .pointerDown({button: actions.ButtonType.LEFT})
-      .pointerUp({button: actions.ButtonType.LEFT})
-      .send();
-  }
-
-  promise_test(async () => {
-    const selectMenu0 = document.getElementById("selectMenu0");
-    const selectMenu0Child2 = document.getElementById("selectMenu0-child2");
-    const selectMenu0Child3 = document.getElementById("selectMenu0-child3");
-    assert_equals(selectMenu0.value, "one");
-    assert_equals(selectMenu0.open, false);
-    await clickOn(selectMenu0);
-    assert_equals(selectMenu0.open, true);
-    await clickOn(selectMenu0Child2);
-    assert_equals(selectMenu0.value, "two");
-    assert_equals(selectMenu0.open, false);
-
-    await clickOn(selectMenu0);
-    assert_equals(selectMenu0.open, true);
-    await clickOn(selectMenu0Child3);
-    assert_equals(selectMenu0.value, "two", "Clicking a non-option should not change the value");
-    assert_equals(selectMenu0.open, true);
-    await clickOn(selectMenu0Child2);
-    assert_equals(selectMenu0.open, false);
-  }, "Opening the popover and clicking an option should change the selectmenu's value");
-
-  promise_test(async () => {
-    const selectMenu1 = document.getElementById("selectMenu1");
-    const button = selectMenu1.querySelector(".button");
-    const child2 = selectMenu1.querySelector(".child2");
-    const child3 = selectMenu1.querySelector(".child3");
-    assert_equals(selectMenu1.value, "one");
-    assert_equals(selectMenu1.open, false);
-    await clickOn(button);
-    assert_equals(selectMenu1.open, true);
-    await clickOn(child2);
-    assert_equals(selectMenu1.value, "two", "Clicking an <option> should change the value");
-    assert_equals(selectMenu1.open, false);
-
-    await clickOn(button);
-    assert_equals(selectMenu1.open, true);
-    await clickOn(child3);
-    assert_equals(selectMenu1.value, "three", "Clicking a <div part='option'> should change the value");
-    assert_equals(selectMenu1.open, false);
-  }, "With custom button and popover: opening the popover and clicking an option should change the selectmenu's value");
-
-  promise_test(async () => {
-    const selectMenu2 = document.getElementById("selectMenu2");
-    await clickOn(selectMenu2);
-    assert_equals(selectMenu2.value, "");
-    assert_equals(selectMenu2.open, false);
-  }, "Clicking a popover with no listbox part does nothing");
-
-  promise_test(async () => {
-    const selectMenu3 = document.getElementById("selectMenu3");
-    const selectMenu3Listbox = document.getElementById("selectMenu3-listbox");
-    selectMenu3Listbox.remove();
-
-    await clickOn(selectMenu3);
-    assert_equals(selectMenu3.value, "");
-    assert_equals(selectMenu3.open, false);
-  }, "Clicking a popover with a listbox that was removed does nothing");
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-pseudo-light-dismiss-invalidation.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-pseudo-light-dismiss-invalidation.tentative.html
deleted file mode 100644
index dfbab93de8236f..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-pseudo-light-dismiss-invalidation.tentative.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<link rel=author href="mailto:jarhar@chromium.org">
-<link rel=help href="http://crbug.com/1429839">
-<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>
-
-<selectmenu id=selectmenu>
-  <option id=optone>one</option>
-  <option id=opttwo>two</option>
-</selectmenu>
-<style>
-selectmenu {
-  background-color: rgb(0, 0, 255);
-}
-selectmenu:closed {
-  background-color: rgb(0, 255, 0);
-}
-selectmenu:open {
-  background-color: rgb(255, 0, 0);
-}
-</style>
-<button id=button>hello world</button>
-
-<script>
-promise_test(async () => {
-  assert_equals(getComputedStyle(selectmenu).backgroundColor, 'rgb(0, 255, 0)',
-    'The selectmenu should match :closed at the start of the test.');
-
-  await test_driver.click(selectmenu);
-  assert_equals(getComputedStyle(selectmenu).backgroundColor, 'rgb(255, 0, 0)',
-    'The selectmenu should match :open when opened.');
-
-  await test_driver.click(opttwo);
-  assert_equals(getComputedStyle(selectmenu).backgroundColor, 'rgb(0, 255, 0)',
-    'The selectmenu should match :closed after clicking an option.');
-
-  await test_driver.click(selectmenu);
-  assert_equals(getComputedStyle(selectmenu).backgroundColor, 'rgb(255, 0, 0)',
-    'The selectmenu should match :open when reopened.');
-
-  await test_driver.click(button);
-  assert_equals(getComputedStyle(selectmenu).backgroundColor, 'rgb(0, 255, 0)',
-    'The selectmenu should match :closed after light dismiss.');
-}, 'selectmenu should not match :open when light dismissed.');
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-pseudo-open-closed.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-pseudo-open-closed.tentative.html
deleted file mode 100644
index b1400e04265128..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-pseudo-open-closed.tentative.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<link rel=author href="mailto:jarhar@chromium.org">
-<link rel=help href="https://github.com/openui/open-ui/issues/547">
-<link rel=help href="https://drafts.csswg.org/selectors/#open-state">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-
-<selectmenu id=myselectmenu>
-  <button id=custombutton slot=button behavior=button>button</button>
-  <option>one</option>
-  <option>two</option>
-</selectmenu>
-
-<script>
-test(() => {
-  assert_false(myselectmenu.matches(':open'),
-    'Selectmenu should not match :open while it is closed.');
-  assert_true(myselectmenu.matches(':closed'),
-    'Selectmenu should match :closed while it is closed.');
-
-  custombutton.click();
-
-  assert_true(myselectmenu.matches(':open'),
-    'Selectmenu should match :open while it is open.');
-  assert_false(myselectmenu.matches(':closed'),
-    'Selectmenu should not match :closed while it is open.');
-}, 'Selectmenu should support :open and :closed pseudo selectors.');
-</script>
-
-<selectmenu id=selectmenuinvalidation>
-  <button slot=button behavior=button>button</button>
-  <option>one</option>
-  <option>two</option>
-</selectmenu>
-<style>
-selectmenu:closed {
-  background-color: red;
-}
-selectmenu:open {
-  background-color: green;
-}
-</style>
-
-<script>
-test(() => {
-  const selectmenu = document.getElementById('selectmenuinvalidation');
-  const button = selectmenu.querySelector('button');
-  const option = selectmenu.querySelector('option');
-
-  assert_equals(getComputedStyle(selectmenu).backgroundColor, 'rgb(255, 0, 0)',
-    'The style rules from :closed should apply when the selectmenu is closed.');
-
-  button.click();
-  assert_equals(getComputedStyle(selectmenu).backgroundColor, 'rgb(0, 128, 0)',
-    'The style rules from :open should apply when the selectmenu is open.');
-
-  option.click();
-  assert_equals(getComputedStyle(selectmenu).backgroundColor, 'rgb(255, 0, 0)',
-    'The style rules from :closed should apply when the selectmenu is opened and closed again.');
-}, 'Selectmenu :open and :closed should invalidate correctly.');
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-rtl-ref.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-rtl-ref.tentative.html
deleted file mode 100644
index 42b2541fd516b0..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-rtl-ref.tentative.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<script src="support/fake-selectmenu.js"></script>
-<body>
-<script>
-  const selectmenu = createFakeSelectmenu('option');
-  document.body.appendChild(selectmenu);
-  selectmenu.style.direction = "rtl";
-  selectmenu.style.width = "300px";
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-behavior-ref.html b/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-behavior-ref.html
deleted file mode 100644
index bf468c5516cdbd..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-behavior-ref.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<script src="support/fake-selectmenu.js"></script>
-<body>
-<script>
-  const selectmenu = createFakeSelectmenu('hello world');
-  document.body.appendChild(selectmenu);
-  selectmenu.querySelector('.fake-selectmenu-selected-value')
-    .style.color = 'blue';
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-part-ref.html b/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-part-ref.html
deleted file mode 100644
index 744846b5511e39..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-part-ref.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<script src="support/fake-selectmenu.js"></script>
-<body>
-<script>
-  const selectmenu = createFakeSelectmenu('hello world');
-  document.body.appendChild(selectmenu);
-  selectmenu.querySelector('.fake-selectmenu-selected-value')
-    .style.backgroundColor = 'red';
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-slot-ref.html b/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-slot-ref.html
deleted file mode 100644
index 3b322bf79157dd..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-selected-value-slot-ref.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<script src="support/fake-selectmenu.js"></script>
-<body>
-<script>
-  const selectmenu = createFakeSelectmenu('hello world');
-  document.body.appendChild(selectmenu);
-
-  const oldSelectedValue = selectmenu.querySelector('.fake-selectmenu-selected-value');
-  const newSelectedValue = document.createElement('div');
-  newSelectedValue.textContent = 'new selected value';
-
-  replaceChildElement(newSelectedValue, oldSelectedValue);
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-validity.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-validity.tentative.html
deleted file mode 100644
index a58fe54ff6a28b..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-validity.tentative.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<title>HTMLSelectMenuElement Test: validity</title>
-<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-
-<selectmenu id="selectmenu1" required>
-  <option>one</option>
-  <option>two</option>
-  <option>three</option>
-  <option>four</option>
-</selectmenu>
-
-<form>
-  <selectmenu id="selectmenu2" required>
-  </selectmenu>
-</form>
-
-<script>
-
-test(() => {
-  let selectMenu = document.createElement('selectmenu');
-  assert_true(selectMenu.willValidate, "A selectmenu element is a submittable element that is a candidate for constraint validation.");
-  let option = document.createElement('option');
-  selectMenu.appendChild(option);
-  assert_true(selectMenu.checkValidity(), "Always valid when the selectmenu isn't a required value.");
-
-  selectMenu.required = true;
-  assert_equals(selectMenu.value, "");
-  assert_false(selectMenu.checkValidity(), "A selected placeholder option should invalidate the selectmenu.");
-
-  let emptyOption = document.createElement('option');
-  selectMenu.appendChild(emptyOption);
-  assert_false(selectMenu.checkValidity(), "A selected placeholder option should invalidate the selectmenu even if there are multiple options.");
-  emptyOption.selected = true;
-  assert_true(selectMenu.checkValidity(), "An empty non-placeholder option should be a valid choice.");
-
-  let filledOption = document.createElement('option');
-  filledOption.value = "test";
-  selectMenu.appendChild(filledOption);
-  filledOption.selected = true;
-  assert_equals(selectMenu.value, "test", "The non-empty value should be set.");
-  assert_true(selectMenu.checkValidity(), "A non-empty non-placeholder option should be a valid choice.");
-
-  selectMenu.removeChild(option);
-  selectMenu.appendChild(emptyOption);
-  emptyOption.selected = true;
-  assert_equals(selectMenu.value, "", "The empty value should be set.");
-  assert_true(selectMenu.checkValidity(), "Only the first option can be seen as a placeholder.");
-
-  selectMenu.removeChild(filledOption);
-  assert_false(selectMenu.checkValidity(), "A selected placeholder option should invalidate the selectmenu.");
-
-  emptyOption.value = "test2";
-  assert_equals(selectMenu.value, "test2");
-  assert_true(selectMenu.checkValidity(), "A non-empty option value should be a valid choice.");
-
-  emptyOption.removeAttribute("value");
-  assert_equals(selectMenu.value, "");
-  assert_false(selectMenu.checkValidity());
-  emptyOption.innerText = "test";
-  assert_equals(selectMenu.value, "test");
-  assert_true(selectMenu.checkValidity(), "A non-empty option should be a valid choice.");
-
-  const selectMenu1 = document.getElementById('selectmenu1');
-  assert_equals(selectMenu1.value, "one");
-  assert_true(selectMenu1.checkValidity(), "A selectmenu with non-empty placeholder option should be valid.");
-}, "Validation for placeholder option");
-
-test(() => {
-  const selectMenu2 = document.getElementById('selectmenu2');
-  assert_equals(selectMenu2.value, "");
-  assert_false(selectMenu2.checkValidity());
-  let form = document.querySelector('form');
-  let invalidControl = form.querySelector('selectmenu:invalid');
-  assert_equals(selectMenu2, invalidControl);
-  let didDispatchInvalid = false;
-  invalidControl.addEventListener('invalid', e => { didDispatchInvalid = true; });
-  let didDispatchSubmit = false;
-  form.addEventListener('submit', event => { event.preventDefault(); didDispatchSubmit = true; });
-
-  form.requestSubmit();
-  assert_true(didDispatchInvalid);
-  assert_false(didDispatchSubmit);
-}, "Check form not submitted for invalid selectmenu");
-
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-value-selectedOption.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-value-selectedOption.tentative.html
deleted file mode 100644
index 8998a07e03c5fd..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-value-selectedOption.tentative.html
+++ /dev/null
@@ -1,224 +0,0 @@
-<!DOCTYPE html>
-<title>HTMLSelectMenuElement Test: value and selectedOption</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-
-<selectmenu id="selectMenu0"></selectmenu>
-
-<selectmenu id="selectMenu1">
-  <option>one</option>
-  <option>two</option>
-  <div>I'm a div with no part attr</div>
-  <option id="selectMenu1-option3">three</option>
-  <option>four</option>
-</selectmenu>
-
-<selectmenu id="selectMenu2">
-  <div behavior="option">one</div>
-  <div behavior="option">two</div>
-  <div>I'm a div with no part attr</div>
-  <div behavior="option">three</div>
-  <div behavior="option">four</div>
-</selectmenu>
-
-<selectmenu id="selectMenu3">
-  <div>I'm a div with no part attr</div>
-  <option id="selectMenu3-child1">one</option>
-  <option id="selectMenu3-child2">two</option>
-  <option id="selectMenu3-child3">three</option>
-</selectmenu>
-
-<selectmenu id="selectMenu4">
-  <div slot="button" behavior="button">
-    <div behavior="selected-value" id="selectMenu4-custom-selected-value">Default custom selected-value text</div>
-  </div>
-  <option id="selectMenu4-option1">one</option>
-  <option id="selectMenu4-option2">two</option>
-</selectmenu>
-
-<selectmenu id="selectMenu5">
-  <div slot="button" behavior="button">
-    <div behavior="selected-value" id="selectMenu5-custom-selected-value">Default custom selected-value text</div>
-  </div>
-  <div popover slot="listbox" behavior="listbox">
-    <option id="selectMenu5-option1">one</option>
-    <option id="selectMenu5-option2">two</option>
-  </div>
-</selectmenu>
-
-<selectmenu id="selectMenu6">
-  <option id="selectMenu6-option1">one</option>
-  <option id="selectMenu6-option2" selected>two</option>
-  <option id="selectMenu6-option3">three</option>
-</selectmenu>
-
-<selectmenu id="selectMenu7">
-  <option id="selectMenu7-option1">one</option>
-  <option id="selectMenu7-option2" selected value="test">two</option>
-  <option>three</option>
-</selectmenu>
-
-<script>
-
-test(() => {
-  const selectMenu0 = document.getElementById("selectMenu0");
-  assert_equals(selectMenu0.value, "");
-  assert_equals(selectMenu0.selectedOption, null);
-  selectMenu0.value = "something";
-  assert_equals(selectMenu0.value, "", "If there is no matching option, selectmenu should be cleared");
-  assert_equals(selectMenu0.selectedOption, null);
-}, "Test that HTMLSelectMenu with no options has empty string for value and null for selectedOption");
-
-test(() => {
-  const selectMenu1 = document.getElementById("selectMenu1");
-  assert_equals(selectMenu1.value, "one", "value should start with the text of the first option part");
-
-  selectMenu1.value = "three";
-  assert_equals(selectMenu1.value, "three", "value can be set to the text of an option part");
-  assert_equals(selectMenu1.selectedOption, document.getElementById("selectMenu1-option3"));
-
-  selectMenu1.value = "I'm a div with no part attr";
-  assert_equals(selectMenu1.value, "", "If there is no matching option selectmenu should be cleared");
-  assert_equals(selectMenu1.selectedOption, null);
-}, "Test value and selectedOption with HTMLOptionElement element option parts");
-
-test(() => {
-  const selectMenu1 = document.getElementById("selectMenu1");
-  selectMenu1.value = "one";
-  assert_equals(selectMenu1.value, "one");
-
-  selectMenu1.value = null;
-  assert_equals(selectMenu1.value, "");
-  assert_equals(selectMenu1.selectedOption, null);
-}, "Test value and selectedOption when value is null");
-
-test(() => {
-  const selectMenu1 = document.getElementById("selectMenu1");
-  selectMenu1.value = "one";
-  assert_equals(selectMenu1.value, "one");
-
-  selectMenu1.value = undefined;
-  assert_equals(selectMenu1.value, "");
-  assert_equals(selectMenu1.selectedOption, null);
-}, "Test value and selectedOption when value is undefined");
-
-test(() => {
-  const selectMenu2 = document.getElementById("selectMenu2");
-  assert_equals(selectMenu2.value, "", "Non-HTMLOptionElements shouldn't be treated as option parts");
-  assert_equals(selectMenu2.selectedOption, null);
-
-  selectMenu2.value = "three";
-  assert_equals(selectMenu2.value, "", "value can't be set when there are no option parts'");
-  assert_equals(selectMenu2.selectedOption, null);
-}, "Test value with non-HTMLOptionElement elements labeled as parts");
-
-test(() => {
-  const selectMenu3 = document.getElementById("selectMenu3");
-  assert_equals(selectMenu3.value, "one", "value should start with the text of the first option part");
-  assert_equals(selectMenu3.selectedOption, document.getElementById("selectMenu3-child1"));
-
-  document.getElementById("selectMenu3-child3").remove();
-  assert_equals(selectMenu3.value, "one", "Removing a non-selected option should not change the value");
-  assert_equals(selectMenu3.selectedOption, document.getElementById("selectMenu3-child1"));
-
-  document.getElementById("selectMenu3-child1").remove();
-  assert_equals(selectMenu3.value, "two", "When the selected option is removed, the new first option should become selected");
-  assert_equals(selectMenu3.selectedOption, document.getElementById("selectMenu3-child2"));
-
-  document.getElementById("selectMenu3-child2").remove();
-  assert_equals(selectMenu3.value, "", "When all options are removed, value should be the empty string");
-  assert_equals(selectMenu3.selectedOption, null);
-}, "Test that value and selectedOption are updated when options are removed");
-
-test(() => {
-  const selectMenu4 = document.getElementById("selectMenu4");
-  let customSelectedValuePart = document.getElementById("selectMenu4-custom-selected-value");
-  assert_equals(selectMenu4.value, "one", "value should start with the text of the first option part");
-  assert_equals(selectMenu4.selectedOption, document.getElementById("selectMenu4-option1"));
-  assert_equals(customSelectedValuePart.innerText, "one", "Custom selected value part should be set to initial value of selectmenu");
-
-  selectMenu4.value = "two";
-  assert_equals(customSelectedValuePart.innerText, "two", "Custom selected value part should be updated when value of selectmenu changes");
-  assert_equals(selectMenu4.selectedOption, document.getElementById("selectMenu4-option2"));
-}, "Test that slotted-in selected-value part is updated to value of selectmenu");
-
-test(() => {
-  const selectMenu5 = document.getElementById("selectMenu5");
-  let customSelectedValuePart = document.getElementById("selectMenu5-custom-selected-value");
-  assert_equals(selectMenu5.value, "one", "value should start with the text of the first option part");
-  assert_equals(selectMenu5.selectedOption, document.getElementById("selectMenu5-option1"));
-  assert_equals(customSelectedValuePart.innerText, "one", "Custom selected value part should be set to initial value of selectmenu");
-
-  selectMenu5.value = "two";
-  assert_equals(customSelectedValuePart.innerText, "two", "Custom selected value part should be updated when value of selectmenu changes");
-  assert_equals(selectMenu5.selectedOption, document.getElementById("selectMenu5-option2"));
-}, "Test that option parts in a slotted-in listbox are reflected in the value property");
-
-test(() => {
-  let selectMenu = document.createElement('selectmenu');
-  assert_equals(selectMenu.value, "");
-  let option = document.createElement('option');
-  option.innerText = "one";
-  selectMenu.appendChild(option);
-  assert_equals(selectMenu.value, "one");
-  assert_equals(selectMenu.selectedOption, option);
-
-  let newOption = document.createElement('option');
-  newOption.innerText = 'two';
-  selectMenu.appendChild(newOption);
-  selectMenu.value = "two";
-  assert_equals(selectMenu.value, "two");
-  assert_equals(selectMenu.selectedOption, newOption);
-
-  option.click();
-  assert_equals(selectMenu.value, "one");
-  assert_equals(selectMenu.selectedOption, option);
-}, "Test that value and selectedOption are correctly updated");
-
-test(() => {
-  const selectMenu = document.getElementById("selectMenu6");
-  let selectMenuOption1 = document.getElementById("selectMenu6-option1");
-
-  assert_equals(selectMenu.value, "two");
-  assert_equals(selectMenu.selectedOption, document.getElementById("selectMenu6-option2"));
-  assert_false(selectMenuOption1.selected);
-  selectMenuOption1.selected = true;
-  assert_equals(selectMenu.value, "one");
-  assert_equals(selectMenu.selectedOption, selectMenuOption1);
-
-  let newOption = document.createElement("option");
-  newOption.innerText = "four";
-  newOption.selected = true;
-  selectMenu.appendChild(newOption);
-  assert_equals(selectMenu.value, "four");
-  assert_equals(selectMenu.selectedOption, newOption);
-  assert_false(selectMenuOption1.selected);
-
-  selectMenu.value = "three";
-  assert_equals(selectMenu.selectedOption, document.getElementById("selectMenu6-option3"));
-  assert_false(newOption.selected);
-}, "Test that HTMLOption.selected updates selectmenu.value and selectmenu.selectedOption");
-
-test(() => {
-  const selectMenu = document.getElementById("selectMenu7");
-  let selectMenuOption1 = document.getElementById("selectMenu7-option1");
-
-  assert_equals(selectMenu.value, "test");
-  assert_equals(selectMenu.selectedOption, document.getElementById("selectMenu7-option2"));
-  assert_false(selectMenuOption1.selected);
-  selectMenuOption1.selected = true;
-  assert_equals(selectMenu.value, "one");
-  assert_equals(selectMenu.selectedOption, selectMenuOption1);
-
-  selectMenuOption1.value = "new test";
-  assert_equals(selectMenu.value, "new test");
-  assert_equals(selectMenu.selectedOption, selectMenuOption1);
-  selectMenuOption1.removeAttribute("value");
-  assert_equals(selectMenu.value, "one");
-  assert_equals(selectMenu.selectedOption, selectMenuOption1);
-  selectMenuOption1.value = "";
-  assert_equals(selectMenu.value, "");
-  assert_equals(selectMenu.selectedOption, selectMenuOption1);
-}, "Test that HTMLOption.value updates selectmenu.value");
-
-</script>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-writingmode-tb-ref.html b/html/semantics/forms/the-selectmenu-element/selectmenu-writingmode-tb-ref.html
deleted file mode 100644
index d2486ad9cc218e..00000000000000
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-writingmode-tb-ref.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<!DOCTYPE html>
-<selectmenu style="writing-mode: horizontal-tb">
-  <option>hello</option>
-</selectmenu>
