This has been merged recently: https://github.com/w3c/csswg-drafts/pull/6219

This adds new pseudo-classes for HTMLMediaElement: :playing, :paused, and :seeking, :buffering and :stalled. Considering the amount of time I see this not being implemented very well on the web, it's quite a nice addition.

There also is :muted, which also sounds really useful (although harder to get wrong), and :volume-locked, that is useful to implement Safari's behaviour on iOS devices (where you can't change the volume of an HTMLMediaElement, only the global volume of the device), but is unnecessary for Gecko, regardless of the platform (it will never match, I don't know if this means we need to do anything about it?).

(In reply to Paul Adenot (:padenot) from comment #0)

There also is :muted, which also sounds really useful (although harder to get wrong), and :volume-locked, that is useful to implement Safari's behaviour on iOS devices (where you can't change the volume of an HTMLMediaElement, only the global volume of the device), but is unnecessary for Gecko, regardless of the platform (it will never match, I don't know if this means we need to do anything about it?).

We should probably parse it even if it doesn't match.

This should be straight-forward to implement, do you plan to take it? If so I can mentor, it's basically a matter of adding entries here, add a relevant flag here, that matches a flag here.

Then depending on how do you want to manage that flag, you need to either add it to MANUALLY_MANAGED_STATES (and AddState / RemoveState appropriately in HTMLMediaElement) or return it from HTMLMediaElement::IntrinsicState() and call UpdateState(true) in the relevant places. Either way seems sensible.

Adding DDN here, in case we feel the need to move on these docs early.

(In reply to Emilio Cobos Álvarez (:emilio) from comment #1)

This should be straight-forward to implement, do you plan to take it? If so I can mentor, it's basically a matter of adding entries here, add a relevant flag here, that matches a flag here.

I'd love to, it's been a while I haven't been doing style things (and it must be even cooler in rust!), but I can't prioritize this above what I'm doing now and for the forseable future. Let's leave this available. I can also mentor for the media bits, but they are really straightforward.

I think the definition of :stalled might be incorrect. From this test, it appears that this selector is intended to correspond to the media element’s stalled event. However, its definition conflicts with how the stalled event is defined in the HTML spec.

Let me explain it below. First, let see the selector definition.

:buffering
The :buffering pseudo-class must match all media elements whose paused attribute is false, networkState attribute is NETWORK_LOADING, and ready state is HAVE_CURRENT_DATA or less.

:stalled
The :stalled pseudo-class must match all media elements that match the :buffering pseudo-class and whose is currently stalled is true.

So the :stalled selector is required to match :buffering, which means the readyState must be HAVE_CURRENT_DATA or less. However, in the HTML spec, the stalled event is related to downloading.

A media element could already have enough data buffered and then encountering not able to download more data, which would trigger stalled. That does not necessarily mean the readyState must be equal to or below HAVE_CURRENT_DATA.

Because of this, I think it is incorrect for :stalled to require matching :buffering. Instead, it should likely only check networkState and paused, but not readyState.

Paul, could you help double-check whether my understanding is correct? If so, I can file an issue on the spec. Thanks!

I will implement :playing, :paused, :seeking, :buffering, :stalled (I still have some questions about its definition though) and :muted. I will file another new bug for :volume-locked because it's still unclear what we can do for that.

I will still implement :volume-locked in this bug, but will separate the implementation for matching element into bug 2013371.

This patch only implements the :volume-locked [1] but doesn't implement
the matching process for media element, which should be done in bug 2013371.

[1] https://html.spec.whatwg.org/multipage/semantics-other.html#selector-volume-locked

Yes, I think your reading of the spec is correct and this warrants an issue.

Backed out for causing multiple failures

Backout link

Push with failures

browser_send_more_info.js
SEGV /builds/worker/workspace/obj-build/dist/include/mozilla/Assertions.h
RestyleManager.cpp
browser_noToggleOnAudio.js

Please check most of the fix by commit jobs from this push

https://hg.mozilla.org/mozilla-central/rev/686e360ad67e
https://hg.mozilla.org/mozilla-central/rev/967e757e6850
https://hg.mozilla.org/mozilla-central/rev/845ed049fa40
https://hg.mozilla.org/mozilla-central/rev/fd9b3f83d1b4
https://hg.mozilla.org/mozilla-central/rev/d8c8118af08f
https://hg.mozilla.org/mozilla-central/rev/d1a65d9be4dd

Alastor, is that something we should mention in our 149 release notes? Thanks

https://wiki.mozilla.org/Release_Management/Release_Notes_Nomination

This is still pref-off by default, and there is a follow-up (bug 2015556) that needs to be completed before we turn it on. I’ll likely consider enabling it in Fx150 and will add a release note flag at that time.

Related issues and pull requests

• BCD PR
• Firefox Release PR