1 files changed, 82 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/selectedoption.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/selectedoption.tentative.html
new file mode 100644
index 0000000000..16d711515c
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/selectedoption.tentative.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/whatwg/html/issues/9799">
+<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>
+  <select style="appearance:base-select">
+    <button>
+      <selectedoption></selectedoption>
+    </button>
+    <datalist>
+      <option class=one value=one>
+        <span class=one>span</span> one
+      </option>
+      <option class=two value=two>
+        <span class=two>span</span> two
+      </option>
+    </datalist>
+  </select>
+</form>
+
+<script>
+promise_test(async () => {
+  const optionOne = document.querySelector('option.one');
+  const optionTwo = document.querySelector('option.two');
+  const selectedOption = document.querySelector('selectedoption');
+  const select = document.querySelector('select');
+  const spanTwo = document.querySelector('span.two');
+  const form = document.querySelector('form');
+  const button = document.querySelector('button');
+
+  assert_equals(selectedOption.innerHTML, optionOne.innerHTML,
+    'The innerHTML of <selectedoption> should initially match the innerHTML of the selected <option>.');
+
+  select.value = 'two';
+  assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
+    'The innerHTML of <selectedoption> should change after the selected option is changed.');
+
+  spanTwo.textContent = 'new span';
+  assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
+    '<selectedoption> should respond to text content changes.');
+
+  spanTwo.appendChild(document.createElement('div'));
+  assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
+    '<selectedoption> should respond to new elements being added to descendants.');
+
+  spanTwo.setAttribute('data-foo', 'bar');
+  assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
+    '<selectedoption> should respond to attributes being added to descendants.');
+
+  form.reset();
+  assert_equals(select.value, 'one',
+    'form.reset() should change the selects value to one.');
+  assert_equals(selectedOption.innerHTML, optionOne.innerHTML,
+    'The innerHTML of <selectedoption> should be updated in response to a form reset.');
+
+  await test_driver.bless();
+  select.showPicker();
+  await test_driver.click(optionTwo);
+  assert_equals(select.value, 'two',
+    'Clicking on another option should change select.value.');
+  assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
+    'Clicking on an option element should update the <selectedoption>.');
+
+  selectedOption.remove();
+  assert_equals(selectedOption.innerHTML, '',
+    'Removing the <selectedoption> from the <select> should make it clear its contents.');
+  button.appendChild(selectedOption);
+  assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
+    'Re-inserting the <selectedoption> should make it update its contents.');
+
+  optionTwo.remove();
+  assert_equals(selectedOption.innerHTML, optionOne.innerHTML,
+    'The innerHTML of <selectedoption> should be updated in response to selected <option> removal.');
+  optionOne.remove();
+  assert_equals(selectedOption.innerHTML, '',
+    'The content of <selectedoption> should be cleared if there is no selected <option>.');
+}, 'The <selectedoption> element should reflect the HTML contents of the selected <option>.');
+</script>