Skip to content

Share select and options collection member algorithms #12675

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
annevk wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Share select and options collection member algorithms #12675

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
197 changes: 110 additions & 87 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3289,7 +3289,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://dom.spec.whatwg.org/#interface-htmlcollection"><code>HTMLCollection</code></dfn> interface, its
<dfn data-x="dom-HTMLCollection-length" data-x-href="https://dom.spec.whatwg.org/#dom-htmlcollection-length"><code>length</code></dfn> attribute, and its
<dfn data-x="dom-HTMLCollection-item" data-x-href="https://dom.spec.whatwg.org/#dom-htmlcollection-item"><code>item()</code></dfn> and
<dfn data-x="dom-HTMLCollection-namedItem" data-x-href="https://dom.spec.whatwg.org/#dom-htmlcollection-nameditem"><code>namedItem()</code></dfn> methods</li>
<dfn data-x="dom-HTMLCollection-namedItem" data-x-href="https://dom.spec.whatwg.org/#dom-htmlcollection-nameditem"><code>namedItem()</code></dfn> methods, and its
<dfn data-x="find a named element" data-x-href="https://dom.spec.whatwg.org/#find-a-named-element">find a named element</dfn> algorithm</li>
<li>The terms <dfn data-x="concept-collection" data-x-href="https://dom.spec.whatwg.org/#concept-collection">collection</dfn> and <dfn data-x-href="https://dom.spec.whatwg.org/#represented-by-the-collection">represented by the collection</dfn></li>

<li><dfn data-x-href="https://dom.spec.whatwg.org/#interface-domtokenlist"><code>DOMTokenList</code></dfn> interface, and its
Expand Down Expand Up @@ -9971,37 +9972,45 @@ interface <dfn interface>HTMLOptionsCollection</dfn> : <span>HTMLCollection</spa
</div>

<div algorithm>
<p>The <code data-x="dom-HTMLOptionsCollection-length">length</code> setter steps are:</p>
<p>To <dfn>set the number of options</dfn> of a <code>select</code> element <var>select</var> to a
value <var>value</var>:</p>

<ol>
<li><p>Let <var>current</var> be the number of nodes <span>represented by the
collection</span>.</p></li>
<li><p>Let <var>current</var> be the <span data-x="list size">size</span> of <var>select</var>'s
<span data-x="concept-select-option-list">list of options</span>.</p></li>

<li>
<p>If the given value is greater than <var>current</var>:</p>
<p>If <var>value</var> is greater than <var>current</var>:</p>

<ol>
<li><p>If the given value is greater than 100,000, then return.</p></li>
<li><p>If <var>value</var> is greater than 100,000, then return.</p></li>

<li><p>Let <var>n</var> be <var>value</var> &minus; <var>current</var>.</p></li>

<li><p><span>Append new option elements</span> to the <code>select</code> element on which
<span>this</span> is rooted given <var>n</var>.</p></li>
<li><p><span>Append new option elements</span> to <var>select</var> given
<var>n</var>.</p></li>
</ol>
</li>

<li>
<p>If the given value is less than <var>current</var>:</p>
<p>If <var>value</var> is less than <var>current</var>:</p>

<ol>
<li><p>Let <var>n</var> be <var>current</var> &minus; <var>value</var>.</p></li>

<li><p>Remove the last <var>n</var> nodes in the collection from their parent nodes.</p></li>
<li><p>Remove the last <var>n</var> nodes in <var>select</var>'s <span
data-x="concept-select-option-list">list of options</span> from their parent nodes.</p></li>
</ol>
</li>
</ol>
</div>

<div algorithm>
<p>The <code data-x="dom-HTMLOptionsCollection-length">length</code> setter steps are to
<span>set the number of options</span> of the <code>select</code> element on which
<span>this</span> is rooted to the given value.</p>
</div>

<p class="note">Setting <code data-x="dom-HTMLOptionsCollection-length">length</code> never removes
or adds any <code>optgroup</code> elements, and never adds new children to existing
<code>optgroup</code> elements (though it can remove children from them).</p>
Expand Down Expand Up @@ -10031,73 +10040,84 @@ interface <dfn interface>HTMLOptionsCollection</dfn> : <span>HTMLCollection</spa
</div>

<div algorithm>
<p id="dom-htmloptionscollection-setter">To <span>set the value of a new indexed property</span>
or <span>set the value of an existing indexed property</span> for an
<code>HTMLOptionsCollection</code> <var>collection</var>, given a property index <var>index</var>
and a new value <var>value</var>:</p>
<p>To <dfn>set the value of an option</dfn> in a <code>select</code> element <var>select</var>,
given a property index <var>index</var> and a new value <var>value</var>:</p>

<ol>
<li><p>If <var>value</var> is null, then <span data-x="HTMLOptionsCollection-remove-an-option">remove
an option</span> from <var>collection</var> given <var>index</var> and return.</p></li>
an option</span> from <var>select</var> given <var>index</var> and return.</p></li>

<li><p>Let <var>length</var> be the number of nodes <span data-x="represented by the
collection">represented</span> by <var>collection</var>.</p></li>
<li><p>Let <var>length</var> be the <span data-x="list size">size</span> of <var>select</var>'s
<span data-x="concept-select-option-list">list of options</span>.</p></li>

<li><p>Let <var>delta</var> be <var>index</var> &minus; <var>length</var>.</p></li>

<li><p>If <var>delta</var> is greater than 0, then <span>append new option elements</span> to
the <code>select</code> element on which <var>collection</var> is rooted given
<var>delta</var>.</p></li>
<var>select</var> given <var>delta</var>.</p></li>

<li><p>If <var>delta</var> is greater than or equal to 0, then <span
data-x="concept-node-append">append</span> <var>value</var> to the <code>select</code> element
on which <var>collection</var> is rooted. Otherwise, <span
data-x="concept-node-replace">replace</span> the <var>index</var>th element in
<var>collection</var> by <var>value</var>.</p></li>
data-x="concept-node-append">append</span> <var>value</var> to <var>select</var>. Otherwise,
<span data-x="concept-node-replace">replace</span> the <var>index</var>th element in
<var>select</var>'s <span data-x="concept-select-option-list">list of options</span> by
<var>value</var>.</p></li>
</ol>
</div>

<div algorithm>
<p>The <dfn method for="HTMLOptionsCollection"><code
data-x="dom-HTMLOptionsCollection-add">add(<var>element</var>, <var>before</var>)</code></dfn>
method steps are:</p>
<p id="dom-htmloptionscollection-setter">To <span>set the value of a new indexed property</span>
or <span>set the value of an existing indexed property</span> for an
<code>HTMLOptionsCollection</code> <var>collection</var>, given a property index <var>index</var>
and a new value <var>value</var>, <span>set the value of an option</span> in the <code>select</code>
element on which <var>collection</var> is rooted, given <var>index</var> and <var>value</var>.</p>
</div>

<div algorithm>
<p>To <dfn data-x="concept-add-to-select">add an element</dfn> <var>element</var> to a
<code>select</code> element <var>select</var> given a <var>before</var>:</p>

<ol>
<li><p>If <var>element</var> is an ancestor of the <code>select</code> element on which
<span>this</span> is rooted, then throw a <span>"<code>HierarchyRequestError</code>"</span>
<code>DOMException</code>.</p></li>
<li><p>If <var>element</var> is an ancestor of <var>select</var>, then throw a
<span>"<code>HierarchyRequestError</code>"</span> <code>DOMException</code>.</p></li>

<li><p>If <var>before</var> is an element, but that element isn't a descendant of the
<code>select</code> element on which <span>this</span> is rooted, then throw a
<span>"<code>NotFoundError</code>"</span> <code>DOMException</code>.</p></li>
<li><p>If <var>before</var> is an element, but that element isn't a descendant of
<var>select</var>, then throw a <span>"<code>NotFoundError</code>"</span>
<code>DOMException</code>.</p></li>

<li><p>If <var>element</var> and <var>before</var> are the same element, then return.</p></li>

<li><p>Let <var>reference</var> be null.</p></li>

<li><p>If <var>before</var> is a node, then set <var>reference</var> to <var>before</var>.
Otherwise, if <var>before</var> is an integer and there is a <var>before</var>th node in
<span>this</span>, then set <var>reference</var> to that node.</p></li>
Otherwise, if <var>before</var> is an integer and there is a <var>before</var>th element in
<var>select</var>'s <span data-x="concept-select-option-list">list of options</span>, then set
<var>reference</var> to that element.</p></li>

<li><p>Let <var>parent</var> be <var>reference</var>'s parent node if <var>reference</var> is
not null; otherwise the <code>select</code> element on which <span>this</span> is rooted.</p></li>
not null; otherwise <var>select</var>.</p></li>

<li><p><span>Pre-insert</span> <var>element</var> into <var>parent</var> node before
<var>reference</var>.</p></li>
</ol>
</div>

<div algorithm>
<p>To <dfn data-x="HTMLOptionsCollection-remove-an-option">remove an option</dfn> from an
<code>HTMLOptionsCollection</code> <var>collection</var> given an integer <var>index</var>:</p>
<p>The <dfn method for="HTMLOptionsCollection"><code
data-x="dom-HTMLOptionsCollection-add">add(<var>element</var>, <var>before</var>)</code></dfn>
method steps are to <span data-x="concept-add-to-select">add</span> <var>element</var> to the
<code>select</code> element on which <span>this</span> is rooted given <var>before</var>.</p>
</div>

<div algorithm>
<p>To <dfn data-x="HTMLOptionsCollection-remove-an-option">remove an option</dfn> from a
<code>select</code> element <var>select</var> given an integer <var>index</var>:</p>

<ol>
<li><p>If the number of nodes <span data-x="represented by the collection">represented</span> by
<var>collection</var> is 0, then return.</p></li>
<li><p>If the <span data-x="list size">size</span> of <var>select</var>'s <span
data-x="concept-select-option-list">list of options</span> is 0, then return.</p></li>

<li><p>If <var>index</var> is not a number greater than or equal to 0 and less than the number
of nodes <span data-x="represented by the collection">represented</span> by <var>collection</var>,
then return.</p></li>
<li><p>If <var>index</var> is not a number greater than or equal to 0 and less than the <span
data-x="list size">size</span> of <var>select</var>'s <span
data-x="concept-select-option-list">list of options</span>, then return.</p></li>
<!-- note that Web IDL converts 'a', NaN, -0.5, 0.5, most objects, and null to 0, and numbers in
general truncate. so what we're checking against here in a way has very little to do with what's
going on in the JS -->
Expand All @@ -10111,8 +10131,8 @@ interface <dfn interface>HTMLOptionsCollection</dfn> : <span>HTMLCollection</spa
https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=2827
-->

<li><p>Let <var>element</var> be the <var>index</var>th element in
<var>collection</var>.</p></li>
<li><p>Let <var>element</var> be the <var>index</var>th element in <var>select</var>'s <span
data-x="concept-select-option-list">list of options</span>.</p></li>

<li><p>Remove <var>element</var> from its parent node.</p></li>
</ol>
Expand All @@ -10121,8 +10141,8 @@ interface <dfn interface>HTMLOptionsCollection</dfn> : <span>HTMLCollection</spa
<div algorithm>
<p>The <dfn method for="HTMLOptionsCollection"><code
data-x="dom-HTMLOptionsCollection-remove">remove(<var>index</var>)</code></dfn> method steps are
to <span data-x="HTMLOptionsCollection-remove-an-option">remove an option</span> from
<span>this</span> given <var>index</var>.</p>
to <span data-x="HTMLOptionsCollection-remove-an-option">remove an option</span> from the
<code>select</code> element on which <span>this</span> is rooted given <var>index</var>.</p>
</div>

<div algorithm>
Expand Down Expand Up @@ -57668,79 +57688,82 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
<div w-nodev>

<div algorithm>
<p>The <dfn attribute for="HTMLSelectElement"><code data-x="dom-select-type">type</code></dfn> IDL
attribute, on getting, must return the string "<code data-x="">select-one</code>" if the <code
data-x="attr-select-multiple">multiple</code> attribute is absent, and the string "<code
data-x="">select-multiple</code>" if the <code data-x="attr-select-multiple">multiple</code>
attribute is present.</p>
<p>The <dfn attribute for="HTMLSelectElement"><code data-x="dom-select-type">type</code></dfn>
getter steps are to return "<code data-x="">select-one</code>" if <span>this</span>'s <code
data-x="attr-select-multiple">multiple</code> attribute is absent; otherwise "<code
data-x="">select-multiple</code>".</p>
</div>

<div algorithm>
<p>The <dfn attribute for="HTMLSelectElement"><code
data-x="dom-select-options">options</code></dfn> IDL attribute must return an
<code>HTMLOptionsCollection</code> rooted at the <code>select</code> node, whose filter matches
the elements in the <span data-x="concept-select-option-list">list of options</span>.</p>
data-x="dom-select-options">options</code></dfn> getter steps are to return an
<code>HTMLOptionsCollection</code> rooted at <span>this</span>, whose filter matches the elements
in the <span data-x="concept-select-option-list">list of options</span>.</p>
</div>

<div algorithm>
<p>A <code>select</code> element's <span>supported property indices</span> are the numbers in the
range 0 to one less than its <span data-x="concept-select-option-list">list of options</span>'s
<span data-x="list size">size</span>. If its <span data-x="concept-select-option-list">list of
options</span> <span data-x="list is empty">is empty</span>, then there are no <span>supported
property indices</span>.</p>
</div>

<div algorithm>
<p>The <code data-x="dom-select-options">options</code> collection is also mirrored on the
<code>HTMLSelectElement</code> object. The <span>supported property indices</span> at any instant
are the indices supported by the object returned by the <code
data-x="dom-select-options">options</code> attribute at that instant.</p>
<p>The <dfn attribute for="HTMLSelectElement"><code
data-x="dom-select-length">length</code></dfn> getter steps are to return the <span
data-x="list size">size</span> of <span>this</span>'s <span
data-x="concept-select-option-list">list of options</span>.</p>
</div>

<div algorithm>
<p>The <dfn attribute for="HTMLSelectElement"><code data-x="dom-select-length">length</code></dfn>
IDL attribute must return the number of nodes <span data-x="represented by the
collection">represented</span> by the <code data-x="dom-select-options">options</code> collection.
On setting, it must act like the attribute of the same name on the <code
data-x="dom-select-options">options</code> collection.</p>
<p>The <code data-x="dom-select-length">length</code> setter steps are to <span>set the number of
options</span> of <span>this</span> to the given value.</p>
</div>

<div algorithm>
<p>The <dfn method for="HTMLSelectElement"><code
data-x="dom-select-item">item(<var>index</var>)</code></dfn> method must return the value returned
by <span data-x="dom-HTMLCollection-item">the method of the same name</span> on the <code
data-x="dom-select-options">options</code> collection, when invoked with the same argument.</p>
data-x="dom-select-item">item(<var>index</var>)</code></dfn> method steps are to return the
<var>index</var>th element in <span>this</span>'s <span data-x="concept-select-option-list">list
of options</span>, or null if there is no such element.</p>
</div>

<div algorithm>
<p>The <dfn method for="HTMLSelectElement"><code
data-x="dom-select-namedItem">namedItem(<var>name</var>)</code></dfn> method must return the value
returned by <span data-x="dom-HTMLCollection-namedItem">the method of the same name</span> on the
<code data-x="dom-select-options">options</code> collection, when invoked with the same
argument.</p>
data-x="dom-select-namedItem">namedItem(<var>name</var>)</code></dfn> method steps are to <span
data-x="find a named element">find a named element</span> in <span>this</span>'s <span
data-x="concept-select-option-list">list of options</span> given <var>name</var>.</p>
</div>

<div algorithm>
<p id="dom-select-setter">When the user agent is to <span>set the value of a new indexed
property</span> or <span>set the value of an existing indexed property</span> for a
<code>select</code> element, it must instead run <a href="#dom-htmloptionscollection-setter">the
corresponding algorithm</a> on the <code>select</code> element's <code
data-x="dom-select-options">options</code> collection.</p>
<p id="dom-select-setter">To <span>set the value of a new indexed property</span> or <span>set the
value of an existing indexed property</span> for a <code>select</code> element <var>select</var>,
given a property index <var>index</var> and a new value <var>value</var>, <span>set the value of
an option</span> in <var>select</var> given <var>index</var> and <var>value</var>.</p>
</div>

<div algorithm>
<p>Similarly, the <dfn method for="HTMLSelectElement"><code
data-x="dom-select-add">add(<var>element</var>, <var>before</var>)</code></dfn> method must act
like its namesake method on that same <code data-x="dom-select-options">options</code>
collection.</p>
<p>The <dfn method for="HTMLSelectElement"><code
data-x="dom-select-add">add(<var>element</var>, <var>before</var>)</code></dfn> method steps are
to <span data-x="concept-add-to-select">add</span> <var>element</var> to <span>this</span> given
<var>before</var>.</p>
</div>

<div algorithm>
<p>The <dfn method for="HTMLSelectElement"><code data-x="dom-select-remove">remove()</code></dfn>
method must act like its namesake method on that same <code
data-x="dom-select-options">options</code> collection when it has arguments, and like its namesake
method on the <code>ChildNode</code> interface implemented by the <code>HTMLSelectElement</code>
ancestor interface <code>Element</code> when it has no arguments.</p>
method steps are to <span data-x="HTMLOptionsCollection-remove-an-option">remove an option</span>
from <span>this</span> given the argument when the method has arguments, and to act like the
identically named method on the <code>ChildNode</code> interface implemented by the
<code>HTMLSelectElement</code> ancestor interface <code>Element</code> when it has no
arguments.</p>
</div>

<div algorithm>
<p>The <dfn attribute for="HTMLSelectElement"><code
data-x="dom-select-selectedOptions">selectedOptions</code></dfn> IDL attribute must return an
<code>HTMLCollection</code> rooted at the <code>select</code> node, whose filter matches the
elements in the <span data-x="concept-select-option-list">list of options</span> that have their
<span data-x="concept-option-selectedness">selectedness</span> set to true.</p>
data-x="dom-select-selectedOptions">selectedOptions</code></dfn> getter steps are to return an
<code>HTMLCollection</code> rooted at <span>this</span>, whose filter matches the elements in the
<span data-x="concept-select-option-list">list of options</span> that have their <span
data-x="concept-option-selectedness">selectedness</span> set to true.</p>
</div>

<p>A <code>select</code> element's <dfn data-x="select-selected-index">selected index</dfn> is
Expand Down
Loading