summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/webvtt
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/webvtt')
-rw-r--r--testing/web-platform/tests/webvtt/META.yml4
-rw-r--r--testing/web-platform/tests/webvtt/README.md14
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTCue/align.html67
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTCue/categories.json3
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTCue/common.js8
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTCue/constructor-exceptions.html25
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTCue/constructor.html56
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTCue/getCueAsHTML.html93
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTCue/line.html65
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTCue/lineAlign.html39
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTCue/position.html32
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTCue/positionAlign.html23
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTCue/region.html38
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTCue/size.html26
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTCue/snapToLines.html100
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTCue/text.html41
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTCue/vertical.html57
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTRegion/constructor.html67
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTRegion/id.html21
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTRegion/lines.html36
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTRegion/non-visible-cue-with-region.html26
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTRegion/regionAnchorX.html26
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTRegion/regionAnchorY.html26
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTRegion/scroll.html27
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTRegion/viewportAnchorX.html26
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTRegion/viewportAnchorY.html26
-rw-r--r--testing/web-platform/tests/webvtt/api/VTTRegion/width.html26
-rw-r--r--testing/web-platform/tests/webvtt/api/categories.json5
-rw-r--r--testing/web-platform/tests/webvtt/api/historical.html35
-rw-r--r--testing/web-platform/tests/webvtt/api/idlharness.window.js15
-rw-r--r--testing/web-platform/tests/webvtt/categories.json12
-rw-r--r--testing/web-platform/tests/webvtt/parsing/README.md9
-rw-r--r--testing/web-platform/tests/webvtt/parsing/categories.json8
-rw-r--r--testing/web-platform/tests/webvtt/parsing/cue-text-parsing/buildtests.py71
-rw-r--r--testing/web-platform/tests/webvtt/parsing/cue-text-parsing/common.js196
-rw-r--r--testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/entities.dat150
-rw-r--r--testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/tags.dat214
-rw-r--r--testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/text.dat29
-rw-r--r--testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/timestamps.dat63
-rw-r--r--testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/tree-building.dat88
-rw-r--r--testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/entities.html39
-rw-r--r--testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/tags.html42
-rw-r--r--testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/text.html19
-rw-r--r--testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/timestamps.html24
-rw-r--r--testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/tree-building.html23
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/README.md52
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/categories.json6
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/signature-invalid.html49
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/arrows.test38
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/comment-in-cue-text.test28
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/empty.vtt0
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-garbage.test15
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-space.test14
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-tab.test14
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-timings.test13
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/ids.test32
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/newlines.test36
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/nulls.test232
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-id.test52
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-lines.test129
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-old.test18
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-regionanchor.test182
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-scroll.test67
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-viewportanchor.test182
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-align.test64
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-line.test223
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-multiple.test34
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-position.test102
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-region.test71
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-size.test78
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-vertical.test47
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-bom.test7
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-formfeed.vtt1
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-invalid-whitespace.vtt1
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-invalid.vtt1
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-lowercase.vtt1
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-missing-whitespace.vtt1
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-missing.vtt2
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-no-newline.test7
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-null.vttbin0 -> 8 bytes
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-partial.vtt1
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-space-no-newline.test7
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-space.test7
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-tab-no-newline.test7
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-tab.test7
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-timings.test8
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-two-boms.vtt1
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-websrt.vtt1
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/stylesheets.test36
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-60.test33
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-eof.test9
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-garbage.test197
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-negative.test33
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-omitted-hours.test22
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-too-long.test60
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-too-short.test111
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/support/whitespace-chars.test32
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/arrows.html44
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/categories.json9
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/comment-in-cue-text.html47
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-garbage.html43
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-regions.html50
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-space.html43
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-tab.html43
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-timings.html43
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/ids.html44
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/newlines.html51
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/nulls.html60
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-edge-case.html55
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-id.html51
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-lines.html64
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-old.html42
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-regionanchor.html66
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-scroll.html54
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-viewportanchor.html66
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-align.html57
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-line.html102
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-multiple.html58
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-position.html64
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-region.html64
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-size.html58
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-vertical.html55
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-bom.html39
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-no-newline.html39
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-space-no-newline.html39
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-space.html39
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-tab-no-newline.html39
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-tab.html39
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-timings.html39
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/stylesheets.html40
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/arrows.vtt27
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/comment-in-cue-text.vtt14
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-garbage.vtt5
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-regions.vtt52
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-space.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-tab.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-timings.vtt3
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/ids.vtt21
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/newlines.vtt12
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/nulls.vttbin0 -> 2792 bytes
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-edge-case.vtt44
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-id.vtt34
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-lines.vtt98
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-old.vtt9
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-regionanchor.vtt149
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-scroll.vtt46
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-viewportanchor.vtt149
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-align.vtt40
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-line.vtt154
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-multiple.vtt9
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-position.vtt71
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-region.vtt40
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-size.vtt53
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-vertical.vtt25
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-bom.vtt1
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-no-newline.vtt1
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-space-no-newline.vtt1
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-space.vtt1
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-tab-no-newline.vtt1
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-tab.vtt1
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-timings.vtt2
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/stylesheets.vtt29
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-60.vtt19
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-eof.vtt3
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-garbage.vtt190
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-negative.vtt13
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-omitted-hours.vtt10
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-too-long.vtt46
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-too-short.vtt97
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/whitespace-chars.vtt17
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-60.html47
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-eof.html39
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-garbage.html40
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-negative.html53
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-omitted-hours.html45
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-too-long.html47
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-too-short.html47
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tests/whitespace-chars.html48
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tools/build.py120
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tools/parser.py710
-rw-r--r--testing/web-platform/tests/webvtt/parsing/file-parsing/tools/spec_report.py99
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up-ref.html32
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down-ref.html36
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up-ref.html36
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks-ref.html39
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks.html24
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks-ref.html40
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size-ref.html33
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50-ref.html31
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size-ref.html33
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles-ref.html15
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/background.pngbin0 -> 220 bytes
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/basic-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/basic.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/bidi_ruby-ref.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/bidi_ruby.html18
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/start_alignment-ref.html41
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/start_alignment.html19
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_LF_u05D0-ref.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_LF_u05D0.html18
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2028_u05D0-ref.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2028_u05D0.html18
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2029_u05D0-ref.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2029_u05D0.html18
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0041_first-ref.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0041_first.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u05D0_first-ref.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u05D0_first.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0628_first-ref.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0628_first.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u06E9_no_strong_dir-ref.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u06E9_no_strong_dir.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_lr-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_lr.html18
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_rl-ref.html31
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_rl.html18
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long-ref.html15
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition-ref.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition.html32
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size.html49
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size_while_paused-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size_while_paused.html40
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line.html45
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text.html45
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text_while_paused-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text_while_paused.html36
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused-ref.html13
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused.html36
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority-ref.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority.html18
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority_layer.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked-ref.html10
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked.html12
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format-ref.html19
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format.html12
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries-ref.html18
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries.html19
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized-ref.html18
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized.html20
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks-ref.html19
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks.html17
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors-ref.html24
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors.html13
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls-ref.html24
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls.html12
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition-ref.html35
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition.html32
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely-ref.html113
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely.html50
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely_all_cues_have_same_timestamp-ref.html113
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely_all_cues_have_same_timestamp.html49
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles-ref.html14
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles.html25
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19-ref.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/non-standard-pseudo-elements-ref.html16
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/non-standard-pseudo-elements.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/single_quote-ref.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/single_quote.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/9_cues_overlapping_completely.vtt37
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/9_cues_overlapping_completely_all_cues_have_same_timestamp.vtt37
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/single_quote.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/size_90.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/size_99.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/test.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_-2_wrapped_cue_grow_upwards-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_-2_wrapped_cue_grow_upwards.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_1_wrapped_cue_grow_downwards-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_1_wrapped_cue_grow_downwards.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap-ref.html34
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap_move_up-ref.html34
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap_move_up.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap-ref.html34
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap_move_up-ref.html34
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap_move_up.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media/background.gifbin0 -> 3266 bytes
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_height400_with_controls-ref.html34
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_height400_with_controls.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_with_controls-ref.html34
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_with_controls.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-1.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-ref-1.html35
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-ref.html4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/one_line_cue_plus_wrapped_cue-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/one_line_cue_plus_wrapped_cue.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/basic-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/basic.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_x_50_percent-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_x_50_percent.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_y_50_percent-ref.html6
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_y_50_percent.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/scroll_up-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/scroll_up.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/single_line_top_left-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/single_line_top_left.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/basic.vtt7
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/regionanchor_x_50_percent.vtt8
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/regionanchor_y_50_percent.vtt8
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/scroll_up.vtt15
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/single_line_top_left.vtt10
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/viewportanchor_x_50_percent.vtt8
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/viewportanchor_y_50_percent.vtt8
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/width_50_percent.vtt8
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_x_50_percent-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_x_50_percent.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_y_50_percent-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_y_50_percent.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/width_50_percent-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/width_50_percent.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/repaint-ref.html25
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/repaint.html51
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/font_properties-ref.html39
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/font_properties.html31
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/support/test.vtt13
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/font_properties-ref.html39
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/font_properties.html31
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/support/test.vtt17
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_properties-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_properties.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand.html24
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand_css_relative_url-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand_css_relative_url.html24
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hex-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hex.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hsla-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hsla.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_rgba-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_rgba.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/cue_selector_single_colon-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/cue_selector_single_colon.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties-ref.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand-ref.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/inherit_values_from_media_element-ref.html47
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/inherit_values_from_media_element.html34
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_properties-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_properties.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_shorthand-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_shorthand.html24
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_line-through-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_line-through.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline_underline_line-through-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline_underline_line-through.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_underline-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_underline.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-shadow-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-shadow.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_ruby-position-ref.html35
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_ruby-position.html25
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_text-combine-upright-ref.html35
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_text-combine-upright.html25
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_normal_wrapped-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_normal_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_nowrap_wrapped-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_nowrap_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-line_wrapped-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-line_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-wrap_wrapped-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-wrap_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre_wrapped-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_box-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_box.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_properties-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_properties.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand.html24
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand_css_relative_url-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand_css_relative_url.html24
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_animation_with_timestamp-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_animation_with_timestamp.html38
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_properties-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_properties.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_shorthand-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_shorthand.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_color-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_color.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_properties-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_properties.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_shorthand-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_shorthand.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_namespace-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_namespace.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_properties-ref.html33
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_properties.html24
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_shorthand-ref.html33
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_shorthand.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-decoration_line-through-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-decoration_line-through.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-shadow-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-shadow.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_future-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_future.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_past-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_past.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_transition_with_timestamp-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_transition_with_timestamp.html25
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_normal_wrapped-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_normal_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_nowrap-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_nowrap.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-line_wrapped-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-line_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-wrap_wrapped-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-wrap_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre_wrapped-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class_object_specific_selector-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class_object_specific_selector.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_animation_with_timestamp-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_animation_with_timestamp.html38
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_properties-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_properties.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_shorthand-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_shorthand.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_color-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_color.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_properties-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_properties.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_shorthand-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_shorthand.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_namespace-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_namespace.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_properties-ref.html33
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_properties.html24
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_shorthand-ref.html33
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_shorthand.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-decoration_line-through-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-decoration_line-through.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-shadow-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-shadow.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_future-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_future.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_past-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_past.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_transition_with_timestamp-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_transition_with_timestamp.html25
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_vertical_text-combine-upright-ref.html38
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_vertical_text-combine-upright.html25
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_normal_wrapped-ref.html37
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_normal_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_nowrap-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_nowrap.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-line_wrapped-ref.html37
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-line_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-wrap_wrapped-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-wrap_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre_wrapped-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class_object_specific_selector-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class_object_specific_selector.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hex-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hex.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hsla-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hsla.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_rgba-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_rgba.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/cue_func_selector_single_colon-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/cue_func_selector_single_colon.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_properties-ref.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_properties.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_shorthand-ref.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_shorthand.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/id_color-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/id_color.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/inherit_values_from_media_element-ref.html47
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/inherit_values_from_media_element.html34
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_animation_with_timestamp-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_animation_with_timestamp.html38
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_properties-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_properties.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_shorthand-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_shorthand.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_color-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_color.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_properties-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_properties.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_shorthand-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_shorthand.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_namespace-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_namespace.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_properties-ref.html33
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_properties.html24
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_shorthand-ref.html33
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_shorthand.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-decoration_line-through-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-decoration_line-through.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-shadow-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-shadow.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_future-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_future.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_past-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_past.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_transition_with_timestamp-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_transition_with_timestamp.html25
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_normal_wrapped-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_normal_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_nowrap-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_nowrap.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-line_wrapped-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-line_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-wrap_wrapped-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-wrap_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre_wrapped-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class_object_specific_selector-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class_object_specific_selector.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_allowed_properties-ref.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_allowed_properties.html47
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_root_selector-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_root_selector.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_properties-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_properties.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_shorthand-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_shorthand.html24
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_namespace-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_namespace.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_selector-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_selector.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_line-through-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_line-through.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline_underline_line-through-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline_underline_line-through.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_underline-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_underline.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-shadow-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-shadow.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/type_selector_root-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/type_selector_root.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_animation_with_timestamp-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_animation_with_timestamp.html38
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_properties-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_properties.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_shorthand-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_shorthand.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_color-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_color.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_properties-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_properties.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_shorthand-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_shorthand.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_namespace-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_namespace.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_properties-ref.html33
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_properties.html24
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_shorthand-ref.html33
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_shorthand.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-decoration_line-through-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-decoration_line-through.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-shadow-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-shadow.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_future-ref.html31
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_future.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_past-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_past.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_transition_with_timestamp-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_transition_with_timestamp.html25
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_normal_wrapped-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_normal_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_nowrap-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_nowrap.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-line_wrapped-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-line_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-wrap_wrapped-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-wrap_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre_wrapped-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class_object_specific_selector-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class_object_specific_selector.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp.html38
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties.html26
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace-ref.html30
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties-ref.html33
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties.html24
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand-ref.html33
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp.html25
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector.html22
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_normal_wrapped-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_normal_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_nowrap_wrapped-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_nowrap_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-line_wrapped-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-line_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-ref.html27
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-wrap_wrapped-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-wrap_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre_wrapped-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre_wrapped.html21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/bold_object_default_font-style-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/bold_object_default_font-style.html18
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/inherit_as_default_value_inherits_values_from_media_element-ref.html41
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/inherit_as_default_value_inherits_values_from_media_element.html25
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/italic_object_default_font-style-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/italic_object_default_font-style.html18
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/underline_object_default_font-style-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/underline_object_default_font-style.html18
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/size_50-ref.html28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/size_50.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/snap-to-line-ref.html29
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/snap-to-line.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_completely_move_up.vtt7
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_partially_move_down.vtt7
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_partially_move_up.vtt7
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_long.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_50.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_gt_50.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_gt_50_size_gt_maximum_size.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_lt_50.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_lt_50_size_gt_maximum_size.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_end.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_end_long.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_start.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_start_long.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_ruby.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_text-combine-upright.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_lr.vtt5
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_rl-oneline.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_rl.vtt5
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_long.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_with_2_timestamps.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_with_timestamp.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_long.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_text-combine-upright.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_with_2_timestamps.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_with_timestamp.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/cue_with_id.vtt5
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/decode_escaped_entities.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority.vtt25
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority_layer.vtt25
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_imports_blocked.vtt14
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_invalid_format.vtt79
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe-ref.html18
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe.html15
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries.vtt34
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe-ref.html19
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe.html15
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks1.vtt12
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks2.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_selectors.vtt54
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_urls.vtt21
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_without_style.vtt7
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo_c_bar.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo_space_space_bar_LF_baz.vtt5
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/imported_style.css3
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_long.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_with_2_timestamps.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_with_timestamp.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_-2_long.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_0.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_1_long.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_50_percent.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_integer_and_percent_overlap.vtt7
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_integer_and_percent_overlap_move_up.vtt7
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_percent_and_integer_overlap.vtt7
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_percent_and_integer_overlap_move_up.vtt7
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/one_line_cue_plus_wrapped_cue.vtt7
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/size_50.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/snap-to-line.vtt5
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/start_alignment.vtt5
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_bold.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_bold_with_class.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_class.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_class_with_class.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_italic.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_italic_with_class.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_long.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_two_voices.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_underline.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_underline_with_class.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_voice.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_voice_with_class.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues.vtt31
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues_wrapped.vtt28
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_LF_u05D0.vtt5
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_u2028_u05D0.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_u2029_u05D0.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u0041_first.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u05D0_first.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u0628_first.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u06E9_no_strong_dir.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_long.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_with_2_timestamps.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_with_timestamp.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/very_long_cue.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_long.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_with_2_timestamps.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_with_timestamp.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces_long.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces_long_size_20.vtt4
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues-ref.html38
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues.html23
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped-ref.html37
-rw-r--r--testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped.html23
-rw-r--r--testing/web-platform/tests/webvtt/tools/categorize_results.py137
792 files changed, 23196 insertions, 0 deletions
diff --git a/testing/web-platform/tests/webvtt/META.yml b/testing/web-platform/tests/webvtt/META.yml
new file mode 100644
index 0000000000..949f312d7a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/META.yml
@@ -0,0 +1,4 @@
+spec: https://w3c.github.io/webvtt/
+suggested_reviewers:
+ - silviapfeiffer
+ - BenjaminSchaaf
diff --git a/testing/web-platform/tests/webvtt/README.md b/testing/web-platform/tests/webvtt/README.md
new file mode 100644
index 0000000000..ce12691cae
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/README.md
@@ -0,0 +1,14 @@
+# WebVTT Tests
+
+## Categorization
+
+Dependencies:
+* Python 3
+
+Once you have run the tests with `/tools/runner/index.html`, press the "Download
+JSON results" button to download a file containing the results. You can then run
+the categorization tool to get a better overview of the test results:
+
+```bash
+$ python3 tools/categorize_results.py runner-results.json
+```
diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/align.html b/testing/web-platform/tests/webvtt/api/VTTCue/align.html
new file mode 100644
index 0000000000..e3a920ae94
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTCue/align.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<title>VTTCue.align</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-align">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src=common.js></script>
+<div id=log></div>
+<script>
+test(function(){
+ var video = document.createElement('video');
+ document.body.appendChild(video);
+
+ var cue = new VTTCue(0, 1, 'text');
+ assert_true('align' in cue, 'align is not supported');
+ assert_equals(cue.align, 'center');
+
+ var track = document.createElement('track');
+ var t = track.track;
+ t.addCue(cue);
+
+ assert_equals(cue.align, 'center');
+
+ video.appendChild(track);
+ assert_equals(cue.align, 'center');
+
+ t.mode = 'showing';
+ assert_equals(cue.align, 'center');
+
+ cue.align = 'start';
+ assert_equals(cue.align, 'start');
+
+ cue.align = 'end';
+ assert_equals(cue.align, 'end');
+
+ ['start\u0000', 'centre', 'middle'].forEach(function(invalid) {
+ cue.align = invalid;
+ assert_equals(cue.align, 'end');
+ });
+}, document.title+', script-created cue');
+
+var t_parsed = async_test(document.title+', parsed cue');
+t_parsed.step(function(){
+ var video = document.createElement('video');
+ document.body.appendChild(video);
+ var t = document.createElement('track');
+ t.onload = this.step_func(function(){
+ var c1 = t.track.cues[0];
+ var c2 = t.track.cues[1];
+ var c3 = t.track.cues[2];
+ var c4 = t.track.cues[3];
+ assert_equals(c1.align, 'center');
+ assert_equals(c2.align, 'start');
+ assert_equals(c3.align, 'center');
+ assert_equals(c4.align, 'end');
+ this.done();
+ });
+ t.onerror = this.step_func(function() {
+ assert_unreached('got error event');
+ });
+ t.src = make_vtt_track('WEBVTT\n\n00:00:00.000 --> 00:00:00.001\ntest\n\n'+
+ '00:00:00.000 --> 00:00:00.001 align:start\ntest\n\n'+
+ '00:00:00.000 --> 00:00:00.001 align:center\ntest\n\n'+
+ '00:00:00.000 --> 00:00:00.001 align:end\ntest', this);
+ t.track.mode = 'showing';
+ video.appendChild(t);
+});
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/categories.json b/testing/web-platform/tests/webvtt/api/VTTCue/categories.json
new file mode 100644
index 0000000000..eaa5ef17fc
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTCue/categories.json
@@ -0,0 +1,3 @@
+{
+ "region.html": "regions"
+}
diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/common.js b/testing/web-platform/tests/webvtt/api/VTTCue/common.js
new file mode 100644
index 0000000000..2c39352a84
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTCue/common.js
@@ -0,0 +1,8 @@
+function make_vtt_track(contents, test) {
+ var track_blob = new Blob([contents], { type: 'text/vtt' });
+ var track_url = URL.createObjectURL(track_blob);
+ test.add_cleanup(function() {
+ URL.revokeObjectURL(track_url);
+ });
+ return track_url;
+}
diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/constructor-exceptions.html b/testing/web-platform/tests/webvtt/api/VTTCue/constructor-exceptions.html
new file mode 100644
index 0000000000..06ad7f041c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTCue/constructor-exceptions.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<title>VTTCue constructor exceptions</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+test(function() {
+ assert_throws_js(TypeError, function() { new VTTCue(NaN, 0, 'foo'); });
+ assert_throws_js(TypeError, function() { new VTTCue(Infinity, 0, 'foo'); });
+ assert_throws_js(TypeError, function() { new VTTCue('tomorrow', 0, 'foo'); });
+}, document.title+', invalid start time');
+test(function() {
+ assert_throws_js(TypeError, function() { new VTTCue(0, NaN, 'foo'); });
+ assert_throws_js(TypeError, function() { new VTTCue(0, -Infinity, 'foo'); });
+ assert_throws_js(TypeError, function() { new VTTCue(0, 'tomorrow', 'foo'); });
+}, document.title+', invalid end time');
+test(function() {
+ var start = { valueOf: function() { return 42; } };
+ var end = { valueOf: function() { return 84; } };
+ var cue = new VTTCue(start, end, 'bar');
+ assert_equals(cue.startTime, 42);
+ assert_equals(cue.endTime, 84);
+ assert_equals(cue.text, 'bar');
+}, document.title+', valueOf');
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/constructor.html b/testing/web-platform/tests/webvtt/api/VTTCue/constructor.html
new file mode 100644
index 0000000000..2937f0cecb
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTCue/constructor.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<title>VTTCue()</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-vttcue">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div id=log></div>
+<script>
+test(function() {
+ var cue = new VTTCue(3, 12, 'foo bar');
+
+ assert_equals(cue.startTime, 3);
+ assert_equals(cue.endTime, 12);
+ assert_equals(cue.text, 'foo bar');
+ assert_equals(cue.id, '');
+ assert_equals(cue.region, null);
+ assert_equals(cue.pauseOnExit, false);
+ assert_equals(cue.snapToLines, true);
+ assert_equals(cue.line, 'auto');
+ assert_equals(cue.lineAlign, 'start');
+ assert_equals(cue.position, 'auto');
+ assert_equals(cue.positionAlign, 'auto');
+ assert_equals(cue.size, 100);
+ assert_equals(cue.align, 'center');
+}, document.title + ', initial values');
+
+test(function() {
+ var cue = new VTTCue(-1, 12, 'foo bar');
+
+ assert_equals(cue.startTime, -1);
+ assert_equals(cue.endTime, 12);
+}, document.title + ', bad start time');
+
+
+test(function() {
+ var cue = new VTTCue(2, -1, 'foo bar');
+
+ assert_equals(cue.startTime, 2);
+ assert_equals(cue.endTime, -1);
+}, document.title + ', bad end time');
+
+test(function() {
+ var cue = new VTTCue(2, +Infinity, 'foo bar');
+
+ assert_equals(cue.startTime, 2);
+ assert_equals(cue.endTime, +Infinity);
+}, document.title + ', unbounded end time');
+
+test(function() {
+ var cue = new VTTCue(3, 12, '<i>foo bar</i>');
+
+ var frag = cue.getCueAsHTML();
+ assert_equals(frag.childNodes.length, 1);
+ assert_equals(frag.childNodes[0].localName, 'i');
+ assert_equals(frag.childNodes[0].textContent, 'foo bar');
+}, document.title + ', text formatting');
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/getCueAsHTML.html b/testing/web-platform/tests/webvtt/api/VTTCue/getCueAsHTML.html
new file mode 100644
index 0000000000..2f07d3aa0a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTCue/getCueAsHTML.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<title>VTTCue.getCueAsHTML()</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-getcueashtml">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div id=log></div>
+<script>
+test(function(){
+ var video = document.createElement('video');
+ var t1 = video.addTextTrack('subtitles');
+ document.body.appendChild(video);
+ var c1 = new VTTCue(0, 1, '<c></c><c.a.b></c><i></i><b></b><u></u><ruby><rt></rt></ruby><v></v><v a b></v><1:00:00.500>x\0');
+ t1.addCue(c1);
+ window.frag = c1.getCueAsHTML();
+ assert_equals(frag.childNodes.length, 10, 'childNodes.length');
+ assert_true(frag instanceof DocumentFragment, 'getCueAsHTML() should return DocumentFragment');
+}, document.title+', creating the cue');
+test(function(){
+ assert_equals(frag.childNodes[0].namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI');
+ assert_equals(frag.childNodes[0].localName, 'span', 'localName');
+ assert_equals(frag.childNodes[0].attributes.length, 0, 'attributes');
+ assert_false(frag.childNodes[0].hasChildNodes(), 'hasChildNodes()');
+ assert_true(frag.childNodes[0] instanceof HTMLElement, 'instanceof');
+}, document.title+', <c>');
+test(function(){
+ assert_equals(frag.childNodes[1].namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI');
+ assert_equals(frag.childNodes[1].localName, 'span', 'localName');
+ assert_equals(frag.childNodes[1].attributes.length, 1, 'attributes');
+ assert_equals(frag.childNodes[1].getAttributeNS('', 'class'), 'a b', 'class attribute');
+ assert_false(frag.childNodes[1].hasChildNodes(), 'hasChildNodes()');
+ assert_true(frag.childNodes[1] instanceof HTMLElement, 'instanceof');
+}, document.title+', <c.a.b>');
+test(function(){
+ assert_equals(frag.childNodes[2].namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI');
+ assert_equals(frag.childNodes[2].localName, 'i', 'localName');
+ assert_equals(frag.childNodes[2].attributes.length, 0, 'attributes');
+ assert_false(frag.childNodes[2].hasChildNodes(), 'hasChildNodes()');
+ assert_true(frag.childNodes[2] instanceof HTMLElement, 'instanceof');
+}, document.title+', <i>');
+test(function(){
+ assert_equals(frag.childNodes[3].namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI');
+ assert_equals(frag.childNodes[3].localName, 'b', 'localName');
+ assert_equals(frag.childNodes[3].attributes.length, 0, 'attributes');
+ assert_false(frag.childNodes[3].hasChildNodes(), 'hasChildNodes()');
+ assert_true(frag.childNodes[3] instanceof HTMLElement, 'instanceof');
+}, document.title+', <b>');
+test(function(){
+ assert_equals(frag.childNodes[4].namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI');
+ assert_equals(frag.childNodes[4].localName, 'u', 'localName');
+ assert_equals(frag.childNodes[4].attributes.length, 0, 'attributes');
+ assert_false(frag.childNodes[4].hasChildNodes(), 'hasChildNodes()');
+ assert_true(frag.childNodes[4] instanceof HTMLElement, 'instanceof');
+}, document.title+', <u>');
+test(function(){
+ assert_equals(frag.childNodes[5].namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI');
+ assert_equals(frag.childNodes[5].localName, 'ruby', 'localName');
+ assert_equals(frag.childNodes[5].attributes.length, 0, 'attributes');
+ assert_true(frag.childNodes[5].hasChildNodes(), 'hasChildNodes()');
+ assert_true(frag.childNodes[5] instanceof HTMLElement, 'instanceof');
+}, document.title+', <ruby>');
+test(function(){
+ assert_equals(frag.childNodes[5].firstChild.namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI');
+ assert_equals(frag.childNodes[5].firstChild.localName, 'rt', 'localName');
+ assert_equals(frag.childNodes[5].firstChild.attributes.length, 0, 'attributes');
+ assert_false(frag.childNodes[5].firstChild.hasChildNodes(), 'hasChildNodes()');
+ assert_true(frag.childNodes[5].firstChild instanceof HTMLElement, 'instanceof');
+}, document.title+', <rt>');
+test(function(){
+ assert_equals(frag.childNodes[6].namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI');
+ assert_equals(frag.childNodes[6].localName, 'span', 'localName');
+ assert_equals(frag.childNodes[6].attributes.length, 1, 'attributes');
+ assert_equals(frag.childNodes[6].getAttributeNS('', 'title'), '', 'title attribute');
+ assert_false(frag.childNodes[6].hasChildNodes(), 'hasChildNodes()');
+ assert_true(frag.childNodes[6] instanceof HTMLElement, 'instanceof');
+}, document.title+', <v>');
+test(function(){
+ assert_equals(frag.childNodes[7].namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI');
+ assert_equals(frag.childNodes[7].localName, 'span', 'localName');
+ assert_equals(frag.childNodes[7].attributes.length, 1, 'attributes');
+ assert_equals(frag.childNodes[7].getAttributeNS('', 'title'), 'a b', 'title attribute');
+ assert_false(frag.childNodes[7].hasChildNodes(), 'hasChildNodes()');
+ assert_true(frag.childNodes[7] instanceof HTMLElement, 'instanceof');
+}, document.title+', <v a b>');
+test(function(){
+ assert_equals(frag.childNodes[8].target, 'timestamp', 'target');
+ assert_equals(frag.childNodes[8].data, '01:00:00.500', 'data');
+ assert_true(frag.childNodes[8] instanceof ProcessingInstruction, 'instanceof');
+}, document.title+', <1:00:00.500>');
+test(function(){
+ assert_equals(frag.childNodes[9].data, 'x\0', 'data');
+ assert_true(frag.childNodes[9] instanceof Text, 'instanceof');
+}, document.title+', x\\0');
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/line.html b/testing/web-platform/tests/webvtt/api/VTTCue/line.html
new file mode 100644
index 0000000000..dcf46db052
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTCue/line.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<title>VTTCue.line</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-line">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src=common.js></script>
+<div id=log></div>
+<script>
+test(function(){
+ var video = document.createElement('video');
+ document.body.appendChild(video);
+ var c1 = new VTTCue(0, 1, 'text1');
+ assert_true('line' in c1, 'line is not supported');
+ assert_equals(c1.line, "auto");
+ var track = document.createElement('track');
+ var t = track.track;
+ t.addCue(c1);
+ assert_equals(c1.line, "auto");
+ video.appendChild(track);
+ assert_equals(c1.line, "auto");
+ t.mode = 'showing';
+ assert_equals(c1.line, "auto");
+ var c2 = new VTTCue(0, 1, 'text2');
+ var track2 = document.createElement('track');
+ var t2 = track2.track;
+ t2.addCue(c2);
+ assert_equals(c2.line, "auto");
+ video.appendChild(track2);
+ t2.mode = 'showing';
+ assert_equals(c2.line, "auto");
+ assert_equals(c1.line, "auto");
+ c1.line = -5;
+ assert_equals(c1.line, -5);
+ assert_equals(c2.line, "auto");
+ c1.line = 0;
+ c1.snapToLines = false;
+ assert_equals(c1.line, 0);
+ assert_equals(c2.line, "auto");
+}, document.title+', script-created cue');
+
+var t_parsed = async_test(document.title+', parsed cue');
+t_parsed.step(function(){
+ var video = document.createElement('video');
+ document.body.appendChild(video);
+ var t = document.createElement('track');
+ t.onload = this.step_func(function(){
+ var c1 = t.track.cues[0];
+ var c2 = t.track.cues[1];
+ var c3 = t.track.cues[2];
+ assert_equals(c1.line, "auto");
+ assert_equals(c2.line, 0);
+ assert_equals(c3.line, 0);
+
+ this.done();
+ });
+ t.onerror = this.step_func(function() {
+ assert_unreached('got error event');
+ });
+ t.src = make_vtt_track('WEBVTT\n\n00:00:00.000 --> 00:00:00.001\ntest\n\n'+
+ '00:00:00.000 --> 00:00:00.001 line:0\ntest\n\n'+
+ '00:00:00.000 --> 00:00:00.001 line:0%\ntest', this);
+ t.track.mode = 'showing';
+ video.appendChild(t);
+});
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/lineAlign.html b/testing/web-platform/tests/webvtt/api/VTTCue/lineAlign.html
new file mode 100644
index 0000000000..7be0d540e1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTCue/lineAlign.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<title>VTTCue.lineAlign</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-linealign">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div id=log></div>
+<script>
+test(function(){
+ var video = document.createElement('video');
+ document.body.appendChild(video);
+
+ var cue = new VTTCue(0, 1, 'text');
+ assert_true('lineAlign' in cue, 'lineAlign is not supported');
+ assert_equals(cue.lineAlign, 'start');
+
+ var track = document.createElement('track');
+ var t = track.track;
+ t.addCue(cue);
+
+ assert_equals(cue.lineAlign, 'start');
+
+ video.appendChild(track);
+ assert_equals(cue.lineAlign, 'start');
+
+ t.mode = 'showing';
+ assert_equals(cue.lineAlign, 'start');
+
+ cue.lineAlign = 'center';
+ assert_equals(cue.lineAlign, 'center');
+
+ cue.lineAlign = 'end';
+ assert_equals(cue.lineAlign, 'end');
+
+ ['start\u0000', 'centre', 'middle'].forEach(function(invalid) {
+ cue.lineAlign = invalid;
+ assert_equals(cue.lineAlign, 'end');
+ });
+}, document.title+', script-created cue');
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/position.html b/testing/web-platform/tests/webvtt/api/VTTCue/position.html
new file mode 100644
index 0000000000..c0485e7a79
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTCue/position.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<title>VTTCue.position</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-position">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div id=log></div>
+<script>
+test(function(){
+ var cue = new VTTCue(0, 1, 'text');
+ assert_true('position' in cue, 'position is not supported');
+
+ cue.position = 'auto';
+ assert_equals(cue.position, 'auto');
+
+ for (i = 0; i <= 100; i++) {
+ cue.position = i;
+ assert_equals(cue.position, i);
+ }
+
+ [-1, -100, -101, 101, 200, 201].forEach(function(invalid) {
+ assert_throws_dom('IndexSizeError', function() {
+ cue.position = invalid;
+ });
+ });
+
+ cue.position = 1.5;
+ assert_equals(cue.position, 1.5);
+
+ cue.position = 'auto';
+ assert_equals(cue.position, 'auto');
+}, document.title+', script-created cue');
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/positionAlign.html b/testing/web-platform/tests/webvtt/api/VTTCue/positionAlign.html
new file mode 100644
index 0000000000..bde1c6eee7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTCue/positionAlign.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<title>VTTCue.positionAlign</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-positionalign">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div id=log></div>
+<script>
+test(function(){
+ var cue = new VTTCue(0, 1, 'text');
+ assert_true('positionAlign' in cue, 'positionAlign is not supported');
+
+ ['line-left', 'center', 'line-right', 'auto'].forEach(function(valid) {
+ cue.positionAlign = valid;
+ assert_equals(cue.positionAlign, valid);
+ });
+
+ cue.positionAlign = 'center';
+ ['auto\u0000', 'centre', 'middle'].forEach(function(invalid) {
+ cue.positionAlign = invalid;
+ assert_equals(cue.positionAlign, 'center');
+ });
+}, document.title+', script-created cue');
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/region.html b/testing/web-platform/tests/webvtt/api/VTTCue/region.html
new file mode 100644
index 0000000000..ae51c5f603
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTCue/region.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<title>VTTCue.region</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-region">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div id=log></div>
+<script>
+test(function(){
+ var video = document.createElement('video');
+ document.body.appendChild(video);
+
+ var cue = new VTTCue(0, 1, 'text');
+ assert_true('region' in cue, 'region is not supported');
+ assert_equals(cue.region, null);
+
+ var track = document.createElement('track');
+ var t = track.track;
+ t.addCue(cue);
+
+ assert_equals(cue.region, null);
+
+ video.appendChild(track);
+ assert_equals(cue.region, null);
+
+ t.mode = 'showing';
+ assert_equals(cue.region, null);
+
+ var region = new VTTRegion();
+ cue.region = region;
+ assert_equals(cue.region, region);
+
+ cue.region = 'foo';
+ assert_equals(cue.region, region);
+
+ cue.region = null;
+ assert_equals(cue.region, null);
+}, document.title+', script-created cue');
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/size.html b/testing/web-platform/tests/webvtt/api/VTTCue/size.html
new file mode 100644
index 0000000000..fdb8059c72
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTCue/size.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<title>VTTCue.size</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-size">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div id=log></div>
+<script>
+test(function(){
+ var cue = new VTTCue(0, 1, 'text');
+ assert_true('size' in cue, 'size is not supported');
+
+ for (i = 0; i <= 100; i++) {
+ cue.size = i;
+ assert_equals(cue.size, i);
+ }
+
+ [-1, -100, -101, 101, 200, 201].forEach(function(invalid) {
+ assert_throws_dom('IndexSizeError', function() {
+ cue.size = invalid;
+ });
+ });
+
+ cue.size = 1.5;
+ assert_equals(cue.size, 1.5);
+}, document.title+', script-created cue');
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/snapToLines.html b/testing/web-platform/tests/webvtt/api/VTTCue/snapToLines.html
new file mode 100644
index 0000000000..b3f9f34f10
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTCue/snapToLines.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<title>VTTCue.snapToLines</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-snaptolines">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src=common.js></script>
+<div id=log></div>
+<script>
+setup(function(){
+ window.video = document.createElement('video');
+ window.t1 = video.addTextTrack('subtitles');
+ document.body.appendChild(video);
+});
+test(function(){
+ var c1 = new VTTCue(0, 1, 'text1');
+ assert_true('snapToLines' in c1, 'snapToLines is not supported');
+ assert_true(c1.snapToLines);
+ c1.line = 101;
+ c1.snapToLines = false;
+ assert_false(c1.snapToLines);
+ c1.snapToLines = true;
+ assert_true(c1.snapToLines);
+ c1.line = -1;
+ c1.snapToLines = false;
+ assert_false(c1.snapToLines);
+ c1.snapToLines = true;
+ assert_true(c1.snapToLines);
+ c1.line = 0;
+ c1.snapToLines = false;
+ assert_false(c1.snapToLines);
+}, document.title+', script-created cue');
+
+var t_parsed = async_test(document.title+', parsed cue');
+t_parsed.step(function(){
+ var t = document.createElement('track');
+ t.onload = this.step_func(function(){
+ var c1 = t.track.cues[0];
+ assert_true(c1.snapToLines);
+ c1.line = 101;
+ c1.snapToLines = false;
+ assert_false(c1.snapToLines);
+ c1.snapToLines = true;
+ assert_true(c1.snapToLines);
+ c1.line = -1;
+ c1.snapToLines = false;
+ assert_false(c1.snapToLines);
+ c1.snapToLines = true;
+ assert_true(c1.snapToLines);
+ c1.line = 0;
+ c1.snapToLines = false;
+ assert_false(c1.snapToLines);
+
+ var c2 = t.track.cues[1];
+ assert_true(c2.snapToLines);
+ c2.line = 101;
+ c2.snapToLines = false;
+ assert_false(c2.snapToLines);
+ c2.snapToLines = true;
+ assert_true(c2.snapToLines);
+ c2.line = -1;
+ c2.snapToLines = false;
+ assert_false(c2.snapToLines);
+ c2.snapToLines = true;
+ assert_true(c2.snapToLines);
+ c2.line = 0;
+ c2.snapToLines = false;
+ assert_false(c2.snapToLines);
+
+ var c3 = t.track.cues[2];
+ assert_false(c3.snapToLines);
+ c3.snapToLines = false;
+ assert_false(c3.snapToLines);
+ c3.snapToLines = true;
+ assert_true(c3.snapToLines);
+ c3.line = 101;
+ c3.snapToLines = false;
+ assert_false(c3.snapToLines);
+ c3.snapToLines = true;
+ assert_true(c3.snapToLines);
+ c3.line = -1;
+ c3.snapToLines = false;
+ assert_false(c3.snapToLines);
+ c3.snapToLines = true;
+ assert_true(c3.snapToLines);
+ c3.line = 0;
+ c3.snapToLines = false;
+ assert_false(c3.snapToLines);
+
+ this.done();
+ });
+ t.onerror = this.step_func(function() {
+ assert_unreached('got error event');
+ });
+ t.src = make_vtt_track('WEBVTT\n\n00:00:00.000 --> 00:00:00.001\ntest\n\n'+
+ '00:00:00.000 --> 00:00:00.001 line:0\ntest\n\n'+
+ '00:00:00.000 --> 00:00:00.001 line:0%\ntest', this);
+ t.track.mode = 'showing';
+ video.appendChild(t);
+});
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/text.html b/testing/web-platform/tests/webvtt/api/VTTCue/text.html
new file mode 100644
index 0000000000..a61c600db9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTCue/text.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<title>VTTCue.text</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-text">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src=common.js></script>
+<div id=log></div>
+<script>
+setup(function(){
+ window.video = document.createElement('video');
+ window.t1 = video.addTextTrack('subtitles');
+ document.body.appendChild(video);
+});
+test(function(){
+ var c1 = new VTTCue(0, 1, 'text1\r\n\n\u0000');
+ assert_true('text' in c1, 'text is not supported');
+ assert_equals(c1.text, 'text1\r\n\n\u0000');
+ c1.text = c1.text;
+ assert_equals(c1.text, 'text1\r\n\n\u0000');
+ c1.text = null;
+ assert_equals(c1.text, 'null');
+}, document.title+', script-created cue');
+
+var t_parsed = async_test(document.title+', parsed cue');
+t_parsed.step(function(){
+ var t = document.createElement('track');
+ t.onload = this.step_func(function(){
+ var c = t.track.cues;
+ assert_equals(c[0].text, '');
+ assert_equals(c[1].text, 'test');
+ this.done();
+ });
+ t.onerror = this.step_func(function() {
+ assert_unreached('got error event');
+ });
+ t.src = make_vtt_track('WEBVTT\n\n00:00:00.000 --> 00:00:00.001\n'+
+ '\n\nfoobar\n00:00:00.000 --> 00:00:00.001\ntest', this);
+ t.track.mode = 'showing';
+ video.appendChild(t);
+});
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/vertical.html b/testing/web-platform/tests/webvtt/api/VTTCue/vertical.html
new file mode 100644
index 0000000000..8b93f6b003
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTCue/vertical.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<title>VTTCue.vertical</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-vertical">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src=common.js></script>
+<div id=log></div>
+<script>
+setup(function(){
+ window.video = document.createElement('video');
+ window.t1 = video.addTextTrack('subtitles');
+ document.body.appendChild(video);
+});
+test(function(){
+ var video = document.createElement('video');
+ document.body.appendChild(video);
+ var c1 = new VTTCue(0, 1, 'text1');
+ assert_true('vertical' in c1, 'vertical is not supported');
+ assert_equals(c1.vertical, '');
+ var track = document.createElement('track');
+ var t = track.track;
+ t.addCue(c1);
+ assert_equals(c1.vertical, '');
+ video.appendChild(track);
+ assert_equals(c1.vertical, '');
+ t.mode = 'showing';
+ assert_equals(c1.vertical, '');
+ c1.vertical = 'rl';
+ assert_equals(c1.vertical, 'rl');
+ c1.vertical = 'lr';
+ assert_equals(c1.vertical, 'lr');
+ c1.vertical = 'rl\u0000';
+ assert_equals(c1.vertical, 'lr');
+}, document.title+', script-created cue');
+
+var t_parsed = async_test(document.title+', parsed cue');
+t_parsed.step(function(){
+ var t = document.createElement('track');
+ t.onload = this.step_func(function(){
+ var c1 = t.track.cues[0];
+ var c2 = t.track.cues[1];
+ var c3 = t.track.cues[2];
+ assert_equals(c1.vertical, '');
+ assert_equals(c2.vertical, 'rl');
+ assert_equals(c3.vertical, 'lr');
+ this.done();
+ });
+ t.onerror = this.step_func(function() {
+ assert_unreached('got error event');
+ });
+ t.src = make_vtt_track('WEBVTT\n\n00:00:00.000 --> 00:00:00.001\ntest\n\n'+
+ '00:00:00.000 --> 00:00:00.001 vertical:rl\ntest\n\n'+
+ '00:00:00.000 --> 00:00:00.001 vertical:lr\ntest', this);
+ t.track.mode = 'showing';
+ video.appendChild(t);
+});
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/constructor.html b/testing/web-platform/tests/webvtt/api/VTTRegion/constructor.html
new file mode 100644
index 0000000000..a427f4f7d6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTRegion/constructor.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<title>VTTRegion()</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-vttregion">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div id=log></div>
+<script>
+test(function() {
+ var region = new VTTRegion();
+ assert_true(region instanceof VTTRegion, "instanceof");
+
+ assert_equals(region.scroll, "");
+ assert_equals(region.viewportAnchorX, 0);
+ assert_equals(region.viewportAnchorY, 100);
+ assert_equals(region.regionAnchorX, 0);
+ assert_equals(region.regionAnchorY, 100);
+ assert_equals(region.lines, 3);
+ assert_equals(region.width, 100);
+}, document.title + " initial values");
+
+test(function() {
+ var region = new VTTRegion();
+ region.scroll = "invalid-scroll-value";
+ assert_equals(region.scroll, "");
+
+ checkValues([-1, 101], "IndexSizeError");
+ checkValues([-Infinity, Infinity, NaN], TypeError);
+
+ function assert_throws_something(error, func) {
+ if (typeof error == "string") {
+ assert_throws_dom(error, func);
+ } else {
+ assert_throws_js(error, func);
+ }
+ }
+
+ function checkValues(invalidValues, exception) {
+ for (var value of invalidValues) {
+ assert_throws_something(exception, function() { region.viewportAnchorX = value; });
+ assert_equals(region.viewportAnchorX, 0);
+ assert_throws_something(exception, function() { region.viewportAnchorY = value; });
+ assert_equals(region.viewportAnchorY, 100);
+ assert_throws_something(exception, function() { region.regionAnchorX = value; });
+ assert_equals(region.regionAnchorX, 0);
+ assert_throws_something(exception, function() { region.regionAnchorY = value; });
+ assert_equals(region.regionAnchorY, 100);
+ assert_throws_something(exception, function() { region.width = value; });
+ assert_equals(region.width, 100);
+ }
+ }
+
+ assert_equals(region.lines, 3);
+
+ region.lines = 130;
+ assert_equals(region.lines, 130);
+ region.viewportAnchorX = 64;
+ assert_equals(region.viewportAnchorX, 64);
+ region.viewportAnchorY = 32;
+ assert_equals(region.viewportAnchorY, 32);
+ region.regionAnchorX = 16;
+ assert_equals(region.regionAnchorX, 16);
+ region.regionAnchorY = 8;
+ assert_equals(region.regionAnchorY, 8);
+ region.width = 42;
+ assert_equals(region.width, 42);
+}, document.title + " mutations");
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/id.html b/testing/web-platform/tests/webvtt/api/VTTRegion/id.html
new file mode 100644
index 0000000000..1eabac2d16
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTRegion/id.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<title>VTTRegion.id</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-id">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div id=log></div>
+<script>
+test(function() {
+ var region = new VTTRegion();
+ assert_true('id' in region, 'id is not supported');
+
+ assert_equals(region.id, '', 'initial value');
+
+ region.id = '1';
+ assert_equals(region.id, '1', 'value after setting to "1"');
+
+ region.id = '';
+ assert_equals(region.id, '', 'value after setting to the empty string');
+
+}, document.title + ' script-created region');
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/lines.html b/testing/web-platform/tests/webvtt/api/VTTRegion/lines.html
new file mode 100644
index 0000000000..9bde9a1947
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTRegion/lines.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<title>VTTRegion.lines</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-lines">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div id=log></div>
+<script>
+test(function() {
+ var region = new VTTRegion();
+ assert_true('lines' in region, 'lines is not supported');
+
+ for (var i = 1; i <= 100; i++) {
+ region.lines = i;
+ assert_equals(region.lines, i);
+ }
+
+ // https://webidl.spec.whatwg.org/#abstract-opdef-converttoint
+ [[0, 0],
+ [-0, 0],
+ [-1, 4294967295],
+ [-100, 4294967196],
+ [101, 101],
+ [-2147483648, 2147483648],
+ [2147483647, 2147483647],
+ [2147483648, 2147483648],
+ [NaN, 0],
+ [Infinity, 0],
+ [-Infinity, 0]].forEach(function (pair) {
+ var input = pair[0];
+ var expected = pair[1];
+ region.lines = input;
+ assert_equals(region.lines, expected);
+ });
+
+}, document.title + ' script-created region');
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/non-visible-cue-with-region.html b/testing/web-platform/tests/webvtt/api/VTTRegion/non-visible-cue-with-region.html
new file mode 100644
index 0000000000..5a48e46520
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTRegion/non-visible-cue-with-region.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Box-less VTTCue attached to VTTRegion</title>
+<script src="/common/media.js"></script>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<video></video>
+<script>
+setup(function() {
+ window.video = document.querySelector('video');
+ video.src = getVideoURI('/media/test');
+});
+async_test(function(t) {
+ let track = video.addTextTrack('subtitles');
+ let cue = new VTTCue(0, 1, '');
+ cue.region = new VTTRegion();
+ cue.onexit = t.step_func_done(function() {
+ video.pause();
+ });
+ track.addCue(cue);
+ video.onloadedmetadata = t.step_func(function() {
+ video.currentTime = 0.8;
+ video.play();
+ });
+ video.onended = t.unreached_func('test ends before video');
+});
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/regionAnchorX.html b/testing/web-platform/tests/webvtt/api/VTTRegion/regionAnchorX.html
new file mode 100644
index 0000000000..f7663366cb
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTRegion/regionAnchorX.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<title>VTTRegion.regionAnchorX</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchorx">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div id=log></div>
+<script>
+test(function() {
+ var region = new VTTRegion();
+ assert_true('regionAnchorX' in region, 'regionAnchorX is not supported');
+
+ for (var i = 0; i <= 100; i++) {
+ region.regionAnchorX = i;
+ assert_equals(region.regionAnchorX, i);
+ }
+
+ region.regionAnchorX = 1.5;
+ assert_equals(region.regionAnchorX, 1.5);
+
+ [-1, -100, -150, 101, 200, 250].forEach(function (invalid) {
+ assert_throws_dom('IndexSizeError', function() {
+ region.regionAnchorX = invalid;
+ });
+ });
+}, document.title + ' script-created region');
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/regionAnchorY.html b/testing/web-platform/tests/webvtt/api/VTTRegion/regionAnchorY.html
new file mode 100644
index 0000000000..174ff67890
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTRegion/regionAnchorY.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<title>VTTRegion.regionAnchorY</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchory">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div id=log></div>
+<script>
+test(function() {
+ var region = new VTTRegion();
+ assert_true('regionAnchorY' in region, 'regionAnchorY is not supported');
+
+ for (var i = 0; i <= 100; i++) {
+ region.regionAnchorY = i;
+ assert_equals(region.regionAnchorY, i);
+ }
+
+ region.regionAnchorX = 1.5;
+ assert_equals(region.regionAnchorX, 1.5);
+
+ [-1, -100, -150, 101, 200, 250].forEach(function (invalid) {
+ assert_throws_dom('IndexSizeError', function() {
+ region.regionAnchorY = invalid;
+ });
+ });
+}, document.title + ' script-created region');
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/scroll.html b/testing/web-platform/tests/webvtt/api/VTTRegion/scroll.html
new file mode 100644
index 0000000000..63dc50ab45
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTRegion/scroll.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<title>VTTRegion.scroll</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-scroll">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div id=log></div>
+<script>
+test(function() {
+ var region = new VTTRegion();
+ assert_true('scroll' in region, 'scroll is not supported');
+
+ region.scroll = '';
+ assert_equals(region.scroll, '');
+
+ region.scroll = 'up';
+ assert_equals(region.scroll, 'up');
+
+ region.scroll = 'down';
+ assert_equals(region.scroll, 'up');
+
+ region.scroll = '';
+ for (var invalid in ['left', 'right', 'center', 'top', 'bottom', 'down']) {
+ region.scroll = invalid;
+ assert_equals(region.scroll, '');
+ }
+}, document.title + ' script-created region');
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/viewportAnchorX.html b/testing/web-platform/tests/webvtt/api/VTTRegion/viewportAnchorX.html
new file mode 100644
index 0000000000..0786585d46
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTRegion/viewportAnchorX.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<title>VTTRegion.viewportAnchorX</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchorx">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div id=log></div>
+<script>
+test(function() {
+ var region = new VTTRegion();
+ assert_true('viewportAnchorX' in region, 'viewportAnchorX is not supported');
+
+ for (var i = 0; i <= 100; i++) {
+ region.viewportAnchorX = i;
+ assert_equals(region.viewportAnchorX, i);
+ }
+
+ region.viewportAnchorX = 1.5;
+ assert_equals(region.viewportAnchorX, 1.5);
+
+ [-1, -100, -150, 101, 200, 250].forEach(function (invalid) {
+ assert_throws_dom('IndexSizeError', function() {
+ region.viewportAnchorX = invalid;
+ });
+ });
+}, document.title + ' script-created region');
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/viewportAnchorY.html b/testing/web-platform/tests/webvtt/api/VTTRegion/viewportAnchorY.html
new file mode 100644
index 0000000000..de43567b62
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTRegion/viewportAnchorY.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<title>VTTRegion.viewportAnchorY</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchory">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div id=log></div>
+<script>
+test(function() {
+ var region = new VTTRegion();
+ assert_true('viewportAnchorY' in region, 'viewportAnchorY is not supported');
+
+ for (var i = 0; i <= 100; i++) {
+ region.viewportAnchorY = i;
+ assert_equals(region.viewportAnchorY, i);
+ }
+
+ region.viewportAnchorY = 1.5;
+ assert_equals(region.viewportAnchorY, 1.5);
+
+ [-1, -100, -150, 101, 200, 250].forEach(function (invalid) {
+ assert_throws_dom('IndexSizeError', function() {
+ region.viewportAnchorY = invalid;
+ });
+ });
+}, document.title + ' script-created region');
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/width.html b/testing/web-platform/tests/webvtt/api/VTTRegion/width.html
new file mode 100644
index 0000000000..97c1c73956
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/VTTRegion/width.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<title>VTTRegion.width</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-width">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div id=log></div>
+<script>
+test(function(){
+ var region = new VTTRegion();
+ assert_true('width' in region, 'width is not supported');
+
+ for (var i = 0; i <= 100; i++) {
+ region.width = i;
+ assert_equals(region.width, i);
+ }
+
+ region.width = 1.5;
+ assert_equals(region.width, 1.5);
+
+ [-1, -100, -150, 101, 200, 250].forEach(function (invalid) {
+ assert_throws_dom('IndexSizeError', function() {
+ region.width = invalid;
+ });
+ });
+}, document.title + ' script-created region');
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/categories.json b/testing/web-platform/tests/webvtt/api/categories.json
new file mode 100644
index 0000000000..7ce5b13f72
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/categories.json
@@ -0,0 +1,5 @@
+{
+ ":subcategories": ["VTTCue/categories.json"],
+ "VTTCue/*": "cues",
+ "VTTRegion/*": "regions"
+}
diff --git a/testing/web-platform/tests/webvtt/api/historical.html b/testing/web-platform/tests/webvtt/api/historical.html
new file mode 100644
index 0000000000..8f6c09bf52
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/historical.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<title>Historical WebVTT APIs must not be supported</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script>
+// Also see /html/semantics/embedded-content/media-elements/historical.html
+
+[
+ // https://github.com/w3c/webvtt/pull/31
+ ['VTTCue', 'regionId'],
+ ['TextTrack', 'regions'],
+ ['TextTrack', 'addRegion'],
+ ['TextTrack', 'removeRegion'],
+ ['VTTRegion', 'track'],
+ // id re-introduced in https://github.com/w3c/webvtt/pull/349/files
+
+].forEach(function(feature) {
+ var interf = feature[0];
+ var member = feature[1];
+ test(function() {
+ assert_true(interf in window, interf + ' is not supported');
+ assert_false(member in window[interf].prototype);
+ }, interf + ' ' + member + ' member must be nuked');
+});
+
+[
+ // https://github.com/w3c/webvtt/pull/31
+ 'VTTRegionList',
+
+].forEach(function(interf) {
+ test(function() {
+ assert_false(interf in window);
+ }, interf + ' interface must be nuked');
+});
+</script>
diff --git a/testing/web-platform/tests/webvtt/api/idlharness.window.js b/testing/web-platform/tests/webvtt/api/idlharness.window.js
new file mode 100644
index 0000000000..53c1ded674
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/api/idlharness.window.js
@@ -0,0 +1,15 @@
+// META: script=/resources/WebIDLParser.js
+// META: script=/resources/idlharness.js
+
+'use strict';
+
+idl_test(
+ ['webvtt'],
+ ['html', 'dom'],
+ idl_array => {
+ idl_array.add_objects({
+ VTTCue: ['new VTTCue(0, 0, "")'],
+ VTTRegion: ['new VTTRegion()'],
+ });
+ }
+);
diff --git a/testing/web-platform/tests/webvtt/categories.json b/testing/web-platform/tests/webvtt/categories.json
new file mode 100644
index 0000000000..11af9ad43d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/categories.json
@@ -0,0 +1,12 @@
+{
+ ":categories": [
+ ["api", "parsing", "rendering"],
+ ["cues"],
+ ["regions"],
+ ["stylesheets"]
+ ],
+ ":subcategories": ["api/categories.json", "parsing/categories.json"],
+ "api/*": "api",
+ "parsing/*": "parsing",
+ "rendering/*": "rendering"
+}
diff --git a/testing/web-platform/tests/webvtt/parsing/README.md b/testing/web-platform/tests/webvtt/parsing/README.md
new file mode 100644
index 0000000000..e789c1657b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/README.md
@@ -0,0 +1,9 @@
+# Parsing Tests
+
+Tests the [parsing section of the WebVTT spec.](https://w3c.github.io/webvtt/#parsing)
+
+Tests for [file parsing](https://w3c.github.io/webvtt/#file-parsing) are located
+in `file-parsing/`.
+
+Tests for [cue text parsing](https://w3c.github.io/webvtt/#cue-text-parsing-rules)
+are located in `cue-text-parsing/`
diff --git a/testing/web-platform/tests/webvtt/parsing/categories.json b/testing/web-platform/tests/webvtt/parsing/categories.json
new file mode 100644
index 0000000000..1ae85203e4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/categories.json
@@ -0,0 +1,8 @@
+{
+ ":categories": [
+ ["file-parsing", "cue-text-parsing"]
+ ],
+ ":subcategories": ["file-parsing/categories.json"],
+ "file-parsing/*": "file-parsing",
+ "cue-text-parsing/*": "cue-text-parsing"
+}
diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/buildtests.py b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/buildtests.py
new file mode 100644
index 0000000000..2152055000
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/buildtests.py
@@ -0,0 +1,71 @@
+#!/usr/bin/python3
+
+import os
+import urllib.parse
+import hashlib
+
+doctmpl = """\
+<!doctype html>
+<title>WebVTT cue data parser test %s</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#cue-text-parsing-rules">
+<style>video { display:none }</style>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src=/html/syntax/parsing/template.js></script>
+<script src=/html/syntax/parsing/common.js></script>
+<script src=../common.js></script>
+<div id=log></div>
+<script>
+runTests([
+%s
+]);
+</script>
+"""
+
+testobj = "{name:'%s', input:'%s', expected:'%s'}"
+
+def appendtest(tests, input, expected):
+ tests.append(testobj % (hashlib.sha1(input.encode('UTF-8')).hexdigest(), urllib.parse.quote(input[:-1]), urllib.parse.quote(expected[:-1])))
+
+files = os.listdir('dat/')
+for file in files:
+ if os.path.isdir('dat/'+file) or file[0] == ".":
+ continue
+
+ tests = []
+ input = ""
+ expected = ""
+ state = ""
+ with open('dat/'+file, "r") as f:
+ while True:
+ line = f.readline()
+ if not line:
+ if state != "":
+ appendtest(tests, input, expected)
+ input = ""
+ expected = ""
+ state = ""
+ break
+
+ if line[0] == "#":
+ state = line
+ if line == "#document-fragment\n":
+ expected += bytes(line, 'UTF-8').decode('unicode-escape')
+ elif state == "#data\n":
+ input += bytes(line, 'UTF-8').decode('unicode-escape')
+ elif state == "#errors\n":
+ pass
+ elif state == "#document-fragment\n":
+ if line == "\n":
+ appendtest(tests, input, expected)
+ input = ""
+ expected = ""
+ state = ""
+ else:
+ expected += bytes(line, 'UTF-8').decode('unicode-escape')
+ else:
+ raise Exception("failed to parse file %s:%s (state: %s)" % (file, line, state))
+
+ name = os.path.splitext(file)[0]
+ with open('tests/'+name+".html", "w") as out:
+ out.write(doctmpl % (name, ",\n".join(tests)))
diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/common.js b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/common.js
new file mode 100644
index 0000000000..c72bdc06d9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/common.js
@@ -0,0 +1,196 @@
+var namespaces = {
+ "html":"http://www.w3.org/1999/xhtml",
+ "mathml":"http://www.w3.org/1998/Math/MathML",
+ "svg":"http://www.w3.org/2000/svg",
+ "xlink":"http://www.w3.org/1999/xlink",
+ "xml":"http://www.w3.org/XML/1998/namespace",
+ "xmlns":"http://www.w3.org/2000/xmlns/"
+};
+
+var prefixes = {};
+for (var prefix in namespaces) {
+ if (namespaces.hasOwnProperty(prefix)) {
+ prefixes[namespaces[prefix]] = prefix;
+ }
+}
+prefixes[namespaces["mathml"]] = "math";
+
+function format(format_string) {
+ var insertions = Array.prototype.slice.call(arguments, 1);
+ var regexp = /%s/g;
+ var match_count = 0;
+ var rv = format_string.replace(regexp, function(match) {
+ var rv = insertions[match_count];
+ match_count++;
+ return rv;
+ });
+ return rv;
+}
+
+function test_serializer(element) {
+ //element.normalize();
+ var lines = [];
+ function serialize_element(element, indent) {
+ var indent_spaces = (new Array(indent)).join(" ");
+ switch(element.nodeType) {
+ case Node.DOCUMENT_TYPE_NODE:
+ if (element.name) {
+ if (element.publicId || element.systemId) {
+ var publicId = element.publicId ? element.publicId : "";
+ var systemId = element.systemId ? element.systemId : "";
+ lines.push(format("|%s<!DOCTYPE %s \"%s\" \"%s\">", indent_spaces,
+ element.name, publicId, systemId));
+ } else {
+ lines.push(format("|%s<!DOCTYPE %s>", indent_spaces,
+ element.name));
+ }
+ } else {
+ lines.push(format("|%s<!DOCTYPE >", indent_spaces));
+ }
+ break;
+ case Node.DOCUMENT_NODE:
+ lines.push("#document");
+ break;
+ case Node.DOCUMENT_FRAGMENT_NODE:
+ lines.push("#document-fragment");
+ break;
+ case Node.PROCESSING_INSTRUCTION_NODE:
+ lines.push(format("|%s<?%s %s>", indent_spaces, element.target, element.data));
+ break;
+ case Node.COMMENT_NODE:
+ lines.push(format("|%s<!-- %s -->", indent_spaces, element.nodeValue));
+ break;
+ case Node.TEXT_NODE:
+ lines.push(format("|%s\"%s\"", indent_spaces, element.nodeValue));
+ break;
+ case Node.ELEMENT_NODE:
+ if (element.getAttribute("data-skip") !== null) {
+ return;
+ }
+ if (element.namespaceURI !== null && element.namespaceURI !== namespaces.html) {
+ var name = format("%s %s", prefixes[element.namespaceURI],
+ element.localName);
+ } else {
+ var name = element.localName;
+ }
+ lines.push(format("|%s<%s>", indent_spaces, name));
+
+ var attributes = Array.prototype.map.call(
+ element.attributes,
+ function(attr) {
+ var name = (attr.namespaceURI ? prefixes[attr.namespaceURI] + " " : "") +
+ attr.localName;
+ return [name, attr.value];
+ });
+ attributes.sort(function (a, b) {
+ var x = a[0];
+ var y = b[0];
+ if (x === y) {
+ return 0;
+ }
+ return x > y ? 1 : -1;
+ });
+
+ attributes.forEach(
+ function(attr) {
+ var indent_spaces = (new Array(indent + 2)).join(" ");
+ lines.push(format("|%s%s=\"%s\"", indent_spaces, attr[0], attr[1]));
+ }
+ );
+ break;
+ }
+ indent += 2;
+ Array.prototype.forEach.call(element.childNodes,
+ function(node) {
+ serialize_element(node, indent);
+ });
+ }
+ serialize_element(element, 0);
+ return lines.join("\n");
+}
+
+function print_diffs(test_id, uri_encoded_input, expected, actual, container) {
+ container = container ? container : null;
+ if (actual) {
+ var diffs = mark_diffs(expected, actual);
+ var expected_text = diffs[0];
+ var actual_text = diffs[1];
+ } else {
+ var expected_text = expected;
+ var actual_text = "";
+ }
+
+ var tmpl = ["div", {"id":"${test_id}"},
+ ["h2", {}, "${test_id}"],
+ function(vars) {
+ if (vars.container !== null) {
+ return ["div", {"class":"container"},
+ ["h3", {}, "innerHTML Container"],
+ ["pre", {}, vars.container]];
+ } else {
+ return null;
+ }
+ },
+ ["div", {"id":"input_${test_id}"}, ["h3", {}, "Input"], ["pre", {},
+ ["code", {}, decodeURIComponent(uri_encoded_input)]]],
+ ["div", {"id":"expected_${test_id}"}, ["h3", {}, "Expected"],
+ ["pre", {}, ["code", {}, expected_text]]],
+ ["div", {"id":"actual_${test_id}"}, ["h3", {}, "Actual"],
+ ["pre", {}, ["code", {}, actual_text]]]
+ ];
+
+ var diff_dom = template.render(tmpl, {test_id:test_id, container:container});
+ document.body.appendChild(diff_dom);
+}
+
+function runTests(tests) {
+ tests.forEach(function(test){
+ var expected = decodeURIComponent(test.expected);
+ var t = async_test(document.title + ' - ' + test.name);
+ t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track not supported');
+ t.test_id = test.name;
+ t.url_encoded_input = test.input;
+ t.expected = expected;
+ var track_blob = new Blob(['WEBVTT\n\n00:00.000 --> 00:01.000\n',
+ decodeURIComponent(test.input)],
+ { type: 'text/vtt' });
+ var track_url = URL.createObjectURL(track_blob);;
+ track.src = track_url;
+ t.add_cleanup(function() {
+ URL.revokeObjectURL(track_url);
+ });
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = t.step_func(trackLoaded);
+ track.onerror = t.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+ });
+ });
+}
+
+function trackLoaded(e) {
+ var track = e.target;
+ setTimeout(removeElm, 0, track.parentNode);
+ var cue = track.track.cues[0];
+ var frag = cue.getCueAsHTML();
+ var got = test_serializer(frag);
+ if (got !== this.expected) {
+ print_diffs(this.test_id, this.url_encoded_input, this.expected, got);
+ }
+ assert_equals(got, this.expected);
+ this.done();
+}
+
+function trackError(e) {
+ setTimeout(removeElm, 0, e.target.parentNode);
+ assert_unreached('got error event');
+ this.done();
+}
+
+function removeElm(elm) {
+ document.body.removeChild(elm);
+}
diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/entities.dat b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/entities.dat
new file mode 100644
index 0000000000..6522e3f5b8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/entities.dat
@@ -0,0 +1,150 @@
+#data
+&
+#errors
+#document-fragment
+| "&"
+
+#data
+&amp
+#errors
+#document-fragment
+| "&"
+
+#data
+&amp;
+#errors
+#document-fragment
+| "&"
+
+#data
+&AMP;
+#errors
+#document-fragment
+| "&"
+
+#data
+&lt;
+#errors
+#document-fragment
+| "<"
+
+#data
+&gt;
+#errors
+#document-fragment
+| ">"
+
+#data
+a&lrm;b
+#errors
+#document-fragment
+| "a\u200Eb"
+
+#data
+a&rlm;b
+#errors
+#document-fragment
+| "a\u200Fb"
+
+#data
+&quot;
+#errors
+#document-fragment
+| "\u0022"
+
+#data
+&nbsp;
+#errors
+#document-fragment
+| "\u00A0"
+
+#data
+&copy;
+#errors
+#document-fragment
+| "\u00A9"
+
+#data
+&&
+#errors
+#document-fragment
+| "&&"
+
+#data
+&1
+#errors
+#document-fragment
+| "&1"
+
+#data
+&1;
+#errors
+#document-fragment
+| "&1;"
+
+#data
+&<
+#errors
+#document-fragment
+| "&"
+
+#data
+&<c
+#errors
+#document-fragment
+| "&"
+| <span>
+
+#data
+&#32;
+#errors
+#document-fragment
+| " "
+
+#data
+&#x20;
+#errors
+#document-fragment
+| " "
+
+#data
+&;
+#errors
+#document-fragment
+| "&;"
+
+#data
+&ClockwiseContourIntegral;
+#errors
+#document-fragment
+| "\u2232"
+
+#data
+&nsubE;
+#errors
+#document-fragment
+| "\u2AC5\u0338"
+
+#data
+&notin;
+#errors
+#document-fragment
+| "\u2209"
+
+#data
+&not;
+#errors
+#document-fragment
+| "\u00AC"
+
+#data
+&not
+#errors
+#document-fragment
+| "\u00AC"
+
+#data
+&notit;
+#errors
+#document-fragment
+| "\u00ACit;"
diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/tags.dat b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/tags.dat
new file mode 100644
index 0000000000..0ef77a09a1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/tags.dat
@@ -0,0 +1,214 @@
+#data
+<
+#errors
+#document-fragment
+
+#data
+<<
+#errors
+#document-fragment
+
+#data
+<\t
+#errors
+#document-fragment
+
+#data
+<\n
+#errors
+#document-fragment
+
+#data
+<\x20
+#errors
+#document-fragment
+
+#data
+<.
+#errors
+#document-fragment
+
+#data
+<c.
+#errors
+#document-fragment
+| <span>
+
+#data
+</
+#errors
+#document-fragment
+
+#data
+<c></>x
+#errors
+#document-fragment
+| <span>
+| "x"
+
+#data
+<c></
+c>x
+#errors
+#document-fragment
+| <span>
+| "x"
+
+#data
+<c>test
+#errors
+#document-fragment
+| <span>
+| "test"
+
+#data
+a<c.d e>b</c>c
+#errors
+#document-fragment
+| "a"
+| <span>
+| class="d"
+| "b"
+| "c"
+
+#data
+<i>test
+#errors
+#document-fragment
+| <i>
+| "test"
+
+#data
+a<i.d e>b</i>c
+#errors
+#document-fragment
+| "a"
+| <i>
+| class="d"
+| "b"
+| "c"
+
+#data
+<b>test
+#errors
+#document-fragment
+| <b>
+| "test"
+
+#data
+a<b.d e>b</b>c
+#errors
+#document-fragment
+| "a"
+| <b>
+| class="d"
+| "b"
+| "c"
+
+#data
+<u>test
+#errors
+#document-fragment
+| <u>
+| "test"
+
+#data
+a<u.d e>b</u>c
+#errors
+#document-fragment
+| "a"
+| <u>
+| class="d"
+| "b"
+| "c"
+
+#data
+<ruby>test
+#errors
+#document-fragment
+| <ruby>
+| "test"
+
+#data
+a<ruby.f g>b<rt.h j>c</rt>d</ruby>e
+#errors
+#document-fragment
+| "a"
+| <ruby>
+| class="f"
+| "b"
+| <rt>
+| class="h"
+| "c"
+| "d"
+| "e"
+
+#data
+<rt>test
+#errors
+#document-fragment
+| "test"
+
+#data
+<v>test
+#errors
+#document-fragment
+| <span>
+| title=""
+| "test"
+
+#data
+<v a>test
+#errors
+#document-fragment
+| <span>
+| title="a"
+| "test"
+
+#data
+<v a b>test
+#errors
+#document-fragment
+| <span>
+| title="a b"
+| "test"
+
+#data
+<v.a>test
+#errors
+#document-fragment
+| <span>
+| class="a"
+| title=""
+| "test"
+
+#data
+<v.a.b>test
+#errors
+#document-fragment
+| <span>
+| class="a b"
+| title=""
+| "test"
+
+#data
+a<v.d e>b</v>c
+#errors
+#document-fragment
+| "a"
+| <span>
+| class="d"
+| title="e"
+| "b"
+| "c"
+
+#data
+a<lang.d e>b</lang>c
+#errors
+#document-fragment
+| "a"
+| <span>
+| class="d"
+| lang="e"
+| "b"
+| "c"
diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/text.dat b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/text.dat
new file mode 100644
index 0000000000..e4129a2ec9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/text.dat
@@ -0,0 +1,29 @@
+#data
+text
+#errors
+#document-fragment
+| "text"
+
+#data
+text1\ntext2
+#errors
+#document-fragment
+| "text1\ntext2"
+
+#data
+foo\x00bar
+#errors
+#document-fragment
+| "foo\uFFFDbar"
+
+#data
+\u2713
+#errors
+#document-fragment
+| "\u2713"
+
+#data
+text1\n\ntext2
+#errors
+#document-fragment
+| "text1"
diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/timestamps.dat b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/timestamps.dat
new file mode 100644
index 0000000000..a3aea9af6c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/timestamps.dat
@@ -0,0 +1,63 @@
+#data
+<0
+#errors
+#document-fragment
+
+#data
+<0.500
+#errors
+#document-fragment
+
+#data
+<0:00.500
+#errors
+#document-fragment
+
+#data
+<00:\x0000:00.500>
+#errors
+#document-fragment
+
+#data
+<00:00.500
+#errors
+#document-fragment
+| <?timestamp 00:00:00.500>
+
+#data
+<00:00:00.500
+#errors
+#document-fragment
+| <?timestamp 00:00:00.500>
+
+#data
+test<00:00:00.500>test
+#errors
+#document-fragment
+| "test"
+| <?timestamp 00:00:00.500>
+| "test"
+
+#data
+test<01:00:00.000>test
+#errors
+#document-fragment
+| "test"
+| <?timestamp 01:00:00.000>
+| "test"
+
+#data
+test<10:00:00.000>test
+#errors
+#document-fragment
+| "test"
+| <?timestamp 10:00:00.000>
+| "test"
+
+#data
+test<100:00:00.000>test
+#errors
+#document-fragment
+| "test"
+| <?timestamp 100:00:00.000>
+| "test"
diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/tree-building.dat b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/tree-building.dat
new file mode 100644
index 0000000000..48d7ab20bf
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/tree-building.dat
@@ -0,0 +1,88 @@
+#data
+test
+#errors
+#document-fragment
+| "test"
+
+#data
+<ruby>test<rt>test
+#errors
+#document-fragment
+| <ruby>
+| "test"
+| <rt>
+| "test"
+
+#data
+<ruby>test<rt>test</rt>test
+#errors
+#document-fragment
+| <ruby>
+| "test"
+| <rt>
+| "test"
+| "test"
+
+#data
+<ruby>test<rt>test</rt></ruby>test
+#errors
+#document-fragment
+| <ruby>
+| "test"
+| <rt>
+| "test"
+| "test"
+
+#data
+<ruby>test<rt>test</ruby>test
+#errors
+#document-fragment
+| <ruby>
+| "test"
+| <rt>
+| "test"
+| "test"
+
+#data
+<ruby>test<rt><b>test</rt></ruby>test
+#errors
+#document-fragment
+| <ruby>
+| "test"
+| <rt>
+| <b>
+| "test"
+| "test"
+
+#data
+<ruby>test<rt><b>test</ruby>test
+#errors
+#document-fragment
+| <ruby>
+| "test"
+| <rt>
+| <b>
+| "test"
+| "test"
+
+#data
+<ruby>test<rt><b>test</rt></ruby></b>test
+#errors
+#document-fragment
+| <ruby>
+| "test"
+| <rt>
+| <b>
+| "test"
+| "test"
+
+#data
+<ruby>test<rt><b>test</rt></b></ruby>test
+#errors
+#document-fragment
+| <ruby>
+| "test"
+| <rt>
+| <b>
+| "test"
+| "test"
diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/entities.html b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/entities.html
new file mode 100644
index 0000000000..dbae784de1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/entities.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<title>WebVTT cue data parser test entities</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#cue-text-parsing-rules">
+<style>video { display:none }</style>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src=/html/syntax/parsing/template.js></script>
+<script src=/html/syntax/parsing/common.js></script>
+<script src=../common.js></script>
+<div id=log></div>
+<script>
+runTests([
+{name:'3686fc0cdc60dc536e75df054b0bd372273db2cc', input:'%26', expected:'%23document-fragment%0A%7C%20%22%26%22'},
+{name:'f1869f6e2853635eec81cc3afa3e2b8148ccbdc0', input:'%26amp', expected:'%23document-fragment%0A%7C%20%22%26%22'},
+{name:'92d76530d723b6b4e4ef8280c01cf1c80f9bebdb', input:'%26amp%3B', expected:'%23document-fragment%0A%7C%20%22%26%22'},
+{name:'261cd4e9df4a12535b66a0c39e9635aab2bb19aa', input:'%26AMP%3B', expected:'%23document-fragment%0A%7C%20%22%26%22'},
+{name:'1a2269cdb73bf97ec6a99b0edabfe646c471b67e', input:'%26lt%3B', expected:'%23document-fragment%0A%7C%20%22%3C%22'},
+{name:'44ceb90884cceeeccb4f7024e3598f7dc5ceebfa', input:'%26gt%3B', expected:'%23document-fragment%0A%7C%20%22%3E%22'},
+{name:'05def72af03fc2b1617da950d871b9fd0ba20e5a', input:'a%26lrm%3Bb', expected:'%23document-fragment%0A%7C%20%22a%E2%80%8Eb%22'},
+{name:'da999a55445eca43aa41e039ec439c1a812db297', input:'a%26rlm%3Bb', expected:'%23document-fragment%0A%7C%20%22a%E2%80%8Fb%22'},
+{name:'0fd9e3823b62c028c1d50e35b1f3ee3df02a62eb', input:'%26quot%3B', expected:'%23document-fragment%0A%7C%20%22%22%22'},
+{name:'e7387003fbacb22b706796c98b781eb4ebf5ff85', input:'%26nbsp%3B', expected:'%23document-fragment%0A%7C%20%22%C2%A0%22'},
+{name:'216cd0e914b9f2ccd04eff6d02a0b1ce24441d95', input:'%26copy%3B', expected:'%23document-fragment%0A%7C%20%22%C2%A9%22'},
+{name:'2cdf20980d17a5d077299215e6a7e97f3c6b07e2', input:'%26%26', expected:'%23document-fragment%0A%7C%20%22%26%26%22'},
+{name:'83f4500c0bd8598480713997a041d8f70fd3f11e', input:'%261', expected:'%23document-fragment%0A%7C%20%22%261%22'},
+{name:'2c6b2ba38a08eca45370f28a5b7df2aa463fb3dc', input:'%261%3B', expected:'%23document-fragment%0A%7C%20%22%261%3B%22'},
+{name:'f4bb977c0a06851bdd19260c035a766c5c8ea093', input:'%26%3C', expected:'%23document-fragment%0A%7C%20%22%26%22'},
+{name:'b1fff1ac42688d16e00f6c758d84e5152e39702d', input:'%26%3Cc', expected:'%23document-fragment%0A%7C%20%22%26%22%0A%7C%20%3Cspan%3E'},
+{name:'bd68f6beda2c2264e61dff7359c1ad48bc0a9934', input:'%26%2332%3B', expected:'%23document-fragment%0A%7C%20%22%20%22'},
+{name:'5b77a0be23453dfe6eea59d43bb0708f89e1df82', input:'%26%23x20%3B', expected:'%23document-fragment%0A%7C%20%22%20%22'},
+{name:'87986551b0e6180cb279f2aa4cdddf77daa90c11', input:'%26%3B', expected:'%23document-fragment%0A%7C%20%22%26%3B%22'},
+{name:'e3ac2060b915f0f499b2863f999dcdb38a5db79b', input:'%26ClockwiseContourIntegral%3B', expected:'%23document-fragment%0A%7C%20%22%E2%88%B2%22'},
+{name:'31c8a5ecfa5c54d8c0ec5b4ee8f0bbea0d6d40af', input:'%26nsubE%3B', expected:'%23document-fragment%0A%7C%20%22%E2%AB%85%CC%B8%22'},
+{name:'9ed59950764468c4ef2948d71cf75c3f2b60c74d', input:'%26notin%3B', expected:'%23document-fragment%0A%7C%20%22%E2%88%89%22'},
+{name:'71a6efcfab81264fb95bb3234c59687c11c72baf', input:'%26not%3B', expected:'%23document-fragment%0A%7C%20%22%C2%AC%22'},
+{name:'86d7c20ca3c060f9e699c7da43927c4a07a5d569', input:'%26not', expected:'%23document-fragment%0A%7C%20%22%C2%AC%22'},
+{name:'314cd94292df37044e90ce27b5606bf8ec636b94', input:'%26notit%3B', expected:'%23document-fragment%0A%7C%20%22%C2%ACit%3B%22'}
+]);
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/tags.html b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/tags.html
new file mode 100644
index 0000000000..c624320f2b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/tags.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<title>WebVTT cue data parser test tags</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#cue-text-parsing-rules">
+<style>video { display:none }</style>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src=/html/syntax/parsing/template.js></script>
+<script src=/html/syntax/parsing/common.js></script>
+<script src=../common.js></script>
+<div id=log></div>
+<script>
+runTests([
+{name:'d49e42f7582c6f00b2569f2d14629611c0c6b0e6', input:'%3C', expected:'%23document-fragment'},
+{name:'9dd187edd10c907e6b92148fd82940e401dbe79f', input:'%3C%3C', expected:'%23document-fragment'},
+{name:'2d2c4333983e23a4962083e8120e5d42c839f77b', input:'%3C%09', expected:'%23document-fragment'},
+{name:'94f898df44b470e2d05d74c6816fd908e55c9fdf', input:'%3C%0A', expected:'%23document-fragment'},
+{name:'2fdc1b84ba41ec98833851e80781df1fbe72182f', input:'%3C%20', expected:'%23document-fragment'},
+{name:'487690a6f5da4666f9caaf3a3ecc10992aca1414', input:'%3C.', expected:'%23document-fragment'},
+{name:'0d7df935b172f2a1b357b94596d68f2443f30f8b', input:'%3Cc.', expected:'%23document-fragment%0A%7C%20%3Cspan%3E'},
+{name:'cd1d6dd274e03ae8fc56bc4ef163998d9ff24496', input:'%3C/', expected:'%23document-fragment'},
+{name:'fca1a11d42b735453117f42456360e88082a3fd7', input:'%3Cc%3E%3C/%3Ex', expected:'%23document-fragment%0A%7C%20%3Cspan%3E%0A%7C%20%20%20%22x%22'},
+{name:'fe3b6277edf5c2f84e7a6779eddd0cac30552bca', input:'%3Cc%3E%3C/%0Ac%3Ex', expected:'%23document-fragment%0A%7C%20%3Cspan%3E%0A%7C%20%20%20%22x%22'},
+{name:'6ceded63b53eeab3681a0fc540e959ca88f7dce9', input:'%3Cc%3Etest', expected:'%23document-fragment%0A%7C%20%3Cspan%3E%0A%7C%20%20%20%22test%22'},
+{name:'cdcdb0d5d6a975c5612eabcbea5d732ff3bc9f56', input:'a%3Cc.d%20e%3Eb%3C/c%3Ec', expected:'%23document-fragment%0A%7C%20%22a%22%0A%7C%20%3Cspan%3E%0A%7C%20%20%20class%3D%22d%22%0A%7C%20%20%20%22b%22%0A%7C%20%22c%22'},
+{name:'71de37451e7d5524eacc8a190d21cd64c4304e14', input:'%3Ci%3Etest', expected:'%23document-fragment%0A%7C%20%3Ci%3E%0A%7C%20%20%20%22test%22'},
+{name:'70f72cc4d2139d9e8c33189a1a9b89ecd6014a15', input:'a%3Ci.d%20e%3Eb%3C/i%3Ec', expected:'%23document-fragment%0A%7C%20%22a%22%0A%7C%20%3Ci%3E%0A%7C%20%20%20class%3D%22d%22%0A%7C%20%20%20%22b%22%0A%7C%20%22c%22'},
+{name:'985284b688a09f1f55e3c9aab49d7e4ca11f870a', input:'%3Cb%3Etest', expected:'%23document-fragment%0A%7C%20%3Cb%3E%0A%7C%20%20%20%22test%22'},
+{name:'39c36af6d6850bc474f1d9962c1133933fd50dd0', input:'a%3Cb.d%20e%3Eb%3C/b%3Ec', expected:'%23document-fragment%0A%7C%20%22a%22%0A%7C%20%3Cb%3E%0A%7C%20%20%20class%3D%22d%22%0A%7C%20%20%20%22b%22%0A%7C%20%22c%22'},
+{name:'fa6993eaa94404648d8b52e2830e53369404fdcb', input:'%3Cu%3Etest', expected:'%23document-fragment%0A%7C%20%3Cu%3E%0A%7C%20%20%20%22test%22'},
+{name:'45221829445210412642152bfb22fa2ed222d46e', input:'a%3Cu.d%20e%3Eb%3C/u%3Ec', expected:'%23document-fragment%0A%7C%20%22a%22%0A%7C%20%3Cu%3E%0A%7C%20%20%20class%3D%22d%22%0A%7C%20%20%20%22b%22%0A%7C%20%22c%22'},
+{name:'e4d351e1a6b40a7dace801b722efaa200c4895f2', input:'%3Cruby%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22'},
+{name:'a8481eabd1dcac1d02e57e74d499e2395ac171cd', input:'a%3Cruby.f%20g%3Eb%3Crt.h%20j%3Ec%3C/rt%3Ed%3C/ruby%3Ee', expected:'%23document-fragment%0A%7C%20%22a%22%0A%7C%20%3Cruby%3E%0A%7C%20%20%20class%3D%22f%22%0A%7C%20%20%20%22b%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20class%3D%22h%22%0A%7C%20%20%20%20%20%22c%22%0A%7C%20%20%20%22d%22%0A%7C%20%22e%22'},
+{name:'68e1d0376f827ebe0c047751a2067594ff41b612', input:'%3Crt%3Etest', expected:'%23document-fragment%0A%7C%20%22test%22'},
+{name:'ab2024b4e65ed64a751adbe8aae1e84ee61bf3e6', input:'%3Cv%3Etest', expected:'%23document-fragment%0A%7C%20%3Cspan%3E%0A%7C%20%20%20title%3D%22%22%0A%7C%20%20%20%22test%22'},
+{name:'10f4823ffb17c71654c4602bc45c58300e3ecbcc', input:'%3Cv%20a%3Etest', expected:'%23document-fragment%0A%7C%20%3Cspan%3E%0A%7C%20%20%20title%3D%22a%22%0A%7C%20%20%20%22test%22'},
+{name:'909924ef392fb20c9526acfa4f18f891eda61a0c', input:'%3Cv%20a%20b%3Etest', expected:'%23document-fragment%0A%7C%20%3Cspan%3E%0A%7C%20%20%20title%3D%22a%20b%22%0A%7C%20%20%20%22test%22'},
+{name:'e5ca35cc29404efc0ebd58aa5f6efefc86fc5287', input:'%3Cv.a%3Etest', expected:'%23document-fragment%0A%7C%20%3Cspan%3E%0A%7C%20%20%20class%3D%22a%22%0A%7C%20%20%20title%3D%22%22%0A%7C%20%20%20%22test%22'},
+{name:'e535c486dac7dc571463b150adc55fd841bc3008', input:'%3Cv.a.b%3Etest', expected:'%23document-fragment%0A%7C%20%3Cspan%3E%0A%7C%20%20%20class%3D%22a%20b%22%0A%7C%20%20%20title%3D%22%22%0A%7C%20%20%20%22test%22'},
+{name:'bb7abafab60a0ea63f57420759fac4093148ecc8', input:'a%3Cv.d%20e%3Eb%3C/v%3Ec', expected:'%23document-fragment%0A%7C%20%22a%22%0A%7C%20%3Cspan%3E%0A%7C%20%20%20class%3D%22d%22%0A%7C%20%20%20title%3D%22e%22%0A%7C%20%20%20%22b%22%0A%7C%20%22c%22'},
+{name:'b53365151e0b2434837d6cce15c3d51e666a813e', input:'a%3Clang.d%20e%3Eb%3C/lang%3Ec', expected:'%23document-fragment%0A%7C%20%22a%22%0A%7C%20%3Cspan%3E%0A%7C%20%20%20class%3D%22d%22%0A%7C%20%20%20lang%3D%22e%22%0A%7C%20%20%20%22b%22%0A%7C%20%22c%22'}
+]);
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/text.html b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/text.html
new file mode 100644
index 0000000000..f7241a5c15
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/text.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<title>WebVTT cue data parser test text</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#cue-text-parsing-rules">
+<style>video { display:none }</style>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src=/html/syntax/parsing/template.js></script>
+<script src=/html/syntax/parsing/common.js></script>
+<script src=../common.js></script>
+<div id=log></div>
+<script>
+runTests([
+{name:'aa785adca3fcdfe1884ae840e13c6d294a2414e8', input:'text', expected:'%23document-fragment%0A%7C%20%22text%22'},
+{name:'3979f3c0c7664ee8a9f78854626bc7bc39b86c96', input:'text1%0Atext2', expected:'%23document-fragment%0A%7C%20%22text1%0Atext2%22'},
+{name:'6805ac5ddce21cfceb4eccf04a6a9013760f5d5b', input:'foo%00bar', expected:'%23document-fragment%0A%7C%20%22foo%EF%BF%BDbar%22'},
+{name:'5cfbdbe32701516fc90c3786da1db4716ac09fb8', input:'%E2%9C%93', expected:'%23document-fragment%0A%7C%20%22%E2%9C%93%22'},
+{name:'a34d27ca7b23f07db6ec2e32226fca105e958db6', input:'text1%0A%0Atext2', expected:'%23document-fragment%0A%7C%20%22text1%22'}
+]);
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/timestamps.html b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/timestamps.html
new file mode 100644
index 0000000000..1739d96367
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/timestamps.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<title>WebVTT cue data parser test timestamps</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#cue-text-parsing-rules">
+<style>video { display:none }</style>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src=/html/syntax/parsing/template.js></script>
+<script src=/html/syntax/parsing/common.js></script>
+<script src=../common.js></script>
+<div id=log></div>
+<script>
+runTests([
+{name:'54c245f3fbe7a3e25398b13971d44f2bb3a5f947', input:'%3C0', expected:'%23document-fragment'},
+{name:'5e190a1b4541fcb10e403af111c14ef152fecb0d', input:'%3C0.500', expected:'%23document-fragment'},
+{name:'92b97d3497836259e0b9305e27f2b91ea1dc9b31', input:'%3C0%3A00.500', expected:'%23document-fragment'},
+{name:'2f0e84518d356cb1e56a366296fa491c5bed1e3a', input:'%3C00%3A%0000%3A00.500%3E', expected:'%23document-fragment'},
+{name:'47fa4306a695161da88533d456ce94829e53b13d', input:'%3C00%3A00.500', expected:'%23document-fragment%0A%7C%20%3C%3Ftimestamp%2000%3A00%3A00.500%3E'},
+{name:'c1036a4322c1852e02e5a1843a9a81dfca6d7af3', input:'%3C00%3A00%3A00.500', expected:'%23document-fragment%0A%7C%20%3C%3Ftimestamp%2000%3A00%3A00.500%3E'},
+{name:'70ec34d828ca661a583c651207becb968bb41653', input:'test%3C00%3A00%3A00.500%3Etest', expected:'%23document-fragment%0A%7C%20%22test%22%0A%7C%20%3C%3Ftimestamp%2000%3A00%3A00.500%3E%0A%7C%20%22test%22'},
+{name:'66ba641ff047a226fa60fe867fd2479d40f3ff0f', input:'test%3C01%3A00%3A00.000%3Etest', expected:'%23document-fragment%0A%7C%20%22test%22%0A%7C%20%3C%3Ftimestamp%2001%3A00%3A00.000%3E%0A%7C%20%22test%22'},
+{name:'398e8da1aaaf392739ca72057fef58bd5333f74d', input:'test%3C10%3A00%3A00.000%3Etest', expected:'%23document-fragment%0A%7C%20%22test%22%0A%7C%20%3C%3Ftimestamp%2010%3A00%3A00.000%3E%0A%7C%20%22test%22'},
+{name:'391fce67644cf4dd9967e1436d1449ef5baf675f', input:'test%3C100%3A00%3A00.000%3Etest', expected:'%23document-fragment%0A%7C%20%22test%22%0A%7C%20%3C%3Ftimestamp%20100%3A00%3A00.000%3E%0A%7C%20%22test%22'}
+]);
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/tree-building.html b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/tree-building.html
new file mode 100644
index 0000000000..6cd617dece
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/tree-building.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<title>WebVTT cue data parser test tree-building</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#cue-text-parsing-rules">
+<style>video { display:none }</style>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src=/html/syntax/parsing/template.js></script>
+<script src=/html/syntax/parsing/common.js></script>
+<script src=../common.js></script>
+<div id=log></div>
+<script>
+runTests([
+{name:'4e1243bd22c66e76c2ba9eddc1f91394e57f9f83', input:'test', expected:'%23document-fragment%0A%7C%20%22test%22'},
+{name:'2564487cfc7e317428fb437ef8de8de4f4963426', input:'%3Cruby%3Etest%3Crt%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20%22test%22'},
+{name:'9b1902c975558eeaff4afbaf0a6dc100e1978769', input:'%3Cruby%3Etest%3Crt%3Etest%3C/rt%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20%22test%22%0A%7C%20%20%20%22test%22'},
+{name:'119c596ea09649d3bd03934485e3067e89377412', input:'%3Cruby%3Etest%3Crt%3Etest%3C/rt%3E%3C/ruby%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20%22test%22%0A%7C%20%22test%22'},
+{name:'c94512b045699cb72f730e46b2a0a3bed2c939f9', input:'%3Cruby%3Etest%3Crt%3Etest%3C/ruby%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20%22test%22%0A%7C%20%22test%22'},
+{name:'325c1e590e74f1ff33ca5b4838c04cf6b6dd71ba', input:'%3Cruby%3Etest%3Crt%3E%3Cb%3Etest%3C/rt%3E%3C/ruby%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20%3Cb%3E%0A%7C%20%20%20%20%20%20%20%22test%22%0A%7C%20%20%20%20%20%20%20%22test%22'},
+{name:'92847ed2694c9639ba96f4cc61e2215362a74904', input:'%3Cruby%3Etest%3Crt%3E%3Cb%3Etest%3C/ruby%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20%3Cb%3E%0A%7C%20%20%20%20%20%20%20%22test%22%0A%7C%20%20%20%20%20%20%20%22test%22'},
+{name:'c0da62d1c8716ca544c96799f06ac7e4664500fb', input:'%3Cruby%3Etest%3Crt%3E%3Cb%3Etest%3C/rt%3E%3C/ruby%3E%3C/b%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20%3Cb%3E%0A%7C%20%20%20%20%20%20%20%22test%22%0A%7C%20%20%20%20%20%22test%22'},
+{name:'b85bd616672eba0591718182ef32e3307d223bb0', input:'%3Cruby%3Etest%3Crt%3E%3Cb%3Etest%3C/rt%3E%3C/b%3E%3C/ruby%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20%3Cb%3E%0A%7C%20%20%20%20%20%20%20%22test%22%0A%7C%20%22test%22'}
+]);
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/README.md b/testing/web-platform/tests/webvtt/parsing/file-parsing/README.md
new file mode 100644
index 0000000000..4cff0af952
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/README.md
@@ -0,0 +1,52 @@
+# Tests for http://w3c.github.io/webvtt/#file-parsing
+
+Tests that expect an 'error' event (due to invalid signature) are:
+
+```bash
+./signature-invalid.html
+./support/*.vtt
+```
+
+Other tests are generated from source files with a custom format. The source files are:
+
+```bash
+./support/*.test
+```
+
+## .test Format
+
+* The first line is the title of the test.
+* Subsequent lines until a blank line contain HTML metadata.
+* Subsequent lines until a `===` line contains JS assertions.
+* Finally the WebVTT file. Special characters can be escaped using python3 escape sequences: `\x00`, `\r`.
+
+## Building Tests
+
+Requirements: Python 3.2 or newer
+
+```bash
+$ python3 tools/build.py
+```
+
+## Spec Coverage Report
+
+There is also a python implementation of the WebVTT file parser algorithm and a
+script to create a test coverage report of this implementation, under `tools/`.
+
+Requirements:
+* Python 3.2 or newer
+* [Coverage.py](https://pypi.python.org/pypi/coverage)
+
+Installing Coverage.py using [pip](https://pypi.python.org/pypi/pip).
+
+```bash
+$ pip3 install coverage
+```
+
+Generating the report:
+
+```bash
+$ python3 spec_report.py
+```
+
+Will output `report.html`.
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/categories.json b/testing/web-platform/tests/webvtt/parsing/file-parsing/categories.json
new file mode 100644
index 0000000000..e78106cee1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/categories.json
@@ -0,0 +1,6 @@
+{
+ ":categories": [
+ ["file-parsing", "cue-text-parsing"]
+ ],
+ ":subcategories": ["tests/categories.json"]
+}
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/signature-invalid.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/signature-invalid.html
new file mode 100644
index 0000000000..62ee90828f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/signature-invalid.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<title>WebVTT parser test: invalid signatures</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+[
+ // Alphabetical order, by file
+ ['empty', 'empty.vtt'],
+ ['formfeed', 'signature-formfeed.vtt'],
+ ['invalid whitespace', 'signature-invalid-whitespace.vtt'],
+ ['invalid', 'signature-invalid.vtt'],
+ ['lowercase', 'signature-lowercase.vtt'],
+ ['missing whitespace', 'signature-missing-whitespace.vtt'],
+ ['missing', 'signature-missing.vtt'],
+ ['null', 'signature-null.vtt'],
+ ['partial', 'signature-partial.vtt'],
+ ['two boms', 'signature-two-boms.vtt'],
+ ['websrt', 'signature-websrt.vtt'],
+].forEach(function(test_data) {
+ var test_name = 'signature, ' + test_data[0];
+ var test_file = 'support/' + test_data[1];
+
+ var test = async_test(test_name);
+ test.step(function() {
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = test_file;
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+ });
+
+ function trackLoaded(event) {
+ assert_unreached('track should fail to load');
+ this.done();
+ }
+
+ function trackError(e) {
+ this.done();
+ }
+});
+done();
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/arrows.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/arrows.test
new file mode 100644
index 0000000000..72207a2417
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/arrows.test
@@ -0,0 +1,38 @@
+arrows
+<link rel="help" href="https://w3c.github.io/webvtt/#cue-timings-and-settings-parsing">
+
+assert_equals(cues.length, 6);
+
+for (var i = 0; i < cues.length; i++) {
+ assert_equals(cues[i].id, '', 'Failed with cue ' + i);
+ assert_equals(cues[i].text, 'text' + i, 'Failed with cue ' + i);
+}
+
+===
+WEBVTT
+
+-->
+00:00:00.000 --> 00:00:01.000
+text0
+foo-->
+00:00:00.000 --> 00:00:01.000
+text1
+-->foo
+00:00:00.000 --> 00:00:01.000
+text2
+--->
+00:00:00.000 --> 00:00:01.000
+text3
+-->-->
+00:00:00.000 --> 00:00:01.000
+text4
+00:00:00.000 --> 00:00:01.000
+text5
+
+00:00:00.000 -a -->
+
+00:00:00.000 --a -->
+
+00:00:00.000 - -->
+
+00:00:00.000 -- -->
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/comment-in-cue-text.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/comment-in-cue-text.test
new file mode 100644
index 0000000000..38e4b9f16e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/comment-in-cue-text.test
@@ -0,0 +1,28 @@
+comment-in-cue-text
+<link rel="help" href="https://www.w3.org/TR/webvtt1/#introduction-comments">
+
+assert_equals(cues.length, 2);
+
+assert_equals(cues[0].text, 'NOTE text');
+assert_equals(cues[0].startTime, 0);
+assert_equals(cues[0].endTime, 1);
+
+assert_equals(cues[1].text, 'NOTE text\nNOTE text2');
+assert_equals(cues[1].startTime, 1);
+assert_equals(cues[1].endTime, 2);
+
+===
+WEBVTT
+
+NOTE this is real comment that should be ignored
+
+00:00:00.000 --> 00:00:01.000
+NOTE text
+
+NOTE
+this is also a real comment that should be ignored
+this is also a real comment that should be ignored
+
+00:00:01.000 --> 00:00:02.000
+NOTE text
+NOTE text2
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/empty.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/empty.vtt
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/empty.vtt
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-garbage.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-garbage.test
new file mode 100644
index 0000000000..a8714aae91
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-garbage.test
@@ -0,0 +1,15 @@
+header, garbage
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block">
+
+assert_equals(cues.length, 1);
+
+assert_equals(cues[0].text, 'text');
+assert_equals(cues[0].startTime, 0);
+assert_equals(cues[0].endTime, 1);
+
+===
+WEBVTT
+foobar
+
+00:00:00.000 --> 00:00:01.000
+text \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-space.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-space.test
new file mode 100644
index 0000000000..3b2fa7dc90
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-space.test
@@ -0,0 +1,14 @@
+header, space
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block">
+
+assert_equals(cues.length, 1);
+
+assert_equals(cues[0].text, 'text');
+assert_equals(cues[0].startTime, 0);
+assert_equals(cues[0].endTime, 1);
+
+===
+WEBVTT
+\x20
+00:00:00.000 --> 00:00:01.000
+text \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-tab.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-tab.test
new file mode 100644
index 0000000000..91892d614a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-tab.test
@@ -0,0 +1,14 @@
+header, tab
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block">
+
+assert_equals(cues.length, 1);
+
+assert_equals(cues[0].text, 'text');
+assert_equals(cues[0].startTime, 0);
+assert_equals(cues[0].endTime, 1);
+
+===
+WEBVTT
+\t
+00:00:00.000 --> 00:00:01.000
+text
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-timings.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-timings.test
new file mode 100644
index 0000000000..c3348e43f8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-timings.test
@@ -0,0 +1,13 @@
+header, timings
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block">
+
+assert_equals(cues.length, 1);
+
+assert_equals(cues[0].text, 'text');
+assert_equals(cues[0].startTime, 0);
+assert_equals(cues[0].endTime, 1);
+
+===
+WEBVTT
+00:00:00.000 --> 00:00:01.000
+text \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/ids.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/ids.test
new file mode 100644
index 0000000000..135f1c6abc
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/ids.test
@@ -0,0 +1,32 @@
+ids
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block">
+
+assert_equals(cues.length, 5);
+assert_equals(cues[0].id, " leading space");
+assert_equals(cues[1].id, "trailing space ");
+assert_equals(cues[2].id, "-- >");
+assert_equals(cues[3].id, "->");
+assert_equals(cues[4].id, " ");
+
+===
+WEBVTT
+
+\x20leading space
+00:00:00.000 --> 00:00:01.000
+text0
+
+trailing space\x20
+00:00:00.000 --> 00:00:01.000
+text1
+
+-- >
+00:00:00.000 --> 00:00:01.000
+text2
+
+->
+00:00:00.000 --> 00:00:01.000
+text3
+
+\x20
+00:00:00.000 --> 00:00:01.000
+text4
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/newlines.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/newlines.test
new file mode 100644
index 0000000000..2d10536b68
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/newlines.test
@@ -0,0 +1,36 @@
+newlines
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+
+assert_equals(cues.length, 4);
+
+assert_equals(cues[0].id, "cr");
+assert_equals(cues[0].text, "text0");
+
+assert_equals(cues[1].id, "lf");
+assert_equals(cues[1].text, "text1");
+
+assert_equals(cues[2].id, "crlf");
+assert_equals(cues[2].text, "text2");
+
+assert_equals(cues[3].id, "lfcr");
+assert_equals(cues[3].text, "text3");
+
+===
+WEBVTT\r\
+\r\
+cr\r\
+00:00:00.000 --> 00:00:01.000\r\
+text0\n\
+\n\
+lf\n\
+00:00:00.000 --> 00:00:01.000\n\
+text1\r\n\
+\r\n\
+crlf\r\n\
+00:00:00.000 --> 00:00:01.000\r\n\
+text2\n\
+\r\
+lfcr\r\
+00:00:00.000 --> 00:00:01.000\n\
+text3\n\
+\r
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/nulls.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/nulls.test
new file mode 100644
index 0000000000..02450ce5c4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/nulls.test
@@ -0,0 +1,232 @@
+nulls
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+
+assert_equals(cues.length, 7, cues);
+
+assert_equals(cues[0].id, "");
+assert_equals(cues[0].text, "text0");
+
+assert_equals(cues[1].id, "\uFFFD (null in id)");
+assert_equals(cues[1].text, "text1");
+
+assert_equals(cues[2].id, "\uFFFD (null in cue data)");
+assert_equals(cues[2].text, "\uFFFDtext\uFFFD2");
+
+assert_equals(cues[3].align, "center");
+assert_equals(cues[3].text, "text3");
+
+assert_equals(cues[4].align, "center");
+assert_equals(cues[4].text, "text4");
+
+assert_equals(cues[5].align, "center");
+assert_equals(cues[5].text, "text5");
+
+assert_equals(cues[6].align, "end");
+assert_equals(cues[6].text, "text6");
+
+===
+WEBVTT
+\x00
+(null in previous line should make this line also part of the header)
+00:00:00.000 --> 00:00:01.000
+text0
+
+\x00 (null in id)
+00:00:00.000 --> 00:00:01.000
+text1
+
+\uFFFD (null in cue data)
+00:00:00.000 --> 00:00:01.000
+\uFFFDtext\x002
+
+00:00:00.000 --> 00:00:01.000 align\x00:end
+text3
+
+00:00:00.000 --> 00:00:01.000 align:end\x00
+text4
+
+00:00:00.000 --> 00:00:01.000\x00align:end
+text5
+
+00:00:00.000 --> 00:00:01.000\x00 align:end
+text6
+
+00:00:00.000\x00 --> 00:00:01.000
+invalid
+
+00:00:00.000 -->\x0000:00:01.000
+invalid
+
+\x0000:00:00.000 --> 00:00:01.000
+invalid
+
+0\x000:00:00.000 --> 00:00:01.000
+invalid
+
+00\x00:00:00.000 --> 00:00:01.000
+invalid
+
+00:\x0000:00.000 --> 00:00:01.000
+invalid
+
+00:0\x000:00.000 --> 00:00:01.000
+invalid
+
+00:00\x00:00.000 --> 00:00:01.000
+invalid
+
+00:00:\x0000.000 --> 00:00:01.000
+invalid
+
+00:00:0\x000.000 --> 00:00:01.000
+invalid
+
+00:00:00\x00.000 --> 00:00:01.000
+invalid
+
+00:00:00.\x00000 --> 00:00:01.000
+invalid
+
+00:00:00.0\x0000 --> 00:00:01.000
+invalid
+
+00:00:00.00\x000 --> 00:00:01.000
+invalid
+
+00:00:00.000\x00 --> 00:00:01.000
+invalid
+
+00:00:00.000 \x00--> 00:00:01.000
+invalid
+
+00:00:00.000 -\x00-> 00:00:01.000
+invalid
+
+00:00:00.000 --\x00> 00:00:01.000
+invalid
+
+00:00:00.000 -->\x00 00:00:01.000
+invalid
+
+00:00:00.000 --> \x0000:00:01.000
+invalid
+
+00:00:00.000 --> 0\x000:00:01.000
+invalid
+
+00:00:00.000 --> 00\x00:00:01.000
+invalid
+
+00:00:00.000 --> 00:\x0000:01.000
+invalid
+
+00:00:00.000 --> 00:0\x000:01.000
+invalid
+
+00:00:00.000 --> 00:00\x00:01.000
+invalid
+
+00:00:00.000 --> 00:00:\x0001.000
+invalid
+
+00:00:00.000 --> 00:00:0\x001.000
+invalid
+
+00:00:00.000 --> 00:00:01\x00.000
+invalid
+
+00:00:00.000 --> 00:00:01.\x00000
+invalid
+
+00:00:00.000 --> 00:00:01.0\x0000
+invalid
+
+00:00:00.000 --> 00:00:01.00\x000
+invalid
+
+\x000:00:00.000 --> 00:00:01.000
+invalid
+
+0\x00:00:00.000 --> 00:00:01.000
+invalid
+
+00\x0000:00.000 --> 00:00:01.000
+invalid
+
+00:\x000:00.000 --> 00:00:01.000
+invalid
+
+00:0\x00:00.000 --> 00:00:01.000
+invalid
+
+00:00\x0000.000 --> 00:00:01.000
+invalid
+
+00:00:\x000.000 --> 00:00:01.000
+invalid
+
+00:00:0\x00.000 --> 00:00:01.000
+invalid
+
+00:00:00\x00000 --> 00:00:01.000
+invalid
+
+00:00:00.\x0000 --> 00:00:01.000
+invalid
+
+00:00:00.0\x000 --> 00:00:01.000
+invalid
+
+00:00:00.00\x00 --> 00:00:01.000
+invalid
+
+00:00:00.000\x00--> 00:00:01.000
+invalid
+
+00:00:00.000 \x00-> 00:00:01.000
+invalid
+
+00:00:00.000 -\x00> 00:00:01.000
+invalid
+
+00:00:00.000 --\x00 00:00:01.000
+invalid
+
+00:00:00.000 -->\x0000:00:01.000
+invalid
+
+00:00:00.000 --> \x000:00:01.000
+invalid
+
+00:00:00.000 --> 0\x00:00:01.000
+invalid
+
+00:00:00.000 --> 00\x0000:01.000
+invalid
+
+00:00:00.000 --> 00:\x000:01.000
+invalid
+
+00:00:00.000 --> 00:0\x00:01.000
+invalid
+
+00:00:00.000 --> 00:00\x0001.000
+invalid
+
+00:00:00.000 --> 00:00:\x001.000
+invalid
+
+00:00:00.000 --> 00:00:0\x00.000
+invalid
+
+00:00:00.000 --> 00:00:01\x00000
+invalid
+
+00:00:00.000 --> 00:00:01.\x0000
+invalid
+
+00:00:00.000 --> 00:00:01.0\x000
+invalid
+
+00:00:00.000 --> 00:00:01.00\x00
+invalid
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-id.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-id.test
new file mode 100644
index 0000000000..b611f84371
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-id.test
@@ -0,0 +1,52 @@
+regions, id
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings">
+
+assert_equals(cues.length, 4);
+
+var region1 = cues[0].region;
+assert_equals(region1.lines, 2);
+
+var region2 = cues[1].region;
+assert_equals(region2.lines, 1);
+
+var region3 = cues[2].region;
+assert_equals(region3.lines, 3);
+
+var region4 = cues[3].region;
+assert_equals(region4.lines, 4);
+
+===
+WEBVTT
+
+NOTE No API for accessing region ids, so using lines to uniquely identify regions
+
+REGION
+id:foo
+id:bar
+lines:1
+
+REGION
+id:bar id:foo
+lines:2
+
+REGION
+id:id
+id: foo
+id :bar
+lines:3
+
+REGION
+id:\v
+lines:4
+
+00:00:00.000 --> 00:00:01.000 region:foo
+valid
+
+00:00:00.000 --> 00:00:01.000 region:bar
+valid
+
+00:00:00.000 --> 00:00:01.000 region:id
+valid
+
+00:00:00.000 --> 00:00:01.000 region:\v
+valid
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-lines.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-lines.test
new file mode 100644
index 0000000000..a492a5448c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-lines.test
@@ -0,0 +1,129 @@
+regions, lines
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings">
+
+assert_equals(cues.length, 13);
+
+var regions = Array.from(cues).map(function(cue) {
+ return cue.region;
+});
+
+var valid_lines = [
+ 0,
+ 1,
+ 100,
+ 101,
+ 65536,
+ 4294967296,
+ 18446744073709552000,
+ 10000000000000000000000000000000000,
+ 2,
+];
+valid_lines.forEach(function(valid, index) {
+ assert_equals(regions[index].lines, valid, 'Failed with region ' + index);
+});
+
+for (var i = 0; i < 4; i++) {
+ var index = valid_lines.length + i;
+
+ assert_equals(regions[index].lines, 3, 'Failed with region ' + index);
+}
+
+===
+WEBVTT
+
+NOTE valid
+
+REGION
+id:1
+lines:0
+
+REGION
+id:2
+lines:1
+
+REGION
+id:3
+lines:100
+
+REGION
+id:4
+lines:101
+
+REGION
+id:5
+lines:65536
+
+REGION
+id:6
+lines:4294967296
+
+REGION
+id:7
+lines:18446744073709552000
+
+REGION
+id:8
+lines:10000000000000000000000000000000000
+
+REGION
+id:9
+lines:1 lines:3
+lines:2
+
+NOTE invalid
+
+REGION
+id:10
+lines:-0
+
+REGION
+id:11
+lines:1.5
+
+REGION
+id:12
+lines:-1
+
+REGION
+id:13
+lines: 1
+lines :1
+
+00:00:00.000 --> 00:00:01.000 region:1
+text
+
+00:00:00.000 --> 00:00:01.000 region:2
+text
+
+00:00:00.000 --> 00:00:01.000 region:3
+text
+
+00:00:00.000 --> 00:00:01.000 region:4
+text
+
+00:00:00.000 --> 00:00:01.000 region:5
+text
+
+00:00:00.000 --> 00:00:01.000 region:6
+text
+
+00:00:00.000 --> 00:00:01.000 region:7
+text
+
+00:00:00.000 --> 00:00:01.000 region:8
+text
+
+00:00:00.000 --> 00:00:01.000 region:9
+text
+
+00:00:00.000 --> 00:00:01.000 region:10
+text
+
+00:00:00.000 --> 00:00:01.000 region:11
+text
+
+00:00:00.000 --> 00:00:01.000 region:12
+text
+
+00:00:00.000 --> 00:00:01.000 region:13
+text
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-old.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-old.test
new file mode 100644
index 0000000000..4acb54b262
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-old.test
@@ -0,0 +1,18 @@
+regions, old
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings">
+
+assert_equals(cues.length, 2);
+
+assert_equals(cues[0].region, null);
+assert_equals(cues[1].region, null);
+
+===
+WEBVTT
+Region: id=foo width=40% lines=3 regionanchor=0%,100% viewportanchor=10%,90% scroll=up
+Region: id=bar width=40% lines=3 regionanchor=100%,100% viewportanchor=90%,90% scroll=up
+
+00:00:00.000 --> 00:00:01.000 region:foo
+text0
+
+00:00:00.000 --> 00:00:01.000 region:bar
+text1
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-regionanchor.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-regionanchor.test
new file mode 100644
index 0000000000..0b0a896e20
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-regionanchor.test
@@ -0,0 +1,182 @@
+regions, regionanchor
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings">
+
+assert_equals(cues.length, 20);
+
+var regions = Array.from(cues).map(function(cue) {
+ return cue.region;
+});
+
+var valid_anchors = [
+ [0, 100],
+ [0, 0],
+ [1, 1],
+ [100, 0],
+ [0, 100],
+ [100, 100],
+];
+valid_anchors.forEach(function(pair, index) {
+ var anchorX = pair[0];
+ var anchorY = pair[1];
+
+ assert_equals(regions[index].regionAnchorX, anchorX, 'Failed with region ' + index);
+ assert_equals(regions[index].regionAnchorY, anchorY, 'Failed with region ' + index);
+});
+
+for (var i = 0; i < 14; i++) {
+ var index = valid_anchors.length + i;
+
+ assert_equals(regions[index].regionAnchorX, 0, 'Failed with region ' + index);
+ assert_equals(regions[index].regionAnchorY, 100, 'Failed with region ' + index);
+}
+
+===
+WEBVTT
+
+NOTE valid
+
+REGION
+id:0
+
+REGION
+id:1
+regionanchor:0%,0%
+
+REGION
+id:2
+regionanchor:1%,1%
+
+REGION
+id:3
+regionanchor:100%,0%
+
+REGION
+id:4
+regionanchor:0%,100%
+
+REGION
+id:5
+regionanchor:100%,100%
+
+NOTE invalid
+
+REGION
+id:6
+regionanchor:0,0
+
+REGION
+id:7
+regionanchor:0%,0
+
+REGION
+id:8
+regionanchor:0,0%
+
+REGION
+id:9
+regionanchor:1%
+
+REGION
+id:10
+regionanchor:,1%
+
+REGION
+id:11
+regionanchor:101%,1%
+
+REGION
+id:12
+regionanchor:1%,101%
+
+REGION
+id:13
+regionanchor:-0%,0%
+
+REGION
+id:14
+regionanchor:0%,-0%
+
+REGION
+id:15
+regionanchor:65536%,65536%
+
+REGION
+id:16
+regionanchor:4294967296%,4294967296%
+
+REGION
+id:17
+regionanchor:18446744073709552000%,18446744073709552000%
+
+REGION
+id:18
+regionanchor:10000000000000000000000000000000000%,10000000000000000000000000000000000%
+
+REGION
+id:19
+regionanchor: 100%,100%
+regionanchor :100%,100%
+regionanchor:100% ,100%
+regionanchor:100%, 100%
+regionanchor:100 %,100%
+regionanchor:100%,100 %
+
+00:00:00.000 --> 00:00:01.000 region:0
+text
+
+00:00:00.000 --> 00:00:01.000 region:1
+text
+
+00:00:00.000 --> 00:00:01.000 region:2
+text
+
+00:00:00.000 --> 00:00:01.000 region:3
+text
+
+00:00:00.000 --> 00:00:01.000 region:4
+text
+
+00:00:00.000 --> 00:00:01.000 region:5
+text
+
+00:00:00.000 --> 00:00:01.000 region:6
+text
+
+00:00:00.000 --> 00:00:01.000 region:7
+text
+
+00:00:00.000 --> 00:00:01.000 region:8
+text
+
+00:00:00.000 --> 00:00:01.000 region:9
+text
+
+00:00:00.000 --> 00:00:01.000 region:10
+text
+
+00:00:00.000 --> 00:00:01.000 region:11
+text
+
+00:00:00.000 --> 00:00:01.000 region:12
+text
+
+00:00:00.000 --> 00:00:01.000 region:13
+text
+
+00:00:00.000 --> 00:00:01.000 region:14
+text
+
+00:00:00.000 --> 00:00:01.000 region:15
+text
+
+00:00:00.000 --> 00:00:01.000 region:16
+text
+
+00:00:00.000 --> 00:00:01.000 region:17
+text
+
+00:00:00.000 --> 00:00:01.000 region:18
+text
+
+00:00:00.000 --> 00:00:01.000 region:19
+text
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-scroll.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-scroll.test
new file mode 100644
index 0000000000..f4b27800dd
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-scroll.test
@@ -0,0 +1,67 @@
+regions, scroll
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings">
+
+assert_equals(cues.length, 6);
+
+var regions = Array.from(cues).map(function(cue) {
+ return cue.region;
+});
+
+var valid_lines = [
+ '',
+ 'up',
+ 'up',
+ '',
+ '',
+ 'up',
+].forEach(function(valid, index) {
+ assert_equals(regions[index].scroll, valid, 'Failed with region ' + index);
+});
+
+===
+WEBVTT
+
+REGION
+id:0
+
+REGION
+id:1
+scroll:up
+
+REGION
+id:2
+scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up
+scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up
+
+REGION
+id:3
+scroll:down
+scroll:left
+scroll:right
+
+REGION
+id:4
+scroll: up
+scroll :up
+
+REGION
+id:5
+scroll:up scroll:
+
+00:00:00.000 --> 00:00:01.000 region:0
+text
+
+00:00:00.000 --> 00:00:01.000 region:1
+text
+
+00:00:00.000 --> 00:00:01.000 region:2
+text
+
+00:00:00.000 --> 00:00:01.000 region:3
+text
+
+00:00:00.000 --> 00:00:01.000 region:4
+text
+
+00:00:00.000 --> 00:00:01.000 region:5
+text
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-viewportanchor.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-viewportanchor.test
new file mode 100644
index 0000000000..c63816d0c4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-viewportanchor.test
@@ -0,0 +1,182 @@
+regions, viewportanchor
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings">
+
+assert_equals(cues.length, 20);
+
+var regions = Array.from(cues).map(function(cue) {
+ return cue.region;
+});
+
+var valid_anchors = [
+ [0, 100],
+ [0, 0],
+ [1, 1],
+ [100, 0],
+ [0, 100],
+ [100, 100],
+];
+valid_anchors.forEach(function(pair, index) {
+ var anchorX = pair[0];
+ var anchorY = pair[1];
+
+ assert_equals(regions[index].viewportAnchorX, anchorX, 'Failed with region ' + index);
+ assert_equals(regions[index].viewportAnchorY, anchorY, 'Failed with region ' + index);
+});
+
+for (var i = 0; i < 14; i++) {
+ var index = valid_anchors.length + i;
+
+ assert_equals(regions[index].viewportAnchorX, 0, 'Failed with region ' + index);
+ assert_equals(regions[index].viewportAnchorY, 100, 'Failed with region ' + index);
+}
+
+===
+WEBVTT
+
+NOTE valid
+
+REGION
+id:0
+
+REGION
+id:1
+viewportanchor:0%,0%
+
+REGION
+id:2
+viewportanchor:1%,1%
+
+REGION
+id:3
+viewportanchor:100%,0%
+
+REGION
+id:4
+viewportanchor:0%,100%
+
+REGION
+id:5
+viewportanchor:100%,100%
+
+NOTE invalid
+
+REGION
+id:6
+viewportanchor:0,0
+
+REGION
+id:7
+viewportanchor:0%,0
+
+REGION
+id:8
+viewportanchor:0,0%
+
+REGION
+id:9
+viewportanchor:1%
+
+REGION
+id:10
+viewportanchor:,1%
+
+REGION
+id:11
+viewportanchor:101%,1%
+
+REGION
+id:12
+viewportanchor:1%,101%
+
+REGION
+id:13
+viewportanchor:-0%,0%
+
+REGION
+id:14
+viewportanchor:0%,-0%
+
+REGION
+id:15
+viewportanchor:65536%,65536%
+
+REGION
+id:16
+viewportanchor:4294967296%,4294967296%
+
+REGION
+id:17
+viewportanchor:18446744073709552000%,18446744073709552000%
+
+REGION
+id:18
+viewportanchor:10000000000000000000000000000000000%,10000000000000000000000000000000000%
+
+REGION
+id:19
+viewportanchor: 100%,100%
+viewportanchor :100%,100%
+viewportanchor:100% ,100%
+viewportanchor:100%, 100%
+viewportanchor:100 %,100%
+viewportanchor:100%,100 %
+
+00:00:00.000 --> 00:00:01.000 region:0
+text
+
+00:00:00.000 --> 00:00:01.000 region:1
+text
+
+00:00:00.000 --> 00:00:01.000 region:2
+text
+
+00:00:00.000 --> 00:00:01.000 region:3
+text
+
+00:00:00.000 --> 00:00:01.000 region:4
+text
+
+00:00:00.000 --> 00:00:01.000 region:5
+text
+
+00:00:00.000 --> 00:00:01.000 region:6
+text
+
+00:00:00.000 --> 00:00:01.000 region:7
+text
+
+00:00:00.000 --> 00:00:01.000 region:8
+text
+
+00:00:00.000 --> 00:00:01.000 region:9
+text
+
+00:00:00.000 --> 00:00:01.000 region:10
+text
+
+00:00:00.000 --> 00:00:01.000 region:11
+text
+
+00:00:00.000 --> 00:00:01.000 region:12
+text
+
+00:00:00.000 --> 00:00:01.000 region:13
+text
+
+00:00:00.000 --> 00:00:01.000 region:14
+text
+
+00:00:00.000 --> 00:00:01.000 region:15
+text
+
+00:00:00.000 --> 00:00:01.000 region:16
+text
+
+00:00:00.000 --> 00:00:01.000 region:17
+text
+
+00:00:00.000 --> 00:00:01.000 region:18
+text
+
+00:00:00.000 --> 00:00:01.000 region:19
+text
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-align.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-align.test
new file mode 100644
index 0000000000..ec5618a64b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-align.test
@@ -0,0 +1,64 @@
+settings, align
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings">
+
+assert_equals(cues.length, 13);
+
+[
+ 'center',
+ 'start',
+ 'center',
+ 'end',
+ 'left',
+ 'right',
+ 'end',
+ 'end',
+ 'end',
+ 'end',
+ 'end',
+ 'end',
+ 'center',
+].forEach(function(valid, index) {
+ assert_equals(cues[index].align, valid, 'Failed with cue ' + index);
+});
+
+===
+WEBVTT
+
+00:00:00.000 --> 00:00:01.000
+text0
+
+00:00:00.000 --> 00:00:01.000 align:start
+text1
+
+00:00:00.000 --> 00:00:01.000 align:center
+text2
+
+00:00:00.000 --> 00:00:01.000 align:end
+text3
+
+00:00:00.000 --> 00:00:01.000 align:left
+text4
+
+00:00:00.000 --> 00:00:01.000 align:right
+text5
+
+00:00:00.000 --> 00:00:01.000 align:start align:end
+text6
+
+00:00:00.000 --> 00:00:01.000 align:end align:CENTER
+text7
+
+00:00:00.000 --> 00:00:01.000 align:end align: center
+text8
+
+00:00:00.000 --> 00:00:01.000 align:end align:
+text9
+
+00:00:00.000 --> 00:00:01.000 align:end align:middle
+text10
+
+00:00:00.000 --> 00:00:01.000 align:end align
+text11
+
+00:00:00.000 --> 00:00:01.000 align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:center
+text12
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-line.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-line.test
new file mode 100644
index 0000000000..5b68d9c8ab
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-line.test
@@ -0,0 +1,223 @@
+settings, line
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings">
+
+assert_equals(cues.length, 46);
+
+// Test starts with simple valid values
+var valid_values = [
+ -1,
+ 0,
+ 0,
+ 1,
+ 100,
+ 101,
+ 65536,
+ 4294967296,
+ 18446744073709552000,
+ 10000000000000000000000000000000000,
+ 1.5,
+ Number.MAX_VALUE,
+ -1 * Number.MAX_VALUE,
+ Number.MIN_VALUE,
+ 0, // Less than Number.MIN_VALUE
+];
+valid_values.forEach(function(valid, index) {
+ assert_equals(cues[index].line, valid, 'Failed with cue ' + index);
+ assert_true(cues[index].snapToLines, 'Failed with cue ' + index);
+});
+
+// Then a set of invalid ones
+var invalid_length = 23;
+for (var i = 0; i < invalid_length; i++) {
+ var index = valid_values.length + i;
+
+ assert_equals(cues[index].line, 'auto', 'Failed with cue ' + index);
+ assert_true(cues[index].snapToLines, 'Failed with cue ' + index);
+}
+
+// Then more specific tests
+var index = valid_values.length + invalid_length;
+
+assert_equals(cues[index].line, 0);
+assert_false(cues[index].snapToLines);
+
+assert_equals(cues[index + 1].line, 0);
+assert_false(cues[index + 1].snapToLines);
+
+assert_equals(cues[index + 2].line, 100);
+assert_false(cues[index + 2].snapToLines);
+assert_equals(cues[index + 2].lineAlign, 'start');
+
+assert_equals(cues[index + 3].line, 100);
+assert_false(cues[index + 3].snapToLines);
+assert_equals(cues[index + 3].lineAlign, 'start');
+
+assert_equals(cues[index + 4].line, 100);
+assert_false(cues[index + 4].snapToLines);
+assert_equals(cues[index + 4].lineAlign, 'center');
+
+assert_equals(cues[index + 5].line, 100);
+assert_false(cues[index + 5].snapToLines);
+assert_equals(cues[index + 5].lineAlign, 'end');
+
+assert_equals(cues[index + 6].line, Number.MIN_VALUE);
+assert_false(cues[index + 6].snapToLines);
+
+assert_equals(cues[index + 7].line, 0);
+assert_false(cues[index + 7].snapToLines);
+
+===
+WEBVTT
+
+NOTE valid
+
+00:00:00.000 --> 00:00:01.000 line:-1
+valid0
+
+00:00:00.000 --> 00:00:01.000 line:0
+valid1
+
+00:00:00.000 --> 00:00:01.000 line:-0
+valid2
+
+00:00:00.000 --> 00:00:01.000 line:1
+valid3
+
+00:00:00.000 --> 00:00:01.000 line:100
+valid4
+
+00:00:00.000 --> 00:00:01.000 line:101
+valid5
+
+00:00:00.000 --> 00:00:01.000 line:65536
+valid6
+
+00:00:00.000 --> 00:00:01.000 line:4294967296
+valid7
+
+00:00:00.000 --> 00:00:01.000 line:18446744073709552000
+valid8
+
+00:00:00.000 --> 00:00:01.000 line:10000000000000000000000000000000000
+valid9
+
+00:00:00.000 --> 00:00:01.000 line:1.5
+valid10
+
+Number.MAX_VALUE
+00:00:00.000 --> 00:00:01.000 line:179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+valid11
+
+-1 * Number.MAX_VALUE
+00:00:00.000 --> 00:00:01.000 line:-179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+valid12
+
+Number.MIN_VALUE
+00:00:00.000 --> 00:00:01.000 line:0.000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000005
+valid13
+
+Less than Number.MIN_VALUE
+00:00:00.000 --> 00:00:01.000 line:0.000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002
+valid14
+
+NOTE invalid
+
+00:00:00.000 --> 00:00:01.000 line:65536%
+invalid15
+
+00:00:00.000 --> 00:00:01.000 line:4294967296%
+invalid16
+
+00:00:00.000 --> 00:00:01.000 line:18446744073709552000%
+invalid17
+
+00:00:00.000 --> 00:00:01.000 line:10000000000000000000000000000000000%
+invalid18
+
+00:00:00.000 --> 00:00:01.000 line:-0%
+invalid19
+
+00:00:00.000 --> 00:00:01.000 line:101%
+invalid20
+
+00:00:00.000 --> 00:00:01.000 line:1%-
+invalid21
+
+00:00:00.000 --> 00:00:01.000 line:1-
+invalid22
+
+00:00:00.000 --> 00:00:01.000 line:%1
+invalid23
+
+00:00:00.000 --> 00:00:01.000 line:1%%
+invalid24
+
+00:00:00.000 --> 00:00:01.000 line:0%0
+invalid25
+
+00:00:00.000 --> 00:00:01.000 line: 0%
+invalid26
+
+00:00:00.000 --> 00:00:01.000 line:0%x
+invalid27
+
+00:00:00.000 --> 00:00:01.000 line:-
+invalid28
+
+00:00:00.000 --> 00:00:01.000 line:%
+invalid29
+
+00:00:00.000 --> 00:00:01.000 line:1..5
+invalid30
+
+00:00:00.000 --> 00:00:01.000 line:.5
+invalid31
+
+00:00:00.000 --> 00:00:01.000 line:5.
+invalid32
+
+Greater than Number.MAX_VALUE
+00:00:00.000 --> 00:00:01.000 line:179769313486231590000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+invalid33
+
+Less than -1 * Number.MAX_VALUE
+00:00:00.000 --> 00:00:01.000 line:-179769313486231590000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+invalid34
+
+exponential notation
+00:00:00.000 --> 00:00:01.000 line:1e2
+invalid35
+
+00:00:00.000 --> 00:00:01.000 line:100%,middle
+invalid36
+
+00:00:00.000 --> 00:00:01.000 line:100%,
+invalid37
+
+NOTE extra
+
+00:00:00.000 --> 00:00:01.000 line:0%
+text38
+
+00:00:00.000 --> 00:00:01.000 line:00%
+text39
+
+00:00:00.000 --> 00:00:01.000 line:100%
+text40
+
+00:00:00.000 --> 00:00:01.000 line:100%,start
+text41
+
+00:00:00.000 --> 00:00:01.000 line:100%,center
+text42
+
+00:00:00.000 --> 00:00:01.000 line:100%,end
+text43
+
+Number.MIN_VALUE %
+00:00:00.000 --> 00:00:01.000 line:0.000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000005%
+text44
+
+Less than Number.MIN_VALUE %
+00:00:00.000 --> 00:00:01.000 line:0.000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002%
+text45
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-multiple.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-multiple.test
new file mode 100644
index 0000000000..2aa7dc1624
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-multiple.test
@@ -0,0 +1,34 @@
+settings, multiple
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings">
+
+assert_equals(cues.length, 2);
+
+var cue = cues[0];
+assert_equals(cue.id, 'id0');
+assert_equals(cue.text, 'text0');
+assert_equals(cue.align, 'start');
+assert_equals(cue.line, 1);
+assert_equals(cue.snapToLines, false);
+assert_equals(cue.vertical, 'lr');
+assert_equals(cue.size, 50);
+assert_equals(cue.position, 25);
+
+var cue = cues[1];
+assert_equals(cue.id, 'id1');
+assert_equals(cue.text, 'text1');
+assert_equals(cue.align, 'center');
+assert_equals(cue.line, 1);
+assert_equals(cue.vertical, 'rl');
+assert_equals(cue.size, 0);
+assert_equals(cue.position, 100);
+
+===
+WEBVTT
+
+id0
+00:00:00.000 --> 00:00:01.000 align:start line:1% vertical:lr size:50% position:25%
+text0
+
+id1
+00:00:00.000 --> 00:00:01.000 align:center line:1 vertical:rl size:0% position:100%
+text1
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-position.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-position.test
new file mode 100644
index 0000000000..efed18caea
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-position.test
@@ -0,0 +1,102 @@
+settings, position
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings">
+
+assert_equals(cues.length, 22);
+
+var valid_positions = [
+ [1, 'auto'],
+ [100, 'auto'],
+ [1, 'auto'],
+ [1.5, 'auto'],
+ [1, 'line-left'],
+ [1, 'center'],
+ [1, 'line-right'],
+ [1, 'auto'],
+];
+valid_positions.forEach(function(pair, index) {
+ var position = pair[0];
+ var positionAlign = pair[1];
+
+ assert_equals(cues[index].position, position, 'Failed with cue ' + index);
+ assert_equals(cues[index].positionAlign, positionAlign, 'Failed with cue ' + index);
+});
+
+for (var i = 0; i < 14; i++) {
+ var index = valid_positions.length + i;
+
+ assert_equals(cues[index].position, 'auto', 'Failed with cue ' + index);
+ assert_equals(cues[index].positionAlign, 'auto', 'Failed with cue ' + index);
+}
+
+===
+WEBVTT
+
+NOTE valid
+
+00:00:00.000 --> 00:00:01.000 position:1%
+text0
+
+00:00:00.000 --> 00:00:01.000 position:100%
+text1
+
+00:00:00.000 --> 00:00:01.000 position:1% position:x
+text2
+
+00:00:00.000 --> 00:00:01.000 position:1.5%
+text3
+
+00:00:00.000 --> 00:00:01.000 position:1%,line-left
+text4
+
+00:00:00.000 --> 00:00:01.000 position:1%,center
+text5
+
+00:00:00.000 --> 00:00:01.000 position:1%,line-right
+text6
+
+00:00:00.000 --> 00:00:01.000 position:1% ,center
+text7
+
+NOTE invalid
+
+00:00:00.000 --> 00:00:01.000 position:1%,middle
+invalid8
+
+00:00:00.000 --> 00:00:01.000 position:1%, center
+invalid9
+
+00:00:00.000 --> 00:00:01.000 position:-1%
+invalid10
+
+00:00:00.000 --> 00:00:01.000 position:1
+invalid11
+
+00:00:00.000 --> 00:00:01.000 position:1x
+invalid12
+
+00:00:00.000 --> 00:00:01.000 position:1%x
+invalid13
+
+00:00:00.000 --> 00:00:01.000 position:
+invalid14
+
+00:00:00.000 --> 00:00:01.000 position: 1%
+invalid15
+
+00:00:00.000 --> 00:00:01.000 position:101%
+invalid16
+
+00:00:00.000 --> 00:00:01.000 position:65536%
+invalid17
+
+00:00:00.000 --> 00:00:01.000 position:4294967296%
+invalid18
+
+00:00:00.000 --> 00:00:01.000 position:101%,line-left
+invalid19
+
+00:00:00.000 --> 00:00:01.000 position:101%,center
+invalid20
+
+00:00:00.000 --> 00:00:01.000 position:101%,line-right
+invalid21
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-region.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-region.test
new file mode 100644
index 0000000000..bfd0434e76
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-region.test
@@ -0,0 +1,71 @@
+settings, region
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings">
+
+assert_equals(cues.length, 9);
+
+var fooRegion = cues[0].region;
+assert_true(!!fooRegion, 'Cue 0 has invalid region');
+
+var barRegion = cues[1].region;
+assert_true(!!barRegion, 'Cue 1 has invalid region');
+
+assert_not_equals(fooRegion, barRegion);
+
+var valid_regions = [
+ fooRegion,
+ barRegion,
+ barRegion,
+ null,
+ fooRegion
+];
+valid_regions.forEach(function(valid, index) {
+ assert_equals(cues[index].region, valid, 'Failed with cue ' + index);
+});
+
+for (var i = 0; i < 4; i++) {
+ var index = valid_regions.length + i;
+
+ assert_equals(cues[index].region, null);
+}
+
+===
+WEBVTT
+
+REGION
+id:foo
+
+REGION
+id:bar
+
+REGION
+id:foo
+
+REGION
+width:10%
+
+00:00:00.000 --> 00:00:01.000 region:foo
+text0
+
+00:00:00.000 --> 00:00:01.000 region:bar
+text1
+
+00:00:00.000 --> 00:00:01.000 region:foo region:bar
+text2
+
+00:00:00.000 --> 00:00:01.000 region:invalid
+text3
+
+00:00:00.000 --> 00:00:01.000 region:invalid region:foo
+text4
+
+00:00:00.000 --> 00:00:01.000 region:
+invalid5
+
+00:00:00.000 --> 00:00:01.000 region:\x20
+invalid6
+
+00:00:00.000 --> 00:00:01.000 region: foo
+invalid7
+
+00:00:00.000 --> 00:00:01.000 region :foo
+invalid8
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-size.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-size.test
new file mode 100644
index 0000000000..4c2de1d5f2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-size.test
@@ -0,0 +1,78 @@
+settings, size
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings">
+
+assert_equals(cues.length, 16);
+
+var valid_sizes = [
+ 100,
+ 2,
+ 0,
+ 0,
+ 100,
+ 50,
+ 1.5,
+];
+valid_sizes.forEach(function(valid, index) {
+ assert_equals(cues[index].size, valid, 'Failed with cue ' + index);
+});
+
+for (var i = 0; i < 9; i++) {
+ var index = valid_sizes.length + i;
+
+ assert_equals(cues[index].size, 100, 'Failed with cue ' + index);
+}
+
+===
+WEBVTT
+
+NOTE valid
+
+00:00:00.000 --> 00:00:01.000
+text0
+
+00:00:00.000 --> 00:00:01.000 size:1xx size:2%
+text1
+
+00:00:00.000 --> 00:00:01.000 size:0%
+text2
+
+00:00:00.000 --> 00:00:01.000 size:00%
+text3
+
+00:00:00.000 --> 00:00:01.000 size:50% size:100%
+text4
+
+00:00:00.000 --> 00:00:01.000 size:50% size:101%
+text5
+
+00:00:00.000 --> 00:00:01.000 size:1.5%
+text6
+
+NOTE invalid
+
+00:00:00.000 --> 00:00:01.000 size:
+invalid7
+
+00:00:00.000 --> 00:00:01.000 size:x
+invalid8
+
+00:00:00.000 --> 00:00:01.000 size:%
+invalid9
+
+00:00:00.000 --> 00:00:01.000 size:%%
+invalid10
+
+00:00:00.000 --> 00:00:01.000 size:1%%
+invalid11
+
+00:00:00.000 --> 00:00:01.000 size:1%x
+invalid12
+
+00:00:00.000 --> 00:00:01.000 size:101%
+invalid13
+
+00:00:00.000 --> 00:00:01.000 size:-3%
+invalid14
+
+00:00:00.000 --> 00:00:01.000 size:200%
+invalid15
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-vertical.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-vertical.test
new file mode 100644
index 0000000000..33d23b2c46
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-vertical.test
@@ -0,0 +1,47 @@
+settings, size
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings">
+
+assert_equals(cues.length, 8);
+
+var valid_vertical = [
+ '',
+ 'lr',
+ 'rl',
+ 'lr',
+];
+valid_vertical.forEach(function(valid, index) {
+ assert_equals(cues[index].vertical, valid, 'Failed with cue ' + index);
+});
+
+for (var i = 0; i < 4; i++) {
+ var index = valid_vertical.length + i;
+
+ assert_equals(cues[index].vertical, '', 'Failed with cue ' + index);
+}
+
+===
+WEBVTT
+
+00:00:00.000 --> 00:00:01.000
+text0
+
+00:00:00.000 --> 00:00:01.000 vertical:lr
+text1
+
+00:00:00.000 --> 00:00:01.000 vertical:rl
+text2
+
+00:00:00.000 --> 00:00:01.000 vertical:rl vertical:lr
+text3
+
+00:00:00.000 --> 00:00:01.000 vertical:
+invalid4
+
+00:00:00.000 --> 00:00:01.000 vertical:RL
+invalid5
+
+00:00:00.000 --> 00:00:01.000 vertical: rl
+invalid6
+
+00:00:00.000 --> 00:00:01.000 vertical:vertical-rl
+invalid7
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-bom.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-bom.test
new file mode 100644
index 0000000000..245385f572
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-bom.test
@@ -0,0 +1,7 @@
+signature, bom
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+
+assert_equals(cues.length, 0);
+
+===
+\ufeffWEBVTT
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-formfeed.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-formfeed.vtt
new file mode 100644
index 0000000000..0ba5286373
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-formfeed.vtt
@@ -0,0 +1 @@
+WEBVTT
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-invalid-whitespace.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-invalid-whitespace.vtt
new file mode 100644
index 0000000000..1f67eaee97
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-invalid-whitespace.vtt
@@ -0,0 +1 @@
+WEBVTT foo
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-invalid.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-invalid.vtt
new file mode 100644
index 0000000000..5407fcb350
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-invalid.vtt
@@ -0,0 +1 @@
+VTTWEB
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-lowercase.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-lowercase.vtt
new file mode 100644
index 0000000000..994d1694fd
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-lowercase.vtt
@@ -0,0 +1 @@
+webvtt
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-missing-whitespace.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-missing-whitespace.vtt
new file mode 100644
index 0000000000..7ed44af02c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-missing-whitespace.vtt
@@ -0,0 +1 @@
+WEBVTTfoo
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-missing.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-missing.vtt
new file mode 100644
index 0000000000..bd90460a23
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-missing.vtt
@@ -0,0 +1,2 @@
+00:00:00.000 --> 00:00:01.000
+invalid
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-no-newline.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-no-newline.test
new file mode 100644
index 0000000000..13cf042c17
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-no-newline.test
@@ -0,0 +1,7 @@
+signature, no newline
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+
+assert_equals(cues.length, 0);
+
+===
+WEBVTT \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-null.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-null.vtt
new file mode 100644
index 0000000000..ead93cc166
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-null.vtt
Binary files differ
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-partial.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-partial.vtt
new file mode 100644
index 0000000000..3e5de2b6c9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-partial.vtt
@@ -0,0 +1 @@
+WEBVT
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-space-no-newline.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-space-no-newline.test
new file mode 100644
index 0000000000..021107316f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-space-no-newline.test
@@ -0,0 +1,7 @@
+signature, space, no newline
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+
+assert_equals(cues.length, 0);
+
+===
+WEBVTT\x20 \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-space.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-space.test
new file mode 100644
index 0000000000..349562eb9e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-space.test
@@ -0,0 +1,7 @@
+signature, space
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+
+assert_equals(cues.length, 0);
+
+===
+WEBVTT\x20
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-tab-no-newline.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-tab-no-newline.test
new file mode 100644
index 0000000000..fbca4bed60
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-tab-no-newline.test
@@ -0,0 +1,7 @@
+signature, tab, no newline
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+
+assert_equals(cues.length, 0);
+
+===
+WEBVTT\t \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-tab.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-tab.test
new file mode 100644
index 0000000000..3b500d0463
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-tab.test
@@ -0,0 +1,7 @@
+signature, tab
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+
+assert_equals(cues.length, 0);
+
+===
+WEBVTT\t
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-timings.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-timings.test
new file mode 100644
index 0000000000..0197e8ac42
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-timings.test
@@ -0,0 +1,8 @@
+signature, timings
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+
+assert_equals(cues.length, 0);
+
+===
+WEBVTT 00:00:00.000 --> 00:00:01.000
+text
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-two-boms.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-two-boms.vtt
new file mode 100644
index 0000000000..05c973be18
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-two-boms.vtt
@@ -0,0 +1 @@
+WEBVTT
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-websrt.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-websrt.vtt
new file mode 100644
index 0000000000..4a02525e38
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-websrt.vtt
@@ -0,0 +1 @@
+WEBSRT
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/stylesheets.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/stylesheets.test
new file mode 100644
index 0000000000..f4fbf424fc
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/stylesheets.test
@@ -0,0 +1,36 @@
+stylesheets, rules
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block">
+
+// There's no way to test the actual style from js
+assert_equals(document.styleSheets.length, 0);
+
+===
+WEBVTT
+
+STYLE
+::cue(#foo) {
+ width: 20px;
+} /*
+NOTE hello
+00:00:00.000 -- > 00:00:01.000
+*/
+.foo {
+ width: 19px;
+}
+
+.bar {
+ width: 18px;
+}
+
+foo
+00:00:00.000 --> 00:00:01.000
+text
+
+STYLE
+::cue(::bar) {
+ width: 18px;
+}
+
+bar
+00:00:00.000 --> 00:00:01.000
+text
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-60.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-60.test
new file mode 100644
index 0000000000..7cfe482392
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-60.test
@@ -0,0 +1,33 @@
+timings, 60
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp">
+
+assert_equals(cues.length, 2);
+
+assert_equals(cues[0].text, 'text1');
+assert_equals(cues[0].startTime, 0);
+assert_equals(cues[0].endTime, 216001);
+
+assert_equals(cues[1].text, 'text2');
+assert_equals(cues[1].startTime, 216000);
+assert_equals(cues[1].endTime, 216001);
+
+===
+WEBVTT
+
+00:00:60.000 --> 00:00:01.000
+invalid
+
+00:60:00.000 --> 00:00:01.000
+invalid
+
+00:00:00.000 --> 00:00:60.000
+invalid
+
+00:00:00.000 --> 00:60:00.000
+invalid
+
+00:00:00.000 --> 60:00:01.000
+text1
+
+60:00:00.000 --> 60:00:01.000
+text2
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-eof.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-eof.test
new file mode 100644
index 0000000000..7b871164e9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-eof.test
@@ -0,0 +1,9 @@
+timings, eof
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp">
+
+assert_equals(cues.length, 0);
+
+===
+WEBVTT
+
+00:00:00.000 --> \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-garbage.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-garbage.test
new file mode 100644
index 0000000000..99f7c28b42
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-garbage.test
@@ -0,0 +1,197 @@
+timings, garbage
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp">
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings">
+
+assert_equals(cues.length, 0);
+
+===
+WEBVTT
+
+x00:00:00.000 --> 00:00:01.000
+invalid
+
+0x0:00:00.000 --> 00:00:01.000
+invalid
+
+00x:00:00.000 --> 00:00:01.000
+invalid
+
+00:x00:00.000 --> 00:00:01.000
+invalid
+
+00:0x0:00.000 --> 00:00:01.000
+invalid
+
+00:00x:00.000 --> 00:00:01.000
+invalid
+
+00:00:x00.000 --> 00:00:01.000
+invalid
+
+00:00:0x0.000 --> 00:00:01.000
+invalid
+
+00:00:00x.000 --> 00:00:01.000
+invalid
+
+00:00:00.x000 --> 00:00:01.000
+invalid
+
+00:00:00.0x00 --> 00:00:01.000
+invalid
+
+00:00:00.00x0 --> 00:00:01.000
+invalid
+
+00:00:00.000x --> 00:00:01.000
+invalid
+
+00:00:00.000 x--> 00:00:01.000
+invalid
+
+00:00:00.000 -x-> 00:00:01.000
+invalid
+
+00:00:00.000 --x> 00:00:01.000
+invalid
+
+00:00:00.000 -->x 00:00:01.000
+invalid
+
+00:00:00.000 --> x00:00:01.000
+invalid
+
+00:00:00.000 --> 0x0:00:01.000
+invalid
+
+00:00:00.000 --> 00x:00:01.000
+invalid
+
+00:00:00.000 --> 00:x00:01.000
+invalid
+
+00:00:00.000 --> 00:0x0:01.000
+invalid
+
+00:00:00.000 --> 00:00x:01.000
+invalid
+
+00:00:00.000 --> 00:00:x01.000
+invalid
+
+00:00:00.000 --> 00:00:0x1.000
+invalid
+
+00:00:00.000 --> 00:00:01x.000
+invalid
+
+00:00:00.000 --> 00:00:01.x000
+invalid
+
+00:00:00.000 --> 00:00:01.0x00
+invalid
+
+00:00:00.000 --> 00:00:01.00x0
+invalid
+
+x0:00:00.000 --> 00:00:01.000
+invalid
+
+0x:00:00.000 --> 00:00:01.000
+invalid
+
+00x00:00.000 --> 00:00:01.000
+invalid
+
+00:x0:00.000 --> 00:00:01.000
+invalid
+
+00:0x:00.000 --> 00:00:01.000
+invalid
+
+00:00x00.000 --> 00:00:01.000
+invalid
+
+00:00:x0.000 --> 00:00:01.000
+invalid
+
+00:00:0x.000 --> 00:00:01.000
+invalid
+
+00:00:00x000 --> 00:00:01.000
+invalid
+
+00:00:00.x00 --> 00:00:01.000
+invalid
+
+00:00:00.0x0 --> 00:00:01.000
+invalid
+
+00:00:00.00x --> 00:00:01.000
+invalid
+
+00:00:00.000x--> 00:00:01.000
+invalid
+
+00:00:00.000 x-> 00:00:01.000
+invalid
+
+00:00:00.000 -x> 00:00:01.000
+invalid
+
+00:00:00.000 --x 00:00:01.000
+invalid
+
+00:00:00.000 -->x00:00:01.000
+invalid
+
+00:00:00.000 --> x0:00:01.000
+invalid
+
+00:00:00.000 --> 0x:00:01.000
+invalid
+
+00:00:00.000 --> 00x00:01.000
+invalid
+
+00:00:00.000 --> 00:x0:01.000
+invalid
+
+00:00:00.000 --> 00:0x:01.000
+invalid
+
+00:00:00.000 --> 00:00x01.000
+invalid
+
+00:00:00.000 --> 00:00:x1.000
+invalid
+
+00:00:00.000 --> 00:00:0x.000
+invalid
+
+00:00:00.000 --> 00:00:01x000
+invalid
+
+00:00:00.000 --> 00:00:01.x00
+invalid
+
+00:00:00.000 --> 00:00:01.0x0
+invalid
+
+00:00:00.000 --> 00:00:01.00x
+invalid
+
+00.00:00.000 --> 00:00:01.000
+invalid
+
+00:00.00.000 --> 00:00:01.000
+invalid
+
+00:00:00:000 --> 00:00:01.000
+invalid
+
+00:00.00:000 --> 00:00:01.000
+invalid
+
+00:00:00,000 --> 00:00:01,000
+invalid \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-negative.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-negative.test
new file mode 100644
index 0000000000..2cded00929
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-negative.test
@@ -0,0 +1,33 @@
+timings, negative
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp">
+
+assert_equals(cues.length, 4);
+
+[
+ [0, 0],
+ [1, 0.999],
+ [60, 59.999],
+ [3600, 3599.999],
+].forEach(function(pair, index) {
+ var startTime = pair[0];
+ var endTime = pair[1];
+
+ assert_equals(cues[index].text, 'text' + index, 'Failed with cue ' + index);
+ assert_equals(cues[index].startTime, startTime, 'Failed with cue ' + index);
+ assert_equals(cues[index].endTime, endTime, 'Failed with cue ' + index);
+});
+
+===
+WEBVTT
+
+00:00:00.000 --> 00:00:00.000
+text0
+
+00:00:01.000 --> 00:00:00.999
+text1
+
+00:01:00.000 --> 00:00:59.999
+text2
+
+01:00:00.000 --> 00:59:59.999
+text3
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-omitted-hours.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-omitted-hours.test
new file mode 100644
index 0000000000..8fb5858571
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-omitted-hours.test
@@ -0,0 +1,22 @@
+timings, omitted hours
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp">
+
+assert_equals(cues.length, 3);
+
+Array.from(cues).forEach(function(cue, index) {
+ assert_equals(cue.text, 'text' + index, 'Failed with cue ' + index);
+ assert_equals(cue.startTime, 0, 'Failed with cue ' + index);
+ assert_equals(cue.endTime, 1, 'Failed with cue ' + index);
+});
+
+===
+WEBVTT
+
+00:00.000 --> 00:00:01.000
+text0
+
+00:00:00.000 --> 00:01.000
+text1
+
+00:00.000 --> 00:01.000
+text2
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-too-long.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-too-long.test
new file mode 100644
index 0000000000..5f2cc889a6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-too-long.test
@@ -0,0 +1,60 @@
+timings, too long
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp">
+
+assert_equals(cues.length, 2);
+
+assert_equals(cues[0].text, 'text0');
+assert_equals(cues[0].startTime, 0);
+assert_equals(cues[0].endTime, 1);
+
+assert_equals(cues[1].text, 'text1');
+assert_equals(cues[1].startTime, 0);
+assert_equals(cues[1].endTime, 1);
+
+===
+WEBVTT
+
+000:00:00.000 --> 00:00:01.000
+text0
+
+00::00:00.000 --> 00:00:01.000
+invalid
+
+00:000:00.000 --> 00:00:01.000
+invalid
+
+00:00::00.000 --> 00:00:01.000
+invalid
+
+00:00:000.000 --> 00:00:01.000
+invalid
+
+00:00:00..000 --> 00:00:01.000
+invalid
+
+00:00:00.0000 --> 00:00:01.000
+invalid
+
+00:00.0000 --> 00:00:01.000
+invalid
+
+000:00.000 --> 00:01.000
+invalid
+
+00::00.000 --> 00:01.000
+invalid
+
+00:000.000 --> 00:01.000
+invalid
+
+00:00..000 --> 00:01.000
+invalid
+
+00:00.0000 --> 00:01.000
+invalid
+
+00:00.000 --> 000:01.000
+invalid
+
+00:00:00.000 --> 000:00:01.000
+text1
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-too-short.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-too-short.test
new file mode 100644
index 0000000000..d078eacf7c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-too-short.test
@@ -0,0 +1,111 @@
+timings, too short
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp">
+
+assert_equals(cues.length, 2);
+
+assert_equals(cues[0].text, 'text0');
+assert_equals(cues[0].startTime, 0);
+assert_equals(cues[0].endTime, 1);
+
+assert_equals(cues[1].text, 'text1');
+assert_equals(cues[1].startTime, 0);
+assert_equals(cues[1].endTime, 1);
+
+===
+WEBVTT
+
+0:00:00.000 --> 00:00:01.000
+text0
+
+0000:00.000 --> 00:00:01.000
+invalid
+
+00:0:00.000 --> 00:00:01.000
+invalid
+
+00:0000.000 --> 00:00:01.000
+invalid
+
+00:00:0.000 --> 00:00:01.000
+invalid
+
+00:00:00000 --> 00:00:01.000
+invalid
+
+00:00:00.00 --> 00:00:01.000
+invalid
+
+00:00:00.0 --> 00:00:01.000
+invalid
+
+00:00:00. --> 00:00:01.000
+invalid
+
+00:00:00 --> 00:00:01.000
+invalid
+
+00:00:0 --> 00:00:01.000
+invalid
+
+00:00: --> 00:00:01.000
+invalid
+
+00:00 --> 00:00:01.000
+invalid
+
+00:0 --> 00:00:01.000
+invalid
+
+00: --> 00:00:01.000
+invalid
+
+00 --> 00:00:01.000
+invalid
+
+0 --> 00:00:01.000
+invalid
+
+ --> 00:00:01.000
+invalid
+
+0:00.000 --> 00:01.000
+invalid
+
+0000.000 --> 00:01.000
+invalid
+
+00:0.000 --> 00:01.000
+invalid
+
+00:00000 --> 00:01.000
+invalid
+
+00:00.00 --> 00:01.000
+invalid
+
+00:00.0 --> 00:01.000
+invalid
+
+00:00. --> 00:01.000
+invalid
+
+0:00. --> 00:01.000
+invalid
+
+:00. --> 00:01.000
+invalid
+
+00. --> 00:01.000
+invalid
+
+0. --> 00:01.000
+invalid
+
+. --> 00:01.000
+invalid
+
+00:00.000 --> 0:01.000
+invalid
+
+00:00:00.000 --> 0:00:01.000
+text1
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/whitespace-chars.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/whitespace-chars.test
new file mode 100644
index 0000000000..7ee43facaa
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/whitespace-chars.test
@@ -0,0 +1,32 @@
+whitespace chars
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block">
+
+assert_equals(cues.length, 3);
+
+assert_equals(cues[0].id, 'spaces');
+assert_equals(cues[0].text, ' text0');
+
+assert_equals(cues[1].id, 'tabs');
+assert_equals(cues[1].text, 'text1');
+
+assert_equals(cues[2].id, 'form feed');
+assert_equals(cues[2].text, 'text2');
+
+===
+WEBVTT
+
+spaces
+ 00:00:00.000 --> 00:00:01.000\x20
+ text0
+
+tabs
+\t\t\t00:00:00.000\t\t\t\t-->\t\t00:00:01.000\t
+text1
+
+form feed
+\f\f\f00:00:00.000\f\f\f\f-->\f\f00:00:01.000\f
+text2
+
+vertical tab
+\v\v\v00:00:00.000\v\v\v\v-->\v\v00:00:01.000\v
+invalid
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/arrows.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/arrows.html
new file mode 100644
index 0000000000..7eefc797c7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/arrows.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/arrows.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: arrows</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#cue-timings-and-settings-parsing">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('arrows');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/arrows.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 6);
+
+for (var i = 0; i < cues.length; i++) {
+ assert_equals(cues[i].id, '', 'Failed with cue ' + i);
+ assert_equals(cues[i].text, 'text' + i, 'Failed with cue ' + i);
+}
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/categories.json b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/categories.json
new file mode 100644
index 0000000000..eac23f67dd
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/categories.json
@@ -0,0 +1,9 @@
+{
+ "arrows.html": "cues",
+ "ids.html": "cues",
+ "settings-*.html": "cues",
+ "signature-timings.html": "cues",
+ "timings-*.html": "cues",
+ "regions-*.html": "regions",
+ "stylesheets-*.html": "stylesheets"
+}
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/comment-in-cue-text.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/comment-in-cue-text.html
new file mode 100644
index 0000000000..d3cd12549b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/comment-in-cue-text.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/comment-in-cue-text.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: comment-in-cue-text</title>
+<link rel="help" href="https://www.w3.org/TR/webvtt1/#webvtt-comment-block">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('comment-in-cue-text');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/comment-in-cue-text.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 2);
+
+assert_equals(cues[0].text, 'NOTE text');
+assert_equals(cues[0].startTime, 0);
+assert_equals(cues[0].endTime, 1);
+
+assert_equals(cues[1].text, 'NOTE text\nNOTE text2');
+assert_equals(cues[1].startTime, 1);
+assert_equals(cues[1].endTime, 2);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-garbage.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-garbage.html
new file mode 100644
index 0000000000..4ebace2409
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-garbage.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/header-garbage.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: header, garbage</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('header, garbage');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/header-garbage.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 1);
+
+assert_equals(cues[0].text, 'text');
+assert_equals(cues[0].startTime, 0);
+assert_equals(cues[0].endTime, 1);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-regions.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-regions.html
new file mode 100644
index 0000000000..b10fcbcef9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-regions.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<title>Tests proper parsing of various regions present in WebVTT header area.</title>
+<script src="/common/media.js"></script>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const regionDefaults = {
+ width: 100,
+ lines: 3,
+ regionAnchorX: 0,
+ regionAnchorY: 100,
+ viewportAnchorX: 0,
+ viewportAnchorY: 100,
+ scroll: ''
+};
+
+function checkProperties(region, expected, i) {
+ for (var prop in regionDefaults) {
+ if (!(prop in expected))
+ expected[prop] = regionDefaults[prop];
+ assert_equals(region[prop], expected[prop], prop + ' (cue ' + ( i + 1 ) + ')');
+ }
+}
+
+function checkCueRegions(cues) {
+ for (let i = 0; i < cues.length; ++i) {
+ let cue = cues[i];
+ let expected = JSON.parse(cue.text);
+ if (cue.region)
+ checkProperties(cue.region, expected, i);
+ else
+ assert_equals(expected, 'no region');
+ }
+}
+
+async_test(function(t) {
+ var video = document.createElement('video');
+ video.src = getVideoURI('/media/test');
+ var testTrack = document.createElement('track');
+ testTrack.onload = t.step_func_done(function() {
+ var track = testTrack.track;
+ assert_equals(track.cues.length, 9);
+ checkCueRegions(track.cues);
+ });
+ testTrack.src = 'support/header-regions.vtt';
+ testTrack.kind = 'captions';
+ testTrack.default = true;
+ video.appendChild(testTrack);
+});
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-space.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-space.html
new file mode 100644
index 0000000000..c679d69f51
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-space.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/header-space.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: header, space</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('header, space');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/header-space.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 1);
+
+assert_equals(cues[0].text, 'text');
+assert_equals(cues[0].startTime, 0);
+assert_equals(cues[0].endTime, 1);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-tab.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-tab.html
new file mode 100644
index 0000000000..540bad54b6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-tab.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/header-tab.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: header, tab</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('header, tab');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/header-tab.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 1);
+
+assert_equals(cues[0].text, 'text');
+assert_equals(cues[0].startTime, 0);
+assert_equals(cues[0].endTime, 1);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-timings.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-timings.html
new file mode 100644
index 0000000000..adff8579a7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-timings.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/header-timings.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: header, timings</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('header, timings');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/header-timings.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 1);
+
+assert_equals(cues[0].text, 'text');
+assert_equals(cues[0].startTime, 0);
+assert_equals(cues[0].endTime, 1);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/ids.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/ids.html
new file mode 100644
index 0000000000..73763836bc
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/ids.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/ids.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: ids</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('ids');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/ids.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 5);
+assert_equals(cues[0].id, " leading space");
+assert_equals(cues[1].id, "trailing space ");
+assert_equals(cues[2].id, "-- >");
+assert_equals(cues[3].id, "->");
+assert_equals(cues[4].id, " ");
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/newlines.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/newlines.html
new file mode 100644
index 0000000000..6afab36067
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/newlines.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/newlines.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: newlines</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('newlines');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/newlines.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 4);
+
+assert_equals(cues[0].id, "cr");
+assert_equals(cues[0].text, "text0");
+
+assert_equals(cues[1].id, "lf");
+assert_equals(cues[1].text, "text1");
+
+assert_equals(cues[2].id, "crlf");
+assert_equals(cues[2].text, "text2");
+
+assert_equals(cues[3].id, "lfcr");
+assert_equals(cues[3].text, "text3");
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/nulls.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/nulls.html
new file mode 100644
index 0000000000..d3a97eae8d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/nulls.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/nulls.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: nulls</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('nulls');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/nulls.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 7, cues);
+
+assert_equals(cues[0].id, "");
+assert_equals(cues[0].text, "text0");
+
+assert_equals(cues[1].id, "\uFFFD (null in id)");
+assert_equals(cues[1].text, "text1");
+
+assert_equals(cues[2].id, "\uFFFD (null in cue data)");
+assert_equals(cues[2].text, "\uFFFDtext\uFFFD2");
+
+assert_equals(cues[3].align, "center");
+assert_equals(cues[3].text, "text3");
+
+assert_equals(cues[4].align, "center");
+assert_equals(cues[4].text, "text4");
+
+assert_equals(cues[5].align, "center");
+assert_equals(cues[5].text, "text5");
+
+assert_equals(cues[6].align, "end");
+assert_equals(cues[6].text, "text6");
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-edge-case.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-edge-case.html
new file mode 100644
index 0000000000..db1f27f67f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-edge-case.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/regions-edge-case.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: multiple regions edge cases</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('regions, lines');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/regions-edge-case.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 4);
+
+var region1 = cues[0].region;
+assert_equals(region1.lines, 1);
+assert_equals(region1.id, "foo");
+
+var region2 = cues[1].region;
+assert_equals(region2.lines, 2);
+assert_equals(region2.id, "bill");
+
+var region3 = cues[2].region;
+assert_equals(region3.lines, 3);
+assert_equals(region3.id, "jill");
+
+var region4 = cues[3].region;
+assert_equals(region4.lines, 4);
+assert_equals(region4.id, "jack");
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-id.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-id.html
new file mode 100644
index 0000000000..3a6e3feafa
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-id.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/regions-id.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: regions, id</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('regions, id');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/regions-id.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 4);
+
+var region1 = cues[0].region;
+assert_equals(region1.lines, 2);
+
+var region2 = cues[1].region;
+assert_equals(region2.lines, 1);
+
+var region3 = cues[2].region;
+assert_equals(region3.lines, 3);
+
+var region4 = cues[3].region;
+assert_equals(region4.lines, 4);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-lines.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-lines.html
new file mode 100644
index 0000000000..8e9b979291
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-lines.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/regions-lines.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: regions, lines</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('regions, lines');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/regions-lines.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 13);
+
+var regions = Array.from(cues).map(function(cue) {
+ return cue.region;
+});
+
+var valid_lines = [
+ 0,
+ 1,
+ 100,
+ 101,
+ 65536,
+ 4294967296,
+ 18446744073709552000,
+ 10000000000000000000000000000000000,
+ 2,
+];
+valid_lines.forEach(function(valid, index) {
+ assert_equals(regions[index].lines, valid, 'Failed with region ' + index);
+});
+
+for (var i = 0; i < 4; i++) {
+ var index = valid_lines.length + i;
+
+ assert_equals(regions[index].lines, 3, 'Failed with region ' + index);
+}
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-old.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-old.html
new file mode 100644
index 0000000000..ea6875756e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-old.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/regions-old.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: regions, old</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('regions, old');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/regions-old.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 2);
+
+assert_equals(cues[0].region, null);
+assert_equals(cues[1].region, null);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-regionanchor.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-regionanchor.html
new file mode 100644
index 0000000000..1cccfe9a04
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-regionanchor.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/regions-regionanchor.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: regions, regionanchor</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('regions, regionanchor');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/regions-regionanchor.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 20);
+
+var regions = Array.from(cues).map(function(cue) {
+ return cue.region;
+});
+
+var valid_anchors = [
+ [0, 100],
+ [0, 0],
+ [1, 1],
+ [100, 0],
+ [0, 100],
+ [100, 100],
+];
+valid_anchors.forEach(function(pair, index) {
+ var anchorX = pair[0];
+ var anchorY = pair[1];
+
+ assert_equals(regions[index].regionAnchorX, anchorX, 'Failed with region ' + index);
+ assert_equals(regions[index].regionAnchorY, anchorY, 'Failed with region ' + index);
+});
+
+for (var i = 0; i < 14; i++) {
+ var index = valid_anchors.length + i;
+
+ assert_equals(regions[index].regionAnchorX, 0, 'Failed with region ' + index);
+ assert_equals(regions[index].regionAnchorY, 100, 'Failed with region ' + index);
+}
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-scroll.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-scroll.html
new file mode 100644
index 0000000000..698af98f7a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-scroll.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/regions-scroll.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: regions, scroll</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('regions, scroll');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/regions-scroll.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 6);
+
+var regions = Array.from(cues).map(function(cue) {
+ return cue.region;
+});
+
+var valid_lines = [
+ '',
+ 'up',
+ 'up',
+ '',
+ '',
+ 'up',
+].forEach(function(valid, index) {
+ assert_equals(regions[index].scroll, valid, 'Failed with region ' + index);
+});
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-viewportanchor.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-viewportanchor.html
new file mode 100644
index 0000000000..b4c905fa4e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-viewportanchor.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/regions-viewportanchor.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: regions, viewportanchor</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('regions, viewportanchor');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/regions-viewportanchor.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 20);
+
+var regions = Array.from(cues).map(function(cue) {
+ return cue.region;
+});
+
+var valid_anchors = [
+ [0, 100],
+ [0, 0],
+ [1, 1],
+ [100, 0],
+ [0, 100],
+ [100, 100],
+];
+valid_anchors.forEach(function(pair, index) {
+ var anchorX = pair[0];
+ var anchorY = pair[1];
+
+ assert_equals(regions[index].viewportAnchorX, anchorX, 'Failed with region ' + index);
+ assert_equals(regions[index].viewportAnchorY, anchorY, 'Failed with region ' + index);
+});
+
+for (var i = 0; i < 14; i++) {
+ var index = valid_anchors.length + i;
+
+ assert_equals(regions[index].viewportAnchorX, 0, 'Failed with region ' + index);
+ assert_equals(regions[index].viewportAnchorY, 100, 'Failed with region ' + index);
+}
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-align.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-align.html
new file mode 100644
index 0000000000..06ea26fa78
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-align.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/settings-align.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: settings, align</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('settings, align');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/settings-align.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 13);
+
+[
+ 'center',
+ 'start',
+ 'center',
+ 'end',
+ 'left',
+ 'right',
+ 'end',
+ 'end',
+ 'end',
+ 'end',
+ 'end',
+ 'end',
+ 'center',
+].forEach(function(valid, index) {
+ assert_equals(cues[index].align, valid, 'Failed with cue ' + index);
+});
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-line.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-line.html
new file mode 100644
index 0000000000..a38e56eb0b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-line.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/settings-line.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: settings, line</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('settings, line');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/settings-line.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 46);
+
+// Test starts with simple valid values
+var valid_values = [
+ -1,
+ 0,
+ 0,
+ 1,
+ 100,
+ 101,
+ 65536,
+ 4294967296,
+ 18446744073709552000,
+ 10000000000000000000000000000000000,
+ 1.5,
+ Number.MAX_VALUE,
+ -1 * Number.MAX_VALUE,
+ Number.MIN_VALUE,
+ 0, // Less than Number.MIN_VALUE
+];
+valid_values.forEach(function(valid, index) {
+ assert_equals(cues[index].line, valid, 'Failed with cue ' + index);
+ assert_true(cues[index].snapToLines, 'Failed with cue ' + index);
+});
+
+// Then a set of invalid ones
+var invalid_length = 23;
+for (var i = 0; i < invalid_length; i++) {
+ var index = valid_values.length + i;
+
+ assert_equals(cues[index].line, 'auto', 'Failed with cue ' + index);
+ assert_true(cues[index].snapToLines, 'Failed with cue ' + index);
+}
+
+// Then more specific tests
+var index = valid_values.length + invalid_length;
+
+assert_equals(cues[index].line, 0);
+assert_false(cues[index].snapToLines);
+
+assert_equals(cues[index + 1].line, 0);
+assert_false(cues[index + 1].snapToLines);
+
+assert_equals(cues[index + 2].line, 100);
+assert_false(cues[index + 2].snapToLines);
+assert_equals(cues[index + 2].lineAlign, 'start');
+
+assert_equals(cues[index + 3].line, 100);
+assert_false(cues[index + 3].snapToLines);
+assert_equals(cues[index + 3].lineAlign, 'start');
+
+assert_equals(cues[index + 4].line, 100);
+assert_false(cues[index + 4].snapToLines);
+assert_equals(cues[index + 4].lineAlign, 'center');
+
+assert_equals(cues[index + 5].line, 100);
+assert_false(cues[index + 5].snapToLines);
+assert_equals(cues[index + 5].lineAlign, 'end');
+
+assert_equals(cues[index + 6].line, Number.MIN_VALUE);
+assert_false(cues[index + 6].snapToLines);
+
+assert_equals(cues[index + 7].line, 0);
+assert_false(cues[index + 7].snapToLines);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-multiple.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-multiple.html
new file mode 100644
index 0000000000..982a36a125
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-multiple.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/settings-multiple.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: settings, multiple</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('settings, multiple');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/settings-multiple.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 2);
+
+var cue = cues[0];
+assert_equals(cue.id, 'id0');
+assert_equals(cue.text, 'text0');
+assert_equals(cue.align, 'start');
+assert_equals(cue.line, 1);
+assert_equals(cue.snapToLines, false);
+assert_equals(cue.vertical, 'lr');
+assert_equals(cue.size, 50);
+assert_equals(cue.position, 25);
+
+var cue = cues[1];
+assert_equals(cue.id, 'id1');
+assert_equals(cue.text, 'text1');
+assert_equals(cue.align, 'center');
+assert_equals(cue.line, 1);
+assert_equals(cue.vertical, 'rl');
+assert_equals(cue.size, 0);
+assert_equals(cue.position, 100);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-position.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-position.html
new file mode 100644
index 0000000000..e4ddcf8dbe
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-position.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/settings-position.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: settings, position</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('settings, position');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/settings-position.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 22);
+
+var valid_positions = [
+ [1, 'auto'],
+ [100, 'auto'],
+ [1, 'auto'],
+ [1.5, 'auto'],
+ [1, 'line-left'],
+ [1, 'center'],
+ [1, 'line-right'],
+ [1, 'auto'],
+];
+valid_positions.forEach(function(pair, index) {
+ var position = pair[0];
+ var positionAlign = pair[1];
+
+ assert_equals(cues[index].position, position, 'Failed with cue ' + index);
+ assert_equals(cues[index].positionAlign, positionAlign, 'Failed with cue ' + index);
+});
+
+for (var i = 0; i < 14; i++) {
+ var index = valid_positions.length + i;
+
+ assert_equals(cues[index].position, 'auto', 'Failed with cue ' + index);
+ assert_equals(cues[index].positionAlign, 'auto', 'Failed with cue ' + index);
+}
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-region.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-region.html
new file mode 100644
index 0000000000..150f2feec4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-region.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/settings-region.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: settings, region</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('settings, region');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/settings-region.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 9);
+
+var fooRegion = cues[0].region;
+assert_true(!!fooRegion, 'Cue 0 has invalid region');
+
+var barRegion = cues[1].region;
+assert_true(!!barRegion, 'Cue 1 has invalid region');
+
+assert_not_equals(fooRegion, barRegion);
+
+var valid_regions = [
+ fooRegion,
+ barRegion,
+ barRegion,
+ null,
+ fooRegion
+];
+valid_regions.forEach(function(valid, index) {
+ assert_equals(cues[index].region, valid, 'Failed with cue ' + index);
+});
+
+for (var i = 0; i < 4; i++) {
+ var index = valid_regions.length + i;
+
+ assert_equals(cues[index].region, null);
+}
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-size.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-size.html
new file mode 100644
index 0000000000..be0ee561cb
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-size.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/settings-size.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: settings, size</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('settings, size');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/settings-size.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 16);
+
+var valid_sizes = [
+ 100,
+ 2,
+ 0,
+ 0,
+ 100,
+ 50,
+ 1.5,
+];
+valid_sizes.forEach(function(valid, index) {
+ assert_equals(cues[index].size, valid, 'Failed with cue ' + index);
+});
+
+for (var i = 0; i < 9; i++) {
+ var index = valid_sizes.length + i;
+
+ assert_equals(cues[index].size, 100, 'Failed with cue ' + index);
+}
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-vertical.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-vertical.html
new file mode 100644
index 0000000000..70af76588f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-vertical.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/settings-vertical.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: settings, size</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('settings, size');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/settings-vertical.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 8);
+
+var valid_vertical = [
+ '',
+ 'lr',
+ 'rl',
+ 'lr',
+];
+valid_vertical.forEach(function(valid, index) {
+ assert_equals(cues[index].vertical, valid, 'Failed with cue ' + index);
+});
+
+for (var i = 0; i < 4; i++) {
+ var index = valid_vertical.length + i;
+
+ assert_equals(cues[index].vertical, '', 'Failed with cue ' + index);
+}
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-bom.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-bom.html
new file mode 100644
index 0000000000..6addc7bb69
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-bom.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/signature-bom.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: signature, bom</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('signature, bom');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/signature-bom.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 0);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-no-newline.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-no-newline.html
new file mode 100644
index 0000000000..e96915d3a3
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-no-newline.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/signature-no-newline.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: signature, no newline</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('signature, no newline');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/signature-no-newline.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 0);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-space-no-newline.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-space-no-newline.html
new file mode 100644
index 0000000000..28a55f8f15
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-space-no-newline.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/signature-space-no-newline.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: signature, space, no newline</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('signature, space, no newline');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/signature-space-no-newline.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 0);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-space.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-space.html
new file mode 100644
index 0000000000..cfc1540947
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-space.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/signature-space.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: signature, space</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('signature, space');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/signature-space.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 0);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-tab-no-newline.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-tab-no-newline.html
new file mode 100644
index 0000000000..f4fd270df6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-tab-no-newline.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/signature-tab-no-newline.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: signature, tab, no newline</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('signature, tab, no newline');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/signature-tab-no-newline.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 0);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-tab.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-tab.html
new file mode 100644
index 0000000000..cd5df4c319
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-tab.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/signature-tab.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: signature, tab</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('signature, tab');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/signature-tab.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 0);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-timings.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-timings.html
new file mode 100644
index 0000000000..6394c89888
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-timings.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/signature-timings.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: signature, timings</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('signature, timings');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/signature-timings.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 0);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/stylesheets.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/stylesheets.html
new file mode 100644
index 0000000000..48cd920c79
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/stylesheets.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/stylesheets.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: stylesheets, rules</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('stylesheets, rules');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/stylesheets.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+// There's no way to test the actual style from js
+assert_equals(document.styleSheets.length, 0);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/arrows.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/arrows.vtt
new file mode 100644
index 0000000000..30d17b9de1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/arrows.vtt
@@ -0,0 +1,27 @@
+WEBVTT
+
+-->
+00:00:00.000 --> 00:00:01.000
+text0
+foo-->
+00:00:00.000 --> 00:00:01.000
+text1
+-->foo
+00:00:00.000 --> 00:00:01.000
+text2
+--->
+00:00:00.000 --> 00:00:01.000
+text3
+-->-->
+00:00:00.000 --> 00:00:01.000
+text4
+00:00:00.000 --> 00:00:01.000
+text5
+
+00:00:00.000 -a -->
+
+00:00:00.000 --a -->
+
+00:00:00.000 - -->
+
+00:00:00.000 -- -->
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/comment-in-cue-text.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/comment-in-cue-text.vtt
new file mode 100644
index 0000000000..47081905a7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/comment-in-cue-text.vtt
@@ -0,0 +1,14 @@
+WEBVTT
+
+NOTE this is real comment that should be ignored
+
+00:00:00.000 --> 00:00:01.000
+NOTE text
+
+NOTE
+this is also a real comment that should be ignored
+this is also a real comment that should be ignored
+
+00:00:01.000 --> 00:00:02.000
+NOTE text
+NOTE text2
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-garbage.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-garbage.vtt
new file mode 100644
index 0000000000..0504e796be
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-garbage.vtt
@@ -0,0 +1,5 @@
+WEBVTT
+foobar
+
+00:00:00.000 --> 00:00:01.000
+text \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-regions.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-regions.vtt
new file mode 100644
index 0000000000..81634c5cdc
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-regions.vtt
@@ -0,0 +1,52 @@
+WEBVTT FILE
+
+REGION
+id:region_without_settings
+
+REGION
+id:region_with_all_settings width:32%
+lines:5
+regionanchor:41%,20% viewportanchor:31%,84%
+scroll:up
+
+REGION
+id:region_floating_point_anchor
+regionanchor:41.125%,20.25% viewportanchor:32.75%,32.5%
+
+REGION
+id:not_unique_id width:42%
+
+REGION
+id:not_unique_id
+width:67%
+
+REGION
+invalid_settings values but region still created
+: Invalid Header
+
+00:00:00.000 --> 00:00:02.500 region:someregionattributeid
+"no region"
+
+00:00:00.000 --> 00:00:02.500 line:5 region:ignored_attribute_value
+"no region"
+
+00:00:00.000 --> 00:00:02.500 size:10% region:ignored_attribute_value
+"no region"
+
+00:00:00.000 --> 00:00:02.500 vertical:lr region:ignored_attribute_value
+"no region"
+
+00:00:03.000 --> 00:00:04.000 region:region_without_settings
+{}
+
+00:00:04.000 --> 00:00:05.000 region:region_with_all_settings
+{"width":32,"lines":5,"regionAnchorX":41,"regionAnchorY":20,"viewportAnchorX":31,"viewportAnchorY":84,"scroll":"up"}
+
+00:00:05.000 --> 00:00:06.000 region:region_floating_point_anchor
+{"regionAnchorX":41.125,"regionAnchorY":20.25,"viewportAnchorX":32.75,"viewportAnchorY":32.5}
+
+00:00:06.000 --> 00:00:07.000 region:not_unique_id
+{"width":67}
+
+00:00:07.000 --> 00:00:08.000 region:
+"no region"
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-space.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-space.vtt
new file mode 100644
index 0000000000..9462a1e7c1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-space.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:01.000
+text \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-tab.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-tab.vtt
new file mode 100644
index 0000000000..76564a6e1a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-tab.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:01.000
+text
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-timings.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-timings.vtt
new file mode 100644
index 0000000000..5442228eec
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-timings.vtt
@@ -0,0 +1,3 @@
+WEBVTT
+00:00:00.000 --> 00:00:01.000
+text \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/ids.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/ids.vtt
new file mode 100644
index 0000000000..5f3e91f8a4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/ids.vtt
@@ -0,0 +1,21 @@
+WEBVTT
+
+ leading space
+00:00:00.000 --> 00:00:01.000
+text0
+
+trailing space
+00:00:00.000 --> 00:00:01.000
+text1
+
+-- >
+00:00:00.000 --> 00:00:01.000
+text2
+
+->
+00:00:00.000 --> 00:00:01.000
+text3
+
+
+00:00:00.000 --> 00:00:01.000
+text4
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/newlines.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/newlines.vtt
new file mode 100644
index 0000000000..bde1c30e2c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/newlines.vtt
@@ -0,0 +1,12 @@
+WEBVTT cr 00:00:00.000 --> 00:00:01.000 text0
+
+lf
+00:00:00.000 --> 00:00:01.000
+text1
+
+crlf
+00:00:00.000 --> 00:00:01.000
+text2
+ lfcr 00:00:00.000 --> 00:00:01.000
+text3
+
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/nulls.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/nulls.vtt
new file mode 100644
index 0000000000..fe6d193d63
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/nulls.vtt
Binary files differ
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-edge-case.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-edge-case.vtt
new file mode 100644
index 0000000000..29debd5bd8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-edge-case.vtt
@@ -0,0 +1,44 @@
+WEBVTT
+
+NOTE valid
+
+REGION
+id:foo lines:1
+
+-->
+REGION
+id:foo
+lines:2
+-->
+
+REGION
+id:bill
+lines:2
+
+REGION
+REGION
+id:jill
+lines:3
+
+REGION
+--->
+id:jill lines:4
+
+REGION
+id:jack--> lines:5
+
+REGION
+id:jack lines:4
+
+00:00:00.000 --> 00:00:01.000 region:foo
+text
+
+00:00:00.000 --> 00:00:01.000 region:bill
+text
+
+00:00:00.000 --> 00:00:01.000 region:jill
+text
+
+00:00:00.000 --> 00:00:01.000 region:jack
+text
+
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-id.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-id.vtt
new file mode 100644
index 0000000000..bbcc14d2cd
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-id.vtt
@@ -0,0 +1,34 @@
+WEBVTT
+
+NOTE No API for accessing region ids, so using lines to uniquely identify regions
+
+REGION
+id:foo
+id:bar
+lines:1
+
+REGION
+id:bar id:foo
+lines:2
+
+REGION
+id:id
+id: foo
+id :bar
+lines:3
+
+REGION
+id:
+lines:4
+
+00:00:00.000 --> 00:00:01.000 region:foo
+valid
+
+00:00:00.000 --> 00:00:01.000 region:bar
+valid
+
+00:00:00.000 --> 00:00:01.000 region:id
+valid
+
+00:00:00.000 --> 00:00:01.000 region:
+valid
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-lines.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-lines.vtt
new file mode 100644
index 0000000000..d6397045aa
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-lines.vtt
@@ -0,0 +1,98 @@
+WEBVTT
+
+NOTE valid
+
+REGION
+id:1
+lines:0
+
+REGION
+id:2
+lines:1
+
+REGION
+id:3
+lines:100
+
+REGION
+id:4
+lines:101
+
+REGION
+id:5
+lines:65536
+
+REGION
+id:6
+lines:4294967296
+
+REGION
+id:7
+lines:18446744073709552000
+
+REGION
+id:8
+lines:10000000000000000000000000000000000
+
+REGION
+id:9
+lines:1 lines:3
+lines:2
+
+NOTE invalid
+
+REGION
+id:10
+lines:-0
+
+REGION
+id:11
+lines:1.5
+
+REGION
+id:12
+lines:-1
+
+REGION
+id:13
+lines: 1
+lines :1
+
+00:00:00.000 --> 00:00:01.000 region:1
+text
+
+00:00:00.000 --> 00:00:01.000 region:2
+text
+
+00:00:00.000 --> 00:00:01.000 region:3
+text
+
+00:00:00.000 --> 00:00:01.000 region:4
+text
+
+00:00:00.000 --> 00:00:01.000 region:5
+text
+
+00:00:00.000 --> 00:00:01.000 region:6
+text
+
+00:00:00.000 --> 00:00:01.000 region:7
+text
+
+00:00:00.000 --> 00:00:01.000 region:8
+text
+
+00:00:00.000 --> 00:00:01.000 region:9
+text
+
+00:00:00.000 --> 00:00:01.000 region:10
+text
+
+00:00:00.000 --> 00:00:01.000 region:11
+text
+
+00:00:00.000 --> 00:00:01.000 region:12
+text
+
+00:00:00.000 --> 00:00:01.000 region:13
+text
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-old.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-old.vtt
new file mode 100644
index 0000000000..f9b26659a8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-old.vtt
@@ -0,0 +1,9 @@
+WEBVTT
+Region: id=foo width=40% lines=3 regionanchor=0%,100% viewportanchor=10%,90% scroll=up
+Region: id=bar width=40% lines=3 regionanchor=100%,100% viewportanchor=90%,90% scroll=up
+
+00:00:00.000 --> 00:00:01.000 region:foo
+text0
+
+00:00:00.000 --> 00:00:01.000 region:bar
+text1
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-regionanchor.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-regionanchor.vtt
new file mode 100644
index 0000000000..e6aa770c37
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-regionanchor.vtt
@@ -0,0 +1,149 @@
+WEBVTT
+
+NOTE valid
+
+REGION
+id:0
+
+REGION
+id:1
+regionanchor:0%,0%
+
+REGION
+id:2
+regionanchor:1%,1%
+
+REGION
+id:3
+regionanchor:100%,0%
+
+REGION
+id:4
+regionanchor:0%,100%
+
+REGION
+id:5
+regionanchor:100%,100%
+
+NOTE invalid
+
+REGION
+id:6
+regionanchor:0,0
+
+REGION
+id:7
+regionanchor:0%,0
+
+REGION
+id:8
+regionanchor:0,0%
+
+REGION
+id:9
+regionanchor:1%
+
+REGION
+id:10
+regionanchor:,1%
+
+REGION
+id:11
+regionanchor:101%,1%
+
+REGION
+id:12
+regionanchor:1%,101%
+
+REGION
+id:13
+regionanchor:-0%,0%
+
+REGION
+id:14
+regionanchor:0%,-0%
+
+REGION
+id:15
+regionanchor:65536%,65536%
+
+REGION
+id:16
+regionanchor:4294967296%,4294967296%
+
+REGION
+id:17
+regionanchor:18446744073709552000%,18446744073709552000%
+
+REGION
+id:18
+regionanchor:10000000000000000000000000000000000%,10000000000000000000000000000000000%
+
+REGION
+id:19
+regionanchor: 100%,100%
+regionanchor :100%,100%
+regionanchor:100% ,100%
+regionanchor:100%, 100%
+regionanchor:100 %,100%
+regionanchor:100%,100 %
+
+00:00:00.000 --> 00:00:01.000 region:0
+text
+
+00:00:00.000 --> 00:00:01.000 region:1
+text
+
+00:00:00.000 --> 00:00:01.000 region:2
+text
+
+00:00:00.000 --> 00:00:01.000 region:3
+text
+
+00:00:00.000 --> 00:00:01.000 region:4
+text
+
+00:00:00.000 --> 00:00:01.000 region:5
+text
+
+00:00:00.000 --> 00:00:01.000 region:6
+text
+
+00:00:00.000 --> 00:00:01.000 region:7
+text
+
+00:00:00.000 --> 00:00:01.000 region:8
+text
+
+00:00:00.000 --> 00:00:01.000 region:9
+text
+
+00:00:00.000 --> 00:00:01.000 region:10
+text
+
+00:00:00.000 --> 00:00:01.000 region:11
+text
+
+00:00:00.000 --> 00:00:01.000 region:12
+text
+
+00:00:00.000 --> 00:00:01.000 region:13
+text
+
+00:00:00.000 --> 00:00:01.000 region:14
+text
+
+00:00:00.000 --> 00:00:01.000 region:15
+text
+
+00:00:00.000 --> 00:00:01.000 region:16
+text
+
+00:00:00.000 --> 00:00:01.000 region:17
+text
+
+00:00:00.000 --> 00:00:01.000 region:18
+text
+
+00:00:00.000 --> 00:00:01.000 region:19
+text
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-scroll.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-scroll.vtt
new file mode 100644
index 0000000000..4c7f21d935
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-scroll.vtt
@@ -0,0 +1,46 @@
+WEBVTT
+
+REGION
+id:0
+
+REGION
+id:1
+scroll:up
+
+REGION
+id:2
+scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up
+scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up
+
+REGION
+id:3
+scroll:down
+scroll:left
+scroll:right
+
+REGION
+id:4
+scroll: up
+scroll :up
+
+REGION
+id:5
+scroll:up scroll:
+
+00:00:00.000 --> 00:00:01.000 region:0
+text
+
+00:00:00.000 --> 00:00:01.000 region:1
+text
+
+00:00:00.000 --> 00:00:01.000 region:2
+text
+
+00:00:00.000 --> 00:00:01.000 region:3
+text
+
+00:00:00.000 --> 00:00:01.000 region:4
+text
+
+00:00:00.000 --> 00:00:01.000 region:5
+text
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-viewportanchor.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-viewportanchor.vtt
new file mode 100644
index 0000000000..7470be647c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-viewportanchor.vtt
@@ -0,0 +1,149 @@
+WEBVTT
+
+NOTE valid
+
+REGION
+id:0
+
+REGION
+id:1
+viewportanchor:0%,0%
+
+REGION
+id:2
+viewportanchor:1%,1%
+
+REGION
+id:3
+viewportanchor:100%,0%
+
+REGION
+id:4
+viewportanchor:0%,100%
+
+REGION
+id:5
+viewportanchor:100%,100%
+
+NOTE invalid
+
+REGION
+id:6
+viewportanchor:0,0
+
+REGION
+id:7
+viewportanchor:0%,0
+
+REGION
+id:8
+viewportanchor:0,0%
+
+REGION
+id:9
+viewportanchor:1%
+
+REGION
+id:10
+viewportanchor:,1%
+
+REGION
+id:11
+viewportanchor:101%,1%
+
+REGION
+id:12
+viewportanchor:1%,101%
+
+REGION
+id:13
+viewportanchor:-0%,0%
+
+REGION
+id:14
+viewportanchor:0%,-0%
+
+REGION
+id:15
+viewportanchor:65536%,65536%
+
+REGION
+id:16
+viewportanchor:4294967296%,4294967296%
+
+REGION
+id:17
+viewportanchor:18446744073709552000%,18446744073709552000%
+
+REGION
+id:18
+viewportanchor:10000000000000000000000000000000000%,10000000000000000000000000000000000%
+
+REGION
+id:19
+viewportanchor: 100%,100%
+viewportanchor :100%,100%
+viewportanchor:100% ,100%
+viewportanchor:100%, 100%
+viewportanchor:100 %,100%
+viewportanchor:100%,100 %
+
+00:00:00.000 --> 00:00:01.000 region:0
+text
+
+00:00:00.000 --> 00:00:01.000 region:1
+text
+
+00:00:00.000 --> 00:00:01.000 region:2
+text
+
+00:00:00.000 --> 00:00:01.000 region:3
+text
+
+00:00:00.000 --> 00:00:01.000 region:4
+text
+
+00:00:00.000 --> 00:00:01.000 region:5
+text
+
+00:00:00.000 --> 00:00:01.000 region:6
+text
+
+00:00:00.000 --> 00:00:01.000 region:7
+text
+
+00:00:00.000 --> 00:00:01.000 region:8
+text
+
+00:00:00.000 --> 00:00:01.000 region:9
+text
+
+00:00:00.000 --> 00:00:01.000 region:10
+text
+
+00:00:00.000 --> 00:00:01.000 region:11
+text
+
+00:00:00.000 --> 00:00:01.000 region:12
+text
+
+00:00:00.000 --> 00:00:01.000 region:13
+text
+
+00:00:00.000 --> 00:00:01.000 region:14
+text
+
+00:00:00.000 --> 00:00:01.000 region:15
+text
+
+00:00:00.000 --> 00:00:01.000 region:16
+text
+
+00:00:00.000 --> 00:00:01.000 region:17
+text
+
+00:00:00.000 --> 00:00:01.000 region:18
+text
+
+00:00:00.000 --> 00:00:01.000 region:19
+text
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-align.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-align.vtt
new file mode 100644
index 0000000000..3bcfe5ac4c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-align.vtt
@@ -0,0 +1,40 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:01.000
+text0
+
+00:00:00.000 --> 00:00:01.000 align:start
+text1
+
+00:00:00.000 --> 00:00:01.000 align:center
+text2
+
+00:00:00.000 --> 00:00:01.000 align:end
+text3
+
+00:00:00.000 --> 00:00:01.000 align:left
+text4
+
+00:00:00.000 --> 00:00:01.000 align:right
+text5
+
+00:00:00.000 --> 00:00:01.000 align:start align:end
+text6
+
+00:00:00.000 --> 00:00:01.000 align:end align:CENTER
+text7
+
+00:00:00.000 --> 00:00:01.000 align:end align: center
+text8
+
+00:00:00.000 --> 00:00:01.000 align:end align:
+text9
+
+00:00:00.000 --> 00:00:01.000 align:end align:middle
+text10
+
+00:00:00.000 --> 00:00:01.000 align:end align
+text11
+
+00:00:00.000 --> 00:00:01.000 align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:center
+text12
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-line.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-line.vtt
new file mode 100644
index 0000000000..03ce64a1cf
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-line.vtt
@@ -0,0 +1,154 @@
+WEBVTT
+
+NOTE valid
+
+00:00:00.000 --> 00:00:01.000 line:-1
+valid0
+
+00:00:00.000 --> 00:00:01.000 line:0
+valid1
+
+00:00:00.000 --> 00:00:01.000 line:-0
+valid2
+
+00:00:00.000 --> 00:00:01.000 line:1
+valid3
+
+00:00:00.000 --> 00:00:01.000 line:100
+valid4
+
+00:00:00.000 --> 00:00:01.000 line:101
+valid5
+
+00:00:00.000 --> 00:00:01.000 line:65536
+valid6
+
+00:00:00.000 --> 00:00:01.000 line:4294967296
+valid7
+
+00:00:00.000 --> 00:00:01.000 line:18446744073709552000
+valid8
+
+00:00:00.000 --> 00:00:01.000 line:10000000000000000000000000000000000
+valid9
+
+00:00:00.000 --> 00:00:01.000 line:1.5
+valid10
+
+Number.MAX_VALUE
+00:00:00.000 --> 00:00:01.000 line:179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+valid11
+
+-1 * Number.MAX_VALUE
+00:00:00.000 --> 00:00:01.000 line:-179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+valid12
+
+Number.MIN_VALUE
+00:00:00.000 --> 00:00:01.000 line:0.000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000005
+valid13
+
+Less than Number.MIN_VALUE
+00:00:00.000 --> 00:00:01.000 line:0.000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002
+valid14
+
+NOTE invalid
+
+00:00:00.000 --> 00:00:01.000 line:65536%
+invalid15
+
+00:00:00.000 --> 00:00:01.000 line:4294967296%
+invalid16
+
+00:00:00.000 --> 00:00:01.000 line:18446744073709552000%
+invalid17
+
+00:00:00.000 --> 00:00:01.000 line:10000000000000000000000000000000000%
+invalid18
+
+00:00:00.000 --> 00:00:01.000 line:-0%
+invalid19
+
+00:00:00.000 --> 00:00:01.000 line:101%
+invalid20
+
+00:00:00.000 --> 00:00:01.000 line:1%-
+invalid21
+
+00:00:00.000 --> 00:00:01.000 line:1-
+invalid22
+
+00:00:00.000 --> 00:00:01.000 line:%1
+invalid23
+
+00:00:00.000 --> 00:00:01.000 line:1%%
+invalid24
+
+00:00:00.000 --> 00:00:01.000 line:0%0
+invalid25
+
+00:00:00.000 --> 00:00:01.000 line: 0%
+invalid26
+
+00:00:00.000 --> 00:00:01.000 line:0%x
+invalid27
+
+00:00:00.000 --> 00:00:01.000 line:-
+invalid28
+
+00:00:00.000 --> 00:00:01.000 line:%
+invalid29
+
+00:00:00.000 --> 00:00:01.000 line:1..5
+invalid30
+
+00:00:00.000 --> 00:00:01.000 line:.5
+invalid31
+
+00:00:00.000 --> 00:00:01.000 line:5.
+invalid32
+
+Greater than Number.MAX_VALUE
+00:00:00.000 --> 00:00:01.000 line:179769313486231590000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+invalid33
+
+Less than -1 * Number.MAX_VALUE
+00:00:00.000 --> 00:00:01.000 line:-179769313486231590000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+invalid34
+
+exponential notation
+00:00:00.000 --> 00:00:01.000 line:1e2
+invalid35
+
+00:00:00.000 --> 00:00:01.000 line:100%,middle
+invalid36
+
+00:00:00.000 --> 00:00:01.000 line:100%,
+invalid37
+
+NOTE extra
+
+00:00:00.000 --> 00:00:01.000 line:0%
+text38
+
+00:00:00.000 --> 00:00:01.000 line:00%
+text39
+
+00:00:00.000 --> 00:00:01.000 line:100%
+text40
+
+00:00:00.000 --> 00:00:01.000 line:100%,start
+text41
+
+00:00:00.000 --> 00:00:01.000 line:100%,center
+text42
+
+00:00:00.000 --> 00:00:01.000 line:100%,end
+text43
+
+Number.MIN_VALUE %
+00:00:00.000 --> 00:00:01.000 line:0.000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000005%
+text44
+
+Less than Number.MIN_VALUE %
+00:00:00.000 --> 00:00:01.000 line:0.000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002%
+text45
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-multiple.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-multiple.vtt
new file mode 100644
index 0000000000..17035a2a42
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-multiple.vtt
@@ -0,0 +1,9 @@
+WEBVTT
+
+id0
+00:00:00.000 --> 00:00:01.000 align:start line:1% vertical:lr size:50% position:25%
+text0
+
+id1
+00:00:00.000 --> 00:00:01.000 align:center line:1 vertical:rl size:0% position:100%
+text1
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-position.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-position.vtt
new file mode 100644
index 0000000000..9ded1a67a3
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-position.vtt
@@ -0,0 +1,71 @@
+WEBVTT
+
+NOTE valid
+
+00:00:00.000 --> 00:00:01.000 position:1%
+text0
+
+00:00:00.000 --> 00:00:01.000 position:100%
+text1
+
+00:00:00.000 --> 00:00:01.000 position:1% position:x
+text2
+
+00:00:00.000 --> 00:00:01.000 position:1.5%
+text3
+
+00:00:00.000 --> 00:00:01.000 position:1%,line-left
+text4
+
+00:00:00.000 --> 00:00:01.000 position:1%,center
+text5
+
+00:00:00.000 --> 00:00:01.000 position:1%,line-right
+text6
+
+00:00:00.000 --> 00:00:01.000 position:1% ,center
+text7
+
+NOTE invalid
+
+00:00:00.000 --> 00:00:01.000 position:1%,middle
+invalid8
+
+00:00:00.000 --> 00:00:01.000 position:1%, center
+invalid9
+
+00:00:00.000 --> 00:00:01.000 position:-1%
+invalid10
+
+00:00:00.000 --> 00:00:01.000 position:1
+invalid11
+
+00:00:00.000 --> 00:00:01.000 position:1x
+invalid12
+
+00:00:00.000 --> 00:00:01.000 position:1%x
+invalid13
+
+00:00:00.000 --> 00:00:01.000 position:
+invalid14
+
+00:00:00.000 --> 00:00:01.000 position: 1%
+invalid15
+
+00:00:00.000 --> 00:00:01.000 position:101%
+invalid16
+
+00:00:00.000 --> 00:00:01.000 position:65536%
+invalid17
+
+00:00:00.000 --> 00:00:01.000 position:4294967296%
+invalid18
+
+00:00:00.000 --> 00:00:01.000 position:101%,line-left
+invalid19
+
+00:00:00.000 --> 00:00:01.000 position:101%,center
+invalid20
+
+00:00:00.000 --> 00:00:01.000 position:101%,line-right
+invalid21
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-region.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-region.vtt
new file mode 100644
index 0000000000..9116d37367
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-region.vtt
@@ -0,0 +1,40 @@
+WEBVTT
+
+REGION
+id:foo
+
+REGION
+id:bar
+
+REGION
+id:foo
+
+REGION
+width:10%
+
+00:00:00.000 --> 00:00:01.000 region:foo
+text0
+
+00:00:00.000 --> 00:00:01.000 region:bar
+text1
+
+00:00:00.000 --> 00:00:01.000 region:foo region:bar
+text2
+
+00:00:00.000 --> 00:00:01.000 region:invalid
+text3
+
+00:00:00.000 --> 00:00:01.000 region:invalid region:foo
+text4
+
+00:00:00.000 --> 00:00:01.000 region:
+invalid5
+
+00:00:00.000 --> 00:00:01.000 region:
+invalid6
+
+00:00:00.000 --> 00:00:01.000 region: foo
+invalid7
+
+00:00:00.000 --> 00:00:01.000 region :foo
+invalid8
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-size.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-size.vtt
new file mode 100644
index 0000000000..9c2cb8a78c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-size.vtt
@@ -0,0 +1,53 @@
+WEBVTT
+
+NOTE valid
+
+00:00:00.000 --> 00:00:01.000
+text0
+
+00:00:00.000 --> 00:00:01.000 size:1xx size:2%
+text1
+
+00:00:00.000 --> 00:00:01.000 size:0%
+text2
+
+00:00:00.000 --> 00:00:01.000 size:00%
+text3
+
+00:00:00.000 --> 00:00:01.000 size:50% size:100%
+text4
+
+00:00:00.000 --> 00:00:01.000 size:50% size:101%
+text5
+
+00:00:00.000 --> 00:00:01.000 size:1.5%
+text6
+
+NOTE invalid
+
+00:00:00.000 --> 00:00:01.000 size:
+invalid7
+
+00:00:00.000 --> 00:00:01.000 size:x
+invalid8
+
+00:00:00.000 --> 00:00:01.000 size:%
+invalid9
+
+00:00:00.000 --> 00:00:01.000 size:%%
+invalid10
+
+00:00:00.000 --> 00:00:01.000 size:1%%
+invalid11
+
+00:00:00.000 --> 00:00:01.000 size:1%x
+invalid12
+
+00:00:00.000 --> 00:00:01.000 size:101%
+invalid13
+
+00:00:00.000 --> 00:00:01.000 size:-3%
+invalid14
+
+00:00:00.000 --> 00:00:01.000 size:200%
+invalid15
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-vertical.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-vertical.vtt
new file mode 100644
index 0000000000..f24c86eaa9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-vertical.vtt
@@ -0,0 +1,25 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:01.000
+text0
+
+00:00:00.000 --> 00:00:01.000 vertical:lr
+text1
+
+00:00:00.000 --> 00:00:01.000 vertical:rl
+text2
+
+00:00:00.000 --> 00:00:01.000 vertical:rl vertical:lr
+text3
+
+00:00:00.000 --> 00:00:01.000 vertical:
+invalid4
+
+00:00:00.000 --> 00:00:01.000 vertical:RL
+invalid5
+
+00:00:00.000 --> 00:00:01.000 vertical: rl
+invalid6
+
+00:00:00.000 --> 00:00:01.000 vertical:vertical-rl
+invalid7
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-bom.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-bom.vtt
new file mode 100644
index 0000000000..c0a1057770
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-bom.vtt
@@ -0,0 +1 @@
+WEBVTT
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-no-newline.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-no-newline.vtt
new file mode 100644
index 0000000000..af1827ddf9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-no-newline.vtt
@@ -0,0 +1 @@
+WEBVTT \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-space-no-newline.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-space-no-newline.vtt
new file mode 100644
index 0000000000..6abbf425ae
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-space-no-newline.vtt
@@ -0,0 +1 @@
+WEBVTT \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-space.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-space.vtt
new file mode 100644
index 0000000000..1352a20931
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-space.vtt
@@ -0,0 +1 @@
+WEBVTT
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-tab-no-newline.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-tab-no-newline.vtt
new file mode 100644
index 0000000000..e28ec9b83b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-tab-no-newline.vtt
@@ -0,0 +1 @@
+WEBVTT \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-tab.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-tab.vtt
new file mode 100644
index 0000000000..ab4bb0ea6f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-tab.vtt
@@ -0,0 +1 @@
+WEBVTT
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-timings.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-timings.vtt
new file mode 100644
index 0000000000..067c284f93
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-timings.vtt
@@ -0,0 +1,2 @@
+WEBVTT 00:00:00.000 --> 00:00:01.000
+text
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/stylesheets.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/stylesheets.vtt
new file mode 100644
index 0000000000..409718af07
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/stylesheets.vtt
@@ -0,0 +1,29 @@
+WEBVTT
+
+STYLE
+::cue(#foo) {
+ width: 20px;
+} /*
+NOTE hello
+00:00:00.000 -- > 00:00:01.000
+*/
+.foo {
+ width: 19px;
+}
+
+.bar {
+ width: 18px;
+}
+
+foo
+00:00:00.000 --> 00:00:01.000
+text
+
+STYLE
+::cue(::bar) {
+ width: 18px;
+}
+
+bar
+00:00:00.000 --> 00:00:01.000
+text
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-60.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-60.vtt
new file mode 100644
index 0000000000..68475fbbaa
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-60.vtt
@@ -0,0 +1,19 @@
+WEBVTT
+
+00:00:60.000 --> 00:00:01.000
+invalid
+
+00:60:00.000 --> 00:00:01.000
+invalid
+
+00:00:00.000 --> 00:00:60.000
+invalid
+
+00:00:00.000 --> 00:60:00.000
+invalid
+
+00:00:00.000 --> 60:00:01.000
+text1
+
+60:00:00.000 --> 60:00:01.000
+text2
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-eof.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-eof.vtt
new file mode 100644
index 0000000000..470221d29c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-eof.vtt
@@ -0,0 +1,3 @@
+WEBVTT
+
+00:00:00.000 --> \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-garbage.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-garbage.vtt
new file mode 100644
index 0000000000..16291237a2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-garbage.vtt
@@ -0,0 +1,190 @@
+WEBVTT
+
+x00:00:00.000 --> 00:00:01.000
+invalid
+
+0x0:00:00.000 --> 00:00:01.000
+invalid
+
+00x:00:00.000 --> 00:00:01.000
+invalid
+
+00:x00:00.000 --> 00:00:01.000
+invalid
+
+00:0x0:00.000 --> 00:00:01.000
+invalid
+
+00:00x:00.000 --> 00:00:01.000
+invalid
+
+00:00:x00.000 --> 00:00:01.000
+invalid
+
+00:00:0x0.000 --> 00:00:01.000
+invalid
+
+00:00:00x.000 --> 00:00:01.000
+invalid
+
+00:00:00.x000 --> 00:00:01.000
+invalid
+
+00:00:00.0x00 --> 00:00:01.000
+invalid
+
+00:00:00.00x0 --> 00:00:01.000
+invalid
+
+00:00:00.000x --> 00:00:01.000
+invalid
+
+00:00:00.000 x--> 00:00:01.000
+invalid
+
+00:00:00.000 -x-> 00:00:01.000
+invalid
+
+00:00:00.000 --x> 00:00:01.000
+invalid
+
+00:00:00.000 -->x 00:00:01.000
+invalid
+
+00:00:00.000 --> x00:00:01.000
+invalid
+
+00:00:00.000 --> 0x0:00:01.000
+invalid
+
+00:00:00.000 --> 00x:00:01.000
+invalid
+
+00:00:00.000 --> 00:x00:01.000
+invalid
+
+00:00:00.000 --> 00:0x0:01.000
+invalid
+
+00:00:00.000 --> 00:00x:01.000
+invalid
+
+00:00:00.000 --> 00:00:x01.000
+invalid
+
+00:00:00.000 --> 00:00:0x1.000
+invalid
+
+00:00:00.000 --> 00:00:01x.000
+invalid
+
+00:00:00.000 --> 00:00:01.x000
+invalid
+
+00:00:00.000 --> 00:00:01.0x00
+invalid
+
+00:00:00.000 --> 00:00:01.00x0
+invalid
+
+x0:00:00.000 --> 00:00:01.000
+invalid
+
+0x:00:00.000 --> 00:00:01.000
+invalid
+
+00x00:00.000 --> 00:00:01.000
+invalid
+
+00:x0:00.000 --> 00:00:01.000
+invalid
+
+00:0x:00.000 --> 00:00:01.000
+invalid
+
+00:00x00.000 --> 00:00:01.000
+invalid
+
+00:00:x0.000 --> 00:00:01.000
+invalid
+
+00:00:0x.000 --> 00:00:01.000
+invalid
+
+00:00:00x000 --> 00:00:01.000
+invalid
+
+00:00:00.x00 --> 00:00:01.000
+invalid
+
+00:00:00.0x0 --> 00:00:01.000
+invalid
+
+00:00:00.00x --> 00:00:01.000
+invalid
+
+00:00:00.000x--> 00:00:01.000
+invalid
+
+00:00:00.000 x-> 00:00:01.000
+invalid
+
+00:00:00.000 -x> 00:00:01.000
+invalid
+
+00:00:00.000 --x 00:00:01.000
+invalid
+
+00:00:00.000 -->x00:00:01.000
+invalid
+
+00:00:00.000 --> x0:00:01.000
+invalid
+
+00:00:00.000 --> 0x:00:01.000
+invalid
+
+00:00:00.000 --> 00x00:01.000
+invalid
+
+00:00:00.000 --> 00:x0:01.000
+invalid
+
+00:00:00.000 --> 00:0x:01.000
+invalid
+
+00:00:00.000 --> 00:00x01.000
+invalid
+
+00:00:00.000 --> 00:00:x1.000
+invalid
+
+00:00:00.000 --> 00:00:0x.000
+invalid
+
+00:00:00.000 --> 00:00:01x000
+invalid
+
+00:00:00.000 --> 00:00:01.x00
+invalid
+
+00:00:00.000 --> 00:00:01.0x0
+invalid
+
+00:00:00.000 --> 00:00:01.00x
+invalid
+
+00.00:00.000 --> 00:00:01.000
+invalid
+
+00:00.00.000 --> 00:00:01.000
+invalid
+
+00:00:00:000 --> 00:00:01.000
+invalid
+
+00:00.00:000 --> 00:00:01.000
+invalid
+
+00:00:00,000 --> 00:00:01,000
+invalid \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-negative.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-negative.vtt
new file mode 100644
index 0000000000..fb3589d8a1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-negative.vtt
@@ -0,0 +1,13 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:00.000
+text0
+
+00:00:01.000 --> 00:00:00.999
+text1
+
+00:01:00.000 --> 00:00:59.999
+text2
+
+01:00:00.000 --> 00:59:59.999
+text3
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-omitted-hours.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-omitted-hours.vtt
new file mode 100644
index 0000000000..f581ae3025
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-omitted-hours.vtt
@@ -0,0 +1,10 @@
+WEBVTT
+
+00:00.000 --> 00:00:01.000
+text0
+
+00:00:00.000 --> 00:01.000
+text1
+
+00:00.000 --> 00:01.000
+text2
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-too-long.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-too-long.vtt
new file mode 100644
index 0000000000..6357f8dccc
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-too-long.vtt
@@ -0,0 +1,46 @@
+WEBVTT
+
+000:00:00.000 --> 00:00:01.000
+text0
+
+00::00:00.000 --> 00:00:01.000
+invalid
+
+00:000:00.000 --> 00:00:01.000
+invalid
+
+00:00::00.000 --> 00:00:01.000
+invalid
+
+00:00:000.000 --> 00:00:01.000
+invalid
+
+00:00:00..000 --> 00:00:01.000
+invalid
+
+00:00:00.0000 --> 00:00:01.000
+invalid
+
+00:00.0000 --> 00:00:01.000
+invalid
+
+000:00.000 --> 00:01.000
+invalid
+
+00::00.000 --> 00:01.000
+invalid
+
+00:000.000 --> 00:01.000
+invalid
+
+00:00..000 --> 00:01.000
+invalid
+
+00:00.0000 --> 00:01.000
+invalid
+
+00:00.000 --> 000:01.000
+invalid
+
+00:00:00.000 --> 000:00:01.000
+text1
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-too-short.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-too-short.vtt
new file mode 100644
index 0000000000..78d190a7bc
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-too-short.vtt
@@ -0,0 +1,97 @@
+WEBVTT
+
+0:00:00.000 --> 00:00:01.000
+text0
+
+0000:00.000 --> 00:00:01.000
+invalid
+
+00:0:00.000 --> 00:00:01.000
+invalid
+
+00:0000.000 --> 00:00:01.000
+invalid
+
+00:00:0.000 --> 00:00:01.000
+invalid
+
+00:00:00000 --> 00:00:01.000
+invalid
+
+00:00:00.00 --> 00:00:01.000
+invalid
+
+00:00:00.0 --> 00:00:01.000
+invalid
+
+00:00:00. --> 00:00:01.000
+invalid
+
+00:00:00 --> 00:00:01.000
+invalid
+
+00:00:0 --> 00:00:01.000
+invalid
+
+00:00: --> 00:00:01.000
+invalid
+
+00:00 --> 00:00:01.000
+invalid
+
+00:0 --> 00:00:01.000
+invalid
+
+00: --> 00:00:01.000
+invalid
+
+00 --> 00:00:01.000
+invalid
+
+0 --> 00:00:01.000
+invalid
+
+ --> 00:00:01.000
+invalid
+
+0:00.000 --> 00:01.000
+invalid
+
+0000.000 --> 00:01.000
+invalid
+
+00:0.000 --> 00:01.000
+invalid
+
+00:00000 --> 00:01.000
+invalid
+
+00:00.00 --> 00:01.000
+invalid
+
+00:00.0 --> 00:01.000
+invalid
+
+00:00. --> 00:01.000
+invalid
+
+0:00. --> 00:01.000
+invalid
+
+:00. --> 00:01.000
+invalid
+
+00. --> 00:01.000
+invalid
+
+0. --> 00:01.000
+invalid
+
+. --> 00:01.000
+invalid
+
+00:00.000 --> 0:01.000
+invalid
+
+00:00:00.000 --> 0:00:01.000
+text1
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/whitespace-chars.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/whitespace-chars.vtt
new file mode 100644
index 0000000000..b26c93cd19
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/whitespace-chars.vtt
@@ -0,0 +1,17 @@
+WEBVTT
+
+spaces
+ 00:00:00.000 --> 00:00:01.000
+ text0
+
+tabs
+ 00:00:00.000 --> 00:00:01.000
+text1
+
+form feed
+ 00:00:00.000 --> 00:00:01.000
+text2
+
+vertical tab
+ 00:00:00.000 --> 00:00:01.000
+invalid
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-60.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-60.html
new file mode 100644
index 0000000000..ddc21a0915
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-60.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/timings-60.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: timings, 60</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('timings, 60');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/timings-60.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 2);
+
+assert_equals(cues[0].text, 'text1');
+assert_equals(cues[0].startTime, 0);
+assert_equals(cues[0].endTime, 216001);
+
+assert_equals(cues[1].text, 'text2');
+assert_equals(cues[1].startTime, 216000);
+assert_equals(cues[1].endTime, 216001);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-eof.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-eof.html
new file mode 100644
index 0000000000..3750cfb703
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-eof.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/timings-eof.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: timings, eof</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('timings, eof');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/timings-eof.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 0);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-garbage.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-garbage.html
new file mode 100644
index 0000000000..4af3ca47f1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-garbage.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/timings-garbage.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: timings, garbage</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp">
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('timings, garbage');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/timings-garbage.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 0);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-negative.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-negative.html
new file mode 100644
index 0000000000..5645de6e27
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-negative.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/timings-negative.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: timings, negative</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('timings, negative');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/timings-negative.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 4);
+
+[
+ [0, 0],
+ [1, 0.999],
+ [60, 59.999],
+ [3600, 3599.999],
+].forEach(function(pair, index) {
+ var startTime = pair[0];
+ var endTime = pair[1];
+
+ assert_equals(cues[index].text, 'text' + index, 'Failed with cue ' + index);
+ assert_equals(cues[index].startTime, startTime, 'Failed with cue ' + index);
+ assert_equals(cues[index].endTime, endTime, 'Failed with cue ' + index);
+});
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-omitted-hours.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-omitted-hours.html
new file mode 100644
index 0000000000..89c6f67896
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-omitted-hours.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/timings-omitted-hours.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: timings, omitted hours</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('timings, omitted hours');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/timings-omitted-hours.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 3);
+
+Array.from(cues).forEach(function(cue, index) {
+ assert_equals(cue.text, 'text' + index, 'Failed with cue ' + index);
+ assert_equals(cue.startTime, 0, 'Failed with cue ' + index);
+ assert_equals(cue.endTime, 1, 'Failed with cue ' + index);
+});
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-too-long.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-too-long.html
new file mode 100644
index 0000000000..5270c62173
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-too-long.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/timings-too-long.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: timings, too long</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('timings, too long');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/timings-too-long.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 2);
+
+assert_equals(cues[0].text, 'text0');
+assert_equals(cues[0].startTime, 0);
+assert_equals(cues[0].endTime, 1);
+
+assert_equals(cues[1].text, 'text1');
+assert_equals(cues[1].startTime, 0);
+assert_equals(cues[1].endTime, 1);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-too-short.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-too-short.html
new file mode 100644
index 0000000000..3295260d44
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-too-short.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/timings-too-short.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: timings, too short</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('timings, too short');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/timings-too-short.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 2);
+
+assert_equals(cues[0].text, 'text0');
+assert_equals(cues[0].startTime, 0);
+assert_equals(cues[0].endTime, 1);
+
+assert_equals(cues[1].text, 'text1');
+assert_equals(cues[1].startTime, 0);
+assert_equals(cues[1].endTime, 1);
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/whitespace-chars.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/whitespace-chars.html
new file mode 100644
index 0000000000..92ecf7e0c2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/whitespace-chars.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<!-- DO NOT EDIT! This file and support/whitespace-chars.vtt are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: whitespace chars</title>
+<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('whitespace chars');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = 'support/whitespace-chars.vtt';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+assert_equals(cues.length, 3);
+
+assert_equals(cues[0].id, 'spaces');
+assert_equals(cues[0].text, ' text0');
+
+assert_equals(cues[1].id, 'tabs');
+assert_equals(cues[1].text, 'text1');
+
+assert_equals(cues[2].id, 'form feed');
+assert_equals(cues[2].text, 'text2');
+
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/build.py b/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/build.py
new file mode 100644
index 0000000000..d4c0fdf78d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/build.py
@@ -0,0 +1,120 @@
+import os
+import glob
+import shutil
+from os import path
+
+
+TEST_FILE_PATTERN = "support/**.test"
+TEST_OUTPUT_PATH = "tests"
+
+TEMPLATE = """\
+<!doctype html>
+<!-- DO NOT EDIT! This file and %vtt_file_rel_path are generated. -->
+<!-- See /webvtt/parsing/file-parsing/README.md -->
+<meta charset=utf-8>
+<title>WebVTT parser test: %test_name</title>
+%test_headers
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+var t = async_test('%test_name');
+t.step(function(){
+ var video = document.createElement('video');
+ var track = document.createElement('track');
+ assert_true('src' in track, 'track element not supported');
+ track.src = '%vtt_file_rel_path';
+ track['default'] = true;
+ track.kind = 'subtitles';
+ track.onload = this.step_func(trackLoaded);
+ track.onerror = this.step_func(trackError);
+ video.appendChild(track);
+ document.body.appendChild(video);
+});
+
+function trackLoaded(event) {
+ var track = event.target;
+ var video = track.parentNode;
+ var cues = video.textTracks[0].cues;
+ {
+%test_js
+ }
+ this.done();
+}
+
+function trackError(e) {
+ assert_unreached('got unexpected error event');
+}
+</script>
+"""
+
+def generate_test(test_path, output_dir):
+ # Read test file
+ test_filename = path.basename(test_path)
+ test_basefilename = path.splitext(test_filename)[0]
+
+ with open(test_path, 'r') as test:
+ test_source = test.read()
+
+ # Split test header
+ splits = test_source.split('\n\n', 1)
+ if len(splits) != 2:
+ raise ValueError("Leave an empty line between the test header and body")
+
+ test_header, test_body = splits
+
+ # Split header into name + html headers
+ splits = test_header.split('\n', 1)
+
+ test_name = splits[0]
+ if len(splits) == 2:
+ test_headers = splits[1]
+
+ # Split body into js + vtt
+ splits = test_body.split('\n===\n', 1)
+ if len(splits) != 2:
+ raise ValueError("Use === to separate the js and vtt parts")
+
+ test_js, test_vtt = splits
+
+ # Get output paths
+ os.makedirs(output_dir, exist_ok=True)
+ html_file_path = path.join(output_dir, test_basefilename + '.html')
+
+ vtt_file_dir = path.join(output_dir, 'support')
+ os.makedirs(vtt_file_dir, exist_ok=True)
+
+ vtt_file_name = test_basefilename + '.vtt'
+ vtt_file_path = path.join(vtt_file_dir, vtt_file_name)
+ vtt_file_rel_path = path.join('support', vtt_file_name)
+
+ # Write html file
+ with open(html_file_path, 'w') as output:
+ html = (TEMPLATE.replace('%test_name', test_name)
+ .replace('%test_headers', test_headers)
+ .replace('%test_js', test_js)
+ .replace('%vtt_file_rel_path', vtt_file_rel_path))
+ output.write(html)
+
+ # Write vtt file
+ with open(vtt_file_path, 'w') as output:
+ encoded = bytes(test_vtt, "utf-8").decode("unicode_escape")
+ output.write(encoded)
+
+def main():
+ file_parsing_path = path.normpath(path.join(path.dirname(__file__), ".."))
+
+ test_output_path = path.join(file_parsing_path, TEST_OUTPUT_PATH)
+
+ tests_pattern = path.join(file_parsing_path, TEST_FILE_PATTERN)
+
+ # Clean test directory
+ shutil.rmtree(test_output_path)
+
+ # Generate tests
+ for file in glob.glob(tests_pattern):
+ print('Building test files for: ' + file)
+ generate_test(file, test_output_path)
+
+if __name__ == '__main__':
+ main()
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/parser.py b/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/parser.py
new file mode 100644
index 0000000000..b77e83de78
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/parser.py
@@ -0,0 +1,710 @@
+"""
+A direct translation of the webvtt file parsing algorithm.
+
+See https://w3c.github.io/webvtt/#file-parsing for documentation
+"""
+import re
+import string
+
+SPACE_CHARACTERS = [' ', '\t', '\n', '\f', '\r']
+SPACE_SPLIT_PATTERN = r"[{}]*".format(''.join(SPACE_CHARACTERS))
+DIGITS = string.digits
+
+class DictInit:
+ def __init__(self, **dict):
+ self.__dict__.update(dict)
+
+class VTTCue(DictInit): pass
+class VTTRegion(DictInit): pass
+class Stylesheet(DictInit): pass
+
+class W3CParser:
+ input = None
+ position = None
+
+ def collect_characters(self, condition):
+ result = ""
+ while self.position < len(self.input) and condition(self.input[self.position]):
+ result += self.input[self.position]
+ self.position += 1
+ return result
+
+ def skip_whitespace(self):
+ self.collect_characters(lambda c: c in SPACE_CHARACTERS)
+
+ def parse_percentage_string(self, input):
+ 'parse a percentage string'
+
+ # 1.
+ input = input
+
+ # 2.
+ if not re.match(r'^\d+(\.\d+)?%$', input):
+ return None
+
+ # 3.
+ percentage = float(input[:-1])
+
+ # 4.
+ if percentage < 0 or percentage > 100:
+ return None
+
+ # 5.
+ return percentage
+
+class VTTParser(W3CParser):
+ def __init__(self, input):
+ self.input = input
+ self.position = 0
+ self.seen_cue = False
+
+ self.text_tracks = []
+ self.stylesheets = []
+ self.regions = []
+ self.errors = []
+
+ def parse(self):
+ 'WebVTT parser algorithm'
+
+ # 1.
+ self.input = self.input.replace('\0', '\ufffd').replace('\r\n', '\n').replace('\r', '\n')
+
+ # 2.
+ self.position = 0
+
+ # 3.
+ self.seen_cue = False
+
+ # 4.
+ if len(self.input) < 6:
+ self.errors.append('input too small for webvtt')
+ return
+
+ # 5.
+ if len(self.input) == 6 and self.input != 'WEBVTT':
+ self.errors.append('invalid webvtt header')
+ return
+
+ # 6.
+ if len(self.input) > 6:
+ if not (self.input[0:6] == 'WEBVTT' and self.input[6] in ['\u0020', '\u0009', '\u000A']):
+ self.errors.append('invalid webvtt header')
+ return
+
+ # 7.
+ self.collect_characters(lambda c: c != '\n')
+
+ # 8.
+ if self.position >= len(self.input):
+ return
+
+ # 9.
+ if self.input[self.position] == '\n':
+ self.position += 1
+
+ # 10.
+ if self.position >= len(self.input):
+ return
+
+ # 11.
+ if self.input[self.position] != '\n':
+ self.collect_block(in_header = True)
+ else:
+ self.position += 1
+
+ # 12.
+ self.collect_characters(lambda c: c == '\n')
+
+ # 13.
+ self.regions = []
+
+ # 14.
+ while self.position < len(self.input):
+ # 1.
+ block = self.collect_block()
+
+ # 2.
+ if isinstance(block, VTTCue):
+ self.text_tracks.append(block)
+
+ # 3.
+ elif isinstance(block, Stylesheet):
+ self.stylesheets.append(block)
+
+ # 4.
+ elif isinstance(block, VTTRegion):
+ self.regions.append(block)
+
+ # 5.
+ self.collect_characters(lambda c: c == '\n')
+
+ # 15.
+ return
+
+ def collect_block(self, in_header = False):
+ 'collect a WebVTT block'
+
+ # 1. (done by class)
+
+ line_count = 0 # 2.
+ previous_position = self.position # 3.
+ line = "" # 4.
+ buffer = "" # 5.
+ seen_eof = False # 6.
+ seen_arrow = False # 7.
+ cue = None # 8.
+ stylesheet = None # 9.
+ region = None # 10.
+
+ # 11.
+ while True:
+ # 1.
+ line = self.collect_characters(lambda c: c != '\n')
+
+ # 2.
+ line_count += 1
+
+ # 3.
+ if self.position >= len(self.input):
+ seen_eof = True
+ else:
+ self.position += 1
+
+ # 4.
+ if '-->' in line:
+ # 1.
+ if not in_header and (line_count == 1 or line_count == 2 and not seen_arrow):
+ # 1.
+ seen_arrow = True
+
+ # 2.
+ previous_position = self.position
+
+ # 3.
+ cue = VTTCue(
+ id = buffer,
+ pause_on_exit = False,
+ region = None,
+ writing_direction = 'horizontal',
+ snap_to_lines = True,
+ line = 'auto',
+ line_alignment = 'start alignment',
+ position = 'auto',
+ position_alignment = 'auto',
+ cue_size = 100,
+ text_alignment = 'center',
+ text = '',
+ )
+
+ # 4.
+ if not VTTCueParser(self, line, cue).collect_cue_timings_and_settings():
+ cue = None
+ else:
+ buffer = ''
+ self.seen_cue = True # DIFFERENCE
+
+ else:
+ self.errors.append('invalid webvtt cue block')
+ self.position = previous_position
+ break
+
+ # 5.
+ elif line == '':
+ break
+
+ # 6.
+ else:
+ # 1.
+ if not in_header and line_count == 2:
+ # 1.
+ if not self.seen_cue and re.match(r'^STYLE\s*$', buffer):
+ stylesheet = Stylesheet(
+ location = None,
+ parent = None,
+ owner_node = None,
+ owner_rule = None,
+ media = None,
+ title = None,
+ alternate = False,
+ origin_clean = True,
+ source = None,
+ )
+ buffer = ''
+ # 2.
+ elif not self.seen_cue and re.match(r'^REGION\s*$', buffer):
+ region = VTTRegion(
+ id = '',
+ width = 100,
+ lines = 3,
+ anchor_point = (0, 100),
+ viewport_anchor_point = (0, 100),
+ scroll_value = None,
+ )
+ buffer = ''
+
+ # 2.
+ if buffer != '':
+ buffer += '\n'
+
+ # 3.
+ buffer += line
+
+ # 4.
+ previous_position = self.position
+
+ # 7.
+ if seen_eof:
+ break
+
+ # 12.
+ if cue is not None:
+ cue.text = buffer
+ return cue
+
+ # 13.
+ elif stylesheet is not None:
+ stylesheet.source = buffer
+ return stylesheet
+
+ # 14.
+ elif region is not None:
+ self.collect_region_settings(region, buffer)
+ return region
+
+ # 15.
+ return None
+
+ def collect_region_settings(self, region, input):
+ 'collect WebVTT region settings'
+
+ # 1.
+ settings = re.split(SPACE_SPLIT_PATTERN, input)
+
+ # 2.
+ for setting in settings:
+ # 1.
+ if ':' not in setting:
+ continue
+
+ index = setting.index(':')
+ if index in [0, len(setting) - 1]:
+ continue
+
+ # 2.
+ name = setting[:index]
+
+ # 3.
+ value = setting[index + 1:]
+
+ # 4.
+ if name == "id":
+ region.id = value
+
+ elif name == "width":
+ percentage = self.parse_percentage_string(value)
+ if percentage is not None:
+ region.width = percentage
+
+ elif name == "lines":
+ # 1.
+ if not re.match(r'^\d+$', value):
+ continue
+
+ # 2.
+ number = int(value)
+
+ # 3.
+ region.lines = number
+
+ elif name == "regionanchor":
+ # 1.
+ if ',' not in value:
+ continue
+
+ #. 2.
+ index = value.index(',')
+ anchorX = value[:index]
+
+ # 3.
+ anchorY = value[index + 1:]
+
+ # 4.
+ percentageX = self.parse_percentage_string(anchorX)
+ percentageY = self.parse_percentage_string(anchorY)
+ if None in [percentageX, percentageY]:
+ continue
+
+ # 5.
+ region.anchor_point = (percentageX, percentageY)
+
+ elif name == "viewportanchor":
+ # 1.
+ if ',' not in value:
+ continue
+
+ #. 2.
+ index = value.index(',')
+ viewportanchorX = value[:index]
+
+ # 3.
+ viewportanchorY = value[index + 1:]
+
+ # 4.
+ percentageX = self.parse_percentage_string(viewportanchorX)
+ percentageY = self.parse_percentage_string(viewportanchorY)
+ if None in [percentageX, percentageY]:
+ continue
+
+ # 5.
+ region.viewport_anchor_point = (percentageX, percentageY)
+
+ elif name == "scroll":
+ # 1.
+ if value == "up":
+ region.scroll_value = "up"
+
+ # 5.
+ continue
+
+
+class VTTCueParser(W3CParser):
+ def __init__(self, parent, input, cue):
+ self.parent = parent
+ self.errors = self.parent.errors
+ self.input = input
+ self.position = 0
+ self.cue = cue
+
+ def collect_cue_timings_and_settings(self):
+ 'collect WebVTT cue timings and settings'
+
+ # 1. (handled by class)
+
+ # 2.
+ self.position = 0
+
+ # 3.
+ self.skip_whitespace()
+
+ # 4.
+ timestamp = self.collect_timestamp()
+ if timestamp is None:
+ self.errors.append('invalid start time for VTTCue')
+ return False
+ self.cue.start_time = timestamp
+
+ # 5.
+ self.skip_whitespace()
+
+ # 6.
+ if self.input[self.position] != '-':
+ return False
+ self.position += 1
+
+ # 7.
+ if self.input[self.position] != '-':
+ return False
+ self.position += 1
+
+ # 8.
+ if self.input[self.position] != '>':
+ return False
+ self.position += 1
+
+ # 9.
+ self.skip_whitespace()
+
+ # 10.
+ timestamp = self.collect_timestamp()
+ if timestamp is None:
+ self.errors.append('invalid end time for VTTCue')
+ return False
+ self.cue.end_time = timestamp
+
+ # 11.
+ remainder = self.input[self.position:]
+
+ # 12.
+ self.parse_settings(remainder)
+
+ # Extra
+ return True
+
+ def parse_settings(self, input):
+ 'parse the WebVTT cue settings'
+
+ # 1.
+
+ settings = re.split(SPACE_SPLIT_PATTERN, input)
+
+ # 2.
+ for setting in settings:
+ # 1.
+ if ':' not in setting:
+ continue
+
+ index = setting.index(':')
+ if index in [0, len(setting) - 1]:
+ continue
+
+ # 2.
+ name = setting[:index]
+
+ # 3.
+ value = setting[index + 1:]
+
+ # 4.
+ if name == 'region':
+ # 1.
+ last_regions = (region for region in reversed(self.parent.regions) if region.id == value)
+ self.cue.region = next(last_regions, None)
+
+ elif name == 'vertical':
+ # 1. and 2.
+ if value in ['rl', 'lr']:
+ self.cue.writing_direction = value
+
+ elif name == 'line':
+ # 1.
+ if ',' in value:
+ index = value.index(',')
+ linepos = value[:index]
+ linealign = value[index + 1:]
+
+ # 2.
+ else:
+ linepos = value
+ linealign = None
+
+ # 3.
+ if not re.search(r'\d', linepos):
+ continue
+
+ # 4.
+ if linepos[-1] == '%':
+ number = self.parse_percentage_string(linepos)
+ if number is None:
+ continue
+ else:
+ # 1.
+ if not re.match(r'^[-\.\d]*$', linepos):
+ continue
+
+ # 2.
+ if '-' in linepos[1:]:
+ continue
+
+ # 3.
+ if linepos.count('.') > 1:
+ continue
+
+ # 4.
+ if '.' in linepos:
+ if not re.search(r'\d\.\d', linepos):
+ continue
+
+ # 5.
+ number = float(linepos)
+
+ # 5.
+ if linealign == "start":
+ self.cue.line_alignment = 'start'
+
+ # 6.
+ elif linealign == "center":
+ self.cue.line_alignment = 'center'
+
+ # 7.
+ elif linealign == "end":
+ self.cue.line_alignment = 'end'
+
+ # 8.
+ elif linealign != None:
+ continue
+
+ # 9.
+ self.cue.line = number
+
+ # 10.
+ if linepos[-1] == '%':
+ self.cue.snap_to_lines = False
+ else:
+ self.cue.snap_to_lines = True
+
+ elif name == 'position':
+ # 1.
+ if ',' in value:
+ index = value.index(',')
+ colpos = value[:index]
+ colalign = value[index + 1:]
+
+ # 2.
+ else:
+ colpos = value
+ colalign = None
+
+ # 3.
+ number = self.parse_percentage_string(colpos)
+ if number is None:
+ continue
+
+ # 4.
+ if colalign == "line-left":
+ self.cue.line_alignment = 'line-left'
+
+ # 5.
+ elif colalign == "center":
+ self.cue.line_alignment = 'center'
+
+ # 6.
+ elif colalign == "line-right":
+ self.cue.line_alignment = 'line-right'
+
+ # 7.
+ elif colalign != None:
+ continue
+
+ # 8.
+ self.cue.position = number
+
+ elif name == 'size':
+ # 1.
+ number = self.parse_percentage_string(value)
+ if number is None:
+ continue
+
+ # 2.
+ self.cue.cue_size = number
+
+ elif name == 'align':
+ # 1.
+ if value == 'start':
+ self.cue.text_alignment = 'start'
+
+ # 2.
+ if value == 'center':
+ self.cue.text_alignment = 'center'
+
+ # 3.
+ if value == 'end':
+ self.cue.text_alignment = 'end'
+
+ # 4.
+ if value == 'left':
+ self.cue.text_alignment = 'left'
+
+ # 5.
+ if value == 'right':
+ self.cue.text_alignment = 'right'
+
+ # 5.
+ continue
+
+ def collect_timestamp(self):
+ 'collect a WebVTT timestamp'
+
+ # 1. (handled by class)
+
+ # 2.
+ most_significant_units = 'minutes'
+
+ # 3.
+ if self.position >= len(self.input):
+ return None
+
+ # 4.
+ if self.input[self.position] not in DIGITS:
+ return None
+
+ # 5.
+ string = self.collect_characters(lambda c: c in DIGITS)
+
+ # 6.
+ value_1 = int(string)
+
+ # 7.
+ if len(string) != 2 or value_1 > 59:
+ most_significant_units = 'hours'
+
+ # 8.
+ if self.position >= len(self.input) or self.input[self.position] != ':':
+ return None
+ self.position += 1
+
+ # 9.
+ string = self.collect_characters(lambda c: c in DIGITS)
+
+ # 10.
+ if len(string) != 2:
+ return None
+
+ # 11.
+ value_2 = int(string)
+
+ # 12.
+ if most_significant_units == 'hours' or self.position < len(self.input) and self.input[self.position] == ':':
+ # 1.
+ if self.position >= len(self.input) or self.input[self.position] != ':':
+ return None
+ self.position += 1
+
+ # 2.
+ string = self.collect_characters(lambda c: c in DIGITS)
+
+ # 3.
+ if len(string) != 2:
+ return None
+
+ # 4.
+ value_3 = int(string)
+ else:
+ value_3 = value_2
+ value_2 = value_1
+ value_1 = 0
+
+ # 13.
+ if self.position >= len(self.input) or self.input[self.position] != '.':
+ return None
+ self.position += 1
+
+ # 14.
+ string = self.collect_characters(lambda c: c in DIGITS)
+
+ # 15.
+ if len(string) != 3:
+ return None
+
+ # 16.
+ value_4 = int(string)
+
+ # 17.
+ if value_2 >= 59 or value_3 >= 59:
+ return None
+
+ # 18.
+ result = value_1 * 60 * 60 + value_2 * 60 + value_3 + value_4 / 1000
+
+ # 19.
+ return result
+
+
+def main(argv):
+ files = [open(path, 'r') for path in argv[1:]]
+
+ try:
+ for file in files:
+ parser = VTTParser(file.read())
+ parser.parse()
+
+ print("Results: {}".format(file))
+ print(" Cues: {}".format(parser.text_tracks))
+ print(" StyleSheets: {}".format(parser.stylesheets))
+ print(" Regions: {}".format(parser.regions))
+ print(" Errors: {}".format(parser.errors))
+ finally:
+ for file in files:
+ file.close()
+
+if __name__ == '__main__':
+ import sys
+ main(sys.argv);
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/spec_report.py b/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/spec_report.py
new file mode 100644
index 0000000000..beb140eb8c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/spec_report.py
@@ -0,0 +1,99 @@
+import os
+import sys
+import glob
+import html
+import fnmatch
+from os import path
+
+import coverage
+
+OUTPUT_TEMPLATE = """
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Spec Coverage</title>
+ <link rel="stylesheet" href="style.css" type="text/css">
+ <style>
+ .covered {
+ }
+
+ .missed {
+ background-color: lightcoral;
+ }
+ code {
+ margin: 0;
+ padding: 0;
+ display:block;
+ white-space:pre-wrap;
+ }
+ </style>
+</head>
+<body>
+ %head
+ <div><pre>
+ %body
+ </pre></div>
+</body>
+</html>
+"""
+
+LINE_TEMPLATE = "<code class=\"%class\">%lineno| %source</code>"
+
+def write_report(data, source_file, output_file):
+ module_name, executable_lines, excluded_lines, missing_lines, _ = data
+ missing_lines = set(missing_lines)
+
+ with open(output_file, "w") as output, open(source_file, "r") as source:
+ lines = source.readlines()
+
+ file_report = []
+ padding = len(str(len(lines)))
+
+ for index, line in enumerate(lines):
+ line = line[0:-1]
+ lineno = index + 1
+ line_number = str(lineno).rjust(padding)
+
+ covered = lineno not in missing_lines
+ line_class = 'covered' if covered else 'missed'
+
+ formatted_line = (LINE_TEMPLATE.replace('%class', line_class)
+ .replace('%lineno', line_number)
+ .replace('%source', html.escape(line)))
+ file_report.append(formatted_line)
+
+ report_body = ''.join(file_report)
+
+ report_header = ''
+
+ report = (OUTPUT_TEMPLATE.replace('%head', report_header)
+ .replace('%body', report_body))
+ output.write(report)
+
+def main(argv):
+ parsing_path = path.normpath(path.join(path.dirname(__file__), ".."))
+
+ files = argv[1:]
+ if not files:
+ files = [os.path.join(root, file) for root, _, files in os.walk(parsing_path)
+ for file in fnmatch.filter(files, '*.vtt')]
+
+ cov = coverage.Coverage()
+ cov.start()
+
+ for file_path in files:
+ with open(file_path, "r") as file:
+ source = file.read()
+
+ import parser
+ p = parser.VTTParser(source)
+ p.parse()
+
+ cov.stop()
+
+ data = cov.analysis2(parser.__file__)
+ write_report(data, parser.__file__, "report.html")
+
+if __name__ == '__main__':
+ main(sys.argv)
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up-ref.html
new file mode 100644
index 0000000000..17222bdc7b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, repositioning (up) when 2 cues overlap completely</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+}
+.cueText {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video">
+ <span class="cue">
+ <div><span class="cueText">This is another test subtitle</span></div>
+ <div><span class="cueText">This is a test subtitle</span></div>
+ </span>
+</div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up.html
new file mode 100644
index 0000000000..aca503f4b6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, repositioning (up) when 2 cues overlap completely</title>
+<link rel="match" href="2_cues_overlapping_completely_move_up-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 2;" onseeked="this.onseeked = null; takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/2_cues_overlapping_completely_move_up.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down-ref.html
new file mode 100644
index 0000000000..8262b9e598
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, repositioning (down) when 2 cues overlap partially</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+#cue1 {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ right: 0;
+ margin-top: -4.5px;
+ text-align: center
+}
+#cue2 {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ right: 0;
+ margin-top: 4.5px;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue" id="cue1"><span>This is a test subtitle</span></span><span class="cue" id="cue2"><span>This is another test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down.html
new file mode 100644
index 0000000000..9620456780
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, repositioning (down) when 2 cues overlap partially</title>
+<link rel="match" href="2_cues_overlapping_partially_move_down-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 2;" onseeked="this.onseeked = null; takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/2_cues_overlapping_partially_move_down.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up-ref.html
new file mode 100644
index 0000000000..22a711af68
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, repositioning (down) when 2 cues overlap partially</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+}
+.cueText {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+.cueTextGoingUp {
+ position: relative;
+ top: -1.8px; /* 1% height of video's height */
+}
+</style>
+<div class="video">
+ <span class="cue">
+ <div><span class="cueText cueTextGoingUp">This is another test subtitle</span></div>
+ <div><span class="cueText">This is a test subtitle</span></div>
+ </span>
+</div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up.html
new file mode 100644
index 0000000000..2dedb8ee12
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, repositioning (down) when 2 cues overlap partially</title>
+<link rel="match" href="2_cues_overlapping_partially_move_up-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 2;" onseeked="this.onseeked = null; takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/2_cues_overlapping_partially_move_up.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks-ref.html
new file mode 100644
index 0000000000..464fbcff8b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Reference for WebVTT rendering, 2 tracks enabled at the same time</title>
+<script src="/common/reftest-wait.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+}
+.cueText {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video">
+ <video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ </video>
+ <span class="cue">
+ <div><span class="cueText">This is a <u>test subtitle</u></span></div>
+ <div><span class="cueText">This is a test subtitle</span></div>
+ </span>
+</div>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks.html
new file mode 100644
index 0000000000..1a29be86a4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, 2 tracks enabled at the same time</title>
+<link rel="match" href="2_tracks-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/test.vtt">
+ <track src="support/test_underline.vtt">
+</video>
+<script>
+document.getElementsByTagName('track')[0].track.mode = 'showing';
+document.getElementsByTagName('track')[1].track.mode = 'showing';
+</script>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks-ref.html
new file mode 100644
index 0000000000..3f155dd0ad
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Reference for WebVTT rendering, 3 tracks enabled at the same time</title>
+<script src="/common/reftest-wait.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+}
+.cueText {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video">
+ <video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ </video>
+ <span class="cue">
+ <div><span class="cueText">This is a <b>test subtitle</b></span></div>
+ <div><span class="cueText">This is a <u>test subtitle</u></span></div>
+ <div><span class="cueText">This is a test subtitle</span></div>
+ </span>
+</div>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks.html
new file mode 100644
index 0000000000..bdb45f1110
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, 3 tracks enabled at the same time</title>
+<link rel="match" href="3_tracks-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/test.vtt">
+ <track src="support/test_underline.vtt">
+ <track src="support/test_bold.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ document.getElementsByTagName('track')[1].track.mode = 'showing';
+ document.getElementsByTagName('track')[2].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center-ref.html
new file mode 100644
index 0000000000..90f011dc57
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, align:center</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class=video><span class=cue><span>This is a test</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center.html
new file mode 100644
index 0000000000..c7ab0dee17
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, align:center</title>
+<link rel="match" href="align_center-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/align_center.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50-ref.html
new file mode 100644
index 0000000000..ed5e3a5e8e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, align:center, position:50%</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class=video><span class=cue><span>This is a test</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50.html
new file mode 100644
index 0000000000..38df5e1bb2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, align:center, position:50%</title>
+<link rel="match" href="align_center_position_50-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/align_center_position_50.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50-ref.html
new file mode 100644
index 0000000000..4d7553a8b7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, align:center, position greater than 50%</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ right: 0px;
+ width: 64px;
+ text-align: center;
+ font: 20px/1 Ahem;
+}
+.cueText {
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class=video>
+ <div class="cue">
+ <span class="cueText">foo</span>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50.html
new file mode 100644
index 0000000000..0f69e57251
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, align:center, position greater than 50%</title>
+<link rel="match" href="align_center_position_gt_50-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font: 20px/1 Ahem;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/align_center_position_gt_50.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size-ref.html
new file mode 100644
index 0000000000..73db73ed6a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, align:center, position greater than 50%, size greater than maximum size</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+}
+.cue {
+ position: absolute;
+ bottom: 0px;
+ right: 0px;
+ width: 64px;
+ text-align: center;
+ font: 20px/1 Ahem;
+}
+.cueText {
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class=video>
+ <div class="cue">
+ <div><span class="cueText">Awe</span></div>
+ <div><span class="cueText">som</span></div>
+ <div><span class="cueText">e!!</span></div>
+ <div><span class="cueText">!</span></div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size.html
new file mode 100644
index 0000000000..869b5f669e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, align:center, position greater than 50%, size greater than maximum size</title>
+<link rel="match" href="align_center_position_gt_50_size_gt_maximum_size-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font: 20px/1 Ahem;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/align_center_position_gt_50_size_gt_maximum_size.vtt">
+</video>
+<script>
+document.getElementsByTagName('track')[0].track.mode = 'showing';
+</script>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50-ref.html
new file mode 100644
index 0000000000..baa6511046
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, align:center, position less than 50%</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0px;
+ right: 0;
+ width: 64px;
+ text-align: center;
+ font: 20px/1 Ahem;
+}
+.cueText {
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class=video>
+ <div class="cue">
+ <span class="cueText">foo</span>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50.html
new file mode 100644
index 0000000000..953e74183b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, align:center, position less than 50%</title>
+<link rel="match" href="align_center_position_lt_50-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font: 20px/1 Ahem;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/align_center_position_lt_50.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size-ref.html
new file mode 100644
index 0000000000..aeaf757cc6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, align:center, position less than 50%, size greater than maximum size</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+}
+.cue {
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ width: 64px;
+ text-align: center;
+ font: 20px/1 Ahem;
+}
+.cueText {
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class=video>
+ <div class="cue">
+ <div><span class="cueText">Awe</span></div>
+ <div><span class="cueText">som</span></div>
+ <div><span class="cueText">e!!</span></div>
+ <div><span class="cueText">!</span></div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size.html
new file mode 100644
index 0000000000..174894bf0c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, align:center, position less than 50%, size greater than maximum size</title>
+<link rel="match" href="align_center_position_lt_50_size_gt_maximum_size-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font: 20px/1 Ahem;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/align_center_position_lt_50_size_gt_maximum_size.vtt">
+</video>
+<script>
+document.getElementsByTagName('track')[0].track.mode = 'showing';
+</script>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped-ref.html
new file mode 100644
index 0000000000..55aed284b7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, align:center with long cues</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class=video><span class=cue><span>This is a test subtitle that most likely will span over several rows since it is a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped.html
new file mode 100644
index 0000000000..3773593f0f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, align:center with long cues</title>
+<link rel="match" href="align_center_wrapped-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/align_center_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end-ref.html
new file mode 100644
index 0000000000..23c7c71aff
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, align:end</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: right;
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class=video><span class=cue><span>This is a test</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end.html
new file mode 100644
index 0000000000..c413579b23
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, align:end</title>
+<link rel="match" href="align_end-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/align_end.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped-ref.html
new file mode 100644
index 0000000000..eee75f138f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, align:end with long cues</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: right
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class=video><span class=cue><span>This is a test subtitle that most likely will span over several rows since it is a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped.html
new file mode 100644
index 0000000000..97e9ef7bf2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, align:end with long cues</title>
+<link rel="match" href="align_end_wrapped-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/align_end_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start-ref.html
new file mode 100644
index 0000000000..b1bae4af0b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, align:start</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: left;
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class=video><span class=cue><span>This is a test</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start.html
new file mode 100644
index 0000000000..955b231b02
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, align:start</title>
+<link rel="match" href="align_start-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/align_start.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped-ref.html
new file mode 100644
index 0000000000..45cb287e2f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, align:start with long cues</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: left;
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class=video><span class=cue><span>This is a test subtitle that most likely will span over several rows since it is a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped.html
new file mode 100644
index 0000000000..0664f38e63
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, align:start with long cues</title>
+<link rel="match" href="align_start_wrapped-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/align_start_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles-ref.html
new file mode 100644
index 0000000000..d4bd2b74c2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Reference for WebVTT rendering, &lt;audio&gt; should not have subtitles</title>
+<style>
+audio {
+ width: 320px;
+ height: 180px;
+ outline: solid
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<audio autoplay controls onplaying="this.onplaying = null; this.pause(); this.currentTime = 0; takeScreenshotDelayed(1000)">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+</audio>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles.html
new file mode 100644
index 0000000000..65f559f901
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, &lt;audio&gt; should not have subtitles</title>
+<link rel="match" href="audio_has_no_subtitles-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+audio {
+ width: 320px;
+ height: 180px;
+ outline: solid
+}
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<audio autoplay controls onplaying="this.onplaying = null; this.pause(); this.currentTime = 0; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</audio>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/background.png b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/background.png
new file mode 100644
index 0000000000..6d16cc84c4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/background.png
Binary files differ
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/basic-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/basic-ref.html
new file mode 100644
index 0000000000..182bc69277
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/basic-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, basic</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/basic.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/basic.html
new file mode 100644
index 0000000000..ca77eb734b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/basic.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, basic</title>
+<link rel="match" href="basic-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/bidi_ruby-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/bidi_ruby-ref.html
new file mode 100644
index 0000000000..cc4df4178e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/bidi_ruby-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bidi ruby</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span><ruby>.<rt><bdo dir="ltr">&#x05D0;&#x05D0;</bdo></rt>ab)<rt>x</rt></ruby></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/bidi_ruby.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/bidi_ruby.html
new file mode 100644
index 0000000000..ed2b2e019d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/bidi_ruby.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bidi ruby</title>
+<link rel="match" href="bidi_ruby-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../support/bidi_ruby.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/start_alignment-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/start_alignment-ref.html
new file mode 100644
index 0000000000..78ca8979c9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/start_alignment-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html class="reftest-wait">
+<title>WebVTT rendering, set align start and the cue contains two lines with different writing directions</title>
+<script src="/common/reftest-wait.js"></script>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: start;
+ unicode-bidi: plaintext;
+}
+.cueText {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video">
+ <video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ </video>
+ <span class="cue">
+ <span class="cueText">Hello!</span><br>
+ <span class="cueText">שלום!</span>
+ </span>
+</div>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/start_alignment.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/start_alignment.html
new file mode 100644
index 0000000000..2b6cd76c20
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/start_alignment.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, set align start and the cue contains two lines with different writing directions</title>
+<link rel="match" href="start_alignment-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: sans-serif;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../support/start_alignment.vtt" default>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_LF_u05D0-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_LF_u05D0-ref.html
new file mode 100644
index 0000000000..3c968da7c2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_LF_u05D0-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bidi U+002E LF U+05D0</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span>.<br><bdo dir=ltr>&#x05D0;ab)</bdo></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_LF_u05D0.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_LF_u05D0.html
new file mode 100644
index 0000000000..e47cc127df
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_LF_u05D0.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bidi U+002E LF U+05D0</title>
+<link rel="match" href="u002E_LF_u05D0-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../support/u002E_LF_u05D0.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2028_u05D0-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2028_u05D0-ref.html
new file mode 100644
index 0000000000..492b194163
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2028_u05D0-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bidi U+002E U+2028 U+05D0</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span>.<br><bdo dir=ltr>(ab&#x05D0;</bdo></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2028_u05D0.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2028_u05D0.html
new file mode 100644
index 0000000000..0c0ec1842e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2028_u05D0.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bidi U+002E U+2028 U+05D0</title>
+<link rel="match" href="u002E_u2028_u05D0-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../support/u002E_u2028_u05D0.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2029_u05D0-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2029_u05D0-ref.html
new file mode 100644
index 0000000000..b2c03406d5
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2029_u05D0-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bidi U+002E U+2029 U+05D0</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span>.<br><bdo dir=ltr>&#x05D0;ab)</bdo></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2029_u05D0.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2029_u05D0.html
new file mode 100644
index 0000000000..49b217594d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2029_u05D0.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bidi U+002E U+2029 U+05D0</title>
+<link rel="match" href="u002E_u2029_u05D0-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../support/u002E_u2029_u05D0.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0041_first-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0041_first-ref.html
new file mode 100644
index 0000000000..56e47f0e08
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0041_first-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bidi U+0041 first</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span><bdo dir=ltr>Aab)</bdo></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0041_first.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0041_first.html
new file mode 100644
index 0000000000..487d4ab400
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0041_first.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bidi U+0041 first</title>
+<link rel="match" href="u0041_first-ref.html">
+<!--
+0041..005A ; L # L& [26] LATIN CAPITAL LETTER A..LATIN CAPITAL LETTER Z
+http://www.unicode.org/Public/UNIDATA/extracted/DerivedBidiClass.txt
+-->
+<style>
+html { overflow:hidden }
+body { margin:0 }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../support/u0041_first.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u05D0_first-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u05D0_first-ref.html
new file mode 100644
index 0000000000..8ea95ae597
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u05D0_first-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bidi U+05D0 first</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span><bdo dir=ltr>(ab&#x05D0;</bdo></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u05D0_first.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u05D0_first.html
new file mode 100644
index 0000000000..4075d20564
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u05D0_first.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bidi U+05D0 first</title>
+<link rel="match" href="u05D0_first-ref.html">
+<!--
+05D0..05EA ; R # Lo [27] HEBREW LETTER ALEF..HEBREW LETTER TAV
+http://www.unicode.org/Public/UNIDATA/extracted/DerivedBidiClass.txt
+-->
+<style>
+html { overflow:hidden }
+body { margin:0 }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../support/u05D0_first.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0628_first-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0628_first-ref.html
new file mode 100644
index 0000000000..f5816cf62d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0628_first-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bidi U+0628 first</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span><bdo dir=ltr>(ab&#x0628;</bdo></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0628_first.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0628_first.html
new file mode 100644
index 0000000000..8524375d0d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0628_first.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bidi U+0628 first</title>
+<link rel="match" href="u0628_first-ref.html">
+<!--
+0620..063F ; AL # Lo [32] ARABIC LETTER KASHMIRI YEH..ARABIC LETTER FARSI YEH WITH THREE DOTS ABOVE
+http://www.unicode.org/Public/UNIDATA/extracted/DerivedBidiClass.txt
+-->
+<style>
+html { overflow:hidden }
+body { margin:0 }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../support/u0628_first.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u06E9_no_strong_dir-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u06E9_no_strong_dir-ref.html
new file mode 100644
index 0000000000..c1dfd3b6c1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u06E9_no_strong_dir-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bidi U+06E9 no strong direction</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span><bdo dir=ltr>&#x06E9;)</bdo></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u06E9_no_strong_dir.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u06E9_no_strong_dir.html
new file mode 100644
index 0000000000..a3c69c8adb
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u06E9_no_strong_dir.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bidi U+06E9 no strong direction</title>
+<link rel="match" href="u06E9_no_strong_dir-ref.html">
+<!--
+06E9 ; ON # So ARABIC PLACE OF SAJDAH
+http://www.unicode.org/Public/UNIDATA/extracted/DerivedBidiClass.txt
+-->
+<style>
+html { overflow:hidden }
+body { margin:0 }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../support/u06E9_no_strong_dir.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_lr-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_lr-ref.html
new file mode 100644
index 0000000000..42b6a5dac0
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_lr-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bidi ruby</title>
+ <meta charset="UTF-8">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ text-align: center;
+ unicode-bidi: -webkit-plaintext;
+ unicode-bidi: plaintext;
+ direction: ltr;
+ writing-mode: vertical-lr;
+ -webkit-writing-mode: vertical-lr;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span><ruby>右<rt>みぎ</rt></ruby>に<ruby> 見<rt>み</rt></ruby>えるのは...<br>二行目</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_lr.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_lr.html
new file mode 100644
index 0000000000..c5e7d2b15d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_lr.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, vertical growing left to right</title>
+<link rel="match" href="vertical_lr-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../support/bidi_vertical_lr.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_rl-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_rl-ref.html
new file mode 100644
index 0000000000..737c695553
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_rl-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bidi ruby</title>
+ <meta charset="UTF-8">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ text-align: center;
+ unicode-bidi: -webkit-plaintext;
+ unicode-bidi: plaintext;
+ direction: ltr;
+ writing-mode: vertical-rl;
+ -webkit-writing-mode: vertical-rl;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span><ruby></ruby>に<ruby> 見<rt>み</rt></ruby>えるのは...<br>二行目</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_rl.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_rl.html
new file mode 100644
index 0000000000..9afdb2dd10
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_rl.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, vertical growing right to left</title>
+<link rel="match" href="vertical_rl-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../support/bidi_vertical_rl.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long-ref.html
new file mode 100644
index 0000000000..85683c7ba5
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, size:50%, cue too long - should be hidden</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+</style>
+<div class="video"><span class="cue"></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long.html
new file mode 100644
index 0000000000..1dc19e6259
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, size:50%, cue too long - should be hidden</title>
+<link rel="match" href="cue_too_long-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/very_long_cue.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities-ref.html
new file mode 100644
index 0000000000..d12188cfa4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, decoding of escaped entities</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>Here are the escaped <br>entities: &amp; &lt; &gt; &lrm; &rlm; &nbsp;</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities.html
new file mode 100644
index 0000000000..c5061f5f39
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Reference for WebVTT rendering, decoding of escaped entities</title>
+<link rel="match" href="decode_escaped_entities-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/decode_escaped_entities.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition-ref.html
new file mode 100644
index 0000000000..874cef1fa0
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, cue reposition after enabling controls</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.video {
+ display: inline-block;
+ outline: solid;
+ width: 320px;
+ height: 240px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+ font-size: 50px;
+}
+</style>
+<div class="video"><span class="cue"><span>Foo</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition.html
new file mode 100644
index 0000000000..43c0acef74
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>WebVTT rendering, cue reposition after disabling controls</title>
+<link rel="match" href="disable_controls_reposition-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+video {
+ outline: solid;
+ width: 320px;
+ height: 240px;
+}
+::cue {
+ font-family: Ahem, sans-serif;
+ font-size: 50px;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video autoplay controls onplaying="this.onplaying = null;
+ this.pause();
+ this.currentTime = 0;
+ setTimeout(function(video){
+ video.controls = false;
+ }, 100, this);
+ takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src=support/foo.vtt>
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size-ref.html
new file mode 100644
index 0000000000..dd48970516
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, a cue's align, position, line and size properties is possible to override using the DOM APIs</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ top: 0;
+ right: 51.2px;
+ width: 64px;
+ text-align: left
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>There is nothing to see here people, move on</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size.html
new file mode 100644
index 0000000000..4134b46153
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, a cue's align, position, line and size properties is possible to override using the DOM APIs</title>
+<link rel="match" href="dom_override_cue_align_position_line_size-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script>
+ var i = 0;
+ function updateCue() {
+ i++;
+ if (i !== 2) {
+ return;
+ }
+ var t = document.getElementById('track');
+ var c = t.track.cues[0];
+ c.align = 'start';
+ c.position = 80;
+ c.line = 0;
+ c.size = 20;
+ c.text = 'There is nothing to see here people, move on';
+ updateRendering();
+ }
+ function updateRendering() {
+ var v = document.getElementById('video');
+ v.onplaying = function() {
+ this.onplaying = null;
+ this.pause();
+ takeScreenshotDelayed(1000);
+ };
+ v.play();
+ }
+</script>
+<video id="video" width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track id="track" src="support/test.vtt" onload="updateCue();">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size_while_paused-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size_while_paused-ref.html
new file mode 100644
index 0000000000..fccabb9bba
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size_while_paused-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, a cue's align, position, line and size properties should be rerendered when overriding them using the DOM APIs while paused</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ top: 0;
+ right: 51.2px;
+ width: 64px;
+ text-align: left
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This test tests</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size_while_paused.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size_while_paused.html
new file mode 100644
index 0000000000..7fc81bb2ea
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size_while_paused.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, a cue's align, position, line and size properties should be rerendered when overriding them using the DOM APIs while paused</title>
+<link rel="match" href="dom_override_cue_align_position_line_size_while_paused-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script>
+ var i = 0;
+ function updateCue() {
+ i++;
+ if (i !== 2) {
+ return;
+ }
+ var t = document.getElementById('track');
+ var c = t.track.cues[0];
+ c.align = 'start';
+ c.position = 80;
+ c.line = 0;
+ c.size = 20;
+ c.text = 'This test tests';
+ takeScreenshotDelayed(1000);
+ }
+</script>
+<video id="video" width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track id="track" src="support/test.vtt" onload="updateCue();">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line-ref.html
new file mode 100644
index 0000000000..7569d28e4d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, it is possible to override cue line with the DOM APIs</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line.html
new file mode 100644
index 0000000000..f133708a8f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, it is possible to override cue line with the DOM APIs</title>
+<link rel="match" href="dom_override_cue_line-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script>
+ var i = 0;
+ function updateCue() {
+ i++;
+ if (i !== 2) {
+ return;
+ }
+ var t = document.getElementById('track');
+ var c = t.track.cues[0];
+ c.line = 0;
+ updateRendering();
+ }
+ function updateRendering() {
+ var v = document.getElementById('video');
+ v.onplaying = function() {
+ this.onplaying = null;
+ this.pause();
+ takeScreenshotDelayed(1000);
+ };
+ v.play();
+ }
+</script>
+<video id="video" width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track id="track" src="support/test.vtt" onload="updateCue();">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text-ref.html
new file mode 100644
index 0000000000..e00d422ff7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, it is possible to override cue text with the DOM APIs</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>f o o</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text.html
new file mode 100644
index 0000000000..d2e29e5d7d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, it is possible to override cue text with the DOM APIs</title>
+<link rel="match" href="dom_override_cue_text-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script>
+ var i = 0;
+ function updateCue() {
+ i++;
+ if (i !== 2) {
+ return;
+ }
+ var t = document.getElementById('track');
+ var c = t.track.cues[0];
+ c.text = 'f o o';
+ updateRendering();
+ }
+ function updateRendering() {
+ var v = document.getElementById('video');
+ v.onplaying = function() {
+ this.onplaying = null;
+ this.pause();
+ takeScreenshotDelayed(1000);
+ };
+ v.play();
+ }
+</script>
+<video id="video" width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track id="track" src="support/test.vtt" onload="updateCue();">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text_while_paused-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text_while_paused-ref.html
new file mode 100644
index 0000000000..ef2edc968f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text_while_paused-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, cue text should be rerendered when overriding them using the DOM APIs while paused</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>f o o</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text_while_paused.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text_while_paused.html
new file mode 100644
index 0000000000..728b8bab19
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text_while_paused.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, cue text should be rerendered when overriding them using the DOM APIs while paused</title>
+<link rel="match" href="dom_override_cue_text_while_paused-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script>
+ var i = 0;
+ function updateCue() {
+ i++;
+ if (i !== 2) {
+ return;
+ }
+ var t = document.getElementById('track');
+ var c = t.track.cues[0];
+ c.text = 'f o o';
+ takeScreenshotDelayed(1000);
+ }
+</script>
+<video id="video" width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track id="track" src="support/test.vtt" onload="updateCue();">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused-ref.html
new file mode 100644
index 0000000000..60f7bb0cd3
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Reference for WebVTT rendering, cue text should be removed when removing them using the DOM APIs while paused</title>
+<script src="/common/reftest-wait.js"></script>
+<style>
+html { overflow: hidden }
+body { margin: 0 }
+</style>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+</video>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused.html
new file mode 100644
index 0000000000..459ceabbf8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, cue text should be removed when removing them using the DOM APIs while paused</title>
+<link rel="match" href="dom_override_remove_cue_while_paused-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow: hidden }
+body { margin: 0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script>
+ var i = 0;
+ function updateCue() {
+ i++;
+ if (i !== 2) {
+ return;
+ }
+ var t = document.getElementById('track');
+ var c = t.track.cues[0];
+ t.track.removeCue(c);
+ takeScreenshotDelayed(1000);
+ }
+</script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track id="track" src="support/test.vtt" onload="updateCue();">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority-ref.html
new file mode 100644
index 0000000000..b479029f70
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Reference for Embedded Style: Cascade Priority</title>
+<style>
+::cue {
+ color: green;
+}
+::cue {
+ background: green;
+}
+::cue {
+ opacity: 0.5;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/embedded_style_without_style.vtt" default>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority.html
new file mode 100644
index 0000000000..db6822e397
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Embedded Style: Cascade Priority</title>
+<link rel="match" href="embedded_style_cascade_priority-ref.html">
+<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes">
+<script src="/common/reftest-wait.js"></script>
+<style>
+/* Embedded style should take precedence over author style, so the cue color should be green. */
+::cue {
+ color: red;
+}
+</style>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/embedded_style_cascade_priority.vtt" default>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority_layer.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority_layer.html
new file mode 100644
index 0000000000..8d4598fe30
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority_layer.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Embedded Style: Cascade Priority</title>
+<link rel="match" href="embedded_style_cascade_priority-ref.html">
+<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes">
+<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#cascade-sort">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<script src="/common/reftest-wait.js"></script>
+<style>
+/* Embedded important style should take precedence over author important style
+ regardless of layers, so the cue color should be green. */
+@layer {
+ ::cue {
+ color: red !important;
+ }
+}
+</style>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/embedded_style_cascade_priority_layer.vtt" default>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked-ref.html
new file mode 100644
index 0000000000..1cb9d24c98
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Reference for Embedded Style: Imports Blocked</title>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/embedded_style_without_style.vtt" default>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked.html
new file mode 100644
index 0000000000..1ffdf078d1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Embedded Style: Imports Blocked</title>
+<link rel="match" href="embedded_style_imports_blocked-ref.html">
+<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes">
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/embedded_style_imports_blocked.vtt" default>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format-ref.html
new file mode 100644
index 0000000000..698ac7bc19
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Reference for Embedded Style: Invalid Format</title>
+<style>
+::cue {
+ color: green;
+}
+::cue(v[voice=Voice1])
+{
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==)
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/embedded_style_without_style.vtt" default>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format.html
new file mode 100644
index 0000000000..746816f272
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Embedded Style: Invalid Format</title>
+<link rel="match" href="embedded_style_invalid_format-ref.html">
+<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes">
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/embedded_style_invalid_format.vtt" default>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries-ref.html
new file mode 100644
index 0000000000..d132b132b4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Embedded Style: Media Queries</title>
+<script src="/common/reftest-wait.js"></script>
+<style>iframe {width:100%; height:500px}</style>
+<script>
+ onload = function() {
+ let iframeWindow = document.querySelector('iframe').contentWindow;
+ iframeWindow.requestAnimationFrame(() => {
+ iframeWindow.requestAnimationFrame(() => {
+ setTimeout(function() {
+ takeScreenshot();
+ }, 100);
+ });
+ });
+ };
+</script>
+<iframe src="support/embedded_style_media_queries-iframe-ref.html"></iframe>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries.html
new file mode 100644
index 0000000000..010314dd15
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Embedded Style: Media Queries</title>
+<link rel="match" href="embedded_style_media_queries-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>iframe {width:100%; height:500px}</style>
+<script>
+ onload = function() {
+ let iframeWindow = document.querySelector('iframe').contentWindow;
+ iframeWindow.requestAnimationFrame(() => {
+ iframeWindow.requestAnimationFrame(() => {
+ setTimeout(function() {
+ takeScreenshot();
+ }, 100);
+ });
+ });
+ };
+</script>
+<iframe src="support/embedded_style_media_queries-iframe.html"></iframe>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized-ref.html
new file mode 100644
index 0000000000..46c8ad4741
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Embedded Style: Media Queries Resize Frame</title>
+<script src="/common/reftest-wait.js"></script>
+<style>iframe {width:100%; height:300px}</style>
+<script>
+ onload = function() {
+ let iframeWindow = document.querySelector('iframe').contentWindow;
+ iframeWindow.requestAnimationFrame(() => {
+ iframeWindow.requestAnimationFrame(() => {
+ setTimeout(function() {
+ takeScreenshot();
+ }, 100);
+ });
+ });
+ };
+</script>
+<iframe src="support/embedded_style_media_queries_resized-iframe-ref.html"></iframe>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized.html
new file mode 100644
index 0000000000..703d7367ae
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Embedded Style: Media Queries Resize Frame</title>
+<link rel="match" href="embedded_style_media_queries_resized-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>iframe {width:100%; height:500px}</style>
+<script>
+ onload = function() {
+ document.getElementById("form-iframe").style.height = "300px";
+ let iframeWindow = document.querySelector('iframe').contentWindow;
+ iframeWindow.requestAnimationFrame(() => {
+ iframeWindow.requestAnimationFrame(() => {
+ setTimeout(function() {
+ takeScreenshot();
+ }, 100);
+ });
+ });
+ };
+</script>
+<iframe id="form-iframe" src="support/embedded_style_media_queries_resized-iframe.html"></iframe>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks-ref.html
new file mode 100644
index 0000000000..4b956da448
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Reference for Embedded Style: Multiple Tracks, style only applies to the track it was sourced for</title>
+<style>
+::cue(v[voice=Voice1]) {
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/embedded_style_without_style.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ document.getElementsByTagName('track')[1].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks.html
new file mode 100644
index 0000000000..3c8202761f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Embedded Style: Multiple Tracks, style only applies to the track it was sourced for</title>
+<link rel="match" href="embedded_style_multiple_tracks-ref.html">
+<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes">
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/embedded_style_multiple_tracks1.vtt">
+ <track src="support/embedded_style_multiple_tracks2.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ document.getElementsByTagName('track')[1].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors-ref.html
new file mode 100644
index 0000000000..754eed88b7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Reference for Embedded Style: Selectors</title>
+<style>
+::cue {
+ font-size: 11px;
+ background: lime;
+}
+::cue(b) {
+ background: green;
+ color: green;
+}
+::cue(i) {
+ background: green;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/embedded_style_without_style.vtt" default>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors.html
new file mode 100644
index 0000000000..55db5c7302
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Embedded Style: Selectors</title>
+<link rel="match" href="embedded_style_selectors-ref.html">
+<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes">
+<script src="/common/reftest-wait.js"></script>
+
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/embedded_style_selectors.vtt" default>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls-ref.html
new file mode 100644
index 0000000000..6eca04506e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Reference for Embedded Style: URLs, only allow data URLs</title>
+<style>
+::cue(v[voice=Voice1])
+{
+ background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
+}
+::cue(b)
+{
+ background: url("support/invalid.png")
+}
+::cue(i)
+{
+ background: url("support/invalid.png")
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/embedded_style_without_style.vtt" default>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls.html
new file mode 100644
index 0000000000..2faff059d2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Embedded Style: URLs, only allow data URLs</title>
+<link rel="match" href="embedded_style_urls-ref.html">
+<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes">
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/embedded_style_urls.vtt" default>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition-ref.html
new file mode 100644
index 0000000000..f150531bbd
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, cue reposition after enabling controls</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.video {
+ display: inline-block;
+ outline: solid;
+ width: 320px;
+ height: 240px;
+ position: relative
+}
+video {
+ position: absolute;
+ width:320px;
+ height:240px;
+}
+.cue {
+ position: absolute;
+ bottom: 50px;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+ font-size: 50px;
+}
+</style>
+<video controls>
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+</video>
+<div class="video"><span class="cue"><span>Foo</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition.html
new file mode 100644
index 0000000000..7bfb8d9ff5
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>WebVTT rendering, cue reposition after enabling controls</title>
+<link rel="match" href="enable_controls_reposition-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+video {
+ outline: solid;
+ width: 320px;
+ height: 240px;
+}
+::cue {
+ font-family: Ahem, sans-serif;
+ font-size: 50px;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video autoplay onplaying="this.onplaying = null;
+ this.pause();
+ this.currentTime = 0;
+ setTimeout(function(video){
+ video.controls = true;
+ }, 100, this);
+ takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src=support/foo.vtt>
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely-ref.html
new file mode 100644
index 0000000000..5eb5d73256
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely-ref.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, repositioning of 9 cues that overlap completely</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.video {
+ display: inline-block;
+ width: 180px;
+ height: 180px;
+ outline: solid;
+ position: relative;
+ font-size: 9px
+}
+#cue1 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: -4.5px;
+ margin-left: -4.5px;
+ color: #000
+}
+#cue2 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: -13.5px;
+ margin-left: -4.5px;
+ color: #222
+}
+#cue3 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: -4.5px;
+ margin-left: -13.5px;
+ color: #444
+}
+#cue4 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: -4.5px;
+ margin-left: 4.5px;
+ color: #666
+}
+#cue5 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: 4.5px;
+ margin-left: -4.5px;
+ color: #888
+}
+#cue6 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: -13.5px;
+ margin-left: -13.5px;
+ color: #aaa
+}
+#cue7 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: -13.5px;
+ margin-left: 4.5px;
+ color: #ccc
+}
+#cue8 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: 4.5px;
+ margin-left: -13.5px;
+ color: #eee
+}
+#cue9 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: 4.5px;
+ margin-left: 4.5px;
+ color: green
+}
+.cue {
+ width: 9px;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+}
+</style>
+<div class="video">
+ <span class="cue" id="cue1"><span>1</span></span>
+ <span class="cue" id="cue2"><span>2</span></span>
+ <span class="cue" id="cue3"><span>3</span></span>
+ <span class="cue" id="cue4"><span>4</span></span>
+ <span class="cue" id="cue5"><span>5</span></span>
+ <span class="cue" id="cue6"><span>6</span></span>
+ <span class="cue" id="cue7"><span>7</span></span>
+ <span class="cue" id="cue8"><span>8</span></span>
+ <span class="cue" id="cue9"><span>9</span></span>
+</div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely.html
new file mode 100644
index 0000000000..606ded5095
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, repositioning of 9 cues that overlap completely</title>
+<meta name="timeout" content="long">
+<link rel="match" href="9_cues_overlapping_completely-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+}
+::cue(#cue1) {
+ color: #000
+}
+::cue(#cue2) {
+ color: #222
+}
+::cue(#cue3) {
+ color: #444
+}
+::cue(#cue4) {
+ color: #666
+}
+::cue(#cue5) {
+ color: #888
+}
+::cue(#cue6) {
+ color: #aaa
+}
+::cue(#cue7) {
+ color: #ccc
+}
+::cue(#cue8) {
+ color: #eee
+}
+::cue(#cue9) {
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="180" height="180" autoplay ontimeupdate="if (this.currentTime >= 1) { this.ontimeupdate = null; this.pause(); takeScreenshot(); }">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/9_cues_overlapping_completely.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely_all_cues_have_same_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely_all_cues_have_same_timestamp-ref.html
new file mode 100644
index 0000000000..22095bf685
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely_all_cues_have_same_timestamp-ref.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, repositioning of 9 cues that overlap completely and all cues have the same timestamp</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.video {
+ display: inline-block;
+ width: 180px;
+ height: 180px;
+ outline: solid;
+ position: relative;
+ font-size: 9px;
+}
+#cue1 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: -4.5px;
+ margin-left: -4.5px;
+ color: #000
+}
+#cue2 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: -13.5px;
+ margin-left: -4.5px;
+ color: #222
+}
+#cue3 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: -4.5px;
+ margin-left: -13.5px;
+ color: #444
+}
+#cue4 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: -4.5px;
+ margin-left: 4.5px;
+ color: #666
+}
+#cue5 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: 4.5px;
+ margin-left: -4.5px;
+ color: #888
+}
+#cue6 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: -13.5px;
+ margin-left: -13.5px;
+ color: #aaa
+}
+#cue7 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: -13.5px;
+ margin-left: 4.5px;
+ color: #ccc
+}
+#cue8 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: 4.5px;
+ margin-left: -13.5px;
+ color: #eee
+}
+#cue9 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: 0;
+ margin-top: 4.5px;
+ margin-left: 4.5px;
+ color: green
+}
+.cue {
+ width: 9px;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+}
+</style>
+<div class="video">
+ <span class="cue" id="cue1"><span>1</span></span>
+ <span class="cue" id="cue2"><span>2</span></span>
+ <span class="cue" id="cue3"><span>3</span></span>
+ <span class="cue" id="cue4"><span>4</span></span>
+ <span class="cue" id="cue5"><span>5</span></span>
+ <span class="cue" id="cue6"><span>6</span></span>
+ <span class="cue" id="cue7"><span>7</span></span>
+ <span class="cue" id="cue8"><span>8</span></span>
+ <span class="cue" id="cue9"><span>9</span></span>
+</div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely_all_cues_have_same_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely_all_cues_have_same_timestamp.html
new file mode 100644
index 0000000000..00d4eccfd9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely_all_cues_have_same_timestamp.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, repositioning of 9 cues that overlap completely and all cues have the same timestamp</title>
+<link rel="match" href="9_cues_overlapping_completely_all_cues_have_same_timestamp-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+}
+::cue(#cue1) {
+ color: #000
+}
+::cue(#cue2) {
+ color: #222
+}
+::cue(#cue3) {
+ color: #444
+}
+::cue(#cue4) {
+ color: #666
+}
+::cue(#cue5) {
+ color: #888
+}
+::cue(#cue6) {
+ color: #aaa
+}
+::cue(#cue7) {
+ color: #ccc
+}
+::cue(#cue8) {
+ color: #eee
+}
+::cue(#cue9) {
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="180" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 1; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/9_cues_overlapping_completely_all_cues_have_same_timestamp.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles-ref.html
new file mode 100644
index 0000000000..b4b242795b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, when media cannot be played (404 error), subtitles are not displayed</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+</style>
+<div class="video"></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles.html
new file mode 100644
index 0000000000..7e29894cae
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- no reftest-wait -->
+<title>WebVTT rendering, when media cannot be played (404 error), subtitles are not displayed</title>
+<link rel="match" href="media_404_omit_subtitles-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<!--
+The subtitles are not expected to render because the "show poster flag"
+is set, so when the track loads it will *not* run "time marches on".
+-->
+<video width="320" height="180" autoplay>
+ <source src="/common/text-plain.txt?pipe=status(404)">
+ <track src="support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19-ref.html
new file mode 100644
index 0000000000..2b7a1ed2bf
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, when media height is 19 or less, font size should be smaller than when it is 20 and above</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 19px;
+ outline: solid;
+ position: relative;
+ font-size: 0.95px
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class=video><span class=cue><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19.html
new file mode 100644
index 0000000000..fb7662b66c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, when media height is 19 or less, font size should be smaller than when it is 20 and above</title>
+<link rel="match" href="media_height_19-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family:Ahem, sans-serif;
+ color:green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="19" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/non-standard-pseudo-elements-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/non-standard-pseudo-elements-ref.html
new file mode 100644
index 0000000000..5664a4de7b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/non-standard-pseudo-elements-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<style>
+video { width:560px; height:320px; }
+</style>
+<video>
+<source src="/media/white.webm" type="video/webm">
+<source src="/media/white.mp4" type="video/mp4">
+<track label="English subtitles" kind="subtitles" srclang="en" src="support/test.vtt" default>
+</video>
+<script>
+const v = document.querySelector('video');
+v.onseeked = () => { document.documentElement.classList.remove('reftest-wait'); };
+v.currentTime = 3;
+</script>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/non-standard-pseudo-elements.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/non-standard-pseudo-elements.html
new file mode 100644
index 0000000000..20cf81ace2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/non-standard-pseudo-elements.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<title>position:fixed on non-standard ::-webkit-media-text-track-display should not affect</title>
+<link rel="match" href="non-standard-pseudo-elements-ref.html">
+<style>
+video { width:560px; height:320px; }
+video::-webkit-media-text-track-display {
+ position: fixed !important;
+}
+</style>
+<video>
+<source src="/media/white.webm" type="video/webm">
+<source src="/media/white.mp4" type="video/mp4">
+<track label="English subtitles" kind="subtitles" srclang="en" src="support/test.vtt" default>
+</video>
+<script>
+const v = document.querySelector('video');
+v.onseeked = () => { document.documentElement.classList.remove('reftest-wait'); };
+v.currentTime = 3;
+</script>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/single_quote-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/single_quote-ref.html
new file mode 100644
index 0000000000..81c546e026
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/single_quote-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, single quote should not be levitated</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>'</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/single_quote.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/single_quote.html
new file mode 100644
index 0000000000..b012063501
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/single_quote.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, single quote should not be levitated</title>
+<link rel="match" href="single_quote-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/single_quote.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90-ref.html
new file mode 100644
index 0000000000..de39a8b7ad
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, size:90% == size:100% when text does not need to wrap</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class=video><span class=cue><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90.html
new file mode 100644
index 0000000000..b535168c5d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, size:99% == size:100% when text does not need to wrap</title>
+<link rel="match" href="size_90-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/size_90.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99-ref.html
new file mode 100644
index 0000000000..7a6755a08d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, size:99% == size:100% when text does not need to wrap</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class=video><span class=cue><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99.html
new file mode 100644
index 0000000000..60e65bbfa4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, size:99% == size:100% when text does not need to wrap</title>
+<link rel="match" href="size_99-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/size_99.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/9_cues_overlapping_completely.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/9_cues_overlapping_completely.vtt
new file mode 100644
index 0000000000..3f4250d8b1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/9_cues_overlapping_completely.vtt
@@ -0,0 +1,37 @@
+WEBVTT
+
+cue1
+00:00:00.001 --> 00:00:05.000 position:50% size:5% line:50%
+1
+
+cue2
+00:00:00.002 --> 00:00:05.000 position:50% size:5% line:50%
+2
+
+cue3
+00:00:00.003 --> 00:00:05.000 position:50% size:5% line:50%
+3
+
+cue4
+00:00:00.004 --> 00:00:05.000 position:50% size:5% line:50%
+4
+
+cue5
+00:00:00.005 --> 00:00:05.000 position:50% size:5% line:50%
+5
+
+cue6
+00:00:00.006 --> 00:00:05.000 position:50% size:5% line:50%
+6
+
+cue7
+00:00:00.007 --> 00:00:05.000 position:50% size:5% line:50%
+7
+
+cue8
+00:00:00.008 --> 00:00:05.000 position:50% size:5% line:50%
+8
+
+cue9
+00:00:00.009 --> 00:00:05.000 position:50% size:5% line:50%
+9
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/9_cues_overlapping_completely_all_cues_have_same_timestamp.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/9_cues_overlapping_completely_all_cues_have_same_timestamp.vtt
new file mode 100644
index 0000000000..d5019e0ed2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/9_cues_overlapping_completely_all_cues_have_same_timestamp.vtt
@@ -0,0 +1,37 @@
+WEBVTT
+
+cue1
+00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50%
+1
+
+cue2
+00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50%
+2
+
+cue3
+00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50%
+3
+
+cue4
+00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50%
+4
+
+cue5
+00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50%
+5
+
+cue6
+00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50%
+6
+
+cue7
+00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50%
+7
+
+cue8
+00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50%
+8
+
+cue9
+00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50%
+9
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/single_quote.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/single_quote.vtt
new file mode 100644
index 0000000000..5e7eefd262
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/single_quote.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+'
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/size_90.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/size_90.vtt
new file mode 100644
index 0000000000..2ab4fa179f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/size_90.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 size:90%
+This is a test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/size_99.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/size_99.vtt
new file mode 100644
index 0000000000..cd14574f09
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/size_99.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 size:99%
+This is a test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/test.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/test.vtt
new file mode 100644
index 0000000000..ab71ec5984
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/test.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+This is a test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_-2_wrapped_cue_grow_upwards-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_-2_wrapped_cue_grow_upwards-ref.html
new file mode 100644
index 0000000000..b3819320bf
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_-2_wrapped_cue_grow_upwards-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, line:-2, size:50%, wrapped cue should grow upwards</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 9px;
+ left: 80px;
+ right: 0;
+ width: 160px;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that will line break</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_-2_wrapped_cue_grow_upwards.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_-2_wrapped_cue_grow_upwards.html
new file mode 100644
index 0000000000..85d7d6f81e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_-2_wrapped_cue_grow_upwards.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, line:-2, size:50%, wrapped cue should grow upwards</title>
+<link rel="match" href="line_-2_wrapped_cue_grow_upwards-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/line_-2_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top-ref.html
new file mode 100644
index 0000000000..85f2a95fa8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, line:0 should be top line</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top.html
new file mode 100644
index 0000000000..c780a223e7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, line:0 should be top line</title>
+<link rel="match" href="line_0_is_top-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/line_0.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_1_wrapped_cue_grow_downwards-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_1_wrapped_cue_grow_downwards-ref.html
new file mode 100644
index 0000000000..44f2c31785
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_1_wrapped_cue_grow_downwards-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, line:1, size:50%, wrapped cue should grow downwards</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ top: 9px;
+ left: 80px;
+ right: 0;
+ width: 160px;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that will line break</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_1_wrapped_cue_grow_downwards.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_1_wrapped_cue_grow_downwards.html
new file mode 100644
index 0000000000..0b1c25e6b1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_1_wrapped_cue_grow_downwards.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, line:1, size:50%, wrapped cue should grow downwards</title>
+<link rel="match" href="line_1_wrapped_cue_grow_downwards-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/line_1_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent-ref.html
new file mode 100644
index 0000000000..098679f7be
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, line:50% should be vertically centered</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ right: 0;
+ margin-top: -4.5px;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent.html
new file mode 100644
index 0000000000..b433708ae3
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, line:50% should be vertically centered</title>
+<link rel="match" href="line_50_percent-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/line_50_percent.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap-ref.html
new file mode 100644
index 0000000000..cb39fde53e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, line integer and percent mixed with overlap</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+#cue1 {
+ position: absolute;
+ top: 81px;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+#cue2 {
+ position: absolute;
+ top: 90px;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span id="cue1" class="cue"><span>This is a test subtitle</span></span><span id="cue2" class="cue"><span>This is another test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap.html
new file mode 100644
index 0000000000..3106f2013d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, line integer and percent mixed with overlap</title>
+<link rel="match" href="line_integer_and_percent_mixed_overlap-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/line_integer_and_percent_overlap.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap_move_up-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap_move_up-ref.html
new file mode 100644
index 0000000000..13247ea8bb
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap_move_up-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, line integer and percent mixed with overlap move up</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+#cue1 {
+ position: absolute;
+ top: 90px;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+#cue2 {
+ position: absolute;
+ top: 81px;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span id="cue1" class="cue"><span>This is a test subtitle</span></span><span id="cue2" class="cue"><span>This is another test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap_move_up.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap_move_up.html
new file mode 100644
index 0000000000..1f9792f6e0
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap_move_up.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, line integer and percent mixed with overlap move up</title>
+<link rel="match" href="line_integer_and_percent_mixed_overlap_move_up-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/line_integer_and_percent_overlap_move_up.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap-ref.html
new file mode 100644
index 0000000000..6f96ab986e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, line percent and integer mixed with overlap</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+#cue1 {
+ position: absolute;
+ top: 76.95px;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+#cue2 {
+ position: absolute;
+ top: 90px;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span id="cue1" class="cue"><span>This is a test subtitle</span></span><span id="cue2" class="cue"><span>This is another test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap.html
new file mode 100644
index 0000000000..059a7ccd60
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, line percent and integer mixed with overlap</title>
+<link rel="match" href="line_percent_and_integer_mixed_overlap-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/line_percent_and_integer_overlap.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap_move_up-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap_move_up-ref.html
new file mode 100644
index 0000000000..8f14e15e92
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap_move_up-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, line percent and integer mixed with overlap move up</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+#cue1 {
+ position: absolute;
+ top: 94.05px;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+#cue2 {
+ position: absolute;
+ top: 81px;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span id="cue1" class="cue"><span>This is a test subtitle</span></span><span id="cue2" class="cue"><span>This is another test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap_move_up.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap_move_up.html
new file mode 100644
index 0000000000..08016057f4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap_move_up.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, line percent and integer mixed with overlap move up</title>
+<link rel="match" href="line_percent_and_integer_mixed_overlap_move_up-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/line_percent_and_integer_overlap_move_up.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media/background.gif b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media/background.gif
new file mode 100644
index 0000000000..b3185c409c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media/background.gif
Binary files differ
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_height400_with_controls-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_height400_with_controls-ref.html
new file mode 100644
index 0000000000..ed5b3f8826
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_height400_with_controls-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Reference for WebVTT rendering, the subtitles is not covered by or covering the controls</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.video {
+ display: inline-block;
+ position: absolute;
+ width: 320px;
+ height: 400px;
+ outline: solid;
+ font-size: 20px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+ padding-bottom: 40px;
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
+<video width="320" height="400" autoplay controls onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track>
+</video>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_height400_with_controls.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_height400_with_controls.html
new file mode 100644
index 0000000000..349a121d9b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_height400_with_controls.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, the subtitles is not covered by or covering the controls</title>
+<link rel="match" href="media_height400_with_controls-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="400" autoplay controls onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_with_controls-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_with_controls-ref.html
new file mode 100644
index 0000000000..58b32dd659
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_with_controls-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Reference for WebVTT rendering, the subtitles are moved up to correct position when controls are visible</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.video {
+ display: inline-block;
+ position: absolute;
+ width: 320px;
+ height: 180px;
+ outline: solid;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+ padding-bottom: 9px;
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
+<video width="320" height="180" autoplay controls onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track>
+</video>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_with_controls.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_with_controls.html
new file mode 100644
index 0000000000..dda72d16a6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_with_controls.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, the subtitles are moved up to correct position when controls are visible</title>
+<link rel="match" href="media_with_controls-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay controls onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-1.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-1.html
new file mode 100644
index 0000000000..87f3834e3d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-1.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<title>WebVTT rendering, cue position after navigation</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+video {
+ outline: solid;
+ width: 320px;
+ height: 240px;
+}
+::cue {
+ font-family: Ahem, sans-serif;
+ font-size: 50px;
+ color: green;
+}
+</style>
+<video autoplay onplaying="this.onplaying = null;
+ this.pause();
+ this.currentTime = 0;
+ ">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src=support/foo.vtt>
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-ref-1.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-ref-1.html
new file mode 100644
index 0000000000..5ee98043ec
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-ref-1.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, cue position after navigation</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.video {
+ display: inline-block;
+ outline: solid;
+ width: 320px;
+ height: 240px;
+ position: relative;
+ font-size: 50px;
+}
+video {
+ position: absolute;
+ width:320px;
+ height:240px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<video>
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+</video>
+<div class="video"><span class="cue"><span>Foo</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-ref.html
new file mode 100644
index 0000000000..b973a71c0d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, cue position after navigation</title>
+<style>iframe {width:100%; height:500px}</style>
+<iframe src="navigate_cue_position-ref-1.html"></iframe>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position.html
new file mode 100644
index 0000000000..e176ef0099
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>WebVTT rendering, cue position after navigation</title>
+<link rel="match" href="navigate_cue_position-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/utils.js"></script>
+<style>iframe {width:100%; height:500px}</style>
+<script>
+var uuid = token();
+onload = function() {
+ var frame = document.getElementsByTagName("iframe")[0].contentWindow;
+ if (sessionStorage[uuid]) {
+ document.body.appendChild(document.createTextNode('FAIL (page reloaded after navigation)'));
+ delete sessionStorage[uuid]
+ takeScreenshotDelayed(100);
+ } else {
+ setTimeout(function() {
+ frame.location.assign('data:text/html,<body onload="setTimeout(function(){history.back()}, 100); sessionStorage[\'' + uuid + '\'] = \'true\';">x');
+ setTimeout(function() {
+ delete sessionStorage[uuid];
+ takeScreenshot();
+ }, 500);
+ }, 100);
+ }
+}
+</script>
+<iframe src="navigate_cue_position-1.html"></iframe>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/one_line_cue_plus_wrapped_cue-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/one_line_cue_plus_wrapped_cue-ref.html
new file mode 100644
index 0000000000..47bb32d8c7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/one_line_cue_plus_wrapped_cue-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, one line cue and cue that wraps - both should be fully visible</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 15%;
+ right: 0;
+ width: 70%;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This test subtitle wraps and should be visible<br>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/one_line_cue_plus_wrapped_cue.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/one_line_cue_plus_wrapped_cue.html
new file mode 100644
index 0000000000..4f95ebfa7c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/one_line_cue_plus_wrapped_cue.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, one line cue and cue that wraps - both should be fully visible</title>
+<link rel="match" href="one_line_cue_plus_wrapped_cue-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/one_line_cue_plus_wrapped_cue.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/basic-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/basic-ref.html
new file mode 100644
index 0000000000..e73018cb9e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/basic-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering regions, default</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/basic.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/basic.html
new file mode 100644
index 0000000000..54a3f8bbf8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/basic.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering regions, default</title>
+<link rel="match" href="basic-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/basic.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_x_50_percent-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_x_50_percent-ref.html
new file mode 100644
index 0000000000..8e87920daa
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_x_50_percent-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering regions, regionanchor x 50%</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: -50%;
+ right: 50%;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_x_50_percent.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_x_50_percent.html
new file mode 100644
index 0000000000..41fa9b3774
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_x_50_percent.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering regions, regionanchor x 50%</title>
+<link rel="match" href="regionanchor_x_50_percent-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/regionanchor_x_50_percent.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_y_50_percent-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_y_50_percent-ref.html
new file mode 100644
index 0000000000..db1031093c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_y_50_percent-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering regions, regionanchor y 50%</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+</style> \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_y_50_percent.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_y_50_percent.html
new file mode 100644
index 0000000000..c1c08a7ea8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_y_50_percent.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering regions, regionanchor y 50%</title>
+<link rel="match" href="regionanchor_y_50_percent-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/regionanchor_y_50_percent.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/scroll_up-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/scroll_up-ref.html
new file mode 100644
index 0000000000..378df3d2ab
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/scroll_up-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering regions, scroll up</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a second test subtitle<br/>This is a third test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/scroll_up.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/scroll_up.html
new file mode 100644
index 0000000000..16af1bc516
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/scroll_up.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering regions, scroll up</title>
+<link rel="match" href="scroll_up-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshotDelayed(3000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/scroll_up.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/single_line_top_left-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/single_line_top_left-ref.html
new file mode 100644
index 0000000000..8dea283bc9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/single_line_top_left-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering regions, single line top left</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ text-align: left
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/single_line_top_left.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/single_line_top_left.html
new file mode 100644
index 0000000000..873416cd0e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/single_line_top_left.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering regions, single line top left</title>
+<link rel="match" href="single_line_top_left-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/single_line_top_left.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/basic.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/basic.vtt
new file mode 100644
index 0000000000..ed97827479
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/basic.vtt
@@ -0,0 +1,7 @@
+WEBVTT
+
+REGION
+id:1
+
+00:00:00.000 --> 00:00:05.000 region:1
+This is a test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/regionanchor_x_50_percent.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/regionanchor_x_50_percent.vtt
new file mode 100644
index 0000000000..eafea7fff9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/regionanchor_x_50_percent.vtt
@@ -0,0 +1,8 @@
+WEBVTT
+
+REGION
+id:1
+regionanchor:50%,100%
+
+00:00:00.000 --> 00:00:05.000 region:1
+This is a test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/regionanchor_y_50_percent.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/regionanchor_y_50_percent.vtt
new file mode 100644
index 0000000000..d51ad26769
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/regionanchor_y_50_percent.vtt
@@ -0,0 +1,8 @@
+WEBVTT
+
+REGION
+id:1
+regionanchor:0%,50%
+
+00:00:00.000 --> 00:00:05.000 region:1
+This is a test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/scroll_up.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/scroll_up.vtt
new file mode 100644
index 0000000000..f70a79a654
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/scroll_up.vtt
@@ -0,0 +1,15 @@
+WEBVTT
+
+REGION
+id:1
+lines:2
+scroll:up
+
+00:00:00.000 --> 00:00:05.000 region:1
+This is a first test subtitle
+
+00:00:01.000 --> 00:00:05.000 region:1
+This is a second test subtitle
+
+00:00:01.000 --> 00:00:05.000 region:1
+This is a third test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/single_line_top_left.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/single_line_top_left.vtt
new file mode 100644
index 0000000000..efe9d8793e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/single_line_top_left.vtt
@@ -0,0 +1,10 @@
+WEBVTT
+
+REGION
+id:1
+viewportanchor:0%,0%
+regionanchor:0%,0%
+lines:1
+
+00:00:00.000 --> 00:00:05.000 region:1 align:left
+This is a test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/viewportanchor_x_50_percent.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/viewportanchor_x_50_percent.vtt
new file mode 100644
index 0000000000..afd9876c06
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/viewportanchor_x_50_percent.vtt
@@ -0,0 +1,8 @@
+WEBVTT
+
+REGION
+id:1
+viewportanchor:50%,100%
+
+00:00:00.000 --> 00:00:05.000 region:1
+This is a test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/viewportanchor_y_50_percent.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/viewportanchor_y_50_percent.vtt
new file mode 100644
index 0000000000..62e8a79687
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/viewportanchor_y_50_percent.vtt
@@ -0,0 +1,8 @@
+WEBVTT
+
+REGION
+id:1
+viewportanchor:0%,50%
+
+00:00:00.000 --> 00:00:05.000 region:1
+This is a test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/width_50_percent.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/width_50_percent.vtt
new file mode 100644
index 0000000000..9fce99b03b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/width_50_percent.vtt
@@ -0,0 +1,8 @@
+WEBVTT
+
+REGION
+id:1
+width:50%
+
+00:00:00.000 --> 00:00:05.000 region:1
+This is a test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_x_50_percent-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_x_50_percent-ref.html
new file mode 100644
index 0000000000..79f8e089ca
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_x_50_percent-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering regions, viewportanchor x 50%</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+ overflow: hidden;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ right: -50%;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_x_50_percent.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_x_50_percent.html
new file mode 100644
index 0000000000..01f37fbf0d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_x_50_percent.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering regions, viewportanchor x 50%</title>
+<link rel="match" href="viewportanchor_x_50_percent-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/viewportanchor_x_50_percent.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_y_50_percent-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_y_50_percent-ref.html
new file mode 100644
index 0000000000..238b4af799
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_y_50_percent-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering regions, viewportanchor y 50%</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 50%;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_y_50_percent.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_y_50_percent.html
new file mode 100644
index 0000000000..504f4a99d0
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_y_50_percent.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering regions, viewportanchor y 50%</title>
+<link rel="match" href="viewportanchor_y_50_percent-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/viewportanchor_y_50_percent.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/width_50_percent-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/width_50_percent-ref.html
new file mode 100644
index 0000000000..d27d698f79
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/width_50_percent-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering regions, width 50%</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 50%;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/width_50_percent.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/width_50_percent.html
new file mode 100644
index 0000000000..ba550344f1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/width_50_percent.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering regions, width 50%</title>
+<link rel="match" href="width_50_percent-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/width_50_percent.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/repaint-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/repaint-ref.html
new file mode 100644
index 0000000000..49f385b079
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/repaint-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, cue should repaint after hiding a covering abspos box</title>
+<style>
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 240px;
+ position: relative;
+ font-size: 50px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<p>You should see the word 'PASS' below.</p>
+<div class="video"><span class="cue"><span>PASS</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/repaint.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/repaint.html
new file mode 100644
index 0000000000..669880b976
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/repaint.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>WebVTT rendering, cue should repaint after hiding a covering abspos box</title>
+<link rel="match" href="repaint-ref.html">
+<style>
+#wrapper {
+ position: relative;
+}
+#cover {
+ position: absolute;
+ left: 0px;
+ top: 180px;
+ width: 320px;
+ height: 60px;
+ background-color: gray;
+}
+video {
+ width: 320px;
+ height: 240px;
+}
+::cue {
+ font-size: 50px;
+ color: green;
+}
+</style>
+<p>You should see the word 'PASS' below.</p>
+<script src="/common/reftest-wait.js"></script>
+<div id=wrapper>
+ <video>
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ </video>
+ <div id=cover></div>
+</div>
+<script>
+var v = document.querySelector('video');
+var c = document.getElementById('cover');
+var t = v.addTextTrack('subtitles');
+t.mode = "showing";
+t.addCue(new VTTCue(0, 100, 'PASS'));
+v.onplaying = function() {
+ setTimeout(function() {
+ v.pause();
+ setTimeout(function() {
+ c.style.visibility = 'hidden';
+ setTimeout(takeScreenshot, 100);
+ }, 100);
+ }, 100);
+};
+v.play();
+</script>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/font_properties-ref.html
new file mode 100644
index 0000000000..669342072a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/font_properties-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue-region, font properties</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.region-cue {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+}
+.region-cue > span {
+ font: italic small-caps bold 9px/18px sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="region-cue"><span>This is a test subtitle</span></span><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/font_properties.html
new file mode 100644
index 0000000000..7ba2796aa9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/font_properties.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue-region, font properties</title>
+<link rel="match" href="font_properties-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue-region {
+ font-style: italic;
+ font-variant: small-caps;
+ font-weight: bold;
+ font-size: 9px;
+ line-height: 18px;
+ font-family: sans-serif !important;
+}
+::cue {
+ font-family: Ahem, sans-serif;
+ color: white;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/support/test.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/support/test.vtt
new file mode 100644
index 0000000000..5ead6782ec
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/support/test.vtt
@@ -0,0 +1,13 @@
+WEBVTT
+
+REGION
+id:1
+lines:1
+regionanchor:0%,0%
+viewportanchor:0%,0%
+
+00:00:00.000 --> 00:00:05.000
+This is a test subtitle
+
+00:00:00.000 --> 00:00:05.000 region:1
+This is a test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/font_properties-ref.html
new file mode 100644
index 0000000000..6c027c28a2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/font_properties-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue-region(), font properties</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.region1-cue {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+}
+.region1-cue > span {
+ font: italic small-caps bold 9px/18px sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.region2-cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+}
+.region2-cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="region1-cue"><span>This is a test subtitle</span></span><span class="region2-cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/font_properties.html
new file mode 100644
index 0000000000..dd01d74602
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/font_properties.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue-region(), font properties</title>
+<link rel="match" href="font_properties-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue-region(#\31) {
+ font-style: italic;
+ font-variant: small-caps;
+ font-weight: bold;
+ font-size: 9px;
+ line-height: 18px;
+ font-family: sans-serif !important;
+}
+::cue-region(#\32) {
+ font-family: Ahem, sans-serif;
+ color: white;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/support/test.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/support/test.vtt
new file mode 100644
index 0000000000..7edfaf7262
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/support/test.vtt
@@ -0,0 +1,17 @@
+WEBVTT
+
+REGION
+id:1
+lines:1
+regionanchor:0%,0%
+viewportanchor:0%,0%
+
+REGION
+id:2
+lines:1
+
+00:00:00.000 --> 00:00:05.000 region:1
+This is a test subtitle
+
+00:00:00.000 --> 00:00:05.000 region:2
+This is a test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_properties-ref.html
new file mode 100644
index 0000000000..c38d513a42
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_properties-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, background properties</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ font-size: 9px;
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_properties.html
new file mode 100644
index 0000000000..7c1757dd0f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_properties.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, background properties</title>
+<link rel="match" href="background_properties-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ background-color: #0f0;
+ background-image: url('../../media/background.gif');
+ background-repeat: repeat-x;
+ background-position: top left;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand-ref.html
new file mode 100644
index 0000000000..b6e8692dc9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, background shorthand</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ font-size: 9px;
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand.html
new file mode 100644
index 0000000000..d8c15b1982
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, background shorthand</title>
+<link rel="match" href="background_shorthand-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand_css_relative_url-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand_css_relative_url-ref.html
new file mode 100644
index 0000000000..f630d7caad
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand_css_relative_url-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, background shorthand, background image URL with relative path from CSS file</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ font-size: 9px;
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand_css_relative_url.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand_css_relative_url.html
new file mode 100644
index 0000000000..2397fec005
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand_css_relative_url.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, background shorthand, background image URL with relative path from CSS file</title>
+<link rel="match" href="background_shorthand_css_relative_url-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hex-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hex-ref.html
new file mode 100644
index 0000000000..7e37d8f787
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hex-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, color: #60ff60</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ font-size: 9px;
+ color: #60ff60;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hex.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hex.html
new file mode 100644
index 0000000000..a759e718f8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hex.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, color: #60ff60</title>
+<link rel="match" href="color_hex-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: #60ff60;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hsla-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hsla-ref.html
new file mode 100644
index 0000000000..377a8ebe82
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hsla-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, color: hsla()</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ font-size: 9px;
+ color: hsla(100,100%,50%,0.5);
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hsla.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hsla.html
new file mode 100644
index 0000000000..2287c703ef
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hsla.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, color: hsla()</title>
+<link rel="match" href="color_hsla-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: hsla(100,100%,50%,0.5);
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_rgba-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_rgba-ref.html
new file mode 100644
index 0000000000..461e743da5
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_rgba-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, color: rgba()</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ font-size: 9px;
+ color: rgba(128,255,128,0.5);
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_rgba.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_rgba.html
new file mode 100644
index 0000000000..6848b8d75b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_rgba.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, color: rgba()</title>
+<link rel="match" href="color_rgba-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: rgba(128,255,128,0.5);
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/cue_selector_single_colon-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/cue_selector_single_colon-ref.html
new file mode 100644
index 0000000000..cf00fe891d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/cue_selector_single_colon-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, :cue (single colon) should not be supported</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/cue_selector_single_colon.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/cue_selector_single_colon.html
new file mode 100644
index 0000000000..d27ac3e3c6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/cue_selector_single_colon.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, :cue (single colon) should not be supported</title>
+<link rel="match" href="cue_selector_single_colon-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+:cue {
+ background: red;
+ color: yellow
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties-ref.html
new file mode 100644
index 0000000000..c584cf1f03
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, font properties</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font: italic small-caps bold 9px/18px sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties.html
new file mode 100644
index 0000000000..cafc222e4d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, font properties</title>
+<link rel="match" href="font_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-style: italic;
+ font-variant: small-caps;
+ font-weight: bold;
+ font-size: 9px;
+ line-height: 18px;
+ font-family: sans-serif;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand-ref.html
new file mode 100644
index 0000000000..c078724851
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, font shorthand</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font: italic small-caps bold 9px/18px sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand.html
new file mode 100644
index 0000000000..78e2800fa3
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, font shorthand</title>
+<link rel="match" href="font_shorthand-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font: italic small-caps bold 9px/18px sans-serif;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/inherit_values_from_media_element-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/inherit_values_from_media_element-ref.html
new file mode 100644
index 0000000000..82cebf4606
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/inherit_values_from_media_element-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, css properties with value inherit should inherit from media element</title>
+<style>
+.video {
+ position: absolute;
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ color: #f0f;
+ white-space: pre-wrap;
+ font: italic small-caps bold 9px/18px sans-serif;
+ text-decoration: overline underline line-through;
+ text-shadow: 0px 0px 5px #0f0;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ outline: solid #00f 2px;
+ font-size: 9px;
+}
+.videoWhite {
+ position: absolute;
+ top: 0;
+ left: 40px;
+ width: 240px;
+ height: 180px;;
+ background: #fff;
+ z-index: 1;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 30%;
+ right: 0;
+ width: 40%;
+ text-align: center;
+ outline: inherit;
+ text-shadow: inherit;
+ text-decoration: inherit;
+ outline-bottom: none;
+ z-index: 2
+}
+.cue > span {
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ text-decoration: inherit;
+ white-space: pre-wrap
+}
+</style>
+<div class="video"><div class="videoWhite"></div><span class="cue"><span>A A A A A A A A A A A</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/inherit_values_from_media_element.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/inherit_values_from_media_element.html
new file mode 100644
index 0000000000..0b7bcf1c56
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/inherit_values_from_media_element.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, css properties with value inherit should inherit from media element</title>
+<link rel="match" href="inherit_values_from_media_element-ref.html">
+<style>
+video {
+ color: #f0f;
+ white-space: pre-wrap;
+ font: italic small-caps bold 9px/18px sans-serif;
+ text-decoration: overline underline line-through;
+ text-shadow: 0px 0px 5px #0f0;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ outline: solid #00f 2px;
+}
+::cue {
+ white-space: inherit;
+ font: inherit;
+ color: inherit;
+ text-decoration: inherit;
+ text-shadow: inherit;
+ background: inherit;
+ outline: inherit;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/white-spaces_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_properties-ref.html
new file mode 100644
index 0000000000..c436b0a72f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_properties-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, outline properties</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ outline: solid #00f 2px;
+ background: rgba(0,0,0,0.8);
+ font-size: 9px;
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_properties.html
new file mode 100644
index 0000000000..f4d4eed5f8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_properties.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, outline properties</title>
+<link rel="match" href="outline_properties-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ outline-style: solid;
+ outline-color: #00f;
+ outline-width: 2px;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_shorthand-ref.html
new file mode 100644
index 0000000000..5ec6727ea2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_shorthand-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, outline shorthand</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ outline: solid #00f 2px;
+ background: rgba(0,0,0,0.8);
+ font-size: 9px;
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_shorthand.html
new file mode 100644
index 0000000000..e16c083e11
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_shorthand.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, outline shorthand</title>
+<link rel="match" href="outline_shorthand-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ outline: solid #00f 2px;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_line-through-ref.html
new file mode 100644
index 0000000000..594d5b29b3
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_line-through-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, text-decoration: line-through</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ font-size: 9px;
+ color: white;
+ text-decoration: line-through;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_line-through.html
new file mode 100644
index 0000000000..9a4179b418
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_line-through.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, text-decoration: line-through</title>
+<link rel="match" href="text-decoration_line-through-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: sans-serif;
+ text-decoration: line-through;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline-ref.html
new file mode 100644
index 0000000000..bb18854b8a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, text-decoration: overline</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ font-size: 9px;
+ color: white;
+ text-decoration: overline;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline.html
new file mode 100644
index 0000000000..be7056c138
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, text-decoration: overline</title>
+<link rel="match" href="text-decoration_overline-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: sans-serif;
+ text-decoration: overline;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline_underline_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline_underline_line-through-ref.html
new file mode 100644
index 0000000000..85b2067559
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline_underline_line-through-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, text-decoration: overline underline line-through</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ font-size: 9px;
+ color: white;
+ text-decoration: overline underline line-through;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline_underline_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline_underline_line-through.html
new file mode 100644
index 0000000000..47f1999fc1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline_underline_line-through.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, text-decoration: overline underline line-through</title>
+<link rel="match" href="text-decoration_overline_underline_line-through-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: sans-serif;
+ text-decoration: overline underline line-through;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_underline-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_underline-ref.html
new file mode 100644
index 0000000000..4a5247233a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_underline-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, text-decoration: underline</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ font-size: 9px;
+ color: white;
+ text-decoration: underline;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_underline.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_underline.html
new file mode 100644
index 0000000000..67d920cefa
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_underline.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, text-decoration: underline</title>
+<link rel="match" href="text-decoration_underline-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: sans-serif;
+ text-decoration: underline;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-shadow-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-shadow-ref.html
new file mode 100644
index 0000000000..72e6a15ca3
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-shadow-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, text-shadow</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ font-size: 9px;
+ color: white;
+ text-shadow: 0px 0px 5px #0f0;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-shadow.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-shadow.html
new file mode 100644
index 0000000000..fbd4022a38
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-shadow.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, text-shadow</title>
+<link rel="match" href="text-shadow-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: sans-serif;
+ text-shadow: 0px 0px 5px #0f0;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_ruby-position-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_ruby-position-ref.html
new file mode 100644
index 0000000000..8e33ca41a4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_ruby-position-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bidi ruby</title>
+ <meta charset="UTF-8">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ text-align: center;
+ unicode-bidi: -webkit-plaintext;
+ unicode-bidi: plaintext;
+ direction: ltr;
+ writing-mode: vertical-rl;
+ -webkit-writing-mode: vertical-rl;
+}
+.cue > span {
+ -webkit-ruby-position: after;
+ ruby-position: under;
+ ruby-position: left;
+ font-family: Ahem, sans-serif;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span><ruby></ruby>に<ruby> 見<rt>み</rt></ruby>えるのは...</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_ruby-position.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_ruby-position.html
new file mode 100644
index 0000000000..2a59440893
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_ruby-position.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, vertical cue with ruby position left</title>
+<link rel="match" href="vertical_ruby-position-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ ruby-position: left;
+ font-family: Ahem, sans-serif;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/bidi_vertical_rl-oneline.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_text-combine-upright-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_text-combine-upright-ref.html
new file mode 100644
index 0000000000..9283f049c2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_text-combine-upright-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bidi ruby</title>
+ <meta charset="UTF-8">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ text-align: center;
+ unicode-bidi: -webkit-plaintext;
+ unicode-bidi: plaintext;
+ direction: ltr;
+ writing-mode: vertical-lr;
+ -webkit-writing-mode: vertical-lr;
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ color: green;
+}
+.combine {
+ -webkit-text-combine: horizontal;
+ text-combine-upright: all;
+}
+</style>
+<div class="video"><span class="cue"><span>平成<span class="combine">20</span>年4月<span class="combine">16</span>日に</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_text-combine-upright.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_text-combine-upright.html
new file mode 100644
index 0000000000..56899c5a10
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_text-combine-upright.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, vertical cue with text-combine-upright digits</title>
+<link rel="match" href="vertical_text-combine-upright-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ text-combine-upright: digits;
+ font-family: Ahem, sans-serif;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/bidi_text-combine-upright.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_normal_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_normal_wrapped-ref.html
new file mode 100644
index 0000000000..6c28a4f792
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_normal_wrapped-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, white-space: normal (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 40%;
+ right: 0;
+ width: 20%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: normal
+}
+</style>
+<div class="video"><span class="cue"><span>foo bar baz</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_normal_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_normal_wrapped.html
new file mode 100644
index 0000000000..3241820a6b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_normal_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, white-space: normal (cue that wraps)</title>
+<link rel="match" href="white-space_normal_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ white-space: normal
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/foo_space_space_bar_LF_baz.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_nowrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_nowrap_wrapped-ref.html
new file mode 100644
index 0000000000..b6364cab1a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_nowrap_wrapped-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, white-space: nowrap (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 40%;
+ right: 0;
+ width: 20%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: nowrap
+}
+</style>
+<div class="video"><span class="cue"><span>A A A A A A A A A A A</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_nowrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_nowrap_wrapped.html
new file mode 100644
index 0000000000..db78752ef1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_nowrap_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, white-space: nowrap (cue that wraps)</title>
+<link rel="match" href="white-space_nowrap_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ white-space: nowrap
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/white-spaces_long_size_20.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-line_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-line_wrapped-ref.html
new file mode 100644
index 0000000000..45ee7f85dc
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-line_wrapped-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, white-space: pre-line (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 40%;
+ right: 0;
+ width: 20%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: normal
+}
+</style>
+<div class="video"><span class="cue"><span>A A A A A A<br> A A A A A</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-line_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-line_wrapped.html
new file mode 100644
index 0000000000..c06e0543b9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-line_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, white-space: pre-line (cue that wraps)</title>
+<link rel="match" href="white-space_pre-line_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ white-space: pre-line
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/white-spaces_long_size_20.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-ref.html
new file mode 100644
index 0000000000..075b762bd0
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, white-space: pre</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-family: sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: pre
+}
+</style>
+<div class="video"><span class="cue"><span>A A A A A A</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-wrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-wrap_wrapped-ref.html
new file mode 100644
index 0000000000..06313b9c71
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-wrap_wrapped-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, white-space: pre-wrap (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 30%;
+ right: 0;
+ width: 40%;
+ font-family: sans-serif;
+ text-align: center;
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: pre
+}
+</style>
+<div class="video"><span class="cue"><span>A A A A A <br> A <br>A A A A A</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-wrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-wrap_wrapped.html
new file mode 100644
index 0000000000..68bfee0706
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-wrap_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, white-space: pre-wrap (cue that wraps)</title>
+<link rel="match" href="white-space_pre-wrap_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ white-space: pre-wrap
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/white-spaces_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre.html
new file mode 100644
index 0000000000..f4dda8f9a8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, white-space: pre</title>
+<link rel="match" href="white-space_pre-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ white-space: pre
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/white-spaces.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre_wrapped-ref.html
new file mode 100644
index 0000000000..f568217a14
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre_wrapped-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue, white-space: pre (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 30%;
+ right: 0;
+ width: 40%;
+ font-family: sans-serif;
+ text-align: center;
+ overflow: hidden;
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: pre
+}
+</style>
+<div class="video"><span class="cue"><span>A A A A A A A A A A A</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre_wrapped.html
new file mode 100644
index 0000000000..1c82c62158
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue, white-space: pre (cue that wraps)</title>
+<link rel="match" href="white-space_pre_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ white-space: pre
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/white-spaces_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_box-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_box-ref.html
new file mode 100644
index 0000000000..04ce82af37
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_box-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(* *) should match nothing (since the background box is anonymous)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_box.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_box.html
new file mode 100644
index 0000000000..3cbf2d193d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_box.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(* *) should match nothing (since the background box is anonymous)</title>
+<link rel="match" href="background_box-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(* *) {
+ background:red;
+ color:yellow
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_properties-ref.html
new file mode 100644
index 0000000000..e85da9c268
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_properties-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), background properties</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ font-size: 9px;
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_properties.html
new file mode 100644
index 0000000000..5c0dae4d41
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_properties.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), background properties</title>
+<link rel="match" href="background_properties-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ font-family: Ahem, sans-serif;
+ background-color: #0f0;
+ background-image: url('../../media/background.gif');
+ background-repeat: repeat-x;
+ background-position: top left;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand-ref.html
new file mode 100644
index 0000000000..85a65c9636
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), background shorthand</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ font-size: 9px;
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand.html
new file mode 100644
index 0000000000..da6e5c5541
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), background shorthand</title>
+<link rel="match" href="background_shorthand-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ font-family: Ahem, sans-serif;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand_css_relative_url-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand_css_relative_url-ref.html
new file mode 100644
index 0000000000..9f203dfe85
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand_css_relative_url-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), background shorthand, background image URL with relative path from CSS file</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ font-size: 9px;
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand_css_relative_url.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand_css_relative_url.html
new file mode 100644
index 0000000000..10777f0e32
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand_css_relative_url.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), background shorthand, background image URL with relative path from CSS file</title>
+<link rel="match" href="background_shorthand_css_relative_url-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ font-family: Ahem, sans-serif;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_animation_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_animation_with_timestamp-ref.html
new file mode 100644
index 0000000000..12ff3e16b8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_animation_with_timestamp-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bold object animation with timestamp, ::cue(b:past) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #80ff80;
+ font-weight: bold;
+}
+</style>
+<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_animation_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_animation_with_timestamp.html
new file mode 100644
index 0000000000..8ba96727f8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_animation_with_timestamp.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bold object animation with timestamp, ::cue(b:past) selector</title>
+<link rel="match" href="bold_animation_with_timestamp-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b:past) {
+ -o-animation: test 9s steps(2, start);
+ animation: test 9s steps(2, start);
+}
+@-o-keyframes test {
+ 0% {
+ color: #ffffff;
+ }
+ 100% {
+ color: #00ff00;
+ }
+}
+@keyframes test {
+ 0% {
+ color: #ffffff;
+ }
+ 100% {
+ color: #00ff00;
+ }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/bold_with_timestamp.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_properties-ref.html
new file mode 100644
index 0000000000..53c778e912
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_properties-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(b), background properties</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > b {
+ background: #0f0 url('../../../media/background.gif') repeat-x top left;
+ color: #000;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_properties.html
new file mode 100644
index 0000000000..f2252d16ce
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_properties.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(b), background properties</title>
+<link rel="match" href="bold_background_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b) {
+ font-family: sans-serif;
+ background-color: #0f0;
+ background-image: url('../../../media/background.gif');
+ background-repeat: repeat-x;
+ background-position: top left;
+ color: black;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_bold.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_shorthand-ref.html
new file mode 100644
index 0000000000..7d973a56c9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_shorthand-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(b), background shorthand</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > b {
+ background: #0f0 url('../../../media/background.gif') repeat-x top left;
+ color: #000;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_shorthand.html
new file mode 100644
index 0000000000..7c718d7cbd
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_shorthand.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(b), background shorthand</title>
+<link rel="match" href="bold_background_shorthand-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b) {
+ font-family: sans-serif;
+ background: #0f0 url('../../../media/background.gif') repeat-x top left;
+ color: #000;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_bold.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_color-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_color-ref.html
new file mode 100644
index 0000000000..35ed895546
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_color-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(b), color: #0000ff</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > b {
+ color: #0000ff;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_color.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_color.html
new file mode 100644
index 0000000000..66fe3f2f88
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_color.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(b), color: #0000ff</title>
+<link rel="match" href="bold_color-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b) {
+ font-family: sans-serif;
+ color: #0000ff;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_bold.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_properties-ref.html
new file mode 100644
index 0000000000..74e8acc0b6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_properties-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(b), font properties</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-family: sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > b {
+ font: italic small-caps normal 9px/18px sans-serif;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_properties.html
new file mode 100644
index 0000000000..5b241c662f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_properties.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(b), font properties</title>
+<link rel="match" href="bold_font_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b) {
+ font-style: italic;
+ font-variant: small-caps;
+ font-weight: normal;
+ font-size: 9px;
+ line-height: 18px;
+ font-family: sans-serif;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_bold.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_shorthand-ref.html
new file mode 100644
index 0000000000..ad450735b1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_shorthand-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(b), font shorthand</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-family: sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > b {
+ font: normal small-caps normal 9px/18px sans-serif;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_shorthand.html
new file mode 100644
index 0000000000..eb0e4560a9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_shorthand.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(b), font shorthand</title>
+<link rel="match" href="bold_font_shorthand-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b) {
+ font: normal small-caps normal 9px/18px sans-serif;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_bold.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_namespace-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_namespace-ref.html
new file mode 100644
index 0000000000..dba8e3d37f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_namespace-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(|b) should match</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+.green {
+ font-weight: bold;
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_namespace.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_namespace.html
new file mode 100644
index 0000000000..93b6e1b286
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_namespace.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(|b) should match</title>
+<link rel="match" href="bold_namespace-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ color: green;
+}
+::cue(*|b) {
+ color: red
+}
+::cue(|b) {
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_bold.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_properties-ref.html
new file mode 100644
index 0000000000..67f873c424
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_properties-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(b), outline properties</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > b {
+ display: inline-block;
+ margin-left: -2px;
+ margin-right: -2px;
+ border: solid #00f 2px;
+ border-bottom: none;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_properties.html
new file mode 100644
index 0000000000..39a2fe57c8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(b), outline properties</title>
+<link rel="match" href="bold_outline_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b) {
+ font-family: sans-serif;
+ outline-style: solid;
+ outline-color: #00f;
+ outline-width: 2px;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_bold.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_shorthand-ref.html
new file mode 100644
index 0000000000..ebb9258299
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_shorthand-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(b), outline shorthand</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > b {
+ display: inline-block;
+ margin-left: -2px;
+ margin-right: -2px;
+ border: solid #00f 2px;
+ border-bottom: none;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_shorthand.html
new file mode 100644
index 0000000000..163e5f9167
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_shorthand.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(b), outline shorthand</title>
+<link rel="match" href="bold_outline_shorthand-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b) {
+ font-family: sans-serif;
+ outline: solid #00f 2px;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_bold.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-decoration_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-decoration_line-through-ref.html
new file mode 100644
index 0000000000..eb06125634
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-decoration_line-through-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(b), text-decoration: line-through</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > b {
+ text-decoration: line-through;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-decoration_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-decoration_line-through.html
new file mode 100644
index 0000000000..e3045d5b25
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-decoration_line-through.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(b), text-decoration: line-through</title>
+<link rel="match" href="bold_text-decoration_line-through-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b) {
+ font-family: sans-serif;
+ text-decoration: line-through;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_bold.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-shadow-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-shadow-ref.html
new file mode 100644
index 0000000000..5cd5f89858
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-shadow-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(b), text-shadow</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > b {
+ text-shadow: 0px 0px 5px #0f0;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-shadow.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-shadow.html
new file mode 100644
index 0000000000..d5b32a63d7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-shadow.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(b), text-shadow</title>
+<link rel="match" href="bold_text-shadow-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b) {
+ font-family: sans-serif;
+ text-shadow: 0px 0px 5px #0f0;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_bold.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_future-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_future-ref.html
new file mode 100644
index 0000000000..425754ea8e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_future-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bold object transition with timestamp, ::cue(b:future) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ font-weight: bold;
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_future.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_future.html
new file mode 100644
index 0000000000..6dae921e6d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_future.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bold object transition with timestamp, ::cue(b:future) selector</title>
+<link rel="match" href="bold_timestamp_future-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b:future) {
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/bold_with_2_timestamps.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_past-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_past-ref.html
new file mode 100644
index 0000000000..7cca2b42b1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_past-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bold object transition with timestamp, ::cue(b:past) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ font-weight: bold;
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_past.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_past.html
new file mode 100644
index 0000000000..b43d786dd7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_past.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bold object transition with timestamp, ::cue(b:past) selector</title>
+<link rel="match" href="bold_timestamp_past-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b:past) {
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/bold_with_timestamp.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_transition_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_transition_with_timestamp-ref.html
new file mode 100644
index 0000000000..a958d8f787
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_transition_with_timestamp-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bold object transition with timestamp, ::cue(b:past) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #80ff80;
+ font-weight: bold;
+}
+</style>
+<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_transition_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_transition_with_timestamp.html
new file mode 100644
index 0000000000..d83f85ca38
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_transition_with_timestamp.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bold object transition with timestamp, ::cue(b:past) selector</title>
+<link rel="match" href="bold_transition_with_timestamp-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b) {
+ -o-transition: color 9s steps(2, start);
+ transition: color 9s steps(2, start);
+}
+::cue(b:past) {
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/bold_with_timestamp.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_normal_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_normal_wrapped-ref.html
new file mode 100644
index 0000000000..9b682b2546
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_normal_wrapped-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bold object, ::cue(b), white-space: normal (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ font-weight: bold;
+ white-space: normal
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_normal_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_normal_wrapped.html
new file mode 100644
index 0000000000..66869fa009
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_normal_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bold object, ::cue(b), white-space: normal (cue that wraps)</title>
+<link rel="match" href="bold_white-space_normal_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b) {
+ white-space: normal
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/bold_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_nowrap-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_nowrap-ref.html
new file mode 100644
index 0000000000..949a72e3e7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_nowrap-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bold object, ::cue(b), white-space: nowrap (cue does not wrap)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative;
+ overflow: hidden;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ font-weight: bold;
+ white-space: nowrap
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_nowrap.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_nowrap.html
new file mode 100644
index 0000000000..636ecd467b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_nowrap.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bold object, ::cue(b), white-space: nowrap (cue does not wrap)</title>
+<link rel="match" href="bold_white-space_nowrap-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b) {
+ white-space: nowrap
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/bold_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-line_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-line_wrapped-ref.html
new file mode 100644
index 0000000000..951b9c932c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-line_wrapped-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bold object, ::cue(b), white-space: pre-line (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ font-weight: bold;
+ white-space: pre-line
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-line_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-line_wrapped.html
new file mode 100644
index 0000000000..b8eb48811f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-line_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bold object, ::cue(b), white-space: pre-line (cue that wraps)</title>
+<link rel="match" href="bold_white-space_pre-line_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b) {
+ white-space: pre-line
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/bold_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-wrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-wrap_wrapped-ref.html
new file mode 100644
index 0000000000..ffc8721a16
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-wrap_wrapped-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bold object, ::cue(b), white-space: pre-wrap (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ font-weight: bold;
+ white-space: pre-wrap
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-wrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-wrap_wrapped.html
new file mode 100644
index 0000000000..ab1f1009e6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-wrap_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bold object, ::cue(b), white-space: pre-wrap (cue that wraps)</title>
+<link rel="match" href="bold_white-space_pre-wrap_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b) {
+ white-space: pre-wrap
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/bold_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre_wrapped-ref.html
new file mode 100644
index 0000000000..b8b6025c31
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre_wrapped-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bold object, ::cue(b), white-space: pre (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+ overflow: hidden;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ font-weight: bold;
+ white-space: pre
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre_wrapped.html
new file mode 100644
index 0000000000..bc116eb669
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bold object, ::cue(b), white-space: pre (cue that wraps)</title>
+<link rel="match" href="bold_white-space_pre_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b) {
+ white-space: pre
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/bold_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class-ref.html
new file mode 100644
index 0000000000..e8ce47ef8d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bold object with class, ::cue(.foo) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <b>test subtitle</b>, <b class="green">test subtitle</b></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class.html
new file mode 100644
index 0000000000..c3173c2265
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bold object with class, ::cue(.foo) selector</title>
+<link rel="match" href="bold_with_class-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(.foo) {
+ font-family: sans-serif;
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_bold_with_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class_object_specific_selector-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class_object_specific_selector-ref.html
new file mode 100644
index 0000000000..5de9e15149
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class_object_specific_selector-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bold object with class, ::cue(b.foo) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <b>test subtitle</b>, <b class="green">test subtitle</b></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class_object_specific_selector.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class_object_specific_selector.html
new file mode 100644
index 0000000000..611fdd4890
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class_object_specific_selector.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, bold object with class, ::cue(b.foo) selector</title>
+<link rel="match" href="bold_with_class_object_specific_selector-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(b.foo) {
+ font-family: sans-serif;
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_bold_with_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_animation_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_animation_with_timestamp-ref.html
new file mode 100644
index 0000000000..bbd5d40132
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_animation_with_timestamp-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, class object animation with timestamp, ::cue(c:past) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #80ff80;
+ font-weight: bold;
+}
+</style>
+<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_animation_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_animation_with_timestamp.html
new file mode 100644
index 0000000000..3313941fc3
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_animation_with_timestamp.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, class object animation with timestamp, ::cue(c:past) selector</title>
+<link rel="match" href="class_animation_with_timestamp-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c:past) {
+ -o-animation: test 9s steps(2, start);
+ animation: test 9s steps(2, start);
+}
+@-o-keyframes test {
+ 0% {
+ color: #ffffff;
+ }
+ 100% {
+ color: #00ff00;
+ }
+}
+@keyframes test {
+ 0% {
+ color: #ffffff;
+ }
+ 100% {
+ color: #00ff00;
+ }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/class_with_timestamp.vtt">
+</video>
+<script>
+document.getElementsByTagName('track')[0].track.mode = 'showing';
+</script>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_properties-ref.html
new file mode 100644
index 0000000000..5639c67ac5
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_properties-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(c), background properties</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ background: #0f0 url('../../../media/background.gif') repeat-x top left;
+ color: #000;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_properties.html
new file mode 100644
index 0000000000..2d8c2f8657
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_properties.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(c), background properties</title>
+<link rel="match" href="class_background_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c) {
+ font-family: sans-serif;
+ background-color: #0f0;
+ background-image: url('../../../media/background.gif');
+ background-repeat: repeat-x;
+ background-position: top left;
+ color: black;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_shorthand-ref.html
new file mode 100644
index 0000000000..a688693582
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_shorthand-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(c), background shorthand</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ background: #0f0 url('../../../media/background.gif') repeat-x top left;
+ color: #000;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_shorthand.html
new file mode 100644
index 0000000000..52ab133567
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_shorthand.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(c), background shorthand</title>
+<link rel="match" href="class_background_shorthand-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c) {
+ font-family: sans-serif;
+ background: #0f0 url('../../../media/background.gif') repeat-x top left;
+ color: #000;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_color-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_color-ref.html
new file mode 100644
index 0000000000..22584f6910
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_color-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(c), color: #0000ff</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ color: #0000ff;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_color.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_color.html
new file mode 100644
index 0000000000..47c4be5886
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_color.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(c), color: #0000ff</title>
+<link rel="match" href="class_color-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c) {
+ font-family: sans-serif;
+ color: #0000ff;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_properties-ref.html
new file mode 100644
index 0000000000..62ab14239e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_properties-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(c), font properties</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-family: sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ font: italic small-caps bold 9px/18px sans-serif;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_properties.html
new file mode 100644
index 0000000000..5658f81688
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_properties.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(c), font properties</title>
+<link rel="match" href="class_font_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c) {
+ font-style: italic;
+ font-variant: small-caps;
+ font-weight: bold;
+ font-size: 9px;
+ line-height: 18px;
+ font-family: sans-serif;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_shorthand-ref.html
new file mode 100644
index 0000000000..fe17d8f418
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_shorthand-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(c), font shorthand</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-family: sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ font: normal small-caps bold 9px/18px sans-serif;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_shorthand.html
new file mode 100644
index 0000000000..aa243537a7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_shorthand.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(c), font shorthand</title>
+<link rel="match" href="class_font_shorthand-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c) {
+ font: normal small-caps bold 9px/18px sans-serif;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_namespace-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_namespace-ref.html
new file mode 100644
index 0000000000..1370516236
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_namespace-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(|c) should match</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+.green {
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_namespace.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_namespace.html
new file mode 100644
index 0000000000..3989f2180a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_namespace.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(|c) should match</title>
+<link rel="match" href="class_namespace-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ color: green;
+ font-family: Ahem, sans-serif
+}
+::cue(*|c) {
+ color: red
+}
+::cue(|c) {
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_properties-ref.html
new file mode 100644
index 0000000000..cd712eab23
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_properties-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(c), outline properties</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ display: inline-block;
+ margin-left: -2px;
+ margin-right: -2px;
+ border: solid #00f 2px;
+ border-bottom: none;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_properties.html
new file mode 100644
index 0000000000..82fdc1445f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(c), outline properties</title>
+<link rel="match" href="class_outline_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c) {
+ font-family: sans-serif;
+ outline-style: solid;
+ outline-color: #00f;
+ outline-width: 2px;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_shorthand-ref.html
new file mode 100644
index 0000000000..eb0195f269
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_shorthand-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(c), outline shorthand</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ display: inline-block;
+ margin-left: -2px;
+ margin-right: -2px;
+ border: solid #00f 2px;
+ border-bottom: none;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_shorthand.html
new file mode 100644
index 0000000000..881a0967a3
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_shorthand.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(c), outline shorthand</title>
+<link rel="match" href="class_outline_shorthand-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c) {
+ font-family: sans-serif;
+ outline: solid #00f 2px;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-decoration_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-decoration_line-through-ref.html
new file mode 100644
index 0000000000..d7eabfac2b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-decoration_line-through-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(c), text-decoration: line-through</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ text-decoration: line-through;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-decoration_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-decoration_line-through.html
new file mode 100644
index 0000000000..cf6caa4456
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-decoration_line-through.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(c), text-decoration: line-through</title>
+<link rel="match" href="class_text-decoration_line-through-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c) {
+ font-family: sans-serif;
+ text-decoration: line-through;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-shadow-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-shadow-ref.html
new file mode 100644
index 0000000000..22c339c8c5
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-shadow-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(c), text-shadow</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ text-shadow: 0px 0px 5px #0f0;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-shadow.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-shadow.html
new file mode 100644
index 0000000000..786f9b7d9e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-shadow.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(c), text-shadow</title>
+<link rel="match" href="class_text-shadow-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c) {
+ font-family: sans-serif;
+ text-shadow: 0px 0px 5px #0f0;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_future-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_future-ref.html
new file mode 100644
index 0000000000..0567e7e2c0
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_future-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, class object transition with timestamp, ::cue(c:future) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_future.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_future.html
new file mode 100644
index 0000000000..a4a1d755a2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_future.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, class object transition with timestamp, ::cue(c:future) selector</title>
+<link rel="match" href="class_timestamp_future-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c:future) {
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/class_with_2_timestamps.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_past-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_past-ref.html
new file mode 100644
index 0000000000..20c8a37493
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_past-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, class object transition with timestamp, ::cue(c:past) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_past.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_past.html
new file mode 100644
index 0000000000..4d1ceea2d1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_past.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, class object transition with timestamp, ::cue(c:past) selector</title>
+<link rel="match" href="class_timestamp_past-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c:past) {
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/class_with_timestamp.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_transition_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_transition_with_timestamp-ref.html
new file mode 100644
index 0000000000..7cb9a1ea4f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_transition_with_timestamp-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, class object transition with timestamp, ::cue(c:past) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #80ff80;
+}
+</style>
+<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_transition_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_transition_with_timestamp.html
new file mode 100644
index 0000000000..adb5328b83
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_transition_with_timestamp.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, class object transition with timestamp, ::cue(c:past) selector</title>
+<link rel="match" href="class_transition_with_timestamp-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c) {
+ -o-transition: color 9s steps(2, start);
+ transition: color 9s steps(2, start);
+}
+::cue(c:past) {
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/class_with_timestamp.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_vertical_text-combine-upright-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_vertical_text-combine-upright-ref.html
new file mode 100644
index 0000000000..8bbd791136
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_vertical_text-combine-upright-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, bidi ruby</title>
+ <meta charset="UTF-8">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ text-align: center;
+ unicode-bidi: -webkit-plaintext;
+ unicode-bidi: plaintext;
+ direction: ltr;
+ writing-mode: vertical-lr;
+ -webkit-writing-mode: vertical-lr;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.combine {
+ -webkit-text-combine: horizontal;
+ text-combine-upright: all;
+ font-family: Ahem, sans-serif;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>平成<span class="combine">20</span>年4月<span class="combine">16</span>日に</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_vertical_text-combine-upright.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_vertical_text-combine-upright.html
new file mode 100644
index 0000000000..fe0d22843d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_vertical_text-combine-upright.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, vertical cue with class to apply text-combine-upright all</title>
+<link rel="match" href="class_vertical_text-combine-upright-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(.combine) {
+ text-combine-upright: all;
+ font-family: Ahem, sans-serif;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/class_text-combine-upright.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_normal_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_normal_wrapped-ref.html
new file mode 100644
index 0000000000..b710c322ee
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_normal_wrapped-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Reference for WebVTT rendering, class object, ::cue(c), white-space: normal (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+ font-family: sans-serif;
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: normal
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<div class="video">
+ <video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ </video>
+ <span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span>
+</div>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_normal_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_normal_wrapped.html
new file mode 100644
index 0000000000..ee38e36584
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_normal_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, class object, ::cue(c), white-space: normal (cue that wraps)</title>
+<link rel="match" href="class_white-space_normal_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c) {
+ white-space: normal
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/class_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_nowrap-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_nowrap-ref.html
new file mode 100644
index 0000000000..4176a6553d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_nowrap-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, class object, ::cue(c), white-space: nowrap (cue does not wrap)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative;
+ overflow: hidden;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: nowrap
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_nowrap.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_nowrap.html
new file mode 100644
index 0000000000..c86bcb6b62
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_nowrap.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, class object, ::cue(c), white-space: nowrap (cue does not wrap)</title>
+<link rel="match" href="class_white-space_nowrap-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c) {
+ white-space: nowrap
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/class_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-line_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-line_wrapped-ref.html
new file mode 100644
index 0000000000..34bf662975
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-line_wrapped-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Reference for WebVTT rendering, class object, ::cue(c), white-space: pre-line (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+ font-family: sans-serif;
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: pre-line
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<div class="video">
+ <video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ </video>
+ <span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span>
+</div>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-line_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-line_wrapped.html
new file mode 100644
index 0000000000..0a1b7206f8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-line_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, class object, ::cue(c), white-space: pre-line (cue that wraps)</title>
+<link rel="match" href="class_white-space_pre-line_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c) {
+ white-space: pre-line
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/class_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-wrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-wrap_wrapped-ref.html
new file mode 100644
index 0000000000..bf642420fa
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-wrap_wrapped-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, class object, ::cue(c), white-space: pre-wrap (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: pre-wrap
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-wrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-wrap_wrapped.html
new file mode 100644
index 0000000000..3b11fd5e8f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-wrap_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, class object, ::cue(c), white-space: pre-wrap (cue that wraps)</title>
+<link rel="match" href="class_white-space_pre-wrap_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c) {
+ white-space: pre-wrap
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/class_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre_wrapped-ref.html
new file mode 100644
index 0000000000..a681294fec
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre_wrapped-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, class object, ::cue(c), white-space: pre (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+ overflow: hidden;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: pre
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre_wrapped.html
new file mode 100644
index 0000000000..dbca54f5c4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, class object, ::cue(c), white-space: pre (cue that wraps)</title>
+<link rel="match" href="class_white-space_pre_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c) {
+ white-space: pre
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/class_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class-ref.html
new file mode 100644
index 0000000000..7f524ca846
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, class object with class, ::cue(.foo) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span>, <span class="green">test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class.html
new file mode 100644
index 0000000000..9b24c87b3e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, class object with class, ::cue(.foo) selector</title>
+<link rel="match" href="class_with_class-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(.foo) {
+ font-family: sans-serif;
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_class_with_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class_object_specific_selector-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class_object_specific_selector-ref.html
new file mode 100644
index 0000000000..15fcc65178
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class_object_specific_selector-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, class object with class, ::cue(c.foo) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span>, <span class="green">test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class_object_specific_selector.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class_object_specific_selector.html
new file mode 100644
index 0000000000..9812c969b2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class_object_specific_selector.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, class object with class, ::cue(c.foo) selector</title>
+<link rel="match" href="class_with_class_object_specific_selector-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(c.foo) {
+ font-family: sans-serif;
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_class_with_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hex-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hex-ref.html
new file mode 100644
index 0000000000..9b1d412d5a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hex-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), color: #60ff60</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: #60ff60;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hex.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hex.html
new file mode 100644
index 0000000000..08f77c7b42
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hex.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), color: #60ff60</title>
+<link rel="match" href="color_hex-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ font-family: Ahem, sans-serif;
+ color: #60ff60;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hsla-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hsla-ref.html
new file mode 100644
index 0000000000..0ad35cd63b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hsla-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), color: hsla()</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: hsla(100,100%,50%,0.5);
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hsla.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hsla.html
new file mode 100644
index 0000000000..eb3f29b650
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hsla.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), color: hsla()</title>
+<link rel="match" href="color_hsla-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ font-family: Ahem, sans-serif;
+ color: hsla(100,100%,50%,0.5);
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_rgba-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_rgba-ref.html
new file mode 100644
index 0000000000..15cc158bc8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_rgba-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), color: rgba()</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: rgba(128,255,128,0.5);
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_rgba.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_rgba.html
new file mode 100644
index 0000000000..1045626b4c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_rgba.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), color: rgba()</title>
+<link rel="match" href="color_rgba-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ font-family: Ahem, sans-serif;
+ color: rgba(128,255,128,0.5);
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/cue_func_selector_single_colon-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/cue_func_selector_single_colon-ref.html
new file mode 100644
index 0000000000..e2ccf63de3
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/cue_func_selector_single_colon-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, :cue()</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/cue_func_selector_single_colon.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/cue_func_selector_single_colon.html
new file mode 100644
index 0000000000..3494918c1c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/cue_func_selector_single_colon.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, :cue()</title>
+<link rel="match" href="cue_func_selector_single_colon-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+:cue(*) {
+ background: red;
+ color: yellow
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_properties-ref.html
new file mode 100644
index 0000000000..ce446d9e96
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_properties-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), font properties</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font: italic small-caps bold 9px/18px sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_properties.html
new file mode 100644
index 0000000000..e38cc7e0ca
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_properties.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), font properties</title>
+<link rel="match" href="font_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ font-style: italic;
+ font-variant: small-caps;
+ font-weight: bold;
+ font-size: 9px;
+ line-height: 18px;
+ font-family: sans-serif;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_shorthand-ref.html
new file mode 100644
index 0000000000..4c9d11a16e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_shorthand-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), font shorthand</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font: italic small-caps bold 9px/18px sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_shorthand.html
new file mode 100644
index 0000000000..9deb49379b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_shorthand.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), font shorthand</title>
+<link rel="match" href="font_shorthand-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ font: italic small-caps bold 9px/18px sans-serif;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/id_color-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/id_color-ref.html
new file mode 100644
index 0000000000..fce51702f7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/id_color-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, cue with ID, ::cue(#foo) selector</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ font-size: 9px;
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/id_color.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/id_color.html
new file mode 100644
index 0000000000..0371fe1c24
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/id_color.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, cue with ID, ::cue(#foo) selector</title>
+<link rel="match" href="id_color-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(#foo) {
+ font-family: Ahem, sans-serif;
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/cue_with_id.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/inherit_values_from_media_element-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/inherit_values_from_media_element-ref.html
new file mode 100644
index 0000000000..caef6dc409
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/inherit_values_from_media_element-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(*), css properties with value inherit should inherit from media element</title>
+<style>
+.video {
+ position: absolute;
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ color: #f0f;
+ white-space: pre-wrap;
+ font: italic small-caps bold 9px/18px sans-serif;
+ text-decoration: overline underline line-through;
+ text-shadow: 0px 0px 5px #0f0;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ outline: solid #00f 2px;
+ font-size: 9px;
+}
+.videoWhite {
+ position: absolute;
+ top: 0;
+ left: 160px;
+ width: 960px;
+ height: 180px;;
+ background: #fff;
+ z-index: 1;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 30%;
+ right: 0;
+ width: 40%;
+ text-align: center;
+ outline: inherit;
+ text-shadow: inherit;
+ text-decoration: inherit;
+ outline-bottom: none;
+ z-index: 2
+}
+.cue > span {
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ text-decoration: inherit;
+ white-space: pre-wrap
+}
+</style>
+<div class="video"><div class="videoWhite"></div><span class="cue"><span>A A A A A A A A A A A</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/inherit_values_from_media_element.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/inherit_values_from_media_element.html
new file mode 100644
index 0000000000..d2a7f0146f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/inherit_values_from_media_element.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(*), css properties with value inherit should inherit from media element</title>
+<link rel="match" href="inherit_values_from_media_element-ref.html">
+<style>
+video {
+ color: #f0f;
+ white-space: pre-wrap;
+ font: italic small-caps bold 9px/18px sans-serif;
+ text-decoration: overline underline line-through;
+ text-shadow: 0px 0px 5px #0f0;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ outline: solid #00f 2px;
+}
+::cue(*) {
+ white-space: inherit;
+ font: inherit;
+ color: inherit;
+ text-decoration: inherit;
+ text-shadow: inherit;
+ background: inherit;
+ outline: inherit;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/white-spaces_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_animation_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_animation_with_timestamp-ref.html
new file mode 100644
index 0000000000..14e4fced51
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_animation_with_timestamp-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, italic object animation with timestamp, ::cue(i:past) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #80ff80;
+ font-weight: bold;
+}
+</style>
+<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_animation_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_animation_with_timestamp.html
new file mode 100644
index 0000000000..42a44d437b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_animation_with_timestamp.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, italic object animation with timestamp, ::cue(i:past) selector</title>
+<link rel="match" href="italic_animation_with_timestamp-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i:past) {
+ -o-animation: test 9s steps(2, start);
+ animation: test 9s steps(2, start);
+}
+@-o-keyframes test {
+ 0% {
+ color: #ffffff;
+ }
+ 100% {
+ color: #00ff00;
+ }
+}
+@keyframes test {
+ 0% {
+ color: #ffffff;
+ }
+ 100% {
+ color: #00ff00;
+ }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/italic_with_timestamp.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_properties-ref.html
new file mode 100644
index 0000000000..7af39a3693
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_properties-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(i), background properties</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > i {
+ background: #0f0 url('../../../media/background.gif') repeat-x top left;
+ color: #000;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_properties.html
new file mode 100644
index 0000000000..0db33d04fc
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_properties.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(i), background properties</title>
+<link rel="match" href="italic_background_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i) {
+ font-family: sans-serif;
+ background-color: #0f0;
+ background-image: url('../../../media/background.gif');
+ background-repeat: repeat-x;
+ background-position: top left;
+ color: black;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_italic.vtt">
+</video>
+<script>
+document.getElementsByTagName('track')[0].track.mode = 'showing';
+</script>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_shorthand-ref.html
new file mode 100644
index 0000000000..030c31609f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_shorthand-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(i), background shorthand</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > i {
+ background: #0f0 url('../../../media/background.gif') repeat-x top left;
+ color: #000;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_shorthand.html
new file mode 100644
index 0000000000..e98fad3a8b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_shorthand.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(i), background shorthand</title>
+<link rel="match" href="italic_background_shorthand-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i) {
+ font-family: sans-serif;
+ background: #0f0 url('../../../media/background.gif') repeat-x top left;
+ color: #000;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_italic.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_color-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_color-ref.html
new file mode 100644
index 0000000000..dd8c1d2fc1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_color-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(i), color: #0000ff</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > i {
+ color: #0000ff;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_color.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_color.html
new file mode 100644
index 0000000000..35ec74a37c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_color.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(i), color: #0000ff</title>
+<link rel="match" href="italic_color-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i) {
+ font-family: sans-serif;
+ color: #0000ff;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_italic.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_properties-ref.html
new file mode 100644
index 0000000000..1d0312a1c6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_properties-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(i), font properties</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-family: sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > i {
+ font: italic small-caps bold 9px/18px sans-serif;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_properties.html
new file mode 100644
index 0000000000..873b7b3f98
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_properties.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(i), font properties</title>
+<link rel="match" href="italic_font_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i) {
+ font-style: italic;
+ font-variant: small-caps;
+ font-weight: bold;
+ font-size: 9px;
+ line-height: 18px;
+ font-family: sans-serif;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_italic.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_shorthand-ref.html
new file mode 100644
index 0000000000..0abd4d3225
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_shorthand-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(i), font shorthand</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-family: sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > i {
+ font: normal small-caps bold 9px/18px sans-serif;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_shorthand.html
new file mode 100644
index 0000000000..7f52e00ec4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_shorthand.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(i), font shorthand</title>
+<link rel="match" href="italic_font_shorthand-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i) {
+ font: normal small-caps bold 9px/18px sans-serif;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_italic.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_namespace-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_namespace-ref.html
new file mode 100644
index 0000000000..d75cf446ff
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_namespace-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(|i) should match</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+.green {
+ font-style: italic;
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_namespace.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_namespace.html
new file mode 100644
index 0000000000..9615d8134a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_namespace.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(|i) should match</title>
+<link rel="match" href="italic_namespace-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ color: green;
+}
+::cue(*|i) {
+ color: red
+}
+::cue(|i) {
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_italic.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_properties-ref.html
new file mode 100644
index 0000000000..77e4d70053
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_properties-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(i), outline properties</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > i {
+ display: inline-block;
+ margin-left: -2px;
+ margin-right: -2px;
+ border: solid #00f 2px;
+ border-bottom: none;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_properties.html
new file mode 100644
index 0000000000..1e5d3485aa
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(i), outline properties</title>
+<link rel="match" href="italic_outline_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i) {
+ font-family: sans-serif;
+ outline-style: solid;
+ outline-color: #00f;
+ outline-width: 2px;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_italic.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_shorthand-ref.html
new file mode 100644
index 0000000000..57ce50fab6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_shorthand-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(i), outline shorthand</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > i {
+ display: inline-block;
+ margin-left: -2px;
+ margin-right: -2px;
+ border: solid #00f 2px;
+ border-bottom: none;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_shorthand.html
new file mode 100644
index 0000000000..237a3884a2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_shorthand.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(i), outline shorthand</title>
+<link rel="match" href="italic_outline_shorthand-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i) {
+ font-family: sans-serif;
+ outline: solid #00f 2px;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_italic.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-decoration_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-decoration_line-through-ref.html
new file mode 100644
index 0000000000..814440a571
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-decoration_line-through-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(i), text-decoration: line-through</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > i {
+ text-decoration: line-through;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-decoration_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-decoration_line-through.html
new file mode 100644
index 0000000000..a4e40060b2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-decoration_line-through.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(i), text-decoration: line-through</title>
+<link rel="match" href="italic_text-decoration_line-through-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i) {
+ font-family: sans-serif;
+ text-decoration: line-through;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_italic.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-shadow-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-shadow-ref.html
new file mode 100644
index 0000000000..4776560409
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-shadow-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(i), text-shadow</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > i {
+ text-shadow: 0px 0px 5px #0f0;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-shadow.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-shadow.html
new file mode 100644
index 0000000000..af63481e0a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-shadow.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(i), text-shadow</title>
+<link rel="match" href="italic_text-shadow-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i) {
+ font-family: sans-serif;
+ text-shadow: 0px 0px 5px #0f0;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_italic.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_future-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_future-ref.html
new file mode 100644
index 0000000000..bd27d1b895
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_future-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, italic object transition with timestamp, ::cue(i:future) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ font-style: italic;
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_future.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_future.html
new file mode 100644
index 0000000000..30d707be58
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_future.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, italic object transition with timestamp, ::cue(i:future) selector</title>
+<link rel="match" href="italic_timestamp_future-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i:future) {
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/italic_with_2_timestamps.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_past-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_past-ref.html
new file mode 100644
index 0000000000..b721f252d5
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_past-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, italic object transition with timestamp, ::cue(i:past) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ font-style: italic;
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_past.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_past.html
new file mode 100644
index 0000000000..24de973ef4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_past.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, italic object transition with timestamp, ::cue(i:past) selector</title>
+<link rel="match" href="italic_timestamp_past-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i:past) {
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/italic_with_timestamp.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_transition_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_transition_with_timestamp-ref.html
new file mode 100644
index 0000000000..019e66db54
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_transition_with_timestamp-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, italic object transition with timestamp, ::cue(i:past) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #80ff80;
+ font-style: italic;
+}
+</style>
+<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_transition_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_transition_with_timestamp.html
new file mode 100644
index 0000000000..37aea9d1d2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_transition_with_timestamp.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, italic object transition with timestamp, ::cue(i:past) selector</title>
+<link rel="match" href="italic_transition_with_timestamp-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i) {
+ -o-transition: color 9s steps(2, start);
+ transition: color 9s steps(2, start);
+}
+::cue(i:past) {
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/italic_with_timestamp.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_normal_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_normal_wrapped-ref.html
new file mode 100644
index 0000000000..5a50562ef7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_normal_wrapped-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, italic object, ::cue(i), white-space: normal (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ font-style: italic;
+ white-space: normal
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_normal_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_normal_wrapped.html
new file mode 100644
index 0000000000..d00fc920ae
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_normal_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, italic object, ::cue(i), white-space: normal (cue that wraps)</title>
+<link rel="match" href="italic_white-space_normal_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i) {
+ white-space: normal
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/italic_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_nowrap-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_nowrap-ref.html
new file mode 100644
index 0000000000..fddae1e0aa
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_nowrap-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, italic object, ::cue(i), white-space: nowrap (cue does not wrap)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative;
+ overflow: hidden;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ font-style: italic;
+ white-space: nowrap
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_nowrap.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_nowrap.html
new file mode 100644
index 0000000000..1a975adaf4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_nowrap.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, italic object, ::cue(i), white-space: nowrap (cue does not wrap)</title>
+<link rel="match" href="italic_white-space_nowrap-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i) {
+ white-space: nowrap
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/italic_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-line_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-line_wrapped-ref.html
new file mode 100644
index 0000000000..3d075bf6da
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-line_wrapped-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, italic object, ::cue(i), white-space: pre-line (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ font-style: italic;
+ white-space: pre-line
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-line_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-line_wrapped.html
new file mode 100644
index 0000000000..bd19196d83
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-line_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, italic object, ::cue(i), white-space: pre-line (cue that wraps)</title>
+<link rel="match" href="italic_white-space_pre-line_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i) {
+ white-space: pre-line
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/italic_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-wrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-wrap_wrapped-ref.html
new file mode 100644
index 0000000000..be50ab9abe
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-wrap_wrapped-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, italic object, ::cue(i), white-space: pre-wrap (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ font-style: italic;
+ white-space: pre-wrap
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-wrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-wrap_wrapped.html
new file mode 100644
index 0000000000..5a02026050
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-wrap_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, italic object, ::cue(i), white-space: pre-wrap (cue that wraps)</title>
+<link rel="match" href="italic_white-space_pre-wrap_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i) {
+ white-space: pre-wrap
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/italic_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre_wrapped-ref.html
new file mode 100644
index 0000000000..3eb92d702a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre_wrapped-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, italic object, ::cue(i), white-space: pre (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+ overflow: hidden;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ font-style: italic;
+ white-space: pre
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre_wrapped.html
new file mode 100644
index 0000000000..80e2dd0f92
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, italic object, ::cue(i), white-space: pre (cue that wraps)</title>
+<link rel="match" href="italic_white-space_pre_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i) {
+ white-space: pre
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/italic_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class-ref.html
new file mode 100644
index 0000000000..f1d54d9e7f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, italic object with class, ::cue(.foo) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <i>test subtitle</i>, <i class="green">test subtitle</i></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class.html
new file mode 100644
index 0000000000..fa77b699fe
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, italic object with class, ::cue(.foo) selector</title>
+<link rel="match" href="italic_with_class-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(.foo) {
+ font-family: sans-serif;
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_italic_with_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class_object_specific_selector-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class_object_specific_selector-ref.html
new file mode 100644
index 0000000000..00f9a8fc29
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class_object_specific_selector-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, italic object with class, ::cue(i.foo) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <i>test subtitle</i>, <i class="green">test subtitle</i></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class_object_specific_selector.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class_object_specific_selector.html
new file mode 100644
index 0000000000..caace97154
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class_object_specific_selector.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, italic object with class, ::cue(i.foo) selector</title>
+<link rel="match" href="italic_with_class_object_specific_selector-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(i.foo) {
+ font-family: sans-serif;
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_italic_with_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_allowed_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_allowed_properties-ref.html
new file mode 100644
index 0000000000..333cdb818b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_allowed_properties-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), properties that should not affect the cue</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_allowed_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_allowed_properties.html
new file mode 100644
index 0000000000..e66f9c0792
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_allowed_properties.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), properties that should not affect the cue</title>
+<link rel="match" href="not_allowed_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ border: 2px solid red;
+ border-radius: 5px;
+ bottom: 300px;
+ box-shadow: 5px 5px 5px 5px #123456;
+ box-sizing: border-box;
+ clip: rect(0px, 5px, 0px, 5px);
+ columns: 100px 2;
+ content: 'hello!';
+ display: inline-block;
+ float: left;
+ font-family: sans-serif;
+ height: 90px;
+ left: -150px;
+ letter-spacing: 20px;
+ margin: 20px;
+ min-height: 100px;
+ min-width: 100px;
+ opacity: 0.2;
+ overflow: scroll;
+ padding: 20px;
+ position: absolute;
+ right: 200px;
+ text-align: left;
+ text-indent: 50px;
+ top: -50px;
+ width: 140px;
+ word-spacing: 50px;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_root_selector-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_root_selector-ref.html
new file mode 100644
index 0000000000..d7b46209e9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_root_selector-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(:not(:root)) should not match the root</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ color: lime
+}
+</style>
+<div class="video"><span class="cue"><span>Foo<span>bar</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_root_selector.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_root_selector.html
new file mode 100644
index 0000000000..468e5ba004
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_root_selector.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(:not(:root)) should not match the root</title>
+<link rel="match" href="not_root_selector-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(:not(:root)) {
+ color:lime
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/foo_c_bar.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_properties-ref.html
new file mode 100644
index 0000000000..a4cf1518d1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_properties-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), outline properties</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ outline: solid #00f 2px;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_properties.html
new file mode 100644
index 0000000000..8510ab41dd
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_properties.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), outline properties</title>
+<link rel="match" href="outline_properties-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ font-family: Ahem, sans-serif;
+ outline-style: solid;
+ outline-color: #00f;
+ outline-width: 2px;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_shorthand-ref.html
new file mode 100644
index 0000000000..c808acba76
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_shorthand-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), outline shorthand</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ outline: solid #00f 2px;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_shorthand.html
new file mode 100644
index 0000000000..88f7a4bdb7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_shorthand.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), outline shorthand</title>
+<link rel="match" href="outline_shorthand-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ font-family: Ahem, sans-serif;
+ outline: solid #00f 2px;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_namespace-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_namespace-ref.html
new file mode 100644
index 0000000000..28602829d2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_namespace-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(|*) should match the root</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_namespace.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_namespace.html
new file mode 100644
index 0000000000..0829a2be81
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_namespace.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(|*) should match the root</title>
+<link rel="match" href="root_namespace-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif
+}
+::cue(*|*) {
+ color: red
+}
+::cue(|*) {
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_selector-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_selector-ref.html
new file mode 100644
index 0000000000..a6840f1519
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_selector-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(:root) should match the root</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: lime;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_selector.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_selector.html
new file mode 100644
index 0000000000..532c83a754
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_selector.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(:root) should match the root</title>
+<link rel="match" href="root_selector-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(:root) {
+ color:lime
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_line-through-ref.html
new file mode 100644
index 0000000000..537f3ebf95
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_line-through-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), text-decoration: line-through</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ text-decoration: line-through;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_line-through.html
new file mode 100644
index 0000000000..1f13da7197
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_line-through.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), text-decoration: line-through</title>
+<link rel="match" href="text-decoration_line-through-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ font-family: sans-serif;
+ text-decoration: line-through;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline-ref.html
new file mode 100644
index 0000000000..893bbfd02a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), text-decoration: overline</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ text-decoration: overline;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline.html
new file mode 100644
index 0000000000..625b1fe1f5
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), text-decoration: overline</title>
+<link rel="match" href="text-decoration_overline-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ font-family: sans-serif;
+ text-decoration: overline;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline_underline_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline_underline_line-through-ref.html
new file mode 100644
index 0000000000..a8f54e2fdd
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline_underline_line-through-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), text-decoration: overline underline line-through</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ text-decoration: overline underline line-through;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline_underline_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline_underline_line-through.html
new file mode 100644
index 0000000000..da162cc898
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline_underline_line-through.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), text-decoration: overline underline line-through</title>
+<link rel="match" href="text-decoration_overline_underline_line-through-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ font-family: sans-serif;
+ text-decoration: overline underline line-through;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_underline-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_underline-ref.html
new file mode 100644
index 0000000000..46bada32f7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_underline-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), text-decoration: underline</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ text-decoration: underline;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_underline.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_underline.html
new file mode 100644
index 0000000000..7d53e549fa
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_underline.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), text-decoration: underline</title>
+<link rel="match" href="text-decoration_underline-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ font-family: sans-serif;
+ text-decoration: underline;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-shadow-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-shadow-ref.html
new file mode 100644
index 0000000000..7fcb4e1626
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-shadow-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), text-shadow</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ text-shadow: 0px 0px 5px #0f0;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-shadow.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-shadow.html
new file mode 100644
index 0000000000..42dd8f6af9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-shadow.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), text-shadow</title>
+<link rel="match" href="text-shadow-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ font-family: sans-serif;
+ text-shadow: 0px 0px 5px #0f0;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/type_selector_root-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/type_selector_root-ref.html
new file mode 100644
index 0000000000..95d3f775ec
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/type_selector_root-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(root) should match nothing; the root element should have no name</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/type_selector_root.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/type_selector_root.html
new file mode 100644
index 0000000000..beaf6e73fa
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/type_selector_root.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(root) should match nothing; the root element should have no name</title>
+<link rel="match" href="type_selector_root-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(root) {
+ color:yellow;
+ background:red
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_animation_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_animation_with_timestamp-ref.html
new file mode 100644
index 0000000000..4836d205d6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_animation_with_timestamp-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, underline object animation with timestamp, ::cue(u:past) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #80ff80;
+ font-weight: bold;
+}
+</style>
+<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_animation_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_animation_with_timestamp.html
new file mode 100644
index 0000000000..c4584b3014
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_animation_with_timestamp.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, underline object animation with timestamp, ::cue(u:past) selector</title>
+<link rel="match" href="underline_animation_with_timestamp-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u:past) {
+ -o-animation: test 9s steps(2, start);
+ animation: test 9s steps(2, start);
+}
+@-o-keyframes test {
+ 0% {
+ color: #ffffff;
+ }
+ 100% {
+ color: #00ff00;
+ }
+}
+@keyframes test {
+ 0% {
+ color: #ffffff;
+ }
+ 100% {
+ color: #00ff00;
+ }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/underline_with_timestamp.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_properties-ref.html
new file mode 100644
index 0000000000..a56ed92f20
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_properties-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(u), background properties</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > u {
+ background: #0f0 url('../../../media/background.gif') repeat-x top left;
+ color: #000;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_properties.html
new file mode 100644
index 0000000000..5312955e82
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_properties.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(u), background properties</title>
+<link rel="match" href="underline_background_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u) {
+ font-family: sans-serif;
+ background-color: #0f0;
+ background-image: url('../../../media/background.gif');
+ background-repeat: repeat-x;
+ background-position: top left;
+ color: black;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_underline.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_shorthand-ref.html
new file mode 100644
index 0000000000..a87f5bd1c7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_shorthand-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(u), background shorthand</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > u {
+ background: #0f0 url('../../../media/background.gif') repeat-x top left;
+ color: #000;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_shorthand.html
new file mode 100644
index 0000000000..84c97b07d0
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_shorthand.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(u), background shorthand</title>
+<link rel="match" href="underline_background_shorthand-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u) {
+ font-family: sans-serif;
+ background: #0f0 url('../../../media/background.gif') repeat-x top left;
+ color: #000;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_underline.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_color-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_color-ref.html
new file mode 100644
index 0000000000..2f77c824e6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_color-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(u), color: #0000ff</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > u {
+ color: #0000ff;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_color.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_color.html
new file mode 100644
index 0000000000..2fe4234692
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_color.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(u), color: #0000ff</title>
+<link rel="match" href="underline_color-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u) {
+ font-family: sans-serif;
+ color: #0000ff;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_underline.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_properties-ref.html
new file mode 100644
index 0000000000..5acb4e56cf
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_properties-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(u), font properties</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-family: sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > u {
+ font: italic small-caps normal 9px/18px sans-serif;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_properties.html
new file mode 100644
index 0000000000..29fed1175e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_properties.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(u), font properties</title>
+<link rel="match" href="underline_font_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u) {
+ font-style: italic;
+ font-variant: small-caps;
+ font-weight: normal;
+ font-size: 9px;
+ line-height: 18px;
+ font-family: sans-serif;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_underline.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_shorthand-ref.html
new file mode 100644
index 0000000000..5326c4883f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_shorthand-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(u), font shorthand</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-family: sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > u {
+ font: normal small-caps normal 9px/18px sans-serif;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_shorthand.html
new file mode 100644
index 0000000000..54630d44de
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_shorthand.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(u), font shorthand</title>
+<link rel="match" href="underline_font_shorthand-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u) {
+ font: normal small-caps normal 9px/18px sans-serif;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_underline.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_namespace-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_namespace-ref.html
new file mode 100644
index 0000000000..0823f44e34
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_namespace-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(|u) should match</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+.green {
+ text-decoration: underline;
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_namespace.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_namespace.html
new file mode 100644
index 0000000000..ab6378b229
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_namespace.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(|u) should match</title>
+<link rel="match" href="underline_namespace-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ color: green;
+}
+::cue(*|u) {
+ color: red
+}
+::cue(|u) {
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_underline.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_properties-ref.html
new file mode 100644
index 0000000000..04fbe5a54e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_properties-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(u), outline properties</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > u {
+ display: inline-block;
+ margin-left: -2px;
+ margin-right: -2px;
+ border: solid #00f 2px;
+ border-bottom: none;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_properties.html
new file mode 100644
index 0000000000..7602da0e1a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(u), outline properties</title>
+<link rel="match" href="underline_outline_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u) {
+ font-family: sans-serif;
+ outline-style: solid;
+ outline-color: #00f;
+ outline-width: 2px;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_underline.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_shorthand-ref.html
new file mode 100644
index 0000000000..47ac3ce14c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_shorthand-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(u), outline shorthand</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > u {
+ display: inline-block;
+ margin-left: -2px;
+ margin-right: -2px;
+ border: solid #00f 2px;
+ border-bottom: none;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_shorthand.html
new file mode 100644
index 0000000000..40645d25ab
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_shorthand.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(u), outline shorthand</title>
+<link rel="match" href="underline_outline_shorthand-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u) {
+ font-family: sans-serif;
+ outline: solid #00f 2px;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_underline.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-decoration_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-decoration_line-through-ref.html
new file mode 100644
index 0000000000..6f78eb5df7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-decoration_line-through-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(u), text-decoration: line-through</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > u {
+ text-decoration: line-through;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-decoration_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-decoration_line-through.html
new file mode 100644
index 0000000000..e238ccff92
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-decoration_line-through.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(u), text-decoration: line-through</title>
+<link rel="match" href="underline_text-decoration_line-through-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u) {
+ font-family: sans-serif;
+ text-decoration: line-through;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_underline.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-shadow-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-shadow-ref.html
new file mode 100644
index 0000000000..daf2c614e5
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-shadow-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(u), text-shadow</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > u {
+ text-shadow: 0px 0px 5px #0f0;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-shadow.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-shadow.html
new file mode 100644
index 0000000000..69c08fbae2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-shadow.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(u), text-shadow</title>
+<link rel="match" href="underline_text-shadow-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u) {
+ font-family: sans-serif;
+ text-shadow: 0px 0px 5px #0f0;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_underline.vtt">
+</video>
+<script>
+document.getElementsByTagName('track')[0].track.mode = 'showing';
+</script>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_future-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_future-ref.html
new file mode 100644
index 0000000000..502104107a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_future-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, underline object transition with timestamp, ::cue(u:future) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ text-decoration: underline;
+ color: white;
+}
+.green {
+ text-decoration: underline;
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_future.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_future.html
new file mode 100644
index 0000000000..dff106cdbf
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_future.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, underline object transition with timestamp, ::cue(u:future) selector</title>
+<link rel="match" href="underline_timestamp_future-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u:future) {
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/underline_with_2_timestamps.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_past-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_past-ref.html
new file mode 100644
index 0000000000..7ab25929ba
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_past-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, underline object transition with timestamp, ::cue(u:past) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ text-decoration: underline;
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_past.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_past.html
new file mode 100644
index 0000000000..3ca96e8d4f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_past.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, underline object transition with timestamp, ::cue(u:past) selector</title>
+<link rel="match" href="underline_timestamp_past-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u:past) {
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/underline_with_timestamp.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_transition_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_transition_with_timestamp-ref.html
new file mode 100644
index 0000000000..97e2b1afc2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_transition_with_timestamp-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, underline object transition with timestamp, ::cue(u:past) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #80ff80;
+ text-decoration: underline;
+}
+</style>
+<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_transition_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_transition_with_timestamp.html
new file mode 100644
index 0000000000..7b34fa2f98
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_transition_with_timestamp.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, underline object transition with timestamp, ::cue(u:past) selector</title>
+<link rel="match" href="underline_transition_with_timestamp-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u) {
+ -o-transition: color 9s steps(2, start);
+ transition: color 9s steps(2, start);
+}
+::cue(u:past) {
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/underline_with_timestamp.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_normal_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_normal_wrapped-ref.html
new file mode 100644
index 0000000000..12563423a6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_normal_wrapped-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, underline object, ::cue(u), white-space: normal (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ text-decoration: underline;
+ white-space: normal
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_normal_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_normal_wrapped.html
new file mode 100644
index 0000000000..23cec2fb8f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_normal_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, voice object, ::cue(u), white-space: normal (cue that wraps)</title>
+<link rel="match" href="underline_white-space_normal_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u) {
+ white-space: normal
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/underline_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_nowrap-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_nowrap-ref.html
new file mode 100644
index 0000000000..7e813106a1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_nowrap-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, underline object, ::cue(u), white-space: nowrap (cue does not wrap)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative;
+ overflow: hidden;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ text-decoration: underline;
+ white-space: nowrap
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_nowrap.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_nowrap.html
new file mode 100644
index 0000000000..0b143f9d50
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_nowrap.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, underline object, ::cue(u), white-space: nowrap (cue does not wrap)</title>
+<link rel="match" href="underline_white-space_nowrap-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u) {
+ white-space: nowrap
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/underline_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-line_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-line_wrapped-ref.html
new file mode 100644
index 0000000000..227651700f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-line_wrapped-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, underline object, ::cue(u), white-space: pre-line (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ text-decoration: underline;
+ white-space: pre-line
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-line_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-line_wrapped.html
new file mode 100644
index 0000000000..cd1a7baff4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-line_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, underline object, ::cue(u), white-space: pre-line (cue that wraps)</title>
+<link rel="match" href="underline_white-space_pre-line_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u) {
+ white-space: pre-line
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/underline_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-wrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-wrap_wrapped-ref.html
new file mode 100644
index 0000000000..756a66fc17
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-wrap_wrapped-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, underline object, ::cue(u), white-space: pre-wrap (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ text-decoration: underline;
+ white-space: pre-wrap
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-wrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-wrap_wrapped.html
new file mode 100644
index 0000000000..c5971810da
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-wrap_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, underline object, ::cue(u), white-space: pre-wrap (cue that wraps)</title>
+<link rel="match" href="underline_white-space_pre-wrap_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u) {
+ white-space: pre-wrap
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/underline_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre_wrapped-ref.html
new file mode 100644
index 0000000000..8b9f12a4e0
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre_wrapped-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, underline object, ::cue(u), white-space: pre (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+ overflow: hidden;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ text-decoration: underline;
+ white-space: pre
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre_wrapped.html
new file mode 100644
index 0000000000..8857446242
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, underline object, ::cue(u), white-space: pre (cue that wraps)</title>
+<link rel="match" href="underline_white-space_pre_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u) {
+ white-space: pre
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/underline_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class-ref.html
new file mode 100644
index 0000000000..2af8b31774
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, underline object with class, ::cue(.foo) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <u>test subtitle</u>, <u class="green">test subtitle</u></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class.html
new file mode 100644
index 0000000000..12d73a9803
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, underline object with class, ::cue(.foo) selector</title>
+<link rel="match" href="underline_with_class-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(.foo) {
+ font-family: sans-serif;
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_underline_with_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class_object_specific_selector-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class_object_specific_selector-ref.html
new file mode 100644
index 0000000000..a2b9350bc4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class_object_specific_selector-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, underline object with class, ::cue(u.foo) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <u>test subtitle</u>, <u class="green">test subtitle</u></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class_object_specific_selector.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class_object_specific_selector.html
new file mode 100644
index 0000000000..52b3e0e859
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class_object_specific_selector.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, underline object with class, ::cue(u.foo) selector</title>
+<link rel="match" href="underline_with_class_object_specific_selector-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(u.foo) {
+ font-family: sans-serif;
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_underline_with_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp-ref.html
new file mode 100644
index 0000000000..7a8a94fecd
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, voice object animation with timestamp, ::cue(v:past) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #80ff80;
+ font-weight: bold;
+}
+</style>
+<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp.html
new file mode 100644
index 0000000000..09baf69c01
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, voice object animation with timestamp, ::cue(v:past) selector</title>
+<link rel="match" href="voice_animation_with_timestamp-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v:past) {
+ -o-animation: test 9s steps(2, start);
+ animation: test 9s steps(2, start);
+}
+@-o-keyframes test {
+ 0% {
+ color: #ffffff;
+ }
+ 100% {
+ color: #00ff00;
+ }
+}
+@keyframes test {
+ 0% {
+ color: #ffffff;
+ }
+ 100% {
+ color: #00ff00;
+ }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/voice_with_timestamp.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties-ref.html
new file mode 100644
index 0000000000..c45b7a550a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(v), background properties</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ background: #0f0 url('../../../media/background.gif') repeat-x top left;
+ color: #000;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties.html
new file mode 100644
index 0000000000..600915aa21
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(v), background properties</title>
+<link rel="match" href="voice_background_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v) {
+ font-family: sans-serif;
+ background-color: #0f0;
+ background-image: url('../../../media/background.gif');
+ background-repeat: repeat-x;
+ background-position: top left;
+ color: black;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_voice.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand-ref.html
new file mode 100644
index 0000000000..5766b54423
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(v), background shorthand</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ background: #0f0 url('../../../media/background.gif') repeat-x top left;
+ color: #000;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand.html
new file mode 100644
index 0000000000..aeae0c9e7b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(v), background shorthand</title>
+<link rel="match" href="voice_background_shorthand-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v) {
+ font-family: sans-serif;
+ background: #0f0 url('../../../media/background.gif') repeat-x top left;
+ color: #000;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_voice.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color-ref.html
new file mode 100644
index 0000000000..81919b22e2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(v), color: #0000ff</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ color: #0000ff;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color.html
new file mode 100644
index 0000000000..c72b2d531f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(v), color: #0000ff</title>
+<link rel="match" href="voice_color-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v) {
+ font-family: sans-serif;
+ color: #0000ff;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_voice.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties-ref.html
new file mode 100644
index 0000000000..4ed65ec581
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(v), font properties</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-family: sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ font: italic small-caps bold 9px/18px sans-serif;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties.html
new file mode 100644
index 0000000000..a8b691cac4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(v), font properties</title>
+<link rel="match" href="voice_font_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v) {
+ font-style: italic;
+ font-variant: small-caps;
+ font-weight: bold;
+ font-size: 9px;
+ line-height: 18px;
+ font-family: sans-serif;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_voice.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand-ref.html
new file mode 100644
index 0000000000..e2ca7e1839
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(v), font shorthand</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-family: sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ font: normal small-caps bold 9px/18px sans-serif;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand.html
new file mode 100644
index 0000000000..0b91ad1205
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(v), font shorthand</title>
+<link rel="match" href="voice_font_shorthand-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v) {
+ font: normal small-caps bold 9px/18px sans-serif;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_voice.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace-ref.html
new file mode 100644
index 0000000000..421789935c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(|v) should match</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+.green {
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace.html
new file mode 100644
index 0000000000..d379b52272
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(|v) should match</title>
+<link rel="match" href="voice_namespace-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ color: green;
+ font-family: Ahem, sans-serif
+}
+::cue(*|v) {
+ color: red
+}
+::cue(|v) {
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_voice.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties-ref.html
new file mode 100644
index 0000000000..da004b3abf
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(v), outline properties</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ display: inline-block;
+ margin-left: -2px;
+ margin-right: -2px;
+ border: solid #00f 2px;
+ border-bottom: none;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties.html
new file mode 100644
index 0000000000..f9b1dd2503
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(v), outline properties</title>
+<link rel="match" href="voice_outline_properties-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v) {
+ font-family: sans-serif;
+ outline-style: solid;
+ outline-color: #00f;
+ outline-width: 2px;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_voice.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand-ref.html
new file mode 100644
index 0000000000..b3b85edeae
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(v), outline shorthand</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ display: inline-block;
+ margin-left: -2px;
+ margin-right: -2px;
+ border: solid #00f 2px;
+ border-bottom: none;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand.html
new file mode 100644
index 0000000000..f60ca62c20
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(v), outline shorthand</title>
+<link rel="match" href="voice_outline_shorthand-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v) {
+ font-family: sans-serif;
+ outline: solid #00f 2px;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_voice.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through-ref.html
new file mode 100644
index 0000000000..3d43b6a5c5
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(v), text-decoration: line-through</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ text-decoration: line-through;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through.html
new file mode 100644
index 0000000000..dc52936c53
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(v), text-decoration: line-through</title>
+<link rel="match" href="voice_text-decoration_line-through-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v) {
+ font-family: sans-serif;
+ text-decoration: line-through;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_voice.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow-ref.html
new file mode 100644
index 0000000000..bd237e99cb
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(v), text-shadow</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ text-shadow: 0px 0px 5px #0f0;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow.html
new file mode 100644
index 0000000000..4599913eed
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(v), text-shadow</title>
+<link rel="match" href="voice_text-shadow-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v) {
+ font-family: sans-serif;
+ text-shadow: 0px 0px 5px #0f0;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_voice.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future-ref.html
new file mode 100644
index 0000000000..75239939c3
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, voice object transition with timestamp, ::cue(v:future) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future.html
new file mode 100644
index 0000000000..c66ad028a7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, voice object transition with timestamp, ::cue(v:future) selector</title>
+<link rel="match" href="voice_timestamp_future-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v:future) {
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/voice_with_2_timestamps.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past-ref.html
new file mode 100644
index 0000000000..c142ecacac
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, voice object transition with timestamp, ::cue(v:past) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past.html
new file mode 100644
index 0000000000..64c7b99f93
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, voice object transition with timestamp, ::cue(v:past) selector</title>
+<link rel="match" href="voice_timestamp_past-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v:past) {
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/voice_with_timestamp.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp-ref.html
new file mode 100644
index 0000000000..039034d9d7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, voice object transition with timestamp, ::cue(v:past) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #80ff80;
+}
+</style>
+<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp.html
new file mode 100644
index 0000000000..6eb8b1a82f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, voice object transition with timestamp, ::cue(v:past) selector</title>
+<link rel="match" href="voice_transition_with_timestamp-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v) {
+ -o-transition: color 9s steps(2, start);
+ transition: color 9s steps(2, start);
+}
+::cue(v:past) {
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/voice_with_timestamp.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute-ref.html
new file mode 100644
index 0000000000..c4a91ab892
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(v[voice="bar"])</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span>, <span class="green">test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute.html
new file mode 100644
index 0000000000..b9df455210
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(v[voice="bar"])</title>
+<link rel="match" href="voice_voice_attribute-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v[voice="bar"]) {
+ font-family: sans-serif;
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_two_voices.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped-ref.html
new file mode 100644
index 0000000000..ad67ecc03f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, voice object, ::cue(v), white-space: normal (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: normal
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped.html
new file mode 100644
index 0000000000..1ceea7b7ea
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, voice object, ::cue(v), white-space: normal (cue that wraps)</title>
+<link rel="match" href="voice_white-space_normal_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v) {
+ white-space: normal
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/voice_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap-ref.html
new file mode 100644
index 0000000000..1d682da289
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, voice object, ::cue(v), white-space: nowrap (cue does not wrap)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative;
+ overflow: hidden;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: nowrap
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap.html
new file mode 100644
index 0000000000..145a6bc3d9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, voice object, ::cue(v), white-space: nowrap (cue does not wrap)</title>
+<link rel="match" href="voice_white-space_nowrap-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v) {
+ white-space: nowrap
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/voice_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped-ref.html
new file mode 100644
index 0000000000..6ddaff8650
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, voice object, ::cue(v), white-space: pre-line (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: pre-line
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped.html
new file mode 100644
index 0000000000..6eb579774f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, voice object, ::cue(v), white-space: pre-line (cue that wraps)</title>
+<link rel="match" href="voice_white-space_pre-line_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v) {
+ white-space: pre-line
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/voice_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped-ref.html
new file mode 100644
index 0000000000..3822d83f2b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, voice object, ::cue(v), white-space: pre-wrap (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: pre-wrap
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped.html
new file mode 100644
index 0000000000..5058fb2d2b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, voice object, ::cue(v), white-space: pre-wrap (cue that wraps)</title>
+<link rel="match" href="voice_white-space_pre-wrap_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v) {
+ white-space: pre-wrap
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/voice_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped-ref.html
new file mode 100644
index 0000000000..5f32a25d3f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, voice object, ::cue(v), white-space: pre (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center;
+ overflow: hidden;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: pre
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped.html
new file mode 100644
index 0000000000..e6e01391f6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, voice object, ::cue(v), white-space: pre (cue that wraps)</title>
+<link rel="match" href="voice_white-space_pre_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v) {
+ white-space: pre
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/voice_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class-ref.html
new file mode 100644
index 0000000000..6090532837
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, voice object with class, ::cue(.foo) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span>, <span class="green">test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class.html
new file mode 100644
index 0000000000..c32f7edb05
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, voice object with class, ::cue(.foo) selector</title>
+<link rel="match" href="voice_with_class-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(.foo) {
+ font-family: sans-serif;
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_voice_with_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector-ref.html
new file mode 100644
index 0000000000..f6e9c19be9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, voice object with class, ::cue(v.foo) selector</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.green {
+ color: #00ff00;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span>, <span class="green">test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector.html
new file mode 100644
index 0000000000..dbff16d122
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, voice object with class, ::cue(v.foo) selector</title>
+<link rel="match" href="voice_with_class_object_specific_selector-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(v.foo) {
+ font-family: sans-serif;
+ color: #00ff00;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../../support/test_voice_with_class.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_normal_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_normal_wrapped-ref.html
new file mode 100644
index 0000000000..b4f797d3b9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_normal_wrapped-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), white-space: normal (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 40%;
+ right: 0;
+ width: 20%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: normal
+}
+</style>
+<div class="video"><span class="cue"><span>foo bar baz</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_normal_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_normal_wrapped.html
new file mode 100644
index 0000000000..ae9ef6d89f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_normal_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), white-space: normal (cue that wraps)</title>
+<link rel="match" href="white-space_normal_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ white-space: normal
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/foo_space_space_bar_LF_baz.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_nowrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_nowrap_wrapped-ref.html
new file mode 100644
index 0000000000..901257b613
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_nowrap_wrapped-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), white-space: nowrap (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 40%;
+ right: 0;
+ width: 20%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: nowrap
+}
+</style>
+<div class="video"><span class="cue"><span>A A A A A A A A A A A</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_nowrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_nowrap_wrapped.html
new file mode 100644
index 0000000000..ab3217fd66
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_nowrap_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), white-space: nowrap (cue that wraps)</title>
+<link rel="match" href="white-space_nowrap_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ white-space: nowrap
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/white-spaces_long_size_20.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-line_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-line_wrapped-ref.html
new file mode 100644
index 0000000000..4b80518475
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-line_wrapped-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), white-space: pre-line (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 40%;
+ right: 0;
+ width: 20%;
+ text-align: center;
+}
+.cue > span {
+ font-family: sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: normal
+}
+</style>
+<div class="video"><span class="cue"><span>A A A A A A<br> A A A A A</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-line_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-line_wrapped.html
new file mode 100644
index 0000000000..f075dfe825
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-line_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), white-space: pre-line (cue that wraps)</title>
+<link rel="match" href="white-space_pre-line_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ white-space: pre-line
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/white-spaces_long_size_20.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-ref.html
new file mode 100644
index 0000000000..d21f199bed
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), white-space: pre</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-family: sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: pre
+}
+</style>
+<div class="video"><span class="cue"><span>A A A A A A</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-wrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-wrap_wrapped-ref.html
new file mode 100644
index 0000000000..8e9e33d569
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-wrap_wrapped-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), white-space: pre-wrap (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 30%;
+ right: 0;
+ width: 40%;
+ font-family: sans-serif;
+ text-align: center;
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: pre
+}
+</style>
+<div class="video"><span class="cue"><span>A A A A A <br> A <br>A A A A A</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-wrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-wrap_wrapped.html
new file mode 100644
index 0000000000..866ca52bc8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-wrap_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), white-space: pre-wrap (cue that wraps)</title>
+<link rel="match" href="white-space_pre-wrap_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ white-space: pre-wrap
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/white-spaces_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre.html
new file mode 100644
index 0000000000..3da234358b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), white-space: pre</title>
+<link rel="match" href="white-space_pre-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ white-space: pre
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/white-spaces.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre_wrapped-ref.html
new file mode 100644
index 0000000000..394549b1d8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre_wrapped-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, ::cue(), white-space: pre (cue that wraps)</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ font-size: 9px;
+ position: relative
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 30%;
+ right: 0;
+ width: 40%;
+ font-family: sans-serif;
+ text-align: center;
+ overflow: hidden;
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+ white-space: pre
+}
+</style>
+<div class="video"><span class="cue"><span>A A A A A A A A A A A</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre_wrapped.html
new file mode 100644
index 0000000000..5432de4973
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre_wrapped.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, ::cue(), white-space: pre (cue that wraps)</title>
+<link rel="match" href="white-space_pre_wrapped-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue(*) {
+ white-space: pre
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/white-spaces_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/bold_object_default_font-style-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/bold_object_default_font-style-ref.html
new file mode 100644
index 0000000000..fa388608e5
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/bold_object_default_font-style-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, default style, bold objects</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-family: sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ font-weight: bold;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/bold_object_default_font-style.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/bold_object_default_font-style.html
new file mode 100644
index 0000000000..31a8fad06f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/bold_object_default_font-style.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, default style, bold objects</title>
+<link rel="match" href="bold_object_default_font-style-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test_bold.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/inherit_as_default_value_inherits_values_from_media_element-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/inherit_as_default_value_inherits_values_from_media_element-ref.html
new file mode 100644
index 0000000000..2fb094846f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/inherit_as_default_value_inherits_values_from_media_element-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, only css properties with default value inherit should inherit from media element</title>
+<style>
+.video {
+ position: absolute;
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ color: #f0f;
+ white-space: pre-line;
+ font: italic small-caps bold 9px/18px sans-serif;
+ text-shadow: 0px 0px 5px #0f0;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ outline: solid #00f 2px;
+ font-size: 9px;
+}
+.videoWhite {
+ position: absolute;
+ top: 0;
+ left: 160px;
+ width: 960px;
+ height: 180px;;
+ background: #fff;
+ z-index: 1;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 30%;
+ right: 0;
+ width: 40%;
+ text-align: center;
+ z-index: 2
+}
+.cue > span {
+ background-color: rgba(0,0,0,0.8);
+ color: #fff;
+}
+</style>
+<div class="video"><div class="videoWhite"></div><span class="cue"><span>A A A A A A A A A A A</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/inherit_as_default_value_inherits_values_from_media_element.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/inherit_as_default_value_inherits_values_from_media_element.html
new file mode 100644
index 0000000000..e5ed5916e7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/inherit_as_default_value_inherits_values_from_media_element.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, only css properties with default value inherit should inherit from media element</title>
+<link rel="match" href="inherit_as_default_value_inherits_values_from_media_element-ref.html">
+<style>
+video {
+ color: #f0f;
+ white-space: pre-wrap;
+ font: italic small-caps bold 9px/18px sans-serif;
+ text-decoration: overline underline line-through;
+ text-shadow: 0px 0px 5px #0f0;
+ background: #0f0 url('../../media/background.gif') repeat-x top left;
+ outline: solid #00f 2px;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/white-spaces_long.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/italic_object_default_font-style-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/italic_object_default_font-style-ref.html
new file mode 100644
index 0000000000..76b85bb98f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/italic_object_default_font-style-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, default style, italic objects</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-family: sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ font-style: italic;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/italic_object_default_font-style.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/italic_object_default_font-style.html
new file mode 100644
index 0000000000..b48f181e4f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/italic_object_default_font-style.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, default style, italic objects</title>
+<link rel="match" href="italic_object_default_font-style-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test_italic.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/underline_object_default_font-style-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/underline_object_default_font-style-ref.html
new file mode 100644
index 0000000000..3769a49d65
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/underline_object_default_font-style-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, default style, underline objects</title>
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-family: sans-serif;
+ text-align: center
+}
+.cue > span {
+ background: rgba(0,0,0,0.8);
+ color: white;
+}
+.cue > span > span {
+ text-decoration: underline;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/underline_object_default_font-style.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/underline_object_default_font-style.html
new file mode 100644
index 0000000000..8077065173
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/underline_object_default_font-style.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, default style, underline objects</title>
+<link rel="match" href="underline_object_default_font-style-ref.html">
+<style>
+html { overflow:hidden }
+body { margin:0 }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="../../support/test_underline.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/size_50-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/size_50-ref.html
new file mode 100644
index 0000000000..24ac13d9dc
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/size_50-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, size:50%</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+ font-size: 9px;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ right: 0;
+ width: 50%;
+ text-align: center
+}
+.cue > span {
+ font-family: Ahem, sans-serif;
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video"><span class="cue"><span>This is a test subtitle that should wrap</span></span></div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/size_50.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/size_50.html
new file mode 100644
index 0000000000..6dc019754d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/size_50.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, size:50%</title>
+<link rel="match" href="size_50-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font-family: Ahem, sans-serif;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/size_50.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/snap-to-line-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/snap-to-line-ref.html
new file mode 100644
index 0000000000..bcd2dd2942
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/snap-to-line-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, set explicit 'line' and 'position', which will force 'snap-to-line' to false</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+}
+.cue {
+ position: absolute;
+ top: 90px;
+ left: 160px;
+ text-align: center;
+ font: 20px/1 Ahem;
+}
+.cueText {
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class=video>
+ <div class="cue">
+ <span class="cueText">foo</span>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/snap-to-line.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/snap-to-line.html
new file mode 100644
index 0000000000..f3705a1879
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/snap-to-line.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, set explicit 'line' and 'position', which will force 'snap-to-line' to false</title>
+<link rel="match" href="snap-to-line-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font: 20px/1 Ahem;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/snap-to-line.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_completely_move_up.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_completely_move_up.vtt
new file mode 100644
index 0000000000..1ca56e56f6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_completely_move_up.vtt
@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 line:100%
+This is a test subtitle
+
+00:00:01.000 --> 00:00:05.000 line:100%
+This is another test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_partially_move_down.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_partially_move_down.vtt
new file mode 100644
index 0000000000..227e7db6e4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_partially_move_down.vtt
@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 line:50%
+This is a test subtitle
+
+00:00:01.000 --> 00:00:05.000 line:52%
+This is another test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_partially_move_up.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_partially_move_up.vtt
new file mode 100644
index 0000000000..7160f3791e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_partially_move_up.vtt
@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 line:100%
+This is a test subtitle
+
+00:00:01.000 --> 00:00:05.000 line:99%
+This is another test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center.vtt
new file mode 100644
index 0000000000..4b8e14b28b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 align:center
+This is a test
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_long.vtt
new file mode 100644
index 0000000000..57c896d04b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_long.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 align:center
+This is a test subtitle that most likely will span over several rows since it is a pretty long cue with a lot of text.
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_50.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_50.vtt
new file mode 100644
index 0000000000..21ab82bb08
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_50.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 align:center position:50%
+This is a test
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_gt_50.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_gt_50.vtt
new file mode 100644
index 0000000000..69fd3e00d9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_gt_50.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 align:center position:90%
+foo
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_gt_50_size_gt_maximum_size.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_gt_50_size_gt_maximum_size.vtt
new file mode 100644
index 0000000000..50e80cc3e1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_gt_50_size_gt_maximum_size.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 align:center position:90% size:75%
+Awesome!!!
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_lt_50.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_lt_50.vtt
new file mode 100644
index 0000000000..86f8c37ec5
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_lt_50.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 align:center position:10%
+foo
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_lt_50_size_gt_maximum_size.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_lt_50_size_gt_maximum_size.vtt
new file mode 100644
index 0000000000..a2e307c9cb
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_lt_50_size_gt_maximum_size.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 align:center position:10% size:75%
+Awesome!!!
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_end.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_end.vtt
new file mode 100644
index 0000000000..83f691e6ff
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_end.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 align:end
+This is a test
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_end_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_end_long.vtt
new file mode 100644
index 0000000000..09ace0d227
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_end_long.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 align:end
+This is a test subtitle that most likely will span over several rows since it is a pretty long cue with a lot of text.
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_start.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_start.vtt
new file mode 100644
index 0000000000..161c457465
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_start.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 align:start
+This is a test
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_start_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_start_long.vtt
new file mode 100644
index 0000000000..c70ac13eaf
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_start_long.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 align:start
+This is a test subtitle that most likely will span over several rows since it is a pretty long cue with a lot of text.
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_ruby.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_ruby.vtt
new file mode 100644
index 0000000000..19e6745016
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_ruby.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+<ruby>.<rt>א<c>א</c></rt>ab)<rt>x</rt></ruby>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_text-combine-upright.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_text-combine-upright.vtt
new file mode 100644
index 0000000000..e3c9914387
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_text-combine-upright.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 vertical:lr
+平成20年4月16日に
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_lr.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_lr.vtt
new file mode 100644
index 0000000000..e991973ab4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_lr.vtt
@@ -0,0 +1,5 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 vertical:lr
+<ruby>左<rt>ひだり</rt></ruby>に<ruby> 見<rt>み</rt></ruby>えるのは...
+二行目
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_rl-oneline.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_rl-oneline.vtt
new file mode 100644
index 0000000000..30297e1b4f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_rl-oneline.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 vertical:rl
+<ruby>右<rt>みぎ</rt></ruby>に<ruby> 見<rt>み</rt></ruby>えるのは...
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_rl.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_rl.vtt
new file mode 100644
index 0000000000..56fcbd412a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_rl.vtt
@@ -0,0 +1,5 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 vertical:rl
+<ruby>右<rt>みぎ</rt></ruby>に<ruby> 見<rt>み</rt></ruby>えるのは...
+二行目
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_long.vtt
new file mode 100644
index 0000000000..c452682e4c
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_long.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 size:50%
+<b>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</b>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_with_2_timestamps.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_with_2_timestamps.vtt
new file mode 100644
index 0000000000..53508f991f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_with_2_timestamps.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000
+<00:00.000><b>This is a </b><00:05.000><b>test subtitle</b>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_with_timestamp.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_with_timestamp.vtt
new file mode 100644
index 0000000000..85474b1b95
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_with_timestamp.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000
+<00:00.000><b>This is a test subtitle</b><00:00.001>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_long.vtt
new file mode 100644
index 0000000000..a551d67743
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_long.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 size:50%
+<c>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</c>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_text-combine-upright.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_text-combine-upright.vtt
new file mode 100644
index 0000000000..064f75ad9e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_text-combine-upright.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 vertical:lr
+平成<c.combine>20</c>年4月<c.combine>16</c>日に
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_with_2_timestamps.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_with_2_timestamps.vtt
new file mode 100644
index 0000000000..d95f760257
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_with_2_timestamps.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000
+<00:00.000><c>This is a </c><00:05.000><c>test subtitle</c>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_with_timestamp.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_with_timestamp.vtt
new file mode 100644
index 0000000000..2e328ab9b7
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_with_timestamp.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000
+<00:00.000><c>This is a test subtitle</c><00:00.001>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/cue_with_id.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/cue_with_id.vtt
new file mode 100644
index 0000000000..3a8a88cf73
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/cue_with_id.vtt
@@ -0,0 +1,5 @@
+WEBVTT
+
+foo
+00:00:00.000 --> 00:00:05.000
+This is a test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/decode_escaped_entities.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/decode_escaped_entities.vtt
new file mode 100644
index 0000000000..36373d2e20
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/decode_escaped_entities.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+Here are the escaped entities: &amp; &lt; &gt; &lrm; &rlm; &nbsp;
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority.vtt
new file mode 100644
index 0000000000..9471b32be1
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority.vtt
@@ -0,0 +1,25 @@
+WEBVTT
+
+NOTE
+opacity: 0.5; should apply.
+color: green; should apply.
+background: green; should apply because multiple STYLE blocks are supported.
+
+STYLE
+::cue {
+ opacity: 0.5;
+}
+::cue {
+ color: green;
+}
+
+STYLE
+::cue {
+ background: green;
+}
+
+00:00:00.000 --> 00:00:05.000
+<v Voice1>This <i>is</i> a <b>test</b> subtitle
+
+00:00:00.000 --> 00:00:05.000
+<v Voice2>Here <i>is</i> a <b>second</b> subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority_layer.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority_layer.vtt
new file mode 100644
index 0000000000..c0f6cd8821
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority_layer.vtt
@@ -0,0 +1,25 @@
+WEBVTT
+
+NOTE
+opacity: 0.5; should apply.
+color: green; should apply.
+background: green; should apply because multiple STYLE blocks are supported.
+
+STYLE
+::cue {
+ opacity: 0.5;
+}
+::cue {
+ color: green !important;
+}
+
+STYLE
+::cue {
+ background: green;
+}
+
+00:00:00.000 --> 00:00:05.000
+<v Voice1>This <i>is</i> a <b>test</b> subtitle
+
+00:00:00.000 --> 00:00:05.000
+<v Voice2>Here <i>is</i> a <b>second</b> subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_imports_blocked.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_imports_blocked.vtt
new file mode 100644
index 0000000000..11a84af029
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_imports_blocked.vtt
@@ -0,0 +1,14 @@
+WEBVTT
+
+NOTE
+@import rules are prohibited in WebVTT files.
+
+STYLE
+@import "imported_style.css"
+@import url("imported_style.css")
+
+00:00:00.000 --> 00:00:05.000
+<v Voice1>This <i>is</i> a <b>test</b> subtitle
+
+00:00:00.000 --> 00:00:05.000
+<v Voice2>Here <i>is</i> a <b>second</b> subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_invalid_format.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_invalid_format.vtt
new file mode 100644
index 0000000000..51c231a0f8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_invalid_format.vtt
@@ -0,0 +1,79 @@
+WEBVTT
+
+NOTE
+Only color: green; and the green background-image should apply. All other style blocks are invalid.
+
+::cue {
+ background: red;
+}
+
+STYLE
+
+::cue {
+ background: red;
+}
+
+STYLE
+::cue(v[voice=Voice1])
+{
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==
+
+STYLE
+::cue {
+ back
+
+STYLE
+ground: red;
+}
+
+STYLE
+::cue {
+ color: green;
+}
+
+S T Y L E
+::cue {
+ background: red;
+}
+
+ STYLE
+::cue {
+ background: red;
+}
+
+STYLE {
+::cue {
+ background: red;
+}
+}
+
+::cue {
+ background: red;
+}
+
+STYLE Invalid
+::cue {
+ background: red;
+}
+
+style
+::cue {
+ background: red;
+}
+
+STYLE
+<!--::cue {-->
+ background: red;
+}
+
+STYLE
+00:00:00.000 --> 00:00:05.000
+<v Voice1>This <i>is</i> a <b>test</b> subtitle
+
+STYLE
+::cue {
+ background: red;
+}
+
+00:00:00.000 --> 00:00:05.000
+<v Voice2>Here <i>is</i> a <b>second</b> subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe-ref.html
new file mode 100644
index 0000000000..f08a607e69
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Reference for Embedded Style: Media Queries</title>
+<style>
+video {
+ outline: solid;
+ width: 320px;
+ height: 240px;
+}
+::cue {
+ color: green;
+}
+</style>
+<video autoplay onplaying="this.onplaying = null; this.pause();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="embedded_style_without_style.vtt" default>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe.html
new file mode 100644
index 0000000000..e27ca60474
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Embedded Style: Media Queries</title>
+<style>
+video {
+ outline: solid;
+ width: 320px;
+ height: 240px;
+}
+</style>
+<video autoplay onplaying="this.onplaying = null; this.pause();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="embedded_style_media_queries.vtt" default>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries.vtt
new file mode 100644
index 0000000000..1b875cdd53
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries.vtt
@@ -0,0 +1,34 @@
+WEBVTT
+NOTE
+color: red; should not apply because it is overriden by color: green.
+color: green; should apply because the screen width is less than 1000px.
+background: green; should only apply in the resized test case where the screen is resized to 300px.
+background: red; should not apply because the screen width is greater than 100px.
+STYLE
+::cue
+{
+ color: red;
+}
+@media only screen and (max-height: 1000px) {
+ ::cue
+ {
+ color: green;
+ }
+}
+@media only screen and (max-height: 400px) {
+ ::cue
+ {
+ background: green;
+ }
+}
+}
+@media only screen and (max-height: 100px) {
+ ::cue
+ {
+ background: red;
+ }
+}
+00:00:00.000 --> 00:00:05.000
+<v Voice1>This <i>is</i> a <b>test</b> subtitle
+00:00:00.000 --> 00:00:05.000
+<v Voice2>Here <i>is</i> a <b>second</b> subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe-ref.html
new file mode 100644
index 0000000000..ab7553e2fc
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>Reference for Embedded Style: Media Queries Resize Frame</title>
+<style>
+video {
+ outline: solid;
+ width: 320px;
+ height: 240px;
+}
+::cue {
+ color: green;
+ background: green;
+}
+</style>
+<video autoplay onplaying="this.onplaying = null; this.pause();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="embedded_style_without_style.vtt" default>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe.html
new file mode 100644
index 0000000000..f4bfeeaca3
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Embedded Style: Media Queries Resize Frame</title>
+<style>
+video {
+ outline: solid;
+ width: 320px;
+ height: 240px;
+}
+</style>
+<video autoplay onplaying="this.onplaying = null; this.pause();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="embedded_style_media_queries.vtt" default>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks1.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks1.vtt
new file mode 100644
index 0000000000..a756c3c06d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks1.vtt
@@ -0,0 +1,12 @@
+WEBVTT
+
+NOTE
+The style in this file should not apply to cues from other text tracks.
+
+STYLE
+::cue {
+ color: green;
+}
+
+00:00:00.000 --> 00:00:05.000
+This <i>is</i> a <b>test</b> subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks2.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks2.vtt
new file mode 100644
index 0000000000..c13757d570
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks2.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+Here <i>is</i> a <b>second</b> subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_selectors.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_selectors.vtt
new file mode 100644
index 0000000000..51377255aa
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_selectors.vtt
@@ -0,0 +1,54 @@
+WEBVTT
+NOTE
+The first six selectors should apply. The rest should not apply because they do
+not apply to a hypothetical document with a single empty element with no explicit
+name, no namespace, no attribute, no classes, no IDs, and unknown primary language
+that acts as the originating element for the cue pseudo-elements.
+STYLE
+@namespace html url(http://www.w3.org/1999/xhtml);
+:not(video)::cue {
+ background: lime;
+}
+*|*::cue(b) {
+ background: green;
+}
+|*::cue(i) {
+ color: green;
+}
+::cue(i) {
+ background: green;
+}
+*::cue(b) {
+ color: green;
+}
+::cue {
+ font-size: 11px;
+}
+video::cue {
+ background: red;
+}
+:not(|*)::cue {
+ background: red;
+}
+i {
+ color: red;
+}
+* {
+ color: red;
+}
+* ::cue(i) {
+ color: red;
+}
+* > *::cue(i) {
+ color: red;
+}
+* + *::cue(i) {
+ color: red;
+}
+html|*::cue(i) {
+ color: red;
+}
+00:00:00.000 --> 00:00:05.000
+<v Voice1>This <i>is</i> a <b>test</b> subtitle
+00:00:00.000 --> 00:00:05.000
+<v Voice2>Here <i>is</i> a <b>second</b> subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_urls.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_urls.vtt
new file mode 100644
index 0000000000..db526deb86
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_urls.vtt
@@ -0,0 +1,21 @@
+WEBVTT
+NOTE
+Background for Voice1 should apply.
+The other two backgrounds should not render because non-data URLs are not supported.
+STYLE
+::cue(v[voice=Voice1])
+{
+ background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
+}
+::cue(b)
+{
+ background: url("support/background.png")
+}
+::cue(i) {
+ background: url("support/background.png");
+ background: -webkit-image-set(url("support/background.png") 1x, url("support/background.png") 2x);
+}
+00:00:00.000 --> 00:00:05.000
+<v Voice1>This <i>is</i> a <b>test</b> subtitle
+00:00:00.000 --> 00:00:05.000
+<v Voice2>Here <i>is</i> a <b>second</b> subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_without_style.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_without_style.vtt
new file mode 100644
index 0000000000..321a094fda
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_without_style.vtt
@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+<v Voice1>This <i>is</i> a <b>test</b> subtitle
+
+00:00:00.000 --> 00:00:05.000
+<v Voice2>Here <i>is</i> a <b>second</b> subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo.vtt
new file mode 100644
index 0000000000..b533895c60
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+Foo
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo_c_bar.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo_c_bar.vtt
new file mode 100644
index 0000000000..325df1e509
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo_c_bar.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+Foo<c>bar</c>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo_space_space_bar_LF_baz.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo_space_space_bar_LF_baz.vtt
new file mode 100644
index 0000000000..047d80eddf
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo_space_space_bar_LF_baz.vtt
@@ -0,0 +1,5 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+foo bar
+baz
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/imported_style.css b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/imported_style.css
new file mode 100644
index 0000000000..391dd7407f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/imported_style.css
@@ -0,0 +1,3 @@
+::cue {
+ color: red;
+}
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_long.vtt
new file mode 100644
index 0000000000..75cbd1e6ef
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_long.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 size:50%
+<i>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</i>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_with_2_timestamps.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_with_2_timestamps.vtt
new file mode 100644
index 0000000000..d239c4ee24
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_with_2_timestamps.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000
+<00:00.000><i>This is a </i><00:05.000><i>test subtitle</i>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_with_timestamp.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_with_timestamp.vtt
new file mode 100644
index 0000000000..94b03a2077
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_with_timestamp.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000
+<00:00.000><i>This is a test subtitle</i><00:00.001>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_-2_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_-2_long.vtt
new file mode 100644
index 0000000000..0f366c18cc
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_-2_long.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 line:-2 size:50%
+This is a test subtitle that will line break
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_0.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_0.vtt
new file mode 100644
index 0000000000..18d2bd46ae
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_0.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 line:0
+This is a test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_1_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_1_long.vtt
new file mode 100644
index 0000000000..414c9de391
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_1_long.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 line:1 size:50%
+This is a test subtitle that will line break
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_50_percent.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_50_percent.vtt
new file mode 100644
index 0000000000..acf612c44f
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_50_percent.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 line:50%
+This is a test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_integer_and_percent_overlap.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_integer_and_percent_overlap.vtt
new file mode 100644
index 0000000000..6a1326e941
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_integer_and_percent_overlap.vtt
@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000 line:9
+This is a test subtitle
+
+00:00:00.000 --> 00:00:10.000 line:50%
+This is another test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_integer_and_percent_overlap_move_up.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_integer_and_percent_overlap_move_up.vtt
new file mode 100644
index 0000000000..819f8e2a21
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_integer_and_percent_overlap_move_up.vtt
@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000 line:10
+This is a test subtitle
+
+00:00:00.000 --> 00:00:10.000 line:48%
+This is another test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_percent_and_integer_overlap.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_percent_and_integer_overlap.vtt
new file mode 100644
index 0000000000..47819a0510
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_percent_and_integer_overlap.vtt
@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000 line:45%
+This is a test subtitle
+
+00:00:00.000 --> 00:00:10.000 line:9
+This is another test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_percent_and_integer_overlap_move_up.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_percent_and_integer_overlap_move_up.vtt
new file mode 100644
index 0000000000..1a7bd7fed5
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_percent_and_integer_overlap_move_up.vtt
@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000 line:55%
+This is a test subtitle
+
+00:00:00.000 --> 00:00:10.000 line:10
+This is another test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/one_line_cue_plus_wrapped_cue.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/one_line_cue_plus_wrapped_cue.vtt
new file mode 100644
index 0000000000..b9b3fecf6d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/one_line_cue_plus_wrapped_cue.vtt
@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000 size:70%
+This is a test subtitle
+
+00:00:00.000 --> 00:00:10.000 size:70%
+This test subtitle wraps and should be visible
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/size_50.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/size_50.vtt
new file mode 100644
index 0000000000..b165af1533
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/size_50.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 size:50%
+This is a test subtitle that should wrap
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/snap-to-line.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/snap-to-line.vtt
new file mode 100644
index 0000000000..2d102812ee
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/snap-to-line.vtt
@@ -0,0 +1,5 @@
+WEBVTT
+
+NOTE set line as percentage would make 'snap-to-line' to false
+00:00:00.000 --> 00:00:05.000 align:start position:50%,line-left line:50%,start
+foo
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/start_alignment.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/start_alignment.vtt
new file mode 100644
index 0000000000..9a92729381
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/start_alignment.vtt
@@ -0,0 +1,5 @@
+WEBVTT FILE
+
+00:00:00.000 --> 00:00:10.000 align:start line:0
+Hello!
+שלום!
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test.vtt
new file mode 100644
index 0000000000..ab71ec5984
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+This is a test subtitle
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_bold.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_bold.vtt
new file mode 100644
index 0000000000..5709f4dd30
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_bold.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+This is a <b>test subtitle</b>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_bold_with_class.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_bold_with_class.vtt
new file mode 100644
index 0000000000..1eebeea5cb
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_bold_with_class.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+This is a <b>test subtitle</b>, <b.foo>test subtitle</b>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_class.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_class.vtt
new file mode 100644
index 0000000000..8ee08aada4
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_class.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+This is a <c>test subtitle</c>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_class_with_class.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_class_with_class.vtt
new file mode 100644
index 0000000000..c17abc9c95
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_class_with_class.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+This is a <c>test subtitle</c>, <c.foo>test subtitle</c>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_italic.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_italic.vtt
new file mode 100644
index 0000000000..11c2c81deb
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_italic.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+This is a <i>test subtitle</i>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_italic_with_class.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_italic_with_class.vtt
new file mode 100644
index 0000000000..a2255d000a
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_italic_with_class.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+This is a <i>test subtitle</i>, <i.foo>test subtitle</i>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_long.vtt
new file mode 100644
index 0000000000..826ec1de17
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_long.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_two_voices.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_two_voices.vtt
new file mode 100644
index 0000000000..c41fe2e169
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_two_voices.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+This is a <v foo>test subtitle</v>, <v bar>test subtitle</v>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_underline.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_underline.vtt
new file mode 100644
index 0000000000..8b1f02183d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_underline.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+This is a <u>test subtitle</u>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_underline_with_class.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_underline_with_class.vtt
new file mode 100644
index 0000000000..7894c87e00
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_underline_with_class.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+This is a <u>test subtitle</u>, <u.foo>test subtitle</u>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_voice.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_voice.vtt
new file mode 100644
index 0000000000..3e25cff699
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_voice.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+This is a <v foo>test subtitle</v>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_voice_with_class.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_voice_with_class.vtt
new file mode 100644
index 0000000000..8f1f37581b
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_voice_with_class.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+This is a <v foo>test subtitle</v>, <v.foo>test subtitle</v>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues.vtt
new file mode 100644
index 0000000000..9ab0f0f450
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues.vtt
@@ -0,0 +1,31 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000
+This is a test
+
+00:00:00.000 --> 00:00:10.000
+This is a test
+
+00:00:00.000 --> 00:00:10.000
+This is a test
+
+00:00:00.000 --> 00:00:10.000
+This is a test
+
+00:00:00.000 --> 00:00:10.000
+This is a test
+
+00:00:00.000 --> 00:00:10.000
+This is a test
+
+00:00:00.000 --> 00:00:10.000
+This is a test
+
+00:00:00.000 --> 00:00:10.000
+This is a test
+
+00:00:00.000 --> 00:00:10.000
+This is a test
+
+00:00:00.000 --> 00:00:10.000
+This text won't be shown in the screen
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues_wrapped.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues_wrapped.vtt
new file mode 100644
index 0000000000..1617b60f54
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues_wrapped.vtt
@@ -0,0 +1,28 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000
+This is a test
+
+00:00:00.000 --> 00:00:10.000
+This is a test
+
+00:00:00.000 --> 00:00:10.000
+This is a test
+
+00:00:00.000 --> 00:00:10.000
+This is a test
+
+00:00:00.000 --> 00:00:10.000
+This is a test
+
+00:00:00.000 --> 00:00:10.000
+This is a test
+
+00:00:00.000 --> 00:00:10.000
+This is a test
+
+00:00:00.000 --> 00:00:10.000
+This is a test
+
+00:00:00.000 --> 00:00:10.000 size:70%
+This is a test subtitle that wraps and the part after the first subtitle should be cut out
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_LF_u05D0.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_LF_u05D0.vtt
new file mode 100644
index 0000000000..24cd29be66
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_LF_u05D0.vtt
@@ -0,0 +1,5 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+.
+אab)
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_u2028_u05D0.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_u2028_u05D0.vtt
new file mode 100644
index 0000000000..9367a095a0
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_u2028_u05D0.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+.
אab)
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_u2029_u05D0.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_u2029_u05D0.vtt
new file mode 100644
index 0000000000..81d21a453e
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_u2029_u05D0.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+.
אab)
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u0041_first.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u0041_first.vtt
new file mode 100644
index 0000000000..19dc55c452
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u0041_first.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+Aab)
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u05D0_first.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u05D0_first.vtt
new file mode 100644
index 0000000000..fdc74bf4fa
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u05D0_first.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+אab)
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u0628_first.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u0628_first.vtt
new file mode 100644
index 0000000000..a0b953d6c9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u0628_first.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+بab)
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u06E9_no_strong_dir.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u06E9_no_strong_dir.vtt
new file mode 100644
index 0000000000..f097151567
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u06E9_no_strong_dir.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+۩)
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_long.vtt
new file mode 100644
index 0000000000..7f4ee28405
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_long.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 size:50%
+<u>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</u>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_with_2_timestamps.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_with_2_timestamps.vtt
new file mode 100644
index 0000000000..54905bfb76
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_with_2_timestamps.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000
+<00:00.000><u>This is a </u><00:05.000><u>test subtitle</u>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_with_timestamp.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_with_timestamp.vtt
new file mode 100644
index 0000000000..e6d942b962
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_with_timestamp.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000
+<00:00.000><u>This is a test subtitle</u><00:00.001>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/very_long_cue.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/very_long_cue.vtt
new file mode 100644
index 0000000000..fa1aad85c5
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/very_long_cue.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000 size:50%
+This is a test subtitle that should wrap several times and become so long that exceeds the video rendering area. In this situation, the cue won't be showed in the screen. This is a test subtitle that should wrap several times and become so long that exceeds the video rendering area. In this situation, the cue won't be showed in the screen. This is a test subtitle that should wrap several times and become so long that exceeds the video rendering area. In this situation, the cue won't be showed in the screen. This is a test subtitle that should wrap several times and become so long that exceeds the video rendering area. In this situation, the cue won't be showed in the screen. This is a test subtitle that should wrap several times and become so long that exceeds the video rendering area. In this situation, the cue won't be showed in the screen. This is a test subtitle that should wrap several times and become so long that exceeds the video rendering area. In this situation, the cue won't be showed in the screen.
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_long.vtt
new file mode 100644
index 0000000000..1a443df099
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_long.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 size:50%
+<v foo>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</v>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_with_2_timestamps.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_with_2_timestamps.vtt
new file mode 100644
index 0000000000..b5d2089fb6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_with_2_timestamps.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000
+<00:00.000><v>This is a </v><00:05.000><v>test subtitle</v>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_with_timestamp.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_with_timestamp.vtt
new file mode 100644
index 0000000000..99f4937705
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_with_timestamp.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000
+<00:00.000><v>This is a test subtitle</v><00:00.001>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces.vtt
new file mode 100644
index 0000000000..99b772ffd9
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+A A A A A A
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces_long.vtt
new file mode 100644
index 0000000000..5352212393
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces_long.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 size:40%
+A A A A A A A A A A A
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces_long_size_20.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces_long_size_20.vtt
new file mode 100644
index 0000000000..7807ca32a2
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces_long_size_20.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 size:20%
+A A A A A A A A A A A
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues-ref.html
new file mode 100644
index 0000000000..f3ba001630
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, too many cues - cues that cannot fit should not be shown</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+ font: 20px/1 Ahem;
+}
+.cueText {
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video">
+ <span class="cue">
+ <div><span class="cueText">This is a test</span></div>
+ <div><span class="cueText">This is a test</span></div>
+ <div><span class="cueText">This is a test</span></div>
+ <div><span class="cueText">This is a test</span></div>
+ <div><span class="cueText">This is a test</span></div>
+ <div><span class="cueText">This is a test</span></div>
+ <div><span class="cueText">This is a test</span></div>
+ <div><span class="cueText">This is a test</span></div>
+ <div><span class="cueText">This is a test</span></div>
+ </span>
+</div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues.html
new file mode 100644
index 0000000000..724581fa50
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, too many cues - cues that cannot fit should not be shown</title>
+<link rel="match" href="too_many_cues-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font: 20px/1 Ahem;
+ color: green;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/too_many_cues.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped-ref.html
new file mode 100644
index 0000000000..24bc5271d8
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>Reference for WebVTT rendering, too many cues (wrapped) - cues that cannot fit should not be shown</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+.video {
+ display: inline-block;
+ width: 320px;
+ height: 180px;
+ position: relative;
+}
+.cue {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+ font: 20px/1 Ahem;
+}
+.cueText {
+ background: rgba(0,0,0,0.8);
+ color: green;
+}
+</style>
+<div class="video">
+ <span class="cue">
+ <div><span class="cueText">This is a test</span></div>
+ <div><span class="cueText">This is a test</span></div>
+ <div><span class="cueText">This is a test</span></div>
+ <div><span class="cueText">This is a test</span></div>
+ <div><span class="cueText">This is a test</span></div>
+ <div><span class="cueText">This is a test</span></div>
+ <div><span class="cueText">This is a test</span></div>
+ <div><span class="cueText">This is a test</span></div>
+ </span>
+</div>
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped.html
new file mode 100644
index 0000000000..5d3a5cc6f6
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>WebVTT rendering, too many cues (wrapped) - cues that cannot fit should not be shown</title>
+<link rel="match" href="too_many_cues_wrapped-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html { overflow:hidden }
+body { margin:0 }
+::cue {
+ font: 20px/1 Ahem;
+ color: green
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+ <source src="/media/white.webm" type="video/webm">
+ <source src="/media/white.mp4" type="video/mp4">
+ <track src="support/too_many_cues_wrapped.vtt">
+ <script>
+ document.getElementsByTagName('track')[0].track.mode = 'showing';
+ </script>
+</video>
+</html>
diff --git a/testing/web-platform/tests/webvtt/tools/categorize_results.py b/testing/web-platform/tests/webvtt/tools/categorize_results.py
new file mode 100644
index 0000000000..6cb18c3c2d
--- /dev/null
+++ b/testing/web-platform/tests/webvtt/tools/categorize_results.py
@@ -0,0 +1,137 @@
+import os
+import sys
+import json
+import fnmatch
+
+TEST_DIR = "/webvtt/"
+CATEGORIES_FILE = "../categories.json"
+
+class Test:
+ def __init__(self, file, name, status, message):
+ self.file = file
+ self.name = name
+ self.status = status
+ self.message = message
+ self.passed = status == 'PASS'
+ self.categories = []
+
+ @classmethod
+ def from_json(cls, json):
+ file = json["test"]
+ if not file.startswith(TEST_DIR):
+ return []
+ file = file[len(TEST_DIR):]
+
+ status = json["status"]
+ message = json["message"]
+
+ tests = []
+
+ for test in json["subtests"]:
+ name = test["name"]
+ if status == 'OK':
+ test_status = test["status"]
+ test_message = test["message"]
+ else:
+ test_status, test_message = status, message
+
+ tests.append(Test(file, name, test_status, test_message))
+
+ return tests
+
+class Category:
+ def __init__(self, names):
+ self.names = set(names)
+ self.tests = {}
+
+ @classmethod
+ def from_json(cls, json):
+ return Category(json)
+
+ def add_test(self, name, test):
+ self.tests[test] = name
+
+ def __contains__(self, name):
+ return name in self.names
+
+def parse_results(file):
+ data = json.load(file)
+
+ results = data["results"]
+ tests = []
+ for result in results:
+ tests += Test.from_json(result)
+
+ return tests
+
+def parse_categories(file, tests, categories = None, categories_map = None):
+ data = json.load(file)
+ basepath = os.path.dirname(file.name)
+
+ categories = categories or []
+
+ if categories_map:
+ categories_map = dict(categories_map)
+ else:
+ categories_map = {}
+
+ if ":categories" in data:
+ for cat_data in data[":categories"]:
+ category = Category.from_json(cat_data)
+
+ categories.append(category)
+ for name in category.names:
+ categories_map[name] = category
+
+ for pattern, category_name in data.items():
+ if pattern.startswith(":"):
+ continue
+ category = categories_map[category_name]
+
+ file_pattern = os.path.normpath(os.path.join(basepath, pattern))
+ for test in tests:
+ if fnmatch.fnmatch(test.name, file_pattern) or fnmatch.fnmatch(test.file, file_pattern):
+ category.add_test(category_name, test)
+ test.categories.append(category)
+
+ if ":subcategories" in data:
+ for subcat_name in data[":subcategories"]:
+ path = os.path.join(basepath, subcat_name)
+ file = open(path, "r")
+ parse_categories(file, tests, categories, categories_map)
+
+ return categories
+
+def main(argv):
+ if len(argv) == 1:
+ if argv[0] == '-':
+ results_file = sys.stdin
+ else:
+ results_file = open(argv[0], "r")
+ else:
+ print("USAGE: python3 categorize_results.py <file>")
+ print("<file>\tA file containing wpt results. Or `-` for reading results from stdin.")
+ return
+
+ filepath = os.path.dirname(__file__)
+ categories_path = os.path.join(filepath, CATEGORIES_FILE)
+ categories_file = open(categories_path, "r")
+
+ tests = parse_results(results_file)
+ categories = parse_categories(categories_file, tests)
+
+ for category in categories:
+ tests_by_name = { name: [] for name in category.names }
+ for test, name in category.tests.items():
+ tests_by_name[name].append(test)
+
+ for name in category.names:
+ test_group = tests_by_name[name]
+ amount = len(test_group)
+ if amount == 0:
+ continue
+ passed = sum(1 for test in test_group if test.passed)
+ print("{}:\t{}/{} - {}%".format(name, passed, amount, round(passed / amount * 100, 2)))
+
+if __name__ == "__main__":
+ main(sys.argv[1:])