Bug 216632 - AX: Embedded CSS in WebVTT is not considered if vtt file is referenced from playlist
Summary: AX: Embedded CSS in WebVTT is not considered if vtt file is referenced from p...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Media (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac macOS 10.15
: P1 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-09-16 19:33 PDT by shivaksk1
Modified: 2020-09-20 07:56 PDT (History)
2 users (show)

See Also:

Attachments
Sample WebVTT file (1.69 KB, text/vtt)
2020-09-16 19:33 PDT, shivaksk1 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description shivaksk1 2020-09-16 19:33:06 PDT 
Created attachment 408981 [details]
Sample WebVTT file

Hi,

The inline styles defined in the WebVTT file work fine if the vtt file is included explicitly as a <track> inside the media element.

For example:
<video id="video" autoplay muted controls src="https://localhost/apple/bipbop.m3u8" width=512>
    <track kind=subtitles label="eng" src="https://localhost/apple/subs/unforced/fileSequence0.webvtt" srclang=en>
</video>

However, if the same vtt file is referenced from an m3u8 playlist, the inline styles seem to be ignored.

Stream used: https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_16x9/bipbop_16x9_variant.m3u8
[I have downloaded the vtt files locally, and added the inline styles]

Operating System: macOS Catalina (10.15.5)
Browser: Safari (13.1.1)

The .vtt file is attached.

Snippet from the .vtt file:
WEBVTT
X-TIMESTAMP-MAP=MPEGTS:900000,LOCAL:00:00:00.000

STYLE
::cue {
 font-family: Arial;
 font-size: 30px;
 font-style: normal;
 font-weight: normal;
 background-color: yellow;
 color: red;
 outline-color: black 2px;
 text-align: center;
}

00:00:00.000 --> 00:00:03.000
<c>English subtitle 1 -Unforced- (00:00:01.000)</c>

00:00:03.000 --> 00:00:05.000
<i>English subtitle 2 -Unforced- (00:00:03.000)</i>
<i>Italics</i>

Regards,
Shiva
Comment 1 Radar WebKit Bug Importer 2020-09-16 19:33:18 PDT 
<rdar://problem/69033437>
Comment 2 shivaksk1 2020-09-16 20:40:14 PDT 
The rendered DOM (Shadow) are as follows:
(As you can notice, the <style> tag is added when WebVTT is included as a <track> element, but missing when WebVTT is embedded in the playlist).

When WebVTT is included as a <track> element:
<div class="media-controls-container">
    <div pseudo="-webkit-media-text-track-display" style="position: absolute; unicode-bidi: plaintext; direction: ltr; writing-mode: horizontal-tb; top: 0%; left: 1.3888888888888928%; width: 97.22222222222221%; height: auto; min-width: min-content; max-width: 100%; text-align: center; font-size: 14px; overflow: visible;">
        <div pseudo="-webkit-media-text-track-display-backdrop">
            <span pseudo="cue" style="overflow: visible;">
                <c>New Subtitle. English subtitle 1 -Unforced- (00:00:01.000)</c>
            </span>
        </div>
        <style></style>
        <style>::cue { font-family: Arial; font-size: 30px; font-style: normal; font-weight: normal; background-color: green; color: red; text-align: center;  }</style>
    </div>
</div>

When WebVTT is embedded in the playlist:
<div class="media-controls-container">
    <div pseudo="-webkit-media-text-track-display" style="position: absolute; unicode-bidi: plaintext; direction: ltr; writing-mode: horizontal-tb; top: 0%; left: 1.3888888888888928%; width: 97.22222222222221%; height: auto; min-width: min-content; max-width: 100%; text-align: center; font-size: 14px; overflow: visible;">
        <div pseudo="-webkit-media-text-track-display-backdrop">
            <span pseudo="cue" style="overflow: visible;">
                <c>New Subtitle. English subtitle 1 -Unforced- (00:00:01.000)</c>
            </span>
        </div>
        <style></style>
    </div>
</div>