Skip to content

Commit

Permalink
Define interaction for <select> base appearance
Browse files Browse the repository at this point in the history
  • Loading branch information
@josepharhar
josepharhar committed Aug 7, 2024
1 parent 2f27b6e commit b4adf8d
Showing 1 changed file with 138 additions and 45 deletions.
183 changes: 138 additions & 45 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1846,9 +1846,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
</ol>
</li>

<li><p>If <var>removedNode</var>'s <code data-x="attr-popover">popover</code> attribute is not in
the <span data-x="attr-popover-none-state">no popover state</span>, then run the <span>hide
popover algorithm</span> given <var>removedNode</var>, false, false, and false.</p></li>
<li><p>If <var>removedNode</var>'s <span>popover state</span> is not in the <span
data-x="attr-popover-none-state">no popover state</span>, then run the <span>hide popover
algorithm</span> given <var>removedNode</var>, false, false, and false.</p></li>

<li>
<p>For each <var>descendant</var> of <var>removedNode</var>'s <span data-x="inclusive
Expand Down Expand Up @@ -4185,6 +4185,12 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://drafts.csswg.org/css-contain/#content-visibility">'content-visibility'</dfn> property</li>
<li><dfn data-x-href="https://drafts.csswg.org/css-contain/#propdef-content-visibility" data-x="content-visibility-auto">'auto'</dfn> value for <span>'content-visibility'</span></li>
</ul>

<p>The following terms are defined in <cite>CSS Anchor Positioning</cite>: <ref>CSSANCHOR</ref></p>

<ul class="brief">
<li><dfn data-x-href="https://drafts.csswg.org/css-anchor-position-1/#implicit-anchor-element">implicit anchor element</dfn></li>
</ul>
</dd>


Expand Down Expand Up @@ -53263,6 +53269,20 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {

</div>

<p>To get the <dfn>button parent select</dfn> given a <code>button</code> <var>button</var>:</p>

<ol>
<li><p>If <var>button</var>'s <span>parent</span> is a <code>select</code> and <var>button</var>
is the first <span data-x="concept-tree-child">child</span> of <var>button</var>'s
<span>parent</span>'s <span data-x="concept-tree-child">children</span>, then return
<var>button</var>'s <span>parent</span>.</p></li>

<li><p>If <var>button</var>'s <span>root</span> is a <span>shadow root</span> whose <span>shadow
host</span> is a <code>select</code>, then return that <code>select</code>.</p></li>

<li><p>Return null.</p></li>
</ol>




Expand Down Expand Up @@ -53557,6 +53577,7 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
options</span> <dfn data-x="ask for a reset">asks for a reset</dfn>, then run that
<code>select</code> element's <span>selectedness setting algorithm</span>.</p>

<!-- TODO should this be combined and rewritten with <option> element activation behavior? -->
<p>If the <code data-x="attr-select-multiple">multiple</code> attribute is present, and the
element is not <span data-x="concept-fe-disabled">disabled</span>, then the user agent should
allow the user to <dfn data-x="concept-select-toggle">toggle</dfn> the <span
Expand Down Expand Up @@ -54065,6 +54086,23 @@ interface <dfn interface>HTMLDataListElement</dfn> : <span>HTMLElement</span> {

</div>

<p>To get the <dfn>datalist parent select</dfn>, given a <code>datalist</code>
<var>datalist</var>:</p>

<ol>
<li><p>If <var>datalist</var>'s <span>parent</span> is a <code>select</code>, then return
<var>datalist</var>'s <span>parent</span>.</p></li>

<li><p>If <var>datalist</var>'s <span>root</span> is a <span>shadow root</span> whose
<span>shadow host</span> is a <code>select</code>, then return that <code>select</code>.</p></li>

<li><p>Return null.</p></li>
</ol>

<p>When a <code>datalist</code> <var>datalist</var> has a non-null <span>datalist parent
select</span> <var>select</var>, then <var>select</var> is the <span>implicit anchor
element</span> of <var>datalist</var>.</p>


<h4>The <dfn element><code>optgroup</code></dfn> element</h4>

Expand Down Expand Up @@ -54346,6 +54384,35 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
<var>removedOption</var>'s <span>option element mutation observer</span>.</p></li>
</ol>

<p>The <span>activation behavior</span> of an <code>option</code> <var>option</var> is to run the
following steps:</p>

<ol>
<li><p>Let <var>select</var> be the <span>option element ancestor select</span> given
<var>option</var>.</p></li>

<li><p>If <var>select</var> is null, then return.</p></li>

<li><p>Set <var>option</var>'s <span data-x="concept-option-selectedness">selectedness</span> to
true.</p></li>

<li><p>Set <var>option</var>'s <span data-x="concept-option-dirtiness">dirtiness</span> to
true.</p></li>

<li><p><span>Send <code>select</code> update notifications</span> given
<var>select</var>.</p></li>

<li>
<p>If <var>select</var> is being rendered as a <span>drop-down box</span> with <span>base
appearance</span>:</p>

<ol>
<li><p>Run the <span>hide popover algorithm</span> given the first item in <var>select</var>'s
<span>select datalist slot</span>'s <span>assigned nodes</span>.</p></li>
</ol>
</li>
</ol>

<dl class="domintro">
<dt><code data-x=""><var>option</var>.<span subdfn data-x="dom-option-selected">selected</span></code></dt>

Expand Down Expand Up @@ -74406,10 +74473,10 @@ Demos:
<dt><dfn selector noexport><code data-x="selector-popover-open">:popover-open</code></dfn></dt>
<dd>
<p>The <code data-x="selector-popover-open">:popover-open</code> <span>pseudo-class</span> is
defined to match any <span data-x="html elements">HTML element</span> whose <code
data-x="attr-popover">popover</code> attribute is not in the <span
data-x="attr-popover-none-state">no popover state</span> and whose <span>popover visibility
state</span> is <span data-x="popover-showing-state">showing</span>.</p>
defined to match any <span data-x="html elements">HTML element</span> whose <span>popover
state</span> is not in the <span data-x="attr-popover-none-state">no popover state</span> and
whose <span>popover visibility state</span> is <span
data-x="popover-showing-state">showing</span>.</p>
</dd>

<dt><dfn selector noexport><code data-x="selector-enabled">:enabled</code></dfn></dt>
Expand Down Expand Up @@ -80673,9 +80740,9 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
element.</p>

<p>When the <code data-x="attr-fe-autofocus">autofocus</code> attribute is specified on an element
inside <code>dialog</code> elements or <span>HTML elements</span> whose <code
data-x="attr-popover">popover</code> attribute is set, then it will be focused when the dialog or
popover becomes shown.</p>
inside <code>dialog</code> elements or <span>HTML elements</span> whose <span>popover state</span>
is not the <span data-x="attr-popover-none-state">no popover state</span>, then it will be focused
when the dialog or popover becomes shown.</p>

<p>The <code data-x="attr-fe-autofocus">autofocus</code> attribute is a <span>boolean
attribute</span>.</p>
Expand All @@ -80687,8 +80754,8 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
<li><p>If <var>element</var> is a <code>dialog</code> element, then return
<var>element</var>.</p></li>

<li><p>If <var>element</var>'s <code data-x="attr-popover">popover</code> attribute is not in the
<span data-x="attr-popover-none-state">no popover state</span>, then return
<li><p>If <var>element</var>'s <span>popover state</span> is not in the <span
data-x="attr-popover-none-state">no popover state</span>, then return
<var>element</var>.</p></li>

<li><p>Let <var>ancestor</var> be <var>element</var>.</p></li>
Expand All @@ -80702,8 +80769,8 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
<li><p>If <var>ancestor</var> is a <code>dialog</code> element, then return
<var>ancestor</var>.</p></li>

<li><p>If <var>ancestor</var>'s <code data-x="attr-popover">popover</code> attribute is not in
the <span data-x="attr-popover-none-state">no popover state</span>, then return
<li><p>If <var>ancestor</var>'s <span>popover state</span> is not in the <span
data-x="attr-popover-none-state">no popover state</span>, then return
<var>ancestor</var>.</p></li>
</ol>
</li>
Expand Down Expand Up @@ -85052,6 +85119,17 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
<p>Every <span data-x="HTML elements">HTML element</span> has a <dfn>popover close watcher</dfn>,
which is a <span>close watcher</span> or null, initially null.</p>

<p>To get the <dfn>popover state</dfn> for an <span data-x="html elements">HTML element</span>
<var>element</var>:</p>

<ol>
<li><p>If <var>element</var> is a <code>datalist</code> with a non-null <span>datalist parent
select</span>, then return <span data-x="attr-popover-auto-state">auto</span>.</p></li>

<li><p>Return the value of <var>element</var>'s <code data-x="attr-popover">popover</code>
attribute.</p></li>
</ol>

<p>The following <span data-x="concept-element-attributes-change-ext">attribute change
steps</span>, given <var>element</var>, <var>localName</var>, <var>oldValue</var>,
<var>value</var>, and <var>namespace</var>, are used for all <span>HTML elements</span>:</p>
Expand Down Expand Up @@ -85145,12 +85223,12 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
<li><p>Let <var>shouldRestoreFocus</var> be false.</p></li>

<li>
<p>If <var>element</var>'s <code data-x="attr-popover">popover</code> attribute is in the <span
<p>If <var>element</var>'s <span>popover state</span> is in the <span
data-x="attr-popover-auto-state">auto</span> state, then:</p>

<ol>
<li><p>Let <var>originalType</var> be the value of <var>element</var>'s <code
data-x="attr-popover">popover</code> attribute.</p></li>
<li><p>Let <var>originalType</var> be the <var>element</var>'s <span>popover
state</span>.</p></li>

<li><p>Let <var>ancestor</var> be the result of running the <span>topmost popover
ancestor</span> algorithm given <var>element</var>, <var>invoker</var>, and true.</p></li>
Expand All @@ -85162,8 +85240,8 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
<var>ancestor</var>, false, and not <var>nestedShow</var>.</p></li>

<li>
<p>If <var>originalType</var> is not equal to the value of <var>element</var>'s <code
data-x="attr-popover">popover</code> attribute, then:</p>
<p>If <var>originalType</var> is not equal to the value of <var>element</var>'s <span>popover
state</span>, then:</p>

<ol>
<li><p>If <var>throwExceptions</var> is true, then throw a
Expand Down Expand Up @@ -85224,10 +85302,10 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {

<li><p>Run the <span>popover focusing steps</span> given <var>element</var>.</p></li>

<li><p>If <var>shouldRestoreFocus</var> is true and <var>element</var>'s <code
data-x="attr-popover">popover</code> attribute is not in the <span
data-x="attr-popover-none-state">no popover</span> state, then set <var>element</var>'s
<span>previously focused element</span> to <var>originallyFocusedElement</var>.</p></li>
<li><p>If <var>shouldRestoreFocus</var> is true and <var>element</var>'s <span>popover
state</span> is not in the <span data-x="attr-popover-none-state">no popover</span> state, then
set <var>element</var>'s <span>previously focused element</span> to
<var>originallyFocusedElement</var>.</p></li>

<li><p><span>Queue a popover toggle event task</span> given <var>element</var>, "<code
data-x="">closed</code>", and "<code data-x="">open</code>".</p></li>
Expand Down Expand Up @@ -85320,7 +85398,7 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
</li>

<li>
<p>If <var>element</var>'s <code data-x="attr-popover">popover</code> attribute is in the <span
<p>If <var>element</var>'s <span>popover state</span> is in the <span
data-x="attr-popover-auto-state">auto</span> state, then:</p>

<ol>
Expand Down Expand Up @@ -85469,8 +85547,8 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
<li><p>If <var>endpoint</var> is a <code>Document</code>, then run
<var>closeAllOpenPopovers</var> and return.</p></li>

<li><p><span>Assert</span>: <var>endpoint</var>'s <code data-x="attr-popover">popover</code>
attribute is in the <span data-x="attr-popover-auto-state">auto</span> state.</p></li>
<li><p><span>Assert</span>: <var>endpoint</var>'s <span>popover state</span> is in the <span
data-x="attr-popover-auto-state">auto</span> state.</p></li>

<li><p>Let <var>repeatingHide</var> be false.</p></li>

Expand Down Expand Up @@ -85568,9 +85646,8 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
<li><p><span>Assert</span>: <var>newPopoverOrTopLayerElement</var> is an <span data-x="HTML
elements">HTML element</span>.</p></li>

<li><p><span>Assert</span>: <var>newPopoverOrTopLayerElement</var>'s <code
data-x="attr-popover">popover</code> attribute is not in the <span
data-x="attr-popover-none-state">no popover state</span> or the <span
<li><p><span>Assert</span>: <var>newPopoverOrTopLayerElement</var>'s <span>popover state</span>
is not in the <span data-x="attr-popover-none-state">no popover state</span> or the <span
data-x="attr-popover-manual-state">manual</span> state.</p></li>

<li><p><span>Assert</span>: <var>newPopoverOrTopLayerElement</var>'s <span>popover visibility
Expand Down Expand Up @@ -85654,10 +85731,10 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
<p>While <var>currentNode</var> is not null:</p>

<ol>
<li><p>If <var>currentNode</var>'s <code data-x="attr-popover">popover</code> attribute is in
the <span data-x="attr-popover-auto-state">auto</span> state and <var>currentNode</var>'s
<span>popover visibility state</span> is <span data-x="popover-showing-state">showing</span>,
then return <var>currentNode</var>.</p></li>
<li><p>If <var>currentNode</var>'s <span>popover state</span> is in the <span
data-x="attr-popover-auto-state">auto</span> state and <var>currentNode</var>'s <span>popover
visibility state</span> is <span data-x="popover-showing-state">showing</span>, then return
<var>currentNode</var>.</p></li>

<li><p>Set <var>currentNode</var> to <var>currentNode</var>'s parent in the <span>flat
tree</span>.</p></li>
Expand Down Expand Up @@ -85717,8 +85794,8 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {

<ol>
<li>
<p>If <var>element</var>'s <code data-x="attr-popover">popover</code> attribute is in the
<span data-x="attr-popover-none-state">no popover</span> state, then:</p>
<p>If <var>element</var>'s <span>popover state</span> is in the <span
data-x="attr-popover-none-state">no popover</span> state, then:</p>

<ol>
<li><p>If <var>throwExceptions</var> is true, then throw a
Expand Down Expand Up @@ -85777,11 +85854,10 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
<li><p>Let <var>popovers</var> be « ».</p></li>

<li><p><span data-x="list iterate">For each</span> <code>Element</code> <var>element</var> in
<var>document</var>'s <span>top layer</span>: if <var>element</var>'s <code
data-x="attr-popover">popover</code> attribute is in the <span
data-x="attr-popover-auto-state">auto state</span> and <var>element</var>'s <span>popover
visibility state</span> is <span data-x="popover-showing-state">showing</span>, then <span
data-x="list append">append</span> <var>element</var> to <var>popovers</var>.</p></li>
<var>document</var>'s <span>top layer</span>: if <var>element</var>'s <span>popover state</span>
is in the <span data-x="attr-popover-auto-state">auto state</span> and <var>element</var>'s
<span>popover visibility state</span> is <span data-x="popover-showing-state">showing</span>,
then <span data-x="list append">append</span> <var>element</var> to <var>popovers</var>.</p></li>

<li><p>Return <var>popovers</var>.</p></li>
</ol>
Expand Down Expand Up @@ -85927,6 +86003,21 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
the attr-associated element">get the <code data-x="">popovertarget</code>-associated
element</span>.</p></li>

<li>
<p>If <var>popoverElement</var> is null and <var>node</var> is a <code>button</code> and
<var>node</var>'s <span>button parent select</span> is not null, then:</p>

<ol>
<li><p>Let <var>parentSelect</var> be <var>node</var>'s <span>button parent
select</span>.</p></li>

<li><p>If <var>parentSelect</var> is rendered as a <span>drop-down box</span> with <span>base
appearance</span>, then set <var>popoverElement</var> to the first item in
<var>parentSelect</var>'s <span>select button slot</span>'s <span>assigned
nodes</span>.</p></li>
</ol>
</li>

<li><p>If <var>popoverElement</var> is null, then return null.</p></li>

<li><p>If <var>popoverElement</var>'s <code data-x="attr-popover">popover</code> attribute is in
Expand Down Expand Up @@ -86034,11 +86125,10 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
<li><p>Let <var>targetPopover</var> be <var>currentNode</var>'s <span>popover target
element</span>.</p></li>

<li><p>If <var>targetPopover</var> is not null and <var>targetPopover</var>'s <code
data-x="attr-popover">popover</code> attribute is in the <span
data-x="attr-popover-auto-state">auto</span> state and <var>targetPopover</var>'s <span>popover
visibility state</span> is <span data-x="popover-showing-state">showing</span>, then return
<var>targetPopover</var>.</p></li>
<li><p>If <var>targetPopover</var> is not null and <var>targetPopover</var>'s <span>popover
state</span> is in the <span data-x="attr-popover-auto-state">auto</span> state and
<var>targetPopover</var>'s <span>popover visibility state</span> is <span
data-x="popover-showing-state">showing</span>, then return <var>targetPopover</var>.</p></li>

<li><p>Set <var>currentNode</var> to <var>currentNode</var>'s ancestor in the <span>flat
tree</span>.</p></li>
Expand Down Expand Up @@ -143174,6 +143264,9 @@ INSERT INTERFACES HERE
<dt id="refsCSSALIGN">[CSSALIGN]</dt>
<dd><cite><a href="https://w3c.github.io/csswg-drafts/css-align/">CSS Box Alignment</a></cite>, E. Etemad, T. Atkins. W3C.</dd>

<dt id="refsCSSANCHOR">[CSSANCHOR]</dt>
<dd><cite><a href="https://drafts.csswg.org/css-anchor-position-1/">CSS Anchor Positioning</a></cite>, T. Atkins, E. Etemad, I. Kilpatrick. W3C.</dd>

<dt id="refsCSSANIMATIONS">[CSSANIMATIONS]</dt>
<dd><cite><a href="https://w3c.github.io/csswg-drafts/css-animations/">CSS Animations</a></cite>, D. Jackson, D. Hyatt, C. Marrin, S. Galineau, L. Baron. W3C.</dd>

Expand Down

0 comments on commit b4adf8d

Please sign in to comment.