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

[selectors-4] Define a number of new pseudo-classes for matching the state of media elements. #6219

Merged
merged 3 commits into from Apr 22, 2021
Merged

[selectors-4] Define a number of new pseudo-classes for matching the state of media elements. #6219

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
996e587
[selectors-4] First draft of :seeking, :buffering, :stalled, :muted, …
hober Apr 16, 2021
59f2bc1
Use link-defaults instead of anchors for several terms defined in HTML.
hober Apr 21, 2021
6599d0b
Remove unnecessary comment and fix whitespace.
hober Apr 21, 2021
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
60 changes: 54 additions & 6 deletions selectors-4/Overview.bs
View file
Open in desktop
Expand Up @@ -36,6 +36,14 @@ spec:css-pseudo-4; type:selector;
text: ::first-line
text: ::first-letter
</pre>
<pre class="anchors">
urlPrefix: https://html.spec.whatwg.org/multipage/; spec: HTML
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of these definitions already exist in HTML and are reasonably marked up, they're just not exported.

Please swap to specifying these in link-defaults, and then probably ask HTML to export them.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 59f2bc1. Export of those terms requested in whatwg/html#6603.

text: effective media volume; url: media.html#effective-media-volume; type: dfn
text: media data; url: media.html#media-data; type: dfn
text: seeking; url: media.html#seeking; type: dfn
text: stall timeout; url: media.html#stall-timeout; type: dfn
text: stalled; url: media.html#stall-timeout; type: dfn
</pre>

<style>
#selector-examples td:first-child {
Expand Down Expand Up @@ -2403,23 +2411,63 @@ Resource State Pseudos</h2>
particularly images/videos,
and allow authors to select them based on some quality of their state.

<h3 id="video-state">
Video/Audio Play State: the '':playing'' and '':paused'' pseudo-classes</h3>
<h3 id="video-state"> <!-- keeping this ID because Cool URIs Don't Change -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, but no need to explain your ID choices. ^_^

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed in 6599d0b.

Media Playback State: the '':playing'', '':paused'', and '':seeking'' pseudo-classes</h3>

The <dfn>:playing</dfn> pseudo-class represents an element
representing an audio, video, or similar resource
that is capable of being “played” or “paused”,
when that element is “playing”.
(This includes both when the element is explicitly playing,
and when it's temporarily stopped for some reason not connected to user intent,
but will automatically resume when that reason is resolved,
such as a “buffering” state.)
such as a “buffering” or “stalled” state.)

The <dfn>:paused</dfn> pseudo-class represents the same elements,
but instead match when the element is <em>not</em> “playing”.
The <dfn>:paused</dfn> pseudo-class represents an element
that is capable of being “played” or “paused”,
when that element is “paused” (i.e. <em>not</em> ”playing”).
(This includes both an explicit “paused” state,
and other non-playing states like “loaded, hasn't been activated yet”, etc.)

The <dfn>:seeking</dfn> pseudo-class represents an element
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This spec is tab-indented, please stick with that consistently.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 6599d0b.

that is capable of ”seeking”
when that element is ”seeking”.
(For the <{audio}> and <{video}> elements of HTML, see [=seeking=]. [[HTML]])

<h3 id="media-loading-state">
Media Loading State: the '':buffering'' and '':stalled'' pseudo-classes</h3>

The <dfn>:buffering</dfn> pseudo-class represents an element
that is capable of being “played” or “paused”,
when that element cannot continue playing
because it is actively attempting to obtain [=media data=]
but has not yet obtained enough data to resume playback.
(Note that the element is still considered to be “playing” when it is “buffering”.
Whenever '':buffering'' matches an element,
'':playing'' also matches the element.)

The <dfn>:stalled</dfn> pseudo-class represents an element
when that element cannot continue playing
because it is actively attempting to obtain [=media data=]
but it has failed to receive any data for some amount of time.
For the <{audio}> and <{video}> elements of HTML,
this amount of time is the [=stall timeout=]. [[HTML]]
(Note that, like with the '':buffering'' pseudo-class,
the element is still considered to be “playing” when it is “stalled”.
Whenever '':stalled'' matches an element,
'':playing'' also matches the element.)

<h3 id="sound-state">
Sound State: the '':muted'' and '':volume-locked'' pseudo-classes</h3>

The <dfn>:muted</dfn> pseudo-class represents
an element capable of making sound
when that element is “muted“.
(For the <{audio}> and <{video}> elements of HTML, see [=muted=]. [[HTML]])

The <dfn>:volume-locked</dfn> pseudo-class represents
an element capable of making sound
when programmatically changing the element’s volume
does not change the element's [=effective media volume=].

<h2 id='input-pseudos'>
The Input Pseudo-classes</h2>
Expand Down