Skip to content

Commit

Permalink
Update :active definition to not consider disabledness
Browse files Browse the repository at this point in the history 
This matches Gecko and WebKit. The disabled condition was added to the spec in 9985973 but not implemented uniformly. As discussed in #6635, it doesn't work very well and is inconsistent with other similar pseudo-classes, like :hover.

This also removes the consideration of <link> elements with href="" attributes, since they no longer have activation behavior as of 1e0ee7f. And it updates the definitions of both :active and :hover to be based on the latest Selectors spec, which notably includes the ancestor condition over the flat tree at the CSS layer, instead of having HTML handle that.

There remains some lack of interop around elements such as <input type=radio> which have activation behavior but are not on the list of elements for which "in a formal activation state" is considered. #6635 stays open to track that case.
  • Loading branch information
@domenic
domenic committed Jan 5, 2022
1 parent 8c9862b commit bfb72ae
Showing 1 changed file with 25 additions and 38 deletions.
63 changes: 25 additions & 38 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70065,58 +70065,40 @@ contradict people?
<dt><dfn selector noexport><code data-x="selector-active">:active</code></dfn></dt>
<dd>
<p>The <code data-x="selector-active">:active</code> <span>pseudo-class</span> is defined to
match an element
<q cite="https://drafts.csswg.org/selectors3/#the-user-action-pseudo-classes-hover-act">while an
element is <dfn><i data-x="concept-selector-active">being activated</i></dfn> by the user</q>.</p>
match an element <q cite="https://drafts.csswg.org/selectors/#the-active-pseudo">while an
element is <dfn><i data-x="concept-selector-active">being activated</i></dfn> by the
user</q>.</p>

<p>To determine whether a particular element is <i data-x="concept-selector-active">being activated</i> for the purposes of
defining the <code data-x="selector-active">:active</code> <span>pseudo-class</span> only, an
HTML user agent must use the first relevant entry in the following list.</p>

<dl>
<dt>If the element has a descendant that is currently matching the <code
data-x="selector-active">:active</code> <span>pseudo-class</span></dt>
<dd><p>The element is <i data-x="concept-selector-active">being activated</i>.</p></dd>

<!-- this even trumps the <button disabled> stuff below:
https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=3355
https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=3356
-->

<dt>If the element is the <span>labeled control</span> of a <code>label</code> element that is
currently matching <code data-x="selector-active">:active</code></dt>
<dd><p>The element is <i data-x="concept-selector-active">being activated</i>.</p></dd>

<!-- this even trumps the <button disabled> stuff below:
https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=3354
-->

<dt>If the element is a <code>button</code> element</dt>
<dt>If the element is an <code>input</code> element whose <code
data-x="attr-input-type">type</code> attribute is in the <span
data-x="attr-input-type-submit">Submit Button</span>, <span
data-x="attr-input-type-image">Image Button</span>, <span data-x="attr-input-type-reset">Reset
Button</span>, or <span data-x="attr-input-type-button">Button</span> state</dt>
<dt>If the element is an <code>a</code> element that has an <code
data-x="attr-hyperlink-href">href</code> attribute</dt>
<dt>If the element is an <code>area</code> element that has an <code
data-x="attr-hyperlink-href">href</code> attribute</dt>
<dt>If the element is <span>focusable</span></dt>
<dd>
<p>The element is <i data-x="concept-selector-active">being activated</i> if it is <span>in a formal activation state</span>
and it is not <span data-x="concept-fe-disabled">disabled</span>.</p>
<p>The element is <i data-x="concept-selector-active">being activated</i> if it is <span>in a
formal activation state</span>.</p>

<p class="example">For example, if the user is using a keyboard to push a <code>button</code>
element by pressing the space bar, the element would match this <span>pseudo-class</span> in
between the time that the element received the <code data-x="event-keydown">keydown</code>
event and the time the element received the <code data-x="event-keyup">keyup</code> event.</p>
</dd>

<dt>If the element is an <code>a</code> element that has an <code
data-x="attr-hyperlink-href">href</code> attribute</dt>
<dt>If the element is an <code>area</code> element that has an <code
data-x="attr-hyperlink-href">href</code> attribute</dt>
<dt>If the element is a <code>link</code> element that has an <code
data-x="attr-link-href">href</code> attribute</dt>
<dt>If the element is <span>focusable</span></dt>
<dd><p>The element is <i data-x="concept-selector-active">being activated</i> if it is <span>in a formal activation
state</span>.</p></dd>

<dt>If the element is <span>being actively pointed at</span></dt>
<dd><p>The element is <i data-x="concept-selector-active">being activated</i>.</p></dd>
</dl>
Expand All @@ -70131,31 +70113,36 @@ contradict people?
element using a pointing device while that pointing device is in the "down" state (e.g. for a
mouse, between the time the mouse button is pressed and the time it is depressed; for a finger
in a multitouch environment, while the finger is touching the display surface).</p>

<p class="note">Per the definition in <cite>Selectors</cite>, <code
data-x="selector-active">:active</code> also matches <span>flat tree</span> ancestors of
elements that are <i data-x="concept-selector-active">being activated</i>. <ref
spec=SELECTORS></p>
</dd>

<dt><dfn selector noexport><code data-x="selector-hover">:hover</code></dfn></dt>
<dd>
<p>The <code data-x="selector-hover">:hover</code> <span>pseudo-class</span> is defined to match
an element <q
cite="https://drafts.csswg.org/selectors3/#the-user-action-pseudo-classes-hover-act">while the
user <i>designates</i> an element with a pointing device</q>. For the purposes of defining the
<code data-x="selector-hover">:hover</code> <span>pseudo-class</span> only, an HTML user agent
must consider an element as being one that the user <i>designates</i> if it is:</p>
<p>The <code data-x="selector-hover">:hover</code> <span>pseudo-class</span> is defined to
match an element <q cite="https://drafts.csswg.org/selectors/#the-hover-pseudo">while the user
<dfn><i data-x="concept-selector-hover">designates</i></dfn> an element with a pointing
device</q>. For the purposes of defining the <code data-x="selector-hover">:hover</code>
<span>pseudo-class</span> only, an HTML user agent must consider an element as being one that
the user <i data-x="concept-selector-hover">designates</i> if it is:</p>

<ul>
<li>
<p>An element that the user indicates using a pointing device.</p>
</li>

<li>
<p>An element that has a descendant that the user indicates using a pointing device.</p>
</li>

<li>
<p>An element that is the <span>labeled control</span> of a <code>label</code> element that is
currently matching <code data-x="selector-hover">:hover</code>.</p>
</li>
</ul>

<p class="note">Per the definition in <cite>Selectors</cite>, <code
data-x="selector-hover">:hover</code> also matches <span>flat tree</span> ancestors of elements
that are <i data-x="concept-selector-hover">designated</i>. <ref spec=SELECTORS></p>
<!--
Demos:
https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=1315
Expand Down

0 comments on commit bfb72ae

Please sign in to comment.