diff options
Diffstat (limited to 'testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object')
44 files changed, 1157 insertions, 0 deletions
diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp-ref.html new file mode 100644 index 000000000..fb57a8f90 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object animation with timestamp, ::cue(v:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-size: 36px; + color: white; +} +.green { + color: #80ff80; + font-weight: bold; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp.html new file mode 100644 index 000000000..a6e43e82c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_animation_with_timestamp.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, voice object animation with timestamp, ::cue(v:past) selector</title> +<link rel="match" href="voice_animation_with_timestamp-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v:past) { + -o-animation: test 9s steps(2, start); + animation: test 9s steps(2, start); +} +@-o-keyframes test { + 0% { + color: #ffffff; + } + 100% { + color: #00ff00; + } +} +@keyframes test { + 0% { + color: #ffffff; + } + 100% { + color: #00ff00; + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_with_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties-ref.html new file mode 100644 index 000000000..7ead3aebd --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), background properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + font-size: 36px; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties.html new file mode 100644 index 000000000..7392ca9c0 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(v), background properties</title> +<link rel="match" href="voice_background_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font-family: sans-serif; + background-color: #0f0; + background-image: url('../../../media/background.gif'); + background-repeat: repeat-x; + background-position: top left; + color: black; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand-ref.html new file mode 100644 index 000000000..30ca28885 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), background shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + font-size: 36px; + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand.html new file mode 100644 index 000000000..51cef0e8d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_background_shorthand.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(v), background shorthand</title> +<link rel="match" href="voice_background_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font-family: sans-serif; + background: #0f0 url('../../../media/background.gif') repeat-x top left; + color: #000; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color-ref.html new file mode 100644 index 000000000..8375977a5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), color: #0000ff</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-size: 36px; + color: white; +} +.cue > span > span { + color: #0000ff; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color.html new file mode 100644 index 000000000..98ad93694 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_color.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(v), color: #0000ff</title> +<link rel="match" href="voice_color-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font-family: sans-serif; + color: #0000ff; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties-ref.html new file mode 100644 index 000000000..6675e8c24 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), font properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + font-size: 36px; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + font: italic small-caps bold 36px/72px sans-serif; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties.html new file mode 100644 index 000000000..8626d9ea5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_properties.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(v), font properties</title> +<link rel="match" href="voice_font_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font-style: italic; + font-variant: small-caps; + font-weight: bold; + font-size: 36px; + line-height: 72px; + font-family: sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand-ref.html new file mode 100644 index 000000000..b656ea98f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), font shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-family: sans-serif; + font-size: 36px; + text-align: center +} +.cue > span { + background: rgba(0,0,0,0.8); + color: white; +} +.cue > span > span { + font: normal small-caps bold 36px/72px sans-serif; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand.html new file mode 100644 index 000000000..522a20dae --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_font_shorthand.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(v), font shorthand</title> +<link rel="match" href="voice_font_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font: normal small-caps bold 36px/72px sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace-ref.html new file mode 100644 index 000000000..275f00f3f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(|v) should match</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; + font-size: 36px +} +.green { + color: green; +} +</style> +<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace.html new file mode 100644 index 000000000..aa5eb258f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_namespace.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(|v) should match</title> +<link rel="match" href="voice_namespace-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + color: green; + font-family: Ahem, sans-serif +} +::cue(*|v) { + color: red +} +::cue(|v) { + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties-ref.html new file mode 100644 index 000000000..2d2fd34b4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), outline properties</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-size: 36px; + color: white; +} +.cue > span > span { + display: inline-block; + margin-left: -2px; + margin-right: -2px; + border: solid #00f 2px; + border-bottom: none; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties.html new file mode 100644 index 000000000..082be8e32 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_properties.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(v), outline properties</title> +<link rel="match" href="voice_outline_properties-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font-family: sans-serif; + outline-style: solid; + outline-color: #00f; + outline-width: 2px; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand-ref.html new file mode 100644 index 000000000..01731bd11 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), outline shorthand</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-size: 36px; + color: white; +} +.cue > span > span { + display: inline-block; + margin-left: -2px; + margin-right: -2px; + border: solid #00f 2px; + border-bottom: none; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand.html new file mode 100644 index 000000000..260243ad6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_outline_shorthand.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(v), outline shorthand</title> +<link rel="match" href="voice_outline_shorthand-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font-family: sans-serif; + outline: solid #00f 2px; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through-ref.html new file mode 100644 index 000000000..b6bc91f1b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), text-decoration: line-through</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-size: 36px; + color: white; +} +.cue > span > span { + text-decoration: line-through; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through.html new file mode 100644 index 000000000..217dbfa53 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-decoration_line-through.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(v), text-decoration: line-through</title> +<link rel="match" href="voice_text-decoration_line-through-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font-family: sans-serif; + text-decoration: line-through; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow-ref.html new file mode 100644 index 000000000..b67b96c59 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v), text-shadow</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-size: 36px; + color: white; +} +.cue > span > span { + text-shadow: 0px 0px 5px #0f0; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow.html new file mode 100644 index 000000000..de83df957 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_text-shadow.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(v), text-shadow</title> +<link rel="match" href="voice_text-shadow-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + font-family: sans-serif; + text-shadow: 0px 0px 5px #0f0; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future-ref.html new file mode 100644 index 000000000..9face626e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object transition with timestamp, ::cue(v:future) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-size: 36px; + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future.html new file mode 100644 index 000000000..4c515ccb3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_future.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, voice object transition with timestamp, ::cue(v:future) selector</title> +<link rel="match" href="voice_timestamp_future-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v:future) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_with_2_timestamps.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past-ref.html new file mode 100644 index 000000000..e7bb2ec44 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object transition with timestamp, ::cue(v:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-size: 36px; + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past.html new file mode 100644 index 000000000..afb1af1f5 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_timestamp_past.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, voice object transition with timestamp, ::cue(v:past) selector</title> +<link rel="match" href="voice_timestamp_past-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v:past) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_with_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp-ref.html new file mode 100644 index 000000000..b672da26e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object transition with timestamp, ::cue(v:past) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-size: 36px; + color: white; +} +.green { + color: #80ff80; +} +</style> +<div class="video"><span class="cue"><span><span class="green">This is a test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp.html new file mode 100644 index 000000000..a10ab6db3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_transition_with_timestamp.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, voice object transition with timestamp, ::cue(v:past) selector</title> +<link rel="match" href="voice_transition_with_timestamp-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + -o-transition: color 9s steps(2, start); + transition: color 9s steps(2, start); +} +::cue(v:past) { + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; takeScreenshotDelayed(200);"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_with_timestamp.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute-ref.html new file mode 100644 index 000000000..cac9a8697 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, ::cue(v[voice="bar"])</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-size: 36px; + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span>, <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute.html new file mode 100644 index 000000000..2f67bf2cd --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_voice_attribute.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, ::cue(v[voice="bar"])</title> +<link rel="match" href="voice_voice_attribute-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v[voice="bar"]) { + font-family: sans-serif; + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_two_voices.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped-ref.html new file mode 100644 index 000000000..046d1a29b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object, ::cue(v), white-space: normal (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + font-size: 36px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: normal +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped.html new file mode 100644 index 000000000..e8e272cda --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_normal_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, voice object, ::cue(v), white-space: normal (cue that wraps)</title> +<link rel="match" href="voice_white-space_normal_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + white-space: normal +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap-ref.html new file mode 100644 index 000000000..014a2c8c6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object, ::cue(v), white-space: nowrap (cue does not wrap)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + font-size: 36px; + position: relative; + overflow: hidden; +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: nowrap +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap.html new file mode 100644 index 000000000..45bb59a2d --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_nowrap.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, voice object, ::cue(v), white-space: nowrap (cue does not wrap)</title> +<link rel="match" href="voice_white-space_nowrap-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + white-space: nowrap +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped-ref.html new file mode 100644 index 000000000..59d9d35c3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object, ::cue(v), white-space: pre-line (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + font-size: 36px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: pre-line +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped.html new file mode 100644 index 000000000..a7a31727c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-line_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, voice object, ::cue(v), white-space: pre-line (cue that wraps)</title> +<link rel="match" href="voice_white-space_pre-line_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + white-space: pre-line +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped-ref.html new file mode 100644 index 000000000..c15e59e63 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object, ::cue(v), white-space: pre-wrap (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + font-size: 36px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: pre-wrap +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most likely will span over several rows since it's a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped.html new file mode 100644 index 000000000..610c07dba --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre-wrap_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, voice object, ::cue(v), white-space: pre-wrap (cue that wraps)</title> +<link rel="match" href="voice_white-space_pre-wrap_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + white-space: pre-wrap +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped-ref.html new file mode 100644 index 000000000..9ae0bf8d7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object, ::cue(v), white-space: pre (cue that wraps)</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + font-size: 36px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 25%; + right: 0; + width: 50%; + text-align: center; +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + color: white; + white-space: pre +} +</style> +<div class="video"><span class="cue"><span>This is a test subtitle that most <br>likely will span over several <br>rows since it's a pretty long cue <br>with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped.html new file mode 100644 index 000000000..06a0d0f7f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_white-space_pre_wrapped.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, voice object, ::cue(v), white-space: pre (cue that wraps)</title> +<link rel="match" href="voice_white-space_pre_wrapped-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v) { + white-space: pre +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/voice_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class-ref.html new file mode 100644 index 000000000..af1988c7b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object with class, ::cue(.foo) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-size: 36px; + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span>, <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class.html new file mode 100644 index 000000000..5d99d4c50 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, voice object with class, ::cue(.foo) selector</title> +<link rel="match" href="voice_with_class-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(.foo) { + font-family: sans-serif; + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice_with_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector-ref.html new file mode 100644 index 000000000..8e5fc0699 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, voice object with class, ::cue(v.foo) selector</title> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 1280px; + height: 720px; + position: relative +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center +} +.cue > span { + font-family: sans-serif; + background: rgba(0,0,0,0.8); + font-size: 36px; + color: white; +} +.green { + color: #00ff00; +} +</style> +<div class="video"><span class="cue"><span>This is a <span>test subtitle</span>, <span class="green">test subtitle</span></span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector.html new file mode 100644 index 000000000..a6105695c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/selectors/cue_function/voice_object/voice_with_class_object_specific_selector.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>WebVTT rendering, voice object with class, ::cue(v.foo) selector</title> +<link rel="match" href="voice_with_class_object_specific_selector-ref.html"> +<style> +html { overflow:hidden } +body { margin:0 } +::cue(v.foo) { + font-family: sans-serif; + color: #00ff00; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="../../../support/test_voice_with_class.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> |