This implements :playing [1] and :paused [2] pseudeo classes for media element.
[1] https://html.spec.whatwg.org/multipage/semantics-other.html#selector-playing
[2] https://html.spec.whatwg.org/multipage/semantics-other.html#selector-paused
Differential D281037
Bug 1707584 - part1 : implement :playing and :paused pseudo classes. Authored by alwu on Jan 29 2026, 7:08 PM. Tags Referenced Files
Details
This implements :playing [1] and :paused [2] pseudeo classes for media element. [1] https://html.spec.whatwg.org/multipage/semantics-other.html#selector-playing
Diff Detail
Event TimelineThere are a very large number of changes, so older changes are hidden. Show Older Changes Comment Actions Seems this could be much simpler and avoid using extra bits, which we're a bit short of.
Comment Actions Add a test for playing and paused not matching on arbitrary elements please?
Comment Actions r=me with that fixed, but please add a test for the non-media element case matching in a followup please?
Comment Actions Could you point me out where I should add a test? do you have any reference? Thanks!
Comment Actions @emilio I’ve added the test case to media-playback-state.html and also removed the declaration from tree.js. Could you help take another look and let me know if everything looks correct? Thanks! Comment Actions Looks great! Maybe we should have that for all the pseudo-classes? So something like: for (let pseudoClass of [":playing", ":paused", ":seeking", ...]) {
assert_true(CSS.supports(`selector(${pseudoClass})`));
assert_false(div.matches(pseudoClass));
assert_true(div.matches(`:not(${pseudoClass})`));
}Or so, with nicer test messages and so on.
Comment Actions I added :seeking in D281038, but considering media-playback-state.html is only about these three classes, I didn't add other classes into this test. Maybe we could have another separate test in the follow up to test all classes.
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||