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

Jump to bottom

Update :active and :hover definitions #7465

Merged
merged 3 commits into from
Feb 10, 2022
Merged

Update :active and :hover definitions #7465

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0923fc8
Update :active definition to not consider disabledness
domenic Jan 5, 2022
2436ef9
Separate out how :active works
domenic Jan 7, 2022
4bc89f8
Same fix for :active
domenic Jan 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
105 changes: 46 additions & 59 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70731,58 +70731,41 @@ 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>
domenic marked this conversation as resolved.
Show resolved Hide resolved

<!-- 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 @@ -70797,31 +70780,32 @@ 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 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 @@ -70835,16 +70819,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