Skip to content
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

Define base appearance for <select> #10629

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

Define base appearance for <select> #10629

Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
8e17138
Define base appearance for <select>
josepharhar Jul 18, 2024
f8cd659
rewrote a lot
josepharhar Nov 11, 2024
9c41826
Merge branch 'main' into selectrendering
josepharhar Nov 11, 2024
85b785f
prevent select button from being default submit button
josepharhar Nov 13, 2024
5e5dcb3
Merge branch 'main' into selectrendering
josepharhar Dec 5, 2024
8dc3b0e
reverse tree order
josepharhar Dec 5, 2024
46f457e
code around elements
josepharhar Dec 5, 2024
d9bc0b4
nits
josepharhar Dec 5, 2024
72c006b
add open the picker paragraph
josepharhar Dec 5, 2024
2400840
add arrow key events
josepharhar Dec 5, 2024
dcf650b
replace activation behavior for options
josepharhar Dec 6, 2024
9758b7b
Update focus another option
josepharhar Dec 13, 2024
3c8e35d
add pageup/pagedown
josepharhar Dec 26, 2024
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
192 changes: 191 additions & 1 deletion source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1794,6 +1794,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<span>stack of open elements</span> of an <span>HTML parser</span>, then
<span>process internal resource links</span> given <var>insertedNode</var>'s
<span>node document</span>.</p></li>

<li><p>Run <span>maybe clone option into select button</span> given
<var>insertedNode</var>.</p></li>
</ol>

<p>The <span data-x="concept-node-remove-ext">removing steps</span> for the HTML Standard, given
Expand Down Expand Up @@ -1838,6 +1841,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<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>Run <span>maybe clone option into select button</span> given
<var>oldParent</var>.</p></li>
</ol>

<p>A <dfn id="insert-an-element-into-a-document" data-x="node is inserted into a document"
Expand Down Expand Up @@ -3208,6 +3214,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-child" data-x="concept-tree-child">child</dfn> concept</li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-root">root</dfn> and <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-root">shadow-including root</dfn> concepts</li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-inclusive-ancestor">inclusive ancestor</dfn>,
<dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-ancestor">ancestor</dfn>,
<dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-descendant">descendant</dfn>,
<dfn data-x="concept-shadow-including-ancestor" data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-ancestor">shadow-including ancestor</dfn>,
<dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-descendant">shadow-including descendant</dfn>,
Expand Down Expand Up @@ -3953,6 +3960,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#widget">widget</dfn></li>
<li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#native-appearance">native appearance</dfn></li>
<li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#primitive-appearance">primitive appearance</dfn></li>
<li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#base-appearance">base appearance</dfn></li>
<li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#element-with-default-preferred-size">element with default preferred size</dfn></li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-ui/#non-devolvable">non-devolvable widget</dfn> and
<dfn data-x-href="https://drafts.csswg.org/css-ui/#devolvable">devolvable widget</dfn> classification, and the related
Expand Down Expand Up @@ -4153,6 +4161,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 @@ -53096,6 +53110,10 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
<li><p>If <var>element</var>'s <span>node document</span> is not <span>fully active</span>, then
return.</p></li>

<li><p>If <var>element</var>'s <span>parent</span> is a <code>select</code> element, then
<span>show the picker, if applicable</span> given <var>element</var>'s <span>parent</span> and
return.</p></li>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved

<li>
<p>If <var>element</var> has a <span>form owner</span> then switch on <var>element</var>'s <code
data-x="attr-button-type">type</code> attribute's state, then:</p>
Expand Down Expand Up @@ -54156,6 +54174,89 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {

</div>

<p>To get the <dfn>option element ancestor select</dfn> given an <code>option</code>
<var>option</var>:</p>

<ol>
<li>
<p>For each <var>ancestor</var> of <var>option</var>'s <span
data-x="ancestor">ancestors</span>:</p>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved

<ol>
<li><p>If <var>ancestor</var> is a <code>select</code>, then return
<var>ancestor</var>.</p></li>
</ol>
</li>

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

<p>To <dfn>maybe clone option into select button</dfn>, given an <code>Element</code>
<var>element</var>:</p>

<ol>
<li>
<p>For each <var>ancestor</var> of <var>element</var>'s <span
data-x="ancestor">ancestors</span>:</p>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved

<ol>
<li>
<p>If all of the following conditions are true:</p>

<ul>
<li><p><var>ancestor</var> is an <code>option</code> element;</p></li>

<li><p><var>ancestor</var> has a non-null <span>option element ancestor
select</span>;</p></li>

<li><p><var>ancestor</var>'s <span>option element ancestor select</span> is rendered as a
<span>drop-down box</span>;</p></li>

<li><p><var>ancestor</var>'s <span data-x="concept-option-selectedness">selectedness</span>
is true,</p></li>
</ul>

<p>then set <var>ancestor</var>'s <span>option element ancestor select</span>'s <span>select
fallback button text</span> to the value of <var>ancestor</var>'s <span
data-x="dom-option-label">label</span>.</p>
</li>
</ol>
</li>
</ol>

<p>Whenever an <code>option</code> <var>option</var>'s <span
data-x="concept-option-selectedness">selectedness</span> is set to true, run <span>maybe clone
option into select button</span> given <var>option</var>.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems weird. Normally changing members doesn't have weird side effects like this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I moved this to the send select update notifications algorithm


<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 popover 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 @@ -135678,12 +135779,98 @@ progress { appearance: auto; }</code></pre>
with the element's <code>optgroup</code> element <span data-x="concept-tree-child">children</span>
providing headers for groups of options where applicable.</p>

<!-- TODO should parts of this be in form-elements instead of rendering? -->

<p><code>select</code> elements which render as a <span>drop-down box</span> support a <span>base
appearance</span> in addition to <span>native appearance</span> and <span>primitive
appearance</span>.</p>

<p>When a <code>select</code> is being rendered as a <span>drop-down box</span> with a <span>base
appearance</span>, it is expected to render as if it has the following <span>shadow
root</span>:</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can't define a shadow root in terms of an HTML syntax fragment.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I rewrote it without using HTML. How does it look?


<pre><code class="html" data-x="">&lt;slot id="select-button-slot">
&lt;div id="select-fallback-button-text">&lt;/div>
&lt;/slot>
&lt;div id="select-popover" popover="auto">
&lt;slot id="select-popover-slot">&lt;/slot>
&lt;/div></code></pre>

<p class="note">Since <span>base appearance</span> is determined by computing style, it isn't
possible to swap this DOM structure when switching appearance. Implementations can always include
the DOM structure for <span>base appearance</span> when the <code>select</code> is rendered as a
<span>drop-down box</span> and then choose to include or exclude it from the layout tree in order
to control whether it gets rendered or not.</p>

<p><code>select</code> elements rendered as a <span>drop-down box</span> with <span>base
appearance</span> each contain the following elements as shown with ID attributes in the above
HTML:</p>

<!-- TODO is it OK for me to use <ul>, <li>, and <p> like this even though it isn't an
algorithm? -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the problem is really with how you define the shadow root. If you do that differently this will be different too. But you can use lists outside of algorithms for sure.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I rewrote this and used it to replace the HTML. How does it look?

<ul>
<li><p>A <dfn>select button slot</dfn>, which is a <code>slot</code>.</p></li>

<li><p><dfn>Select fallback button text</dfn>, which is a <code>div</code>.</p></li>

<li><p>A <dfn>select popover</dfn>, which is a <code>div</code>.</p></li>

<li><p>A <dfn>select popover slot</dfn>, which is a <code>slot</code>.</p></li>
</ul>

<p>The <span>implicit anchor element</span> of the <span>select popover</span> element is the
<code>select</code> element shadow host of the shadow host in which <span>select popover</span>
resides.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't parse this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah that was not worded well. I rewrote it, how does it look now?


<p>The <span>shadow root</span> used for <code>select</code>'s <span>drop-down box</span>
<span>base appearance</span> must have its <span>slot assignment</span> set to "<code
data-x="">manual</code>". The <span>shadow root</span> must also have <span>delegates focus</span>
set to true if <span>select button slot</span> has an assigned node.</p>

<p class="note">Without <span>delegates focus</span> set to true, the <code>select</code> itself
would receive focus instead of the <code>button</code> which is slotted into the <span>select
button slot</span>.</p>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved

<p><code>select</code> elements rendered as a <span>drop-down box</span> with <span>base
appearance</span> must render as if they are using <span>manual slot assignment</span> with the
following <dfn>base select slotting algorithm</dfn> to <span data-x="assign a slot">assign</span>
their child nodes to slots. To perform the <span>base select slotting algorithm</span>, given a
<code>select</code> element <var>select</var>:</p>

<ol>
<li><p>Let <var>firstButton</var> be null.</p></li>

<li><p>Let <var>otherChildren</var> be « ».</p></li>

<li>
<p><span data-x="list iterate">For each</span> <code>Node</code> <var>child</var> in
<var>select</var>'s <span data-x="concept-tree-child">children</span>:</p>

<ol>
<li><p>If <var>child</var> is a <code>button</code> and <var>firstButton</var> is null, then set
<var>firstButton</var> to <var>child</var>.</p></li>

<li><p>Otherwise, <span data-x="list append">append</span> <var>child</var> to
<var>otherChildren</var>.</p></li>
</ol>
</li>

<li><p>Set <var>select</var>'s <span>select button slot</span>'s <span>manually assigned
nodes</span> to <var>firstButton</var>.</p></li>

<li><p>Set <var>select</var>'s <span>select popover slot</span>'s <span>manually assigned
nodes</span> to <var>otherChildren</var>.</p></li>
</ol>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why can't we describe this more similarly to the details element?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I replaced this algorithm with some prose at the definition of the slot elements to look more like the details element.


<p>An <code>optgroup</code> element is expected to be rendered by displaying the element's <code
data-x="attr-optgroup-label">label</code> attribute.</p>

<p>An <code>option</code> element is expected to be rendered by displaying the element's <span
data-x="concept-option-label">label</span>, indented under its <code>optgroup</code> element if it
has one.</p>
has one. If the <code>option</code> is being rendered in a <code>select</code> which is being
rendered as a <span>drop-down box</span> with <span>base appearance</span>, then the
<code>option</code> is expected to render all of its children rather than by displaying its <span
data-x="concept-option-label">label</span>.</p>

<p>Each sequence of one or more child <code>hr</code> element siblings may be rendered as a single
separator.</p>
Expand Down Expand Up @@ -143126,6 +143313,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