diff options
| author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
|---|---|---|
| committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
| commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
| tree | 10027f336435511475e392454359edea8e25895d /testing/web-platform/tests/webvtt/rendering | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip | |
Add m-esr52 at 52.6.0
Diffstat (limited to 'testing/web-platform/tests/webvtt/rendering')
521 files changed, 12221 insertions, 0 deletions
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> |
