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

Add the :open pseudo-class #10126

Merged
merged 17 commits into from
Dec 10, 2024
Merged

Add the :open pseudo-class #10126

Changes from 15 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
842c489
Add the :open and :closed pseudo-selectors
josepharhar Feb 7, 2024
8b1e0da
use drop-down box
josepharhar Feb 9, 2024
77fe1ec
rewrite matching algorithm
josepharhar Feb 9, 2024
8ec3467
Merge branch 'main' into openclosedpseudo
josepharhar Oct 8, 2024
c23f7f9
make :closed match all elements
josepharhar Oct 8, 2024
d2cbea9
Merge remote-tracking branch 'origin/main' into openclosedpseudo
josepharhar Nov 26, 2024
3bedf6e
remove :closed
josepharhar Nov 26, 2024
a9fcf78
add shared picker dfn
josepharhar Nov 26, 2024
7114061
update another reference
josepharhar Nov 26, 2024
48bd453
resolve comments
josepharhar Dec 4, 2024
0404fa9
Merge branch 'main' into openclosedpseudo
josepharhar Dec 5, 2024
dd0c624
move paragraph below note
josepharhar Dec 5, 2024
f0488e8
Revert "move paragraph below note"
josepharhar Dec 5, 2024
da44f36
move note under new paragraph
josepharhar Dec 5, 2024
e17246b
nits
annevk Dec 6, 2024
a075bd8
address comments
josepharhar Dec 9, 2024
5eb02b1
More consistency tweaks
domenic Dec 10, 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
97 changes: 64 additions & 33 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48198,6 +48198,40 @@ interface <dfn interface>HTMLInputElement</dfn> : <span>HTMLElement</span> {
data-x="attr-input-type-checkbox">Checkbox</span> state) stop an <code>input</code> element from
being <i data-x="concept-fe-mutable">mutable</i>.</p>

<p>The <code>input</code> element can <dfn data-x="input-support-picker">support a picker</dfn>. A
picker is a popup that allows the end user to choose a value. Whether an <code>input</code>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
element supports a picker depends on the <code data-x="attr-input-type">type</code> attribute
state and <span>implementation-defined</span> behavior. An <code>input</code> element must support
a picker when its <code data-x="attr-input-type">type</code> attribute is in the <span
data-x="attr-input-type-file">File Upload</span> state.</p>

<div class="note">
<p>As of the time of this writing, typical browser implementations show such picker UI for:</p>

<ul>
<li><p><code>input</code> elements whose <code data-x="attr-input-type">type</code>
attributes are in the <span data-x="attr-input-type-date">Date</span>, <span
data-x="attr-input-type-month">Month</span>, <span data-x="attr-input-type-week">Week</span>,
<span data-x="attr-input-type-time">Time</span>, <span
data-x="attr-input-type-datetime-local">Local Date and Time</span>, and <span
data-x="attr-input-type-color">Color</span> states;</p></li>

<li><p><code>input</code> elements in various states that have a <span
data-x="concept-input-list">suggestions source element</span>;</p></li>

<li><p><code>input</code> elements whose <code data-x="attr-input-type">type</code> attribute
is in the <span data-x="attr-input-type-file">File Upload</span> state (although those are
handled via the special case above, instead of by this step); and</p></li>
domenic marked this conversation as resolved.
Show resolved Hide resolved

<li><p><code>select</code> elements.</p></li>
</ul>

<p>However, the intent of this step is to trigger <em>any</em> picker UI implementation. So
domenic marked this conversation as resolved.
Show resolved Hide resolved
for example, if a user agent implemented a password picker UI for the <span
data-x="attr-input-type-password">Password</span> state, then this method would be expected to
show that picker UI when called on a password input.</p>
</div>

<p>The <span data-x="concept-node-clone-ext">cloning steps</span> for <code>input</code> elements
must propagate the <span data-x="concept-fe-value">value</span>, <span
data-x="concept-fe-dirty">dirty value flag</span>, <span
Expand Down Expand Up @@ -52827,8 +52861,10 @@ You cannot submit this form when the field is incorrect.</samp></pre>
<dt><code data-x=""><var>input</var>.<span subdfn data-x="dom-input-showPicker">showPicker</span>()</code></dt>

<dd>
<p>Shows any applicable picker UI for <var>input</var>, so that the user can select a value. (If
no picker UI is implemented for the given control, then this method does nothing.)</p>
<p>If <var>input</var> does not <span data-x="input-support-picker">support a picker</span>,
this method does nothing.</p>

<p>Shows any applicable picker UI for <var>input</var>, so that the user can select a value.</p>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved

<p>Throws an <span>"<code>InvalidStateError</code>"</span> <code>DOMException</code> if
<var>input</var> is not <span data-x="concept-fe-mutable">mutable</span>.</p>
Expand Down Expand Up @@ -53159,6 +53195,9 @@ You cannot submit this form when the field is incorrect.</samp></pre>
<li><p><span>Consume user activation</span> given <span>element</span>'s <span>relevant global
object</span>.</p></li>

<li><p>If <var>element</var> does not <span data-x="input-support-picker">support a
picker</span>, then return.</p></li>

<li>
<p>If <var>element</var> is an <code>input</code> element and <var>element</var>'s <code
data-x="attr-input-type">type</code> attribute is in the <span
Expand Down Expand Up @@ -53199,11 +53238,10 @@ You cannot submit this form when the field is incorrect.</samp></pre>
</li>

<li>
<p>Otherwise, the user agent should show any relevant user interface for selecting a value for
<var>element</var>, in the way it normally would when the user interacts with the control. (If
no such UI applies to <var>element</var>, then this step does nothing.)</p>
<p>Otherwise, the user agent should show the relevant user interface for selecting a value for
<var>element</var>, in the way it normally would when the user interacts with the control.</p>

<p>If such a user interface is shown, it must respect the requirements stated in the relevant
<p>When showing such a user interface, it must respect the requirements stated in the relevant
parts of the specification for how <var>element</var> behaves given its <code
data-x="attr-input-type">type</code> attribute state. (For example, various sections describe
restrictions on the resulting <span data-x="concept-fe-value">value</span> string.)</p>
Expand All @@ -53213,33 +53251,6 @@ You cannot submit this form when the field is incorrect.</samp></pre>
firing either <code data-x="event-input">input</code> and <code
data-x="event-change">change</code> events, or a <code data-x="event-cancel">cancel</code>
event.)</p>

<div class="note">
<p>As of the time of this writing, typical browser implementations show such picker UI for:</p>

<ul>
<li><p><code>input</code> elements whose <code data-x="attr-input-type">type</code>
attributes are in the <span data-x="attr-input-type-date">Date</span>, <span
data-x="attr-input-type-month">Month</span>, <span data-x="attr-input-type-week">Week</span>,
<span data-x="attr-input-type-time">Time</span>, <span
data-x="attr-input-type-datetime-local">Local Date and Time</span>, and <span
data-x="attr-input-type-color">Color</span> states;</p></li>

<li><p><code>input</code> elements in various states that have a <span
data-x="concept-input-list">suggestions source element</span>;</p></li>

<li><p><code>input</code> elements whose <code data-x="attr-input-type">type</code> attribute
is in the <span data-x="attr-input-type-file">File Upload</span> state (although those are
handled via the special case above, instead of by this step); and</p></li>

<li><p><code>select</code> elements.</p></li>
</ul>

<p>However, the intent of this step is to trigger <em>any</em> picker UI implementation. So
for example, if a user agent implemented a password picker UI for the <span
data-x="attr-input-type-password">Password</span> state, then this method would be expected to
show that picker UI when called on a password input.</p>
</div>
</li>
</ol>

Expand Down Expand Up @@ -75069,6 +75080,26 @@ Demos:
<dd><p>The <code data-x="selector-volume-locked">:volume-locked</code> <span>pseudo-class</span>
must match all <span data-x="media element">media elements</span> when the user agent's
<span>volume locked</span> is true.</p></dd>

<dt><dfn selector><code data-x="selector-open">:open</code></dfn></dt>
<dd>
<p>An <code>Element</code> matches the <code data-x="selector-open">:open</code>
<span>pseudo-class</span> if it matches one of the following:</p>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved

<ol>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<li><p>A <code>details</code> element which has the <code
data-x="attr-details-open">open</code> attribute.</p></li>

<li><p>A <code>dialog</code> element which has the <code data-x="attr-dialog-open">open</code>
attribute.</p></li>

<li><p>A <code>select</code> element which is a <span>drop-down box</span> whose drop-down box
is open.</p></li>

<li><p>An <code>input</code> element which <span data-x="input-support-picker">supports a
picker</span> and whose picker is open.</p></li>
</ol>
</dd>
</dl>

<p class="note">This specification does not define when an element matches the <code undefined
Expand Down