WebVTT styles not applied with in-band tracks

https://bugs.webkit.org/show_bug.cgi?id=244626 <rdar://problem/99397718> Reviewed by Eric Carlson. When parsing a WebVTT header directly with parseFileHeader(), emit newStyleSheetsParsed() and newRegionsParsed(), which are normally only emitted when a cue is encountered when parsing a header. And when newStyleSheetsParsed() is called, handle it in InbandGenericTextTrack. * LayoutTests/http/tests/media/hls/hls-webvtt-style-expected.txt: Added. * LayoutTests/http/tests/media/hls/hls-webvtt-style.html: Added. * LayoutTests/http/tests/media/resources/hls/subtitles/prog_style.m3u8: Added. * LayoutTests/http/tests/media/resources/hls/subtitles/styleSequence0.webvtt: Added. * LayoutTests/http/tests/media/resources/hls/test-webvtt-style.m3u8: Added. * Source/WebCore/html/track/InbandGenericTextTrack.cpp: (WebCore::InbandGenericTextTrack::newStyleSheetsParsed): * Source/WebCore/html/track/WebVTTParser.cpp: (WebCore::WebVTTParser::parseFileHeader): Canonical link: https://commits.webkit.org/254109@main
WebKit · Sep 2, 2022 · aa0c9cf7ae83fece33023ffba245af0bcd66358e · aa0c9cf
1 parent 5dc877b
commit aa0c9cf7ae83fece33023ffba245af0bcd66358e
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 0 deletions.
diff --git a/LayoutTests/http/tests/media/hls/hls-webvtt-style-expected.txt b/LayoutTests/http/tests/media/hls/hls-webvtt-style-expected.txt
@@ -0,0 +1,13 @@
+
+EVENT(addtrack)
+EXPECTED (video.textTracks.length == '1') OK
+RUN(video.textTracks[0].mode = 'showing')
+EVENT(cuechange)
+RUN(textTrackContainer = window.internals.shadowRoot(video).querySelector("div[pseudo=-webkit-media-text-track-container]"))
+RUN(cue = textTrackContainer.querySelector("span[pseudo=cue]"))
+EXPECTED (getComputedStyle(cue).backgroundColor == 'rgba(255, 0, 0, 0.5)') OK
+EXPECTED (getComputedStyle(cue.children[0]).backgroundColor == 'rgba(0, 0, 0, 0)') OK
+EXPECTED (getComputedStyle(cue.children[1]).backgroundColor == 'rgb(0, 255, 0)') OK
+EXPECTED (getComputedStyle(cue.children[2]).fontSize == '48px') OK
+END OF TEST
+
diff --git a/LayoutTests/http/tests/media/hls/hls-webvtt-style.html b/LayoutTests/http/tests/media/hls/hls-webvtt-style.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script src=../../media-resources/video-test.js></script>
+    <script>
+        window.addEventListener('load', async event => {
+            video = document.getElementById('video');
+            video.src = "../resources/hls/test-webvtt-style.m3u8";
+            video.play();
+            await waitFor(video.textTracks, 'addtrack');
+
+            testExpected("video.textTracks.length", "1");
+            run("video.textTracks[0].mode = 'showing'");
+
+            await waitFor(video.textTracks[0], 'cuechange');
+
+            run('textTrackContainer = window.internals.shadowRoot(video).querySelector("div[pseudo=-webkit-media-text-track-container]")');
+            run('cue = textTrackContainer.querySelector("span[pseudo=cue]")')
+
+            testExpected('getComputedStyle(cue).backgroundColor', "rgba(255, 0, 0, 0.5)");
+
+            testExpected('getComputedStyle(cue.children[0]).backgroundColor', "rgba(0, 0, 0, 0)");
+            testExpected('getComputedStyle(cue.children[1]).backgroundColor', "rgb(0, 255, 0)");
+            testExpected('getComputedStyle(cue.children[2]).fontSize', "48px");
+
+            endTest();
+        });
+    </script>
+</head>
+<body>
+    <video id="video" muted loop></video>
+</body>
+</html>
diff --git a/LayoutTests/http/tests/media/resources/hls/subtitles/prog_style.m3u8 b/LayoutTests/http/tests/media/resources/hls/subtitles/prog_style.m3u8
@@ -0,0 +1,8 @@
+#EXTM3U
+#EXT-X-TARGETDURATION:30
+#EXT-X-VERSION:3
+#EXT-X-MEDIA-SEQUENCE:0
+#EXT-X-PLAYLIST-TYPE:VOD
+#EXTINF:10,
+styleSequence0.webvtt
+#EXT-X-ENDLIST
diff --git a/LayoutTests/http/tests/media/resources/hls/subtitles/styleSequence0.webvtt b/LayoutTests/http/tests/media/resources/hls/subtitles/styleSequence0.webvtt
@@ -0,0 +1,14 @@
+WEBVTT
+X-TIMESTAMP-MAP=MPEGTS:900000,LOCAL:00:00:00.000
+
+STYLE
+::cue { background-color: rgba(255,0,0,0.5) !important }
+::cue() { background-color: rgba(0,0,255,0.5) !important }
+::cue(.green-background) { background-color: rgba(0, 255, 0, 1) }
+::cue(.bigger) { font-size: 48px; }
+
+1
+00:00.000 --> 00:10.000
+<c>No style</c>
+<c.green-background>Green Background</c>
+<c.bigger>Bigger</c>
diff --git a/LayoutTests/http/tests/media/resources/hls/test-webvtt-style.m3u8 b/LayoutTests/http/tests/media/resources/hls/test-webvtt-style.m3u8
@@ -0,0 +1,6 @@
+#EXTM3U
+
+#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subtitles",LANGUAGE="en-US",NAME="English",AUTOSELECT=YES,DEFAULT=YES,URI="subtitles/prog_style.m3u8"
+
+#EXT-X-STREAM-INF:BANDWIDTH=634451,CODECS="mp4a.40.2, avc1.4d401e",RESOLUTION=640x480,SUBTITLES="subtitles"
+bipbop/prog_index.m3u8
diff --git a/LayoutTests/platform/glib/TestExpectations b/LayoutTests/platform/glib/TestExpectations
@@ -2581,6 +2581,7 @@ webkit.org/b/168373 media/media-fullscreen-loop-inline.html [ Timeout ]
 webkit.org/b/174242 media/media-fullscreen-pause-inline.html [ Skip ]
 webkit.org/b/182108 http/tests/media/hls/hls-webvtt-tracks.html [ Timeout ]
 webkit.org/b/182108 http/tests/media/hls/hls-webvtt-flashing.html [ Timeout ]
+webkit.org/b/182108 http/tests/media/hls/hls-webvtt-style.html [ Timeout ]
 webkit.org/b/137311 media/video-fullscreen-only-playback.html [ Timeout Crash ]
 
 webkit.org/b/194044 imported/w3c/web-platform-tests/media-source/mediasource-addsourcebuffer.html [ Failure ]

diff --git a/Source/WebCore/html/track/InbandGenericTextTrack.cpp b/Source/WebCore/html/track/InbandGenericTextTrack.cpp
@@ -216,6 +216,7 @@ void InbandGenericTextTrack::newRegionsParsed()
 
 void InbandGenericTextTrack::newStyleSheetsParsed()
 {
+    m_styleSheets = parser().takeStyleSheets();
 }
 
 void InbandGenericTextTrack::fileFailedToParse()

diff --git a/Source/WebCore/html/track/WebVTTParser.cpp b/Source/WebCore/html/track/WebVTTParser.cpp
@@ -119,6 +119,10 @@ void WebVTTParser::parseFileHeader(String&& data)
     m_lineReader.reset();
     m_lineReader.append(WTFMove(data));
     parse();
+    if (!m_regionList.isEmpty())
+        m_client.newRegionsParsed();
+    if (!m_styleSheets.isEmpty())
+        m_client.newStyleSheetsParsed();
 }
 
 void WebVTTParser::parseBytes(const uint8_t* data, unsigned length)