Permalink
Show file tree
Hide file tree
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
[:has() pseudo-class] Support invalidation for :playing, :paused, :se…
…eking, :muted and :volume-locked pseudo-classes https://bugs.webkit.org/show_bug.cgi?id=238994 rdar://91802717 Reviewed by Antti Koivisto. * LayoutTests/platform/gtk/imported/w3c/web-platform-tests/css/selectors/invalidation/media-pseudo-classes-in-has-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/selectors/invalidation/media-pseudo-classes-in-has-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/selectors/invalidation/media-pseudo-classes-in-has.html: Added. * LayoutTests/media/media-css-volume-locked-expected.txt: * LayoutTests/media/media-css-volume-locked.html: * Source/WebCore/html/HTMLMediaElement.cpp: (WebCore::HTMLMediaElement::seekWithTolerance): (WebCore::HTMLMediaElement::seekTask): (WebCore::HTMLMediaElement::clearSeeking): (WebCore::HTMLMediaElement::setSeeking): (WebCore::HTMLMediaElement::setPaused): (WebCore::HTMLMediaElement::setMuted): (WebCore::HTMLMediaElement::setVolumeLocked): * Source/WebCore/html/HTMLMediaElement.h: Canonical link: https://commits.webkit.org/257991@main
- Loading branch information
Showing
7 changed files
with
164 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| Test media pseudo-classes invalidation with :has() | ||
|
|
||
| PASS Test :playing pseudo-classes | ||
| PASS Test :seeking pseudo-class | ||
| PASS Test :muted pseudo-class | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| <!DOCTYPE html> | ||
| <title>:has() invalidation with :playing, :paused, :seeking and :muted pseudo-classes</title> | ||
| <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> | ||
| <link rel="help" href="https://drafts.csswg.org/selectors/#relational"> | ||
| <link rel="help" href="https://w3c.github.io/csswg-drafts/selectors/#video-state"> | ||
| <style> | ||
| #subject { | ||
| background-color: black; | ||
| accent-color: black; | ||
| color: black; | ||
| border: 2px solid black; | ||
| } | ||
| #subject:has(:muted) { | ||
| background-color: red; | ||
| } | ||
| #subject:has(:playing) { | ||
| border-color: green; | ||
| } | ||
| #subject:has(:paused) { | ||
| color: orange; | ||
| } | ||
| #subject:has(:seeking) { | ||
| accent-color: blue; | ||
| } | ||
| </style> | ||
| <body> | ||
| <div id="subject"> | ||
| Test media pseudo-classes invalidation with :has() | ||
| <input type="checkbox"> | ||
| <video width="300" height="300" loop></video> | ||
| </div> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script> | ||
| const GREEN = "rgb(0, 128, 0)"; | ||
| const ORANGE = "rgb(255, 165, 0)"; | ||
| const BLUE = "rgb(0, 0, 255)"; | ||
| const RED = "rgb(255, 0, 0)"; | ||
| const BLACK = "rgb(0, 0, 0)"; | ||
|
|
||
| function assert_matches_muted(muted) { | ||
| assert_equals(getComputedStyle(subject).backgroundColor, muted ? RED : BLACK); | ||
| } | ||
|
|
||
| function assert_matches_playing(playing) { | ||
| assert_equals(getComputedStyle(subject).borderColor, playing ? GREEN : BLACK); | ||
| assert_equals(getComputedStyle(subject).color, !playing ? ORANGE : BLACK); | ||
| } | ||
|
|
||
| function assert_matches_seeking(seeking) { | ||
| assert_equals(getComputedStyle(subject).accentColor, seeking ? BLUE : BLACK); | ||
| } | ||
|
|
||
| promise_test(async (t) => { | ||
| t.add_cleanup(() => { | ||
| video.muted = false; | ||
| video.pause(); | ||
| video.removeAttribute("src"); | ||
| }); | ||
| const video = document.querySelector("video"); | ||
| assert_matches_muted(false); | ||
| assert_matches_playing(false); | ||
| assert_matches_seeking(false); | ||
| await new Promise((r) => { | ||
| video.addEventListener("canplay", r, { once: true }); | ||
| video.src = "/media/counting.mp4"; | ||
| }); | ||
| video.muted = true; // allows us to play the video | ||
| assert_matches_muted(true); | ||
| await new Promise((r) => { | ||
| video.addEventListener("playing", r, { once: true }); | ||
| video.play(); | ||
| }); | ||
| assert_matches_playing(true); | ||
| }, "Test :playing pseudo-classes"); | ||
|
|
||
| promise_test(async (t) => { | ||
| t.add_cleanup(() => { | ||
| video.removeAttribute("src"); | ||
| }); | ||
| const video = document.querySelector("video"); | ||
| assert_matches_muted(false); | ||
| assert_matches_playing(false); | ||
| assert_matches_seeking(false); | ||
| await new Promise((r) => { | ||
| video.addEventListener("canplay", r, { once: true }); | ||
| video.src = "/media/counting.mp4"; | ||
| }); | ||
|
|
||
| assert_matches_seeking(false); | ||
| await new Promise((r) => { | ||
| video.addEventListener("seeking", r, { once: true }); | ||
| video.currentTime = 10; | ||
| }); | ||
| assert_matches_seeking(true); | ||
| }, "Test :seeking pseudo-class"); | ||
|
|
||
| promise_test(async (t) => { | ||
| t.add_cleanup(() => { | ||
| video.removeAttribute("src"); | ||
| }); | ||
| const video = document.querySelector("video"); | ||
| await new Promise((r) => { | ||
| video.addEventListener("canplay", r, { once: true }); | ||
| video.src = "/media/counting.mp4"; | ||
| }); | ||
| assert_matches_muted(false); | ||
| video.muted = true; | ||
| assert_matches_muted(true); | ||
| video.muted = false; | ||
| assert_matches_muted(false); | ||
| }, "Test :muted pseudo-class"); | ||
| </script> | ||
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| Test media pseudo-classes invalidation with :has() | ||
|
|
||
| Harness Error (TIMEOUT), message = null | ||
|
|
||
| PASS Test :playing pseudo-classes | ||
| TIMEOUT Test :seeking pseudo-class Test timed out | ||
| NOTRUN Test :muted pseudo-class | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters