Skip to content

Commit f828c61

Browse files
josepharharjosepharhar
committed
Define interaction for <select> base appearance
1 parent 1108ee9 commit f828c61

File tree

1 file changed

+136
-45
lines changed

1 file changed

+136
-45
lines changed

‎source‎

Lines changed: 136 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1846,9 +1846,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
18461846
</ol>
18471847
</li>
18481848

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

18531853
<li>
18541854
<p>For each <var>descendant</var> of <var>removedNode</var>'s <span data-x="inclusive
@@ -4185,6 +4185,12 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
41854185
<li><dfn data-x-href="https://drafts.csswg.org/css-contain/#content-visibility">'content-visibility'</dfn> property</li>
41864186
<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>
41874187
</ul>
4188+
4189+
<p>The following terms are defined in <cite>CSS Anchor Positioning</cite>: <ref>CSSANCHOR</ref></p>
4190+
4191+
<ul class="brief">
4192+
<li><dfn data-x-href="https://drafts.csswg.org/css-anchor-position-1/#implicit-anchor-element">implicit anchor element</dfn></li>
4193+
</ul>
41884194
</dd>
41894195

41904196

@@ -53263,6 +53269,18 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
5326353269

5326453270
</div>
5326553271

53272+
<p>To get the <dfn>button parent select</dfn> given a <code>button</code> <var>button</var>:</p>
53273+
53274+
<ol>
53275+
<li><p>If <var>button</var>'s <span>parent</span> is a <code>select</code>, then return
53276+
<var>button</var>'s <span>parent</span>.</p></li>
53277+
53278+
<li><p>If <var>button</var>'s <span>root</span> is a <span>shadow root</span> whose <span>shadow
53279+
host</span> is a <code>select</code>, then return that <code>select</code>.</p></li>
53280+
53281+
<li><p>Return null.</p></li>
53282+
</ol>
53283+
5326653284

5326753285

5326853286

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

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

5406654085
</div>
5406754086

54087+
<p>To get the <dfn>datalist parent select</dfn>, given a <code>datalist</code>
54088+
<var>datalist</var>:</p>
54089+
54090+
<ol>
54091+
<li><p>If <var>datalist</var>'s <span>parent</span> is a <code>select</code>, then return
54092+
<var>datalist</var>'s <span>parent</span>.</p></li>
54093+
54094+
<li><p>If <var>datalist</var>'s <span>root</span> is a <span>shadow root</span> whose
54095+
<span>shadow host</span> is a <code>select</code>, then return that <code>select</code>.</p></li>
54096+
54097+
<li><p>Return null.</p></li>
54098+
</ol>
54099+
54100+
<p>When a <code>datalist</code> <var>datalist</var> has a non-null <span>datalist parent
54101+
select</span> <var>select</var>, then <var>select</var> is the <span>implicit anchor
54102+
element</span> of <var>datalist</var>.</p>
54103+
5406854104

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

@@ -54346,6 +54382,35 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
5434654382
<var>removedOption</var>'s <span>option element mutation observer</span>.</p></li>
5434754383
</ol>
5434854384

54385+
<p>The <span>activation behavior</span> of an <code>option</code> <var>option</var> is to run the
54386+
following steps:</p>
54387+
54388+
<ol>
54389+
<li><p>Let <var>select</var> be the <span>option element ancestor select</span> given
54390+
<var>option</var>.</p></li>
54391+
54392+
<li><p>If <var>select</var> is null, then return.</p></li>
54393+
54394+
<li><p>Set <var>option</var>'s <span data-x="concept-option-selectedness">selectedness</span> to
54395+
true.</p></li>
54396+
54397+
<li><p>Set <var>option</var>'s <span data-x="concept-option-dirtiness">dirtiness</span> to
54398+
true.</p></li>
54399+
54400+
<li><p><span>Send <code>select</code> update notifications</span> given
54401+
<var>select</var>.</p></li>
54402+
54403+
<li>
54404+
<p>If <var>select</var> is being rendered as a <span>drop-down box</span> with <span>base
54405+
appearance</span>:</p>
54406+
54407+
<ol>
54408+
<li><p>Run the <span>hide popover algorithm</span> given the first item in <var>select</var>'s
54409+
<span>select datalist slot</span>'s <span>assigned nodes</span>.</p></li>
54410+
</ol>
54411+
</li>
54412+
</ol>
54413+
5434954414
<dl class="domintro">
5435054415
<dt><code data-x=""><var>option</var>.<span subdfn data-x="dom-option-selected">selected</span></code></dt>
5435154416

@@ -74406,10 +74471,10 @@ Demos:
7440674471
<dt><dfn selector noexport><code data-x="selector-popover-open">:popover-open</code></dfn></dt>
7440774472
<dd>
7440874473
<p>The <code data-x="selector-popover-open">:popover-open</code> <span>pseudo-class</span> is
74409-
defined to match any <span data-x="html elements">HTML element</span> whose <code
74410-
data-x="attr-popover">popover</code> attribute is not in the <span
74411-
data-x="attr-popover-none-state">no popover state</span> and whose <span>popover visibility
74412-
state</span> is <span data-x="popover-showing-state">showing</span>.</p>
74474+
defined to match any <span data-x="html elements">HTML element</span> whose <span>popover
74475+
state</span> is not in the <span data-x="attr-popover-none-state">no popover state</span> and
74476+
whose <span>popover visibility state</span> is <span
74477+
data-x="popover-showing-state">showing</span>.</p>
7441374478
</dd>
7441474479

7441574480
<dt><dfn selector noexport><code data-x="selector-enabled">:enabled</code></dfn></dt>
@@ -80673,9 +80738,9 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
8067380738
element.</p>
8067480739

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

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

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

8069480759
<li><p>Let <var>ancestor</var> be <var>element</var>.</p></li>
@@ -80702,8 +80767,8 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
8070280767
<li><p>If <var>ancestor</var> is a <code>dialog</code> element, then return
8070380768
<var>ancestor</var>.</p></li>
8070480769

80705-
<li><p>If <var>ancestor</var>'s <code data-x="attr-popover">popover</code> attribute is not in
80706-
the <span data-x="attr-popover-none-state">no popover state</span>, then return
80770+
<li><p>If <var>ancestor</var>'s <span>popover state</span> is not in the <span
80771+
data-x="attr-popover-none-state">no popover state</span>, then return
8070780772
<var>ancestor</var>.</p></li>
8070880773
</ol>
8070980774
</li>
@@ -85052,6 +85117,17 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
8505285117
<p>Every <span data-x="HTML elements">HTML element</span> has a <dfn>popover close watcher</dfn>,
8505385118
which is a <span>close watcher</span> or null, initially null.</p>
8505485119

85120+
<p>To get the <dfn>popover state</dfn> for an <span data-x="html elements">HTML element</span>
85121+
<var>element</var>:</p>
85122+
85123+
<ol>
85124+
<li><p>If <var>element</var> is a <code>datalist</code> with a non-null <span>datalist parent
85125+
select</span>, then return <span data-x="attr-popover-auto-state">auto</span>.</p></li>
85126+
85127+
<li><p>Return the value of <var>element</var>'s <code data-x="attr-popover">popover</code>
85128+
attribute.</p></li>
85129+
</ol>
85130+
8505585131
<p>The following <span data-x="concept-element-attributes-change-ext">attribute change
8505685132
steps</span>, given <var>element</var>, <var>localName</var>, <var>oldValue</var>,
8505785133
<var>value</var>, and <var>namespace</var>, are used for all <span>HTML elements</span>:</p>
@@ -85145,12 +85221,12 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
8514585221
<li><p>Let <var>shouldRestoreFocus</var> be false.</p></li>
8514685222

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

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

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

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

8516885244
<ol>
8516985245
<li><p>If <var>throwExceptions</var> is true, then throw a
@@ -85224,10 +85300,10 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
8522485300

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

85227-
<li><p>If <var>shouldRestoreFocus</var> is true and <var>element</var>'s <code
85228-
data-x="attr-popover">popover</code> attribute is not in the <span
85229-
data-x="attr-popover-none-state">no popover</span> state, then set <var>element</var>'s
85230-
<span>previously focused element</span> to <var>originallyFocusedElement</var>.</p></li>
85303+
<li><p>If <var>shouldRestoreFocus</var> is true and <var>element</var>'s <span>popover
85304+
state</span> is not in the <span data-x="attr-popover-none-state">no popover</span> state, then
85305+
set <var>element</var>'s <span>previously focused element</span> to
85306+
<var>originallyFocusedElement</var>.</p></li>
8523185307

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

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

8532685402
<ol>
@@ -85469,8 +85545,8 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
8546985545
<li><p>If <var>endpoint</var> is a <code>Document</code>, then run
8547085546
<var>closeAllOpenPopovers</var> and return.</p></li>
8547185547

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

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

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

85571-
<li><p><span>Assert</span>: <var>newPopoverOrTopLayerElement</var>'s <code
85572-
data-x="attr-popover">popover</code> attribute is not in the <span
85573-
data-x="attr-popover-none-state">no popover state</span> or the <span
85647+
<li><p><span>Assert</span>: <var>newPopoverOrTopLayerElement</var>'s <span>popover state</span>
85648+
is not in the <span data-x="attr-popover-none-state">no popover state</span> or the <span
8557485649
data-x="attr-popover-manual-state">manual</span> state.</p></li>
8557585650

8557685651
<li><p><span>Assert</span>: <var>newPopoverOrTopLayerElement</var>'s <span>popover visibility
@@ -85654,10 +85729,10 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
8565485729
<p>While <var>currentNode</var> is not null:</p>
8565585730

8565685731
<ol>
85657-
<li><p>If <var>currentNode</var>'s <code data-x="attr-popover">popover</code> attribute is in
85658-
the <span data-x="attr-popover-auto-state">auto</span> state and <var>currentNode</var>'s
85659-
<span>popover visibility state</span> is <span data-x="popover-showing-state">showing</span>,
85660-
then return <var>currentNode</var>.</p></li>
85732+
<li><p>If <var>currentNode</var>'s <span>popover state</span> is in the <span
85733+
data-x="attr-popover-auto-state">auto</span> state and <var>currentNode</var>'s <span>popover
85734+
visibility state</span> is <span data-x="popover-showing-state">showing</span>, then return
85735+
<var>currentNode</var>.</p></li>
8566185736

8566285737
<li><p>Set <var>currentNode</var> to <var>currentNode</var>'s parent in the <span>flat
8566385738
tree</span>.</p></li>
@@ -85717,8 +85792,8 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
8571785792

8571885793
<ol>
8571985794
<li>
85720-
<p>If <var>element</var>'s <code data-x="attr-popover">popover</code> attribute is in the
85721-
<span data-x="attr-popover-none-state">no popover</span> state, then:</p>
85795+
<p>If <var>element</var>'s <span>popover state</span> is in the <span
85796+
data-x="attr-popover-none-state">no popover</span> state, then:</p>
8572285797

8572385798
<ol>
8572485799
<li><p>If <var>throwExceptions</var> is true, then throw a
@@ -85777,11 +85852,10 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
8577785852
<li><p>Let <var>popovers</var> be « ».</p></li>
8577885853

8577985854
<li><p><span data-x="list iterate">For each</span> <code>Element</code> <var>element</var> in
85780-
<var>document</var>'s <span>top layer</span>: if <var>element</var>'s <code
85781-
data-x="attr-popover">popover</code> attribute is in the <span
85782-
data-x="attr-popover-auto-state">auto state</span> and <var>element</var>'s <span>popover
85783-
visibility state</span> is <span data-x="popover-showing-state">showing</span>, then <span
85784-
data-x="list append">append</span> <var>element</var> to <var>popovers</var>.</p></li>
85855+
<var>document</var>'s <span>top layer</span>: if <var>element</var>'s <span>popover state</span>
85856+
is in the <span data-x="attr-popover-auto-state">auto state</span> and <var>element</var>'s
85857+
<span>popover visibility state</span> is <span data-x="popover-showing-state">showing</span>,
85858+
then <span data-x="list append">append</span> <var>element</var> to <var>popovers</var>.</p></li>
8578585859

8578685860
<li><p>Return <var>popovers</var>.</p></li>
8578785861
</ol>
@@ -85927,6 +86001,21 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
8592786001
the attr-associated element">get the <code data-x="">popovertarget</code>-associated
8592886002
element</span>.</p></li>
8592986003

86004+
<li>
86005+
<p>If <var>popoverElement</var> is null and <var>node</var> is a <code>button</code> and
86006+
<var>node</var>'s <span>button parent select</span> is not null, then:</p>
86007+
86008+
<ol>
86009+
<li><p>Let <var>parentSelect</var> be <var>node</var>'s <span>button parent
86010+
select</span>.</p></li>
86011+
86012+
<li><p>If <var>parentSelect</var> is rendered as a <span>drop-down box</span> with <span>base
86013+
appearance</span>, then set <var>popoverElement</var> to the first item in
86014+
<var>parentSelect</var>'s <span>select button slot</span>'s <span>assigned
86015+
nodes</span>.</p></li>
86016+
</ol>
86017+
</li>
86018+
8593086019
<li><p>If <var>popoverElement</var> is null, then return null.</p></li>
8593186020

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

86037-
<li><p>If <var>targetPopover</var> is not null and <var>targetPopover</var>'s <code
86038-
data-x="attr-popover">popover</code> attribute is in the <span
86039-
data-x="attr-popover-auto-state">auto</span> state and <var>targetPopover</var>'s <span>popover
86040-
visibility state</span> is <span data-x="popover-showing-state">showing</span>, then return
86041-
<var>targetPopover</var>.</p></li>
86126+
<li><p>If <var>targetPopover</var> is not null and <var>targetPopover</var>'s <span>popover
86127+
state</span> is in the <span data-x="attr-popover-auto-state">auto</span> state and
86128+
<var>targetPopover</var>'s <span>popover visibility state</span> is <span
86129+
data-x="popover-showing-state">showing</span>, then return <var>targetPopover</var>.</p></li>
8604286130

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

143262+
<dt id="refsCSSANCHOR">[CSSANCHOR]</dt>
143263+
<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>
143264+
143174143265
<dt id="refsCSSANIMATIONS">[CSSANIMATIONS]</dt>
143175143266
<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>
143176143267

0 commit comments

Comments
 (0)