TimedText/WebVTT Implementation Report

From W3C Wiki

Introduction

The following is the Implementation Report for the WebVTT specification and WebVTT test suite.

The tests in the spreadsheet only reference the features that are in the current CR of the specification excluding those marked at-risk. None of the test failures below are a problem for the question "is this implementable?".

Tests

API and Parsing Tests

Text results can also be found on wpt.fyi, which runs the Web Platform Tests automatically on a regular basis.

The API and Parsing tests deal with the VTTCue and VTTRegion classes and being able to parse vtt files properly. These test files are HTML files with the WPT testhardness embedded and assertions made.

VTTCue

region

Safari is failing due to its non-standard region implementation. It can pass if the standard API is shimmed or if the test is modified to use Safari's implementation. Firefox is failing due to throwing an error when `cue.region` is set to a value other than a `VTTRegion` or `null`. An error is not supposed to be thrown.

Test Results
Test Name Chrome 74 Firefox 67 Safari 77 Preview iOS 12.0.1 Video.js + vtt.js Total passes
VTTCue Align P P P 3
script-created cue P P F F 2
parsed cue P P P F 3
VTTCue Constructor Exceptions
non-finite start time P P P P 4
non-finite end time P P P P 4
valueOf P P P P 4
Constructor
initial value F P F F P 2
bad start time P P P P 4
bad end time P P P P 4
text formatting P P P P 4
getCuesAsHTML
creating the cue P P P P 4
<c> P P P P 4
<c.a.b> P P P P 4
<i> P P P P 4
<b> P P P P 4
<u> P P P P 4
<ruby> P P P P 4
<rt> P P P P 4
<v> P P P P 4
<v a b> P P P P 4
<1:00:00.500> P P P F 3
x\0 F P F F P 2
line
script created cue P P F F 2
parsed cue P P F F 2
lineAlign F P F F P 2
position P F P F 2
positionAlign F P F F P 2
region F F F F 0
size P P F F 2
snapToLines
script created cue P P P P 4
parsed cue P P F F 2
text
script created cue P P P P 4
parsed cue P P P P 4
vertical cue
script created cue P P F F 2
parsed cue P P P P 4

VTTRegion

lines

Browsers implemented this field as an int but it is specified as a long.

Test Results
Test Name Chrome 74 Firefox 67 Safari 77 Preview iOS 12.0.1 Video.js + vtt.js Total passes
constructor
initial values F P P F P 3
mutations F P F F P 2
id F P P P 3
lines F F F F 0
non-visible cue with region F P P P/requires playback 2
region anchor X F P P P 3
region anchor Y F P P P 3
scroll F P P F 2
viewport anchor X F P P P 3
viewport anchor Y F P P P 3
width F P P P 3

Historical Tests

Test Results
Test Name Chrome 74 Firefox 67 Safari 77 Preview iOS 12.0.1 Total passes
VTTCue regionId member must be nuked P P F F 2
texttrack regions member must be nucked P P F F 2
texttrack addRegion member must be nuked P P F F 2
texttrack removeRegion member must be nuked P P F F 2
VTTRegion track member must be nuked P P F F 2
VTTRegionList interface must be nuked P P P P 4

Parsing Tests

cue text parsing
entities

This refers to HTML character entities, a standard set of HTML character entities is available in all browsers and an older version of the spec only included a couple of allowed characters. Currently, all HTML character entities are allowed. There is an [oustanding bug against Safari](https://bugs.webkit.org/show_bug.cgi?id=176225) for implementing this and there is a POC for vtt.js.

File Parsing
region edge cases

This is failing in Firefox because it ends up stopping parsing the regions at the first edge case so only the first region is available. Safari fails due to its non-standard region implementation. It can pass if accounting for it.

region ids

This is failing in Safari due to its non-standard region implementation. It can pass if the standard API is shimmed or if the test is modified to use Safari's implementation.

region lines

Both Safari and Firefox are failing here due to implementation dependent versions of "interpret value as integer". Safari is clamping the value to the max integer value while Firefox returns a 0. Also, Firefox's very strict parser and Safari's non-standard region implementation is making this test fail.

settings line

Chrome and Safari fail because it is parsing `.5` and `5.`, which are explicitly disallowed, as `0.5` and `5.0`. Chrome and Safari do not support line align. Safari defaults to the value `-1` rather than `auto`. Safari also sets a really small value to zero rather than Number.MIN_VALUE.

settings position

Chrome and Safari don't support position align, excluding that piece from the test makes it pass.

Test Results
Cue Text Parsing
Test Name Chrome 74 Firefox 67 Safari 77 Preview iOS 12.0.1 Total passes
entities P 14/26 14/26 13/25 1
tags P P P P 4
text P P P P 4
timestamps P P 10/11 9/10 2
tree building P 8/10 P P 3
File Parsing
Test Name Chrome 74 Firefox 67 Safari 77 Preview iOS 12.0.1 Video.js + vtt.js Total passes
arrows P P P P 4
header garbage P P P P 4
header regions P P F F 2
header space P P P P 4
header tab P P P P 4
header timings P P P P 4
ids P P P P 4
newlines P P P P 4
nulls P P P F 3
regions lines edge cases F F F F 0
regions ids F P F F 1
regions lines F F F F 0
regions old P P F F 2
regions regionanchor P P F F 2
regions scroll P P F F 2
regions viewportanchor P P F F 2
settings align P P P F 3
settings line F F F F P 1
settings multiple P P P F 3
settings position F P F F 1
settings region P P F F 2
settings size P P F F 2
settings vertical size P P P P 4
signature bom P P P P 4
signature no new line P P P P 4
signature space no newline P P P P 4
signature space P P P P 4
signature tab no newline P P P P 4
signature tab P P P P 4
signatue timing P P P P 4
stylesheets P P P P 4
timings 60 P P P P 4
timings eof P P P P 4
timings garbage P P P P 4
timings negative P P P P 4
timings omitted hours P P P P 4
timings too long P P P P 4
timings too short P P P P 4
whitespace chars P P P P 4

Rendering Tests

The Rendering tests deal with the look of the captions. The tests are made up of two files. A reference file, with a `-ref.html` suffix, and a test file.

top level tests

align center wrapped

This is failing because `text-wrap: balance;` isn't available in any browser.

bidi tests

cue function, class object

Text combine upright

These are all implementation issues. The text-combine-upright CSS property hasn't been whitelisted by them.

Test Results

Top level
Test Name Chrome 72.0.3626.96 STP Release 73 STP Release 75 Firefox 65 VLC 3.0.6 vtt.js Edge 25/EdgeHTML 13 Number of passes
2_tracks.html P P P 3
3_tracks.html P P P 3
align_center.html P P P 3
align_center_position_50.html P P P 3
align_center_position_gt_50.html P P P P 3
align_center_position_lt_50.html P P P P 3
align_center_position_lt_50_size_gt_maximum_size.html P P P P 3
align_center_wrapped.html F ? F F P F 1
align_end.html P ? P P 3
align_end_wrapped.html P P P P 3
align_start.html P P P P 3
align_start_wrapped.html P P P P 3
audio_has_no_subtitles.html P P P P 4
basic.html P P P P 4
cue_too_long.html P F F P P 3
decode_escaped_entities.html P P P P 4
disable_controls_reposition.html P P P P 4
dom_override_cue_align_position_line_size.html P P P P 4
dom_override_cue_align_position_line_size_while_paused.html P P P P 4
dom_override_cue_line.html P P P P 4
dom_override_cue_text.html P P P P 4
dom_override_cue_text_while_paused.html P P P P 4
dom_override_remove_cue_while_paused.html P P F 2
enable_controls_reposition.html P P P P 4
line_-2_wrapped_cue_grow_upwards.html P P P P 4
line_0_is_top.html P P P P 4
line_1_wrapped_cue_grow_downwards.html P P P P 4
line_50_percent.html P P P P 4
line_integer_and_percent_mixed_overlap.html P P P P 3
line_integer_and_percent_mixed_overlap_move_up.html P P P F 2
line_percent_and_integer_mixed_overlap.html P P P P 3
media_height400_with_controls.html P P P P 4
media_with_controls.html P P P P 4
navigate_cue_position.html P P P 3
one_line_cue_plus_wrapped_cue.html P P P P 3
repaint.html P P P P 4
size_50.html P P P P 4
too_many_cues.html P P P F 2
bidi
Test Name Chrome 72.0.3626.96 STP Release 73 STP Release 75 Firefox 65 VLC 3.0.6 vtt.js Edge 25/EdgeHTML 13 Number of passes
bidi_ruby.html F F F P F P P 3
u002E_LF_u05D0.html P F F F P P P 4
u002E_u2028_u05D0.html F F F F F P P 2
u002E_u2029_u05D0.html F F F F F P P 2
u0041_first.html P P P P 4
u05D0_first.html P P P P 4
u0628_first.html P P P P 4
u06E9_no_strong_dir.html P P P P 4
vertical_lr.html F P F P 2
vertical_rl.html F P F P 2
evil
Test Name Chrome 72.0.3626.96 STP Release 73 STP Release 75 Firefox 65 VLC 3.0.6 vtt.js Edge 25/EdgeHTML 13 Number of passes
media_404_omit_subtitles.html P P P P 4
media_height_19.html P P P P 4
single_quote.html P P P P 4
size_90.html P P P P 4
size_99.html P P P P 4
regions
Test Name Chrome 72.0.3626.96 STP Release 73 STP Release 75 Firefox 65 VLC 3.0.6 vtt.js Edge 25/EdgeHTML 13 Number of passes
basic.html P F F P P P 4
regionanchor_x_50_percent.html F F F P P F 2
regionanchor_y_50_percent.html F
scroll_up.html F F F P P F 2
single_line_top_left.html F F P P F 2
viewportanchor_x_50_percent.html F F P P F 2
viewportanchor_y_50_percent.html F F P P F 2
width_50_percent.html F P P P F 3
selectors
cue
Test Name Chrome 72.0.3626.96 STP Release 73 STP Release 75 Firefox 65 VLC 3.0.6 vtt.js Edge 25/EdgeHTML 13 Number of passes
background_properties.html P P P 3
background_shorthand.html P P P 3
background_shorthand_css_relative_url.html P P P 3
color_hex.html P P P 3
color_hsla.html P P P 3
color_rgba.html P P P 3
cue_selector_single_colon.html P P P 3
font_properties.html P P P 3
font_shorthand.html P P P 3
inherit_values_from_media_element.html P F P 2
outline_properties.html F P P 2
outline_shorthand.html F P P 2
text-decoration_line-through.html P P P 3
text-decoration_overline.html P P P 3
text-decoration_overline_underline_line-through.html P P P 3
text-decoration_underline.html P P P 3
text-shadow.html P P P 3
vertical_ruby-position.html F P F P 2
vertical_text-combine-upright.html F P F P 2
white-space_normal_wrapped.html P P P 3
white-space_nowrap_wrapped.html P P P 3
white-space_pre-line_wrapped.html P P P 3
white-space_pre-wrap_wrapped.html P F P 2
white-space_pre.html P F P 2
white-space_pre_wrapped.html P P P 3
cue_function bold_object
Test Name Chrome 72.0.3626.96 STP Release 73 STP Release 75 Firefox 65 VLC 3.0.6 vtt.js Edge 25/EdgeHTML 13 Number of passes
bold_background_properties.html P P F 2
bold_background_shorthand.html P P F 2
bold_color.html P P F 2
bold_font_properties.html P P F 2
bold_font_shorthand.html P P F 2
bold_namespace.html P P P 3
bold_outline_properties.html P P F 2
bold_outline_shorthand.html P P F 2
bold_text-decoration_line-through.html P P F 2
bold_text-shadow.html P P F 2
bold_timestamp_future.html P P F 2
bold_timestamp_past.html P P F 2
bold_transition_with_timestamp.html P P F 2
bold_white-space_normal_wrapped.html P P P 3
bold_white-space_nowrap.html P P F 2
bold_white-space_pre-line_wrapped.html P P P 3
bold_white-space_pre-wrap_wrapped.html P P P 3
bold_white-space_pre_wrapped.html P P F 2
bold_with_class.html P P F 2
bold_with_class_object_specific_selector.html P P F 2
cue_function class_object
Test Name Chrome 72.0.3626.96 STP Release 73 STP Release 75 Firefox 65 VLC 3.0.6 vtt.js Edge 25/EdgeHTML 13 Number of passes
class_background_properties.html P P F 2
class_background_shorthand.html P P F 2
class_color.html P P F 2
class_font_properties.html P P F 2
class_font_shorthand.html P P F 2
class_namespace.html P P P 3
class_outline_properties.html P P F 2
class_outline_shorthand.html P P F 2
class_text-decoration_line-through.html P P F 2
class_text-shadow.html P P F 2
class_timestamp_future.html P P F 2
class_timestamp_past.html P P F 2
class_transition_with_timestamp.html P P F 2
class_vertical_text-combine-upright.html F F F P 1
class_white-space_normal_wrapped.html P P P 3
class_white-space_nowrap.html P P F 2
class_white-space_pre-line_wrapped.html P P P 3
class_white-space_pre-wrap_wrapped.html P P P 3
class_white-space_pre_wrapped.html P P F 2
class_with_class.html P P F 2
class_with_class_object_specific_selector.html P P F 2
cue_function italic_object
Test Name Chrome 72.0.3626.96 STP Release 73 STP Release 75 Firefox 65 VLC 3.0.6 vtt.js Edge 25/EdgeHTML 13 Number of passes
italic_background_properties.html P P F 2
italic_background_shorthand.html P P F 2
italic_color.html P P F 2
italic_font_properties.html P P F 2
italic_font_shorthand.html P P F 2
italic_namespace.html P P P 3
italic_outline_properties.html P P F 2
italic_outline_shorthand.html P P F 2
italic_text-decoration_line-through.html P P F 2
italic_text-shadow.html P P F 2
italic_timestamp_future.html P P F 2
italic_timestamp_past.html P P F 2
italic_transition_with_timestamp.html P P F 2
italic_white-space_normal_wrapped.html P P P 3
italic_white-space_nowrap.html P P F 2
italic_white-space_pre-line_wrapped.html P P P 3
italic_white-space_pre-wrap_wrapped.html P P P 3
italic_white-space_pre_wrapped.html P P F 2
italic_with_class.html P P F 2
italic_with_class_object_specific_selector.html P P F 2
cue_function underline_object
Test Name Chrome 72.0.3626.96 STP Release 73 STP Release 75 Firefox 65 VLC 3.0.6 vtt.js Edge 25/EdgeHTML 13 Number of passes
underline_background_properties.html P P F 2
underline_background_shorthand.html P P F 2
underline_color.html P P F 2
underline_font_properties.html P P F 2
underline_font_shorthand.html P P F 2
underline_namespace.html P P P 3
underline_outline_properties.html P P F 2
underline_outline_shorthand.html P P F 2
underline_text-decoration_line-through.html P P F 2
underline_text-shadow.html P P F 2
underline_timestamp_future.html P P F 2
underline_timestamp_past.html P P F 2
underline_transition_with_timestamp.html P P F 2
underline_white-space_normal_wrapped.html P P P 3
underline_white-space_nowrap.html P P F 2
underline_white-space_pre-line_wrapped.html P P P 3
underline_white-space_pre-wrap_wrapped.html P P P 3
underline_white-space_pre_wrapped.html P P F 2
underline_with_class.html P P F 2
underline_with_class_object_specific_selector.html P P F 2
cue_function voice_object
Test Name Chrome 72.0.3626.96 STP Release 73 STP Release 75 Firefox 65 VLC 3.0.6 vtt.js Edge 25/EdgeHTML 13 Number of passes
voice_background_properties.html P P F 2
voice_background_shorthand.html P P F 2
voice_color.html P P F 2
voice_font_properties.html P P F 2
voice_font_shorthand.html P P F 2
voice_namespace.html P P P 3
voice_outline_properties.html P P F 2
voice_outline_shorthand.html P P F 2
voice_text-decoration_line-through.html P P F 2
voice_text-shadow.html P P F 2
voice_timestamp_future.html P P F 2
voice_timestamp_past.html P P F 2
voice_transition_with_timestamp.html P P F 2
voice_voice_attribute.html P P F 2
voice_white-space_normal_wrapped.html P P P 3
voice_white-space_nowrap.html P P F 2
voice_white-space_pre-line_wrapped.html P P P 3
voice_white-space_pre-wrap_wrapped.html P P P 3
voice_white-space_pre_wrapped.html P P F 2
voice_with_class.html P P F 2
voice_with_class_object_specific_selector.html P P F 2
default_styles
Test Name Chrome 72.0.3626.96 STP Release 73 STP Release 75 Firefox 65 VLC 3.0.6 vtt.js Edge 25/EdgeHTML 13 Number of passes
bold_object_default_font-style.html P P P 3
inherit_as_default_value_inherits_values_from_media_element.html P P P 3
italic_object_default_font-style.html P P P 3
underline_object_default_font-style.html P P P 3

References

See also WebVTT-based_efforts_and_specifications.

Retrieved from "https://www.w3.org/wiki/index.php?title=TimedText/WebVTT_Implementation_Report&oldid=109382"