Improve option insertion and removal algorithms

This PR improves the option element insertion and removal steps to incorporate invalid nestings of option elements inside select elements by reusing the nearest ancestor select algorithm. It also adds datalist to the list of disallowed elements for nesting options in.

Fixes #11787.

Author: josepharhar

source

@@ -56210,6 +56210,8 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
 
        <li><p><var>node</var> is an <code>option</code> element;</p></li>
 
+       <li><p><var>node</var> is a <code>datalist</code> element;</p></li>
+
        <li><p><var>node</var> is an <code>optgroup</code> element and <var>node</var> has an
        <span>ancestor</span> <code>optgroup</code> in between itself and <var>select</var>,</p></li>
       </ul>
@@ -57001,8 +57003,8 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
     in reverse <span>tree order</span>:</p>
 
     <ol>
-     <li><p>If <var>ancestor</var> is a <code>select</code>, <code>hr</code>, or <code>option</code>
-     element, then return false.</p></li>
+     <li><p>If <var>ancestor</var> is a <code>select</code>, <code>hr</code>, <code>datalist</code>,
+     or <code>option</code> element, then return false.</p></li>
 
      <li><p>If <var>ancestor</var> is an <code>optgroup</code> element, then return true if
      <var>ancestor</var>'s <code data-x="attr-optgroup-disabled">disabled</code> attribute is
@@ -57098,50 +57100,54 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <p>Each <code>option</code> element has a <dfn>cached nearest ancestor <code>select</code>
+  element</dfn>, which is a <code>select</code> element or null, initially set to null.</p>
+
   <div algorithm>
-  <p>The <code>option</code> <span>HTML element insertion steps</span>, given
-  <var>insertedOption</var>, are:</p>
+  <p>To <dfn>update an <code>option</code>'s nearest ancestor <code>select</code></dfn>, given an
+  <code>option</code> <var>option</var>:</p>
 
   <ol>
+   <li><p>Let <var>oldSelect</var> be <var>option</var>'s <span>cached nearest ancestor
+   <code>select</code> element</span>.</p></li>
+
+   <li><p>Let <var>newSelect</var> be <var>option</var>'s <span><code>option</code> element
+   nearest ancestor <code>select</code></span>.</p></li>
+
    <li>
-    <p>For each <var>ancestor</var> of <var>insertedOption</var>'s <span
-    data-x="ancestor">ancestors</span> in reverse <span>tree order</span>:</p>
+    <p>If <var>oldSelect</var> is not <var>newSelect</var>:</p>
 
     <ol>
-     <li><p>If <var>ancestor</var> is a <code>select</code> element, then run the <span>selectedness
-     setting algorithm</span> given <var>ancestor</var> and return.</p></li>
+     <li><p>If <var>oldSelect</var> is not null, then run the <span>selectedness setting
+     algorithm</span> given <var>oldSelect</var>.</p></li>
+
+     <li><p>If <var>newSelect</var> is not null, then run the <span>selectedness setting
+     algorithm</span> given <var>newSelect</var>.</p></li>
     </ol>
    </li>
+
+   <li><p>Set <var>option</var>'s <span>cached nearest ancestor <code>select</code>
+   element</span> to <var>newSelect</var>.<p></li>
   </ol>
   </div>
 
   <div algorithm>
-  <p>The <code>option</code> <span>HTML element removing steps</span>, given
-  <var>removedOption</var> and <var>oldParent</var>, are:</p>
-
-  <ol>
-   <li>
-    <p>For each <var>ancestor</var> of <var>oldParent</var>'s <span data-x="inclusive
-    ancestor">inclusive ancestors</span> in reverse <span>tree order</span>:</p>
+  <p>The <code>option</code> <span>HTML element insertion steps</span>, given
+  <var>insertedOption</var>, are to run <span>update an <code>option</code>'s nearest ancestor
+  <code>select</code></span> given <var>insertedOption</var>.</p>
+  </div>
 
-    <ol>
-     <li><p>If <var>ancestor</var> is a <code>select</code> element, then run the <span>selectedness
-     setting algorithm</span> given <var>ancestor</var> and return.</p></li>
-    </ol>
-  </ol>
+  <div algorithm>
+  <p>The <code>option</code> <span>HTML element removing steps</span>, given
+  <var>removedOption</var> and <var>oldParent</var>, are to run <span>update an
+  <code>option</code>'s nearest ancestor <code>select</code></span> given
+  <var>removedOption</var>.</p>
   </div>
 
   <div algorithm>
   <p>The <code>option</code> <span>HTML element moving steps</span>, given <var>movedNode</var> and
-  <var>oldParent</var>, are:</p>
-
-  <ol>
-   <li><p>Run the <code>option</code> <span>HTML element removing steps</span> given
-   <var>movedNode</var> and <var>oldParent</var>.</p></li>
-
-   <li><p>Run the <code>option</code> <span>HTML element insertion steps</span> given
-   <var>movedNode</var>.</p></li>
-  </ol>
+  <var>oldParent</var>, are to run <span>update an <code>option</code>'s nearest ancestor
+  <code>select</code></span> given <var>movedNode</var>.</p>
   </div>
 
   <div algorithm>