diff options
Diffstat (limited to 'testing/web-platform/tests/webvtt')
576 files changed, 14288 insertions, 0 deletions
diff --git a/testing/web-platform/tests/webvtt/OWNERS b/testing/web-platform/tests/webvtt/OWNERS new file mode 100644 index 000000000..0ea4adb90 --- /dev/null +++ b/testing/web-platform/tests/webvtt/OWNERS @@ -0,0 +1,3 @@ +@r12a +@silviapfeiffer +@zcorpan diff --git a/testing/web-platform/tests/webvtt/interfaces.html b/testing/web-platform/tests/webvtt/interfaces.html new file mode 100644 index 000000000..8cc4bb948 --- /dev/null +++ b/testing/web-platform/tests/webvtt/interfaces.html @@ -0,0 +1,64 @@ +<!doctype html> +<title>WebVTT IDL tests</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src=/resources/WebIDLParser.js></script> +<script src=/resources/idlharness.js></script> + +<h1>WebVTT IDL tests</h1> +<div id=log></div> + +<script type=text/plain> +enum AutoKeyword { "auto" }; +enum DirectionSetting { "" /* horizontal */, "rl", "lr" }; +enum AlignSetting { "start", "middle", "end", "left", "right" }; +[Constructor(double startTime, double endTime, DOMString text)] +interface VTTCue : TextTrackCue { + attribute VTTRegion? region; + attribute DirectionSetting vertical; + attribute boolean snapToLines; + attribute (double or AutoKeyword) line; + attribute AlignSetting lineAlign; + attribute (double or AutoKeyword) position; + attribute AlignSetting positionAlign; + attribute double size; + attribute AlignSetting align; + attribute DOMString text; + DocumentFragment getCueAsHTML(); +}; + +enum ScrollSetting { "" /* none */, "up" }; +[Constructor] +interface VTTRegion { + attribute double width; + attribute long lines; + attribute double regionAnchorX; + attribute double regionAnchorY; + attribute double viewportAnchorX; + attribute double viewportAnchorY; + attribute ScrollSetting scroll; +}; +</script> +<script> +"use strict"; +var idlArray; +setup(function() { + idlArray = new IdlArray(); + [].forEach.call(document.querySelectorAll("script[type=text\\/plain]"), function(node) { + if (node.className == "untested") { + idlArray.add_untested_idls(node.textContent); + } else { + idlArray.add_idls(node.textContent); + } + }); +}, {explicit_done:true}); +window.onload = function() { + idlArray.add_objects({ + // WebVTT + VTTCue: ['new VTTCue(0, 1, "foo")'], + VTTRegion: ['new VTTRegion()'] + }); + idlArray.test(); + done(); +}; +</script> 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 000000000..f90f72343 --- /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,35 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, repositioning (up) when 2 cues overlap completely</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +#cue1 { + position: absolute; + top: 50%; + left: 0; + right: 0; + margin-top: -18px; + text-align: center +} +#cue2 { + position: absolute; + top: 50%; + left: 0; + right: 0; + margin-top: -54px; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 36px; +} +</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_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 000000000..11ea59d9a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up.html @@ -0,0 +1,22 @@ +<!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"> +<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="1280" height="720" 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 000000000..4ddb155d2 --- /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,35 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, repositioning (down) when 2 cues overlap partially</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +#cue1 { + position: absolute; + top: 50%; + left: 0; + right: 0; + margin-top: -18px; + text-align: center +} +#cue2 { + position: absolute; + top: 50%; + left: 0; + right: 0; + margin-top: 18px; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 36px; +} +</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 000000000..9fd5c442e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down.html @@ -0,0 +1,22 @@ +<!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"> +<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="1280" height="720" 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 000000000..cc3047d31 --- /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,35 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, repositioning (down) when 2 cues overlap partially</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +#cue1 { + position: absolute; + top: 50%; + left: 0; + right: 0; + margin-top: -18px; + text-align: center +} +#cue2 { + position: absolute; + top: 50%; + left: 0; + right: 0; + margin-top: -54px; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 36px; +} +</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_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 000000000..c78c3033a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up.html @@ -0,0 +1,22 @@ +<!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"> +<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="1280" height="720" 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 000000000..f0f4504a4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, 2 tracks enabled at the same time</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</style> +<div class="video"><span class="cue"><span>This is a <u>test subtitle</u><br>This is a test subtitle</span></span></div> 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 000000000..2394d6b5c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks.html @@ -0,0 +1,20 @@ +<!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"> +<style> +html { overflow:hidden } +body { margin:0 } +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" 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 000000000..9fdd7b18f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, 3 tracks enabled at the same time</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</style> +<div class="video"><span class="cue"><span>This is a <b>test subtitle</b><br>This is a <u>test subtitle</u><br>This is a test subtitle</span></span></div> 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 000000000..fee125f61 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks.html @@ -0,0 +1,22 @@ +<!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"> +<style> +html { overflow:hidden } +body { margin:0 } +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" 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_end-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end-ref.html new file mode 100644 index 000000000..030fe6aff --- /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> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + width: 50%; + text-align: right; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 36px +} +</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 000000000..d4b5cf49e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:end</title> +<link rel="match" href="align_end-ref.html"> +<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="1280" height="720" 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 000000000..eed9217d9 --- /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> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + width: 50%; + text-align: right +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 36px +} +</style> +<div class=video><span class=cue><span>This is a test <br>subtitle that <br>most likely <br>will span over <br>several rows <br>since it is a <br>pretty long <br>cue with a <br>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 000000000..724779502 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:end with long cues</title> +<link rel="match" href="align_end_wrapped-ref.html"> +<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="1280" height="720" 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_middle-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle-ref.html new file mode 100644 index 000000000..55cc7dd07 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:middle</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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: 36px +} +</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_middle.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle.html new file mode 100644 index 000000000..530dccf60 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:middle</title> +<link rel="match" href="align_middle-ref.html"> +<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="1280" height="720" 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_middle.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_middle_position_50-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_50-ref.html new file mode 100644 index 000000000..2c7d6c8c2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_50-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:middle, position:50%</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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: 36px +} +</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_middle_position_50.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_50.html new file mode 100644 index 000000000..88b664288 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_50.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:middle, position:50%</title> +<link rel="match" href="align_middle_position_50-ref.html"> +<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="1280" height="720" 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_middle_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_middle_position_gt_50-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_gt_50-ref.html new file mode 100644 index 000000000..93bfd0c60 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_gt_50-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:middle, position greater than 50%</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + right: 92px; + width: 256px; + text-align: center; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 36px +} +</style> +<div class=video><span class=cue><span>Aweso<br>me!!!</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_gt_50.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_gt_50.html new file mode 100644 index 000000000..7790b20d2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_gt_50.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:middle, position greater than 50%</title> +<link rel="match" href="align_middle_position_gt_50-ref.html"> +<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="1280" height="720" 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_middle_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_middle_position_lt_50-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_lt_50-ref.html new file mode 100644 index 000000000..86b3b5cb6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_lt_50-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:middle, position less than 50%</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 92px; + right: 0; + width: 256px; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 36px +} +</style> +<div class=video><span class=cue><span>Awesome<br>!!!</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_lt_50.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_lt_50.html new file mode 100644 index 000000000..137dad806 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_lt_50.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:middle, position less than 50%</title> +<link rel="match" href="align_middle_position_lt_50-ref.html"> +<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="1280" height="720" 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_middle_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_middle_position_lt_50_size_gt_maximum_size-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_lt_50_size_gt_maximum_size-ref.html new file mode 100644 index 000000000..a9303312b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_lt_50_size_gt_maximum_size-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:middle, position less than 50%, size greater than maximum size</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 92px; + right: 0; + width: 256px; + text-align: center; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 36px +} +</style> +<div class=video><span class=cue><span>Aweso<br>me!!!</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_lt_50_size_gt_maximum_size.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_lt_50_size_gt_maximum_size.html new file mode 100644 index 000000000..50cc5c154 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_lt_50_size_gt_maximum_size.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:middle, position less than 50%, size greater than maximum size</title> +<link rel="match" href="align_middle_position_lt_50_size_gt_maximum_size-ref.html"> +<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="1280" height="720" 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_middle_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_middle_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_wrapped-ref.html new file mode 100644 index 000000000..1c751fe15 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_wrapped-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:middle with long cues</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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: 36px +} +</style> +<div class=video><span class=cue><span>This is a test subtitle that <br>most likely will span over <br>several rows since it is a pretty <br>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_middle_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_wrapped.html new file mode 100644 index 000000000..552788aaa --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_middle_wrapped.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:middle with long cues</title> +<link rel="match" href="align_middle_wrapped-ref.html"> +<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="1280" height="720" 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_middle_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 000000000..4cdbc0e5b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:start</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 50%; + right: 0; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 36px +} +</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 000000000..a0f2eb07e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:start</title> +<link rel="match" href="align_start-ref.html"> +<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="1280" height="720" 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 000000000..01051f012 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:start with long cues</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 50%; + right: 0; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 36px +} +</style> +<div class=video><span class=cue><span>This is a test <br>subtitle that <br>most likely <br>will span over <br>several rows <br>since it is a <br>pretty long <br>cue with a <br>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 000000000..e7244bf64 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:start with long cues</title> +<link rel="match" href="align_start_wrapped-ref.html"> +<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="1280" height="720" 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 000000000..a8a1c0371 --- /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, <audio> should not have subtitles</title> +<style> +audio { + width: 1280px; + height: 720px; + outline: solid +} +</style> +<script src="/common/reftest-wait.js"></script> +<audio autoplay controls onplaying="this.onplaying = null; this.pause(); this.currentTime = 0; takeScreenshot();"> + <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 000000000..013e45558 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, <audio> should not have subtitles</title> +<link rel="match" href="audio_has_no_subtitles-ref.html"> +<style> +audio { + width: 1280px; + height: 720px; + 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; 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> +</audio> +</html> 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 000000000..261a640e9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/basic-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, basic</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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: 36px; +} +</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 000000000..fdaed5a6e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/basic.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, basic</title> +<link rel="match" href="basic-ref.html"> +<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="1280" height="720" 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 000000000..cda42beb1 --- /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: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</style> +<div class="video"><span class="cue"><span><ruby>.<rt><bdo dir="ltr">אא</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 000000000..78393bf1f --- /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> +<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="1280" height="720" 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/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 000000000..1d2255624 --- /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: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</style> +<div class="video"><span class="cue"><span>.<br><bdo dir=ltr>א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 000000000..2cea16ee1 --- /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> +<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="1280" height="720" 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 000000000..a1d748ed8 --- /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: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</style> +<div class="video"><span class="cue"><span>.<br><bdo dir=ltr>(abא</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 000000000..f38c7964f --- /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> +<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="1280" height="720" 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 000000000..09be0be5e --- /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: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</style> +<div class="video"><span class="cue"><span>.<br><bdo dir=ltr>א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 000000000..6243caa60 --- /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> +<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="1280" height="720" 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 000000000..208d20a57 --- /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: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</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 000000000..df9ed1a81 --- /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> +<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="1280" height="720" 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 000000000..211f86455 --- /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: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</style> +<div class="video"><span class="cue"><span><bdo dir=ltr>(abא</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 000000000..ea18c7ae9 --- /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> +<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="1280" height="720" 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 000000000..4fb97c4f4 --- /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: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</style> +<div class="video"><span class="cue"><span><bdo dir=ltr>(abب</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 000000000..9f3d9e815 --- /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> +<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="1280" height="720" 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 000000000..cbd9ee0c2 --- /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: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</style> +<div class="video"><span class="cue"><span><bdo dir=ltr>۩)</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 000000000..af6288a37 --- /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> +<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="1280" height="720" 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/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 000000000..56ce01cb9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, size:50%, cue too long - should be cut</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that should wrap several times and become so long that the cue must be cut when displayed, because it does not fit on the screen. This is a test subtitle that should wrap several times and become so long that the cue must be cut when displayed, because it does not fit on the</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 000000000..21c4f11f1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, size:50%, cue too long - should be cut</title> +<link rel="match" href="cue_too_long-ref.html"> +<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="1280" height="720" 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 000000000..7b9db92cc --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, decoding of escaped entities</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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: 36px; +} +</style> +<div class="video"><span class="cue"><span>Here are the escaped <br>entities: & < > ‎ ‏ </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 000000000..b729e0650 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities.html @@ -0,0 +1,22 @@ +<!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"> +<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="1280" height="720" 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 000000000..eb9ba0ac9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, cue reposition after enabling controls</title> +<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 000000000..892e7e6a5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition.html @@ -0,0 +1,28 @@ +<!doctype html> +<html class="reftest-wait"> +<title>WebVTT rendering, cue reposition after disabling controls</title> +<link rel="match" href="disable_controls_reposition-ref.html"> +<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); + setTimeout(takeScreenshot, 200);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src=support/foo.vtt> +</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 000000000..3ee9a946c --- /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,26 @@ +<!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> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + top: 0; + right: 204.8px; + width: 256px; + text-align: left +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 36px; +} +</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 000000000..2db260a77 --- /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,43 @@ +<!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"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<script> + function updateCue() { + 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(); + takeScreenshot(); + }; + v.play(); + } +</script> +<video id="video" width="1280" height="720" 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"> + <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 000000000..f796ddf21 --- /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,26 @@ +<!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> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + top: 0; + right: 204.8px; + width: 256px; + text-align: left +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 36px; +} +</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 000000000..4bf3a24a3 --- /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,34 @@ +<!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"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<script> + function updateCue() { + 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'; + takeScreenshot(); + } +</script> +<video id="video" width="1280" height="720" 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"> + <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 000000000..53de10228 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, it is possible to override cue line with the DOM APIs</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</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 000000000..f4094115b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line.html @@ -0,0 +1,39 @@ +<!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"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<script> + function updateCue() { + 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(); + takeScreenshot(); + }; + v.play(); + } +</script> +<video id="video" width="1280" height="720" 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"> + <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 000000000..fb9f13f8b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, it is possible to override cue text with the DOM APIs</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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: 36px; +} +</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 000000000..a5d1026a9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text.html @@ -0,0 +1,39 @@ +<!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"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<script> + function updateCue() { + 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(); + takeScreenshot(); + }; + v.play(); + } +</script> +<video id="video" width="1280" height="720" 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"> + <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 000000000..42ca638a6 --- /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,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, cue text should be rerendered when overriding them using the DOM APIs while paused</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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: 36px; +} +</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 000000000..295db32f5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text_while_paused.html @@ -0,0 +1,30 @@ +<!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"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<script> + function updateCue() { + var t = document.getElementById('track'); + var c = t.track.cues[0]; + c.text = 'f o o'; + takeScreenshot(); + } +</script> +<video id="video" width="1280" height="720" 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"> + <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 000000000..4525a7cf7 --- /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> +<title>Reference for WebVTT rendering, cue text should be removed when removing them using the DOM APIs while paused</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +</style> +<div class="video"></div> 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 000000000..37481086d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused.html @@ -0,0 +1,30 @@ +<!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"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<script> + function updateCue() { + var t = document.getElementById('track'); + var c = t.track.cues[0]; + t.track.removeCue(c); + takeScreenshot(); + } +</script> +<video id="video" width="1280" height="720" 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"> +</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/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 000000000..207662291 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, cue reposition after enabling controls</title> +<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 000000000..ab37c369c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition.html @@ -0,0 +1,28 @@ +<!doctype html> +<html class="reftest-wait"> +<title>WebVTT rendering, cue reposition after enabling controls</title> +<link rel="match" href="enable_controls_reposition-ref.html"> +<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); + setTimeout(takeScreenshot, 200);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src=support/foo.vtt> +</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 000000000..62fe1a627 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely-ref.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, repositioning of 9 cues that overlap completely</title> +<style> +.video { + display: inline-block; + width: 720px; + height: 720px; + outline: solid; + position: relative +} +#cue1 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -18px; + margin-left: -18px; + color: #000 +} +#cue2 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -54px; + margin-left: -18px; + color: #222 +} +#cue3 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -18px; + margin-left: -54px; + color: #444 +} +#cue4 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -18px; + margin-left: 18px; + color: #666 +} +#cue5 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: 18px; + margin-left: -18px; + color: #888 +} +#cue6 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -54px; + margin-left: -54px; + color: #aaa +} +#cue7 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -54px; + margin-left: 18px; + color: #ccc +} +#cue8 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: 18px; + margin-left: -54px; + color: #eee +} +#cue9 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: 18px; + margin-left: 18px; + color: green +} +.cue { + width: 36px; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + font-size: 36px; +} +</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 000000000..ac897a130 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, repositioning of 9 cues that overlap completely</title> +<link rel="match" href="9_cues_overlapping_completely-ref.html"> +<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="720" height="720" 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 000000000..66140c015 --- /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,112 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, repositioning of 9 cues that overlap completely and all cues have the same timestamp</title> +<style> +.video { + display: inline-block; + width: 720px; + height: 720px; + outline: solid; + position: relative +} +#cue1 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -18px; + margin-left: -18px; + color: #000 +} +#cue2 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -54px; + margin-left: -18px; + color: #222 +} +#cue3 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -18px; + margin-left: -54px; + color: #444 +} +#cue4 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -18px; + margin-left: 18px; + color: #666 +} +#cue5 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: 18px; + margin-left: -18px; + color: #888 +} +#cue6 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -54px; + margin-left: -54px; + color: #aaa +} +#cue7 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -54px; + margin-left: 18px; + color: #ccc +} +#cue8 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: 18px; + margin-left: -54px; + color: #eee +} +#cue9 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: 18px; + margin-left: 18px; + color: green +} +.cue { + width: 36px; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + font-size: 36px; +} +</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 000000000..267c3190f --- /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,48 @@ +<!DOCTYPE html> +<html> +<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"> +<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="720" height="720" 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_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 000000000..a3b48034c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles-ref.html @@ -0,0 +1,13 @@ +<!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: 1280px; + height: 720px; + position: relative +} +</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 000000000..15b12488b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<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"> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="videonotfound.webm" type="video/webm"> + <source src="videonotfound.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/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 000000000..5908cf22b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19-ref.html @@ -0,0 +1,25 @@ +<!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> +<style> +.video { + display: inline-block; + width: 1280px; + height: 19px; + outline: solid; + 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: 0.95px +} +</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 000000000..9e2a060f7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<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"> +<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="1280" 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/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 000000000..2f1c15058 --- /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: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</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 000000000..af36ad782 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/single_quote.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, single quote should not be levitated</title> +<link rel="match" href="single_quote-ref.html"> +<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="1280" height="720" 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 000000000..65cf4c871 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, size:90% == size:100% when text does not need to wrap</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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: 36px +} +</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 000000000..9470da49d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, size:99% == size:100% when text does not need to wrap</title> +<link rel="match" href="size_90-ref.html"> +<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="1280" height="720" 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 000000000..ffabbe439 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, size:99% == size:100% when text does not need to wrap</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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: 36px +} +</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 000000000..8eef684ef --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, size:99% == size:100% when text does not need to wrap</title> +<link rel="match" href="size_99-ref.html"> +<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="1280" height="720" 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 000000000..3f4250d8b --- /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 000000000..d5019e0ed --- /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 000000000..5e7eefd26 --- /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 000000000..2ab4fa179 --- /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 000000000..cd14574f0 --- /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 000000000..ab71ec598 --- /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 000000000..b62f6eaff --- /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,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, line:-2, size:50%, wrapped cue should grow upwards</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 36px; + left: 320px; + right: 0; + width: 640px; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 36px; +} +</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 000000000..0fc7b1d5d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_-2_wrapped_cue_grow_upwards.html @@ -0,0 +1,22 @@ +<!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"> +<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="1280" height="720" 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 000000000..8538a20b8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, line:0 should be top line</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</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 000000000..86ba937b4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top.html @@ -0,0 +1,22 @@ +<!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"> +<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="1280" height="720" 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 000000000..0b48ad684 --- /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,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, line:1, size:50%, wrapped cue should grow downwards</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + top: 36px; + left: 320px; + right: 0; + width: 640px; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 36px; +} +</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 000000000..34048ee1f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_1_wrapped_cue_grow_downwards.html @@ -0,0 +1,22 @@ +<!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"> +<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="1280" height="720" 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 000000000..bd3cffc4a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, line:50% should be vertically centered</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + top: 50%; + left: 0; + right: 0; + margin-top: -18px; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 36px; +} +</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 000000000..ddfb450b4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent.html @@ -0,0 +1,22 @@ +<!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"> +<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="1280" height="720" 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 000000000..4d853a17c --- /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,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, line integer and percent mixed with overlap</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +#cue1 { + position: absolute; + top: 324px; + left: 0; + right: 0; + text-align: center +} +#cue2 { + position: absolute; + top: 360px; + 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: 36px; +} +</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 000000000..3a3c13efc --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap.html @@ -0,0 +1,22 @@ +<!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"> +<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="1280" height="720" 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 000000000..05ff96677 --- /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,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, line integer and percent mixed with overlap move up</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +#cue1 { + position: absolute; + top: 360px; + left: 0; + right: 0; + text-align: center +} +#cue2 { + position: absolute; + top: 324px; + 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: 36px; +} +</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 000000000..e0474200f --- /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,22 @@ +<!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"> +<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="1280" height="720" 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 000000000..8c4fd8922 --- /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,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, line percent and integer mixed with overlap</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +#cue1 { + position: absolute; + top: 307.8px; + left: 0; + right: 0; + text-align: center +} +#cue2 { + position: absolute; + top: 360px; + 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: 36px; +} +</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 000000000..be2460020 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap.html @@ -0,0 +1,22 @@ +<!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"> +<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="1280" height="720" 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 000000000..e72894385 --- /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,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, line percent and integer mixed with overlap move up</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +#cue1 { + position: absolute; + top: 376.2px; + left: 0; + right: 0; + text-align: center +} +#cue2 { + position: absolute; + top: 324px; + 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: 36px; +} +</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 000000000..a78bad2c7 --- /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,22 @@ +<!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"> +<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="1280" height="720" 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 Binary files differnew file mode 100644 index 000000000..b3185c409 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media/background.gif 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 000000000..468e40612 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_height400_with_controls-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for WebVTT rendering, the subtitles is not covered by or covering the controls</title> +<style> +.video { + display: inline-block; + position: absolute; + width: 1280px; + height: 400px; + outline: solid +} +.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; + font-size: 20px +} +</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="1280" 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 000000000..6a5c36c3d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_height400_with_controls.html @@ -0,0 +1,22 @@ +<!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"> +<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="1280" 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 000000000..798bef10f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_with_controls-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for WebVTT rendering, the subtitles are moved up to correct position when controls are visible</title> +<style> +.video { + display: inline-block; + position: absolute; + width: 1280px; + height: 720px; + outline: solid +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; + padding-bottom: 36px +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 36px +} +</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="1280" height="720" 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 000000000..dcb899312 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_with_controls.html @@ -0,0 +1,22 @@ +<!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"> +<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="1280" height="720" 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 000000000..5effb332b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-1.html @@ -0,0 +1,23 @@ +<!doctype html> +<html> +<title>WebVTT rendering, cue position after navigation</title> +<style> +video { + outline: solid; + width: 320px; + height: 240px; +} +::cue { + font-family: Ahem, sans-serif; + font-size: 50px; + color: green; +} +</style> +<video autoplay controls 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> +</video>
\ No newline at end of file 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 000000000..e155162f9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-ref-1.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, cue position after navigation</title> +<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>
\ No newline at end of file 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 000000000..b973a71c0 --- /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 000000000..6a50429e1 --- /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>
\ No newline at end of file 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 000000000..f77a6dc36 --- /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,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, one line cue and cue that wraps - both should be fully visible</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle<br>This test subtitle wraps and should be visible</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 000000000..c6ad95e8d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/one_line_cue_plus_wrapped_cue.html @@ -0,0 +1,22 @@ +<!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"> +<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="1280" height="720" 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/repaint-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/repaint-ref.html new file mode 100644 index 000000000..d0943070c --- /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 +} +.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; + font-size: 50px; +} +</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 000000000..669880b97 --- /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/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 000000000..b23278a9c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_properties-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, background properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..ef1f0a9ba --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue, background properties</title> +<link rel="match" href="background_properties-ref.html"> +<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="1280" height="720" 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 000000000..944723c44 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, background shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..612fe90fd --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue, background shorthand</title> +<link rel="match" href="background_shorthand-ref.html"> +<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="1280" height="720" 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 000000000..4ad421512 --- /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,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, background shorthand, background image URL with relative path from CSS file</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..91cd11e70 --- /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,23 @@ +<!DOCTYPE html> +<html> +<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"> +<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="1280" height="720" 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 000000000..58942864d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hex-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, color: #60ff60</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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); + font-size: 36px; + 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 000000000..e8d091b25 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hex.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue, color: #60ff60</title> +<link rel="match" href="color_hex-ref.html"> +<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="1280" height="720" 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 000000000..2fd9a0313 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hsla-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, color: hsla()</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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); + font-size: 36px; + 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 000000000..3830e8f49 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hsla.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue, color: hsla()</title> +<link rel="match" href="color_hsla-ref.html"> +<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="1280" height="720" 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 000000000..50326b95c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_rgba-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, color: rgba()</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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); + font-size: 36px; + 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 000000000..c1eb1d95d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_rgba.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue, color: rgba()</title> +<link rel="match" href="color_rgba-ref.html"> +<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="1280" height="720" 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 000000000..709f5177f --- /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: 1280px; + height: 720px; + 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-size: 36px; +} +</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 000000000..51308553c --- /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> +<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="1280" height="720" 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 000000000..d7071fcc2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, font properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font: italic small-caps bold 36px/72px 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 000000000..1d24f9217 --- /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> +<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: 36px; + line-height: 72px; + font-family: sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" 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 000000000..b3a5d47f0 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, font shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font: italic small-caps bold 36px/72px 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 000000000..b7a3a267f --- /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> +<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 36px/72px sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" 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 000000000..e8ef51b5e --- /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,46 @@ +<!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: 1280px; + height: 720px; + position: relative; + color: #f0f; + white-space: pre-wrap; + font: italic small-caps bold 36px/72px 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; +} +.videoWhite { + position: absolute; + top: 0; + left: 160px; + width: 960px; + height: 720px;; + 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 000000000..b93ac56ae --- /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> +<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 36px/72px 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="1280" height="720" 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 000000000..be06607a2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_properties-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, outline properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..bfac12198 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_properties.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue, outline properties</title> +<link rel="match" href="outline_properties-ref.html"> +<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="1280" height="720" 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 000000000..252094fc1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_shorthand-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, outline shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..4c39516c7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_shorthand.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue, outline shorthand</title> +<link rel="match" href="outline_shorthand-ref.html"> +<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="1280" height="720" 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 000000000..70e314aa8 --- /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,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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..3233b9d35 --- /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> +<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="1280" height="720" 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 000000000..e3a347393 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..1d17b7f38 --- /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> +<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="1280" height="720" 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 000000000..7fb7d24c9 --- /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,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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..3d75cde0e --- /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> +<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="1280" height="720" 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 000000000..acc0fb3ea --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..bc2e1e9fa --- /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> +<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="1280" height="720" 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 000000000..d12360fce --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..cc4bfbd44 --- /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> +<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="1280" height="720" 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/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 000000000..56a79a186 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..68c2e4574 --- /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> +<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="1280" height="720" 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 000000000..ab23711dc --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..b22b5e122 --- /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> +<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="1280" height="720" 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 000000000..3d7607a11 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..8069ad6da --- /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> +<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="1280" height="720" 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 000000000..ad03b2183 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..c92c303fb --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..e056a7d45 --- /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> +<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="1280" height="720" 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 000000000..7b0c6021f --- /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> +<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="1280" height="720" 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 000000000..65adcd3a6 --- /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,28 @@ +<!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: 1280px; + height: 720px; + font-size: 36px; + 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_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 000000000..512808ef8 --- /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> +<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="1280" height="720" 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 000000000..05948c5af --- /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: 1280px; + height: 720px; + 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-size: 36px; +} +</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 000000000..be87c0281 --- /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> +<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="1280" height="720" 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 000000000..8e1fa2e94 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_properties-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), background properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..d95a4f263 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(), background properties</title> +<link rel="match" href="background_properties-ref.html"> +<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="1280" height="720" 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 000000000..22769b2ac --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), background shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..b5653c7f0 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(), background shorthand</title> +<link rel="match" href="background_shorthand-ref.html"> +<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="1280" height="720" 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 000000000..9ac9fe9e6 --- /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,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), background shorthand, background image URL with relative path from CSS file</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..1a206765b --- /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,23 @@ +<!DOCTYPE html> +<html> +<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"> +<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="1280" height="720" 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 000000000..747b525e9 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..8d5cfee93 --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..40e105467 --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + font-size: 36px; + 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 000000000..d964bc833 --- /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> +<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="1280" height="720" 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 000000000..68571ebf5 --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + font-size: 36px; + 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 000000000..c42e28b66 --- /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> +<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="1280" height="720" 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 000000000..1d703ed41 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..73f3b8c2d --- /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> +<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="1280" height="720" 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 000000000..68c7e5b4a --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + font-size: 36px; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > b { + font: italic small-caps normal 36px/72px 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 000000000..fe86d0a9f --- /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> +<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: 36px; + line-height: 72px; + font-family: sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" 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 000000000..6cbd67299 --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + font-size: 36px; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > b { + font: normal small-caps normal 36px/72px 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 000000000..ed86c07b1 --- /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> +<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 36px/72px sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" 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 000000000..a0c20ef64 --- /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: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px +} +.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 000000000..7db2820ca --- /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> +<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="1280" height="720" 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 000000000..a7711522a --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..1e04f8481 --- /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> +<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="1280" height="720" 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 000000000..46f19ddde --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..96e2791e6 --- /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> +<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="1280" height="720" 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 000000000..aa984fc89 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..caf81d78b --- /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> +<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="1280" height="720" 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 000000000..c1d644009 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..00f5d4498 --- /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> +<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="1280" height="720" 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 000000000..bdc4c16dc --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..ffe710fd2 --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..f0fd1ae2f --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..b46a5ae89 --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..602480ad8 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..01e8751c6 --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..3ba3d4b45 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..3ac0ddead --- /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> +<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="1280" height="720" 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 000000000..4aca60941 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..150f1d28a --- /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> +<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="1280" height="720" 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 000000000..19da7439d --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..e6d52f869 --- /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> +<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="1280" height="720" 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 000000000..4d4eecf4e --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..4ac9e5269 --- /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> +<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="1280" height="720" 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 000000000..398c09095 --- /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,29 @@ +<!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: 1280px; + height: 720px; + font-size: 36px; + 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 +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most <br>likely will span over several <br>rows since it's a pretty long cue <br>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 000000000..3b100b551 --- /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> +<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="1280" height="720" 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 000000000..7e0b4aff8 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..ad542c52b --- /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> +<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="1280" height="720" 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 000000000..7097530bb --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..1d54d956d --- /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> +<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="1280" height="720" 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 000000000..81c6ca5b1 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..896dc7112 --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..703daabd7 --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + font-size: 36px; + 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 000000000..765b01f65 --- /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> +<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="1280" height="720" 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 000000000..b66ec767b --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + font-size: 36px; + 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 000000000..f57619c86 --- /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> +<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="1280" height="720" 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 000000000..e665021eb --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..0a609d1d9 --- /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> +<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="1280" height="720" 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 000000000..2c6fec8f2 --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + font-size: 36px; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + font: italic small-caps bold 36px/72px 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 000000000..42ae57e15 --- /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> +<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: 36px; + line-height: 72px; + font-family: sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" 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 000000000..1ea755a39 --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + font-size: 36px; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + font: normal small-caps bold 36px/72px 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 000000000..e4fd57353 --- /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> +<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 36px/72px sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" 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 000000000..3ca6dfd85 --- /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,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(|c) should match</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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: 36px +} +.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 000000000..474a54d0a --- /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,28 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(|c) should match</title> +<link rel="match" href="class_namespace-ref.html"> +<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="1280" height="720" 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 000000000..038414125 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..de7abf8b2 --- /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> +<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="1280" height="720" 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 000000000..fa6bdb61c --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..c0dab3594 --- /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> +<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="1280" height="720" 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 000000000..ceec8b8c5 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..72bb88582 --- /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> +<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="1280" height="720" 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 000000000..cfd468368 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..07a1ed669 --- /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> +<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="1280" height="720" 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 000000000..5333596fe --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..c1939ff6d --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..5f45ee729 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..6f80b4e00 --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..4a53043a1 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..10f7da721 --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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_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 000000000..7cd630d7a --- /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,28 @@ +<!DOCTYPE html> +<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: 1280px; + height: 720px; + font-size: 36px; + 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/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 000000000..9213a4db3 --- /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> +<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="1280" height="720" 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 000000000..640a88985 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..27e5d8a93 --- /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> +<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="1280" height="720" 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 000000000..2c9a49d22 --- /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,28 @@ +<!DOCTYPE html> +<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: 1280px; + height: 720px; + font-size: 36px; + 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/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 000000000..3b5045c0b --- /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> +<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="1280" height="720" 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 000000000..da4db854f --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..a269ca1bc --- /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> +<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="1280" height="720" 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 000000000..03852d9b4 --- /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,28 @@ +<!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: 1280px; + height: 720px; + font-size: 36px; + 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 +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most <br>likely will span over several <br>rows since it's a pretty long cue <br>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 000000000..418ea448f --- /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> +<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="1280" height="720" 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 000000000..343fccc92 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..622edca4c --- /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> +<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="1280" height="720" 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 000000000..01081e982 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..682be9071 --- /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> +<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="1280" height="720" 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 000000000..5a0a0b120 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hex-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), color: #60ff60</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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); + font-size: 36px; + 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 000000000..42eaf66f7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hex.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(), color: #60ff60</title> +<link rel="match" href="color_hex-ref.html"> +<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="1280" height="720" 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 000000000..15c19e96d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hsla-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), color: hsla()</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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); + font-size: 36px; + 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 000000000..7dadd55da --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hsla.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(), color: hsla()</title> +<link rel="match" href="color_hsla-ref.html"> +<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="1280" height="720" 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 000000000..87004f8e2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_rgba-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), color: rgba()</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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); + font-size: 36px; + 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 000000000..cd8ed2f14 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_rgba.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(), color: rgba()</title> +<link rel="match" href="color_rgba-ref.html"> +<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="1280" height="720" 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 000000000..bc541fba6 --- /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: 1280px; + height: 720px; + 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-size: 36px; +} +</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 000000000..4ab2d9a59 --- /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> +<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="1280" height="720" 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 000000000..41be87aca --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_properties-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), font properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font: italic small-caps bold 36px/72px 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 000000000..e9d1ef816 --- /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> +<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: 36px; + line-height: 72px; + font-family: sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" 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 000000000..341079b14 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_shorthand-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), font shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font: italic small-caps bold 36px/72px 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 000000000..d711f54d0 --- /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> +<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 36px/72px sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" 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 000000000..5effb11d9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/id_color-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, cue with ID, ::cue(#foo) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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); + font-size: 36px; + 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 000000000..85ffff6de --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/id_color.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, cue with ID, ::cue(#foo) selector</title> +<link rel="match" href="id_color-ref.html"> +<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="1280" height="720" 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 000000000..ba554e2b0 --- /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,46 @@ +<!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: 1280px; + height: 720px; + position: relative; + color: #f0f; + white-space: pre-wrap; + font: italic small-caps bold 36px/72px 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; +} +.videoWhite { + position: absolute; + top: 0; + left: 160px; + width: 960px; + height: 720px;; + 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 000000000..a3be846a0 --- /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> +<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 36px/72px 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="1280" height="720" 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 000000000..8567adbe8 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..2b32ff834 --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..6cd53d42a --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + font-size: 36px; + 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 000000000..a9ceca7b1 --- /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> +<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="1280" height="720" 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 000000000..d4d94a6ed --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + font-size: 36px; + 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 000000000..b7d98e2f8 --- /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> +<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="1280" height="720" 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 000000000..f7b60d70d --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..c7e888236 --- /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> +<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="1280" height="720" 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 000000000..c02042f23 --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + font-size: 36px; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > i { + font: italic small-caps bold 36px/72px 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 000000000..5fb925097 --- /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> +<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: 36px; + line-height: 72px; + font-family: sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" 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 000000000..f00ee6087 --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + font-size: 36px; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > i { + font: normal small-caps bold 36px/72px 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 000000000..21effa113 --- /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> +<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 36px/72px sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" 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 000000000..6bad23b43 --- /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: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px +} +.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 000000000..0f51c5c18 --- /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> +<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="1280" height="720" 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 000000000..849d6e756 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..e83daeb6d --- /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> +<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="1280" height="720" 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 000000000..218eb009f --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..cbceba8ba --- /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> +<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="1280" height="720" 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 000000000..c1de8d04a --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..dd1212ada --- /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> +<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="1280" height="720" 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 000000000..a20a8eba6 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..41582bb06 --- /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> +<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="1280" height="720" 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 000000000..17f7709d2 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..83308816d --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..6b02c72b5 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..294b642e5 --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..9bca41113 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..a6028a367 --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..a765d9f76 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..251cf9c06 --- /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> +<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="1280" height="720" 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 000000000..ee0bd0230 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..4fabbdbbf --- /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> +<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="1280" height="720" 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 000000000..d0177e342 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..c0dc1ec16 --- /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> +<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="1280" height="720" 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 000000000..1dfdb7b03 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..1f88ec6c7 --- /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> +<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="1280" height="720" 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 000000000..2734b323f --- /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,29 @@ +<!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: 1280px; + height: 720px; + font-size: 36px; + 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 +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most <br>likely will span over several <br>rows since it's a pretty long cue <br>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 000000000..308571d4c --- /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> +<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="1280" height="720" 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 000000000..658c20083 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..b3ac8c703 --- /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> +<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="1280" height="720" 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 000000000..ed73e774b --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..9f62a627f --- /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> +<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="1280" height="720" 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 000000000..c3fcae2cc --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..f105b016b --- /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> +<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="1280" height="720" 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 000000000..fd7ce73f8 --- /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: 1280px; + height: 720px; + 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-size: 36px; +} +.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 000000000..94d443690 --- /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> +<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="1280" height="720" 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 000000000..4fe5d753b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_properties-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), outline properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..5684f17ac --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_properties.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(), outline properties</title> +<link rel="match" href="outline_properties-ref.html"> +<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="1280" height="720" 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 000000000..4b4dcd92a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_shorthand-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), outline shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..40a856aac --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_shorthand.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(), outline shorthand</title> +<link rel="match" href="outline_shorthand-ref.html"> +<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="1280" height="720" 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 000000000..3e882f844 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_namespace-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(|*) should match the root</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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: 36px +} +</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 000000000..41198683b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_namespace.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(|*) should match the root</title> +<link rel="match" href="root_namespace-ref.html"> +<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="1280" height="720" 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 000000000..7216054cc --- /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: 1280px; + height: 720px; + 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: lime; + font-size: 36px; +} +</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 000000000..e5cda77b2 --- /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> +<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="1280" height="720" 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 000000000..8bf1dd425 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..76f38f1d2 --- /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> +<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="1280" height="720" 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 000000000..351353b67 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..8031b3dde --- /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> +<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="1280" height="720" 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 000000000..9a6017a7f --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..191e1bcc2 --- /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> +<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="1280" height="720" 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 000000000..864a930f9 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..13e97614f --- /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> +<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="1280" height="720" 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 000000000..e3a591938 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..dffde42ad --- /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> +<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="1280" height="720" 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 000000000..016b3c4bc --- /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: 1280px; + height: 720px; + 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-size: 36px; +} +</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 000000000..5c54ed310 --- /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> +<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="1280" height="720" 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 000000000..7822dd6e7 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..086021601 --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..f065a514f --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + font-size: 36px; + 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 000000000..121258de2 --- /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> +<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="1280" height="720" 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 000000000..d43582350 --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + font-size: 36px; + 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 000000000..b1512f2f4 --- /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> +<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="1280" height="720" 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 000000000..64367cf19 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..d59a8284f --- /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> +<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="1280" height="720" 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 000000000..edc2f023c --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + font-size: 36px; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > u { + font: italic small-caps normal 36px/72px 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 000000000..9efbd384b --- /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> +<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: 36px; + line-height: 72px; + font-family: sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" 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 000000000..355f5d7fc --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + font-size: 36px; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > u { + font: normal small-caps normal 36px/72px 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 000000000..347cb8a21 --- /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> +<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 36px/72px sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" 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 000000000..31b61e129 --- /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: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px +} +.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 000000000..9b75bf791 --- /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> +<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="1280" height="720" 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 000000000..8554b59eb --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..9e9b10787 --- /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> +<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="1280" height="720" 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 000000000..6537b8700 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..f76a52059 --- /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> +<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="1280" height="720" 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 000000000..cd30f4669 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..e0f81b79d --- /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> +<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="1280" height="720" 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 000000000..7bbc39f25 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..28daaf325 --- /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> +<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="1280" height="720" 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 000000000..1fa3755c5 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..b87678cba --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..e32ff05cb --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..e686ef956 --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..6d5d3fa91 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..ad2dbd9c7 --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..fe576afad --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..9c5cb5c4c --- /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> +<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="1280" height="720" 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 000000000..1dc7af87f --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..64d5d12b6 --- /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> +<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="1280" height="720" 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 000000000..288d89cf9 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..7032ae8cc --- /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> +<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="1280" height="720" 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 000000000..8819e4429 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..6ffe2b18f --- /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> +<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="1280" height="720" 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 000000000..2c3b2047e --- /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,29 @@ +<!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: 1280px; + height: 720px; + font-size: 36px; + 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 +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most <br>likely will span over several <br>rows since it's a pretty long cue <br>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 000000000..4bf3e45d1 --- /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> +<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="1280" height="720" 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 000000000..b948cc8cb --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..96f909b4c --- /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> +<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="1280" height="720" 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 000000000..9ce9e3b6f --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..045bf10ee --- /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> +<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="1280" height="720" 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 000000000..fb57a8f90 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..a6e43e82c --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..7ead3aebd --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + font-size: 36px; + 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 000000000..7392ca9c0 --- /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> +<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="1280" height="720" 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 000000000..30ca28885 --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + font-size: 36px; + 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 000000000..51cef0e8d --- /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> +<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="1280" height="720" 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 000000000..8375977a5 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..98ad93694 --- /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> +<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="1280" height="720" 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 000000000..6675e8c24 --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + font-size: 36px; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + font: italic small-caps bold 36px/72px 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 000000000..8626d9ea5 --- /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> +<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: 36px; + line-height: 72px; + font-family: sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" 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 000000000..b656ea98f --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + font-size: 36px; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + font: normal small-caps bold 36px/72px 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 000000000..522a20dae --- /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> +<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 36px/72px sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" 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 000000000..275f00f3f --- /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,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(|v) should match</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + 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: 36px +} +.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 000000000..aa5eb258f --- /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,28 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(|v) should match</title> +<link rel="match" href="voice_namespace-ref.html"> +<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="1280" height="720" 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 000000000..2d2fd34b4 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..082be8e32 --- /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> +<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="1280" height="720" 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 000000000..01731bd11 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..260243ad6 --- /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> +<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="1280" height="720" 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 000000000..b6bc91f1b --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..217dbfa53 --- /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> +<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="1280" height="720" 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 000000000..b67b96c59 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..de83df957 --- /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> +<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="1280" height="720" 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 000000000..9face626e --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..4c515ccb3 --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..e7bb2ec44 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..afb1af1f5 --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..b672da26e --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..a10ab6db3 --- /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> +<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="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <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 000000000..cac9a8697 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..2f67bf2cd --- /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> +<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="1280" height="720" 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 000000000..046d1a29b --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..e8e272cda --- /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> +<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="1280" height="720" 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 000000000..014a2c8c6 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..45bb59a2d --- /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> +<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="1280" height="720" 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 000000000..59d9d35c3 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..a7a31727c --- /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> +<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="1280" height="720" 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 000000000..c15e59e63 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..610c07dba --- /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> +<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="1280" height="720" 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 000000000..9ae0bf8d7 --- /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,28 @@ +<!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: 1280px; + height: 720px; + font-size: 36px; + 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 +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most <br>likely will span over several <br>rows since it's a pretty long cue <br>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 000000000..06a0d0f7f --- /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> +<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="1280" height="720" 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 000000000..af1988c7b --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..5d99d4c50 --- /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> +<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="1280" height="720" 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 000000000..8e5fc0699 --- /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: 1280px; + height: 720px; + position: relative +} +.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: 36px; + 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 000000000..a6105695c --- /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> +<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="1280" height="720" 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 000000000..bb5f6d5d4 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..469b5c7e3 --- /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> +<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="1280" height="720" 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 000000000..c1519e74f --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..510f0e964 --- /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> +<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="1280" height="720" 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 000000000..bc8214d2c --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..15d21e8f8 --- /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> +<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="1280" height="720" 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 000000000..8b7ccdad6 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..6979f1d80 --- /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: 1280px; + height: 720px; + font-size: 36px; + 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 000000000..2a42498d6 --- /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> +<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="1280" height="720" 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 000000000..ef6f37fa6 --- /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> +<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="1280" height="720" 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 000000000..1ad6d44c5 --- /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,28 @@ +<!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: 1280px; + height: 720px; + font-size: 36px; + 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_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 000000000..51919b625 --- /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> +<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="1280" height="720" 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 000000000..4097c4b66 --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + font-size: 36px; + 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 000000000..53148d8be --- /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> +<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="1280" height="720" 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 000000000..f8d433ae2 --- /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,40 @@ +<!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: 1280px; + height: 720px; + position: relative; + color: #f0f; + white-space: pre-line; + font: italic small-caps bold 36px/72px sans-serif; + text-shadow: 0px 0px 5px #0f0; + background: #0f0 url('../../media/background.gif') repeat-x top left; + outline: solid #00f 2px; +} +.videoWhite { + position: absolute; + top: 0; + left: 160px; + width: 960px; + height: 720px;; + 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 000000000..381c63c18 --- /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> +<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 36px/72px 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="1280" height="720" 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 000000000..b24a2595f --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + font-size: 36px; + 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 000000000..6f07cb8ae --- /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> +<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="1280" height="720" 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 000000000..1b3744ab6 --- /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: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + font-size: 36px; + 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 000000000..431ca4c6d --- /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> +<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="1280" height="720" 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 000000000..c76f675cf --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/size_50-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, size:50%</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</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 000000000..9888cb687 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/size_50.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, size:50%</title> +<link rel="match" href="size_50-ref.html"> +<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="1280" height="720" 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/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 000000000..d4a967924 --- /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:50% +This is a test subtitle + +00:00:01.000 --> 00:00:05.000 line:50% +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 000000000..227e7db6e --- /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 000000000..6c99ce3b1 --- /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:50% +This is a test subtitle + +00:00:01.000 --> 00:00:05.000 line:49% +This is another test subtitle 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 000000000..83f691e6f --- /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 000000000..09ace0d22 --- /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_middle.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_middle.vtt new file mode 100644 index 000000000..cdee051d7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_middle.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 align:middle +This is a test diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_middle_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_middle_long.vtt new file mode 100644 index 000000000..8c89441a9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_middle_long.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 align:middle +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_middle_position_50.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_middle_position_50.vtt new file mode 100644 index 000000000..c44377398 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_middle_position_50.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 align:middle position:50% +This is a test diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_middle_position_gt_50.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_middle_position_gt_50.vtt new file mode 100644 index 000000000..186ae1ecd --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_middle_position_gt_50.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 align:middle position:90% +Awesome!!! diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_middle_position_lt_50.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_middle_position_lt_50.vtt new file mode 100644 index 000000000..6928c5dc2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_middle_position_lt_50.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 align:middle position:10% +Awesome!!! diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_middle_position_lt_50_size_gt_maximum_size.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_middle_position_lt_50_size_gt_maximum_size.vtt new file mode 100644 index 000000000..32bc4ed3f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_middle_position_lt_50_size_gt_maximum_size.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 align:middle position:10% size:75% +Awesome!!! 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 000000000..161c45746 --- /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 000000000..c70ac13ea --- /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 000000000..19e674501 --- /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/bold_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_long.vtt new file mode 100644 index 000000000..c452682e4 --- /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 000000000..53508f991 --- /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 000000000..85474b1b9 --- /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 000000000..a551d6774 --- /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_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 000000000..d95f76025 --- /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 000000000..2e328ab9b --- /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 000000000..3a8a88cf7 --- /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 000000000..36373d2e2 --- /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: & < > ‎ ‏ 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 000000000..b533895c6 --- /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 000000000..325df1e50 --- /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 000000000..047d80edd --- /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/italic_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_long.vtt new file mode 100644 index 000000000..75cbd1e6e --- /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 000000000..d239c4ee2 --- /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 000000000..94b03a207 --- /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 000000000..0f366c18c --- /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 000000000..18d2bd46a --- /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 000000000..414c9de39 --- /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 000000000..acf612c44 --- /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 000000000..6a1326e94 --- /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 000000000..819f8e2a2 --- /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 000000000..47819a051 --- /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 000000000..1a7bd7fed --- /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 000000000..b9b3fecf6 --- /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 000000000..b165af153 --- /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/test.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test.vtt new file mode 100644 index 000000000..ab71ec598 --- /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 000000000..5709f4dd3 --- /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 000000000..1eebeea5c --- /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 000000000..8ee08aada --- /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 000000000..c17abc9c9 --- /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 000000000..11c2c81de --- /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 000000000..a2255d000 --- /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 000000000..826ec1de1 --- /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 000000000..c41fe2e16 --- /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 000000000..8b1f02183 --- /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 000000000..7894c87e0 --- /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 000000000..3e25cff69 --- /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 000000000..8f1f37581 --- /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 000000000..6deac9306 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues.vtt @@ -0,0 +1,64 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +abcdefghijklmnopqrstuvw 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 000000000..1363acb60 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues_wrapped.vtt @@ -0,0 +1,61 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 +This is a test subtitle + +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 000000000..24cd29be6 --- /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 000000000..9367a095a --- /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 000000000..81d21a453 --- /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 000000000..19dc55c45 --- /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 000000000..fdc74bf4f --- /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 000000000..a0b953d6c --- /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 000000000..f09715156 --- /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 000000000..7f4ee2840 --- /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 000000000..54905bfb7 --- /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 000000000..e6d942b96 --- /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 000000000..fc6284210 --- /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 the cue must be cut when displayed, because it does not fit on the screen. This is a test subtitle that should wrap several times and become so long that the cue must be cut when displayed, because it does not fit on 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 000000000..1a443df09 --- /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 000000000..b5d2089fb --- /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 000000000..99f493770 --- /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 000000000..99b772ffd --- /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 000000000..535221239 --- /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 000000000..7807ca32a --- /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 000000000..a14dfb92b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, too many cues - cues that cannot fit should not be shown</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br></span></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 000000000..573ffcc21 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues.html @@ -0,0 +1,22 @@ +<!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"> +<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="1280" height="720" 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 000000000..f05cd51f8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, too many cues (wrapped) - cues that cannot fit should not be shown</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.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; + font-size: 36px; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle</span></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 000000000..beb816001 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped.html @@ -0,0 +1,22 @@ +<!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"> +<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="1280" height="720" 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/webvtt-api-for-browsers/vttcue-interface/align.html b/testing/web-platform/tests/webvtt/webvtt-api-for-browsers/vttcue-interface/align.html new file mode 100644 index 000000000..dcae64fca --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-api-for-browsers/vttcue-interface/align.html @@ -0,0 +1,54 @@ +<!doctype html> +<title>VTTCue.align</title> +<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 c1 = new VTTCue(0, 1, 'text1'); + assert_equals(c1.align, 'center'); + var track = document.createElement('track'); + var t = track.track; + t.addCue(c1); + assert_equals(c1.align, 'center'); + video.appendChild(track); + assert_equals(c1.align, 'center'); + t.mode = 'showing'; + assert_equals(c1.align, 'center'); + c1.align = 'start'; + assert_equals(c1.align, 'start'); + c1.align = 'end'; + assert_equals(c1.align, 'end'); + c1.align = 'start\u0000'; + assert_equals(c1.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 = 'data:text/vtt,'+encodeURIComponent('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'); + t.track.mode = 'showing'; + video.appendChild(t); +}); +</script> diff --git a/testing/web-platform/tests/webvtt/webvtt-api-for-browsers/vttcue-interface/getCueAsHTML.html b/testing/web-platform/tests/webvtt/webvtt-api-for-browsers/vttcue-interface/getCueAsHTML.html new file mode 100644 index 000000000..5be09a5d3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-api-for-browsers/vttcue-interface/getCueAsHTML.html @@ -0,0 +1,92 @@ +<!doctype html> +<title>VTTCue.getCueAsHTML()</title> +<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><00: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, '00:00:00.500', 'data'); + assert_true(frag.childNodes[8] instanceof ProcessingInstruction, 'instanceof'); +}, document.title+', <00: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/webvtt-api-for-browsers/vttcue-interface/line.html b/testing/web-platform/tests/webvtt/webvtt-api-for-browsers/vttcue-interface/line.html new file mode 100644 index 000000000..ae0bda9fa --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-api-for-browsers/vttcue-interface/line.html @@ -0,0 +1,62 @@ +<!doctype html> +<title>VTTCue.line</title> +<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 c1 = new VTTCue(0, 1, 'text1'); + assert_equals(c1.line, -1); + var track = document.createElement('track'); + var t = track.track; + t.addCue(c1); + assert_equals(c1.line, -1); + video.appendChild(track); + assert_equals(c1.line, -1); + t.mode = 'showing'; + assert_equals(c1.line, -1); + var c2 = new VTTCue(0, 1, 'text2'); + var track2 = document.createElement('track'); + var t2 = track2.track; + t2.addCue(c2); + assert_equals(c2.line, -1); + video.appendChild(track2); + t2.mode = 'showing'; + assert_equals(c2.line, -2); + assert_equals(c1.line, -1); + c1.line = -5; + assert_equals(c1.line, -5); + assert_equals(c2.line, -2); + c1.line = 0; + c1.snapToLines = false; + assert_equals(c1.line, 0); + assert_equals(c2.line, -2); +}, 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, -1); + 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 = 'data:text/vtt,'+encodeURIComponent('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'); + t.track.mode = 'showing'; + video.appendChild(t); +}); +</script> diff --git a/testing/web-platform/tests/webvtt/webvtt-api-for-browsers/vttcue-interface/snapToLines.html b/testing/web-platform/tests/webvtt/webvtt-api-for-browsers/vttcue-interface/snapToLines.html new file mode 100644 index 000000000..c28b9d064 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-api-for-browsers/vttcue-interface/snapToLines.html @@ -0,0 +1,97 @@ +<!doctype html> +<title>VTTCue.snapToLines</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.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(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 = 'data:text/vtt,'+encodeURIComponent('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'); + t.track.mode = 'showing'; + video.appendChild(t); +}); +</script> diff --git a/testing/web-platform/tests/webvtt/webvtt-api-for-browsers/vttcue-interface/text.html b/testing/web-platform/tests/webvtt/webvtt-api-for-browsers/vttcue-interface/text.html new file mode 100644 index 000000000..ec317f828 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-api-for-browsers/vttcue-interface/text.html @@ -0,0 +1,38 @@ +<!doctype html> +<title>VTTCue.text</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.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_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 = 'data:text/vtt,'+encodeURIComponent('WEBVTT\n\n00:00:00.000 --> 00:00:00.001\n'+ + '\n\nfoobar\n00:00:00.000 --> 00:00:00.001\ntest'); + t.track.mode = 'showing'; + video.appendChild(t); +}); +</script> diff --git a/testing/web-platform/tests/webvtt/webvtt-api-for-browsers/vttcue-interface/vertical.html b/testing/web-platform/tests/webvtt/webvtt-api-for-browsers/vttcue-interface/vertical.html new file mode 100644 index 000000000..51fd169ba --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-api-for-browsers/vttcue-interface/vertical.html @@ -0,0 +1,54 @@ +<!doctype html> +<title>VTTCue.vertical</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.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_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 = 'data:text/vtt,'+encodeURIComponent('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'); + t.track.mode = 'showing'; + video.appendChild(t); +}); +</script> diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/buildtests.py b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/buildtests.py new file mode 100644 index 000000000..5ad788bc0 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/buildtests.py @@ -0,0 +1,67 @@ +#!/usr/bin/python + +import os +import urllib +import hashlib + +doctmpl = """<!doctype html> +<title>WebVTT cue data parser test %s</title> +<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).hexdigest(), urllib.quote(input[:-1]), urllib.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 = "" + f = open('dat/'+file, "r") + while 1: + 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 = expected + line + elif state == "#data\n": + input = input + line + elif state == "#errors\n": + pass + elif state == "#document-fragment\n": + if line == "\n": + appendtest(tests, input, expected) + input = "" + expected = "" + state = "" + else: + expected = expected + line + else: + raise Exception("failed to parse file "+file+" line:"+line+" (state: "+state+")") + f.close() + barename = file.replace(".dat", "") + out = open('tests/'+barename+".html", "w") + out.write(doctmpl % (barename, ",\n".join(tests))) + out.close() diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/common.js b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/common.js new file mode 100644 index 000000000..543fe4655 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/common.js @@ -0,0 +1,189 @@ +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; + track.src = 'data:text/vtt,'+encodeURIComponent('WEBVTT\n\n00:00.000 --> 00:01.000\n')+test.input; + 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/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/dat/entities.dat b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/dat/entities.dat new file mode 100644 index 000000000..cddcb27ff --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/dat/entities.dat @@ -0,0 +1,114 @@ +#data +& +#errors +#document-fragment +| "&" + +#data +& +#errors +#document-fragment +| "&" + +#data +& +#errors +#document-fragment +| "&" + +#data +& +#errors +#document-fragment +| "&" + +#data +< +#errors +#document-fragment +| "<" + +#data +> +#errors +#document-fragment +| ">" + +#data +a‎b +#errors +#document-fragment +| "ab" + +#data +a‏b +#errors +#document-fragment +| "ab" + +#data +" +#errors +#document-fragment +| """ + +#data + +#errors +#document-fragment +| " " + +#data +© +#errors +#document-fragment +| "©" + +#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 +  +#errors +#document-fragment +| " " + +#data +  +#errors +#document-fragment +| " " + +#data +&; +#errors +#document-fragment +| "&;" diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/dat/tags.dat b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/dat/tags.dat new file mode 100644 index 000000000..425af32e2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/dat/tags.dat @@ -0,0 +1,56 @@ +#data +< +#errors +#document-fragment + +#data +<< +#errors +#document-fragment + +#data +< +#errors +#document-fragment + +#data +< + +#errors +#document-fragment + +#data +< +#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" diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/dat/timestamps.dat b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/dat/timestamps.dat new file mode 100644 index 000000000..ba0f686ae --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/dat/timestamps.dat @@ -0,0 +1,58 @@ +#data +<0 +#errors +#document-fragment + +#data +<0.500 +#errors +#document-fragment + +#data +<0: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/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/dat/tree-building.dat b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/dat/tree-building.dat new file mode 100644 index 000000000..08410d1ff --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/dat/tree-building.dat @@ -0,0 +1,171 @@ +#data +test +#errors +#document-fragment +| "test" + +#data +<c>test +#errors +#document-fragment +| <span> +| "test" + +#data +<i>test +#errors +#document-fragment +| <i> +| "test" + +#data +<b>test +#errors +#document-fragment +| <b> +| "test" + +#data +<u>test +#errors +#document-fragment +| <u> +| "test" + +#data +<ruby>test +#errors +#document-fragment +| <ruby> +| "test" + +#data +<rt>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" + +#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" diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/tests/entities.html b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/tests/entities.html new file mode 100644 index 000000000..2568258a2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/tests/entities.html @@ -0,0 +1,32 @@ +<!doctype html> +<title>WebVTT cue data parser test entities</title> +<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%26amp%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%26AMP%3B%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%26quot%3B%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%26copy%3B%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%26%2332%3B%22'}, +{name:'5b77a0be23453dfe6eea59d43bb0708f89e1df82', input:'%26%23x20%3B', expected:'%23document-fragment%0A%7C%20%22%26%23x20%3B%22'}, +{name:'87986551b0e6180cb279f2aa4cdddf77daa90c11', input:'%26%3B', expected:'%23document-fragment%0A%7C%20%22%26%3B%22'} +]); +</script> diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/tests/tags.html b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/tests/tags.html new file mode 100644 index 000000000..d42478dc9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/tests/tags.html @@ -0,0 +1,23 @@ +<!doctype html> +<title>WebVTT cue data parser test tags</title> +<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'} +]); +</script> diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/tests/timestamps.html b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/tests/timestamps.html new file mode 100644 index 000000000..bc19e2d8e --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/tests/timestamps.html @@ -0,0 +1,22 @@ +<!doctype html> +<title>WebVTT cue data parser test timestamps</title> +<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:'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/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/tests/tree-building.html b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/tests/tree-building.html new file mode 100644 index 000000000..98062f830 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-cue-text-parsing-rules/tests/tree-building.html @@ -0,0 +1,33 @@ +<!doctype html> +<title>WebVTT cue data parser test tree-building</title> +<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:'6ceded63b53eeab3681a0fc540e959ca88f7dce9', input:'%3Cc%3Etest', expected:'%23document-fragment%0A%7C%20%3Cspan%3E%0A%7C%20%20%20%22test%22'}, +{name:'71de37451e7d5524eacc8a190d21cd64c4304e14', input:'%3Ci%3Etest', expected:'%23document-fragment%0A%7C%20%3Ci%3E%0A%7C%20%20%20%22test%22'}, +{name:'985284b688a09f1f55e3c9aab49d7e4ca11f870a', input:'%3Cb%3Etest', expected:'%23document-fragment%0A%7C%20%3Cb%3E%0A%7C%20%20%20%22test%22'}, +{name:'fa6993eaa94404648d8b52e2830e53369404fdcb', input:'%3Cu%3Etest', expected:'%23document-fragment%0A%7C%20%3Cu%3E%0A%7C%20%20%20%22test%22'}, +{name:'e4d351e1a6b40a7dace801b722efaa200c4895f2', input:'%3Cruby%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22'}, +{name:'68e1d0376f827ebe0c047751a2067594ff41b612', input:'%3Crt%3Etest', 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'}, +{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'} +]); +</script> diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/001.html b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/001.html new file mode 100644 index 000000000..2cba0a1ad --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/001.html @@ -0,0 +1,96 @@ +<!doctype html> +<title>WebVTT parser tests</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +setup({explicit_done: true}); +var files = []; +var path = 'support/'; +var cueDefaults = { +"id":"", +"startTime":0, +"endTime":1, +"pauseOnExit":false, +//"vertical":"", (not supported) +"snapToLines":true, +"line":"auto", +"position":"auto", +"size":100, +"align":"center" +} +var cueCounts; +(function(){ + var xhr = new XMLHttpRequest(); + xhr.open('GET', path+'cue-counts.json', true); + xhr.onreadystatechange = function() { + if (xhr.readyState == 4) { + cueCounts = JSON.parse(xhr.responseText); + for (var file in cueCounts) { + files.push(file); + } + startTests(); + } + } + xhr.send(); +})(); + +function checkProps(cue, exp, i) { + for (var prop in cueDefaults) { + if (!(prop in exp)) + exp[prop] = cueDefaults[prop]; + assert_equals(cue[prop], exp[prop], prop + ' (cue '+(i+1)+')'); + } +} + +function startTests() { + files.forEach(function(file) { + var t = async_test(document.title+', '+file); + t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = path + 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); + }); + }); + done(); +} + +function trackLoaded(e) { + var track = e.target; + var video = track.parentNode; + setTimeout(removeElm, 0, video); + var cues = video.textTracks[0].cues; + var file = track.src.substr(track.src.lastIndexOf('/') + 1); + assert_equals(cues.length, cueCounts[file], 'number of cues'); + var expected; + var cue; + for (var i = 0; i < cues.length; ++i) { + cue = cues[i]; + expected = JSON.parse(cue.text); + assert_not_equals(expected, 'FAIL', 'cue '+(i+1)+' should have been dropped'); + checkProps(cue, expected, i); + } + this.done(); +} + +function trackError(e) { + var track = e.target; + var video = track.parentNode; + setTimeout(removeElm, 0, video); + var file = track.src.substr(track.src.lastIndexOf('/') + 1); + assert_equals('error', cueCounts[file], 'got unexpected error event'); + this.done(); +} + +function removeElm(elm) { + document.body.removeChild(elm); +} + +</script> diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/arrows.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/arrows.vtt new file mode 100644 index 000000000..057cede29 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/arrows.vtt @@ -0,0 +1,19 @@ +WEBVTT + +--> +00:00:00.000 --> 00:00:01.000 +{} +foo--> +00:00:00.000 --> 00:00:01.000 +{} +-->foo +00:00:00.000 --> 00:00:01.000 +{} +---> +00:00:00.000 --> 00:00:01.000 +{} +-->--> +00:00:00.000 --> 00:00:01.000 +{} +00:00:00.000 --> 00:00:01.000 +{} diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/cue-counts.json b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/cue-counts.json new file mode 100644 index 000000000..7fcf35b6b --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/cue-counts.json @@ -0,0 +1,36 @@ +{"settings-vertical.vtt":6, +"settings-size.vtt":12, +"settings-position.vtt":13, +"settings-multiple.vtt":2, +"settings-line.vtt":29, +"settings-align.vtt":9, +"signature-bom.vtt":0, +"signature-space.vtt":0, +"signature-space-no-newline.vtt":0, +"signature-tab.vtt":0, +"signature-tab-no-newline.vtt":0, +"signature-timings.vtt":0, +"signature-two-boms.vtt":"error", +"signature-lowercase.vtt":"error", +"signature-too-short.vtt":"error", +"signature-websrt.vtt":"error", +"signature-formfeed.vtt":"error", +"signature-null.vtt":"error", +"signature-no-newline.vtt":0, +"no-signature.vtt":"error", +"nulls.vtt":7, +"header-garbage.vtt":1, +"header-timings.vtt":1, +"header-space.vtt":1, +"header-tab.vtt":1, +"ids.vtt":5, +"arrows.vtt":6, +"space-chars.vtt":3, +"timings-garbage.vtt":0, +"timings-too-short.vtt":2, +"timings-too-long.vtt":2, +"newlines.vtt":4, +"omitted-hours.vtt":3, +"timings-60.vtt":2, +"timings-negative.vtt":4 +} diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/header-garbage.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/header-garbage.vtt new file mode 100644 index 000000000..5935db50f --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/header-garbage.vtt @@ -0,0 +1,5 @@ +WEBVTT +foobar + +00:00:00.000 --> 00:00:01.000 +{}
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/header-space.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/header-space.vtt new file mode 100644 index 000000000..62a742638 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/header-space.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:01.000 +{} diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/header-tab.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/header-tab.vtt new file mode 100644 index 000000000..f8eac7084 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/header-tab.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:01.000 +{} diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/header-timings.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/header-timings.vtt new file mode 100644 index 000000000..bd084debc --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/header-timings.vtt @@ -0,0 +1,3 @@ +WEBVTT +00:00:00.000 --> 00:00:01.000 +{}
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/ids.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/ids.vtt new file mode 100644 index 000000000..ea335ee9e --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/ids.vtt @@ -0,0 +1,21 @@ +WEBVTT + + leading space +00:00:00.000 --> 00:00:01.000 +{"id":" leading space"} + +trailing space +00:00:00.000 --> 00:00:01.000 +{"id":"trailing space "} + +-- > +00:00:00.000 --> 00:00:01.000 +{"id":"-- >"} + +-> +00:00:00.000 --> 00:00:01.000 +{"id":"->"} + + +00:00:00.000 --> 00:00:01.000 +{"id":" "}
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/newlines.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/newlines.vtt new file mode 100644 index 000000000..ee2f00804 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/newlines.vtt @@ -0,0 +1,12 @@ +WEBVTT
cr
00:00:00.000 --> 00:00:01.000
{"id":"cr"} + +lf +00:00:00.000 --> 00:00:01.000 +{"id":"lf"}
+
+crlf
+00:00:00.000 --> 00:00:01.000
+{"id":"crlf"} +
lfcr
00:00:00.000 --> 00:00:01.000 +{"id":"lfcr"} +
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/no-signature.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/no-signature.vtt new file mode 100644 index 000000000..44ad48084 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/no-signature.vtt @@ -0,0 +1,2 @@ +00:00:00.000 --> 00:00:01.000 +"FAIL" diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/nulls.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/nulls.vtt Binary files differnew file mode 100644 index 000000000..85669c265 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/nulls.vtt diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/omitted-hours.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/omitted-hours.vtt new file mode 100644 index 000000000..3222dea37 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/omitted-hours.vtt @@ -0,0 +1,10 @@ +WEBVTT + +00:00.000 --> 00:00:01.000 +{} + +00:00:00.000 --> 00:01.000 +{} + +00:00.000 --> 00:01.000 +{} diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-align.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-align.vtt new file mode 100644 index 000000000..1a7ae1b6e --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-align.vtt @@ -0,0 +1,28 @@ +WEBVTT + +00:00:00.000 --> 00:00:01.000 align:start +{"align":"start"} + +00:00:00.000 --> 00:00:01.000 align:center +{"align":"center"} + +00:00:00.000 --> 00:00:01.000 align:end +{"align":"end"} + +00:00:00.000 --> 00:00:01.000 align:start align:end +{"align":"end"} + +00:00:00.000 --> 00:00:01.000 align:end align:CENTER +{"align":"end"} + +00:00:00.000 --> 00:00:01.000 align:end align: center +{"align":"end"} + +00:00:00.000 --> 00:00:01.000 align:end align: +{"align":"end"} + +00:00:00.000 --> 00:00:01.000 align:end align +{"align":"end"} + +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 +{"align":"center"}
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-line.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-line.vtt new file mode 100644 index 000000000..615ee7748 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-line.vtt @@ -0,0 +1,88 @@ +WEBVTT + +00:00:00.000 --> 00:00:01.000 line:-1 +{"line":-1} + +00:00:00.000 --> 00:00:01.000 line:0 +{"line":0} + +00:00:00.000 --> 00:00:01.000 line:-0 +{"line":0} + +00:00:00.000 --> 00:00:01.000 line:1 +{"line":1} + +00:00:00.000 --> 00:00:01.000 line:100 +{"line":100} + +00:00:00.000 --> 00:00:01.000 line:101 +{"line":101} + +00:00:00.000 --> 00:00:01.000 line:65536 +{"line":65536} + +00:00:00.000 --> 00:00:01.000 line:4294967296 +{"line":4294967296} + +00:00:00.000 --> 00:00:01.000 line:18446744073709552000 +{"line":18446744073709552000} + +00:00:00.000 --> 00:00:01.000 line:10000000000000000000000000000000000 +{"line":10000000000000000000000000000000000} + +00:00:00.000 --> 00:00:01.000 line:65536% +{} + +00:00:00.000 --> 00:00:01.000 line:4294967296% +{} + +00:00:00.000 --> 00:00:01.000 line:18446744073709552000% +{} + +00:00:00.000 --> 00:00:01.000 line:10000000000000000000000000000000000% +{} + +00:00:00.000 --> 00:00:01.000 line:1.5 +{"line":1.5} + +00:00:00.000 --> 00:00:01.000 line:0% +{"snapToLines":false, "line":0} + +00:00:00.000 --> 00:00:01.000 line:-0% +{} + +00:00:00.000 --> 00:00:01.000 line:101% +{} + +00:00:00.000 --> 00:00:01.000 line:100% +{"snapToLines":false, "line":100} + +00:00:00.000 --> 00:00:01.000 line:1%- +{} + +00:00:00.000 --> 00:00:01.000 line:1- +{} + +00:00:00.000 --> 00:00:01.000 line:%1 +{} + +00:00:00.000 --> 00:00:01.000 line:1%% +{} + +00:00:00.000 --> 00:00:01.000 line:00% +{"snapToLines":false, "line":0} + +00:00:00.000 --> 00:00:01.000 line:0%0 +{} + +00:00:00.000 --> 00:00:01.000 line: 0% +{} + +00:00:00.000 --> 00:00:01.000 line:0%x +{} + +00:00:00.000 --> 00:00:01.000 line:- +{} + +00:00:00.000 --> 00:00:01.000 line:% +{}
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-multiple.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-multiple.vtt new file mode 100644 index 000000000..37338bb37 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-multiple.vtt @@ -0,0 +1,16 @@ +WEBVTT + +00:00:00.000 --> 00:00:01.000 align:start line:1% vertical:lr size:50% position:25% +{"align":"start", +"line":1, +"snapToLines":false, +"vertical":"lr", +"size":50, +"position":25} + +00:00:00.000 --> 00:00:01.000 align:center line:1 vertical:rl size:0% position:100% +{"align":"center", +"line":1, +"vertical":"rl", +"size":0, +"position":100}
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-position.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-position.vtt new file mode 100644 index 000000000..53a03ff64 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-position.vtt @@ -0,0 +1,40 @@ +WEBVTT + +00:00:00.000 --> 00:00:01.000 position:-1% +{} + +00:00:00.000 --> 00:00:01.000 position:1 +{} + +00:00:00.000 --> 00:00:01.000 position:1x +{} + +00:00:00.000 --> 00:00:01.000 position:1%x +{} + +00:00:00.000 --> 00:00:01.000 position: +{} + +00:00:00.000 --> 00:00:01.000 position: 1% +{} + +00:00:00.000 --> 00:00:01.000 position:1% +{"position":1} + +00:00:00.000 --> 00:00:01.000 position:100% +{"position":100} + +00:00:00.000 --> 00:00:01.000 position:101% +{} + +00:00:00.000 --> 00:00:01.000 position:1% position:x +{"position":1} + +00:00:00.000 --> 00:00:01.000 position:1.5% +{"position":1.5} + +00:00:00.000 --> 00:00:01.000 position:65536% +{} + +00:00:00.000 --> 00:00:01.000 position:4294967296% +{}
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-size.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-size.vtt new file mode 100644 index 000000000..5de885fd3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-size.vtt @@ -0,0 +1,37 @@ +WEBVTT + +00:00:00.000 --> 00:00:01.000 size: +{} + +00:00:00.000 --> 00:00:01.000 size:x +{} + +00:00:00.000 --> 00:00:01.000 size:1xx size:2% +{"size":2} + +00:00:00.000 --> 00:00:01.000 size:% +{} + +00:00:00.000 --> 00:00:01.000 size:%% +{} + +00:00:00.000 --> 00:00:01.000 size:1%% +{} + +00:00:00.000 --> 00:00:01.000 size:1%x +{} + +00:00:00.000 --> 00:00:01.000 size:0% +{"size":0} + +00:00:00.000 --> 00:00:01.000 size:00% +{"size":0} + +00:00:00.000 --> 00:00:01.000 size:50% size:100% +{"size":100} + +00:00:00.000 --> 00:00:01.000 size:101% +{} + +00:00:00.000 --> 00:00:01.000 size:50% size:101% +{"size":50}
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-vertical.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-vertical.vtt new file mode 100644 index 000000000..cae64cbf8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/settings-vertical.vtt @@ -0,0 +1,19 @@ +WEBVTT + +00:00:00.000 --> 00:00:01.000 vertical:lr +{"vertical":"lr"} + +00:00:00.000 --> 00:00:01.000 vertical:rl +{"vertical":"rl"} + +00:00:00.000 --> 00:00:01.000 vertical:rl vertical:lr +{"vertical":"lr"} + +00:00:00.000 --> 00:00:01.000 vertical: +{} + +00:00:00.000 --> 00:00:01.000 vertical:RL +{} + +00:00:00.000 --> 00:00:01.000 vertical:vertical-rl +{}
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-bom.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-bom.vtt new file mode 100644 index 000000000..c0a105777 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-bom.vtt @@ -0,0 +1 @@ +WEBVTT diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-formfeed.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-formfeed.vtt new file mode 100644 index 000000000..0ba528637 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-formfeed.vtt @@ -0,0 +1 @@ +WEBVTT diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-lowercase.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-lowercase.vtt new file mode 100644 index 000000000..994d1694f --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-lowercase.vtt @@ -0,0 +1 @@ +webvtt diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-no-newline.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-no-newline.vtt new file mode 100644 index 000000000..af1827ddf --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-no-newline.vtt @@ -0,0 +1 @@ +WEBVTT
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-null.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-null.vtt Binary files differnew file mode 100644 index 000000000..ead93cc16 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-null.vtt diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-space-no-newline.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-space-no-newline.vtt new file mode 100644 index 000000000..6abbf425a --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-space-no-newline.vtt @@ -0,0 +1 @@ +WEBVTT
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-space.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-space.vtt new file mode 100644 index 000000000..1352a2093 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-space.vtt @@ -0,0 +1 @@ +WEBVTT diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-tab-no-newline.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-tab-no-newline.vtt new file mode 100644 index 000000000..e28ec9b83 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-tab-no-newline.vtt @@ -0,0 +1 @@ +WEBVTT
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-tab.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-tab.vtt new file mode 100644 index 000000000..ab4bb0ea6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-tab.vtt @@ -0,0 +1 @@ +WEBVTT diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-timings.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-timings.vtt new file mode 100644 index 000000000..036788609 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-timings.vtt @@ -0,0 +1,2 @@ +WEBVTT 00:00:00.000 --> 00:00:01.000 +"FAIL" diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-too-short.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-too-short.vtt new file mode 100644 index 000000000..3e5de2b6c --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-too-short.vtt @@ -0,0 +1 @@ +WEBVT diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-two-boms.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-two-boms.vtt new file mode 100644 index 000000000..05c973be1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-two-boms.vtt @@ -0,0 +1 @@ +WEBVTT diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-websrt.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-websrt.vtt new file mode 100644 index 000000000..4a02525e3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/signature-websrt.vtt @@ -0,0 +1 @@ +WEBSRT diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/space-chars.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/space-chars.vtt new file mode 100644 index 000000000..012e94dea --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/space-chars.vtt @@ -0,0 +1,17 @@ +WEBVTT + +spaces + 00:00:00.000 --> 00:00:01.000 +{"id":"spaces"} + +tabs + 00:00:00.000 --> 00:00:01.000 +{"id":"tabs"} + +form feed + 00:00:00.000 --> 00:00:01.000 +{"id":"form feed"} + +vertical tab + 00:00:00.000 --> 00:00:01.000 +"FAIL"
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/timings-60.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/timings-60.vtt new file mode 100644 index 000000000..137a56e41 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/timings-60.vtt @@ -0,0 +1,20 @@ +WEBVTT + +00:00:60.000 --> 00:00:01.000 +"FAIL" + +00:60:00.000 --> 00:00:01.000 +"FAIL" + +00:00:00.000 --> 00:00:60.000 +"FAIL" + +00:00:00.000 --> 00:60:00.000 +"FAIL" + +00:00:00.000 --> 60:00:01.000 +{"endTime":216001} + +60:00:00.000 --> 60:00:01.000 +{"startTime":216000, +"endTime":216001} diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/timings-garbage.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/timings-garbage.vtt new file mode 100644 index 000000000..896986737 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/timings-garbage.vtt @@ -0,0 +1,190 @@ +WEBVTT + +x00:00:00.000 --> 00:00:01.000 +"FAIL" + +0x0:00:00.000 --> 00:00:01.000 +"FAIL" + +00x:00:00.000 --> 00:00:01.000 +"FAIL" + +00:x00:00.000 --> 00:00:01.000 +"FAIL" + +00:0x0:00.000 --> 00:00:01.000 +"FAIL" + +00:00x:00.000 --> 00:00:01.000 +"FAIL" + +00:00:x00.000 --> 00:00:01.000 +"FAIL" + +00:00:0x0.000 --> 00:00:01.000 +"FAIL" + +00:00:00x.000 --> 00:00:01.000 +"FAIL" + +00:00:00.x000 --> 00:00:01.000 +"FAIL" + +00:00:00.0x00 --> 00:00:01.000 +"FAIL" + +00:00:00.00x0 --> 00:00:01.000 +"FAIL" + +00:00:00.000x --> 00:00:01.000 +"FAIL" + +00:00:00.000 x--> 00:00:01.000 +"FAIL" + +00:00:00.000 -x-> 00:00:01.000 +"FAIL" + +00:00:00.000 --x> 00:00:01.000 +"FAIL" + +00:00:00.000 -->x 00:00:01.000 +"FAIL" + +00:00:00.000 --> x00:00:01.000 +"FAIL" + +00:00:00.000 --> 0x0:00:01.000 +"FAIL" + +00:00:00.000 --> 00x:00:01.000 +"FAIL" + +00:00:00.000 --> 00:x00:01.000 +"FAIL" + +00:00:00.000 --> 00:0x0:01.000 +"FAIL" + +00:00:00.000 --> 00:00x:01.000 +"FAIL" + +00:00:00.000 --> 00:00:x01.000 +"FAIL" + +00:00:00.000 --> 00:00:0x1.000 +"FAIL" + +00:00:00.000 --> 00:00:01x.000 +"FAIL" + +00:00:00.000 --> 00:00:01.x000 +"FAIL" + +00:00:00.000 --> 00:00:01.0x00 +"FAIL" + +00:00:00.000 --> 00:00:01.00x0 +"FAIL" + +x0:00:00.000 --> 00:00:01.000 +"FAIL" + +0x:00:00.000 --> 00:00:01.000 +"FAIL" + +00x00:00.000 --> 00:00:01.000 +"FAIL" + +00:x0:00.000 --> 00:00:01.000 +"FAIL" + +00:0x:00.000 --> 00:00:01.000 +"FAIL" + +00:00x00.000 --> 00:00:01.000 +"FAIL" + +00:00:x0.000 --> 00:00:01.000 +"FAIL" + +00:00:0x.000 --> 00:00:01.000 +"FAIL" + +00:00:00x000 --> 00:00:01.000 +"FAIL" + +00:00:00.x00 --> 00:00:01.000 +"FAIL" + +00:00:00.0x0 --> 00:00:01.000 +"FAIL" + +00:00:00.00x --> 00:00:01.000 +"FAIL" + +00:00:00.000x--> 00:00:01.000 +"FAIL" + +00:00:00.000 x-> 00:00:01.000 +"FAIL" + +00:00:00.000 -x> 00:00:01.000 +"FAIL" + +00:00:00.000 --x 00:00:01.000 +"FAIL" + +00:00:00.000 -->x00:00:01.000 +"FAIL" + +00:00:00.000 --> x0:00:01.000 +"FAIL" + +00:00:00.000 --> 0x:00:01.000 +"FAIL" + +00:00:00.000 --> 00x00:01.000 +"FAIL" + +00:00:00.000 --> 00:x0:01.000 +"FAIL" + +00:00:00.000 --> 00:0x:01.000 +"FAIL" + +00:00:00.000 --> 00:00x01.000 +"FAIL" + +00:00:00.000 --> 00:00:x1.000 +"FAIL" + +00:00:00.000 --> 00:00:0x.000 +"FAIL" + +00:00:00.000 --> 00:00:01x000 +"FAIL" + +00:00:00.000 --> 00:00:01.x00 +"FAIL" + +00:00:00.000 --> 00:00:01.0x0 +"FAIL" + +00:00:00.000 --> 00:00:01.00x +"FAIL" + +00.00:00.000 --> 00:00:01.000 +"FAIL" + +00:00.00.000 --> 00:00:01.000 +"FAIL" + +00:00:00:000 --> 00:00:01.000 +"FAIL" + +00:00.00:000 --> 00:00:01.000 +"FAIL" + +00:00:00,000 --> 00:00:01,000 +"FAIL"
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/timings-negative.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/timings-negative.vtt new file mode 100644 index 000000000..e13f0f254 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/timings-negative.vtt @@ -0,0 +1,13 @@ +WEBVTT + +00:00:00.000 --> 00:00:00.000 +{"endTime":0} + +00:00:01.000 --> 00:00:00.999 +{"startTime":1, "endTime":0.999} + +00:01:00.000 --> 00:00:59.999 +{"startTime":60, "endTime":59.999} + +01:00:00.000 --> 00:59:59.999 +{"startTime":3600, "endTime":3599.999} diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/timings-too-long.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/timings-too-long.vtt new file mode 100644 index 000000000..23b498b18 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/timings-too-long.vtt @@ -0,0 +1,47 @@ +WEBVTT + +000:00:00.000 --> 00:00:01.000 +{} + +00::00:00.000 --> 00:00:01.000 +"FAIL" + +00:000:00.000 --> 00:00:01.000 +"FAIL" + +00:00::00.000 --> 00:00:01.000 +"FAIL" + +00:00:000.000 --> 00:00:01.000 +"FAIL" + +00:00:00..000 --> 00:00:01.000 +"FAIL" + +00:00:00.0000 --> 00:00:01.000 +"FAIL" + +00:00.0000 --> 00:00:01.000 +"FAIL" + +000:00.000 --> 00:01.000 +"FAIL" + +00::00.000 --> 00:01.000 +"FAIL" + +00:000.000 --> 00:01.000 +"FAIL" + +00:00..000 --> 00:01.000 +"FAIL" + +00:00.0000 --> 00:01.000 +"FAIL" + +00:00.000 --> 000:01.000 +"FAIL" + +00:00:00.000 --> 000:00:01.000 +{} + diff --git a/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/timings-too-short.vtt b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/timings-too-short.vtt new file mode 100644 index 000000000..864ad3832 --- /dev/null +++ b/testing/web-platform/tests/webvtt/webvtt-file-format-parsing/webvtt-file-parsing/support/timings-too-short.vtt @@ -0,0 +1,98 @@ +WEBVTT + +0:00:00.000 --> 00:00:01.000 +{} + +0000:00.000 --> 00:00:01.000 +"FAIL" + +00:0:00.000 --> 00:00:01.000 +"FAIL" + +00:0000.000 --> 00:00:01.000 +"FAIL" + +00:00:0.000 --> 00:00:01.000 +"FAIL" + +00:00:00000 --> 00:00:01.000 +"FAIL" + +00:00:00.00 --> 00:00:01.000 +"FAIL" + +00:00:00.0 --> 00:00:01.000 +"FAIL" + +00:00:00. --> 00:00:01.000 +"FAIL" + +00:00:00 --> 00:00:01.000 +"FAIL" + +00:00:0 --> 00:00:01.000 +"FAIL" + +00:00: --> 00:00:01.000 +"FAIL" + +00:00 --> 00:00:01.000 +"FAIL" + +00:0 --> 00:00:01.000 +"FAIL" + +00: --> 00:00:01.000 +"FAIL" + +00 --> 00:00:01.000 +"FAIL" + +0 --> 00:00:01.000 +"FAIL" + + --> 00:00:01.000 +"FAIL" + +0:00.000 --> 00:01.000 +"FAIL" + +0000.000 --> 00:01.000 +"FAIL" + +00:0.000 --> 00:01.000 +"FAIL" + +00:00000 --> 00:01.000 +"FAIL" + +00:00.00 --> 00:01.000 +"FAIL" + +00:00.0 --> 00:01.000 +"FAIL" + +00:00. --> 00:01.000 +"FAIL" + +0:00. --> 00:01.000 +"FAIL" + +:00. --> 00:01.000 +"FAIL" + +00. --> 00:01.000 +"FAIL" + +0. --> 00:01.000 +"FAIL" + +. --> 00:01.000 +"FAIL" + +00:00.000 --> 0:01.000 +"FAIL" + +00:00:00.000 --> 0:00:01.000 +{} + |
