Rename <selectedoption> to <selectedcontent>

This rename was decided here:
openui/open-ui#1112

Change-Id: I5ed2a5b7dca3d6c62ad73c609eed898dca44cefd

html/semantics/forms/the-select-element/customizable-select/nested-select-crash.html

@@ -11,14 +11,14 @@
 <select>
   <button>
     Hello??
-    <selectedoption />
+    <selectedcontent />
   </button>
   <option>
     <object type="no/type">
       <select>
         <button>
           Hello??
-          <selectedoption />
+          <selectedcontent />
         </button>
         <option>One</option>
         <option>Two</option>

html/semantics/forms/the-select-element/customizable-select/resources/selectedoption-restore-iframe.html → html/semantics/forms/the-select-element/customizable-select/resources/selectedcontent-restore-iframe.html

@@ -7,7 +7,7 @@
 <form action="blank.html">
   <select>
     <button>
-      <selectedoption></selectedoption>
+      <selectedcontent></selectedcontent>
     </button>
     <option value=one>one<span>span</span></option>
     <option value=two>two<span>span</span></option>

html/semantics/forms/the-select-element/customizable-select/selectedoption-in-option-crash.html → html/semantics/forms/the-select-element/customizable-select/selectedcontent-in-option-crash.html

@@ -10,10 +10,10 @@
 
 <select>
   <button>
-    <selectedoption></selectedoption>
+    <selectedcontent></selectedcontent>
   </button>
   <option>one
-    <selectedoption></selectedoption>
+    <selectedcontent></selectedcontent>
   </option>
   <option>two</option>
 </select>

html/semantics/forms/the-select-element/customizable-select/selectedoption-restore.tentative.html → html/semantics/forms/the-select-element/customizable-select/selectedcontent-restore.tentative.html

@@ -6,7 +6,7 @@
 <script src="/resources/testdriver.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
 
-<iframe src="resources/selectedoption-restore-iframe.html"></iframe>
+<iframe src="resources/selectedcontent-restore-iframe.html"></iframe>
 
 <script>
 const iframe = document.querySelector('iframe');
@@ -28,8 +28,8 @@
 
   assert_equals(iframe.contentDocument.querySelector('select').value, 'two',
     'The selects value should be restored after navigating back.');
-  assert_equals(iframe.contentDocument.querySelector('selectedoption').innerHTML,
+  assert_equals(iframe.contentDocument.querySelector('selectedcontent').innerHTML,
     iframe.contentDocument.querySelector('option[value=two]').innerHTML,
-    'selectedoption.innerHTML should match the selected <option>');
-}, '<selectedoption> should be up to date after form restoration.');
+    'selectedcontent.innerHTML should match the selected <option>');
+}, '<selectedcontent> should be up to date after form restoration.');
 </script>

html/semantics/forms/the-select-element/customizable-select/selectedoption.tentative.html → html/semantics/forms/the-select-element/customizable-select/selectedcontent.tentative.html

@@ -15,7 +15,7 @@
 <form>
   <select>
     <button>
-      <selectedoption></selectedoption>
+      <selectedcontent></selectedcontent>
     </button>
     <option class=one value=one>
       <span class=one>span</span> one
@@ -30,68 +30,68 @@
 promise_test(async () => {
   const optionOne = document.querySelector('option.one');
   const optionTwo = document.querySelector('option.two');
-  const selectedOption = document.querySelector('selectedoption');
+  const selectedcontent = document.querySelector('selectedcontent');
   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>.');
+  assert_equals(selectedcontent.innerHTML, optionOne.innerHTML,
+    'The innerHTML of <selectedcontent> should initially match the innerHTML of the selected <option>.');
 
   select.value = 'two';
   await new Promise(queueMicrotask);
-  assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
-    'The innerHTML of <selectedoption> should change after the selected option is changed.');
+  assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML,
+    'The innerHTML of <selectedcontent> should change after the selected option is changed.');
 
   let oldInnerHTML = optionTwo.innerHTML;
   spanTwo.textContent = 'new span';
   await new Promise(queueMicrotask);
-  assert_equals(selectedOption.innerHTML, oldInnerHTML,
-    '<selectedoption> should not respond to <option> text content changes.');
+  assert_equals(selectedcontent.innerHTML, oldInnerHTML,
+    '<selectedcontent> should not respond to <option> text content changes.');
 
   spanTwo.appendChild(document.createElement('div'));
   await new Promise(queueMicrotask);
-  assert_equals(selectedOption.innerHTML, oldInnerHTML,
-    '<selectedoption> should not respond to new elements being added to descendants of <option>.');
+  assert_equals(selectedcontent.innerHTML, oldInnerHTML,
+    '<selectedcontent> should not respond to new elements being added to descendants of <option>.');
 
   spanTwo.setAttribute('data-foo', 'bar');
   await new Promise(queueMicrotask);
-  assert_equals(selectedOption.innerHTML, oldInnerHTML,
-    '<selectedoption> should not respond to attributes being added to descendants of <option>.');
+  assert_equals(selectedcontent.innerHTML, oldInnerHTML,
+    '<selectedcontent> should not respond to attributes being added to descendants of <option>.');
 
   form.reset();
   await new Promise(queueMicrotask);
   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.');
+  assert_equals(selectedcontent.innerHTML, optionOne.innerHTML,
+    'The innerHTML of <selectedcontent> should be updated in response to a form reset.');
 
   await test_driver.bless();
   select.showPicker();
   await test_driver.click(optionTwo);
   await new Promise(queueMicrotask);
   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>.');
+  assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML,
+    'Clicking on an option element should update the <selectedcontent>.');
 
-  selectedOption.remove();
+  selectedcontent.remove();
   await new Promise(queueMicrotask);
-  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.');
+  assert_equals(selectedcontent.innerHTML, '',
+    'Removing the <selectedcontent> from the <select> should make it clear its contents.');
+  button.appendChild(selectedcontent);
+  assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML,
+    'Re-inserting the <selectedcontent> should make it update its contents.');
 
   optionTwo.remove();
   await new Promise(queueMicrotask);
-  assert_equals(selectedOption.innerHTML, optionOne.innerHTML,
-    'The innerHTML of <selectedoption> should be updated in response to selected <option> removal.');
+  assert_equals(selectedcontent.innerHTML, optionOne.innerHTML,
+    'The innerHTML of <selectedcontent> 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>.');
+  assert_equals(selectedcontent.innerHTML, '',
+    'The content of <selectedcontent> should be cleared if there is no selected <option>.');
 
   // TODO(crbug.com/336844298): Add tests for mutation records during parsing
-}, 'The <selectedoption> element should reflect the HTML contents of the selected <option>.');
+}, 'The <selectedcontent> element should reflect the HTML contents of the selected <option>.');
 </script>

html/semantics/forms/the-select-element/customizable-select/selectedcontentelement-attr.tentative.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:[email protected]">
+<link rel=help href="https://github.com/openui/open-ui/issues/1063">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<select style="appearance:base-select">
+  <option class=one value=one>one<span>span</span></option>
+  <option class=two value=two>two<span>span</span></option>
+</select>
+<selectedcontent id=myselectedcontent></selectedcontent>
+
+<script>
+promise_test(async () => {
+  const select = document.querySelector('select');
+  const selectedcontent = document.querySelector('selectedcontent');
+  const optionOne = document.querySelector('option.one');
+  const optionTwo = document.querySelector('option.two');
+
+  select.setAttribute('selectedcontentelement', 'myselectedcontent');
+  assert_equals(selectedcontent.innerHTML, optionOne.innerHTML,
+    'Setting the selectedcontentelement attribute via setAttribute should synchronously assign the contents of <selectedcontent>.');
+
+  select.removeAttribute('selectedcontentelement');
+  assert_equals(selectedcontent.innerHTML, '',
+    'Removing the selectedcontentelement attribute via removeAttribute should synchronously clear the contents of the <selectedcontent>.');
+
+  select.selectedContentElement = selectedcontent;
+  assert_equals(selectedcontent.innerHTML, optionOne.innerHTML,
+    'Setting the selectedcontentelement attribute via IDL should synchronously assign the contents of <selectedcontent>.');
+
+  select.selectedContentElement = null;
+  assert_equals(selectedcontent.innerHTML, '',
+    'Removing the selectedcontentelement attribute via IDL should synchronously clear the contents of the <selectedcontent>.');
+
+  select.selectedContentElement = selectedcontent;
+  assert_equals(selectedcontent.innerHTML, optionOne.innerHTML,
+    'Re-setting the selectedcontentelement attribute via IDL should synchronously assign the contents of <selectedcontent>.');
+
+  let oldInnerHTML = optionOne.innerHTML;
+  optionOne.querySelector('span').remove();
+  await new Promise(queueMicrotask);
+  assert_equals(selectedcontent.innerHTML, oldInnerHTML,
+    'Mutating the selected <option> should not update the <selectedcontent> contents.');
+
+  select.value = 'two';
+  assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML,
+    'Changing which <option> is selected should synchronously update the <selectedcontent> contents.');
+}, 'The selectedcontentelement attribute should set up an association between a select and a selectedcontent.');
+</script>

html/semantics/forms/the-select-element/customizable-select/switch-picker-appearance.tentative.html

@@ -123,7 +123,7 @@
 
 <button id=reset>Reset</button>
 <select id=test2>
-  <button><selectedoption></selectedoption></button>
+  <button><selectedcontent></selectedcontent></button>
   <option>option one</option>
   <option>option two</option>
   <option>option three</option>