diff options
Diffstat (limited to 'testing/web-platform/tests/webvtt/rendering')
610 files changed, 14212 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 0000000000..17222bdc7b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, repositioning (up) when 2 cues overlap completely</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; +} +.cueText { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"> + <span class="cue"> + <div><span class="cueText">This is another test subtitle</span></div> + <div><span class="cueText">This is a test subtitle</span></div> + </span> +</div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up.html new file mode 100644 index 0000000000..aca503f4b6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, repositioning (up) when 2 cues overlap completely</title> +<link rel="match" href="2_cues_overlapping_completely_move_up-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 2;" onseeked="this.onseeked = null; takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/2_cues_overlapping_completely_move_up.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down-ref.html new file mode 100644 index 0000000000..8262b9e598 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, repositioning (down) when 2 cues overlap partially</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +#cue1 { + position: absolute; + top: 50%; + left: 0; + right: 0; + margin-top: -4.5px; + text-align: center +} +#cue2 { + position: absolute; + top: 50%; + left: 0; + right: 0; + margin-top: 4.5px; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue" id="cue1"><span>This is a test subtitle</span></span><span class="cue" id="cue2"><span>This is another test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down.html new file mode 100644 index 0000000000..9620456780 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, repositioning (down) when 2 cues overlap partially</title> +<link rel="match" href="2_cues_overlapping_partially_move_down-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 2;" onseeked="this.onseeked = null; takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/2_cues_overlapping_partially_move_down.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up-ref.html new file mode 100644 index 0000000000..22a711af68 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, repositioning (down) when 2 cues overlap partially</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; +} +.cueText { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +.cueTextGoingUp { + position: relative; + top: -1.8px; /* 1% height of video's height */ +} +</style> +<div class="video"> + <span class="cue"> + <div><span class="cueText cueTextGoingUp">This is another test subtitle</span></div> + <div><span class="cueText">This is a test subtitle</span></div> + </span> +</div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up.html new file mode 100644 index 0000000000..2dedb8ee12 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, repositioning (down) when 2 cues overlap partially</title> +<link rel="match" href="2_cues_overlapping_partially_move_up-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 2;" onseeked="this.onseeked = null; takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/2_cues_overlapping_partially_move_up.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks-ref.html new file mode 100644 index 0000000000..464fbcff8b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for WebVTT rendering, 2 tracks enabled at the same time</title> +<script src="/common/reftest-wait.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; +} +.cueText { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"> + <video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + </video> + <span class="cue"> + <div><span class="cueText">This is a <u>test subtitle</u></span></div> + <div><span class="cueText">This is a test subtitle</span></div> + </span> +</div> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks.html new file mode 100644 index 0000000000..1a29be86a4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, 2 tracks enabled at the same time</title> +<link rel="match" href="2_tracks-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/test.vtt"> + <track src="support/test_underline.vtt"> +</video> +<script> +document.getElementsByTagName('track')[0].track.mode = 'showing'; +document.getElementsByTagName('track')[1].track.mode = 'showing'; +</script> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks-ref.html new file mode 100644 index 0000000000..3f155dd0ad --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for WebVTT rendering, 3 tracks enabled at the same time</title> +<script src="/common/reftest-wait.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; +} +.cueText { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"> + <video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + </video> + <span class="cue"> + <div><span class="cueText">This is a <b>test subtitle</b></span></div> + <div><span class="cueText">This is a <u>test subtitle</u></span></div> + <div><span class="cueText">This is a test subtitle</span></div> + </span> +</div> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks.html new file mode 100644 index 0000000000..bdb45f1110 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, 3 tracks enabled at the same time</title> +<link rel="match" href="3_tracks-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/test.vtt"> + <track src="support/test_underline.vtt"> + <track src="support/test_bold.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + document.getElementsByTagName('track')[1].track.mode = 'showing'; + document.getElementsByTagName('track')[2].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center-ref.html new file mode 100644 index 0000000000..90f011dc57 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:center</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video><span class=cue><span>This is a test</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center.html new file mode 100644 index 0000000000..c7ab0dee17 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:center</title> +<link rel="match" href="align_center-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_center.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50-ref.html new file mode 100644 index 0000000000..ed5e3a5e8e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:center, position:50%</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video><span class=cue><span>This is a test</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50.html new file mode 100644 index 0000000000..38df5e1bb2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:center, position:50%</title> +<link rel="match" href="align_center_position_50-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_center_position_50.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50-ref.html new file mode 100644 index 0000000000..4d7553a8b7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:center, position greater than 50%</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; +} +.cue { + position: absolute; + bottom: 0; + right: 0px; + width: 64px; + text-align: center; + font: 20px/1 Ahem; +} +.cueText { + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video> + <div class="cue"> + <span class="cueText">foo</span> + </div> +</div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50.html new file mode 100644 index 0000000000..0f69e57251 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:center, position greater than 50%</title> +<link rel="match" href="align_center_position_gt_50-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font: 20px/1 Ahem; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_center_position_gt_50.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size-ref.html new file mode 100644 index 0000000000..73db73ed6a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:center, position greater than 50%, size greater than maximum size</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; +} +.cue { + position: absolute; + bottom: 0px; + right: 0px; + width: 64px; + text-align: center; + font: 20px/1 Ahem; +} +.cueText { + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video> + <div class="cue"> + <div><span class="cueText">Awe</span></div> + <div><span class="cueText">som</span></div> + <div><span class="cueText">e!!</span></div> + <div><span class="cueText">!</span></div> + </div> +</div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size.html new file mode 100644 index 0000000000..869b5f669e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:center, position greater than 50%, size greater than maximum size</title> +<link rel="match" href="align_center_position_gt_50_size_gt_maximum_size-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font: 20px/1 Ahem; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_center_position_gt_50_size_gt_maximum_size.vtt"> +</video> +<script> +document.getElementsByTagName('track')[0].track.mode = 'showing'; +</script> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50-ref.html new file mode 100644 index 0000000000..baa6511046 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:center, position less than 50%</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; +} +.cue { + position: absolute; + bottom: 0; + left: 0px; + right: 0; + width: 64px; + text-align: center; + font: 20px/1 Ahem; +} +.cueText { + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video> + <div class="cue"> + <span class="cueText">foo</span> + </div> +</div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50.html new file mode 100644 index 0000000000..953e74183b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:center, position less than 50%</title> +<link rel="match" href="align_center_position_lt_50-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font: 20px/1 Ahem; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_center_position_lt_50.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size-ref.html new file mode 100644 index 0000000000..aeaf757cc6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:center, position less than 50%, size greater than maximum size</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; +} +.cue { + position: absolute; + bottom: 0px; + left: 0px; + width: 64px; + text-align: center; + font: 20px/1 Ahem; +} +.cueText { + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video> + <div class="cue"> + <div><span class="cueText">Awe</span></div> + <div><span class="cueText">som</span></div> + <div><span class="cueText">e!!</span></div> + <div><span class="cueText">!</span></div> + </div> +</div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size.html new file mode 100644 index 0000000000..174894bf0c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:center, position less than 50%, size greater than maximum size</title> +<link rel="match" href="align_center_position_lt_50_size_gt_maximum_size-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font: 20px/1 Ahem; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_center_position_lt_50_size_gt_maximum_size.vtt"> +</video> +<script> +document.getElementsByTagName('track')[0].track.mode = 'showing'; +</script> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped-ref.html new file mode 100644 index 0000000000..55aed284b7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:center with long cues</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video><span class=cue><span>This is a test subtitle that most likely will span over several rows since it is a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped.html new file mode 100644 index 0000000000..3773593f0f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:center with long cues</title> +<link rel="match" href="align_center_wrapped-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_center_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end-ref.html new file mode 100644 index 0000000000..23c7c71aff --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:end</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: right; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video><span class=cue><span>This is a test</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end.html new file mode 100644 index 0000000000..c413579b23 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:end</title> +<link rel="match" href="align_end-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_end.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped-ref.html new file mode 100644 index 0000000000..eee75f138f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:end with long cues</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: right +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video><span class=cue><span>This is a test subtitle that most likely will span over several rows since it is a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped.html new file mode 100644 index 0000000000..97e9ef7bf2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:end with long cues</title> +<link rel="match" href="align_end_wrapped-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_end_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start-ref.html new file mode 100644 index 0000000000..b1bae4af0b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:start</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: left; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video><span class=cue><span>This is a test</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start.html new file mode 100644 index 0000000000..955b231b02 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:start</title> +<link rel="match" href="align_start-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_start.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped-ref.html new file mode 100644 index 0000000000..45cb287e2f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:start with long cues</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: left; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video><span class=cue><span>This is a test subtitle that most likely will span over several rows since it is a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped.html new file mode 100644 index 0000000000..0664f38e63 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:start with long cues</title> +<link rel="match" href="align_start_wrapped-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_start_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles-ref.html new file mode 100644 index 0000000000..d4bd2b74c2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for WebVTT rendering, <audio> should not have subtitles</title> +<style> +audio { + width: 320px; + height: 180px; + outline: solid +} +</style> +<script src="/common/reftest-wait.js"></script> +<audio autoplay controls onplaying="this.onplaying = null; this.pause(); this.currentTime = 0; takeScreenshotDelayed(1000)"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> +</audio> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles.html new file mode 100644 index 0000000000..65f559f901 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, <audio> should not have subtitles</title> +<link rel="match" href="audio_has_no_subtitles-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +audio { + width: 320px; + height: 180px; + outline: solid +} +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<audio autoplay controls onplaying="this.onplaying = null; this.pause(); this.currentTime = 0; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</audio> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/background.png b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/background.png Binary files differnew file mode 100644 index 0000000000..6d16cc84c4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/background.png diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/basic-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/basic-ref.html new file mode 100644 index 0000000000..182bc69277 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/basic-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, basic</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/basic.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/basic.html new file mode 100644 index 0000000000..ca77eb734b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/basic.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, basic</title> +<link rel="match" href="basic-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/bidi_ruby-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/bidi_ruby-ref.html new file mode 100644 index 0000000000..cc4df4178e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/bidi_ruby-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bidi ruby</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span><ruby>.<rt><bdo dir="ltr">אא</bdo></rt>ab)<rt>x</rt></ruby></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/bidi_ruby.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/bidi_ruby.html new file mode 100644 index 0000000000..ed2b2e019d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/bidi_ruby.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bidi ruby</title> +<link rel="match" href="bidi_ruby-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../support/bidi_ruby.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/start_alignment-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/start_alignment-ref.html new file mode 100644 index 0000000000..78ca8979c9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/start_alignment-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<html class="reftest-wait"> +<title>WebVTT rendering, set align start and the cue contains two lines with different writing directions</title> +<script src="/common/reftest-wait.js"></script> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + text-align: start; + unicode-bidi: plaintext; +} +.cueText { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"> + <video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + </video> + <span class="cue"> + <span class="cueText">Hello!</span><br> + <span class="cueText">שלום!</span> + </span> +</div> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/start_alignment.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/start_alignment.html new file mode 100644 index 0000000000..2b6cd76c20 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/start_alignment.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, set align start and the cue contains two lines with different writing directions</title> +<link rel="match" href="start_alignment-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: sans-serif; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../support/start_alignment.vtt" default> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_LF_u05D0-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_LF_u05D0-ref.html new file mode 100644 index 0000000000..3c968da7c2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_LF_u05D0-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bidi U+002E LF U+05D0</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span>.<br><bdo dir=ltr>אab)</bdo></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_LF_u05D0.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_LF_u05D0.html new file mode 100644 index 0000000000..e47cc127df --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_LF_u05D0.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bidi U+002E LF U+05D0</title> +<link rel="match" href="u002E_LF_u05D0-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../support/u002E_LF_u05D0.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2028_u05D0-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2028_u05D0-ref.html new file mode 100644 index 0000000000..492b194163 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2028_u05D0-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bidi U+002E U+2028 U+05D0</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span>.<br><bdo dir=ltr>(abא</bdo></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2028_u05D0.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2028_u05D0.html new file mode 100644 index 0000000000..0c0ec1842e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2028_u05D0.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bidi U+002E U+2028 U+05D0</title> +<link rel="match" href="u002E_u2028_u05D0-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../support/u002E_u2028_u05D0.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2029_u05D0-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2029_u05D0-ref.html new file mode 100644 index 0000000000..b2c03406d5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2029_u05D0-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bidi U+002E U+2029 U+05D0</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span>.<br><bdo dir=ltr>אab)</bdo></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2029_u05D0.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2029_u05D0.html new file mode 100644 index 0000000000..49b217594d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2029_u05D0.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bidi U+002E U+2029 U+05D0</title> +<link rel="match" href="u002E_u2029_u05D0-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../support/u002E_u2029_u05D0.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0041_first-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0041_first-ref.html new file mode 100644 index 0000000000..56e47f0e08 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0041_first-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bidi U+0041 first</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span><bdo dir=ltr>Aab)</bdo></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0041_first.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0041_first.html new file mode 100644 index 0000000000..487d4ab400 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0041_first.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bidi U+0041 first</title> +<link rel="match" href="u0041_first-ref.html"> +<!-- +0041..005A ; L # L& [26] LATIN CAPITAL LETTER A..LATIN CAPITAL LETTER Z +http://www.unicode.org/Public/UNIDATA/extracted/DerivedBidiClass.txt +--> +<style> +html { overflow:hidden } +body { margin:0 } +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../support/u0041_first.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u05D0_first-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u05D0_first-ref.html new file mode 100644 index 0000000000..8ea95ae597 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u05D0_first-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bidi U+05D0 first</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span><bdo dir=ltr>(abא</bdo></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u05D0_first.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u05D0_first.html new file mode 100644 index 0000000000..4075d20564 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u05D0_first.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bidi U+05D0 first</title> +<link rel="match" href="u05D0_first-ref.html"> +<!-- +05D0..05EA ; R # Lo [27] HEBREW LETTER ALEF..HEBREW LETTER TAV +http://www.unicode.org/Public/UNIDATA/extracted/DerivedBidiClass.txt +--> +<style> +html { overflow:hidden } +body { margin:0 } +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../support/u05D0_first.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0628_first-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0628_first-ref.html new file mode 100644 index 0000000000..f5816cf62d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0628_first-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bidi U+0628 first</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span><bdo dir=ltr>(abب</bdo></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0628_first.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0628_first.html new file mode 100644 index 0000000000..8524375d0d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0628_first.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bidi U+0628 first</title> +<link rel="match" href="u0628_first-ref.html"> +<!-- +0620..063F ; AL # Lo [32] ARABIC LETTER KASHMIRI YEH..ARABIC LETTER FARSI YEH WITH THREE DOTS ABOVE +http://www.unicode.org/Public/UNIDATA/extracted/DerivedBidiClass.txt +--> +<style> +html { overflow:hidden } +body { margin:0 } +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../support/u0628_first.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u06E9_no_strong_dir-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u06E9_no_strong_dir-ref.html new file mode 100644 index 0000000000..c1dfd3b6c1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u06E9_no_strong_dir-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bidi U+06E9 no strong direction</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span><bdo dir=ltr>۩)</bdo></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u06E9_no_strong_dir.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u06E9_no_strong_dir.html new file mode 100644 index 0000000000..a3c69c8adb --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/u06E9_no_strong_dir.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bidi U+06E9 no strong direction</title> +<link rel="match" href="u06E9_no_strong_dir-ref.html"> +<!-- +06E9 ; ON # So ARABIC PLACE OF SAJDAH +http://www.unicode.org/Public/UNIDATA/extracted/DerivedBidiClass.txt +--> +<style> +html { overflow:hidden } +body { margin:0 } +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../support/u06E9_no_strong_dir.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_lr-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_lr-ref.html new file mode 100644 index 0000000000..42b6a5dac0 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_lr-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bidi ruby</title> + <meta charset="UTF-8"> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + text-align: center; + unicode-bidi: -webkit-plaintext; + unicode-bidi: plaintext; + direction: ltr; + writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span><ruby>右<rt>みぎ</rt></ruby>に<ruby> 見<rt>み</rt></ruby>えるのは...<br>二行目</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_lr.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_lr.html new file mode 100644 index 0000000000..c5e7d2b15d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_lr.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, vertical growing left to right</title> +<link rel="match" href="vertical_lr-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../support/bidi_vertical_lr.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_rl-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_rl-ref.html new file mode 100644 index 0000000000..737c695553 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_rl-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bidi ruby</title> + <meta charset="UTF-8"> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + right: 0; + text-align: center; + unicode-bidi: -webkit-plaintext; + unicode-bidi: plaintext; + direction: ltr; + writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span><ruby></ruby>に<ruby> 見<rt>み</rt></ruby>えるのは...<br>二行目</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_rl.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_rl.html new file mode 100644 index 0000000000..9afdb2dd10 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_rl.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, vertical growing right to left</title> +<link rel="match" href="vertical_rl-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../support/bidi_vertical_rl.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long-ref.html new file mode 100644 index 0000000000..85683c7ba5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, size:50%, cue too long - should be hidden</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +</style> +<div class="video"><span class="cue"></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long.html new file mode 100644 index 0000000000..1dc19e6259 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, size:50%, cue too long - should be hidden</title> +<link rel="match" href="cue_too_long-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/very_long_cue.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities-ref.html new file mode 100644 index 0000000000..d12188cfa4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, decoding of escaped entities</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>Here are the escaped <br>entities: & < > ‎ ‏ </span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities.html new file mode 100644 index 0000000000..c5061f5f39 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for WebVTT rendering, decoding of escaped entities</title> +<link rel="match" href="decode_escaped_entities-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/decode_escaped_entities.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition-ref.html new file mode 100644 index 0000000000..874cef1fa0 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, cue reposition after enabling controls</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.video { + display: inline-block; + outline: solid; + width: 320px; + height: 240px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 50px; +} +</style> +<div class="video"><span class="cue"><span>Foo</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition.html new file mode 100644 index 0000000000..43c0acef74 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition.html @@ -0,0 +1,32 @@ +<!doctype html> +<html class="reftest-wait"> +<title>WebVTT rendering, cue reposition after disabling controls</title> +<link rel="match" href="disable_controls_reposition-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +video { + outline: solid; + width: 320px; + height: 240px; +} +::cue { + font-family: Ahem, sans-serif; + font-size: 50px; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video autoplay controls onplaying="this.onplaying = null; + this.pause(); + this.currentTime = 0; + setTimeout(function(video){ + video.controls = false; + }, 100, this); + takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src=support/foo.vtt> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size-ref.html new file mode 100644 index 0000000000..dd48970516 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, a cue's align, position, line and size properties is possible to override using the DOM APIs</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + top: 0; + right: 51.2px; + width: 64px; + text-align: left +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>There is nothing to see here people, move on</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size.html new file mode 100644 index 0000000000..4134b46153 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, a cue's align, position, line and size properties is possible to override using the DOM APIs</title> +<link rel="match" href="dom_override_cue_align_position_line_size-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<script> + var i = 0; + function updateCue() { + i++; + if (i !== 2) { + return; + } + var t = document.getElementById('track'); + var c = t.track.cues[0]; + c.align = 'start'; + c.position = 80; + c.line = 0; + c.size = 20; + c.text = 'There is nothing to see here people, move on'; + updateRendering(); + } + function updateRendering() { + var v = document.getElementById('video'); + v.onplaying = function() { + this.onplaying = null; + this.pause(); + takeScreenshotDelayed(1000); + }; + v.play(); + } +</script> +<video id="video" width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track id="track" src="support/test.vtt" onload="updateCue();"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size_while_paused-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size_while_paused-ref.html new file mode 100644 index 0000000000..fccabb9bba --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size_while_paused-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, a cue's align, position, line and size properties should be rerendered when overriding them using the DOM APIs while paused</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + top: 0; + right: 51.2px; + width: 64px; + text-align: left +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This test tests</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size_while_paused.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size_while_paused.html new file mode 100644 index 0000000000..7fc81bb2ea --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size_while_paused.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, a cue's align, position, line and size properties should be rerendered when overriding them using the DOM APIs while paused</title> +<link rel="match" href="dom_override_cue_align_position_line_size_while_paused-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<script> + var i = 0; + function updateCue() { + i++; + if (i !== 2) { + return; + } + var t = document.getElementById('track'); + var c = t.track.cues[0]; + c.align = 'start'; + c.position = 80; + c.line = 0; + c.size = 20; + c.text = 'This test tests'; + takeScreenshotDelayed(1000); + } +</script> +<video id="video" width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track id="track" src="support/test.vtt" onload="updateCue();"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line-ref.html new file mode 100644 index 0000000000..7569d28e4d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, it is possible to override cue line with the DOM APIs</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + top: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line.html new file mode 100644 index 0000000000..f133708a8f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, it is possible to override cue line with the DOM APIs</title> +<link rel="match" href="dom_override_cue_line-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<script> + var i = 0; + function updateCue() { + i++; + if (i !== 2) { + return; + } + var t = document.getElementById('track'); + var c = t.track.cues[0]; + c.line = 0; + updateRendering(); + } + function updateRendering() { + var v = document.getElementById('video'); + v.onplaying = function() { + this.onplaying = null; + this.pause(); + takeScreenshotDelayed(1000); + }; + v.play(); + } +</script> +<video id="video" width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track id="track" src="support/test.vtt" onload="updateCue();"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text-ref.html new file mode 100644 index 0000000000..e00d422ff7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, it is possible to override cue text with the DOM APIs</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>f o o</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text.html new file mode 100644 index 0000000000..d2e29e5d7d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, it is possible to override cue text with the DOM APIs</title> +<link rel="match" href="dom_override_cue_text-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<script> + var i = 0; + function updateCue() { + i++; + if (i !== 2) { + return; + } + var t = document.getElementById('track'); + var c = t.track.cues[0]; + c.text = 'f o o'; + updateRendering(); + } + function updateRendering() { + var v = document.getElementById('video'); + v.onplaying = function() { + this.onplaying = null; + this.pause(); + takeScreenshotDelayed(1000); + }; + v.play(); + } +</script> +<video id="video" width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track id="track" src="support/test.vtt" onload="updateCue();"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text_while_paused-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text_while_paused-ref.html new file mode 100644 index 0000000000..ef2edc968f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text_while_paused-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, cue text should be rerendered when overriding them using the DOM APIs while paused</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>f o o</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text_while_paused.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text_while_paused.html new file mode 100644 index 0000000000..728b8bab19 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text_while_paused.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, cue text should be rerendered when overriding them using the DOM APIs while paused</title> +<link rel="match" href="dom_override_cue_text_while_paused-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<script> + var i = 0; + function updateCue() { + i++; + if (i !== 2) { + return; + } + var t = document.getElementById('track'); + var c = t.track.cues[0]; + c.text = 'f o o'; + takeScreenshotDelayed(1000); + } +</script> +<video id="video" width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track id="track" src="support/test.vtt" onload="updateCue();"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused-ref.html new file mode 100644 index 0000000000..60f7bb0cd3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for WebVTT rendering, cue text should be removed when removing them using the DOM APIs while paused</title> +<script src="/common/reftest-wait.js"></script> +<style> +html { overflow: hidden } +body { margin: 0 } +</style> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> +</video> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused.html new file mode 100644 index 0000000000..459ceabbf8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, cue text should be removed when removing them using the DOM APIs while paused</title> +<link rel="match" href="dom_override_remove_cue_while_paused-ref.html"> +<script src="/common/reftest-wait.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow: hidden } +body { margin: 0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script> + var i = 0; + function updateCue() { + i++; + if (i !== 2) { + return; + } + var t = document.getElementById('track'); + var c = t.track.cues[0]; + t.track.removeCue(c); + takeScreenshotDelayed(1000); + } +</script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track id="track" src="support/test.vtt" onload="updateCue();"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority-ref.html new file mode 100644 index 0000000000..b479029f70 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for Embedded Style: Cascade Priority</title> +<style> +::cue { + color: green; +} +::cue { + background: green; +} +::cue { + opacity: 0.5; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/embedded_style_without_style.vtt" default> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority.html new file mode 100644 index 0000000000..db6822e397 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Embedded Style: Cascade Priority</title> +<link rel="match" href="embedded_style_cascade_priority-ref.html"> +<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes"> +<script src="/common/reftest-wait.js"></script> +<style> +/* Embedded style should take precedence over author style, so the cue color should be green. */ +::cue { + color: red; +} +</style> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/embedded_style_cascade_priority.vtt" default> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority_layer.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority_layer.html new file mode 100644 index 0000000000..8d4598fe30 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority_layer.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Embedded Style: Cascade Priority</title> +<link rel="match" href="embedded_style_cascade_priority-ref.html"> +<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes"> +<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#cascade-sort"> +<link rel="author" href="mailto:xiaochengh@chromium.org"> +<script src="/common/reftest-wait.js"></script> +<style> +/* Embedded important style should take precedence over author important style + regardless of layers, so the cue color should be green. */ +@layer { + ::cue { + color: red !important; + } +} +</style> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/embedded_style_cascade_priority_layer.vtt" default> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked-ref.html new file mode 100644 index 0000000000..1cb9d24c98 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for Embedded Style: Imports Blocked</title> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/embedded_style_without_style.vtt" default> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked.html new file mode 100644 index 0000000000..1ffdf078d1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Embedded Style: Imports Blocked</title> +<link rel="match" href="embedded_style_imports_blocked-ref.html"> +<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes"> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/embedded_style_imports_blocked.vtt" default> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format-ref.html new file mode 100644 index 0000000000..698ac7bc19 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for Embedded Style: Invalid Format</title> +<style> +::cue { + color: green; +} +::cue(v[voice=Voice1]) +{ + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==) +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/embedded_style_without_style.vtt" default> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format.html new file mode 100644 index 0000000000..746816f272 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Embedded Style: Invalid Format</title> +<link rel="match" href="embedded_style_invalid_format-ref.html"> +<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes"> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/embedded_style_invalid_format.vtt" default> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries-ref.html new file mode 100644 index 0000000000..d132b132b4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Embedded Style: Media Queries</title> +<script src="/common/reftest-wait.js"></script> +<style>iframe {width:100%; height:500px}</style> +<script> + onload = function() { + let iframeWindow = document.querySelector('iframe').contentWindow; + iframeWindow.requestAnimationFrame(() => { + iframeWindow.requestAnimationFrame(() => { + setTimeout(function() { + takeScreenshot(); + }, 100); + }); + }); + }; +</script> +<iframe src="support/embedded_style_media_queries-iframe-ref.html"></iframe> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries.html new file mode 100644 index 0000000000..010314dd15 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries.html @@ -0,0 +1,19 @@ +<!doctype html> +<html class="reftest-wait"> +<title>Embedded Style: Media Queries</title> +<link rel="match" href="embedded_style_media_queries-ref.html"> +<script src="/common/reftest-wait.js"></script> +<style>iframe {width:100%; height:500px}</style> +<script> + onload = function() { + let iframeWindow = document.querySelector('iframe').contentWindow; + iframeWindow.requestAnimationFrame(() => { + iframeWindow.requestAnimationFrame(() => { + setTimeout(function() { + takeScreenshot(); + }, 100); + }); + }); + }; +</script> +<iframe src="support/embedded_style_media_queries-iframe.html"></iframe> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized-ref.html new file mode 100644 index 0000000000..46c8ad4741 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Embedded Style: Media Queries Resize Frame</title> +<script src="/common/reftest-wait.js"></script> +<style>iframe {width:100%; height:300px}</style> +<script> + onload = function() { + let iframeWindow = document.querySelector('iframe').contentWindow; + iframeWindow.requestAnimationFrame(() => { + iframeWindow.requestAnimationFrame(() => { + setTimeout(function() { + takeScreenshot(); + }, 100); + }); + }); + }; +</script> +<iframe src="support/embedded_style_media_queries_resized-iframe-ref.html"></iframe> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized.html new file mode 100644 index 0000000000..703d7367ae --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized.html @@ -0,0 +1,20 @@ +<!doctype html> +<html class="reftest-wait"> +<title>Embedded Style: Media Queries Resize Frame</title> +<link rel="match" href="embedded_style_media_queries_resized-ref.html"> +<script src="/common/reftest-wait.js"></script> +<style>iframe {width:100%; height:500px}</style> +<script> + onload = function() { + document.getElementById("form-iframe").style.height = "300px"; + let iframeWindow = document.querySelector('iframe').contentWindow; + iframeWindow.requestAnimationFrame(() => { + iframeWindow.requestAnimationFrame(() => { + setTimeout(function() { + takeScreenshot(); + }, 100); + }); + }); + }; +</script> +<iframe id="form-iframe" src="support/embedded_style_media_queries_resized-iframe.html"></iframe> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks-ref.html new file mode 100644 index 0000000000..4b956da448 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for Embedded Style: Multiple Tracks, style only applies to the track it was sourced for</title> +<style> +::cue(v[voice=Voice1]) { + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/embedded_style_without_style.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + document.getElementsByTagName('track')[1].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks.html new file mode 100644 index 0000000000..3c8202761f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Embedded Style: Multiple Tracks, style only applies to the track it was sourced for</title> +<link rel="match" href="embedded_style_multiple_tracks-ref.html"> +<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes"> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/embedded_style_multiple_tracks1.vtt"> + <track src="support/embedded_style_multiple_tracks2.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + document.getElementsByTagName('track')[1].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors-ref.html new file mode 100644 index 0000000000..754eed88b7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for Embedded Style: Selectors</title> +<style> +::cue { + font-size: 11px; + background: lime; +} +::cue(b) { + background: green; + color: green; +} +::cue(i) { + background: green; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/embedded_style_without_style.vtt" default> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors.html new file mode 100644 index 0000000000..55db5c7302 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Embedded Style: Selectors</title> +<link rel="match" href="embedded_style_selectors-ref.html"> +<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes"> +<script src="/common/reftest-wait.js"></script> + +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/embedded_style_selectors.vtt" default> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls-ref.html new file mode 100644 index 0000000000..6eca04506e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for Embedded Style: URLs, only allow data URLs</title> +<style> +::cue(v[voice=Voice1]) +{ + background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) +} +::cue(b) +{ + background: url("support/invalid.png") +} +::cue(i) +{ + background: url("support/invalid.png") +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/embedded_style_without_style.vtt" default> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls.html new file mode 100644 index 0000000000..2faff059d2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Embedded Style: URLs, only allow data URLs</title> +<link rel="match" href="embedded_style_urls-ref.html"> +<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes"> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/embedded_style_urls.vtt" default> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition-ref.html new file mode 100644 index 0000000000..f150531bbd --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, cue reposition after enabling controls</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.video { + display: inline-block; + outline: solid; + width: 320px; + height: 240px; + position: relative +} +video { + position: absolute; + width:320px; + height:240px; +} +.cue { + position: absolute; + bottom: 50px; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 50px; +} +</style> +<video controls> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> +</video> +<div class="video"><span class="cue"><span>Foo</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition.html new file mode 100644 index 0000000000..7bfb8d9ff5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition.html @@ -0,0 +1,32 @@ +<!doctype html> +<html class="reftest-wait"> +<title>WebVTT rendering, cue reposition after enabling controls</title> +<link rel="match" href="enable_controls_reposition-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +video { + outline: solid; + width: 320px; + height: 240px; +} +::cue { + font-family: Ahem, sans-serif; + font-size: 50px; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video autoplay onplaying="this.onplaying = null; + this.pause(); + this.currentTime = 0; + setTimeout(function(video){ + video.controls = true; + }, 100, this); + takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src=support/foo.vtt> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely-ref.html new file mode 100644 index 0000000000..5eb5d73256 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely-ref.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, repositioning of 9 cues that overlap completely</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.video { + display: inline-block; + width: 180px; + height: 180px; + outline: solid; + position: relative; + font-size: 9px +} +#cue1 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -4.5px; + margin-left: -4.5px; + color: #000 +} +#cue2 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -13.5px; + margin-left: -4.5px; + color: #222 +} +#cue3 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -4.5px; + margin-left: -13.5px; + color: #444 +} +#cue4 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -4.5px; + margin-left: 4.5px; + color: #666 +} +#cue5 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: 4.5px; + margin-left: -4.5px; + color: #888 +} +#cue6 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -13.5px; + margin-left: -13.5px; + color: #aaa +} +#cue7 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -13.5px; + margin-left: 4.5px; + color: #ccc +} +#cue8 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: 4.5px; + margin-left: -13.5px; + color: #eee +} +#cue9 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: 4.5px; + margin-left: 4.5px; + color: green +} +.cue { + width: 9px; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); +} +</style> +<div class="video"> + <span class="cue" id="cue1"><span>1</span></span> + <span class="cue" id="cue2"><span>2</span></span> + <span class="cue" id="cue3"><span>3</span></span> + <span class="cue" id="cue4"><span>4</span></span> + <span class="cue" id="cue5"><span>5</span></span> + <span class="cue" id="cue6"><span>6</span></span> + <span class="cue" id="cue7"><span>7</span></span> + <span class="cue" id="cue8"><span>8</span></span> + <span class="cue" id="cue9"><span>9</span></span> +</div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely.html new file mode 100644 index 0000000000..606ded5095 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, repositioning of 9 cues that overlap completely</title> +<meta name="timeout" content="long"> +<link rel="match" href="9_cues_overlapping_completely-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; +} +::cue(#cue1) { + color: #000 +} +::cue(#cue2) { + color: #222 +} +::cue(#cue3) { + color: #444 +} +::cue(#cue4) { + color: #666 +} +::cue(#cue5) { + color: #888 +} +::cue(#cue6) { + color: #aaa +} +::cue(#cue7) { + color: #ccc +} +::cue(#cue8) { + color: #eee +} +::cue(#cue9) { + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="180" height="180" autoplay ontimeupdate="if (this.currentTime >= 1) { this.ontimeupdate = null; this.pause(); takeScreenshot(); }"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/9_cues_overlapping_completely.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely_all_cues_have_same_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely_all_cues_have_same_timestamp-ref.html new file mode 100644 index 0000000000..22095bf685 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely_all_cues_have_same_timestamp-ref.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, repositioning of 9 cues that overlap completely and all cues have the same timestamp</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.video { + display: inline-block; + width: 180px; + height: 180px; + outline: solid; + position: relative; + font-size: 9px; +} +#cue1 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -4.5px; + margin-left: -4.5px; + color: #000 +} +#cue2 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -13.5px; + margin-left: -4.5px; + color: #222 +} +#cue3 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -4.5px; + margin-left: -13.5px; + color: #444 +} +#cue4 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -4.5px; + margin-left: 4.5px; + color: #666 +} +#cue5 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: 4.5px; + margin-left: -4.5px; + color: #888 +} +#cue6 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -13.5px; + margin-left: -13.5px; + color: #aaa +} +#cue7 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: -13.5px; + margin-left: 4.5px; + color: #ccc +} +#cue8 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: 4.5px; + margin-left: -13.5px; + color: #eee +} +#cue9 { + position: absolute; + top: 50%; + left: 50%; + right: 0; + margin-top: 4.5px; + margin-left: 4.5px; + color: green +} +.cue { + width: 9px; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); +} +</style> +<div class="video"> + <span class="cue" id="cue1"><span>1</span></span> + <span class="cue" id="cue2"><span>2</span></span> + <span class="cue" id="cue3"><span>3</span></span> + <span class="cue" id="cue4"><span>4</span></span> + <span class="cue" id="cue5"><span>5</span></span> + <span class="cue" id="cue6"><span>6</span></span> + <span class="cue" id="cue7"><span>7</span></span> + <span class="cue" id="cue8"><span>8</span></span> + <span class="cue" id="cue9"><span>9</span></span> +</div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely_all_cues_have_same_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely_all_cues_have_same_timestamp.html new file mode 100644 index 0000000000..00d4eccfd9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely_all_cues_have_same_timestamp.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, repositioning of 9 cues that overlap completely and all cues have the same timestamp</title> +<link rel="match" href="9_cues_overlapping_completely_all_cues_have_same_timestamp-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; +} +::cue(#cue1) { + color: #000 +} +::cue(#cue2) { + color: #222 +} +::cue(#cue3) { + color: #444 +} +::cue(#cue4) { + color: #666 +} +::cue(#cue5) { + color: #888 +} +::cue(#cue6) { + color: #aaa +} +::cue(#cue7) { + color: #ccc +} +::cue(#cue8) { + color: #eee +} +::cue(#cue9) { + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="180" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 1; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/9_cues_overlapping_completely_all_cues_have_same_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles-ref.html new file mode 100644 index 0000000000..b4b242795b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, when media cannot be played (404 error), subtitles are not displayed</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +</style> +<div class="video"></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles.html new file mode 100644 index 0000000000..7e29894cae --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<!-- no reftest-wait --> +<title>WebVTT rendering, when media cannot be played (404 error), subtitles are not displayed</title> +<link rel="match" href="media_404_omit_subtitles-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<!-- +The subtitles are not expected to render because the "show poster flag" +is set, so when the track loads it will *not* run "time marches on". +--> +<video width="320" height="180" autoplay> + <source src="/common/text-plain.txt?pipe=status(404)"> + <track src="support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19-ref.html new file mode 100644 index 0000000000..2b7a1ed2bf --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, when media height is 19 or less, font size should be smaller than when it is 20 and above</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.video { + display: inline-block; + width: 320px; + height: 19px; + outline: solid; + position: relative; + font-size: 0.95px +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video><span class=cue><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19.html new file mode 100644 index 0000000000..fb7662b66c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, when media height is 19 or less, font size should be smaller than when it is 20 and above</title> +<link rel="match" href="media_height_19-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family:Ahem, sans-serif; + color:green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="19" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/non-standard-pseudo-elements-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/non-standard-pseudo-elements-ref.html new file mode 100644 index 0000000000..5664a4de7b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/non-standard-pseudo-elements-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<style> +video { width:560px; height:320px; } +</style> +<video> +<source src="/media/white.webm" type="video/webm"> +<source src="/media/white.mp4" type="video/mp4"> +<track label="English subtitles" kind="subtitles" srclang="en" src="support/test.vtt" default> +</video> +<script> +const v = document.querySelector('video'); +v.onseeked = () => { document.documentElement.classList.remove('reftest-wait'); }; +v.currentTime = 3; +</script> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/non-standard-pseudo-elements.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/non-standard-pseudo-elements.html new file mode 100644 index 0000000000..20cf81ace2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/non-standard-pseudo-elements.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<title>position:fixed on non-standard ::-webkit-media-text-track-display should not affect</title> +<link rel="match" href="non-standard-pseudo-elements-ref.html"> +<style> +video { width:560px; height:320px; } +video::-webkit-media-text-track-display { + position: fixed !important; +} +</style> +<video> +<source src="/media/white.webm" type="video/webm"> +<source src="/media/white.mp4" type="video/mp4"> +<track label="English subtitles" kind="subtitles" srclang="en" src="support/test.vtt" default> +</video> +<script> +const v = document.querySelector('video'); +v.onseeked = () => { document.documentElement.classList.remove('reftest-wait'); }; +v.currentTime = 3; +</script> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/single_quote-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/single_quote-ref.html new file mode 100644 index 0000000000..81c546e026 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/single_quote-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, single quote should not be levitated</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>'</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/single_quote.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/single_quote.html new file mode 100644 index 0000000000..b012063501 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/single_quote.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, single quote should not be levitated</title> +<link rel="match" href="single_quote-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/single_quote.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90-ref.html new file mode 100644 index 0000000000..de39a8b7ad --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, size:90% == size:100% when text does not need to wrap</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video><span class=cue><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90.html new file mode 100644 index 0000000000..b535168c5d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, size:99% == size:100% when text does not need to wrap</title> +<link rel="match" href="size_90-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/size_90.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99-ref.html new file mode 100644 index 0000000000..7a6755a08d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, size:99% == size:100% when text does not need to wrap</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video><span class=cue><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99.html new file mode 100644 index 0000000000..60e65bbfa4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, size:99% == size:100% when text does not need to wrap</title> +<link rel="match" href="size_99-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/size_99.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/9_cues_overlapping_completely.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/9_cues_overlapping_completely.vtt new file mode 100644 index 0000000000..3f4250d8b1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/9_cues_overlapping_completely.vtt @@ -0,0 +1,37 @@ +WEBVTT + +cue1 +00:00:00.001 --> 00:00:05.000 position:50% size:5% line:50% +1 + +cue2 +00:00:00.002 --> 00:00:05.000 position:50% size:5% line:50% +2 + +cue3 +00:00:00.003 --> 00:00:05.000 position:50% size:5% line:50% +3 + +cue4 +00:00:00.004 --> 00:00:05.000 position:50% size:5% line:50% +4 + +cue5 +00:00:00.005 --> 00:00:05.000 position:50% size:5% line:50% +5 + +cue6 +00:00:00.006 --> 00:00:05.000 position:50% size:5% line:50% +6 + +cue7 +00:00:00.007 --> 00:00:05.000 position:50% size:5% line:50% +7 + +cue8 +00:00:00.008 --> 00:00:05.000 position:50% size:5% line:50% +8 + +cue9 +00:00:00.009 --> 00:00:05.000 position:50% size:5% line:50% +9 diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/9_cues_overlapping_completely_all_cues_have_same_timestamp.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/9_cues_overlapping_completely_all_cues_have_same_timestamp.vtt new file mode 100644 index 0000000000..d5019e0ed2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/9_cues_overlapping_completely_all_cues_have_same_timestamp.vtt @@ -0,0 +1,37 @@ +WEBVTT + +cue1 +00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50% +1 + +cue2 +00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50% +2 + +cue3 +00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50% +3 + +cue4 +00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50% +4 + +cue5 +00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50% +5 + +cue6 +00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50% +6 + +cue7 +00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50% +7 + +cue8 +00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50% +8 + +cue9 +00:00:00.000 --> 00:00:05.000 position:50% size:5% line:50% +9 diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/single_quote.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/single_quote.vtt new file mode 100644 index 0000000000..5e7eefd262 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/single_quote.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +' diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/size_90.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/size_90.vtt new file mode 100644 index 0000000000..2ab4fa179f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/size_90.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 size:90% +This is a test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/size_99.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/size_99.vtt new file mode 100644 index 0000000000..cd14574f09 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/size_99.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 size:99% +This is a test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/test.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/test.vtt new file mode 100644 index 0000000000..ab71ec5984 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/evil/support/test.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +This is a test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_-2_wrapped_cue_grow_upwards-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_-2_wrapped_cue_grow_upwards-ref.html new file mode 100644 index 0000000000..b3819320bf --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_-2_wrapped_cue_grow_upwards-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, line:-2, size:50%, wrapped cue should grow upwards</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 9px; + left: 80px; + right: 0; + width: 160px; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that will line break</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_-2_wrapped_cue_grow_upwards.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_-2_wrapped_cue_grow_upwards.html new file mode 100644 index 0000000000..85d7d6f81e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_-2_wrapped_cue_grow_upwards.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, line:-2, size:50%, wrapped cue should grow upwards</title> +<link rel="match" href="line_-2_wrapped_cue_grow_upwards-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/line_-2_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top-ref.html new file mode 100644 index 0000000000..85f2a95fa8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, line:0 should be top line</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + top: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top.html new file mode 100644 index 0000000000..c780a223e7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, line:0 should be top line</title> +<link rel="match" href="line_0_is_top-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/line_0.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_1_wrapped_cue_grow_downwards-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_1_wrapped_cue_grow_downwards-ref.html new file mode 100644 index 0000000000..44f2c31785 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_1_wrapped_cue_grow_downwards-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, line:1, size:50%, wrapped cue should grow downwards</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + top: 9px; + left: 80px; + right: 0; + width: 160px; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that will line break</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_1_wrapped_cue_grow_downwards.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_1_wrapped_cue_grow_downwards.html new file mode 100644 index 0000000000..0b1c25e6b1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_1_wrapped_cue_grow_downwards.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, line:1, size:50%, wrapped cue should grow downwards</title> +<link rel="match" href="line_1_wrapped_cue_grow_downwards-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/line_1_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent-ref.html new file mode 100644 index 0000000000..098679f7be --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, line:50% should be vertically centered</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + top: 50%; + left: 0; + right: 0; + margin-top: -4.5px; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent.html new file mode 100644 index 0000000000..b433708ae3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, line:50% should be vertically centered</title> +<link rel="match" href="line_50_percent-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/line_50_percent.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap-ref.html new file mode 100644 index 0000000000..cb39fde53e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, line integer and percent mixed with overlap</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +#cue1 { + position: absolute; + top: 81px; + left: 0; + right: 0; + text-align: center +} +#cue2 { + position: absolute; + top: 90px; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span id="cue1" class="cue"><span>This is a test subtitle</span></span><span id="cue2" class="cue"><span>This is another test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap.html new file mode 100644 index 0000000000..3106f2013d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, line integer and percent mixed with overlap</title> +<link rel="match" href="line_integer_and_percent_mixed_overlap-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/line_integer_and_percent_overlap.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap_move_up-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap_move_up-ref.html new file mode 100644 index 0000000000..13247ea8bb --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap_move_up-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, line integer and percent mixed with overlap move up</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +#cue1 { + position: absolute; + top: 90px; + left: 0; + right: 0; + text-align: center +} +#cue2 { + position: absolute; + top: 81px; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span id="cue1" class="cue"><span>This is a test subtitle</span></span><span id="cue2" class="cue"><span>This is another test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap_move_up.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap_move_up.html new file mode 100644 index 0000000000..1f9792f6e0 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap_move_up.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, line integer and percent mixed with overlap move up</title> +<link rel="match" href="line_integer_and_percent_mixed_overlap_move_up-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/line_integer_and_percent_overlap_move_up.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap-ref.html new file mode 100644 index 0000000000..6f96ab986e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, line percent and integer mixed with overlap</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +#cue1 { + position: absolute; + top: 76.95px; + left: 0; + right: 0; + text-align: center +} +#cue2 { + position: absolute; + top: 90px; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span id="cue1" class="cue"><span>This is a test subtitle</span></span><span id="cue2" class="cue"><span>This is another test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap.html new file mode 100644 index 0000000000..059a7ccd60 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, line percent and integer mixed with overlap</title> +<link rel="match" href="line_percent_and_integer_mixed_overlap-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/line_percent_and_integer_overlap.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap_move_up-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap_move_up-ref.html new file mode 100644 index 0000000000..8f14e15e92 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap_move_up-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, line percent and integer mixed with overlap move up</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +#cue1 { + position: absolute; + top: 94.05px; + left: 0; + right: 0; + text-align: center +} +#cue2 { + position: absolute; + top: 81px; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span id="cue1" class="cue"><span>This is a test subtitle</span></span><span id="cue2" class="cue"><span>This is another test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap_move_up.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap_move_up.html new file mode 100644 index 0000000000..08016057f4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/line_percent_and_integer_mixed_overlap_move_up.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, line percent and integer mixed with overlap move up</title> +<link rel="match" href="line_percent_and_integer_mixed_overlap_move_up-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/line_percent_and_integer_overlap_move_up.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media/background.gif b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media/background.gif Binary files differnew file mode 100644 index 0000000000..b3185c409c --- /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 0000000000..ed5b3f8826 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_height400_with_controls-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for WebVTT rendering, the subtitles is not covered by or covering the controls</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.video { + display: inline-block; + position: absolute; + width: 320px; + height: 400px; + outline: solid; + font-size: 20px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; + padding-bottom: 40px; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> +<video width="320" height="400" autoplay controls onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track> +</video> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_height400_with_controls.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_height400_with_controls.html new file mode 100644 index 0000000000..349a121d9b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_height400_with_controls.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, the subtitles is not covered by or covering the controls</title> +<link rel="match" href="media_height400_with_controls-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="400" autoplay controls onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_with_controls-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_with_controls-ref.html new file mode 100644 index 0000000000..58b32dd659 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_with_controls-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for WebVTT rendering, the subtitles are moved up to correct position when controls are visible</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.video { + display: inline-block; + position: absolute; + width: 320px; + height: 180px; + outline: solid; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; + padding-bottom: 9px; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> +<video width="320" height="180" autoplay controls onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track> +</video> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_with_controls.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_with_controls.html new file mode 100644 index 0000000000..dda72d16a6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/media_with_controls.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, the subtitles are moved up to correct position when controls are visible</title> +<link rel="match" href="media_with_controls-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay controls onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-1.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-1.html new file mode 100644 index 0000000000..87f3834e3d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-1.html @@ -0,0 +1,27 @@ +<!doctype html> +<html> +<title>WebVTT rendering, cue position after navigation</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +video { + outline: solid; + width: 320px; + height: 240px; +} +::cue { + font-family: Ahem, sans-serif; + font-size: 50px; + color: green; +} +</style> +<video autoplay onplaying="this.onplaying = null; + this.pause(); + this.currentTime = 0; + "> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src=support/foo.vtt> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-ref-1.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-ref-1.html new file mode 100644 index 0000000000..5ee98043ec --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-ref-1.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, cue position after navigation</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.video { + display: inline-block; + outline: solid; + width: 320px; + height: 240px; + position: relative; + font-size: 50px; +} +video { + position: absolute; + width:320px; + height:240px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<video> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> +</video> +<div class="video"><span class="cue"><span>Foo</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-ref.html new file mode 100644 index 0000000000..b973a71c0d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, cue position after navigation</title> +<style>iframe {width:100%; height:500px}</style> +<iframe src="navigate_cue_position-ref-1.html"></iframe> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position.html new file mode 100644 index 0000000000..e176ef0099 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/navigate_cue_position.html @@ -0,0 +1,27 @@ +<!doctype html> +<html class="reftest-wait"> +<title>WebVTT rendering, cue position after navigation</title> +<link rel="match" href="navigate_cue_position-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/utils.js"></script> +<style>iframe {width:100%; height:500px}</style> +<script> +var uuid = token(); +onload = function() { + var frame = document.getElementsByTagName("iframe")[0].contentWindow; + if (sessionStorage[uuid]) { + document.body.appendChild(document.createTextNode('FAIL (page reloaded after navigation)')); + delete sessionStorage[uuid] + takeScreenshotDelayed(100); + } else { + setTimeout(function() { + frame.location.assign('data:text/html,<body onload="setTimeout(function(){history.back()}, 100); sessionStorage[\'' + uuid + '\'] = \'true\';">x'); + setTimeout(function() { + delete sessionStorage[uuid]; + takeScreenshot(); + }, 500); + }, 100); + } +} +</script> +<iframe src="navigate_cue_position-1.html"></iframe> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/one_line_cue_plus_wrapped_cue-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/one_line_cue_plus_wrapped_cue-ref.html new file mode 100644 index 0000000000..47bb32d8c7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/one_line_cue_plus_wrapped_cue-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, one line cue and cue that wraps - both should be fully visible</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 15%; + right: 0; + width: 70%; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This test subtitle wraps and should be visible<br>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/one_line_cue_plus_wrapped_cue.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/one_line_cue_plus_wrapped_cue.html new file mode 100644 index 0000000000..4f95ebfa7c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/one_line_cue_plus_wrapped_cue.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, one line cue and cue that wraps - both should be fully visible</title> +<link rel="match" href="one_line_cue_plus_wrapped_cue-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/one_line_cue_plus_wrapped_cue.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/basic-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/basic-ref.html new file mode 100644 index 0000000000..e73018cb9e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/basic-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering regions, default</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/basic.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/basic.html new file mode 100644 index 0000000000..54a3f8bbf8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/basic.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering regions, default</title> +<link rel="match" href="basic-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/basic.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_x_50_percent-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_x_50_percent-ref.html new file mode 100644 index 0000000000..8e87920daa --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_x_50_percent-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering regions, regionanchor x 50%</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: -50%; + right: 50%; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_x_50_percent.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_x_50_percent.html new file mode 100644 index 0000000000..41fa9b3774 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_x_50_percent.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering regions, regionanchor x 50%</title> +<link rel="match" href="regionanchor_x_50_percent-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/regionanchor_x_50_percent.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_y_50_percent-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_y_50_percent-ref.html new file mode 100644 index 0000000000..db1031093c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_y_50_percent-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering regions, regionanchor y 50%</title> +<style> +html { overflow:hidden } +body { margin:0 } +</style>
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_y_50_percent.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_y_50_percent.html new file mode 100644 index 0000000000..c1c08a7ea8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/regionanchor_y_50_percent.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering regions, regionanchor y 50%</title> +<link rel="match" href="regionanchor_y_50_percent-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/regionanchor_y_50_percent.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/scroll_up-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/scroll_up-ref.html new file mode 100644 index 0000000000..378df3d2ab --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/scroll_up-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering regions, scroll up</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + top: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a second test subtitle<br/>This is a third test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/scroll_up.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/scroll_up.html new file mode 100644 index 0000000000..16af1bc516 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/scroll_up.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering regions, scroll up</title> +<link rel="match" href="scroll_up-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshotDelayed(3000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/scroll_up.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/single_line_top_left-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/single_line_top_left-ref.html new file mode 100644 index 0000000000..8dea283bc9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/single_line_top_left-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering regions, single line top left</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + top: 0; + left: 0; + right: 0; + text-align: left +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/single_line_top_left.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/single_line_top_left.html new file mode 100644 index 0000000000..873416cd0e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/single_line_top_left.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering regions, single line top left</title> +<link rel="match" href="single_line_top_left-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/single_line_top_left.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/basic.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/basic.vtt new file mode 100644 index 0000000000..ed97827479 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/basic.vtt @@ -0,0 +1,7 @@ +WEBVTT + +REGION +id:1 + +00:00:00.000 --> 00:00:05.000 region:1 +This is a test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/regionanchor_x_50_percent.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/regionanchor_x_50_percent.vtt new file mode 100644 index 0000000000..eafea7fff9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/regionanchor_x_50_percent.vtt @@ -0,0 +1,8 @@ +WEBVTT + +REGION +id:1 +regionanchor:50%,100% + +00:00:00.000 --> 00:00:05.000 region:1 +This is a test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/regionanchor_y_50_percent.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/regionanchor_y_50_percent.vtt new file mode 100644 index 0000000000..d51ad26769 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/regionanchor_y_50_percent.vtt @@ -0,0 +1,8 @@ +WEBVTT + +REGION +id:1 +regionanchor:0%,50% + +00:00:00.000 --> 00:00:05.000 region:1 +This is a test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/scroll_up.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/scroll_up.vtt new file mode 100644 index 0000000000..f70a79a654 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/scroll_up.vtt @@ -0,0 +1,15 @@ +WEBVTT + +REGION +id:1 +lines:2 +scroll:up + +00:00:00.000 --> 00:00:05.000 region:1 +This is a first test subtitle + +00:00:01.000 --> 00:00:05.000 region:1 +This is a second test subtitle + +00:00:01.000 --> 00:00:05.000 region:1 +This is a third test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/single_line_top_left.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/single_line_top_left.vtt new file mode 100644 index 0000000000..efe9d8793e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/single_line_top_left.vtt @@ -0,0 +1,10 @@ +WEBVTT + +REGION +id:1 +viewportanchor:0%,0% +regionanchor:0%,0% +lines:1 + +00:00:00.000 --> 00:00:05.000 region:1 align:left +This is a test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/viewportanchor_x_50_percent.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/viewportanchor_x_50_percent.vtt new file mode 100644 index 0000000000..afd9876c06 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/viewportanchor_x_50_percent.vtt @@ -0,0 +1,8 @@ +WEBVTT + +REGION +id:1 +viewportanchor:50%,100% + +00:00:00.000 --> 00:00:05.000 region:1 +This is a test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/viewportanchor_y_50_percent.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/viewportanchor_y_50_percent.vtt new file mode 100644 index 0000000000..62e8a79687 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/viewportanchor_y_50_percent.vtt @@ -0,0 +1,8 @@ +WEBVTT + +REGION +id:1 +viewportanchor:0%,50% + +00:00:00.000 --> 00:00:05.000 region:1 +This is a test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/width_50_percent.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/width_50_percent.vtt new file mode 100644 index 0000000000..9fce99b03b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/support/width_50_percent.vtt @@ -0,0 +1,8 @@ +WEBVTT + +REGION +id:1 +width:50% + +00:00:00.000 --> 00:00:05.000 region:1 +This is a test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_x_50_percent-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_x_50_percent-ref.html new file mode 100644 index 0000000000..79f8e089ca --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_x_50_percent-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering regions, viewportanchor x 50%</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; + overflow: hidden; +} +.cue { + position: absolute; + bottom: 0; + left: 50%; + right: -50%; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_x_50_percent.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_x_50_percent.html new file mode 100644 index 0000000000..01f37fbf0d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_x_50_percent.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering regions, viewportanchor x 50%</title> +<link rel="match" href="viewportanchor_x_50_percent-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/viewportanchor_x_50_percent.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_y_50_percent-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_y_50_percent-ref.html new file mode 100644 index 0000000000..238b4af799 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_y_50_percent-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering regions, viewportanchor y 50%</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 50%; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_y_50_percent.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_y_50_percent.html new file mode 100644 index 0000000000..504f4a99d0 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/viewportanchor_y_50_percent.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering regions, viewportanchor y 50%</title> +<link rel="match" href="viewportanchor_y_50_percent-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/viewportanchor_y_50_percent.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/width_50_percent-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/width_50_percent-ref.html new file mode 100644 index 0000000000..d27d698f79 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/width_50_percent-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering regions, width 50%</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 50%; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/width_50_percent.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/width_50_percent.html new file mode 100644 index 0000000000..ba550344f1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/regions/width_50_percent.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering regions, width 50%</title> +<link rel="match" href="width_50_percent-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/width_50_percent.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/repaint-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/repaint-ref.html new file mode 100644 index 0000000000..49f385b079 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/repaint-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, cue should repaint after hiding a covering abspos box</title> +<style> +.video { + display: inline-block; + width: 320px; + height: 240px; + position: relative; + font-size: 50px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<p>You should see the word 'PASS' below.</p> +<div class="video"><span class="cue"><span>PASS</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/repaint.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/repaint.html new file mode 100644 index 0000000000..669880b976 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/repaint.html @@ -0,0 +1,51 @@ +<!doctype html> +<html class="reftest-wait"> +<title>WebVTT rendering, cue should repaint after hiding a covering abspos box</title> +<link rel="match" href="repaint-ref.html"> +<style> +#wrapper { + position: relative; +} +#cover { + position: absolute; + left: 0px; + top: 180px; + width: 320px; + height: 60px; + background-color: gray; +} +video { + width: 320px; + height: 240px; +} +::cue { + font-size: 50px; + color: green; +} +</style> +<p>You should see the word 'PASS' below.</p> +<script src="/common/reftest-wait.js"></script> +<div id=wrapper> + <video> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + </video> + <div id=cover></div> +</div> +<script> +var v = document.querySelector('video'); +var c = document.getElementById('cover'); +var t = v.addTextTrack('subtitles'); +t.mode = "showing"; +t.addCue(new VTTCue(0, 100, 'PASS')); +v.onplaying = function() { + setTimeout(function() { + v.pause(); + setTimeout(function() { + c.style.visibility = 'hidden'; + setTimeout(takeScreenshot, 100); + }, 100); + }, 100); +}; +v.play(); +</script> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/font_properties-ref.html new file mode 100644 index 0000000000..669342072a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/font_properties-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue-region, font properties</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.region-cue { + position: absolute; + top: 0; + left: 0; + right: 0; + text-align: center; +} +.region-cue > span { + font: italic small-caps bold 9px/18px sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="region-cue"><span>This is a test subtitle</span></span><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/font_properties.html new file mode 100644 index 0000000000..7ba2796aa9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/font_properties.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue-region, font properties</title> +<link rel="match" href="font_properties-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue-region { + font-style: italic; + font-variant: small-caps; + font-weight: bold; + font-size: 9px; + line-height: 18px; + font-family: sans-serif !important; +} +::cue { + font-family: Ahem, sans-serif; + color: white; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/support/test.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/support/test.vtt new file mode 100644 index 0000000000..5ead6782ec --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region/support/test.vtt @@ -0,0 +1,13 @@ +WEBVTT + +REGION +id:1 +lines:1 +regionanchor:0%,0% +viewportanchor:0%,0% + +00:00:00.000 --> 00:00:05.000 +This is a test subtitle + +00:00:00.000 --> 00:00:05.000 region:1 +This is a test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/font_properties-ref.html new file mode 100644 index 0000000000..6c027c28a2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/font_properties-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue-region(), font properties</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.region1-cue { + position: absolute; + top: 0; + left: 0; + right: 0; + text-align: center; +} +.region1-cue > span { + font: italic small-caps bold 9px/18px sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.region2-cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; +} +.region2-cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="region1-cue"><span>This is a test subtitle</span></span><span class="region2-cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/font_properties.html new file mode 100644 index 0000000000..dd01d74602 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/font_properties.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue-region(), font properties</title> +<link rel="match" href="font_properties-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue-region(#\31) { + font-style: italic; + font-variant: small-caps; + font-weight: bold; + font-size: 9px; + line-height: 18px; + font-family: sans-serif !important; +} +::cue-region(#\32) { + font-family: Ahem, sans-serif; + color: white; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/support/test.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/support/test.vtt new file mode 100644 index 0000000000..7edfaf7262 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue-region_function/support/test.vtt @@ -0,0 +1,17 @@ +WEBVTT + +REGION +id:1 +lines:1 +regionanchor:0%,0% +viewportanchor:0%,0% + +REGION +id:2 +lines:1 + +00:00:00.000 --> 00:00:05.000 region:1 +This is a test subtitle + +00:00:00.000 --> 00:00:05.000 region:2 +This is a test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_properties-ref.html new file mode 100644 index 0000000000..c38d513a42 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_properties-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, background properties</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: #0f0 url('../../media/background.gif') repeat-x top left; + font-size: 9px; + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_properties.html new file mode 100644 index 0000000000..7c1757dd0f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_properties.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, background properties</title> +<link rel="match" href="background_properties-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + background-color: #0f0; + background-image: url('../../media/background.gif'); + background-repeat: repeat-x; + background-position: top left; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand-ref.html new file mode 100644 index 0000000000..b6e8692dc9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, background shorthand</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: #0f0 url('../../media/background.gif') repeat-x top left; + font-size: 9px; + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand.html new file mode 100644 index 0000000000..d8c15b1982 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, background shorthand</title> +<link rel="match" href="background_shorthand-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + background: #0f0 url('../../media/background.gif') repeat-x top left; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand_css_relative_url-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand_css_relative_url-ref.html new file mode 100644 index 0000000000..f630d7caad --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand_css_relative_url-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, background shorthand, background image URL with relative path from CSS file</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: #0f0 url('../../media/background.gif') repeat-x top left; + font-size: 9px; + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand_css_relative_url.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand_css_relative_url.html new file mode 100644 index 0000000000..2397fec005 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/background_shorthand_css_relative_url.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, background shorthand, background image URL with relative path from CSS file</title> +<link rel="match" href="background_shorthand_css_relative_url-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + background: #0f0 url('../../media/background.gif') repeat-x top left; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hex-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hex-ref.html new file mode 100644 index 0000000000..7e37d8f787 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hex-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, color: #60ff60</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + font-size: 9px; + color: #60ff60; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hex.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hex.html new file mode 100644 index 0000000000..a759e718f8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hex.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, color: #60ff60</title> +<link rel="match" href="color_hex-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: #60ff60; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hsla-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hsla-ref.html new file mode 100644 index 0000000000..377a8ebe82 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hsla-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, color: hsla()</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + font-size: 9px; + color: hsla(100,100%,50%,0.5); +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hsla.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hsla.html new file mode 100644 index 0000000000..2287c703ef --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_hsla.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, color: hsla()</title> +<link rel="match" href="color_hsla-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: hsla(100,100%,50%,0.5); +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_rgba-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_rgba-ref.html new file mode 100644 index 0000000000..461e743da5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_rgba-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, color: rgba()</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + font-size: 9px; + color: rgba(128,255,128,0.5); +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_rgba.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_rgba.html new file mode 100644 index 0000000000..6848b8d75b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/color_rgba.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, color: rgba()</title> +<link rel="match" href="color_rgba-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: rgba(128,255,128,0.5); +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/cue_selector_single_colon-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/cue_selector_single_colon-ref.html new file mode 100644 index 0000000000..cf00fe891d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/cue_selector_single_colon-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, :cue (single colon) should not be supported</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/cue_selector_single_colon.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/cue_selector_single_colon.html new file mode 100644 index 0000000000..d27ac3e3c6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/cue_selector_single_colon.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, :cue (single colon) should not be supported</title> +<link rel="match" href="cue_selector_single_colon-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +:cue { + background: red; + color: yellow +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties-ref.html new file mode 100644 index 0000000000..c584cf1f03 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, font properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font: italic small-caps bold 9px/18px sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties.html new file mode 100644 index 0000000000..cafc222e4d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, font properties</title> +<link rel="match" href="font_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-style: italic; + font-variant: small-caps; + font-weight: bold; + font-size: 9px; + line-height: 18px; + font-family: sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand-ref.html new file mode 100644 index 0000000000..c078724851 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, font shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font: italic small-caps bold 9px/18px sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand.html new file mode 100644 index 0000000000..78e2800fa3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, font shorthand</title> +<link rel="match" href="font_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font: italic small-caps bold 9px/18px sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/inherit_values_from_media_element-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/inherit_values_from_media_element-ref.html new file mode 100644 index 0000000000..82cebf4606 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/inherit_values_from_media_element-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, css properties with value inherit should inherit from media element</title> +<style> +.video { + position: absolute; + display: inline-block; + width: 320px; + height: 180px; + position: relative; + color: #f0f; + white-space: pre-wrap; + font: italic small-caps bold 9px/18px sans-serif; + text-decoration: overline underline line-through; + text-shadow: 0px 0px 5px #0f0; + background: #0f0 url('../../media/background.gif') repeat-x top left; + outline: solid #00f 2px; + font-size: 9px; +} +.videoWhite { + position: absolute; + top: 0; + left: 40px; + width: 240px; + height: 180px;; + background: #fff; + z-index: 1; +} +.cue { + position: absolute; + bottom: 0; + left: 30%; + right: 0; + width: 40%; + text-align: center; + outline: inherit; + text-shadow: inherit; + text-decoration: inherit; + outline-bottom: none; + z-index: 2 +} +.cue > span { + background: #0f0 url('../../media/background.gif') repeat-x top left; + text-decoration: inherit; + white-space: pre-wrap +} +</style> +<div class="video"><div class="videoWhite"></div><span class="cue"><span>A A A A A A A A A A A</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/inherit_values_from_media_element.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/inherit_values_from_media_element.html new file mode 100644 index 0000000000..0b7bcf1c56 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/inherit_values_from_media_element.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, css properties with value inherit should inherit from media element</title> +<link rel="match" href="inherit_values_from_media_element-ref.html"> +<style> +video { + color: #f0f; + white-space: pre-wrap; + font: italic small-caps bold 9px/18px sans-serif; + text-decoration: overline underline line-through; + text-shadow: 0px 0px 5px #0f0; + background: #0f0 url('../../media/background.gif') repeat-x top left; + outline: solid #00f 2px; +} +::cue { + white-space: inherit; + font: inherit; + color: inherit; + text-decoration: inherit; + text-shadow: inherit; + background: inherit; + outline: inherit; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/white-spaces_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_properties-ref.html new file mode 100644 index 0000000000..c436b0a72f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_properties-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, outline properties</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + outline: solid #00f 2px; + background: rgba(0,0,0,0.8); + font-size: 9px; + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_properties.html new file mode 100644 index 0000000000..f4d4eed5f8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, outline properties</title> +<link rel="match" href="outline_properties-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + outline-style: solid; + outline-color: #00f; + outline-width: 2px; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_shorthand-ref.html new file mode 100644 index 0000000000..5ec6727ea2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_shorthand-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, outline shorthand</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + outline: solid #00f 2px; + background: rgba(0,0,0,0.8); + font-size: 9px; + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_shorthand.html new file mode 100644 index 0000000000..e16c083e11 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/outline_shorthand.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, outline shorthand</title> +<link rel="match" href="outline_shorthand-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + outline: solid #00f 2px; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_line-through-ref.html new file mode 100644 index 0000000000..594d5b29b3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_line-through-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, text-decoration: line-through</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-size: 9px; + color: white; + text-decoration: line-through; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_line-through.html new file mode 100644 index 0000000000..9a4179b418 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_line-through.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, text-decoration: line-through</title> +<link rel="match" href="text-decoration_line-through-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: sans-serif; + text-decoration: line-through; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline-ref.html new file mode 100644 index 0000000000..bb18854b8a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, text-decoration: overline</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-size: 9px; + color: white; + text-decoration: overline; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline.html new file mode 100644 index 0000000000..be7056c138 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, text-decoration: overline</title> +<link rel="match" href="text-decoration_overline-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: sans-serif; + text-decoration: overline; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline_underline_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline_underline_line-through-ref.html new file mode 100644 index 0000000000..85b2067559 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline_underline_line-through-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, text-decoration: overline underline line-through</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-size: 9px; + color: white; + text-decoration: overline underline line-through; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline_underline_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline_underline_line-through.html new file mode 100644 index 0000000000..47f1999fc1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_overline_underline_line-through.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, text-decoration: overline underline line-through</title> +<link rel="match" href="text-decoration_overline_underline_line-through-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: sans-serif; + text-decoration: overline underline line-through; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_underline-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_underline-ref.html new file mode 100644 index 0000000000..4a5247233a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_underline-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, text-decoration: underline</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-size: 9px; + color: white; + text-decoration: underline; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_underline.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_underline.html new file mode 100644 index 0000000000..67d920cefa --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-decoration_underline.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, text-decoration: underline</title> +<link rel="match" href="text-decoration_underline-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: sans-serif; + text-decoration: underline; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-shadow-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-shadow-ref.html new file mode 100644 index 0000000000..72e6a15ca3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-shadow-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, text-shadow</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-size: 9px; + color: white; + text-shadow: 0px 0px 5px #0f0; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-shadow.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-shadow.html new file mode 100644 index 0000000000..fbd4022a38 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/text-shadow.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, text-shadow</title> +<link rel="match" href="text-shadow-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: sans-serif; + text-shadow: 0px 0px 5px #0f0; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_ruby-position-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_ruby-position-ref.html new file mode 100644 index 0000000000..8e33ca41a4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_ruby-position-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bidi ruby</title> + <meta charset="UTF-8"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + right: 0; + text-align: center; + unicode-bidi: -webkit-plaintext; + unicode-bidi: plaintext; + direction: ltr; + writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; +} +.cue > span { + -webkit-ruby-position: after; + ruby-position: under; + ruby-position: left; + font-family: Ahem, sans-serif; + background: #0f0 url('../../media/background.gif') repeat-x top left; + color: green; +} +</style> +<div class="video"><span class="cue"><span><ruby></ruby>に<ruby> 見<rt>み</rt></ruby>えるのは...</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_ruby-position.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_ruby-position.html new file mode 100644 index 0000000000..2a59440893 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_ruby-position.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, vertical cue with ruby position left</title> +<link rel="match" href="vertical_ruby-position-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + ruby-position: left; + font-family: Ahem, sans-serif; + background: #0f0 url('../../media/background.gif') repeat-x top left; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/bidi_vertical_rl-oneline.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_text-combine-upright-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_text-combine-upright-ref.html new file mode 100644 index 0000000000..9283f049c2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_text-combine-upright-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bidi ruby</title> + <meta charset="UTF-8"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + text-align: center; + unicode-bidi: -webkit-plaintext; + unicode-bidi: plaintext; + direction: ltr; + writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; +} +.cue > span { + font-family: Ahem, sans-serif; + background: #0f0 url('../../media/background.gif') repeat-x top left; + color: green; +} +.combine { + -webkit-text-combine: horizontal; + text-combine-upright: all; +} +</style> +<div class="video"><span class="cue"><span>平成<span class="combine">20</span>年4月<span class="combine">16</span>日に</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_text-combine-upright.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_text-combine-upright.html new file mode 100644 index 0000000000..56899c5a10 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_text-combine-upright.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, vertical cue with text-combine-upright digits</title> +<link rel="match" href="vertical_text-combine-upright-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + text-combine-upright: digits; + font-family: Ahem, sans-serif; + background: #0f0 url('../../media/background.gif') repeat-x top left; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/bidi_text-combine-upright.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_normal_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_normal_wrapped-ref.html new file mode 100644 index 0000000000..6c28a4f792 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_normal_wrapped-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, white-space: normal (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 40%; + right: 0; + width: 20%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: normal +} +</style> +<div class="video"><span class="cue"><span>foo bar baz</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_normal_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_normal_wrapped.html new file mode 100644 index 0000000000..3241820a6b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_normal_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, white-space: normal (cue that wraps)</title> +<link rel="match" href="white-space_normal_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + white-space: normal +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/foo_space_space_bar_LF_baz.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_nowrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_nowrap_wrapped-ref.html new file mode 100644 index 0000000000..b6364cab1a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_nowrap_wrapped-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, white-space: nowrap (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 40%; + right: 0; + width: 20%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: nowrap +} +</style> +<div class="video"><span class="cue"><span>A A A A A A A A A A A</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_nowrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_nowrap_wrapped.html new file mode 100644 index 0000000000..db78752ef1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_nowrap_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, white-space: nowrap (cue that wraps)</title> +<link rel="match" href="white-space_nowrap_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + white-space: nowrap +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/white-spaces_long_size_20.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-line_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-line_wrapped-ref.html new file mode 100644 index 0000000000..45ee7f85dc --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-line_wrapped-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, white-space: pre-line (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 40%; + right: 0; + width: 20%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: normal +} +</style> +<div class="video"><span class="cue"><span>A A A A A A<br> A A A A A</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-line_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-line_wrapped.html new file mode 100644 index 0000000000..c06e0543b9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-line_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, white-space: pre-line (cue that wraps)</title> +<link rel="match" href="white-space_pre-line_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + white-space: pre-line +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/white-spaces_long_size_20.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-ref.html new file mode 100644 index 0000000000..075b762bd0 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, white-space: pre</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; + white-space: pre +} +</style> +<div class="video"><span class="cue"><span>A A A A A A</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-wrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-wrap_wrapped-ref.html new file mode 100644 index 0000000000..06313b9c71 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-wrap_wrapped-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, white-space: pre-wrap (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 30%; + right: 0; + width: 40%; + font-family: sans-serif; + text-align: center; +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; + white-space: pre +} +</style> +<div class="video"><span class="cue"><span>A A A A A <br> A <br>A A A A A</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-wrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-wrap_wrapped.html new file mode 100644 index 0000000000..68bfee0706 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-wrap_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, white-space: pre-wrap (cue that wraps)</title> +<link rel="match" href="white-space_pre-wrap_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + white-space: pre-wrap +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/white-spaces_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre.html new file mode 100644 index 0000000000..f4dda8f9a8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, white-space: pre</title> +<link rel="match" href="white-space_pre-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + white-space: pre +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/white-spaces.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre_wrapped-ref.html new file mode 100644 index 0000000000..f568217a14 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre_wrapped-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue, white-space: pre (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 30%; + right: 0; + width: 40%; + font-family: sans-serif; + text-align: center; + overflow: hidden; +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; + white-space: pre +} +</style> +<div class="video"><span class="cue"><span>A A A A A A A A A A A</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre_wrapped.html new file mode 100644 index 0000000000..1c82c62158 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue, white-space: pre (cue that wraps)</title> +<link rel="match" href="white-space_pre_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + white-space: pre +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/white-spaces_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_box-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_box-ref.html new file mode 100644 index 0000000000..04ce82af37 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_box-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(* *) should match nothing (since the background box is anonymous)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_box.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_box.html new file mode 100644 index 0000000000..3cbf2d193d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_box.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(* *) should match nothing (since the background box is anonymous)</title> +<link rel="match" href="background_box-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(* *) { + background:red; + color:yellow +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_properties-ref.html new file mode 100644 index 0000000000..e85da9c268 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_properties-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), background properties</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: #0f0 url('../../media/background.gif') repeat-x top left; + font-size: 9px; + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_properties.html new file mode 100644 index 0000000000..5c0dae4d41 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_properties.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), background properties</title> +<link rel="match" href="background_properties-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + font-family: Ahem, sans-serif; + background-color: #0f0; + background-image: url('../../media/background.gif'); + background-repeat: repeat-x; + background-position: top left; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand-ref.html new file mode 100644 index 0000000000..85a65c9636 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), background shorthand</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: #0f0 url('../../media/background.gif') repeat-x top left; + font-size: 9px; + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand.html new file mode 100644 index 0000000000..da6e5c5541 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), background shorthand</title> +<link rel="match" href="background_shorthand-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + font-family: Ahem, sans-serif; + background: #0f0 url('../../media/background.gif') repeat-x top left; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand_css_relative_url-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand_css_relative_url-ref.html new file mode 100644 index 0000000000..9f203dfe85 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand_css_relative_url-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), background shorthand, background image URL with relative path from CSS file</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: #0f0 url('../../media/background.gif') repeat-x top left; + font-size: 9px; + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand_css_relative_url.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand_css_relative_url.html new file mode 100644 index 0000000000..10777f0e32 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/background_shorthand_css_relative_url.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), background shorthand, background image URL with relative path from CSS file</title> +<link rel="match" href="background_shorthand_css_relative_url-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + font-family: Ahem, sans-serif; + background: #0f0 url('../../media/background.gif') repeat-x top left; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_animation_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_animation_with_timestamp-ref.html new file mode 100644 index 0000000000..12ff3e16b8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_animation_with_timestamp-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bold object animation with timestamp, ::cue(b:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #80ff80; + font-weight: bold; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_animation_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_animation_with_timestamp.html new file mode 100644 index 0000000000..8ba96727f8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_animation_with_timestamp.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bold object animation with timestamp, ::cue(b:past) selector</title> +<link rel="match" href="bold_animation_with_timestamp-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b:past) { + -o-animation: test 9s steps(2, start); + animation: test 9s steps(2, start); +} +@-o-keyframes test { + 0% { + color: #ffffff; + } + 100% { + color: #00ff00; + } +} +@keyframes test { + 0% { + color: #ffffff; + } + 100% { + color: #00ff00; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/bold_with_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_properties-ref.html new file mode 100644 index 0000000000..53c778e912 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_properties-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(b), background properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > b { + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_properties.html new file mode 100644 index 0000000000..f2252d16ce --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(b), background properties</title> +<link rel="match" href="bold_background_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b) { + font-family: sans-serif; + background-color: #0f0; + background-image: url('../../../media/background.gif'); + background-repeat: repeat-x; + background-position: top left; + color: black; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_bold.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_shorthand-ref.html new file mode 100644 index 0000000000..7d973a56c9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_shorthand-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(b), background shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > b { + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_shorthand.html new file mode 100644 index 0000000000..7c718d7cbd --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_background_shorthand.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(b), background shorthand</title> +<link rel="match" href="bold_background_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b) { + font-family: sans-serif; + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_bold.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_color-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_color-ref.html new file mode 100644 index 0000000000..35ed895546 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_color-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(b), color: #0000ff</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > b { + color: #0000ff; +} +</style> +<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_color.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_color.html new file mode 100644 index 0000000000..66fe3f2f88 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_color.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(b), color: #0000ff</title> +<link rel="match" href="bold_color-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b) { + font-family: sans-serif; + color: #0000ff; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_bold.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_properties-ref.html new file mode 100644 index 0000000000..74e8acc0b6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_properties-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(b), font properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > b { + font: italic small-caps normal 9px/18px sans-serif; +} +</style> +<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_properties.html new file mode 100644 index 0000000000..5b241c662f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(b), font properties</title> +<link rel="match" href="bold_font_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b) { + font-style: italic; + font-variant: small-caps; + font-weight: normal; + font-size: 9px; + line-height: 18px; + font-family: sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_bold.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_shorthand-ref.html new file mode 100644 index 0000000000..ad450735b1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_shorthand-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(b), font shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > b { + font: normal small-caps normal 9px/18px sans-serif; +} +</style> +<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_shorthand.html new file mode 100644 index 0000000000..eb0e4560a9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_font_shorthand.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(b), font shorthand</title> +<link rel="match" href="bold_font_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b) { + font: normal small-caps normal 9px/18px sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_bold.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_namespace-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_namespace-ref.html new file mode 100644 index 0000000000..dba8e3d37f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_namespace-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(|b) should match</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +.green { + font-weight: bold; + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_namespace.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_namespace.html new file mode 100644 index 0000000000..93b6e1b286 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_namespace.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(|b) should match</title> +<link rel="match" href="bold_namespace-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + color: green; +} +::cue(*|b) { + color: red +} +::cue(|b) { + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_bold.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_properties-ref.html new file mode 100644 index 0000000000..67f873c424 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_properties-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(b), outline properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > b { + display: inline-block; + margin-left: -2px; + margin-right: -2px; + border: solid #00f 2px; + border-bottom: none; +} +</style> +<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_properties.html new file mode 100644 index 0000000000..39a2fe57c8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_properties.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(b), outline properties</title> +<link rel="match" href="bold_outline_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b) { + font-family: sans-serif; + outline-style: solid; + outline-color: #00f; + outline-width: 2px; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_bold.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_shorthand-ref.html new file mode 100644 index 0000000000..ebb9258299 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_shorthand-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(b), outline shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > b { + display: inline-block; + margin-left: -2px; + margin-right: -2px; + border: solid #00f 2px; + border-bottom: none; +} +</style> +<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_shorthand.html new file mode 100644 index 0000000000..163e5f9167 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_outline_shorthand.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(b), outline shorthand</title> +<link rel="match" href="bold_outline_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b) { + font-family: sans-serif; + outline: solid #00f 2px; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_bold.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-decoration_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-decoration_line-through-ref.html new file mode 100644 index 0000000000..eb06125634 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-decoration_line-through-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(b), text-decoration: line-through</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > b { + text-decoration: line-through; +} +</style> +<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-decoration_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-decoration_line-through.html new file mode 100644 index 0000000000..e3045d5b25 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-decoration_line-through.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(b), text-decoration: line-through</title> +<link rel="match" href="bold_text-decoration_line-through-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b) { + font-family: sans-serif; + text-decoration: line-through; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_bold.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-shadow-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-shadow-ref.html new file mode 100644 index 0000000000..5cd5f89858 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-shadow-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(b), text-shadow</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > b { + text-shadow: 0px 0px 5px #0f0; +} +</style> +<div class="video"><span class="cue"><span>This is a <b>test subtitle</b></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-shadow.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-shadow.html new file mode 100644 index 0000000000..d5b32a63d7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_text-shadow.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(b), text-shadow</title> +<link rel="match" href="bold_text-shadow-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b) { + font-family: sans-serif; + text-shadow: 0px 0px 5px #0f0; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_bold.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_future-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_future-ref.html new file mode 100644 index 0000000000..425754ea8e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_future-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bold object transition with timestamp, ::cue(b:future) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-weight: bold; + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_future.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_future.html new file mode 100644 index 0000000000..6dae921e6d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_future.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bold object transition with timestamp, ::cue(b:future) selector</title> +<link rel="match" href="bold_timestamp_future-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b:future) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/bold_with_2_timestamps.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_past-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_past-ref.html new file mode 100644 index 0000000000..7cca2b42b1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_past-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bold object transition with timestamp, ::cue(b:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-weight: bold; + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_past.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_past.html new file mode 100644 index 0000000000..b43d786dd7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_timestamp_past.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bold object transition with timestamp, ::cue(b:past) selector</title> +<link rel="match" href="bold_timestamp_past-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b:past) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/bold_with_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_transition_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_transition_with_timestamp-ref.html new file mode 100644 index 0000000000..a958d8f787 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_transition_with_timestamp-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bold object transition with timestamp, ::cue(b:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #80ff80; + font-weight: bold; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_transition_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_transition_with_timestamp.html new file mode 100644 index 0000000000..d83f85ca38 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_transition_with_timestamp.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bold object transition with timestamp, ::cue(b:past) selector</title> +<link rel="match" href="bold_transition_with_timestamp-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b) { + -o-transition: color 9s steps(2, start); + transition: color 9s steps(2, start); +} +::cue(b:past) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/bold_with_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_normal_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_normal_wrapped-ref.html new file mode 100644 index 0000000000..9b682b2546 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_normal_wrapped-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bold object, ::cue(b), white-space: normal (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + font-weight: bold; + white-space: normal +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_normal_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_normal_wrapped.html new file mode 100644 index 0000000000..66869fa009 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_normal_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bold object, ::cue(b), white-space: normal (cue that wraps)</title> +<link rel="match" href="bold_white-space_normal_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b) { + white-space: normal +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/bold_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_nowrap-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_nowrap-ref.html new file mode 100644 index 0000000000..949a72e3e7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_nowrap-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bold object, ::cue(b), white-space: nowrap (cue does not wrap)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative; + overflow: hidden; +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + font-weight: bold; + white-space: nowrap +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_nowrap.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_nowrap.html new file mode 100644 index 0000000000..636ecd467b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_nowrap.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bold object, ::cue(b), white-space: nowrap (cue does not wrap)</title> +<link rel="match" href="bold_white-space_nowrap-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b) { + white-space: nowrap +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/bold_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-line_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-line_wrapped-ref.html new file mode 100644 index 0000000000..951b9c932c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-line_wrapped-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bold object, ::cue(b), white-space: pre-line (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + font-weight: bold; + white-space: pre-line +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-line_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-line_wrapped.html new file mode 100644 index 0000000000..b8eb48811f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-line_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bold object, ::cue(b), white-space: pre-line (cue that wraps)</title> +<link rel="match" href="bold_white-space_pre-line_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b) { + white-space: pre-line +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/bold_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-wrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-wrap_wrapped-ref.html new file mode 100644 index 0000000000..ffc8721a16 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-wrap_wrapped-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bold object, ::cue(b), white-space: pre-wrap (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + font-weight: bold; + white-space: pre-wrap +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-wrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-wrap_wrapped.html new file mode 100644 index 0000000000..ab1f1009e6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre-wrap_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bold object, ::cue(b), white-space: pre-wrap (cue that wraps)</title> +<link rel="match" href="bold_white-space_pre-wrap_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b) { + white-space: pre-wrap +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/bold_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre_wrapped-ref.html new file mode 100644 index 0000000000..b8b6025c31 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre_wrapped-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bold object, ::cue(b), white-space: pre (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; + overflow: hidden; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + font-weight: bold; + white-space: pre +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre_wrapped.html new file mode 100644 index 0000000000..bc116eb669 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_white-space_pre_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bold object, ::cue(b), white-space: pre (cue that wraps)</title> +<link rel="match" href="bold_white-space_pre_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b) { + white-space: pre +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/bold_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class-ref.html new file mode 100644 index 0000000000..e8ce47ef8d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bold object with class, ::cue(.foo) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <b>test subtitle</b>, <b class="green">test subtitle</b></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class.html new file mode 100644 index 0000000000..c3173c2265 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bold object with class, ::cue(.foo) selector</title> +<link rel="match" href="bold_with_class-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(.foo) { + font-family: sans-serif; + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_bold_with_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class_object_specific_selector-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class_object_specific_selector-ref.html new file mode 100644 index 0000000000..5de9e15149 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class_object_specific_selector-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bold object with class, ::cue(b.foo) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <b>test subtitle</b>, <b class="green">test subtitle</b></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class_object_specific_selector.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class_object_specific_selector.html new file mode 100644 index 0000000000..611fdd4890 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/bold_object/bold_with_class_object_specific_selector.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, bold object with class, ::cue(b.foo) selector</title> +<link rel="match" href="bold_with_class_object_specific_selector-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(b.foo) { + font-family: sans-serif; + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_bold_with_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_animation_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_animation_with_timestamp-ref.html new file mode 100644 index 0000000000..bbd5d40132 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_animation_with_timestamp-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, class object animation with timestamp, ::cue(c:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #80ff80; + font-weight: bold; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_animation_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_animation_with_timestamp.html new file mode 100644 index 0000000000..3313941fc3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_animation_with_timestamp.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, class object animation with timestamp, ::cue(c:past) selector</title> +<link rel="match" href="class_animation_with_timestamp-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c:past) { + -o-animation: test 9s steps(2, start); + animation: test 9s steps(2, start); +} +@-o-keyframes test { + 0% { + color: #ffffff; + } + 100% { + color: #00ff00; + } +} +@keyframes test { + 0% { + color: #ffffff; + } + 100% { + color: #00ff00; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/class_with_timestamp.vtt"> +</video> +<script> +document.getElementsByTagName('track')[0].track.mode = 'showing'; +</script> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_properties-ref.html new file mode 100644 index 0000000000..5639c67ac5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_properties-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(c), background properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_properties.html new file mode 100644 index 0000000000..2d8c2f8657 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(c), background properties</title> +<link rel="match" href="class_background_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c) { + font-family: sans-serif; + background-color: #0f0; + background-image: url('../../../media/background.gif'); + background-repeat: repeat-x; + background-position: top left; + color: black; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_shorthand-ref.html new file mode 100644 index 0000000000..a688693582 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_shorthand-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(c), background shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_shorthand.html new file mode 100644 index 0000000000..52ab133567 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_background_shorthand.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(c), background shorthand</title> +<link rel="match" href="class_background_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c) { + font-family: sans-serif; + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_color-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_color-ref.html new file mode 100644 index 0000000000..22584f6910 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_color-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(c), color: #0000ff</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + color: #0000ff; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_color.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_color.html new file mode 100644 index 0000000000..47c4be5886 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_color.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(c), color: #0000ff</title> +<link rel="match" href="class_color-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c) { + font-family: sans-serif; + color: #0000ff; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_properties-ref.html new file mode 100644 index 0000000000..62ab14239e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_properties-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(c), font properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + font: italic small-caps bold 9px/18px sans-serif; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_properties.html new file mode 100644 index 0000000000..5658f81688 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(c), font properties</title> +<link rel="match" href="class_font_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c) { + font-style: italic; + font-variant: small-caps; + font-weight: bold; + font-size: 9px; + line-height: 18px; + font-family: sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_shorthand-ref.html new file mode 100644 index 0000000000..fe17d8f418 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_shorthand-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(c), font shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + font: normal small-caps bold 9px/18px sans-serif; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_shorthand.html new file mode 100644 index 0000000000..aa243537a7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_font_shorthand.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(c), font shorthand</title> +<link rel="match" href="class_font_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c) { + font: normal small-caps bold 9px/18px sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_namespace-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_namespace-ref.html new file mode 100644 index 0000000000..1370516236 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_namespace-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(|c) should match</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +.green { + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_namespace.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_namespace.html new file mode 100644 index 0000000000..3989f2180a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_namespace.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(|c) should match</title> +<link rel="match" href="class_namespace-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + color: green; + font-family: Ahem, sans-serif +} +::cue(*|c) { + color: red +} +::cue(|c) { + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_properties-ref.html new file mode 100644 index 0000000000..cd712eab23 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_properties-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(c), outline properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + display: inline-block; + margin-left: -2px; + margin-right: -2px; + border: solid #00f 2px; + border-bottom: none; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_properties.html new file mode 100644 index 0000000000..82fdc1445f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_properties.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(c), outline properties</title> +<link rel="match" href="class_outline_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c) { + font-family: sans-serif; + outline-style: solid; + outline-color: #00f; + outline-width: 2px; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_shorthand-ref.html new file mode 100644 index 0000000000..eb0195f269 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_shorthand-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(c), outline shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + display: inline-block; + margin-left: -2px; + margin-right: -2px; + border: solid #00f 2px; + border-bottom: none; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_shorthand.html new file mode 100644 index 0000000000..881a0967a3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_outline_shorthand.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(c), outline shorthand</title> +<link rel="match" href="class_outline_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c) { + font-family: sans-serif; + outline: solid #00f 2px; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-decoration_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-decoration_line-through-ref.html new file mode 100644 index 0000000000..d7eabfac2b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-decoration_line-through-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(c), text-decoration: line-through</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + text-decoration: line-through; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-decoration_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-decoration_line-through.html new file mode 100644 index 0000000000..cf6caa4456 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-decoration_line-through.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(c), text-decoration: line-through</title> +<link rel="match" href="class_text-decoration_line-through-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c) { + font-family: sans-serif; + text-decoration: line-through; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-shadow-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-shadow-ref.html new file mode 100644 index 0000000000..22c339c8c5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-shadow-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(c), text-shadow</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + text-shadow: 0px 0px 5px #0f0; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-shadow.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-shadow.html new file mode 100644 index 0000000000..786f9b7d9e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_text-shadow.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(c), text-shadow</title> +<link rel="match" href="class_text-shadow-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c) { + font-family: sans-serif; + text-shadow: 0px 0px 5px #0f0; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_future-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_future-ref.html new file mode 100644 index 0000000000..0567e7e2c0 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_future-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, class object transition with timestamp, ::cue(c:future) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_future.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_future.html new file mode 100644 index 0000000000..a4a1d755a2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_future.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, class object transition with timestamp, ::cue(c:future) selector</title> +<link rel="match" href="class_timestamp_future-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c:future) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/class_with_2_timestamps.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_past-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_past-ref.html new file mode 100644 index 0000000000..20c8a37493 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_past-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, class object transition with timestamp, ::cue(c:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_past.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_past.html new file mode 100644 index 0000000000..4d1ceea2d1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_timestamp_past.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, class object transition with timestamp, ::cue(c:past) selector</title> +<link rel="match" href="class_timestamp_past-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c:past) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/class_with_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_transition_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_transition_with_timestamp-ref.html new file mode 100644 index 0000000000..7cb9a1ea4f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_transition_with_timestamp-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, class object transition with timestamp, ::cue(c:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #80ff80; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_transition_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_transition_with_timestamp.html new file mode 100644 index 0000000000..adb5328b83 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_transition_with_timestamp.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, class object transition with timestamp, ::cue(c:past) selector</title> +<link rel="match" href="class_transition_with_timestamp-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c) { + -o-transition: color 9s steps(2, start); + transition: color 9s steps(2, start); +} +::cue(c:past) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/class_with_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_vertical_text-combine-upright-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_vertical_text-combine-upright-ref.html new file mode 100644 index 0000000000..8bbd791136 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_vertical_text-combine-upright-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, bidi ruby</title> + <meta charset="UTF-8"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + text-align: center; + unicode-bidi: -webkit-plaintext; + unicode-bidi: plaintext; + direction: ltr; + writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.combine { + -webkit-text-combine: horizontal; + text-combine-upright: all; + font-family: Ahem, sans-serif; + background: #0f0 url('../../media/background.gif') repeat-x top left; + color: green; +} +</style> +<div class="video"><span class="cue"><span>平成<span class="combine">20</span>年4月<span class="combine">16</span>日に</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_vertical_text-combine-upright.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_vertical_text-combine-upright.html new file mode 100644 index 0000000000..fe0d22843d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_vertical_text-combine-upright.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, vertical cue with class to apply text-combine-upright all</title> +<link rel="match" href="class_vertical_text-combine-upright-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(.combine) { + text-combine-upright: all; + font-family: Ahem, sans-serif; + background: #0f0 url('../../media/background.gif') repeat-x top left; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/class_text-combine-upright.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_normal_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_normal_wrapped-ref.html new file mode 100644 index 0000000000..b710c322ee --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_normal_wrapped-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for WebVTT rendering, class object, ::cue(c), white-space: normal (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; + font-family: sans-serif; +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; + white-space: normal +} +</style> +<script src="/common/reftest-wait.js"></script> +<div class="video"> + <video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + </video> + <span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span> +</div> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_normal_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_normal_wrapped.html new file mode 100644 index 0000000000..ee38e36584 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_normal_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, class object, ::cue(c), white-space: normal (cue that wraps)</title> +<link rel="match" href="class_white-space_normal_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c) { + white-space: normal +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/class_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_nowrap-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_nowrap-ref.html new file mode 100644 index 0000000000..4176a6553d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_nowrap-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, class object, ::cue(c), white-space: nowrap (cue does not wrap)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative; + overflow: hidden; +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: nowrap +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_nowrap.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_nowrap.html new file mode 100644 index 0000000000..c86bcb6b62 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_nowrap.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, class object, ::cue(c), white-space: nowrap (cue does not wrap)</title> +<link rel="match" href="class_white-space_nowrap-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c) { + white-space: nowrap +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/class_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-line_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-line_wrapped-ref.html new file mode 100644 index 0000000000..34bf662975 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-line_wrapped-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for WebVTT rendering, class object, ::cue(c), white-space: pre-line (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; + font-family: sans-serif; +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; + white-space: pre-line +} +</style> +<script src="/common/reftest-wait.js"></script> +<div class="video"> + <video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + </video> + <span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span> +</div> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-line_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-line_wrapped.html new file mode 100644 index 0000000000..0a1b7206f8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-line_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, class object, ::cue(c), white-space: pre-line (cue that wraps)</title> +<link rel="match" href="class_white-space_pre-line_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c) { + white-space: pre-line +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/class_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-wrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-wrap_wrapped-ref.html new file mode 100644 index 0000000000..bf642420fa --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-wrap_wrapped-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, class object, ::cue(c), white-space: pre-wrap (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: pre-wrap +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-wrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-wrap_wrapped.html new file mode 100644 index 0000000000..3b11fd5e8f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre-wrap_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, class object, ::cue(c), white-space: pre-wrap (cue that wraps)</title> +<link rel="match" href="class_white-space_pre-wrap_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c) { + white-space: pre-wrap +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/class_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre_wrapped-ref.html new file mode 100644 index 0000000000..a681294fec --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre_wrapped-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, class object, ::cue(c), white-space: pre (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; + overflow: hidden; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: pre +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre_wrapped.html new file mode 100644 index 0000000000..dbca54f5c4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_white-space_pre_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, class object, ::cue(c), white-space: pre (cue that wraps)</title> +<link rel="match" href="class_white-space_pre_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c) { + white-space: pre +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/class_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class-ref.html new file mode 100644 index 0000000000..7f524ca846 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, class object with class, ::cue(.foo) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span>, <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class.html new file mode 100644 index 0000000000..9b24c87b3e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, class object with class, ::cue(.foo) selector</title> +<link rel="match" href="class_with_class-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(.foo) { + font-family: sans-serif; + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_class_with_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class_object_specific_selector-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class_object_specific_selector-ref.html new file mode 100644 index 0000000000..15fcc65178 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class_object_specific_selector-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, class object with class, ::cue(c.foo) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span>, <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class_object_specific_selector.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class_object_specific_selector.html new file mode 100644 index 0000000000..9812c969b2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/class_object/class_with_class_object_specific_selector.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, class object with class, ::cue(c.foo) selector</title> +<link rel="match" href="class_with_class_object_specific_selector-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(c.foo) { + font-family: sans-serif; + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_class_with_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hex-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hex-ref.html new file mode 100644 index 0000000000..9b1d412d5a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hex-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), color: #60ff60</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: #60ff60; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hex.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hex.html new file mode 100644 index 0000000000..08f77c7b42 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hex.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), color: #60ff60</title> +<link rel="match" href="color_hex-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + font-family: Ahem, sans-serif; + color: #60ff60; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hsla-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hsla-ref.html new file mode 100644 index 0000000000..0ad35cd63b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hsla-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), color: hsla()</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: hsla(100,100%,50%,0.5); +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hsla.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hsla.html new file mode 100644 index 0000000000..eb3f29b650 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_hsla.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), color: hsla()</title> +<link rel="match" href="color_hsla-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + font-family: Ahem, sans-serif; + color: hsla(100,100%,50%,0.5); +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_rgba-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_rgba-ref.html new file mode 100644 index 0000000000..15cc158bc8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_rgba-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), color: rgba()</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: rgba(128,255,128,0.5); +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_rgba.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_rgba.html new file mode 100644 index 0000000000..1045626b4c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/color_rgba.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), color: rgba()</title> +<link rel="match" href="color_rgba-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + font-family: Ahem, sans-serif; + color: rgba(128,255,128,0.5); +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/cue_func_selector_single_colon-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/cue_func_selector_single_colon-ref.html new file mode 100644 index 0000000000..e2ccf63de3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/cue_func_selector_single_colon-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, :cue()</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/cue_func_selector_single_colon.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/cue_func_selector_single_colon.html new file mode 100644 index 0000000000..3494918c1c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/cue_func_selector_single_colon.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, :cue()</title> +<link rel="match" href="cue_func_selector_single_colon-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +:cue(*) { + background: red; + color: yellow +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_properties-ref.html new file mode 100644 index 0000000000..ce446d9e96 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_properties-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), font properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font: italic small-caps bold 9px/18px sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_properties.html new file mode 100644 index 0000000000..e38cc7e0ca --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), font properties</title> +<link rel="match" href="font_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + font-style: italic; + font-variant: small-caps; + font-weight: bold; + font-size: 9px; + line-height: 18px; + font-family: sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_shorthand-ref.html new file mode 100644 index 0000000000..4c9d11a16e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_shorthand-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), font shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font: italic small-caps bold 9px/18px sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_shorthand.html new file mode 100644 index 0000000000..9deb49379b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/font_shorthand.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), font shorthand</title> +<link rel="match" href="font_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + font: italic small-caps bold 9px/18px sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/id_color-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/id_color-ref.html new file mode 100644 index 0000000000..fce51702f7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/id_color-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, cue with ID, ::cue(#foo) selector</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + font-size: 9px; + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/id_color.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/id_color.html new file mode 100644 index 0000000000..0371fe1c24 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/id_color.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, cue with ID, ::cue(#foo) selector</title> +<link rel="match" href="id_color-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(#foo) { + font-family: Ahem, sans-serif; + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/cue_with_id.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/inherit_values_from_media_element-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/inherit_values_from_media_element-ref.html new file mode 100644 index 0000000000..caef6dc409 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/inherit_values_from_media_element-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(*), css properties with value inherit should inherit from media element</title> +<style> +.video { + position: absolute; + display: inline-block; + width: 320px; + height: 180px; + position: relative; + color: #f0f; + white-space: pre-wrap; + font: italic small-caps bold 9px/18px sans-serif; + text-decoration: overline underline line-through; + text-shadow: 0px 0px 5px #0f0; + background: #0f0 url('../../media/background.gif') repeat-x top left; + outline: solid #00f 2px; + font-size: 9px; +} +.videoWhite { + position: absolute; + top: 0; + left: 160px; + width: 960px; + height: 180px;; + background: #fff; + z-index: 1; +} +.cue { + position: absolute; + bottom: 0; + left: 30%; + right: 0; + width: 40%; + text-align: center; + outline: inherit; + text-shadow: inherit; + text-decoration: inherit; + outline-bottom: none; + z-index: 2 +} +.cue > span { + background: #0f0 url('../../media/background.gif') repeat-x top left; + text-decoration: inherit; + white-space: pre-wrap +} +</style> +<div class="video"><div class="videoWhite"></div><span class="cue"><span>A A A A A A A A A A A</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/inherit_values_from_media_element.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/inherit_values_from_media_element.html new file mode 100644 index 0000000000..d2a7f0146f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/inherit_values_from_media_element.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(*), css properties with value inherit should inherit from media element</title> +<link rel="match" href="inherit_values_from_media_element-ref.html"> +<style> +video { + color: #f0f; + white-space: pre-wrap; + font: italic small-caps bold 9px/18px sans-serif; + text-decoration: overline underline line-through; + text-shadow: 0px 0px 5px #0f0; + background: #0f0 url('../../media/background.gif') repeat-x top left; + outline: solid #00f 2px; +} +::cue(*) { + white-space: inherit; + font: inherit; + color: inherit; + text-decoration: inherit; + text-shadow: inherit; + background: inherit; + outline: inherit; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/white-spaces_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_animation_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_animation_with_timestamp-ref.html new file mode 100644 index 0000000000..14e4fced51 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_animation_with_timestamp-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, italic object animation with timestamp, ::cue(i:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #80ff80; + font-weight: bold; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_animation_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_animation_with_timestamp.html new file mode 100644 index 0000000000..42a44d437b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_animation_with_timestamp.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, italic object animation with timestamp, ::cue(i:past) selector</title> +<link rel="match" href="italic_animation_with_timestamp-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i:past) { + -o-animation: test 9s steps(2, start); + animation: test 9s steps(2, start); +} +@-o-keyframes test { + 0% { + color: #ffffff; + } + 100% { + color: #00ff00; + } +} +@keyframes test { + 0% { + color: #ffffff; + } + 100% { + color: #00ff00; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/italic_with_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_properties-ref.html new file mode 100644 index 0000000000..7af39a3693 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_properties-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(i), background properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > i { + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_properties.html new file mode 100644 index 0000000000..0db33d04fc --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(i), background properties</title> +<link rel="match" href="italic_background_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i) { + font-family: sans-serif; + background-color: #0f0; + background-image: url('../../../media/background.gif'); + background-repeat: repeat-x; + background-position: top left; + color: black; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_italic.vtt"> +</video> +<script> +document.getElementsByTagName('track')[0].track.mode = 'showing'; +</script> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_shorthand-ref.html new file mode 100644 index 0000000000..030c31609f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_shorthand-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(i), background shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > i { + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_shorthand.html new file mode 100644 index 0000000000..e98fad3a8b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_background_shorthand.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(i), background shorthand</title> +<link rel="match" href="italic_background_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i) { + font-family: sans-serif; + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_italic.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_color-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_color-ref.html new file mode 100644 index 0000000000..dd8c1d2fc1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_color-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(i), color: #0000ff</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > i { + color: #0000ff; +} +</style> +<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_color.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_color.html new file mode 100644 index 0000000000..35ec74a37c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_color.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(i), color: #0000ff</title> +<link rel="match" href="italic_color-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i) { + font-family: sans-serif; + color: #0000ff; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_italic.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_properties-ref.html new file mode 100644 index 0000000000..1d0312a1c6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_properties-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(i), font properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > i { + font: italic small-caps bold 9px/18px sans-serif; +} +</style> +<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_properties.html new file mode 100644 index 0000000000..873b7b3f98 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(i), font properties</title> +<link rel="match" href="italic_font_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i) { + font-style: italic; + font-variant: small-caps; + font-weight: bold; + font-size: 9px; + line-height: 18px; + font-family: sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_italic.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_shorthand-ref.html new file mode 100644 index 0000000000..0abd4d3225 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_shorthand-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(i), font shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > i { + font: normal small-caps bold 9px/18px sans-serif; +} +</style> +<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_shorthand.html new file mode 100644 index 0000000000..7f52e00ec4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_font_shorthand.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(i), font shorthand</title> +<link rel="match" href="italic_font_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i) { + font: normal small-caps bold 9px/18px sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_italic.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_namespace-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_namespace-ref.html new file mode 100644 index 0000000000..d75cf446ff --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_namespace-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(|i) should match</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +.green { + font-style: italic; + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_namespace.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_namespace.html new file mode 100644 index 0000000000..9615d8134a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_namespace.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(|i) should match</title> +<link rel="match" href="italic_namespace-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + color: green; +} +::cue(*|i) { + color: red +} +::cue(|i) { + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_italic.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_properties-ref.html new file mode 100644 index 0000000000..77e4d70053 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_properties-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(i), outline properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > i { + display: inline-block; + margin-left: -2px; + margin-right: -2px; + border: solid #00f 2px; + border-bottom: none; +} +</style> +<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_properties.html new file mode 100644 index 0000000000..1e5d3485aa --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_properties.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(i), outline properties</title> +<link rel="match" href="italic_outline_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i) { + font-family: sans-serif; + outline-style: solid; + outline-color: #00f; + outline-width: 2px; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_italic.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_shorthand-ref.html new file mode 100644 index 0000000000..57ce50fab6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_shorthand-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(i), outline shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > i { + display: inline-block; + margin-left: -2px; + margin-right: -2px; + border: solid #00f 2px; + border-bottom: none; +} +</style> +<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_shorthand.html new file mode 100644 index 0000000000..237a3884a2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_outline_shorthand.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(i), outline shorthand</title> +<link rel="match" href="italic_outline_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i) { + font-family: sans-serif; + outline: solid #00f 2px; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_italic.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-decoration_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-decoration_line-through-ref.html new file mode 100644 index 0000000000..814440a571 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-decoration_line-through-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(i), text-decoration: line-through</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > i { + text-decoration: line-through; +} +</style> +<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-decoration_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-decoration_line-through.html new file mode 100644 index 0000000000..a4e40060b2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-decoration_line-through.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(i), text-decoration: line-through</title> +<link rel="match" href="italic_text-decoration_line-through-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i) { + font-family: sans-serif; + text-decoration: line-through; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_italic.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-shadow-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-shadow-ref.html new file mode 100644 index 0000000000..4776560409 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-shadow-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(i), text-shadow</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > i { + text-shadow: 0px 0px 5px #0f0; +} +</style> +<div class="video"><span class="cue"><span>This is a <i>test subtitle</i></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-shadow.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-shadow.html new file mode 100644 index 0000000000..af63481e0a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_text-shadow.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(i), text-shadow</title> +<link rel="match" href="italic_text-shadow-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i) { + font-family: sans-serif; + text-shadow: 0px 0px 5px #0f0; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_italic.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_future-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_future-ref.html new file mode 100644 index 0000000000..bd27d1b895 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_future-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, italic object transition with timestamp, ::cue(i:future) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-style: italic; + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_future.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_future.html new file mode 100644 index 0000000000..30d707be58 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_future.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, italic object transition with timestamp, ::cue(i:future) selector</title> +<link rel="match" href="italic_timestamp_future-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i:future) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/italic_with_2_timestamps.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_past-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_past-ref.html new file mode 100644 index 0000000000..b721f252d5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_past-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, italic object transition with timestamp, ::cue(i:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-style: italic; + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_past.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_past.html new file mode 100644 index 0000000000..24de973ef4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_timestamp_past.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, italic object transition with timestamp, ::cue(i:past) selector</title> +<link rel="match" href="italic_timestamp_past-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i:past) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/italic_with_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_transition_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_transition_with_timestamp-ref.html new file mode 100644 index 0000000000..019e66db54 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_transition_with_timestamp-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, italic object transition with timestamp, ::cue(i:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #80ff80; + font-style: italic; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_transition_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_transition_with_timestamp.html new file mode 100644 index 0000000000..37aea9d1d2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_transition_with_timestamp.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, italic object transition with timestamp, ::cue(i:past) selector</title> +<link rel="match" href="italic_transition_with_timestamp-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i) { + -o-transition: color 9s steps(2, start); + transition: color 9s steps(2, start); +} +::cue(i:past) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/italic_with_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_normal_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_normal_wrapped-ref.html new file mode 100644 index 0000000000..5a50562ef7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_normal_wrapped-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, italic object, ::cue(i), white-space: normal (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + font-style: italic; + white-space: normal +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_normal_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_normal_wrapped.html new file mode 100644 index 0000000000..d00fc920ae --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_normal_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, italic object, ::cue(i), white-space: normal (cue that wraps)</title> +<link rel="match" href="italic_white-space_normal_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i) { + white-space: normal +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/italic_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_nowrap-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_nowrap-ref.html new file mode 100644 index 0000000000..fddae1e0aa --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_nowrap-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, italic object, ::cue(i), white-space: nowrap (cue does not wrap)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative; + overflow: hidden; +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + font-style: italic; + white-space: nowrap +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_nowrap.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_nowrap.html new file mode 100644 index 0000000000..1a975adaf4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_nowrap.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, italic object, ::cue(i), white-space: nowrap (cue does not wrap)</title> +<link rel="match" href="italic_white-space_nowrap-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i) { + white-space: nowrap +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/italic_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-line_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-line_wrapped-ref.html new file mode 100644 index 0000000000..3d075bf6da --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-line_wrapped-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, italic object, ::cue(i), white-space: pre-line (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + font-style: italic; + white-space: pre-line +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-line_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-line_wrapped.html new file mode 100644 index 0000000000..bd19196d83 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-line_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, italic object, ::cue(i), white-space: pre-line (cue that wraps)</title> +<link rel="match" href="italic_white-space_pre-line_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i) { + white-space: pre-line +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/italic_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-wrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-wrap_wrapped-ref.html new file mode 100644 index 0000000000..be50ab9abe --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-wrap_wrapped-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, italic object, ::cue(i), white-space: pre-wrap (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + font-style: italic; + white-space: pre-wrap +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-wrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-wrap_wrapped.html new file mode 100644 index 0000000000..5a02026050 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre-wrap_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, italic object, ::cue(i), white-space: pre-wrap (cue that wraps)</title> +<link rel="match" href="italic_white-space_pre-wrap_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i) { + white-space: pre-wrap +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/italic_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre_wrapped-ref.html new file mode 100644 index 0000000000..3eb92d702a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre_wrapped-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, italic object, ::cue(i), white-space: pre (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; + overflow: hidden; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + font-style: italic; + white-space: pre +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre_wrapped.html new file mode 100644 index 0000000000..80e2dd0f92 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_white-space_pre_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, italic object, ::cue(i), white-space: pre (cue that wraps)</title> +<link rel="match" href="italic_white-space_pre_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i) { + white-space: pre +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/italic_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class-ref.html new file mode 100644 index 0000000000..f1d54d9e7f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, italic object with class, ::cue(.foo) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <i>test subtitle</i>, <i class="green">test subtitle</i></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class.html new file mode 100644 index 0000000000..fa77b699fe --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, italic object with class, ::cue(.foo) selector</title> +<link rel="match" href="italic_with_class-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(.foo) { + font-family: sans-serif; + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_italic_with_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class_object_specific_selector-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class_object_specific_selector-ref.html new file mode 100644 index 0000000000..00f9a8fc29 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class_object_specific_selector-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, italic object with class, ::cue(i.foo) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <i>test subtitle</i>, <i class="green">test subtitle</i></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class_object_specific_selector.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class_object_specific_selector.html new file mode 100644 index 0000000000..caace97154 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/italic_object/italic_with_class_object_specific_selector.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, italic object with class, ::cue(i.foo) selector</title> +<link rel="match" href="italic_with_class_object_specific_selector-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(i.foo) { + font-family: sans-serif; + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_italic_with_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_allowed_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_allowed_properties-ref.html new file mode 100644 index 0000000000..333cdb818b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_allowed_properties-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), properties that should not affect the cue</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_allowed_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_allowed_properties.html new file mode 100644 index 0000000000..e66f9c0792 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_allowed_properties.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), properties that should not affect the cue</title> +<link rel="match" href="not_allowed_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + border: 2px solid red; + border-radius: 5px; + bottom: 300px; + box-shadow: 5px 5px 5px 5px #123456; + box-sizing: border-box; + clip: rect(0px, 5px, 0px, 5px); + columns: 100px 2; + content: 'hello!'; + display: inline-block; + float: left; + font-family: sans-serif; + height: 90px; + left: -150px; + letter-spacing: 20px; + margin: 20px; + min-height: 100px; + min-width: 100px; + opacity: 0.2; + overflow: scroll; + padding: 20px; + position: absolute; + right: 200px; + text-align: left; + text-indent: 50px; + top: -50px; + width: 140px; + word-spacing: 50px; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_root_selector-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_root_selector-ref.html new file mode 100644 index 0000000000..d7b46209e9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_root_selector-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(:not(:root)) should not match the root</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + color: lime +} +</style> +<div class="video"><span class="cue"><span>Foo<span>bar</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_root_selector.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_root_selector.html new file mode 100644 index 0000000000..468e5ba004 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/not_root_selector.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(:not(:root)) should not match the root</title> +<link rel="match" href="not_root_selector-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(:not(:root)) { + color:lime +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/foo_c_bar.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_properties-ref.html new file mode 100644 index 0000000000..a4cf1518d1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_properties-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), outline properties</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + outline: solid #00f 2px; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_properties.html new file mode 100644 index 0000000000..8510ab41dd --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), outline properties</title> +<link rel="match" href="outline_properties-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + font-family: Ahem, sans-serif; + outline-style: solid; + outline-color: #00f; + outline-width: 2px; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_shorthand-ref.html new file mode 100644 index 0000000000..c808acba76 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_shorthand-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), outline shorthand</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + outline: solid #00f 2px; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_shorthand.html new file mode 100644 index 0000000000..88f7a4bdb7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/outline_shorthand.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), outline shorthand</title> +<link rel="match" href="outline_shorthand-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + font-family: Ahem, sans-serif; + outline: solid #00f 2px; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_namespace-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_namespace-ref.html new file mode 100644 index 0000000000..28602829d2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_namespace-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(|*) should match the root</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_namespace.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_namespace.html new file mode 100644 index 0000000000..0829a2be81 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_namespace.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(|*) should match the root</title> +<link rel="match" href="root_namespace-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif +} +::cue(*|*) { + color: red +} +::cue(|*) { + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_selector-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_selector-ref.html new file mode 100644 index 0000000000..a6840f1519 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_selector-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(:root) should match the root</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: lime; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_selector.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_selector.html new file mode 100644 index 0000000000..532c83a754 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/root_selector.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(:root) should match the root</title> +<link rel="match" href="root_selector-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(:root) { + color:lime +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_line-through-ref.html new file mode 100644 index 0000000000..537f3ebf95 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_line-through-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), text-decoration: line-through</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + text-decoration: line-through; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_line-through.html new file mode 100644 index 0000000000..1f13da7197 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_line-through.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), text-decoration: line-through</title> +<link rel="match" href="text-decoration_line-through-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + font-family: sans-serif; + text-decoration: line-through; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline-ref.html new file mode 100644 index 0000000000..893bbfd02a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), text-decoration: overline</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + text-decoration: overline; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline.html new file mode 100644 index 0000000000..625b1fe1f5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), text-decoration: overline</title> +<link rel="match" href="text-decoration_overline-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + font-family: sans-serif; + text-decoration: overline; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline_underline_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline_underline_line-through-ref.html new file mode 100644 index 0000000000..a8f54e2fdd --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline_underline_line-through-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), text-decoration: overline underline line-through</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + text-decoration: overline underline line-through; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline_underline_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline_underline_line-through.html new file mode 100644 index 0000000000..da162cc898 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_overline_underline_line-through.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), text-decoration: overline underline line-through</title> +<link rel="match" href="text-decoration_overline_underline_line-through-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + font-family: sans-serif; + text-decoration: overline underline line-through; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_underline-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_underline-ref.html new file mode 100644 index 0000000000..46bada32f7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_underline-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), text-decoration: underline</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + text-decoration: underline; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_underline.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_underline.html new file mode 100644 index 0000000000..7d53e549fa --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-decoration_underline.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), text-decoration: underline</title> +<link rel="match" href="text-decoration_underline-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + font-family: sans-serif; + text-decoration: underline; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-shadow-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-shadow-ref.html new file mode 100644 index 0000000000..7fcb4e1626 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-shadow-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), text-shadow</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + text-shadow: 0px 0px 5px #0f0; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-shadow.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-shadow.html new file mode 100644 index 0000000000..42dd8f6af9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/text-shadow.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), text-shadow</title> +<link rel="match" href="text-shadow-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + font-family: sans-serif; + text-shadow: 0px 0px 5px #0f0; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/type_selector_root-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/type_selector_root-ref.html new file mode 100644 index 0000000000..95d3f775ec --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/type_selector_root-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(root) should match nothing; the root element should have no name</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/type_selector_root.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/type_selector_root.html new file mode 100644 index 0000000000..beaf6e73fa --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/type_selector_root.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(root) should match nothing; the root element should have no name</title> +<link rel="match" href="type_selector_root-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(root) { + color:yellow; + background:red +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_animation_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_animation_with_timestamp-ref.html new file mode 100644 index 0000000000..4836d205d6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_animation_with_timestamp-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, underline object animation with timestamp, ::cue(u:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #80ff80; + font-weight: bold; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_animation_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_animation_with_timestamp.html new file mode 100644 index 0000000000..c4584b3014 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_animation_with_timestamp.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, underline object animation with timestamp, ::cue(u:past) selector</title> +<link rel="match" href="underline_animation_with_timestamp-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u:past) { + -o-animation: test 9s steps(2, start); + animation: test 9s steps(2, start); +} +@-o-keyframes test { + 0% { + color: #ffffff; + } + 100% { + color: #00ff00; + } +} +@keyframes test { + 0% { + color: #ffffff; + } + 100% { + color: #00ff00; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/underline_with_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_properties-ref.html new file mode 100644 index 0000000000..a56ed92f20 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_properties-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(u), background properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > u { + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_properties.html new file mode 100644 index 0000000000..5312955e82 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(u), background properties</title> +<link rel="match" href="underline_background_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u) { + font-family: sans-serif; + background-color: #0f0; + background-image: url('../../../media/background.gif'); + background-repeat: repeat-x; + background-position: top left; + color: black; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_underline.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_shorthand-ref.html new file mode 100644 index 0000000000..a87f5bd1c7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_shorthand-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(u), background shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > u { + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_shorthand.html new file mode 100644 index 0000000000..84c97b07d0 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_background_shorthand.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(u), background shorthand</title> +<link rel="match" href="underline_background_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u) { + font-family: sans-serif; + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_underline.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_color-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_color-ref.html new file mode 100644 index 0000000000..2f77c824e6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_color-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(u), color: #0000ff</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > u { + color: #0000ff; +} +</style> +<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_color.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_color.html new file mode 100644 index 0000000000..2fe4234692 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_color.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(u), color: #0000ff</title> +<link rel="match" href="underline_color-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u) { + font-family: sans-serif; + color: #0000ff; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_underline.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_properties-ref.html new file mode 100644 index 0000000000..5acb4e56cf --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_properties-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(u), font properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > u { + font: italic small-caps normal 9px/18px sans-serif; +} +</style> +<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_properties.html new file mode 100644 index 0000000000..29fed1175e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(u), font properties</title> +<link rel="match" href="underline_font_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u) { + font-style: italic; + font-variant: small-caps; + font-weight: normal; + font-size: 9px; + line-height: 18px; + font-family: sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_underline.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_shorthand-ref.html new file mode 100644 index 0000000000..5326c4883f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_shorthand-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(u), font shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > u { + font: normal small-caps normal 9px/18px sans-serif; +} +</style> +<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_shorthand.html new file mode 100644 index 0000000000..54630d44de --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_font_shorthand.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(u), font shorthand</title> +<link rel="match" href="underline_font_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u) { + font: normal small-caps normal 9px/18px sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_underline.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_namespace-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_namespace-ref.html new file mode 100644 index 0000000000..0823f44e34 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_namespace-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(|u) should match</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +.green { + text-decoration: underline; + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_namespace.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_namespace.html new file mode 100644 index 0000000000..ab6378b229 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_namespace.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(|u) should match</title> +<link rel="match" href="underline_namespace-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + color: green; +} +::cue(*|u) { + color: red +} +::cue(|u) { + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_underline.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_properties-ref.html new file mode 100644 index 0000000000..04fbe5a54e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_properties-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(u), outline properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > u { + display: inline-block; + margin-left: -2px; + margin-right: -2px; + border: solid #00f 2px; + border-bottom: none; +} +</style> +<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_properties.html new file mode 100644 index 0000000000..7602da0e1a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_properties.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(u), outline properties</title> +<link rel="match" href="underline_outline_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u) { + font-family: sans-serif; + outline-style: solid; + outline-color: #00f; + outline-width: 2px; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_underline.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_shorthand-ref.html new file mode 100644 index 0000000000..47ac3ce14c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_shorthand-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(u), outline shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > u { + display: inline-block; + margin-left: -2px; + margin-right: -2px; + border: solid #00f 2px; + border-bottom: none; +} +</style> +<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_shorthand.html new file mode 100644 index 0000000000..40645d25ab --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_outline_shorthand.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(u), outline shorthand</title> +<link rel="match" href="underline_outline_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u) { + font-family: sans-serif; + outline: solid #00f 2px; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_underline.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-decoration_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-decoration_line-through-ref.html new file mode 100644 index 0000000000..6f78eb5df7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-decoration_line-through-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(u), text-decoration: line-through</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > u { + text-decoration: line-through; +} +</style> +<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-decoration_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-decoration_line-through.html new file mode 100644 index 0000000000..e238ccff92 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-decoration_line-through.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(u), text-decoration: line-through</title> +<link rel="match" href="underline_text-decoration_line-through-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u) { + font-family: sans-serif; + text-decoration: line-through; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_underline.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-shadow-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-shadow-ref.html new file mode 100644 index 0000000000..daf2c614e5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-shadow-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(u), text-shadow</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > u { + text-shadow: 0px 0px 5px #0f0; +} +</style> +<div class="video"><span class="cue"><span>This is a <u>test subtitle</u></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-shadow.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-shadow.html new file mode 100644 index 0000000000..69c08fbae2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_text-shadow.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(u), text-shadow</title> +<link rel="match" href="underline_text-shadow-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u) { + font-family: sans-serif; + text-shadow: 0px 0px 5px #0f0; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_underline.vtt"> +</video> +<script> +document.getElementsByTagName('track')[0].track.mode = 'showing'; +</script> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_future-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_future-ref.html new file mode 100644 index 0000000000..502104107a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_future-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, underline object transition with timestamp, ::cue(u:future) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + text-decoration: underline; + color: white; +} +.green { + text-decoration: underline; + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_future.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_future.html new file mode 100644 index 0000000000..dff106cdbf --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_future.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, underline object transition with timestamp, ::cue(u:future) selector</title> +<link rel="match" href="underline_timestamp_future-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u:future) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/underline_with_2_timestamps.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_past-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_past-ref.html new file mode 100644 index 0000000000..7ab25929ba --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_past-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, underline object transition with timestamp, ::cue(u:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + text-decoration: underline; + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_past.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_past.html new file mode 100644 index 0000000000..3ca96e8d4f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_timestamp_past.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, underline object transition with timestamp, ::cue(u:past) selector</title> +<link rel="match" href="underline_timestamp_past-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u:past) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/underline_with_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_transition_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_transition_with_timestamp-ref.html new file mode 100644 index 0000000000..97e2b1afc2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_transition_with_timestamp-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, underline object transition with timestamp, ::cue(u:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #80ff80; + text-decoration: underline; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_transition_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_transition_with_timestamp.html new file mode 100644 index 0000000000..7b34fa2f98 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_transition_with_timestamp.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, underline object transition with timestamp, ::cue(u:past) selector</title> +<link rel="match" href="underline_transition_with_timestamp-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u) { + -o-transition: color 9s steps(2, start); + transition: color 9s steps(2, start); +} +::cue(u:past) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/underline_with_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_normal_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_normal_wrapped-ref.html new file mode 100644 index 0000000000..12563423a6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_normal_wrapped-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, underline object, ::cue(u), white-space: normal (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + text-decoration: underline; + white-space: normal +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_normal_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_normal_wrapped.html new file mode 100644 index 0000000000..23cec2fb8f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_normal_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, voice object, ::cue(u), white-space: normal (cue that wraps)</title> +<link rel="match" href="underline_white-space_normal_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u) { + white-space: normal +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/underline_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_nowrap-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_nowrap-ref.html new file mode 100644 index 0000000000..7e813106a1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_nowrap-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, underline object, ::cue(u), white-space: nowrap (cue does not wrap)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative; + overflow: hidden; +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + text-decoration: underline; + white-space: nowrap +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_nowrap.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_nowrap.html new file mode 100644 index 0000000000..0b143f9d50 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_nowrap.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, underline object, ::cue(u), white-space: nowrap (cue does not wrap)</title> +<link rel="match" href="underline_white-space_nowrap-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u) { + white-space: nowrap +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/underline_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-line_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-line_wrapped-ref.html new file mode 100644 index 0000000000..227651700f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-line_wrapped-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, underline object, ::cue(u), white-space: pre-line (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + text-decoration: underline; + white-space: pre-line +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-line_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-line_wrapped.html new file mode 100644 index 0000000000..cd1a7baff4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-line_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, underline object, ::cue(u), white-space: pre-line (cue that wraps)</title> +<link rel="match" href="underline_white-space_pre-line_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u) { + white-space: pre-line +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/underline_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-wrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-wrap_wrapped-ref.html new file mode 100644 index 0000000000..756a66fc17 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-wrap_wrapped-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, underline object, ::cue(u), white-space: pre-wrap (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + text-decoration: underline; + white-space: pre-wrap +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-wrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-wrap_wrapped.html new file mode 100644 index 0000000000..c5971810da --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre-wrap_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, underline object, ::cue(u), white-space: pre-wrap (cue that wraps)</title> +<link rel="match" href="underline_white-space_pre-wrap_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u) { + white-space: pre-wrap +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/underline_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre_wrapped-ref.html new file mode 100644 index 0000000000..8b9f12a4e0 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre_wrapped-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, underline object, ::cue(u), white-space: pre (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; + overflow: hidden; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + text-decoration: underline; + white-space: pre +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre_wrapped.html new file mode 100644 index 0000000000..8857446242 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_white-space_pre_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, underline object, ::cue(u), white-space: pre (cue that wraps)</title> +<link rel="match" href="underline_white-space_pre_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u) { + white-space: pre +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/underline_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class-ref.html new file mode 100644 index 0000000000..2af8b31774 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, underline object with class, ::cue(.foo) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <u>test subtitle</u>, <u class="green">test subtitle</u></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class.html new file mode 100644 index 0000000000..12d73a9803 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, underline object with class, ::cue(.foo) selector</title> +<link rel="match" href="underline_with_class-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(.foo) { + font-family: sans-serif; + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_underline_with_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class_object_specific_selector-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class_object_specific_selector-ref.html new file mode 100644 index 0000000000..a2b9350bc4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class_object_specific_selector-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, underline object with class, ::cue(u.foo) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <u>test subtitle</u>, <u class="green">test subtitle</u></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class_object_specific_selector.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class_object_specific_selector.html new file mode 100644 index 0000000000..52b3e0e859 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/underline_object/underline_with_class_object_specific_selector.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, underline object with class, ::cue(u.foo) selector</title> +<link rel="match" href="underline_with_class_object_specific_selector-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(u.foo) { + font-family: sans-serif; + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_underline_with_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp-ref.html new file mode 100644 index 0000000000..7a8a94fecd --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object animation with timestamp, ::cue(v:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #80ff80; + font-weight: bold; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp.html new file mode 100644 index 0000000000..09baf69c01 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, voice object animation with timestamp, ::cue(v:past) selector</title> +<link rel="match" href="voice_animation_with_timestamp-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v:past) { + -o-animation: test 9s steps(2, start); + animation: test 9s steps(2, start); +} +@-o-keyframes test { + 0% { + color: #ffffff; + } + 100% { + color: #00ff00; + } +} +@keyframes test { + 0% { + color: #ffffff; + } + 100% { + color: #00ff00; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_with_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties-ref.html new file mode 100644 index 0000000000..c45b7a550a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), background properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties.html new file mode 100644 index 0000000000..600915aa21 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(v), background properties</title> +<link rel="match" href="voice_background_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font-family: sans-serif; + background-color: #0f0; + background-image: url('../../../media/background.gif'); + background-repeat: repeat-x; + background-position: top left; + color: black; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand-ref.html new file mode 100644 index 0000000000..5766b54423 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), background shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand.html new file mode 100644 index 0000000000..aeae0c9e7b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(v), background shorthand</title> +<link rel="match" href="voice_background_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font-family: sans-serif; + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color-ref.html new file mode 100644 index 0000000000..81919b22e2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), color: #0000ff</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + color: #0000ff; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color.html new file mode 100644 index 0000000000..c72b2d531f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(v), color: #0000ff</title> +<link rel="match" href="voice_color-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font-family: sans-serif; + color: #0000ff; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties-ref.html new file mode 100644 index 0000000000..4ed65ec581 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), font properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + font: italic small-caps bold 9px/18px sans-serif; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties.html new file mode 100644 index 0000000000..a8b691cac4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(v), font properties</title> +<link rel="match" href="voice_font_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font-style: italic; + font-variant: small-caps; + font-weight: bold; + font-size: 9px; + line-height: 18px; + font-family: sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand-ref.html new file mode 100644 index 0000000000..e2ca7e1839 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), font shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + font: normal small-caps bold 9px/18px sans-serif; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand.html new file mode 100644 index 0000000000..0b91ad1205 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(v), font shorthand</title> +<link rel="match" href="voice_font_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font: normal small-caps bold 9px/18px sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace-ref.html new file mode 100644 index 0000000000..421789935c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(|v) should match</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +.green { + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace.html new file mode 100644 index 0000000000..d379b52272 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(|v) should match</title> +<link rel="match" href="voice_namespace-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + color: green; + font-family: Ahem, sans-serif +} +::cue(*|v) { + color: red +} +::cue(|v) { + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties-ref.html new file mode 100644 index 0000000000..da004b3abf --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), outline properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + display: inline-block; + margin-left: -2px; + margin-right: -2px; + border: solid #00f 2px; + border-bottom: none; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties.html new file mode 100644 index 0000000000..f9b1dd2503 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(v), outline properties</title> +<link rel="match" href="voice_outline_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font-family: sans-serif; + outline-style: solid; + outline-color: #00f; + outline-width: 2px; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand-ref.html new file mode 100644 index 0000000000..b3b85edeae --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), outline shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + display: inline-block; + margin-left: -2px; + margin-right: -2px; + border: solid #00f 2px; + border-bottom: none; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand.html new file mode 100644 index 0000000000..f60ca62c20 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(v), outline shorthand</title> +<link rel="match" href="voice_outline_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font-family: sans-serif; + outline: solid #00f 2px; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through-ref.html new file mode 100644 index 0000000000..3d43b6a5c5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), text-decoration: line-through</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + text-decoration: line-through; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through.html new file mode 100644 index 0000000000..dc52936c53 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(v), text-decoration: line-through</title> +<link rel="match" href="voice_text-decoration_line-through-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font-family: sans-serif; + text-decoration: line-through; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow-ref.html new file mode 100644 index 0000000000..bd237e99cb --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), text-shadow</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + text-shadow: 0px 0px 5px #0f0; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow.html new file mode 100644 index 0000000000..4599913eed --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(v), text-shadow</title> +<link rel="match" href="voice_text-shadow-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font-family: sans-serif; + text-shadow: 0px 0px 5px #0f0; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future-ref.html new file mode 100644 index 0000000000..75239939c3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object transition with timestamp, ::cue(v:future) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future.html new file mode 100644 index 0000000000..c66ad028a7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, voice object transition with timestamp, ::cue(v:future) selector</title> +<link rel="match" href="voice_timestamp_future-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v:future) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_with_2_timestamps.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past-ref.html new file mode 100644 index 0000000000..c142ecacac --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object transition with timestamp, ::cue(v:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past.html new file mode 100644 index 0000000000..64c7b99f93 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, voice object transition with timestamp, ::cue(v:past) selector</title> +<link rel="match" href="voice_timestamp_past-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v:past) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_with_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp-ref.html new file mode 100644 index 0000000000..039034d9d7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object transition with timestamp, ::cue(v:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #80ff80; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp.html new file mode 100644 index 0000000000..6eb8b1a82f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, voice object transition with timestamp, ::cue(v:past) selector</title> +<link rel="match" href="voice_transition_with_timestamp-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + -o-transition: color 9s steps(2, start); + transition: color 9s steps(2, start); +} +::cue(v:past) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 0.2; takeScreenshotDelayed(1000);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_with_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute-ref.html new file mode 100644 index 0000000000..c4a91ab892 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v[voice="bar"])</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span>, <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute.html new file mode 100644 index 0000000000..b9df455210 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(v[voice="bar"])</title> +<link rel="match" href="voice_voice_attribute-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v[voice="bar"]) { + font-family: sans-serif; + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_two_voices.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped-ref.html new file mode 100644 index 0000000000..ad67ecc03f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object, ::cue(v), white-space: normal (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: normal +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped.html new file mode 100644 index 0000000000..1ceea7b7ea --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, voice object, ::cue(v), white-space: normal (cue that wraps)</title> +<link rel="match" href="voice_white-space_normal_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + white-space: normal +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap-ref.html new file mode 100644 index 0000000000..1d682da289 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object, ::cue(v), white-space: nowrap (cue does not wrap)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative; + overflow: hidden; +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: nowrap +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap.html new file mode 100644 index 0000000000..145a6bc3d9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, voice object, ::cue(v), white-space: nowrap (cue does not wrap)</title> +<link rel="match" href="voice_white-space_nowrap-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + white-space: nowrap +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped-ref.html new file mode 100644 index 0000000000..6ddaff8650 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object, ::cue(v), white-space: pre-line (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: pre-line +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped.html new file mode 100644 index 0000000000..6eb579774f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, voice object, ::cue(v), white-space: pre-line (cue that wraps)</title> +<link rel="match" href="voice_white-space_pre-line_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + white-space: pre-line +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped-ref.html new file mode 100644 index 0000000000..3822d83f2b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object, ::cue(v), white-space: pre-wrap (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: pre-wrap +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped.html new file mode 100644 index 0000000000..5058fb2d2b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, voice object, ::cue(v), white-space: pre-wrap (cue that wraps)</title> +<link rel="match" href="voice_white-space_pre-wrap_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + white-space: pre-wrap +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped-ref.html new file mode 100644 index 0000000000..5f32a25d3f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object, ::cue(v), white-space: pre (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; + overflow: hidden; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: pre +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped.html new file mode 100644 index 0000000000..e6e01391f6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, voice object, ::cue(v), white-space: pre (cue that wraps)</title> +<link rel="match" href="voice_white-space_pre_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + white-space: pre +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class-ref.html new file mode 100644 index 0000000000..6090532837 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object with class, ::cue(.foo) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span>, <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class.html new file mode 100644 index 0000000000..c32f7edb05 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, voice object with class, ::cue(.foo) selector</title> +<link rel="match" href="voice_with_class-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(.foo) { + font-family: sans-serif; + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice_with_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector-ref.html new file mode 100644 index 0000000000..f6e9c19be9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object with class, ::cue(v.foo) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span>, <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector.html new file mode 100644 index 0000000000..dbff16d122 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, voice object with class, ::cue(v.foo) selector</title> +<link rel="match" href="voice_with_class_object_specific_selector-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v.foo) { + font-family: sans-serif; + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice_with_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_normal_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_normal_wrapped-ref.html new file mode 100644 index 0000000000..b4f797d3b9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_normal_wrapped-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), white-space: normal (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 40%; + right: 0; + width: 20%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: normal +} +</style> +<div class="video"><span class="cue"><span>foo bar baz</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_normal_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_normal_wrapped.html new file mode 100644 index 0000000000..ae9ef6d89f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_normal_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), white-space: normal (cue that wraps)</title> +<link rel="match" href="white-space_normal_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + white-space: normal +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/foo_space_space_bar_LF_baz.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_nowrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_nowrap_wrapped-ref.html new file mode 100644 index 0000000000..901257b613 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_nowrap_wrapped-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), white-space: nowrap (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 40%; + right: 0; + width: 20%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: nowrap +} +</style> +<div class="video"><span class="cue"><span>A A A A A A A A A A A</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_nowrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_nowrap_wrapped.html new file mode 100644 index 0000000000..ab3217fd66 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_nowrap_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), white-space: nowrap (cue that wraps)</title> +<link rel="match" href="white-space_nowrap_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + white-space: nowrap +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/white-spaces_long_size_20.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-line_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-line_wrapped-ref.html new file mode 100644 index 0000000000..4b80518475 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-line_wrapped-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), white-space: pre-line (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 40%; + right: 0; + width: 20%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: normal +} +</style> +<div class="video"><span class="cue"><span>A A A A A A<br> A A A A A</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-line_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-line_wrapped.html new file mode 100644 index 0000000000..f075dfe825 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-line_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), white-space: pre-line (cue that wraps)</title> +<link rel="match" href="white-space_pre-line_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + white-space: pre-line +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/white-spaces_long_size_20.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-ref.html new file mode 100644 index 0000000000..d21f199bed --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), white-space: pre</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; + white-space: pre +} +</style> +<div class="video"><span class="cue"><span>A A A A A A</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-wrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-wrap_wrapped-ref.html new file mode 100644 index 0000000000..8e9e33d569 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-wrap_wrapped-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), white-space: pre-wrap (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 30%; + right: 0; + width: 40%; + font-family: sans-serif; + text-align: center; +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; + white-space: pre +} +</style> +<div class="video"><span class="cue"><span>A A A A A <br> A <br>A A A A A</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-wrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-wrap_wrapped.html new file mode 100644 index 0000000000..866ca52bc8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre-wrap_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), white-space: pre-wrap (cue that wraps)</title> +<link rel="match" href="white-space_pre-wrap_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + white-space: pre-wrap +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/white-spaces_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre.html new file mode 100644 index 0000000000..3da234358b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), white-space: pre</title> +<link rel="match" href="white-space_pre-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + white-space: pre +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/white-spaces.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre_wrapped-ref.html new file mode 100644 index 0000000000..394549b1d8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre_wrapped-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(), white-space: pre (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + font-size: 9px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 30%; + right: 0; + width: 40%; + font-family: sans-serif; + text-align: center; + overflow: hidden; +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; + white-space: pre +} +</style> +<div class="video"><span class="cue"><span>A A A A A A A A A A A</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre_wrapped.html new file mode 100644 index 0000000000..5432de4973 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/white-space_pre_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, ::cue(), white-space: pre (cue that wraps)</title> +<link rel="match" href="white-space_pre_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(*) { + white-space: pre +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/white-spaces_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/bold_object_default_font-style-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/bold_object_default_font-style-ref.html new file mode 100644 index 0000000000..fa388608e5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/bold_object_default_font-style-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, default style, bold objects</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + font-weight: bold; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/bold_object_default_font-style.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/bold_object_default_font-style.html new file mode 100644 index 0000000000..31a8fad06f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/bold_object_default_font-style.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, default style, bold objects</title> +<link rel="match" href="bold_object_default_font-style-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test_bold.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/inherit_as_default_value_inherits_values_from_media_element-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/inherit_as_default_value_inherits_values_from_media_element-ref.html new file mode 100644 index 0000000000..2fb094846f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/inherit_as_default_value_inherits_values_from_media_element-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, only css properties with default value inherit should inherit from media element</title> +<style> +.video { + position: absolute; + display: inline-block; + width: 320px; + height: 180px; + position: relative; + color: #f0f; + white-space: pre-line; + font: italic small-caps bold 9px/18px sans-serif; + text-shadow: 0px 0px 5px #0f0; + background: #0f0 url('../../media/background.gif') repeat-x top left; + outline: solid #00f 2px; + font-size: 9px; +} +.videoWhite { + position: absolute; + top: 0; + left: 160px; + width: 960px; + height: 180px;; + background: #fff; + z-index: 1; +} +.cue { + position: absolute; + bottom: 0; + left: 30%; + right: 0; + width: 40%; + text-align: center; + z-index: 2 +} +.cue > span { + background-color: rgba(0,0,0,0.8); + color: #fff; +} +</style> +<div class="video"><div class="videoWhite"></div><span class="cue"><span>A A A A A A A A A A A</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/inherit_as_default_value_inherits_values_from_media_element.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/inherit_as_default_value_inherits_values_from_media_element.html new file mode 100644 index 0000000000..e5ed5916e7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/inherit_as_default_value_inherits_values_from_media_element.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, only css properties with default value inherit should inherit from media element</title> +<link rel="match" href="inherit_as_default_value_inherits_values_from_media_element-ref.html"> +<style> +video { + color: #f0f; + white-space: pre-wrap; + font: italic small-caps bold 9px/18px sans-serif; + text-decoration: overline underline line-through; + text-shadow: 0px 0px 5px #0f0; + background: #0f0 url('../../media/background.gif') repeat-x top left; + outline: solid #00f 2px; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/white-spaces_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/italic_object_default_font-style-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/italic_object_default_font-style-ref.html new file mode 100644 index 0000000000..76b85bb98f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/italic_object_default_font-style-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, default style, italic objects</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + font-style: italic; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/italic_object_default_font-style.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/italic_object_default_font-style.html new file mode 100644 index 0000000000..b48f181e4f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/italic_object_default_font-style.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, default style, italic objects</title> +<link rel="match" href="italic_object_default_font-style-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test_italic.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/underline_object_default_font-style-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/underline_object_default_font-style-ref.html new file mode 100644 index 0000000000..3769a49d65 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/underline_object_default_font-style-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, default style, underline objects</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + text-decoration: underline; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/underline_object_default_font-style.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/underline_object_default_font-style.html new file mode 100644 index 0000000000..8077065173 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/default_styles/underline_object_default_font-style.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, default style, underline objects</title> +<link rel="match" href="underline_object_default_font-style-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../support/test_underline.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/size_50-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/size_50-ref.html new file mode 100644 index 0000000000..24ac13d9dc --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/size_50-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, size:50%</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that should wrap</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/size_50.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/size_50.html new file mode 100644 index 0000000000..6dc019754d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/size_50.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, size:50%</title> +<link rel="match" href="size_50-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/size_50.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/snap-to-line-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/snap-to-line-ref.html new file mode 100644 index 0000000000..bcd2dd2942 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/snap-to-line-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, set explicit 'line' and 'position', which will force 'snap-to-line' to false</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; +} +.cue { + position: absolute; + top: 90px; + left: 160px; + text-align: center; + font: 20px/1 Ahem; +} +.cueText { + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video> + <div class="cue"> + <span class="cueText">foo</span> + </div> +</div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/snap-to-line.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/snap-to-line.html new file mode 100644 index 0000000000..f3705a1879 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/snap-to-line.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, set explicit 'line' and 'position', which will force 'snap-to-line' to false</title> +<link rel="match" href="snap-to-line-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font: 20px/1 Ahem; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/snap-to-line.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_completely_move_up.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_completely_move_up.vtt new file mode 100644 index 0000000000..1ca56e56f6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_completely_move_up.vtt @@ -0,0 +1,7 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 line:100% +This is a test subtitle + +00:00:01.000 --> 00:00:05.000 line:100% +This is another test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_partially_move_down.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_partially_move_down.vtt new file mode 100644 index 0000000000..227e7db6e4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_partially_move_down.vtt @@ -0,0 +1,7 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 line:50% +This is a test subtitle + +00:00:01.000 --> 00:00:05.000 line:52% +This is another test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_partially_move_up.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_partially_move_up.vtt new file mode 100644 index 0000000000..7160f3791e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/2_cues_overlapping_partially_move_up.vtt @@ -0,0 +1,7 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 line:100% +This is a test subtitle + +00:00:01.000 --> 00:00:05.000 line:99% +This is another test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center.vtt new file mode 100644 index 0000000000..4b8e14b28b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 align:center +This is a test diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_long.vtt new file mode 100644 index 0000000000..57c896d04b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_long.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 align:center +This is a test subtitle that most likely will span over several rows since it is a pretty long cue with a lot of text. diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_50.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_50.vtt new file mode 100644 index 0000000000..21ab82bb08 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_50.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 align:center position:50% +This is a test diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_gt_50.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_gt_50.vtt new file mode 100644 index 0000000000..69fd3e00d9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_gt_50.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 align:center position:90% +foo diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_gt_50_size_gt_maximum_size.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_gt_50_size_gt_maximum_size.vtt new file mode 100644 index 0000000000..50e80cc3e1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_gt_50_size_gt_maximum_size.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 align:center position:90% size:75% +Awesome!!! diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_lt_50.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_lt_50.vtt new file mode 100644 index 0000000000..86f8c37ec5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_lt_50.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 align:center position:10% +foo diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_lt_50_size_gt_maximum_size.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_lt_50_size_gt_maximum_size.vtt new file mode 100644 index 0000000000..a2e307c9cb --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_lt_50_size_gt_maximum_size.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 align:center position:10% size:75% +Awesome!!! diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_end.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_end.vtt new file mode 100644 index 0000000000..83f691e6ff --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_end.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 align:end +This is a test diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_end_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_end_long.vtt new file mode 100644 index 0000000000..09ace0d227 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_end_long.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 align:end +This is a test subtitle that most likely will span over several rows since it is a pretty long cue with a lot of text. diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_start.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_start.vtt new file mode 100644 index 0000000000..161c457465 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_start.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 align:start +This is a test diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_start_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_start_long.vtt new file mode 100644 index 0000000000..c70ac13eaf --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_start_long.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 align:start +This is a test subtitle that most likely will span over several rows since it is a pretty long cue with a lot of text. diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_ruby.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_ruby.vtt new file mode 100644 index 0000000000..19e6745016 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_ruby.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +<ruby>.<rt>א<c>א</c></rt>ab)<rt>x</rt></ruby> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_text-combine-upright.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_text-combine-upright.vtt new file mode 100644 index 0000000000..e3c9914387 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_text-combine-upright.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 vertical:lr +平成20年4月16日に diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_lr.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_lr.vtt new file mode 100644 index 0000000000..e991973ab4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_lr.vtt @@ -0,0 +1,5 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 vertical:lr +<ruby>左<rt>ひだり</rt></ruby>に<ruby> 見<rt>み</rt></ruby>えるのは... +二行目 diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_rl-oneline.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_rl-oneline.vtt new file mode 100644 index 0000000000..30297e1b4f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_rl-oneline.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 vertical:rl +<ruby>右<rt>みぎ</rt></ruby>に<ruby> 見<rt>み</rt></ruby>えるのは... diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_rl.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_rl.vtt new file mode 100644 index 0000000000..56fcbd412a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bidi_vertical_rl.vtt @@ -0,0 +1,5 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 vertical:rl +<ruby>右<rt>みぎ</rt></ruby>に<ruby> 見<rt>み</rt></ruby>えるのは... +二行目 diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_long.vtt new file mode 100644 index 0000000000..c452682e4c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_long.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 size:50% +<b>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</b> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_with_2_timestamps.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_with_2_timestamps.vtt new file mode 100644 index 0000000000..53508f991f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_with_2_timestamps.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 +<00:00.000><b>This is a </b><00:05.000><b>test subtitle</b> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_with_timestamp.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_with_timestamp.vtt new file mode 100644 index 0000000000..85474b1b95 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/bold_with_timestamp.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 +<00:00.000><b>This is a test subtitle</b><00:00.001> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_long.vtt new file mode 100644 index 0000000000..a551d67743 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_long.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 size:50% +<c>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</c> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_text-combine-upright.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_text-combine-upright.vtt new file mode 100644 index 0000000000..064f75ad9e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_text-combine-upright.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 vertical:lr +平成<c.combine>20</c>年4月<c.combine>16</c>日に diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_with_2_timestamps.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_with_2_timestamps.vtt new file mode 100644 index 0000000000..d95f760257 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_with_2_timestamps.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 +<00:00.000><c>This is a </c><00:05.000><c>test subtitle</c> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_with_timestamp.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_with_timestamp.vtt new file mode 100644 index 0000000000..2e328ab9b7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/class_with_timestamp.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 +<00:00.000><c>This is a test subtitle</c><00:00.001> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/cue_with_id.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/cue_with_id.vtt new file mode 100644 index 0000000000..3a8a88cf73 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/cue_with_id.vtt @@ -0,0 +1,5 @@ +WEBVTT + +foo +00:00:00.000 --> 00:00:05.000 +This is a test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/decode_escaped_entities.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/decode_escaped_entities.vtt new file mode 100644 index 0000000000..36373d2e20 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/decode_escaped_entities.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +Here are the escaped entities: & < > ‎ ‏ diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority.vtt new file mode 100644 index 0000000000..9471b32be1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority.vtt @@ -0,0 +1,25 @@ +WEBVTT + +NOTE +opacity: 0.5; should apply. +color: green; should apply. +background: green; should apply because multiple STYLE blocks are supported. + +STYLE +::cue { + opacity: 0.5; +} +::cue { + color: green; +} + +STYLE +::cue { + background: green; +} + +00:00:00.000 --> 00:00:05.000 +<v Voice1>This <i>is</i> a <b>test</b> subtitle + +00:00:00.000 --> 00:00:05.000 +<v Voice2>Here <i>is</i> a <b>second</b> subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority_layer.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority_layer.vtt new file mode 100644 index 0000000000..c0f6cd8821 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority_layer.vtt @@ -0,0 +1,25 @@ +WEBVTT + +NOTE +opacity: 0.5; should apply. +color: green; should apply. +background: green; should apply because multiple STYLE blocks are supported. + +STYLE +::cue { + opacity: 0.5; +} +::cue { + color: green !important; +} + +STYLE +::cue { + background: green; +} + +00:00:00.000 --> 00:00:05.000 +<v Voice1>This <i>is</i> a <b>test</b> subtitle + +00:00:00.000 --> 00:00:05.000 +<v Voice2>Here <i>is</i> a <b>second</b> subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_imports_blocked.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_imports_blocked.vtt new file mode 100644 index 0000000000..11a84af029 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_imports_blocked.vtt @@ -0,0 +1,14 @@ +WEBVTT + +NOTE +@import rules are prohibited in WebVTT files. + +STYLE +@import "imported_style.css" +@import url("imported_style.css") + +00:00:00.000 --> 00:00:05.000 +<v Voice1>This <i>is</i> a <b>test</b> subtitle + +00:00:00.000 --> 00:00:05.000 +<v Voice2>Here <i>is</i> a <b>second</b> subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_invalid_format.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_invalid_format.vtt new file mode 100644 index 0000000000..51c231a0f8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_invalid_format.vtt @@ -0,0 +1,79 @@ +WEBVTT + +NOTE +Only color: green; and the green background-image should apply. All other style blocks are invalid. + +::cue { + background: red; +} + +STYLE + +::cue { + background: red; +} + +STYLE +::cue(v[voice=Voice1]) +{ + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg== + +STYLE +::cue { + back + +STYLE +ground: red; +} + +STYLE +::cue { + color: green; +} + +S T Y L E +::cue { + background: red; +} + + STYLE +::cue { + background: red; +} + +STYLE { +::cue { + background: red; +} +} + +::cue { + background: red; +} + +STYLE Invalid +::cue { + background: red; +} + +style +::cue { + background: red; +} + +STYLE +<!--::cue {--> + background: red; +} + +STYLE +00:00:00.000 --> 00:00:05.000 +<v Voice1>This <i>is</i> a <b>test</b> subtitle + +STYLE +::cue { + background: red; +} + +00:00:00.000 --> 00:00:05.000 +<v Voice2>Here <i>is</i> a <b>second</b> subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe-ref.html new file mode 100644 index 0000000000..f08a607e69 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Reference for Embedded Style: Media Queries</title> +<style> +video { + outline: solid; + width: 320px; + height: 240px; +} +::cue { + color: green; +} +</style> +<video autoplay onplaying="this.onplaying = null; this.pause();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="embedded_style_without_style.vtt" default> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe.html new file mode 100644 index 0000000000..e27ca60474 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Embedded Style: Media Queries</title> +<style> +video { + outline: solid; + width: 320px; + height: 240px; +} +</style> +<video autoplay onplaying="this.onplaying = null; this.pause();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="embedded_style_media_queries.vtt" default> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries.vtt new file mode 100644 index 0000000000..1b875cdd53 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries.vtt @@ -0,0 +1,34 @@ +WEBVTT +NOTE +color: red; should not apply because it is overriden by color: green. +color: green; should apply because the screen width is less than 1000px. +background: green; should only apply in the resized test case where the screen is resized to 300px. +background: red; should not apply because the screen width is greater than 100px. +STYLE +::cue +{ + color: red; +} +@media only screen and (max-height: 1000px) { + ::cue + { + color: green; + } +} +@media only screen and (max-height: 400px) { + ::cue + { + background: green; + } +} +} +@media only screen and (max-height: 100px) { + ::cue + { + background: red; + } +} +00:00:00.000 --> 00:00:05.000 +<v Voice1>This <i>is</i> a <b>test</b> subtitle +00:00:00.000 --> 00:00:05.000 +<v Voice2>Here <i>is</i> a <b>second</b> subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe-ref.html new file mode 100644 index 0000000000..ab7553e2fc --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>Reference for Embedded Style: Media Queries Resize Frame</title> +<style> +video { + outline: solid; + width: 320px; + height: 240px; +} +::cue { + color: green; + background: green; +} +</style> +<video autoplay onplaying="this.onplaying = null; this.pause();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="embedded_style_without_style.vtt" default> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe.html new file mode 100644 index 0000000000..f4bfeeaca3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Embedded Style: Media Queries Resize Frame</title> +<style> +video { + outline: solid; + width: 320px; + height: 240px; +} +</style> +<video autoplay onplaying="this.onplaying = null; this.pause();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="embedded_style_media_queries.vtt" default> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks1.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks1.vtt new file mode 100644 index 0000000000..a756c3c06d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks1.vtt @@ -0,0 +1,12 @@ +WEBVTT + +NOTE +The style in this file should not apply to cues from other text tracks. + +STYLE +::cue { + color: green; +} + +00:00:00.000 --> 00:00:05.000 +This <i>is</i> a <b>test</b> subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks2.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks2.vtt new file mode 100644 index 0000000000..c13757d570 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks2.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +Here <i>is</i> a <b>second</b> subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_selectors.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_selectors.vtt new file mode 100644 index 0000000000..51377255aa --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_selectors.vtt @@ -0,0 +1,54 @@ +WEBVTT +NOTE +The first six selectors should apply. The rest should not apply because they do +not apply to a hypothetical document with a single empty element with no explicit +name, no namespace, no attribute, no classes, no IDs, and unknown primary language +that acts as the originating element for the cue pseudo-elements. +STYLE +@namespace html url(http://www.w3.org/1999/xhtml); +:not(video)::cue { + background: lime; +} +*|*::cue(b) { + background: green; +} +|*::cue(i) { + color: green; +} +::cue(i) { + background: green; +} +*::cue(b) { + color: green; +} +::cue { + font-size: 11px; +} +video::cue { + background: red; +} +:not(|*)::cue { + background: red; +} +i { + color: red; +} +* { + color: red; +} +* ::cue(i) { + color: red; +} +* > *::cue(i) { + color: red; +} +* + *::cue(i) { + color: red; +} +html|*::cue(i) { + color: red; +} +00:00:00.000 --> 00:00:05.000 +<v Voice1>This <i>is</i> a <b>test</b> subtitle +00:00:00.000 --> 00:00:05.000 +<v Voice2>Here <i>is</i> a <b>second</b> subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_urls.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_urls.vtt new file mode 100644 index 0000000000..db526deb86 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_urls.vtt @@ -0,0 +1,21 @@ +WEBVTT +NOTE +Background for Voice1 should apply. +The other two backgrounds should not render because non-data URLs are not supported. +STYLE +::cue(v[voice=Voice1]) +{ + background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) +} +::cue(b) +{ + background: url("support/background.png") +} +::cue(i) { + background: url("support/background.png"); + background: -webkit-image-set(url("support/background.png") 1x, url("support/background.png") 2x); +} +00:00:00.000 --> 00:00:05.000 +<v Voice1>This <i>is</i> a <b>test</b> subtitle +00:00:00.000 --> 00:00:05.000 +<v Voice2>Here <i>is</i> a <b>second</b> subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_without_style.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_without_style.vtt new file mode 100644 index 0000000000..321a094fda --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_without_style.vtt @@ -0,0 +1,7 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +<v Voice1>This <i>is</i> a <b>test</b> subtitle + +00:00:00.000 --> 00:00:05.000 +<v Voice2>Here <i>is</i> a <b>second</b> subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo.vtt new file mode 100644 index 0000000000..b533895c60 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +Foo diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo_c_bar.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo_c_bar.vtt new file mode 100644 index 0000000000..325df1e509 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo_c_bar.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +Foo<c>bar</c> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo_space_space_bar_LF_baz.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo_space_space_bar_LF_baz.vtt new file mode 100644 index 0000000000..047d80eddf --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/foo_space_space_bar_LF_baz.vtt @@ -0,0 +1,5 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +foo bar +baz diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/imported_style.css b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/imported_style.css new file mode 100644 index 0000000000..391dd7407f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/imported_style.css @@ -0,0 +1,3 @@ +::cue { + color: red; +} diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_long.vtt new file mode 100644 index 0000000000..75cbd1e6ef --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_long.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 size:50% +<i>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</i> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_with_2_timestamps.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_with_2_timestamps.vtt new file mode 100644 index 0000000000..d239c4ee24 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_with_2_timestamps.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 +<00:00.000><i>This is a </i><00:05.000><i>test subtitle</i> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_with_timestamp.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_with_timestamp.vtt new file mode 100644 index 0000000000..94b03a2077 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/italic_with_timestamp.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 +<00:00.000><i>This is a test subtitle</i><00:00.001> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_-2_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_-2_long.vtt new file mode 100644 index 0000000000..0f366c18cc --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_-2_long.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 line:-2 size:50% +This is a test subtitle that will line break diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_0.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_0.vtt new file mode 100644 index 0000000000..18d2bd46ae --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_0.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 line:0 +This is a test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_1_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_1_long.vtt new file mode 100644 index 0000000000..414c9de391 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_1_long.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 line:1 size:50% +This is a test subtitle that will line break diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_50_percent.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_50_percent.vtt new file mode 100644 index 0000000000..acf612c44f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_50_percent.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 line:50% +This is a test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_integer_and_percent_overlap.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_integer_and_percent_overlap.vtt new file mode 100644 index 0000000000..6a1326e941 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_integer_and_percent_overlap.vtt @@ -0,0 +1,7 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 line:9 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 line:50% +This is another test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_integer_and_percent_overlap_move_up.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_integer_and_percent_overlap_move_up.vtt new file mode 100644 index 0000000000..819f8e2a21 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_integer_and_percent_overlap_move_up.vtt @@ -0,0 +1,7 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 line:10 +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 line:48% +This is another test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_percent_and_integer_overlap.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_percent_and_integer_overlap.vtt new file mode 100644 index 0000000000..47819a0510 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_percent_and_integer_overlap.vtt @@ -0,0 +1,7 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 line:45% +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 line:9 +This is another test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_percent_and_integer_overlap_move_up.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_percent_and_integer_overlap_move_up.vtt new file mode 100644 index 0000000000..1a7bd7fed5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/line_percent_and_integer_overlap_move_up.vtt @@ -0,0 +1,7 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 line:55% +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 line:10 +This is another test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/one_line_cue_plus_wrapped_cue.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/one_line_cue_plus_wrapped_cue.vtt new file mode 100644 index 0000000000..b9b3fecf6d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/one_line_cue_plus_wrapped_cue.vtt @@ -0,0 +1,7 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 size:70% +This is a test subtitle + +00:00:00.000 --> 00:00:10.000 size:70% +This test subtitle wraps and should be visible diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/size_50.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/size_50.vtt new file mode 100644 index 0000000000..b165af1533 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/size_50.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 size:50% +This is a test subtitle that should wrap diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/snap-to-line.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/snap-to-line.vtt new file mode 100644 index 0000000000..2d102812ee --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/snap-to-line.vtt @@ -0,0 +1,5 @@ +WEBVTT + +NOTE set line as percentage would make 'snap-to-line' to false +00:00:00.000 --> 00:00:05.000 align:start position:50%,line-left line:50%,start +foo diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/start_alignment.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/start_alignment.vtt new file mode 100644 index 0000000000..9a92729381 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/start_alignment.vtt @@ -0,0 +1,5 @@ +WEBVTT FILE + +00:00:00.000 --> 00:00:10.000 align:start line:0 +Hello! +שלום! diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test.vtt new file mode 100644 index 0000000000..ab71ec5984 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +This is a test subtitle diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_bold.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_bold.vtt new file mode 100644 index 0000000000..5709f4dd30 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_bold.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +This is a <b>test subtitle</b> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_bold_with_class.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_bold_with_class.vtt new file mode 100644 index 0000000000..1eebeea5cb --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_bold_with_class.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +This is a <b>test subtitle</b>, <b.foo>test subtitle</b> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_class.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_class.vtt new file mode 100644 index 0000000000..8ee08aada4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_class.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +This is a <c>test subtitle</c> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_class_with_class.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_class_with_class.vtt new file mode 100644 index 0000000000..c17abc9c95 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_class_with_class.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +This is a <c>test subtitle</c>, <c.foo>test subtitle</c> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_italic.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_italic.vtt new file mode 100644 index 0000000000..11c2c81deb --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_italic.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +This is a <i>test subtitle</i> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_italic_with_class.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_italic_with_class.vtt new file mode 100644 index 0000000000..a2255d000a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_italic_with_class.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +This is a <i>test subtitle</i>, <i.foo>test subtitle</i> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_long.vtt new file mode 100644 index 0000000000..826ec1de17 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_long.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text. diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_two_voices.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_two_voices.vtt new file mode 100644 index 0000000000..c41fe2e169 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_two_voices.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +This is a <v foo>test subtitle</v>, <v bar>test subtitle</v> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_underline.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_underline.vtt new file mode 100644 index 0000000000..8b1f02183d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_underline.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +This is a <u>test subtitle</u> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_underline_with_class.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_underline_with_class.vtt new file mode 100644 index 0000000000..7894c87e00 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_underline_with_class.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +This is a <u>test subtitle</u>, <u.foo>test subtitle</u> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_voice.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_voice.vtt new file mode 100644 index 0000000000..3e25cff699 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_voice.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +This is a <v foo>test subtitle</v> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_voice_with_class.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_voice_with_class.vtt new file mode 100644 index 0000000000..8f1f37581b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/test_voice_with_class.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +This is a <v foo>test subtitle</v>, <v.foo>test subtitle</v> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues.vtt new file mode 100644 index 0000000000..9ab0f0f450 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues.vtt @@ -0,0 +1,31 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 +This is a test + +00:00:00.000 --> 00:00:10.000 +This is a test + +00:00:00.000 --> 00:00:10.000 +This is a test + +00:00:00.000 --> 00:00:10.000 +This is a test + +00:00:00.000 --> 00:00:10.000 +This is a test + +00:00:00.000 --> 00:00:10.000 +This is a test + +00:00:00.000 --> 00:00:10.000 +This is a test + +00:00:00.000 --> 00:00:10.000 +This is a test + +00:00:00.000 --> 00:00:10.000 +This is a test + +00:00:00.000 --> 00:00:10.000 +This text won't be shown in the screen diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues_wrapped.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues_wrapped.vtt new file mode 100644 index 0000000000..1617b60f54 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues_wrapped.vtt @@ -0,0 +1,28 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 +This is a test + +00:00:00.000 --> 00:00:10.000 +This is a test + +00:00:00.000 --> 00:00:10.000 +This is a test + +00:00:00.000 --> 00:00:10.000 +This is a test + +00:00:00.000 --> 00:00:10.000 +This is a test + +00:00:00.000 --> 00:00:10.000 +This is a test + +00:00:00.000 --> 00:00:10.000 +This is a test + +00:00:00.000 --> 00:00:10.000 +This is a test + +00:00:00.000 --> 00:00:10.000 size:70% +This is a test subtitle that wraps and the part after the first subtitle should be cut out diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_LF_u05D0.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_LF_u05D0.vtt new file mode 100644 index 0000000000..24cd29be66 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_LF_u05D0.vtt @@ -0,0 +1,5 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +. +אab) diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_u2028_u05D0.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_u2028_u05D0.vtt new file mode 100644 index 0000000000..9367a095a0 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_u2028_u05D0.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +.
אab) diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_u2029_u05D0.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_u2029_u05D0.vtt new file mode 100644 index 0000000000..81d21a453e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u002E_u2029_u05D0.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +.
אab) diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u0041_first.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u0041_first.vtt new file mode 100644 index 0000000000..19dc55c452 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u0041_first.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +Aab) diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u05D0_first.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u05D0_first.vtt new file mode 100644 index 0000000000..fdc74bf4fa --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u05D0_first.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +אab) diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u0628_first.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u0628_first.vtt new file mode 100644 index 0000000000..a0b953d6c9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u0628_first.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +بab) diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u06E9_no_strong_dir.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u06E9_no_strong_dir.vtt new file mode 100644 index 0000000000..f097151567 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/u06E9_no_strong_dir.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +۩) diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_long.vtt new file mode 100644 index 0000000000..7f4ee28405 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_long.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 size:50% +<u>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</u> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_with_2_timestamps.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_with_2_timestamps.vtt new file mode 100644 index 0000000000..54905bfb76 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_with_2_timestamps.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 +<00:00.000><u>This is a </u><00:05.000><u>test subtitle</u> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_with_timestamp.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_with_timestamp.vtt new file mode 100644 index 0000000000..e6d942b962 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/underline_with_timestamp.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 +<00:00.000><u>This is a test subtitle</u><00:00.001> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/very_long_cue.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/very_long_cue.vtt new file mode 100644 index 0000000000..fa1aad85c5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/very_long_cue.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 size:50% +This is a test subtitle that should wrap several times and become so long that exceeds the video rendering area. In this situation, the cue won't be showed in the screen. This is a test subtitle that should wrap several times and become so long that exceeds the video rendering area. In this situation, the cue won't be showed in the screen. This is a test subtitle that should wrap several times and become so long that exceeds the video rendering area. In this situation, the cue won't be showed in the screen. This is a test subtitle that should wrap several times and become so long that exceeds the video rendering area. In this situation, the cue won't be showed in the screen. This is a test subtitle that should wrap several times and become so long that exceeds the video rendering area. In this situation, the cue won't be showed in the screen. This is a test subtitle that should wrap several times and become so long that exceeds the video rendering area. In this situation, the cue won't be showed in the screen. diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_long.vtt new file mode 100644 index 0000000000..1a443df099 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_long.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 size:50% +<v foo>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</v> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_with_2_timestamps.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_with_2_timestamps.vtt new file mode 100644 index 0000000000..b5d2089fb6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_with_2_timestamps.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 +<00:00.000><v>This is a </v><00:05.000><v>test subtitle</v> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_with_timestamp.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_with_timestamp.vtt new file mode 100644 index 0000000000..99f4937705 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/voice_with_timestamp.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:10.000 +<00:00.000><v>This is a test subtitle</v><00:00.001> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces.vtt new file mode 100644 index 0000000000..99b772ffd9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 +A A A A A A diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces_long.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces_long.vtt new file mode 100644 index 0000000000..5352212393 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces_long.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 size:40% +A A A A A A A A A A A diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces_long_size_20.vtt b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces_long_size_20.vtt new file mode 100644 index 0000000000..7807ca32a2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/white-spaces_long_size_20.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:05.000 size:20% +A A A A A A A A A A A diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues-ref.html new file mode 100644 index 0000000000..f3ba001630 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, too many cues - cues that cannot fit should not be shown</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; + font: 20px/1 Ahem; +} +.cueText { + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"> + <span class="cue"> + <div><span class="cueText">This is a test</span></div> + <div><span class="cueText">This is a test</span></div> + <div><span class="cueText">This is a test</span></div> + <div><span class="cueText">This is a test</span></div> + <div><span class="cueText">This is a test</span></div> + <div><span class="cueText">This is a test</span></div> + <div><span class="cueText">This is a test</span></div> + <div><span class="cueText">This is a test</span></div> + <div><span class="cueText">This is a test</span></div> + </span> +</div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues.html new file mode 100644 index 0000000000..724581fa50 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, too many cues - cues that cannot fit should not be shown</title> +<link rel="match" href="too_many_cues-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font: 20px/1 Ahem; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/too_many_cues.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped-ref.html new file mode 100644 index 0000000000..24bc5271d8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, too many cues (wrapped) - cues that cannot fit should not be shown</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; + font: 20px/1 Ahem; +} +.cueText { + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"> + <span class="cue"> + <div><span class="cueText">This is a test</span></div> + <div><span class="cueText">This is a test</span></div> + <div><span class="cueText">This is a test</span></div> + <div><span class="cueText">This is a test</span></div> + <div><span class="cueText">This is a test</span></div> + <div><span class="cueText">This is a test</span></div> + <div><span class="cueText">This is a test</span></div> + <div><span class="cueText">This is a test</span></div> + </span> +</div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped.html new file mode 100644 index 0000000000..5d3a5cc6f6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, too many cues (wrapped) - cues that cannot fit should not be shown</title> +<link rel="match" href="too_many_cues_wrapped-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font: 20px/1 Ahem; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/too_many_cues_wrapped.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> |
