Bug 216632 – AX: Embedded CSS in WebVTT is not considered if vtt file is referenced from playlist

• Status: NEW
• Component: Media

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

[Radar WebKit Bug Importer]

<rdar://problem/69033437>

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>