Skip to content

Commit

Permalink
Update :active and :hover definitions (#7465)
Browse files Browse the repository at this point in the history 
This removes the disabled condition for :active, matching Gecko and WebKit. The 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 for :active, since they no longer have activation behavior as of 1e0ee7f.

Finally, this 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. This required splitting up "being activated" and "matches :active", as well as "designated" and "matches :hover".

Closes #6635, although note that there remain other interop issues with :active, tracked in #7578.
  • Loading branch information
@domenic
domenic committed Feb 10, 2022
1 parent 465a6b6 commit df8aaaf
Showing 1 changed file with 51 additions and 63 deletions.
114 changes: 51 additions & 63 deletions source
View file
Expand Up @@ -70787,58 +70787,37 @@ 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>
<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 @@ -70853,31 +70832,37 @@ 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>

<p>Additionally, any element that is the <span>labeled control</span> of a <code>label</code>
element that is currently matching <code data-x="selector-active">:active</code>, also matches
<code data-x="selector-active">:active</code>. (But, it does not count as being <i
data-x="concept-selector-active">being activated</i>.)</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 an element that the user
indicates using a pointing device.</p>

<ul>
<li>
<p>An element that the user indicates using a pointing device.</p>
</li>
<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>

<li>
<p>An element that has a descendant that the user indicates using a pointing device.</p>
</li>
<p>Additionally, any 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>, also matches
<code data-x="selector-hover">:hover</code>. (But, it does not count as being <i
data-x="concept-selector-hover">designated</i>.)</p>

<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>
<!--
Demos:
https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=1315
Expand All @@ -70891,16 +70876,19 @@ Demos:
<pre><code class="html">&lt;p> &lt;label for=c> &lt;input id=a> &lt;/label> &lt;span id=b> &lt;input id=c> &lt;/span> &lt;/p></code></pre>

<p>If the user designates the element with ID "<code data-x="">a</code>" with their pointing
device, then the <code>p</code> element (and all its ancestors not shown in the snippet above),
the <code>label</code> element, the element with ID "<code data-x="">a</code>", and the element
with ID "<code data-x="">c</code>" will match the <code data-x="selector-hover">:hover</code>
<span>pseudo-class</span>. The element with ID "<code data-x="">a</code>" matches it from
condition 1, the <code>label</code> and <code>p</code> elements match it because of condition 2
(one of their descendants is designated), and the element with ID "<code data-x="">c</code>"
matches it through condition 3 (its <code>label</code> element matches <code
data-x="selector-hover">:hover</code>). However, the element with ID "<code data-x="">b</code>"
does <em>not</em> match <code data-x="selector-hover">:hover</code>: its descendant is not
designated, even though it matches <code data-x="selector-hover">:hover</code>.</p>
device, then the <code>p</code> element (and all its ancestors not shown in the snippet
above), the <code>label</code> element, the element with ID "<code data-x="">a</code>", and
the element with ID "<code data-x="">c</code>" will match the <code
data-x="selector-hover">:hover</code> <span>pseudo-class</span>. The element with ID "<code
data-x="">a</code>" matches it by being <i data-x="concept-selector-hover">designated</i>; the
<code>label</code> and <code>p</code> elements match it because of the condition in
<cite>Selectors</cite> about flat tree ancestors; and the element with ID "<code
data-x="">c</code>" matches it through the additional condition above on <span data-x="labeled
control">labeled controls</span> (i.e., its <code>label</code> element matches <code
data-x="selector-hover">:hover</code>). However, the element with ID "<code
data-x="">b</code>" does <em>not</em> match <code data-x="selector-hover">:hover</code>: its
flat tree descendant is not designated, even though that flat tree descendant matches <code
data-x="selector-hover">:hover</code>.</p>
</div>
</dd>

Expand Down

0 comments on commit df8aaaf

Please sign in to comment.