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.

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
Prev Previous commit
Next Next commit
rewrite matching algorithm
josepharhar committed Feb 9, 2024
commit 77fe1ecc9009d334953803531731ba314c88a390
49 changes: 18 additions & 31 deletions source
Original file line number Diff line number Diff line change
@@ -74235,51 +74235,38 @@ Demos:

<dt><dfn selector><code data-x="selector-open">:open</code></dfn></dt>
<dd>
<p>The <code data-x="selector-open">:open</code> <span>pseudo-class</span> must match any
element that <span>matches the open selector</span>.<p>

<p>To determine if an <code>Element</code> <var>element</var> <dfn>matches the open
selector</dfn>:</p>
<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>
<li>
<p>If <var>element</var> is a <code>details</code> or <code>dialog</code> element:</p>
<li><p>A <code>details</code> element which has the <code
data-x="attr-details-open">open</code> attribute.</p></li>

<ol>
<li><p>Return true if <var>element</var> has the <code data-x="attr-dialog-open">open</code>
attribute, otherwise false.</p></li>
</ol>
</li>

<li><p>If <var>element</var> is a <code>select</code> element and <var>element</var> is a
<span>drop-down box</span> and the drop-down is open, then return true.</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>Return false.</p></li>
<li><p>A <code>select</code> element which is a <span>drop-down box</span> whose drop-down box
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
is open.</p></li>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
</ol>
</dd>

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

<p>To determine if an <code>Element</code> <var>element</var> <dfn>matches the closed
selector</dfn>:</p>
<p>An <code>Element</code> <var>element</var> <dfn>matches the closed selector</dfn> that matches
one of the following:</p>

<ol>
<li>
<p>If <var>element</var> is a <code>details</code> or <code>dialog</code> element:</p>

<ol>
<li><p>Return false if <var>element</var> has the <code data-x="attr-dialog-open">open</code>
attribute, otherwise true.</p></li>
</ol>
</li>
<li><p>A <code>details</code> element which does not have the <code
data-x="attr-details-open">open</code> attribute.</p></li>

josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<li><p>If <var>element</var> is a <code>select</code> element and <var>element</var> is a
<span>drop-down box</span> and the drop-down is closed, then return true.</p></li>
<li><p>A <code>dialog</code> element which does not have the <code
data-x="attr-dialog-open">open</code> attribute.</p></li>

<li><p>Return false.</p></li>
<li><p>A <code>select</code> element which is a <span>drop-down box</span> whose drop-down box
is closed.</p></li>
</ol>
</dd>
</dl>