Skip to content
Permalink
Browse files
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
  • Loading branch information
jernoble committed Sep 2, 2022
1 parent 5dc877b commit aa0c9cf7ae83fece33023ffba245af0bcd66358e
Show file tree
Hide file tree
Showing 8 changed files with 80 additions and 0 deletions.
@@ -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

@@ -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>
@@ -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
@@ -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>
@@ -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
@@ -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 ]
@@ -216,6 +216,7 @@ void InbandGenericTextTrack::newRegionsParsed()

void InbandGenericTextTrack::newStyleSheetsParsed()
{
m_styleSheets = parser().takeStyleSheets();
}

void InbandGenericTextTrack::fileFailedToParse()
@@ -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)

0 comments on commit aa0c9cf

Please sign in to comment.