[:has() pseudo-class] Support invalidation for :buffering and :stalled pseudo-classes

nt1m · nt1m · commit 2974b49cf64d · 2023-01-13T14:05:58.000-08:00
https://bugs.webkit.org/show_bug.cgi?id=249455 rdar://103438119 Reviewed by Antti Koivisto. * LayoutTests/imported/w3c/web-platform-tests/css/selectors/invalidation/media-loading-pseudo-classes-in-has-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/selectors/invalidation/media-loading-pseudo-classes-in-has.html: Added. * LayoutTests/platform/gtk/imported/w3c/web-platform-tests/css/selectors/invalidation/media-loading-pseudo-classes-in-has-expected.txt: Added. * Source/WebCore/html/HTMLMediaElement.cpp: (WebCore::HTMLMediaElement::parseAttribute): Remove `invalidateStyle()` call since we already switched it to PseudoClassChangeInvalidation in 257991@main (WebCore::HTMLMediaElement::setNetworkState): (WebCore::HTMLMediaElement::setReadyState): (WebCore::HTMLMediaElement::progressEventTimerFired): (WebCore::HTMLMediaElement::setPaused): (WebCore::HTMLMediaElement::updateBufferingState): (WebCore::HTMLMediaElement::updateStalledState): (WebCore::HTMLMediaElement::buffering const): Deleted. (WebCore::HTMLMediaElement::stalled const): Deleted. * Source/WebCore/html/HTMLMediaElement.h: (WebCore::HTMLMediaElement::buffering const): (WebCore::HTMLMediaElement::stalled const): Canonical link: https://commits.webkit.org/258891@main
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/selectors/invalidation/media-loading-pseudo-classes-in-has-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/selectors/invalidation/media-loading-pseudo-classes-in-has-expected.txt
@@ -0,0 +1,5 @@
+
+
+PASS Test :has(:stalled) invalidation
+PASS Test :has(:buffering) invalidation
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/selectors/invalidation/media-loading-pseudo-classes-in-has.html b/LayoutTests/imported/w3c/web-platform-tests/css/selectors/invalidation/media-loading-pseudo-classes-in-has.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<meta name="timeout" content="long" />
+<title>:has() invalidation with :buffering & :stalled 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/#media-loading-state">
+
+<style>
+#subject:has(video:buffering) {
+    background-color: blue;
+}
+#subject:has(video:stalled) {
+    border-color: green;
+}
+</style>
+
+<div id="subject">
+    <video width="300" height="300" muted loop controls></video>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const BLUE = "rgb(0, 0, 255)";
+const GREEN = "rgb(0, 128, 0)";
+
+function assert_buffering_state(buffering) {
+    if (buffering)
+        assert_equals(getComputedStyle(subject).backgroundColor, BLUE);
+    else
+        assert_not_equals(getComputedStyle(subject).backgroundColor, BLUE);
+}
+
+function assert_stalled_state(stalled) {
+    if (stalled)
+        assert_equals(getComputedStyle(subject).borderColor, GREEN);
+    else
+        assert_not_equals(getComputedStyle(subject).borderColor, GREEN);
+}
+
+promise_test(async (t) => {
+    const video = document.querySelector("video");
+    assert_stalled_state(false);
+    await new Promise((r) => {
+        video.addEventListener("stalled", r, { once: true });
+        video.src = `/media/counting.mp4?pipe=trickle(100:d1:r2)&random=${Math.random()}`;
+    });
+    assert_stalled_state(false);
+    const promise = video.play();
+    assert_stalled_state(true);
+    video.src = "";
+    // Wait for the video to abort trying to play
+    try {
+        await promise;
+    } catch (err) {}
+    await video.pause();
+    assert_stalled_state(false);
+}, "Test :has(:stalled) invalidation");
+
+promise_test(async (t) => {
+    const video = document.querySelector("video");
+    assert_buffering_state(false);
+    await new Promise((r) => {
+        video.addEventListener("stalled", r, { once: true });
+        video.src = `/media/counting.mp4?pipe=trickle(100:d1:r2)&random=${Math.random()}`;
+    });
+    video.currentTime = 10;
+    assert_buffering_state(false);
+    const promise = video.play();
+    assert_buffering_state(true);
+    video.src = "";
+    // Wait for the video to abort trying to play
+    try {
+        await promise;
+    } catch (err) {}
+    await video.pause();
+    assert_buffering_state(false);
+}, "Test :has(:buffering) invalidation");
+</script>
diff --git a/LayoutTests/platform/gtk/imported/w3c/web-platform-tests/css/selectors/invalidation/media-loading-pseudo-classes-in-has-expected.txt b/LayoutTests/platform/gtk/imported/w3c/web-platform-tests/css/selectors/invalidation/media-loading-pseudo-classes-in-has-expected.txt
@@ -0,0 +1,7 @@
+
+
+Harness Error (TIMEOUT), message = null
+
+TIMEOUT Test :has(:stalled) invalidation Test timed out
+NOTRUN Test :has(:buffering) invalidation
+
diff --git a/Source/WebCore/html/HTMLMediaElement.cpp b/Source/WebCore/html/HTMLMediaElement.cpp
@@ -828,10 +828,6 @@ void HTMLMediaElement::parseAttribute(const QualifiedName& name, const AtomStrin
     }
     else
         HTMLElement::parseAttribute(name, value);
-
-    // Changing the "muted" attribue could affect ":muted"
-    if (name == mutedAttr)
-        invalidateStyle();
 }
 
 void HTMLMediaElement::finishParsingChildren()
@@ -2605,7 +2601,8 @@ void HTMLMediaElement::setNetworkState(MediaPlayer::NetworkState state)
     if (state == MediaPlayer::NetworkState::Empty) {
         // Just update the cached state and leave, we can't do anything.
         m_networkState = NETWORK_EMPTY;
-        invalidateStyle();
+        updateBufferingState();
+        updateStalledState();
         return;
     }
 
@@ -2635,7 +2632,8 @@ void HTMLMediaElement::setNetworkState(MediaPlayer::NetworkState state)
         m_completelyLoaded = true;
     }
 
-    invalidateStyle();
+    updateBufferingState();
+    updateStalledState();
 }
 
 void HTMLMediaElement::changeNetworkStateFromLoadingToIdle()
@@ -2918,7 +2916,8 @@ void HTMLMediaElement::setReadyState(MediaPlayer::ReadyState state)
     updateMediaController();
     updateActiveTextTrackCues(currentMediaTime());
 
-    invalidateStyle();
+    updateBufferingState();
+    updateStalledState();
 }
 
 #if ENABLE(LEGACY_ENCRYPTED_MEDIA)
@@ -3270,13 +3269,13 @@ void HTMLMediaElement::progressEventTimerFired()
             m_previousProgressTime = time;
             if (m_sentStalledEvent) {
                 m_sentStalledEvent = false;
-                invalidateStyle();
+                updateStalledState();
             }
             updateRenderer();
         } else if (timedelta > 3_s && !m_sentStalledEvent) {
             scheduleEvent(eventNames().stalledEvent);
             m_sentStalledEvent = true;
-            invalidateStyle();
+            updateStalledState();
             setShouldDelayLoadEvent(false);
         }
     });
@@ -3796,8 +3795,8 @@ void HTMLMediaElement::setPaused(bool paused)
         { CSSSelector::PseudoClassPlaying, !paused },
     });
     m_paused = paused;
-    // FIXME: Use PseudoClassChangeInvalidation for :buffering/:stalling and remove the line below.
-    invalidateStyle();
+    updateBufferingState();
+    updateStalledState();
 }
 
 double HTMLMediaElement::defaultPlaybackRate() const
@@ -4280,7 +4279,7 @@ void HTMLMediaElement::setVolumeLocked(bool locked)
     m_volumeLocked = locked;
 }
 
-bool HTMLMediaElement::buffering() const
+void HTMLMediaElement::updateBufferingState()
 {
     // CSS Selectors Level 4; Editor's Draft, 2 July 2021
     // <https://drafts.csswg.org/selectors/>
@@ -4291,10 +4290,14 @@ bool HTMLMediaElement::buffering() const
     // 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.)
-    return !paused() && m_networkState == NETWORK_LOADING && m_readyState <= HAVE_CURRENT_DATA;
+    bool buffering = !paused() && m_networkState == NETWORK_LOADING && m_readyState <= HAVE_CURRENT_DATA;
+    if (m_buffering != buffering) {
+        Style::PseudoClassChangeInvalidation styleInvalidation(*this, CSSSelector::PseudoClassBuffering, buffering);
+        m_buffering = buffering;
+    }
 }
 
-bool HTMLMediaElement::stalled() const
+void HTMLMediaElement::updateStalledState()
 {
     // CSS Selectors Level 4; Editor's Draft, 2 July 2021
     // <https://drafts.csswg.org/selectors/>
@@ -4306,7 +4309,11 @@ bool HTMLMediaElement::stalled() const
     // 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.)
-    return !paused() && m_networkState == NETWORK_LOADING && m_readyState <= HAVE_CURRENT_DATA && m_sentStalledEvent;
+    bool stalled = !paused() && m_networkState == NETWORK_LOADING && m_readyState <= HAVE_CURRENT_DATA && m_sentStalledEvent;
+    if (m_stalled != stalled) {
+        Style::PseudoClassChangeInvalidation styleInvalidation(*this, CSSSelector::PseudoClassStalled, stalled);
+        m_stalled = stalled;
+    }
 }
 
 #if USE(AUDIO_SESSION) && PLATFORM(MAC)
diff --git a/Source/WebCore/html/HTMLMediaElement.h b/Source/WebCore/html/HTMLMediaElement.h
@@ -336,8 +336,12 @@ class HTMLMediaElement
 
     bool volumeLocked() const { return m_volumeLocked; }
     WEBCORE_EXPORT void setVolumeLocked(bool);
-    bool buffering() const;
-    bool stalled() const;
+
+    bool buffering() const { return m_buffering; }
+    void updateBufferingState();
+
+    bool stalled() const { return m_stalled; }
+    void updateStalledState();
 
     WEBCORE_EXPORT void togglePlayState();
     WEBCORE_EXPORT void beginScrubbing() override;
@@ -1149,6 +1153,8 @@ class HTMLMediaElement
     bool m_initiallyMuted : 1;
     bool m_paused : 1;
     bool m_seeking : 1;
+    bool m_buffering : 1;
+    bool m_stalled : 1;
     bool m_seekRequested : 1;
     bool m_wasPlayingBeforeSeeking : 1;
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
++
++
 +PASS Test :has(:stalled) invalidation
 +PASS Test :has(:buffering) invalidation
++