Skip to content

Commit

Permalink
Add the media element pseudo-classes
Browse files Browse the repository at this point in the history 
These have been in Selectors for a while, but require host integration. The usage of public API in the definition feels justified given the current state of the media element section, though I tried to minimize it.

Test coverage can be found here:

* https://wpt.fyi/css/selectors/media/media-loading-state.html
* https://wpt.fyi/css/selectors/media/media-playback-state.html
* https://wpt.fyi/css/selectors/media/sound-state.html
* https://wpt.fyi/results/css/selectors/invalidation/media-pseudo-classes-in-has.html
* https://wpt.fyi/results/css/selectors/invalidation/media-loading-pseudo-classes-in-has.html
  • Loading branch information
@annevk
annevk committed Jan 16, 2024
1 parent 540448b commit 58ff4f3
Showing 1 changed file with 79 additions and 4 deletions.
83 changes: 79 additions & 4 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35838,9 +35838,14 @@ interface <dfn interface>MediaError</dfn> {
method on a <span>media element</span> is invoked, the user agent must run the <span>media element
load algorithm</span>.</p>

<p>A <span>media element</span> has an associated boolean <dfn>is currently stalled</dfn>, which
is initially false.</p>

<p>The <dfn>media element load algorithm</dfn> consists of the following steps.</p>

<ol>
<li><p>Set this element's <span>is currently stalled</span> to false.</p></li>

<li><p>Abort any already-running instance of the <span
data-x="concept-media-load-algorithm">resource selection algorithm</span> for this
element.</p></li>
Expand Down Expand Up @@ -36482,8 +36487,14 @@ interface <dfn interface>MediaError</dfn> {
When a <span>media element</span> that is actively attempting to obtain <span>media
data</span> has failed to receive any data for a duration equal to the <span>media element
stall timeout</span>, the user agent must <span>queue a media element task</span> given the
<span>media element</span> to <span data-x="concept-event-fire">fire an event</span> named
<code data-x="event-media-stalled">stalled</code> at the element.</p>
<span>media element</span> to:</p>

<ol>
<li><p><span data-x="concept-event-fire">Fire an event</span> named <code
data-x="event-media-stalled">stalled</code> at the element.</p></li>

<li><p>Set the element's <span>is currently stalled</span> to true.</p></li>
</ol>

<p>User agents may allow users to selectively block or slow <span>media data</span> downloads.
When a <span>media element</span>'s download has been blocked altogether, the user agent must
Expand Down Expand Up @@ -36529,8 +36540,14 @@ interface <dfn interface>MediaError</dfn> {

<p>While the load is not suspended (see below), every 350ms (&#xB1;200ms) or for every byte
received, whichever is <em>least</em> frequent, <span>queue a media element task</span>
given the <span>media element</span> to <span data-x="concept-event-fire">fire an
event</span> named <code data-x="event-media-progress">progress</code> at the element.</p>
given the <span>media element</span> to:

<ol>
<li><p><span data-x="concept-event-fire">Fire an event</span> named <code
data-x="event-media-progress">progress</code> at the element.</p></li>

<li><p>Set the element's <span>is currently stalled</span> to false.</p></li>
</ol>

<p>While the user agent might still need network access to obtain parts of the <span>media
resource</span>, the user agent must remain on this step.</p>
Expand Down Expand Up @@ -40657,13 +40674,20 @@ red:89
the <span>media element</span> is not <span>allowed to play</span>, the user agent must run the
<span>internal pause steps</span> for the <span>media element</span>.</p>

<p>A user agent has an associated <dfn>volume locked</dfn> (a boolean). Its value is
<span>implementation-defined</span> and determines whether the <span
data-x="concept-media-volume">playback volume</span> takes effect.</p>

<p>An element's <dfn for=HTMLMediaElement export>effective media volume</dfn> is determined as
follows:</p>

<ol>
<li><p>If the user has indicated that the user agent is to override the volume of the element,
then return the volume desired by the user.</p></li>

<li><p>If the user agent's <span>volume locked</span> is true, then return the system
volume.</p></li>

<li><p>If the element's audio output is <span data-x="concept-media-muted">muted</span>, then
return zero.</p></li>

Expand Down Expand Up @@ -74179,6 +74203,57 @@ Demos:
match all <span>custom element</span>s whose <span>states set</span>'s <span>set entries</span>
contains <var>identifier</var>.</p>
</dd>

<dt><dfn selector noexport><code data-x="selector-playing">:playing</code></dfn></dt>
<dd>
<p>The <code data-x="selector-playing">:playing</code> <span>pseudo-class</span> must match all
<span data-x="media element">media elements</span> whose <code
data-x="dom-media-paused">paused</code> attribute is false.</p>
<!-- This should really use a non-public API. -->
</dd>

<dt><dfn selector noexport><code data-x="selector-paused">:paused</code></dfn></dt>
<dd>
<p>The <code data-x="selector-paused">:paused</code> <span>pseudo-class</span> must match all
<span data-x="media element">media elements</span> whose <code
data-x="dom-media-paused">paused</code> attribute is true.</p>
<!-- This should really use a non-public API. -->
</dd>

<dt><dfn selector noexport><code data-x="selector-seeking">:seeking</code></dfn></dt>
<dd>
<p>The <code data-x="selector-seeking">:seeking</code> <span>pseudo-class</span> must match all
<span data-x="media element">media elements</span> whose <code
data-x="dom-media-seeking">seeking</code> attribute is true.</p>
<!-- This should really use a non-public API. -->
</dd>

<dt><dfn selector noexport><code data-x="selector-buffering">:buffering</code></dfn></dt>
<dd>
<p>The <code data-x="selector-buffering">:buffering</code> <span>pseudo-class</span> must match
all <span data-x="media element">media elements</span> whose <code
data-x="dom-media-paused">paused</code> attribute is false, <code
data-x="dom-media-networkState">networkState</code> attribute is <code
data-x="dom-media-NETWORK_LOADING">NETWORK_LOADING</code>, and ready state is <code
data-x="dom-media-HAVE_CURRENT_DATA">HAVE_CURRENT_DATA</code> or less.</p>
<!-- This should really use a non-public API. -->
</dd>

<dt><dfn selector noexport><code data-x="selector-stalled">:stalled</code></dfn></dt>
<dd><p>The <code data-x="selector-stalled">:stalled</code> <span>pseudo-class</span> must match
all <span data-x="media element">media elements</span> that match the <code
data-x="selector-buffering">:buffering</code> <span>pseudo-class</span> and whose <span>is
currently stalled</span> is true.</p></dd>

<dt><dfn selector noexport><code data-x="selector-muted">:muted</code></dfn></dt>
<dd><p>The <code data-x="selector-muted">:muted</code> <span>pseudo-class</span> must match all
<span data-x="media element">media elements</span> that are <span
data-x="concept-media-muted">muted</span>.</p></dd>

<dt><dfn selector noexport><code data-x="selector-volume-locked">:volume-locked</code></dfn></dt>
<dd><p>The <code data-x="selector-volume-locked">:volume-locked</code> <span>pseudo-class</span>
must match all <span data-x="media element">media elements</span> when the user agent's
<span>volume locked</span> is true.</p></dd>
</dl>

<p class="note">This specification does not define when an element matches the <code undefined
Expand Down

0 comments on commit 58ff4f3

Please sign in to comment.