diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/webvtt | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/webvtt')
790 files changed, 23159 insertions, 0 deletions
diff --git a/testing/web-platform/tests/webvtt/META.yml b/testing/web-platform/tests/webvtt/META.yml new file mode 100644 index 0000000000..949f312d7a --- /dev/null +++ b/testing/web-platform/tests/webvtt/META.yml @@ -0,0 +1,4 @@ +spec: https://w3c.github.io/webvtt/ +suggested_reviewers: + - silviapfeiffer + - BenjaminSchaaf diff --git a/testing/web-platform/tests/webvtt/README.md b/testing/web-platform/tests/webvtt/README.md new file mode 100644 index 0000000000..ce12691cae --- /dev/null +++ b/testing/web-platform/tests/webvtt/README.md @@ -0,0 +1,14 @@ +# WebVTT Tests + +## Categorization + +Dependencies: +* Python 3 + +Once you have run the tests with `/tools/runner/index.html`, press the "Download +JSON results" button to download a file containing the results. You can then run +the categorization tool to get a better overview of the test results: + +```bash +$ python3 tools/categorize_results.py runner-results.json +``` diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/align.html b/testing/web-platform/tests/webvtt/api/VTTCue/align.html new file mode 100644 index 0000000000..e3a920ae94 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTCue/align.html @@ -0,0 +1,67 @@ +<!doctype html> +<title>VTTCue.align</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-align"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src=common.js></script> +<div id=log></div> +<script> +test(function(){ + var video = document.createElement('video'); + document.body.appendChild(video); + + var cue = new VTTCue(0, 1, 'text'); + assert_true('align' in cue, 'align is not supported'); + assert_equals(cue.align, 'center'); + + var track = document.createElement('track'); + var t = track.track; + t.addCue(cue); + + assert_equals(cue.align, 'center'); + + video.appendChild(track); + assert_equals(cue.align, 'center'); + + t.mode = 'showing'; + assert_equals(cue.align, 'center'); + + cue.align = 'start'; + assert_equals(cue.align, 'start'); + + cue.align = 'end'; + assert_equals(cue.align, 'end'); + + ['start\u0000', 'centre', 'middle'].forEach(function(invalid) { + cue.align = invalid; + assert_equals(cue.align, 'end'); + }); +}, document.title+', script-created cue'); + +var t_parsed = async_test(document.title+', parsed cue'); +t_parsed.step(function(){ + var video = document.createElement('video'); + document.body.appendChild(video); + var t = document.createElement('track'); + t.onload = this.step_func(function(){ + var c1 = t.track.cues[0]; + var c2 = t.track.cues[1]; + var c3 = t.track.cues[2]; + var c4 = t.track.cues[3]; + assert_equals(c1.align, 'center'); + assert_equals(c2.align, 'start'); + assert_equals(c3.align, 'center'); + assert_equals(c4.align, 'end'); + this.done(); + }); + t.onerror = this.step_func(function() { + assert_unreached('got error event'); + }); + t.src = make_vtt_track('WEBVTT\n\n00:00:00.000 --> 00:00:00.001\ntest\n\n'+ + '00:00:00.000 --> 00:00:00.001 align:start\ntest\n\n'+ + '00:00:00.000 --> 00:00:00.001 align:center\ntest\n\n'+ + '00:00:00.000 --> 00:00:00.001 align:end\ntest', this); + t.track.mode = 'showing'; + video.appendChild(t); +}); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/categories.json b/testing/web-platform/tests/webvtt/api/VTTCue/categories.json new file mode 100644 index 0000000000..eaa5ef17fc --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTCue/categories.json @@ -0,0 +1,3 @@ +{ + "region.html": "regions" +} diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/common.js b/testing/web-platform/tests/webvtt/api/VTTCue/common.js new file mode 100644 index 0000000000..2c39352a84 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTCue/common.js @@ -0,0 +1,8 @@ +function make_vtt_track(contents, test) { + var track_blob = new Blob([contents], { type: 'text/vtt' }); + var track_url = URL.createObjectURL(track_blob); + test.add_cleanup(function() { + URL.revokeObjectURL(track_url); + }); + return track_url; +} diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/constructor-exceptions.html b/testing/web-platform/tests/webvtt/api/VTTCue/constructor-exceptions.html new file mode 100644 index 0000000000..06ad7f041c --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTCue/constructor-exceptions.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>VTTCue constructor exceptions</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +test(function() { + assert_throws_js(TypeError, function() { new VTTCue(NaN, 0, 'foo'); }); + assert_throws_js(TypeError, function() { new VTTCue(Infinity, 0, 'foo'); }); + assert_throws_js(TypeError, function() { new VTTCue('tomorrow', 0, 'foo'); }); +}, document.title+', invalid start time'); +test(function() { + assert_throws_js(TypeError, function() { new VTTCue(0, NaN, 'foo'); }); + assert_throws_js(TypeError, function() { new VTTCue(0, -Infinity, 'foo'); }); + assert_throws_js(TypeError, function() { new VTTCue(0, 'tomorrow', 'foo'); }); +}, document.title+', invalid end time'); +test(function() { + var start = { valueOf: function() { return 42; } }; + var end = { valueOf: function() { return 84; } }; + var cue = new VTTCue(start, end, 'bar'); + assert_equals(cue.startTime, 42); + assert_equals(cue.endTime, 84); + assert_equals(cue.text, 'bar'); +}, document.title+', valueOf'); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/constructor.html b/testing/web-platform/tests/webvtt/api/VTTCue/constructor.html new file mode 100644 index 0000000000..2937f0cecb --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTCue/constructor.html @@ -0,0 +1,56 @@ +<!doctype html> +<title>VTTCue()</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-vttcue"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div id=log></div> +<script> +test(function() { + var cue = new VTTCue(3, 12, 'foo bar'); + + assert_equals(cue.startTime, 3); + assert_equals(cue.endTime, 12); + assert_equals(cue.text, 'foo bar'); + assert_equals(cue.id, ''); + assert_equals(cue.region, null); + assert_equals(cue.pauseOnExit, false); + assert_equals(cue.snapToLines, true); + assert_equals(cue.line, 'auto'); + assert_equals(cue.lineAlign, 'start'); + assert_equals(cue.position, 'auto'); + assert_equals(cue.positionAlign, 'auto'); + assert_equals(cue.size, 100); + assert_equals(cue.align, 'center'); +}, document.title + ', initial values'); + +test(function() { + var cue = new VTTCue(-1, 12, 'foo bar'); + + assert_equals(cue.startTime, -1); + assert_equals(cue.endTime, 12); +}, document.title + ', bad start time'); + + +test(function() { + var cue = new VTTCue(2, -1, 'foo bar'); + + assert_equals(cue.startTime, 2); + assert_equals(cue.endTime, -1); +}, document.title + ', bad end time'); + +test(function() { + var cue = new VTTCue(2, +Infinity, 'foo bar'); + + assert_equals(cue.startTime, 2); + assert_equals(cue.endTime, +Infinity); +}, document.title + ', unbounded end time'); + +test(function() { + var cue = new VTTCue(3, 12, '<i>foo bar</i>'); + + var frag = cue.getCueAsHTML(); + assert_equals(frag.childNodes.length, 1); + assert_equals(frag.childNodes[0].localName, 'i'); + assert_equals(frag.childNodes[0].textContent, 'foo bar'); +}, document.title + ', text formatting'); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/getCueAsHTML.html b/testing/web-platform/tests/webvtt/api/VTTCue/getCueAsHTML.html new file mode 100644 index 0000000000..2f07d3aa0a --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTCue/getCueAsHTML.html @@ -0,0 +1,93 @@ +<!doctype html> +<title>VTTCue.getCueAsHTML()</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-getcueashtml"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div id=log></div> +<script> +test(function(){ + var video = document.createElement('video'); + var t1 = video.addTextTrack('subtitles'); + document.body.appendChild(video); + var c1 = new VTTCue(0, 1, '<c></c><c.a.b></c><i></i><b></b><u></u><ruby><rt></rt></ruby><v></v><v a b></v><1:00:00.500>x\0'); + t1.addCue(c1); + window.frag = c1.getCueAsHTML(); + assert_equals(frag.childNodes.length, 10, 'childNodes.length'); + assert_true(frag instanceof DocumentFragment, 'getCueAsHTML() should return DocumentFragment'); +}, document.title+', creating the cue'); +test(function(){ + assert_equals(frag.childNodes[0].namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI'); + assert_equals(frag.childNodes[0].localName, 'span', 'localName'); + assert_equals(frag.childNodes[0].attributes.length, 0, 'attributes'); + assert_false(frag.childNodes[0].hasChildNodes(), 'hasChildNodes()'); + assert_true(frag.childNodes[0] instanceof HTMLElement, 'instanceof'); +}, document.title+', <c>'); +test(function(){ + assert_equals(frag.childNodes[1].namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI'); + assert_equals(frag.childNodes[1].localName, 'span', 'localName'); + assert_equals(frag.childNodes[1].attributes.length, 1, 'attributes'); + assert_equals(frag.childNodes[1].getAttributeNS('', 'class'), 'a b', 'class attribute'); + assert_false(frag.childNodes[1].hasChildNodes(), 'hasChildNodes()'); + assert_true(frag.childNodes[1] instanceof HTMLElement, 'instanceof'); +}, document.title+', <c.a.b>'); +test(function(){ + assert_equals(frag.childNodes[2].namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI'); + assert_equals(frag.childNodes[2].localName, 'i', 'localName'); + assert_equals(frag.childNodes[2].attributes.length, 0, 'attributes'); + assert_false(frag.childNodes[2].hasChildNodes(), 'hasChildNodes()'); + assert_true(frag.childNodes[2] instanceof HTMLElement, 'instanceof'); +}, document.title+', <i>'); +test(function(){ + assert_equals(frag.childNodes[3].namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI'); + assert_equals(frag.childNodes[3].localName, 'b', 'localName'); + assert_equals(frag.childNodes[3].attributes.length, 0, 'attributes'); + assert_false(frag.childNodes[3].hasChildNodes(), 'hasChildNodes()'); + assert_true(frag.childNodes[3] instanceof HTMLElement, 'instanceof'); +}, document.title+', <b>'); +test(function(){ + assert_equals(frag.childNodes[4].namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI'); + assert_equals(frag.childNodes[4].localName, 'u', 'localName'); + assert_equals(frag.childNodes[4].attributes.length, 0, 'attributes'); + assert_false(frag.childNodes[4].hasChildNodes(), 'hasChildNodes()'); + assert_true(frag.childNodes[4] instanceof HTMLElement, 'instanceof'); +}, document.title+', <u>'); +test(function(){ + assert_equals(frag.childNodes[5].namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI'); + assert_equals(frag.childNodes[5].localName, 'ruby', 'localName'); + assert_equals(frag.childNodes[5].attributes.length, 0, 'attributes'); + assert_true(frag.childNodes[5].hasChildNodes(), 'hasChildNodes()'); + assert_true(frag.childNodes[5] instanceof HTMLElement, 'instanceof'); +}, document.title+', <ruby>'); +test(function(){ + assert_equals(frag.childNodes[5].firstChild.namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI'); + assert_equals(frag.childNodes[5].firstChild.localName, 'rt', 'localName'); + assert_equals(frag.childNodes[5].firstChild.attributes.length, 0, 'attributes'); + assert_false(frag.childNodes[5].firstChild.hasChildNodes(), 'hasChildNodes()'); + assert_true(frag.childNodes[5].firstChild instanceof HTMLElement, 'instanceof'); +}, document.title+', <rt>'); +test(function(){ + assert_equals(frag.childNodes[6].namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI'); + assert_equals(frag.childNodes[6].localName, 'span', 'localName'); + assert_equals(frag.childNodes[6].attributes.length, 1, 'attributes'); + assert_equals(frag.childNodes[6].getAttributeNS('', 'title'), '', 'title attribute'); + assert_false(frag.childNodes[6].hasChildNodes(), 'hasChildNodes()'); + assert_true(frag.childNodes[6] instanceof HTMLElement, 'instanceof'); +}, document.title+', <v>'); +test(function(){ + assert_equals(frag.childNodes[7].namespaceURI, 'http://www.w3.org/1999/xhtml', 'namespaceURI'); + assert_equals(frag.childNodes[7].localName, 'span', 'localName'); + assert_equals(frag.childNodes[7].attributes.length, 1, 'attributes'); + assert_equals(frag.childNodes[7].getAttributeNS('', 'title'), 'a b', 'title attribute'); + assert_false(frag.childNodes[7].hasChildNodes(), 'hasChildNodes()'); + assert_true(frag.childNodes[7] instanceof HTMLElement, 'instanceof'); +}, document.title+', <v a b>'); +test(function(){ + assert_equals(frag.childNodes[8].target, 'timestamp', 'target'); + assert_equals(frag.childNodes[8].data, '01:00:00.500', 'data'); + assert_true(frag.childNodes[8] instanceof ProcessingInstruction, 'instanceof'); +}, document.title+', <1:00:00.500>'); +test(function(){ + assert_equals(frag.childNodes[9].data, 'x\0', 'data'); + assert_true(frag.childNodes[9] instanceof Text, 'instanceof'); +}, document.title+', x\\0'); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/line.html b/testing/web-platform/tests/webvtt/api/VTTCue/line.html new file mode 100644 index 0000000000..dcf46db052 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTCue/line.html @@ -0,0 +1,65 @@ +<!doctype html> +<title>VTTCue.line</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-line"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src=common.js></script> +<div id=log></div> +<script> +test(function(){ + var video = document.createElement('video'); + document.body.appendChild(video); + var c1 = new VTTCue(0, 1, 'text1'); + assert_true('line' in c1, 'line is not supported'); + assert_equals(c1.line, "auto"); + var track = document.createElement('track'); + var t = track.track; + t.addCue(c1); + assert_equals(c1.line, "auto"); + video.appendChild(track); + assert_equals(c1.line, "auto"); + t.mode = 'showing'; + assert_equals(c1.line, "auto"); + var c2 = new VTTCue(0, 1, 'text2'); + var track2 = document.createElement('track'); + var t2 = track2.track; + t2.addCue(c2); + assert_equals(c2.line, "auto"); + video.appendChild(track2); + t2.mode = 'showing'; + assert_equals(c2.line, "auto"); + assert_equals(c1.line, "auto"); + c1.line = -5; + assert_equals(c1.line, -5); + assert_equals(c2.line, "auto"); + c1.line = 0; + c1.snapToLines = false; + assert_equals(c1.line, 0); + assert_equals(c2.line, "auto"); +}, document.title+', script-created cue'); + +var t_parsed = async_test(document.title+', parsed cue'); +t_parsed.step(function(){ + var video = document.createElement('video'); + document.body.appendChild(video); + var t = document.createElement('track'); + t.onload = this.step_func(function(){ + var c1 = t.track.cues[0]; + var c2 = t.track.cues[1]; + var c3 = t.track.cues[2]; + assert_equals(c1.line, "auto"); + assert_equals(c2.line, 0); + assert_equals(c3.line, 0); + + this.done(); + }); + t.onerror = this.step_func(function() { + assert_unreached('got error event'); + }); + t.src = make_vtt_track('WEBVTT\n\n00:00:00.000 --> 00:00:00.001\ntest\n\n'+ + '00:00:00.000 --> 00:00:00.001 line:0\ntest\n\n'+ + '00:00:00.000 --> 00:00:00.001 line:0%\ntest', this); + t.track.mode = 'showing'; + video.appendChild(t); +}); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/lineAlign.html b/testing/web-platform/tests/webvtt/api/VTTCue/lineAlign.html new file mode 100644 index 0000000000..7be0d540e1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTCue/lineAlign.html @@ -0,0 +1,39 @@ +<!doctype html> +<title>VTTCue.lineAlign</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-linealign"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div id=log></div> +<script> +test(function(){ + var video = document.createElement('video'); + document.body.appendChild(video); + + var cue = new VTTCue(0, 1, 'text'); + assert_true('lineAlign' in cue, 'lineAlign is not supported'); + assert_equals(cue.lineAlign, 'start'); + + var track = document.createElement('track'); + var t = track.track; + t.addCue(cue); + + assert_equals(cue.lineAlign, 'start'); + + video.appendChild(track); + assert_equals(cue.lineAlign, 'start'); + + t.mode = 'showing'; + assert_equals(cue.lineAlign, 'start'); + + cue.lineAlign = 'center'; + assert_equals(cue.lineAlign, 'center'); + + cue.lineAlign = 'end'; + assert_equals(cue.lineAlign, 'end'); + + ['start\u0000', 'centre', 'middle'].forEach(function(invalid) { + cue.lineAlign = invalid; + assert_equals(cue.lineAlign, 'end'); + }); +}, document.title+', script-created cue'); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/position.html b/testing/web-platform/tests/webvtt/api/VTTCue/position.html new file mode 100644 index 0000000000..c0485e7a79 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTCue/position.html @@ -0,0 +1,32 @@ +<!doctype html> +<title>VTTCue.position</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-position"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div id=log></div> +<script> +test(function(){ + var cue = new VTTCue(0, 1, 'text'); + assert_true('position' in cue, 'position is not supported'); + + cue.position = 'auto'; + assert_equals(cue.position, 'auto'); + + for (i = 0; i <= 100; i++) { + cue.position = i; + assert_equals(cue.position, i); + } + + [-1, -100, -101, 101, 200, 201].forEach(function(invalid) { + assert_throws_dom('IndexSizeError', function() { + cue.position = invalid; + }); + }); + + cue.position = 1.5; + assert_equals(cue.position, 1.5); + + cue.position = 'auto'; + assert_equals(cue.position, 'auto'); +}, document.title+', script-created cue'); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/positionAlign.html b/testing/web-platform/tests/webvtt/api/VTTCue/positionAlign.html new file mode 100644 index 0000000000..bde1c6eee7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTCue/positionAlign.html @@ -0,0 +1,23 @@ +<!doctype html> +<title>VTTCue.positionAlign</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-positionalign"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div id=log></div> +<script> +test(function(){ + var cue = new VTTCue(0, 1, 'text'); + assert_true('positionAlign' in cue, 'positionAlign is not supported'); + + ['line-left', 'center', 'line-right', 'auto'].forEach(function(valid) { + cue.positionAlign = valid; + assert_equals(cue.positionAlign, valid); + }); + + cue.positionAlign = 'center'; + ['auto\u0000', 'centre', 'middle'].forEach(function(invalid) { + cue.positionAlign = invalid; + assert_equals(cue.positionAlign, 'center'); + }); +}, document.title+', script-created cue'); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/region.html b/testing/web-platform/tests/webvtt/api/VTTCue/region.html new file mode 100644 index 0000000000..ae51c5f603 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTCue/region.html @@ -0,0 +1,38 @@ +<!doctype html> +<title>VTTCue.region</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-region"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div id=log></div> +<script> +test(function(){ + var video = document.createElement('video'); + document.body.appendChild(video); + + var cue = new VTTCue(0, 1, 'text'); + assert_true('region' in cue, 'region is not supported'); + assert_equals(cue.region, null); + + var track = document.createElement('track'); + var t = track.track; + t.addCue(cue); + + assert_equals(cue.region, null); + + video.appendChild(track); + assert_equals(cue.region, null); + + t.mode = 'showing'; + assert_equals(cue.region, null); + + var region = new VTTRegion(); + cue.region = region; + assert_equals(cue.region, region); + + cue.region = 'foo'; + assert_equals(cue.region, region); + + cue.region = null; + assert_equals(cue.region, null); +}, document.title+', script-created cue'); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/size.html b/testing/web-platform/tests/webvtt/api/VTTCue/size.html new file mode 100644 index 0000000000..fdb8059c72 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTCue/size.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>VTTCue.size</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-size"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div id=log></div> +<script> +test(function(){ + var cue = new VTTCue(0, 1, 'text'); + assert_true('size' in cue, 'size is not supported'); + + for (i = 0; i <= 100; i++) { + cue.size = i; + assert_equals(cue.size, i); + } + + [-1, -100, -101, 101, 200, 201].forEach(function(invalid) { + assert_throws_dom('IndexSizeError', function() { + cue.size = invalid; + }); + }); + + cue.size = 1.5; + assert_equals(cue.size, 1.5); +}, document.title+', script-created cue'); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/snapToLines.html b/testing/web-platform/tests/webvtt/api/VTTCue/snapToLines.html new file mode 100644 index 0000000000..b3f9f34f10 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTCue/snapToLines.html @@ -0,0 +1,100 @@ +<!doctype html> +<title>VTTCue.snapToLines</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-snaptolines"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src=common.js></script> +<div id=log></div> +<script> +setup(function(){ + window.video = document.createElement('video'); + window.t1 = video.addTextTrack('subtitles'); + document.body.appendChild(video); +}); +test(function(){ + var c1 = new VTTCue(0, 1, 'text1'); + assert_true('snapToLines' in c1, 'snapToLines is not supported'); + assert_true(c1.snapToLines); + c1.line = 101; + c1.snapToLines = false; + assert_false(c1.snapToLines); + c1.snapToLines = true; + assert_true(c1.snapToLines); + c1.line = -1; + c1.snapToLines = false; + assert_false(c1.snapToLines); + c1.snapToLines = true; + assert_true(c1.snapToLines); + c1.line = 0; + c1.snapToLines = false; + assert_false(c1.snapToLines); +}, document.title+', script-created cue'); + +var t_parsed = async_test(document.title+', parsed cue'); +t_parsed.step(function(){ + var t = document.createElement('track'); + t.onload = this.step_func(function(){ + var c1 = t.track.cues[0]; + assert_true(c1.snapToLines); + c1.line = 101; + c1.snapToLines = false; + assert_false(c1.snapToLines); + c1.snapToLines = true; + assert_true(c1.snapToLines); + c1.line = -1; + c1.snapToLines = false; + assert_false(c1.snapToLines); + c1.snapToLines = true; + assert_true(c1.snapToLines); + c1.line = 0; + c1.snapToLines = false; + assert_false(c1.snapToLines); + + var c2 = t.track.cues[1]; + assert_true(c2.snapToLines); + c2.line = 101; + c2.snapToLines = false; + assert_false(c2.snapToLines); + c2.snapToLines = true; + assert_true(c2.snapToLines); + c2.line = -1; + c2.snapToLines = false; + assert_false(c2.snapToLines); + c2.snapToLines = true; + assert_true(c2.snapToLines); + c2.line = 0; + c2.snapToLines = false; + assert_false(c2.snapToLines); + + var c3 = t.track.cues[2]; + assert_false(c3.snapToLines); + c3.snapToLines = false; + assert_false(c3.snapToLines); + c3.snapToLines = true; + assert_true(c3.snapToLines); + c3.line = 101; + c3.snapToLines = false; + assert_false(c3.snapToLines); + c3.snapToLines = true; + assert_true(c3.snapToLines); + c3.line = -1; + c3.snapToLines = false; + assert_false(c3.snapToLines); + c3.snapToLines = true; + assert_true(c3.snapToLines); + c3.line = 0; + c3.snapToLines = false; + assert_false(c3.snapToLines); + + this.done(); + }); + t.onerror = this.step_func(function() { + assert_unreached('got error event'); + }); + t.src = make_vtt_track('WEBVTT\n\n00:00:00.000 --> 00:00:00.001\ntest\n\n'+ + '00:00:00.000 --> 00:00:00.001 line:0\ntest\n\n'+ + '00:00:00.000 --> 00:00:00.001 line:0%\ntest', this); + t.track.mode = 'showing'; + video.appendChild(t); +}); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/text.html b/testing/web-platform/tests/webvtt/api/VTTCue/text.html new file mode 100644 index 0000000000..a61c600db9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTCue/text.html @@ -0,0 +1,41 @@ +<!doctype html> +<title>VTTCue.text</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-text"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src=common.js></script> +<div id=log></div> +<script> +setup(function(){ + window.video = document.createElement('video'); + window.t1 = video.addTextTrack('subtitles'); + document.body.appendChild(video); +}); +test(function(){ + var c1 = new VTTCue(0, 1, 'text1\r\n\n\u0000'); + assert_true('text' in c1, 'text is not supported'); + assert_equals(c1.text, 'text1\r\n\n\u0000'); + c1.text = c1.text; + assert_equals(c1.text, 'text1\r\n\n\u0000'); + c1.text = null; + assert_equals(c1.text, 'null'); +}, document.title+', script-created cue'); + +var t_parsed = async_test(document.title+', parsed cue'); +t_parsed.step(function(){ + var t = document.createElement('track'); + t.onload = this.step_func(function(){ + var c = t.track.cues; + assert_equals(c[0].text, ''); + assert_equals(c[1].text, 'test'); + this.done(); + }); + t.onerror = this.step_func(function() { + assert_unreached('got error event'); + }); + t.src = make_vtt_track('WEBVTT\n\n00:00:00.000 --> 00:00:00.001\n'+ + '\n\nfoobar\n00:00:00.000 --> 00:00:00.001\ntest', this); + t.track.mode = 'showing'; + video.appendChild(t); +}); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTCue/vertical.html b/testing/web-platform/tests/webvtt/api/VTTCue/vertical.html new file mode 100644 index 0000000000..8b93f6b003 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTCue/vertical.html @@ -0,0 +1,57 @@ +<!doctype html> +<title>VTTCue.vertical</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttcue-vertical"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src=common.js></script> +<div id=log></div> +<script> +setup(function(){ + window.video = document.createElement('video'); + window.t1 = video.addTextTrack('subtitles'); + document.body.appendChild(video); +}); +test(function(){ + var video = document.createElement('video'); + document.body.appendChild(video); + var c1 = new VTTCue(0, 1, 'text1'); + assert_true('vertical' in c1, 'vertical is not supported'); + assert_equals(c1.vertical, ''); + var track = document.createElement('track'); + var t = track.track; + t.addCue(c1); + assert_equals(c1.vertical, ''); + video.appendChild(track); + assert_equals(c1.vertical, ''); + t.mode = 'showing'; + assert_equals(c1.vertical, ''); + c1.vertical = 'rl'; + assert_equals(c1.vertical, 'rl'); + c1.vertical = 'lr'; + assert_equals(c1.vertical, 'lr'); + c1.vertical = 'rl\u0000'; + assert_equals(c1.vertical, 'lr'); +}, document.title+', script-created cue'); + +var t_parsed = async_test(document.title+', parsed cue'); +t_parsed.step(function(){ + var t = document.createElement('track'); + t.onload = this.step_func(function(){ + var c1 = t.track.cues[0]; + var c2 = t.track.cues[1]; + var c3 = t.track.cues[2]; + assert_equals(c1.vertical, ''); + assert_equals(c2.vertical, 'rl'); + assert_equals(c3.vertical, 'lr'); + this.done(); + }); + t.onerror = this.step_func(function() { + assert_unreached('got error event'); + }); + t.src = make_vtt_track('WEBVTT\n\n00:00:00.000 --> 00:00:00.001\ntest\n\n'+ + '00:00:00.000 --> 00:00:00.001 vertical:rl\ntest\n\n'+ + '00:00:00.000 --> 00:00:00.001 vertical:lr\ntest', this); + t.track.mode = 'showing'; + video.appendChild(t); +}); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/constructor.html b/testing/web-platform/tests/webvtt/api/VTTRegion/constructor.html new file mode 100644 index 0000000000..a427f4f7d6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTRegion/constructor.html @@ -0,0 +1,67 @@ +<!doctype html> +<title>VTTRegion()</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-vttregion"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div id=log></div> +<script> +test(function() { + var region = new VTTRegion(); + assert_true(region instanceof VTTRegion, "instanceof"); + + assert_equals(region.scroll, ""); + assert_equals(region.viewportAnchorX, 0); + assert_equals(region.viewportAnchorY, 100); + assert_equals(region.regionAnchorX, 0); + assert_equals(region.regionAnchorY, 100); + assert_equals(region.lines, 3); + assert_equals(region.width, 100); +}, document.title + " initial values"); + +test(function() { + var region = new VTTRegion(); + region.scroll = "invalid-scroll-value"; + assert_equals(region.scroll, ""); + + checkValues([-1, 101], "IndexSizeError"); + checkValues([-Infinity, Infinity, NaN], TypeError); + + function assert_throws_something(error, func) { + if (typeof error == "string") { + assert_throws_dom(error, func); + } else { + assert_throws_js(error, func); + } + } + + function checkValues(invalidValues, exception) { + for (var value of invalidValues) { + assert_throws_something(exception, function() { region.viewportAnchorX = value; }); + assert_equals(region.viewportAnchorX, 0); + assert_throws_something(exception, function() { region.viewportAnchorY = value; }); + assert_equals(region.viewportAnchorY, 100); + assert_throws_something(exception, function() { region.regionAnchorX = value; }); + assert_equals(region.regionAnchorX, 0); + assert_throws_something(exception, function() { region.regionAnchorY = value; }); + assert_equals(region.regionAnchorY, 100); + assert_throws_something(exception, function() { region.width = value; }); + assert_equals(region.width, 100); + } + } + + assert_equals(region.lines, 3); + + region.lines = 130; + assert_equals(region.lines, 130); + region.viewportAnchorX = 64; + assert_equals(region.viewportAnchorX, 64); + region.viewportAnchorY = 32; + assert_equals(region.viewportAnchorY, 32); + region.regionAnchorX = 16; + assert_equals(region.regionAnchorX, 16); + region.regionAnchorY = 8; + assert_equals(region.regionAnchorY, 8); + region.width = 42; + assert_equals(region.width, 42); +}, document.title + " mutations"); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/id.html b/testing/web-platform/tests/webvtt/api/VTTRegion/id.html new file mode 100644 index 0000000000..1eabac2d16 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTRegion/id.html @@ -0,0 +1,21 @@ +<!doctype html> +<title>VTTRegion.id</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-id"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div id=log></div> +<script> +test(function() { + var region = new VTTRegion(); + assert_true('id' in region, 'id is not supported'); + + assert_equals(region.id, '', 'initial value'); + + region.id = '1'; + assert_equals(region.id, '1', 'value after setting to "1"'); + + region.id = ''; + assert_equals(region.id, '', 'value after setting to the empty string'); + +}, document.title + ' script-created region'); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/lines.html b/testing/web-platform/tests/webvtt/api/VTTRegion/lines.html new file mode 100644 index 0000000000..9bde9a1947 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTRegion/lines.html @@ -0,0 +1,36 @@ +<!doctype html> +<title>VTTRegion.lines</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-lines"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div id=log></div> +<script> +test(function() { + var region = new VTTRegion(); + assert_true('lines' in region, 'lines is not supported'); + + for (var i = 1; i <= 100; i++) { + region.lines = i; + assert_equals(region.lines, i); + } + + // https://webidl.spec.whatwg.org/#abstract-opdef-converttoint + [[0, 0], + [-0, 0], + [-1, 4294967295], + [-100, 4294967196], + [101, 101], + [-2147483648, 2147483648], + [2147483647, 2147483647], + [2147483648, 2147483648], + [NaN, 0], + [Infinity, 0], + [-Infinity, 0]].forEach(function (pair) { + var input = pair[0]; + var expected = pair[1]; + region.lines = input; + assert_equals(region.lines, expected); + }); + +}, document.title + ' script-created region'); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/non-visible-cue-with-region.html b/testing/web-platform/tests/webvtt/api/VTTRegion/non-visible-cue-with-region.html new file mode 100644 index 0000000000..5a48e46520 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTRegion/non-visible-cue-with-region.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Box-less VTTCue attached to VTTRegion</title> +<script src="/common/media.js"></script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<video></video> +<script> +setup(function() { + window.video = document.querySelector('video'); + video.src = getVideoURI('/media/test'); +}); +async_test(function(t) { + let track = video.addTextTrack('subtitles'); + let cue = new VTTCue(0, 1, ''); + cue.region = new VTTRegion(); + cue.onexit = t.step_func_done(function() { + video.pause(); + }); + track.addCue(cue); + video.onloadedmetadata = t.step_func(function() { + video.currentTime = 0.8; + video.play(); + }); + video.onended = t.unreached_func('test ends before video'); +}); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/regionAnchorX.html b/testing/web-platform/tests/webvtt/api/VTTRegion/regionAnchorX.html new file mode 100644 index 0000000000..f7663366cb --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTRegion/regionAnchorX.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>VTTRegion.regionAnchorX</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchorx"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div id=log></div> +<script> +test(function() { + var region = new VTTRegion(); + assert_true('regionAnchorX' in region, 'regionAnchorX is not supported'); + + for (var i = 0; i <= 100; i++) { + region.regionAnchorX = i; + assert_equals(region.regionAnchorX, i); + } + + region.regionAnchorX = 1.5; + assert_equals(region.regionAnchorX, 1.5); + + [-1, -100, -150, 101, 200, 250].forEach(function (invalid) { + assert_throws_dom('IndexSizeError', function() { + region.regionAnchorX = invalid; + }); + }); +}, document.title + ' script-created region'); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/regionAnchorY.html b/testing/web-platform/tests/webvtt/api/VTTRegion/regionAnchorY.html new file mode 100644 index 0000000000..174ff67890 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTRegion/regionAnchorY.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>VTTRegion.regionAnchorY</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchory"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div id=log></div> +<script> +test(function() { + var region = new VTTRegion(); + assert_true('regionAnchorY' in region, 'regionAnchorY is not supported'); + + for (var i = 0; i <= 100; i++) { + region.regionAnchorY = i; + assert_equals(region.regionAnchorY, i); + } + + region.regionAnchorX = 1.5; + assert_equals(region.regionAnchorX, 1.5); + + [-1, -100, -150, 101, 200, 250].forEach(function (invalid) { + assert_throws_dom('IndexSizeError', function() { + region.regionAnchorY = invalid; + }); + }); +}, document.title + ' script-created region'); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/scroll.html b/testing/web-platform/tests/webvtt/api/VTTRegion/scroll.html new file mode 100644 index 0000000000..63dc50ab45 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTRegion/scroll.html @@ -0,0 +1,27 @@ +<!doctype html> +<title>VTTRegion.scroll</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-scroll"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div id=log></div> +<script> +test(function() { + var region = new VTTRegion(); + assert_true('scroll' in region, 'scroll is not supported'); + + region.scroll = ''; + assert_equals(region.scroll, ''); + + region.scroll = 'up'; + assert_equals(region.scroll, 'up'); + + region.scroll = 'down'; + assert_equals(region.scroll, 'up'); + + region.scroll = ''; + for (var invalid in ['left', 'right', 'center', 'top', 'bottom', 'down']) { + region.scroll = invalid; + assert_equals(region.scroll, ''); + } +}, document.title + ' script-created region'); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/viewportAnchorX.html b/testing/web-platform/tests/webvtt/api/VTTRegion/viewportAnchorX.html new file mode 100644 index 0000000000..0786585d46 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTRegion/viewportAnchorX.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>VTTRegion.viewportAnchorX</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchorx"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div id=log></div> +<script> +test(function() { + var region = new VTTRegion(); + assert_true('viewportAnchorX' in region, 'viewportAnchorX is not supported'); + + for (var i = 0; i <= 100; i++) { + region.viewportAnchorX = i; + assert_equals(region.viewportAnchorX, i); + } + + region.viewportAnchorX = 1.5; + assert_equals(region.viewportAnchorX, 1.5); + + [-1, -100, -150, 101, 200, 250].forEach(function (invalid) { + assert_throws_dom('IndexSizeError', function() { + region.viewportAnchorX = invalid; + }); + }); +}, document.title + ' script-created region'); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/viewportAnchorY.html b/testing/web-platform/tests/webvtt/api/VTTRegion/viewportAnchorY.html new file mode 100644 index 0000000000..de43567b62 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTRegion/viewportAnchorY.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>VTTRegion.viewportAnchorY</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchory"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div id=log></div> +<script> +test(function() { + var region = new VTTRegion(); + assert_true('viewportAnchorY' in region, 'viewportAnchorY is not supported'); + + for (var i = 0; i <= 100; i++) { + region.viewportAnchorY = i; + assert_equals(region.viewportAnchorY, i); + } + + region.viewportAnchorY = 1.5; + assert_equals(region.viewportAnchorY, 1.5); + + [-1, -100, -150, 101, 200, 250].forEach(function (invalid) { + assert_throws_dom('IndexSizeError', function() { + region.viewportAnchorY = invalid; + }); + }); +}, document.title + ' script-created region'); +</script> diff --git a/testing/web-platform/tests/webvtt/api/VTTRegion/width.html b/testing/web-platform/tests/webvtt/api/VTTRegion/width.html new file mode 100644 index 0000000000..97c1c73956 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/VTTRegion/width.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>VTTRegion.width</title> +<link rel="help" href="https://w3c.github.io/webvtt/#dom-vttregion-width"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div id=log></div> +<script> +test(function(){ + var region = new VTTRegion(); + assert_true('width' in region, 'width is not supported'); + + for (var i = 0; i <= 100; i++) { + region.width = i; + assert_equals(region.width, i); + } + + region.width = 1.5; + assert_equals(region.width, 1.5); + + [-1, -100, -150, 101, 200, 250].forEach(function (invalid) { + assert_throws_dom('IndexSizeError', function() { + region.width = invalid; + }); + }); +}, document.title + ' script-created region'); +</script> diff --git a/testing/web-platform/tests/webvtt/api/categories.json b/testing/web-platform/tests/webvtt/api/categories.json new file mode 100644 index 0000000000..7ce5b13f72 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/categories.json @@ -0,0 +1,5 @@ +{ + ":subcategories": ["VTTCue/categories.json"], + "VTTCue/*": "cues", + "VTTRegion/*": "regions" +} diff --git a/testing/web-platform/tests/webvtt/api/historical.html b/testing/web-platform/tests/webvtt/api/historical.html new file mode 100644 index 0000000000..8f6c09bf52 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/historical.html @@ -0,0 +1,35 @@ +<!doctype html> +<title>Historical WebVTT APIs must not be supported</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script> +// Also see /html/semantics/embedded-content/media-elements/historical.html + +[ + // https://github.com/w3c/webvtt/pull/31 + ['VTTCue', 'regionId'], + ['TextTrack', 'regions'], + ['TextTrack', 'addRegion'], + ['TextTrack', 'removeRegion'], + ['VTTRegion', 'track'], + // id re-introduced in https://github.com/w3c/webvtt/pull/349/files + +].forEach(function(feature) { + var interf = feature[0]; + var member = feature[1]; + test(function() { + assert_true(interf in window, interf + ' is not supported'); + assert_false(member in window[interf].prototype); + }, interf + ' ' + member + ' member must be nuked'); +}); + +[ + // https://github.com/w3c/webvtt/pull/31 + 'VTTRegionList', + +].forEach(function(interf) { + test(function() { + assert_false(interf in window); + }, interf + ' interface must be nuked'); +}); +</script> diff --git a/testing/web-platform/tests/webvtt/api/idlharness.window.js b/testing/web-platform/tests/webvtt/api/idlharness.window.js new file mode 100644 index 0000000000..53c1ded674 --- /dev/null +++ b/testing/web-platform/tests/webvtt/api/idlharness.window.js @@ -0,0 +1,15 @@ +// META: script=/resources/WebIDLParser.js +// META: script=/resources/idlharness.js + +'use strict'; + +idl_test( + ['webvtt'], + ['html', 'dom'], + idl_array => { + idl_array.add_objects({ + VTTCue: ['new VTTCue(0, 0, "")'], + VTTRegion: ['new VTTRegion()'], + }); + } +); diff --git a/testing/web-platform/tests/webvtt/categories.json b/testing/web-platform/tests/webvtt/categories.json new file mode 100644 index 0000000000..11af9ad43d --- /dev/null +++ b/testing/web-platform/tests/webvtt/categories.json @@ -0,0 +1,12 @@ +{ + ":categories": [ + ["api", "parsing", "rendering"], + ["cues"], + ["regions"], + ["stylesheets"] + ], + ":subcategories": ["api/categories.json", "parsing/categories.json"], + "api/*": "api", + "parsing/*": "parsing", + "rendering/*": "rendering" +} diff --git a/testing/web-platform/tests/webvtt/parsing/README.md b/testing/web-platform/tests/webvtt/parsing/README.md new file mode 100644 index 0000000000..e789c1657b --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/README.md @@ -0,0 +1,9 @@ +# Parsing Tests + +Tests the [parsing section of the WebVTT spec.](https://w3c.github.io/webvtt/#parsing) + +Tests for [file parsing](https://w3c.github.io/webvtt/#file-parsing) are located +in `file-parsing/`. + +Tests for [cue text parsing](https://w3c.github.io/webvtt/#cue-text-parsing-rules) +are located in `cue-text-parsing/` diff --git a/testing/web-platform/tests/webvtt/parsing/categories.json b/testing/web-platform/tests/webvtt/parsing/categories.json new file mode 100644 index 0000000000..1ae85203e4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/categories.json @@ -0,0 +1,8 @@ +{ + ":categories": [ + ["file-parsing", "cue-text-parsing"] + ], + ":subcategories": ["file-parsing/categories.json"], + "file-parsing/*": "file-parsing", + "cue-text-parsing/*": "cue-text-parsing" +} diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/buildtests.py b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/buildtests.py new file mode 100644 index 0000000000..2152055000 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/buildtests.py @@ -0,0 +1,71 @@ +#!/usr/bin/python3 + +import os +import urllib.parse +import hashlib + +doctmpl = """\ +<!doctype html> +<title>WebVTT cue data parser test %s</title> +<link rel="help" href="https://w3c.github.io/webvtt/#cue-text-parsing-rules"> +<style>video { display:none }</style> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src=/html/syntax/parsing/template.js></script> +<script src=/html/syntax/parsing/common.js></script> +<script src=../common.js></script> +<div id=log></div> +<script> +runTests([ +%s +]); +</script> +""" + +testobj = "{name:'%s', input:'%s', expected:'%s'}" + +def appendtest(tests, input, expected): + tests.append(testobj % (hashlib.sha1(input.encode('UTF-8')).hexdigest(), urllib.parse.quote(input[:-1]), urllib.parse.quote(expected[:-1]))) + +files = os.listdir('dat/') +for file in files: + if os.path.isdir('dat/'+file) or file[0] == ".": + continue + + tests = [] + input = "" + expected = "" + state = "" + with open('dat/'+file, "r") as f: + while True: + line = f.readline() + if not line: + if state != "": + appendtest(tests, input, expected) + input = "" + expected = "" + state = "" + break + + if line[0] == "#": + state = line + if line == "#document-fragment\n": + expected += bytes(line, 'UTF-8').decode('unicode-escape') + elif state == "#data\n": + input += bytes(line, 'UTF-8').decode('unicode-escape') + elif state == "#errors\n": + pass + elif state == "#document-fragment\n": + if line == "\n": + appendtest(tests, input, expected) + input = "" + expected = "" + state = "" + else: + expected += bytes(line, 'UTF-8').decode('unicode-escape') + else: + raise Exception("failed to parse file %s:%s (state: %s)" % (file, line, state)) + + name = os.path.splitext(file)[0] + with open('tests/'+name+".html", "w") as out: + out.write(doctmpl % (name, ",\n".join(tests))) diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/common.js b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/common.js new file mode 100644 index 0000000000..c72bdc06d9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/common.js @@ -0,0 +1,196 @@ +var namespaces = { + "html":"http://www.w3.org/1999/xhtml", + "mathml":"http://www.w3.org/1998/Math/MathML", + "svg":"http://www.w3.org/2000/svg", + "xlink":"http://www.w3.org/1999/xlink", + "xml":"http://www.w3.org/XML/1998/namespace", + "xmlns":"http://www.w3.org/2000/xmlns/" +}; + +var prefixes = {}; +for (var prefix in namespaces) { + if (namespaces.hasOwnProperty(prefix)) { + prefixes[namespaces[prefix]] = prefix; + } +} +prefixes[namespaces["mathml"]] = "math"; + +function format(format_string) { + var insertions = Array.prototype.slice.call(arguments, 1); + var regexp = /%s/g; + var match_count = 0; + var rv = format_string.replace(regexp, function(match) { + var rv = insertions[match_count]; + match_count++; + return rv; + }); + return rv; +} + +function test_serializer(element) { + //element.normalize(); + var lines = []; + function serialize_element(element, indent) { + var indent_spaces = (new Array(indent)).join(" "); + switch(element.nodeType) { + case Node.DOCUMENT_TYPE_NODE: + if (element.name) { + if (element.publicId || element.systemId) { + var publicId = element.publicId ? element.publicId : ""; + var systemId = element.systemId ? element.systemId : ""; + lines.push(format("|%s<!DOCTYPE %s \"%s\" \"%s\">", indent_spaces, + element.name, publicId, systemId)); + } else { + lines.push(format("|%s<!DOCTYPE %s>", indent_spaces, + element.name)); + } + } else { + lines.push(format("|%s<!DOCTYPE >", indent_spaces)); + } + break; + case Node.DOCUMENT_NODE: + lines.push("#document"); + break; + case Node.DOCUMENT_FRAGMENT_NODE: + lines.push("#document-fragment"); + break; + case Node.PROCESSING_INSTRUCTION_NODE: + lines.push(format("|%s<?%s %s>", indent_spaces, element.target, element.data)); + break; + case Node.COMMENT_NODE: + lines.push(format("|%s<!-- %s -->", indent_spaces, element.nodeValue)); + break; + case Node.TEXT_NODE: + lines.push(format("|%s\"%s\"", indent_spaces, element.nodeValue)); + break; + case Node.ELEMENT_NODE: + if (element.getAttribute("data-skip") !== null) { + return; + } + if (element.namespaceURI !== null && element.namespaceURI !== namespaces.html) { + var name = format("%s %s", prefixes[element.namespaceURI], + element.localName); + } else { + var name = element.localName; + } + lines.push(format("|%s<%s>", indent_spaces, name)); + + var attributes = Array.prototype.map.call( + element.attributes, + function(attr) { + var name = (attr.namespaceURI ? prefixes[attr.namespaceURI] + " " : "") + + attr.localName; + return [name, attr.value]; + }); + attributes.sort(function (a, b) { + var x = a[0]; + var y = b[0]; + if (x === y) { + return 0; + } + return x > y ? 1 : -1; + }); + + attributes.forEach( + function(attr) { + var indent_spaces = (new Array(indent + 2)).join(" "); + lines.push(format("|%s%s=\"%s\"", indent_spaces, attr[0], attr[1])); + } + ); + break; + } + indent += 2; + Array.prototype.forEach.call(element.childNodes, + function(node) { + serialize_element(node, indent); + }); + } + serialize_element(element, 0); + return lines.join("\n"); +} + +function print_diffs(test_id, uri_encoded_input, expected, actual, container) { + container = container ? container : null; + if (actual) { + var diffs = mark_diffs(expected, actual); + var expected_text = diffs[0]; + var actual_text = diffs[1]; + } else { + var expected_text = expected; + var actual_text = ""; + } + + var tmpl = ["div", {"id":"${test_id}"}, + ["h2", {}, "${test_id}"], + function(vars) { + if (vars.container !== null) { + return ["div", {"class":"container"}, + ["h3", {}, "innerHTML Container"], + ["pre", {}, vars.container]]; + } else { + return null; + } + }, + ["div", {"id":"input_${test_id}"}, ["h3", {}, "Input"], ["pre", {}, + ["code", {}, decodeURIComponent(uri_encoded_input)]]], + ["div", {"id":"expected_${test_id}"}, ["h3", {}, "Expected"], + ["pre", {}, ["code", {}, expected_text]]], + ["div", {"id":"actual_${test_id}"}, ["h3", {}, "Actual"], + ["pre", {}, ["code", {}, actual_text]]] + ]; + + var diff_dom = template.render(tmpl, {test_id:test_id, container:container}); + document.body.appendChild(diff_dom); +} + +function runTests(tests) { + tests.forEach(function(test){ + var expected = decodeURIComponent(test.expected); + var t = async_test(document.title + ' - ' + test.name); + t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track not supported'); + t.test_id = test.name; + t.url_encoded_input = test.input; + t.expected = expected; + var track_blob = new Blob(['WEBVTT\n\n00:00.000 --> 00:01.000\n', + decodeURIComponent(test.input)], + { type: 'text/vtt' }); + var track_url = URL.createObjectURL(track_blob);; + track.src = track_url; + t.add_cleanup(function() { + URL.revokeObjectURL(track_url); + }); + track['default'] = true; + track.kind = 'subtitles'; + track.onload = t.step_func(trackLoaded); + track.onerror = t.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); + }); + }); +} + +function trackLoaded(e) { + var track = e.target; + setTimeout(removeElm, 0, track.parentNode); + var cue = track.track.cues[0]; + var frag = cue.getCueAsHTML(); + var got = test_serializer(frag); + if (got !== this.expected) { + print_diffs(this.test_id, this.url_encoded_input, this.expected, got); + } + assert_equals(got, this.expected); + this.done(); +} + +function trackError(e) { + setTimeout(removeElm, 0, e.target.parentNode); + assert_unreached('got error event'); + this.done(); +} + +function removeElm(elm) { + document.body.removeChild(elm); +} diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/entities.dat b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/entities.dat new file mode 100644 index 0000000000..6522e3f5b8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/entities.dat @@ -0,0 +1,150 @@ +#data +& +#errors +#document-fragment +| "&" + +#data +& +#errors +#document-fragment +| "&" + +#data +& +#errors +#document-fragment +| "&" + +#data +& +#errors +#document-fragment +| "&" + +#data +< +#errors +#document-fragment +| "<" + +#data +> +#errors +#document-fragment +| ">" + +#data +a‎b +#errors +#document-fragment +| "a\u200Eb" + +#data +a‏b +#errors +#document-fragment +| "a\u200Fb" + +#data +" +#errors +#document-fragment +| "\u0022" + +#data + +#errors +#document-fragment +| "\u00A0" + +#data +© +#errors +#document-fragment +| "\u00A9" + +#data +&& +#errors +#document-fragment +| "&&" + +#data +&1 +#errors +#document-fragment +| "&1" + +#data +&1; +#errors +#document-fragment +| "&1;" + +#data +&< +#errors +#document-fragment +| "&" + +#data +&<c +#errors +#document-fragment +| "&" +| <span> + +#data +  +#errors +#document-fragment +| " " + +#data +  +#errors +#document-fragment +| " " + +#data +&; +#errors +#document-fragment +| "&;" + +#data +∲ +#errors +#document-fragment +| "\u2232" + +#data +⫅̸ +#errors +#document-fragment +| "\u2AC5\u0338" + +#data +∉ +#errors +#document-fragment +| "\u2209" + +#data +¬ +#errors +#document-fragment +| "\u00AC" + +#data +¬ +#errors +#document-fragment +| "\u00AC" + +#data +¬it; +#errors +#document-fragment +| "\u00ACit;" diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/tags.dat b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/tags.dat new file mode 100644 index 0000000000..0ef77a09a1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/tags.dat @@ -0,0 +1,214 @@ +#data +< +#errors +#document-fragment + +#data +<< +#errors +#document-fragment + +#data +<\t +#errors +#document-fragment + +#data +<\n +#errors +#document-fragment + +#data +<\x20 +#errors +#document-fragment + +#data +<. +#errors +#document-fragment + +#data +<c. +#errors +#document-fragment +| <span> + +#data +</ +#errors +#document-fragment + +#data +<c></>x +#errors +#document-fragment +| <span> +| "x" + +#data +<c></ +c>x +#errors +#document-fragment +| <span> +| "x" + +#data +<c>test +#errors +#document-fragment +| <span> +| "test" + +#data +a<c.d e>b</c>c +#errors +#document-fragment +| "a" +| <span> +| class="d" +| "b" +| "c" + +#data +<i>test +#errors +#document-fragment +| <i> +| "test" + +#data +a<i.d e>b</i>c +#errors +#document-fragment +| "a" +| <i> +| class="d" +| "b" +| "c" + +#data +<b>test +#errors +#document-fragment +| <b> +| "test" + +#data +a<b.d e>b</b>c +#errors +#document-fragment +| "a" +| <b> +| class="d" +| "b" +| "c" + +#data +<u>test +#errors +#document-fragment +| <u> +| "test" + +#data +a<u.d e>b</u>c +#errors +#document-fragment +| "a" +| <u> +| class="d" +| "b" +| "c" + +#data +<ruby>test +#errors +#document-fragment +| <ruby> +| "test" + +#data +a<ruby.f g>b<rt.h j>c</rt>d</ruby>e +#errors +#document-fragment +| "a" +| <ruby> +| class="f" +| "b" +| <rt> +| class="h" +| "c" +| "d" +| "e" + +#data +<rt>test +#errors +#document-fragment +| "test" + +#data +<v>test +#errors +#document-fragment +| <span> +| title="" +| "test" + +#data +<v a>test +#errors +#document-fragment +| <span> +| title="a" +| "test" + +#data +<v a b>test +#errors +#document-fragment +| <span> +| title="a b" +| "test" + +#data +<v.a>test +#errors +#document-fragment +| <span> +| class="a" +| title="" +| "test" + +#data +<v.a.b>test +#errors +#document-fragment +| <span> +| class="a b" +| title="" +| "test" + +#data +a<v.d e>b</v>c +#errors +#document-fragment +| "a" +| <span> +| class="d" +| title="e" +| "b" +| "c" + +#data +a<lang.d e>b</lang>c +#errors +#document-fragment +| "a" +| <span> +| class="d" +| lang="e" +| "b" +| "c" diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/text.dat b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/text.dat new file mode 100644 index 0000000000..e4129a2ec9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/text.dat @@ -0,0 +1,29 @@ +#data +text +#errors +#document-fragment +| "text" + +#data +text1\ntext2 +#errors +#document-fragment +| "text1\ntext2" + +#data +foo\x00bar +#errors +#document-fragment +| "foo\uFFFDbar" + +#data +\u2713 +#errors +#document-fragment +| "\u2713" + +#data +text1\n\ntext2 +#errors +#document-fragment +| "text1" diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/timestamps.dat b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/timestamps.dat new file mode 100644 index 0000000000..a3aea9af6c --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/timestamps.dat @@ -0,0 +1,63 @@ +#data +<0 +#errors +#document-fragment + +#data +<0.500 +#errors +#document-fragment + +#data +<0:00.500 +#errors +#document-fragment + +#data +<00:\x0000:00.500> +#errors +#document-fragment + +#data +<00:00.500 +#errors +#document-fragment +| <?timestamp 00:00:00.500> + +#data +<00:00:00.500 +#errors +#document-fragment +| <?timestamp 00:00:00.500> + +#data +test<00:00:00.500>test +#errors +#document-fragment +| "test" +| <?timestamp 00:00:00.500> +| "test" + +#data +test<01:00:00.000>test +#errors +#document-fragment +| "test" +| <?timestamp 01:00:00.000> +| "test" + +#data +test<10:00:00.000>test +#errors +#document-fragment +| "test" +| <?timestamp 10:00:00.000> +| "test" + +#data +test<100:00:00.000>test +#errors +#document-fragment +| "test" +| <?timestamp 100:00:00.000> +| "test" diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/tree-building.dat b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/tree-building.dat new file mode 100644 index 0000000000..48d7ab20bf --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/dat/tree-building.dat @@ -0,0 +1,88 @@ +#data +test +#errors +#document-fragment +| "test" + +#data +<ruby>test<rt>test +#errors +#document-fragment +| <ruby> +| "test" +| <rt> +| "test" + +#data +<ruby>test<rt>test</rt>test +#errors +#document-fragment +| <ruby> +| "test" +| <rt> +| "test" +| "test" + +#data +<ruby>test<rt>test</rt></ruby>test +#errors +#document-fragment +| <ruby> +| "test" +| <rt> +| "test" +| "test" + +#data +<ruby>test<rt>test</ruby>test +#errors +#document-fragment +| <ruby> +| "test" +| <rt> +| "test" +| "test" + +#data +<ruby>test<rt><b>test</rt></ruby>test +#errors +#document-fragment +| <ruby> +| "test" +| <rt> +| <b> +| "test" +| "test" + +#data +<ruby>test<rt><b>test</ruby>test +#errors +#document-fragment +| <ruby> +| "test" +| <rt> +| <b> +| "test" +| "test" + +#data +<ruby>test<rt><b>test</rt></ruby></b>test +#errors +#document-fragment +| <ruby> +| "test" +| <rt> +| <b> +| "test" +| "test" + +#data +<ruby>test<rt><b>test</rt></b></ruby>test +#errors +#document-fragment +| <ruby> +| "test" +| <rt> +| <b> +| "test" +| "test" diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/entities.html b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/entities.html new file mode 100644 index 0000000000..dbae784de1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/entities.html @@ -0,0 +1,39 @@ +<!doctype html> +<title>WebVTT cue data parser test entities</title> +<link rel="help" href="https://w3c.github.io/webvtt/#cue-text-parsing-rules"> +<style>video { display:none }</style> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src=/html/syntax/parsing/template.js></script> +<script src=/html/syntax/parsing/common.js></script> +<script src=../common.js></script> +<div id=log></div> +<script> +runTests([ +{name:'3686fc0cdc60dc536e75df054b0bd372273db2cc', input:'%26', expected:'%23document-fragment%0A%7C%20%22%26%22'}, +{name:'f1869f6e2853635eec81cc3afa3e2b8148ccbdc0', input:'%26amp', expected:'%23document-fragment%0A%7C%20%22%26%22'}, +{name:'92d76530d723b6b4e4ef8280c01cf1c80f9bebdb', input:'%26amp%3B', expected:'%23document-fragment%0A%7C%20%22%26%22'}, +{name:'261cd4e9df4a12535b66a0c39e9635aab2bb19aa', input:'%26AMP%3B', expected:'%23document-fragment%0A%7C%20%22%26%22'}, +{name:'1a2269cdb73bf97ec6a99b0edabfe646c471b67e', input:'%26lt%3B', expected:'%23document-fragment%0A%7C%20%22%3C%22'}, +{name:'44ceb90884cceeeccb4f7024e3598f7dc5ceebfa', input:'%26gt%3B', expected:'%23document-fragment%0A%7C%20%22%3E%22'}, +{name:'05def72af03fc2b1617da950d871b9fd0ba20e5a', input:'a%26lrm%3Bb', expected:'%23document-fragment%0A%7C%20%22a%E2%80%8Eb%22'}, +{name:'da999a55445eca43aa41e039ec439c1a812db297', input:'a%26rlm%3Bb', expected:'%23document-fragment%0A%7C%20%22a%E2%80%8Fb%22'}, +{name:'0fd9e3823b62c028c1d50e35b1f3ee3df02a62eb', input:'%26quot%3B', expected:'%23document-fragment%0A%7C%20%22%22%22'}, +{name:'e7387003fbacb22b706796c98b781eb4ebf5ff85', input:'%26nbsp%3B', expected:'%23document-fragment%0A%7C%20%22%C2%A0%22'}, +{name:'216cd0e914b9f2ccd04eff6d02a0b1ce24441d95', input:'%26copy%3B', expected:'%23document-fragment%0A%7C%20%22%C2%A9%22'}, +{name:'2cdf20980d17a5d077299215e6a7e97f3c6b07e2', input:'%26%26', expected:'%23document-fragment%0A%7C%20%22%26%26%22'}, +{name:'83f4500c0bd8598480713997a041d8f70fd3f11e', input:'%261', expected:'%23document-fragment%0A%7C%20%22%261%22'}, +{name:'2c6b2ba38a08eca45370f28a5b7df2aa463fb3dc', input:'%261%3B', expected:'%23document-fragment%0A%7C%20%22%261%3B%22'}, +{name:'f4bb977c0a06851bdd19260c035a766c5c8ea093', input:'%26%3C', expected:'%23document-fragment%0A%7C%20%22%26%22'}, +{name:'b1fff1ac42688d16e00f6c758d84e5152e39702d', input:'%26%3Cc', expected:'%23document-fragment%0A%7C%20%22%26%22%0A%7C%20%3Cspan%3E'}, +{name:'bd68f6beda2c2264e61dff7359c1ad48bc0a9934', input:'%26%2332%3B', expected:'%23document-fragment%0A%7C%20%22%20%22'}, +{name:'5b77a0be23453dfe6eea59d43bb0708f89e1df82', input:'%26%23x20%3B', expected:'%23document-fragment%0A%7C%20%22%20%22'}, +{name:'87986551b0e6180cb279f2aa4cdddf77daa90c11', input:'%26%3B', expected:'%23document-fragment%0A%7C%20%22%26%3B%22'}, +{name:'e3ac2060b915f0f499b2863f999dcdb38a5db79b', input:'%26ClockwiseContourIntegral%3B', expected:'%23document-fragment%0A%7C%20%22%E2%88%B2%22'}, +{name:'31c8a5ecfa5c54d8c0ec5b4ee8f0bbea0d6d40af', input:'%26nsubE%3B', expected:'%23document-fragment%0A%7C%20%22%E2%AB%85%CC%B8%22'}, +{name:'9ed59950764468c4ef2948d71cf75c3f2b60c74d', input:'%26notin%3B', expected:'%23document-fragment%0A%7C%20%22%E2%88%89%22'}, +{name:'71a6efcfab81264fb95bb3234c59687c11c72baf', input:'%26not%3B', expected:'%23document-fragment%0A%7C%20%22%C2%AC%22'}, +{name:'86d7c20ca3c060f9e699c7da43927c4a07a5d569', input:'%26not', expected:'%23document-fragment%0A%7C%20%22%C2%AC%22'}, +{name:'314cd94292df37044e90ce27b5606bf8ec636b94', input:'%26notit%3B', expected:'%23document-fragment%0A%7C%20%22%C2%ACit%3B%22'} +]); +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/tags.html b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/tags.html new file mode 100644 index 0000000000..c624320f2b --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/tags.html @@ -0,0 +1,42 @@ +<!doctype html> +<title>WebVTT cue data parser test tags</title> +<link rel="help" href="https://w3c.github.io/webvtt/#cue-text-parsing-rules"> +<style>video { display:none }</style> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src=/html/syntax/parsing/template.js></script> +<script src=/html/syntax/parsing/common.js></script> +<script src=../common.js></script> +<div id=log></div> +<script> +runTests([ +{name:'d49e42f7582c6f00b2569f2d14629611c0c6b0e6', input:'%3C', expected:'%23document-fragment'}, +{name:'9dd187edd10c907e6b92148fd82940e401dbe79f', input:'%3C%3C', expected:'%23document-fragment'}, +{name:'2d2c4333983e23a4962083e8120e5d42c839f77b', input:'%3C%09', expected:'%23document-fragment'}, +{name:'94f898df44b470e2d05d74c6816fd908e55c9fdf', input:'%3C%0A', expected:'%23document-fragment'}, +{name:'2fdc1b84ba41ec98833851e80781df1fbe72182f', input:'%3C%20', expected:'%23document-fragment'}, +{name:'487690a6f5da4666f9caaf3a3ecc10992aca1414', input:'%3C.', expected:'%23document-fragment'}, +{name:'0d7df935b172f2a1b357b94596d68f2443f30f8b', input:'%3Cc.', expected:'%23document-fragment%0A%7C%20%3Cspan%3E'}, +{name:'cd1d6dd274e03ae8fc56bc4ef163998d9ff24496', input:'%3C/', expected:'%23document-fragment'}, +{name:'fca1a11d42b735453117f42456360e88082a3fd7', input:'%3Cc%3E%3C/%3Ex', expected:'%23document-fragment%0A%7C%20%3Cspan%3E%0A%7C%20%20%20%22x%22'}, +{name:'fe3b6277edf5c2f84e7a6779eddd0cac30552bca', input:'%3Cc%3E%3C/%0Ac%3Ex', expected:'%23document-fragment%0A%7C%20%3Cspan%3E%0A%7C%20%20%20%22x%22'}, +{name:'6ceded63b53eeab3681a0fc540e959ca88f7dce9', input:'%3Cc%3Etest', expected:'%23document-fragment%0A%7C%20%3Cspan%3E%0A%7C%20%20%20%22test%22'}, +{name:'cdcdb0d5d6a975c5612eabcbea5d732ff3bc9f56', input:'a%3Cc.d%20e%3Eb%3C/c%3Ec', expected:'%23document-fragment%0A%7C%20%22a%22%0A%7C%20%3Cspan%3E%0A%7C%20%20%20class%3D%22d%22%0A%7C%20%20%20%22b%22%0A%7C%20%22c%22'}, +{name:'71de37451e7d5524eacc8a190d21cd64c4304e14', input:'%3Ci%3Etest', expected:'%23document-fragment%0A%7C%20%3Ci%3E%0A%7C%20%20%20%22test%22'}, +{name:'70f72cc4d2139d9e8c33189a1a9b89ecd6014a15', input:'a%3Ci.d%20e%3Eb%3C/i%3Ec', expected:'%23document-fragment%0A%7C%20%22a%22%0A%7C%20%3Ci%3E%0A%7C%20%20%20class%3D%22d%22%0A%7C%20%20%20%22b%22%0A%7C%20%22c%22'}, +{name:'985284b688a09f1f55e3c9aab49d7e4ca11f870a', input:'%3Cb%3Etest', expected:'%23document-fragment%0A%7C%20%3Cb%3E%0A%7C%20%20%20%22test%22'}, +{name:'39c36af6d6850bc474f1d9962c1133933fd50dd0', input:'a%3Cb.d%20e%3Eb%3C/b%3Ec', expected:'%23document-fragment%0A%7C%20%22a%22%0A%7C%20%3Cb%3E%0A%7C%20%20%20class%3D%22d%22%0A%7C%20%20%20%22b%22%0A%7C%20%22c%22'}, +{name:'fa6993eaa94404648d8b52e2830e53369404fdcb', input:'%3Cu%3Etest', expected:'%23document-fragment%0A%7C%20%3Cu%3E%0A%7C%20%20%20%22test%22'}, +{name:'45221829445210412642152bfb22fa2ed222d46e', input:'a%3Cu.d%20e%3Eb%3C/u%3Ec', expected:'%23document-fragment%0A%7C%20%22a%22%0A%7C%20%3Cu%3E%0A%7C%20%20%20class%3D%22d%22%0A%7C%20%20%20%22b%22%0A%7C%20%22c%22'}, +{name:'e4d351e1a6b40a7dace801b722efaa200c4895f2', input:'%3Cruby%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22'}, +{name:'a8481eabd1dcac1d02e57e74d499e2395ac171cd', input:'a%3Cruby.f%20g%3Eb%3Crt.h%20j%3Ec%3C/rt%3Ed%3C/ruby%3Ee', expected:'%23document-fragment%0A%7C%20%22a%22%0A%7C%20%3Cruby%3E%0A%7C%20%20%20class%3D%22f%22%0A%7C%20%20%20%22b%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20class%3D%22h%22%0A%7C%20%20%20%20%20%22c%22%0A%7C%20%20%20%22d%22%0A%7C%20%22e%22'}, +{name:'68e1d0376f827ebe0c047751a2067594ff41b612', input:'%3Crt%3Etest', expected:'%23document-fragment%0A%7C%20%22test%22'}, +{name:'ab2024b4e65ed64a751adbe8aae1e84ee61bf3e6', input:'%3Cv%3Etest', expected:'%23document-fragment%0A%7C%20%3Cspan%3E%0A%7C%20%20%20title%3D%22%22%0A%7C%20%20%20%22test%22'}, +{name:'10f4823ffb17c71654c4602bc45c58300e3ecbcc', input:'%3Cv%20a%3Etest', expected:'%23document-fragment%0A%7C%20%3Cspan%3E%0A%7C%20%20%20title%3D%22a%22%0A%7C%20%20%20%22test%22'}, +{name:'909924ef392fb20c9526acfa4f18f891eda61a0c', input:'%3Cv%20a%20b%3Etest', expected:'%23document-fragment%0A%7C%20%3Cspan%3E%0A%7C%20%20%20title%3D%22a%20b%22%0A%7C%20%20%20%22test%22'}, +{name:'e5ca35cc29404efc0ebd58aa5f6efefc86fc5287', input:'%3Cv.a%3Etest', expected:'%23document-fragment%0A%7C%20%3Cspan%3E%0A%7C%20%20%20class%3D%22a%22%0A%7C%20%20%20title%3D%22%22%0A%7C%20%20%20%22test%22'}, +{name:'e535c486dac7dc571463b150adc55fd841bc3008', input:'%3Cv.a.b%3Etest', expected:'%23document-fragment%0A%7C%20%3Cspan%3E%0A%7C%20%20%20class%3D%22a%20b%22%0A%7C%20%20%20title%3D%22%22%0A%7C%20%20%20%22test%22'}, +{name:'bb7abafab60a0ea63f57420759fac4093148ecc8', input:'a%3Cv.d%20e%3Eb%3C/v%3Ec', expected:'%23document-fragment%0A%7C%20%22a%22%0A%7C%20%3Cspan%3E%0A%7C%20%20%20class%3D%22d%22%0A%7C%20%20%20title%3D%22e%22%0A%7C%20%20%20%22b%22%0A%7C%20%22c%22'}, +{name:'b53365151e0b2434837d6cce15c3d51e666a813e', input:'a%3Clang.d%20e%3Eb%3C/lang%3Ec', expected:'%23document-fragment%0A%7C%20%22a%22%0A%7C%20%3Cspan%3E%0A%7C%20%20%20class%3D%22d%22%0A%7C%20%20%20lang%3D%22e%22%0A%7C%20%20%20%22b%22%0A%7C%20%22c%22'} +]); +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/text.html b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/text.html new file mode 100644 index 0000000000..f7241a5c15 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/text.html @@ -0,0 +1,19 @@ +<!doctype html> +<title>WebVTT cue data parser test text</title> +<link rel="help" href="https://w3c.github.io/webvtt/#cue-text-parsing-rules"> +<style>video { display:none }</style> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src=/html/syntax/parsing/template.js></script> +<script src=/html/syntax/parsing/common.js></script> +<script src=../common.js></script> +<div id=log></div> +<script> +runTests([ +{name:'aa785adca3fcdfe1884ae840e13c6d294a2414e8', input:'text', expected:'%23document-fragment%0A%7C%20%22text%22'}, +{name:'3979f3c0c7664ee8a9f78854626bc7bc39b86c96', input:'text1%0Atext2', expected:'%23document-fragment%0A%7C%20%22text1%0Atext2%22'}, +{name:'6805ac5ddce21cfceb4eccf04a6a9013760f5d5b', input:'foo%00bar', expected:'%23document-fragment%0A%7C%20%22foo%EF%BF%BDbar%22'}, +{name:'5cfbdbe32701516fc90c3786da1db4716ac09fb8', input:'%E2%9C%93', expected:'%23document-fragment%0A%7C%20%22%E2%9C%93%22'}, +{name:'a34d27ca7b23f07db6ec2e32226fca105e958db6', input:'text1%0A%0Atext2', expected:'%23document-fragment%0A%7C%20%22text1%22'} +]); +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/timestamps.html b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/timestamps.html new file mode 100644 index 0000000000..1739d96367 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/timestamps.html @@ -0,0 +1,24 @@ +<!doctype html> +<title>WebVTT cue data parser test timestamps</title> +<link rel="help" href="https://w3c.github.io/webvtt/#cue-text-parsing-rules"> +<style>video { display:none }</style> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src=/html/syntax/parsing/template.js></script> +<script src=/html/syntax/parsing/common.js></script> +<script src=../common.js></script> +<div id=log></div> +<script> +runTests([ +{name:'54c245f3fbe7a3e25398b13971d44f2bb3a5f947', input:'%3C0', expected:'%23document-fragment'}, +{name:'5e190a1b4541fcb10e403af111c14ef152fecb0d', input:'%3C0.500', expected:'%23document-fragment'}, +{name:'92b97d3497836259e0b9305e27f2b91ea1dc9b31', input:'%3C0%3A00.500', expected:'%23document-fragment'}, +{name:'2f0e84518d356cb1e56a366296fa491c5bed1e3a', input:'%3C00%3A%0000%3A00.500%3E', expected:'%23document-fragment'}, +{name:'47fa4306a695161da88533d456ce94829e53b13d', input:'%3C00%3A00.500', expected:'%23document-fragment%0A%7C%20%3C%3Ftimestamp%2000%3A00%3A00.500%3E'}, +{name:'c1036a4322c1852e02e5a1843a9a81dfca6d7af3', input:'%3C00%3A00%3A00.500', expected:'%23document-fragment%0A%7C%20%3C%3Ftimestamp%2000%3A00%3A00.500%3E'}, +{name:'70ec34d828ca661a583c651207becb968bb41653', input:'test%3C00%3A00%3A00.500%3Etest', expected:'%23document-fragment%0A%7C%20%22test%22%0A%7C%20%3C%3Ftimestamp%2000%3A00%3A00.500%3E%0A%7C%20%22test%22'}, +{name:'66ba641ff047a226fa60fe867fd2479d40f3ff0f', input:'test%3C01%3A00%3A00.000%3Etest', expected:'%23document-fragment%0A%7C%20%22test%22%0A%7C%20%3C%3Ftimestamp%2001%3A00%3A00.000%3E%0A%7C%20%22test%22'}, +{name:'398e8da1aaaf392739ca72057fef58bd5333f74d', input:'test%3C10%3A00%3A00.000%3Etest', expected:'%23document-fragment%0A%7C%20%22test%22%0A%7C%20%3C%3Ftimestamp%2010%3A00%3A00.000%3E%0A%7C%20%22test%22'}, +{name:'391fce67644cf4dd9967e1436d1449ef5baf675f', input:'test%3C100%3A00%3A00.000%3Etest', expected:'%23document-fragment%0A%7C%20%22test%22%0A%7C%20%3C%3Ftimestamp%20100%3A00%3A00.000%3E%0A%7C%20%22test%22'} +]); +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/tree-building.html b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/tree-building.html new file mode 100644 index 0000000000..6cd617dece --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/cue-text-parsing/tests/tree-building.html @@ -0,0 +1,23 @@ +<!doctype html> +<title>WebVTT cue data parser test tree-building</title> +<link rel="help" href="https://w3c.github.io/webvtt/#cue-text-parsing-rules"> +<style>video { display:none }</style> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src=/html/syntax/parsing/template.js></script> +<script src=/html/syntax/parsing/common.js></script> +<script src=../common.js></script> +<div id=log></div> +<script> +runTests([ +{name:'4e1243bd22c66e76c2ba9eddc1f91394e57f9f83', input:'test', expected:'%23document-fragment%0A%7C%20%22test%22'}, +{name:'2564487cfc7e317428fb437ef8de8de4f4963426', input:'%3Cruby%3Etest%3Crt%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20%22test%22'}, +{name:'9b1902c975558eeaff4afbaf0a6dc100e1978769', input:'%3Cruby%3Etest%3Crt%3Etest%3C/rt%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20%22test%22%0A%7C%20%20%20%22test%22'}, +{name:'119c596ea09649d3bd03934485e3067e89377412', input:'%3Cruby%3Etest%3Crt%3Etest%3C/rt%3E%3C/ruby%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20%22test%22%0A%7C%20%22test%22'}, +{name:'c94512b045699cb72f730e46b2a0a3bed2c939f9', input:'%3Cruby%3Etest%3Crt%3Etest%3C/ruby%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20%22test%22%0A%7C%20%22test%22'}, +{name:'325c1e590e74f1ff33ca5b4838c04cf6b6dd71ba', input:'%3Cruby%3Etest%3Crt%3E%3Cb%3Etest%3C/rt%3E%3C/ruby%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20%3Cb%3E%0A%7C%20%20%20%20%20%20%20%22test%22%0A%7C%20%20%20%20%20%20%20%22test%22'}, +{name:'92847ed2694c9639ba96f4cc61e2215362a74904', input:'%3Cruby%3Etest%3Crt%3E%3Cb%3Etest%3C/ruby%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20%3Cb%3E%0A%7C%20%20%20%20%20%20%20%22test%22%0A%7C%20%20%20%20%20%20%20%22test%22'}, +{name:'c0da62d1c8716ca544c96799f06ac7e4664500fb', input:'%3Cruby%3Etest%3Crt%3E%3Cb%3Etest%3C/rt%3E%3C/ruby%3E%3C/b%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20%3Cb%3E%0A%7C%20%20%20%20%20%20%20%22test%22%0A%7C%20%20%20%20%20%22test%22'}, +{name:'b85bd616672eba0591718182ef32e3307d223bb0', input:'%3Cruby%3Etest%3Crt%3E%3Cb%3Etest%3C/rt%3E%3C/b%3E%3C/ruby%3Etest', expected:'%23document-fragment%0A%7C%20%3Cruby%3E%0A%7C%20%20%20%22test%22%0A%7C%20%20%20%3Crt%3E%0A%7C%20%20%20%20%20%3Cb%3E%0A%7C%20%20%20%20%20%20%20%22test%22%0A%7C%20%22test%22'} +]); +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/README.md b/testing/web-platform/tests/webvtt/parsing/file-parsing/README.md new file mode 100644 index 0000000000..4cff0af952 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/README.md @@ -0,0 +1,52 @@ +# Tests for http://w3c.github.io/webvtt/#file-parsing + +Tests that expect an 'error' event (due to invalid signature) are: + +```bash +./signature-invalid.html +./support/*.vtt +``` + +Other tests are generated from source files with a custom format. The source files are: + +```bash +./support/*.test +``` + +## .test Format + +* The first line is the title of the test. +* Subsequent lines until a blank line contain HTML metadata. +* Subsequent lines until a `===` line contains JS assertions. +* Finally the WebVTT file. Special characters can be escaped using python3 escape sequences: `\x00`, `\r`. + +## Building Tests + +Requirements: Python 3.2 or newer + +```bash +$ python3 tools/build.py +``` + +## Spec Coverage Report + +There is also a python implementation of the WebVTT file parser algorithm and a +script to create a test coverage report of this implementation, under `tools/`. + +Requirements: +* Python 3.2 or newer +* [Coverage.py](https://pypi.python.org/pypi/coverage) + +Installing Coverage.py using [pip](https://pypi.python.org/pypi/pip). + +```bash +$ pip3 install coverage +``` + +Generating the report: + +```bash +$ python3 spec_report.py +``` + +Will output `report.html`. diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/categories.json b/testing/web-platform/tests/webvtt/parsing/file-parsing/categories.json new file mode 100644 index 0000000000..e78106cee1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/categories.json @@ -0,0 +1,6 @@ +{ + ":categories": [ + ["file-parsing", "cue-text-parsing"] + ], + ":subcategories": ["tests/categories.json"] +} diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/signature-invalid.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/signature-invalid.html new file mode 100644 index 0000000000..62ee90828f --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/signature-invalid.html @@ -0,0 +1,49 @@ +<!doctype html> +<title>WebVTT parser test: invalid signatures</title> +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +[ + // Alphabetical order, by file + ['empty', 'empty.vtt'], + ['formfeed', 'signature-formfeed.vtt'], + ['invalid whitespace', 'signature-invalid-whitespace.vtt'], + ['invalid', 'signature-invalid.vtt'], + ['lowercase', 'signature-lowercase.vtt'], + ['missing whitespace', 'signature-missing-whitespace.vtt'], + ['missing', 'signature-missing.vtt'], + ['null', 'signature-null.vtt'], + ['partial', 'signature-partial.vtt'], + ['two boms', 'signature-two-boms.vtt'], + ['websrt', 'signature-websrt.vtt'], +].forEach(function(test_data) { + var test_name = 'signature, ' + test_data[0]; + var test_file = 'support/' + test_data[1]; + + var test = async_test(test_name); + test.step(function() { + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = test_file; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); + }); + + function trackLoaded(event) { + assert_unreached('track should fail to load'); + this.done(); + } + + function trackError(e) { + this.done(); + } +}); +done(); +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/arrows.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/arrows.test new file mode 100644 index 0000000000..72207a2417 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/arrows.test @@ -0,0 +1,38 @@ +arrows +<link rel="help" href="https://w3c.github.io/webvtt/#cue-timings-and-settings-parsing"> + +assert_equals(cues.length, 6); + +for (var i = 0; i < cues.length; i++) { + assert_equals(cues[i].id, '', 'Failed with cue ' + i); + assert_equals(cues[i].text, 'text' + i, 'Failed with cue ' + i); +} + +=== +WEBVTT + +--> +00:00:00.000 --> 00:00:01.000 +text0 +foo--> +00:00:00.000 --> 00:00:01.000 +text1 +-->foo +00:00:00.000 --> 00:00:01.000 +text2 +---> +00:00:00.000 --> 00:00:01.000 +text3 +-->--> +00:00:00.000 --> 00:00:01.000 +text4 +00:00:00.000 --> 00:00:01.000 +text5 + +00:00:00.000 -a --> + +00:00:00.000 --a --> + +00:00:00.000 - --> + +00:00:00.000 -- --> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/comment-in-cue-text.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/comment-in-cue-text.test new file mode 100644 index 0000000000..38e4b9f16e --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/comment-in-cue-text.test @@ -0,0 +1,28 @@ +comment-in-cue-text +<link rel="help" href="https://www.w3.org/TR/webvtt1/#introduction-comments"> + +assert_equals(cues.length, 2); + +assert_equals(cues[0].text, 'NOTE text'); +assert_equals(cues[0].startTime, 0); +assert_equals(cues[0].endTime, 1); + +assert_equals(cues[1].text, 'NOTE text\nNOTE text2'); +assert_equals(cues[1].startTime, 1); +assert_equals(cues[1].endTime, 2); + +=== +WEBVTT + +NOTE this is real comment that should be ignored + +00:00:00.000 --> 00:00:01.000 +NOTE text + +NOTE +this is also a real comment that should be ignored +this is also a real comment that should be ignored + +00:00:01.000 --> 00:00:02.000 +NOTE text +NOTE text2 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/empty.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/empty.vtt new file mode 100644 index 0000000000..e69de29bb2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/empty.vtt diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-garbage.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-garbage.test new file mode 100644 index 0000000000..a8714aae91 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-garbage.test @@ -0,0 +1,15 @@ +header, garbage +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block"> + +assert_equals(cues.length, 1); + +assert_equals(cues[0].text, 'text'); +assert_equals(cues[0].startTime, 0); +assert_equals(cues[0].endTime, 1); + +=== +WEBVTT +foobar + +00:00:00.000 --> 00:00:01.000 +text
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-space.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-space.test new file mode 100644 index 0000000000..3b2fa7dc90 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-space.test @@ -0,0 +1,14 @@ +header, space +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block"> + +assert_equals(cues.length, 1); + +assert_equals(cues[0].text, 'text'); +assert_equals(cues[0].startTime, 0); +assert_equals(cues[0].endTime, 1); + +=== +WEBVTT +\x20 +00:00:00.000 --> 00:00:01.000 +text
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-tab.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-tab.test new file mode 100644 index 0000000000..91892d614a --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-tab.test @@ -0,0 +1,14 @@ +header, tab +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block"> + +assert_equals(cues.length, 1); + +assert_equals(cues[0].text, 'text'); +assert_equals(cues[0].startTime, 0); +assert_equals(cues[0].endTime, 1); + +=== +WEBVTT +\t +00:00:00.000 --> 00:00:01.000 +text diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-timings.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-timings.test new file mode 100644 index 0000000000..c3348e43f8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/header-timings.test @@ -0,0 +1,13 @@ +header, timings +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block"> + +assert_equals(cues.length, 1); + +assert_equals(cues[0].text, 'text'); +assert_equals(cues[0].startTime, 0); +assert_equals(cues[0].endTime, 1); + +=== +WEBVTT +00:00:00.000 --> 00:00:01.000 +text
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/ids.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/ids.test new file mode 100644 index 0000000000..135f1c6abc --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/ids.test @@ -0,0 +1,32 @@ +ids +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block"> + +assert_equals(cues.length, 5); +assert_equals(cues[0].id, " leading space"); +assert_equals(cues[1].id, "trailing space "); +assert_equals(cues[2].id, "-- >"); +assert_equals(cues[3].id, "->"); +assert_equals(cues[4].id, " "); + +=== +WEBVTT + +\x20leading space +00:00:00.000 --> 00:00:01.000 +text0 + +trailing space\x20 +00:00:00.000 --> 00:00:01.000 +text1 + +-- > +00:00:00.000 --> 00:00:01.000 +text2 + +-> +00:00:00.000 --> 00:00:01.000 +text3 + +\x20 +00:00:00.000 --> 00:00:01.000 +text4 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/newlines.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/newlines.test new file mode 100644 index 0000000000..2d10536b68 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/newlines.test @@ -0,0 +1,36 @@ +newlines +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> + +assert_equals(cues.length, 4); + +assert_equals(cues[0].id, "cr"); +assert_equals(cues[0].text, "text0"); + +assert_equals(cues[1].id, "lf"); +assert_equals(cues[1].text, "text1"); + +assert_equals(cues[2].id, "crlf"); +assert_equals(cues[2].text, "text2"); + +assert_equals(cues[3].id, "lfcr"); +assert_equals(cues[3].text, "text3"); + +=== +WEBVTT\r\ +\r\ +cr\r\ +00:00:00.000 --> 00:00:01.000\r\ +text0\n\ +\n\ +lf\n\ +00:00:00.000 --> 00:00:01.000\n\ +text1\r\n\ +\r\n\ +crlf\r\n\ +00:00:00.000 --> 00:00:01.000\r\n\ +text2\n\ +\r\ +lfcr\r\ +00:00:00.000 --> 00:00:01.000\n\ +text3\n\ +\r diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/nulls.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/nulls.test new file mode 100644 index 0000000000..02450ce5c4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/nulls.test @@ -0,0 +1,232 @@ +nulls +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> + +assert_equals(cues.length, 7, cues); + +assert_equals(cues[0].id, ""); +assert_equals(cues[0].text, "text0"); + +assert_equals(cues[1].id, "\uFFFD (null in id)"); +assert_equals(cues[1].text, "text1"); + +assert_equals(cues[2].id, "\uFFFD (null in cue data)"); +assert_equals(cues[2].text, "\uFFFDtext\uFFFD2"); + +assert_equals(cues[3].align, "center"); +assert_equals(cues[3].text, "text3"); + +assert_equals(cues[4].align, "center"); +assert_equals(cues[4].text, "text4"); + +assert_equals(cues[5].align, "center"); +assert_equals(cues[5].text, "text5"); + +assert_equals(cues[6].align, "end"); +assert_equals(cues[6].text, "text6"); + +=== +WEBVTT +\x00 +(null in previous line should make this line also part of the header) +00:00:00.000 --> 00:00:01.000 +text0 + +\x00 (null in id) +00:00:00.000 --> 00:00:01.000 +text1 + +\uFFFD (null in cue data) +00:00:00.000 --> 00:00:01.000 +\uFFFDtext\x002 + +00:00:00.000 --> 00:00:01.000 align\x00:end +text3 + +00:00:00.000 --> 00:00:01.000 align:end\x00 +text4 + +00:00:00.000 --> 00:00:01.000\x00align:end +text5 + +00:00:00.000 --> 00:00:01.000\x00 align:end +text6 + +00:00:00.000\x00 --> 00:00:01.000 +invalid + +00:00:00.000 -->\x0000:00:01.000 +invalid + +\x0000:00:00.000 --> 00:00:01.000 +invalid + +0\x000:00:00.000 --> 00:00:01.000 +invalid + +00\x00:00:00.000 --> 00:00:01.000 +invalid + +00:\x0000:00.000 --> 00:00:01.000 +invalid + +00:0\x000:00.000 --> 00:00:01.000 +invalid + +00:00\x00:00.000 --> 00:00:01.000 +invalid + +00:00:\x0000.000 --> 00:00:01.000 +invalid + +00:00:0\x000.000 --> 00:00:01.000 +invalid + +00:00:00\x00.000 --> 00:00:01.000 +invalid + +00:00:00.\x00000 --> 00:00:01.000 +invalid + +00:00:00.0\x0000 --> 00:00:01.000 +invalid + +00:00:00.00\x000 --> 00:00:01.000 +invalid + +00:00:00.000\x00 --> 00:00:01.000 +invalid + +00:00:00.000 \x00--> 00:00:01.000 +invalid + +00:00:00.000 -\x00-> 00:00:01.000 +invalid + +00:00:00.000 --\x00> 00:00:01.000 +invalid + +00:00:00.000 -->\x00 00:00:01.000 +invalid + +00:00:00.000 --> \x0000:00:01.000 +invalid + +00:00:00.000 --> 0\x000:00:01.000 +invalid + +00:00:00.000 --> 00\x00:00:01.000 +invalid + +00:00:00.000 --> 00:\x0000:01.000 +invalid + +00:00:00.000 --> 00:0\x000:01.000 +invalid + +00:00:00.000 --> 00:00\x00:01.000 +invalid + +00:00:00.000 --> 00:00:\x0001.000 +invalid + +00:00:00.000 --> 00:00:0\x001.000 +invalid + +00:00:00.000 --> 00:00:01\x00.000 +invalid + +00:00:00.000 --> 00:00:01.\x00000 +invalid + +00:00:00.000 --> 00:00:01.0\x0000 +invalid + +00:00:00.000 --> 00:00:01.00\x000 +invalid + +\x000:00:00.000 --> 00:00:01.000 +invalid + +0\x00:00:00.000 --> 00:00:01.000 +invalid + +00\x0000:00.000 --> 00:00:01.000 +invalid + +00:\x000:00.000 --> 00:00:01.000 +invalid + +00:0\x00:00.000 --> 00:00:01.000 +invalid + +00:00\x0000.000 --> 00:00:01.000 +invalid + +00:00:\x000.000 --> 00:00:01.000 +invalid + +00:00:0\x00.000 --> 00:00:01.000 +invalid + +00:00:00\x00000 --> 00:00:01.000 +invalid + +00:00:00.\x0000 --> 00:00:01.000 +invalid + +00:00:00.0\x000 --> 00:00:01.000 +invalid + +00:00:00.00\x00 --> 00:00:01.000 +invalid + +00:00:00.000\x00--> 00:00:01.000 +invalid + +00:00:00.000 \x00-> 00:00:01.000 +invalid + +00:00:00.000 -\x00> 00:00:01.000 +invalid + +00:00:00.000 --\x00 00:00:01.000 +invalid + +00:00:00.000 -->\x0000:00:01.000 +invalid + +00:00:00.000 --> \x000:00:01.000 +invalid + +00:00:00.000 --> 0\x00:00:01.000 +invalid + +00:00:00.000 --> 00\x0000:01.000 +invalid + +00:00:00.000 --> 00:\x000:01.000 +invalid + +00:00:00.000 --> 00:0\x00:01.000 +invalid + +00:00:00.000 --> 00:00\x0001.000 +invalid + +00:00:00.000 --> 00:00:\x001.000 +invalid + +00:00:00.000 --> 00:00:0\x00.000 +invalid + +00:00:00.000 --> 00:00:01\x00000 +invalid + +00:00:00.000 --> 00:00:01.\x0000 +invalid + +00:00:00.000 --> 00:00:01.0\x000 +invalid + +00:00:00.000 --> 00:00:01.00\x00 +invalid diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-id.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-id.test new file mode 100644 index 0000000000..b611f84371 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-id.test @@ -0,0 +1,52 @@ +regions, id +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings"> + +assert_equals(cues.length, 4); + +var region1 = cues[0].region; +assert_equals(region1.lines, 2); + +var region2 = cues[1].region; +assert_equals(region2.lines, 1); + +var region3 = cues[2].region; +assert_equals(region3.lines, 3); + +var region4 = cues[3].region; +assert_equals(region4.lines, 4); + +=== +WEBVTT + +NOTE No API for accessing region ids, so using lines to uniquely identify regions + +REGION +id:foo +id:bar +lines:1 + +REGION +id:bar id:foo +lines:2 + +REGION +id:id +id: foo +id :bar +lines:3 + +REGION +id:\v +lines:4 + +00:00:00.000 --> 00:00:01.000 region:foo +valid + +00:00:00.000 --> 00:00:01.000 region:bar +valid + +00:00:00.000 --> 00:00:01.000 region:id +valid + +00:00:00.000 --> 00:00:01.000 region:\v +valid diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-lines.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-lines.test new file mode 100644 index 0000000000..a492a5448c --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-lines.test @@ -0,0 +1,129 @@ +regions, lines +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings"> + +assert_equals(cues.length, 13); + +var regions = Array.from(cues).map(function(cue) { + return cue.region; +}); + +var valid_lines = [ + 0, + 1, + 100, + 101, + 65536, + 4294967296, + 18446744073709552000, + 10000000000000000000000000000000000, + 2, +]; +valid_lines.forEach(function(valid, index) { + assert_equals(regions[index].lines, valid, 'Failed with region ' + index); +}); + +for (var i = 0; i < 4; i++) { + var index = valid_lines.length + i; + + assert_equals(regions[index].lines, 3, 'Failed with region ' + index); +} + +=== +WEBVTT + +NOTE valid + +REGION +id:1 +lines:0 + +REGION +id:2 +lines:1 + +REGION +id:3 +lines:100 + +REGION +id:4 +lines:101 + +REGION +id:5 +lines:65536 + +REGION +id:6 +lines:4294967296 + +REGION +id:7 +lines:18446744073709552000 + +REGION +id:8 +lines:10000000000000000000000000000000000 + +REGION +id:9 +lines:1 lines:3 +lines:2 + +NOTE invalid + +REGION +id:10 +lines:-0 + +REGION +id:11 +lines:1.5 + +REGION +id:12 +lines:-1 + +REGION +id:13 +lines: 1 +lines :1 + +00:00:00.000 --> 00:00:01.000 region:1 +text + +00:00:00.000 --> 00:00:01.000 region:2 +text + +00:00:00.000 --> 00:00:01.000 region:3 +text + +00:00:00.000 --> 00:00:01.000 region:4 +text + +00:00:00.000 --> 00:00:01.000 region:5 +text + +00:00:00.000 --> 00:00:01.000 region:6 +text + +00:00:00.000 --> 00:00:01.000 region:7 +text + +00:00:00.000 --> 00:00:01.000 region:8 +text + +00:00:00.000 --> 00:00:01.000 region:9 +text + +00:00:00.000 --> 00:00:01.000 region:10 +text + +00:00:00.000 --> 00:00:01.000 region:11 +text + +00:00:00.000 --> 00:00:01.000 region:12 +text + +00:00:00.000 --> 00:00:01.000 region:13 +text diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-old.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-old.test new file mode 100644 index 0000000000..4acb54b262 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-old.test @@ -0,0 +1,18 @@ +regions, old +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings"> + +assert_equals(cues.length, 2); + +assert_equals(cues[0].region, null); +assert_equals(cues[1].region, null); + +=== +WEBVTT +Region: id=foo width=40% lines=3 regionanchor=0%,100% viewportanchor=10%,90% scroll=up +Region: id=bar width=40% lines=3 regionanchor=100%,100% viewportanchor=90%,90% scroll=up + +00:00:00.000 --> 00:00:01.000 region:foo +text0 + +00:00:00.000 --> 00:00:01.000 region:bar +text1 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-regionanchor.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-regionanchor.test new file mode 100644 index 0000000000..0b0a896e20 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-regionanchor.test @@ -0,0 +1,182 @@ +regions, regionanchor +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings"> + +assert_equals(cues.length, 20); + +var regions = Array.from(cues).map(function(cue) { + return cue.region; +}); + +var valid_anchors = [ + [0, 100], + [0, 0], + [1, 1], + [100, 0], + [0, 100], + [100, 100], +]; +valid_anchors.forEach(function(pair, index) { + var anchorX = pair[0]; + var anchorY = pair[1]; + + assert_equals(regions[index].regionAnchorX, anchorX, 'Failed with region ' + index); + assert_equals(regions[index].regionAnchorY, anchorY, 'Failed with region ' + index); +}); + +for (var i = 0; i < 14; i++) { + var index = valid_anchors.length + i; + + assert_equals(regions[index].regionAnchorX, 0, 'Failed with region ' + index); + assert_equals(regions[index].regionAnchorY, 100, 'Failed with region ' + index); +} + +=== +WEBVTT + +NOTE valid + +REGION +id:0 + +REGION +id:1 +regionanchor:0%,0% + +REGION +id:2 +regionanchor:1%,1% + +REGION +id:3 +regionanchor:100%,0% + +REGION +id:4 +regionanchor:0%,100% + +REGION +id:5 +regionanchor:100%,100% + +NOTE invalid + +REGION +id:6 +regionanchor:0,0 + +REGION +id:7 +regionanchor:0%,0 + +REGION +id:8 +regionanchor:0,0% + +REGION +id:9 +regionanchor:1% + +REGION +id:10 +regionanchor:,1% + +REGION +id:11 +regionanchor:101%,1% + +REGION +id:12 +regionanchor:1%,101% + +REGION +id:13 +regionanchor:-0%,0% + +REGION +id:14 +regionanchor:0%,-0% + +REGION +id:15 +regionanchor:65536%,65536% + +REGION +id:16 +regionanchor:4294967296%,4294967296% + +REGION +id:17 +regionanchor:18446744073709552000%,18446744073709552000% + +REGION +id:18 +regionanchor:10000000000000000000000000000000000%,10000000000000000000000000000000000% + +REGION +id:19 +regionanchor: 100%,100% +regionanchor :100%,100% +regionanchor:100% ,100% +regionanchor:100%, 100% +regionanchor:100 %,100% +regionanchor:100%,100 % + +00:00:00.000 --> 00:00:01.000 region:0 +text + +00:00:00.000 --> 00:00:01.000 region:1 +text + +00:00:00.000 --> 00:00:01.000 region:2 +text + +00:00:00.000 --> 00:00:01.000 region:3 +text + +00:00:00.000 --> 00:00:01.000 region:4 +text + +00:00:00.000 --> 00:00:01.000 region:5 +text + +00:00:00.000 --> 00:00:01.000 region:6 +text + +00:00:00.000 --> 00:00:01.000 region:7 +text + +00:00:00.000 --> 00:00:01.000 region:8 +text + +00:00:00.000 --> 00:00:01.000 region:9 +text + +00:00:00.000 --> 00:00:01.000 region:10 +text + +00:00:00.000 --> 00:00:01.000 region:11 +text + +00:00:00.000 --> 00:00:01.000 region:12 +text + +00:00:00.000 --> 00:00:01.000 region:13 +text + +00:00:00.000 --> 00:00:01.000 region:14 +text + +00:00:00.000 --> 00:00:01.000 region:15 +text + +00:00:00.000 --> 00:00:01.000 region:16 +text + +00:00:00.000 --> 00:00:01.000 region:17 +text + +00:00:00.000 --> 00:00:01.000 region:18 +text + +00:00:00.000 --> 00:00:01.000 region:19 +text diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-scroll.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-scroll.test new file mode 100644 index 0000000000..f4b27800dd --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-scroll.test @@ -0,0 +1,67 @@ +regions, scroll +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings"> + +assert_equals(cues.length, 6); + +var regions = Array.from(cues).map(function(cue) { + return cue.region; +}); + +var valid_lines = [ + '', + 'up', + 'up', + '', + '', + 'up', +].forEach(function(valid, index) { + assert_equals(regions[index].scroll, valid, 'Failed with region ' + index); +}); + +=== +WEBVTT + +REGION +id:0 + +REGION +id:1 +scroll:up + +REGION +id:2 +scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up +scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up + +REGION +id:3 +scroll:down +scroll:left +scroll:right + +REGION +id:4 +scroll: up +scroll :up + +REGION +id:5 +scroll:up scroll: + +00:00:00.000 --> 00:00:01.000 region:0 +text + +00:00:00.000 --> 00:00:01.000 region:1 +text + +00:00:00.000 --> 00:00:01.000 region:2 +text + +00:00:00.000 --> 00:00:01.000 region:3 +text + +00:00:00.000 --> 00:00:01.000 region:4 +text + +00:00:00.000 --> 00:00:01.000 region:5 +text diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-viewportanchor.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-viewportanchor.test new file mode 100644 index 0000000000..c63816d0c4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/regions-viewportanchor.test @@ -0,0 +1,182 @@ +regions, viewportanchor +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings"> + +assert_equals(cues.length, 20); + +var regions = Array.from(cues).map(function(cue) { + return cue.region; +}); + +var valid_anchors = [ + [0, 100], + [0, 0], + [1, 1], + [100, 0], + [0, 100], + [100, 100], +]; +valid_anchors.forEach(function(pair, index) { + var anchorX = pair[0]; + var anchorY = pair[1]; + + assert_equals(regions[index].viewportAnchorX, anchorX, 'Failed with region ' + index); + assert_equals(regions[index].viewportAnchorY, anchorY, 'Failed with region ' + index); +}); + +for (var i = 0; i < 14; i++) { + var index = valid_anchors.length + i; + + assert_equals(regions[index].viewportAnchorX, 0, 'Failed with region ' + index); + assert_equals(regions[index].viewportAnchorY, 100, 'Failed with region ' + index); +} + +=== +WEBVTT + +NOTE valid + +REGION +id:0 + +REGION +id:1 +viewportanchor:0%,0% + +REGION +id:2 +viewportanchor:1%,1% + +REGION +id:3 +viewportanchor:100%,0% + +REGION +id:4 +viewportanchor:0%,100% + +REGION +id:5 +viewportanchor:100%,100% + +NOTE invalid + +REGION +id:6 +viewportanchor:0,0 + +REGION +id:7 +viewportanchor:0%,0 + +REGION +id:8 +viewportanchor:0,0% + +REGION +id:9 +viewportanchor:1% + +REGION +id:10 +viewportanchor:,1% + +REGION +id:11 +viewportanchor:101%,1% + +REGION +id:12 +viewportanchor:1%,101% + +REGION +id:13 +viewportanchor:-0%,0% + +REGION +id:14 +viewportanchor:0%,-0% + +REGION +id:15 +viewportanchor:65536%,65536% + +REGION +id:16 +viewportanchor:4294967296%,4294967296% + +REGION +id:17 +viewportanchor:18446744073709552000%,18446744073709552000% + +REGION +id:18 +viewportanchor:10000000000000000000000000000000000%,10000000000000000000000000000000000% + +REGION +id:19 +viewportanchor: 100%,100% +viewportanchor :100%,100% +viewportanchor:100% ,100% +viewportanchor:100%, 100% +viewportanchor:100 %,100% +viewportanchor:100%,100 % + +00:00:00.000 --> 00:00:01.000 region:0 +text + +00:00:00.000 --> 00:00:01.000 region:1 +text + +00:00:00.000 --> 00:00:01.000 region:2 +text + +00:00:00.000 --> 00:00:01.000 region:3 +text + +00:00:00.000 --> 00:00:01.000 region:4 +text + +00:00:00.000 --> 00:00:01.000 region:5 +text + +00:00:00.000 --> 00:00:01.000 region:6 +text + +00:00:00.000 --> 00:00:01.000 region:7 +text + +00:00:00.000 --> 00:00:01.000 region:8 +text + +00:00:00.000 --> 00:00:01.000 region:9 +text + +00:00:00.000 --> 00:00:01.000 region:10 +text + +00:00:00.000 --> 00:00:01.000 region:11 +text + +00:00:00.000 --> 00:00:01.000 region:12 +text + +00:00:00.000 --> 00:00:01.000 region:13 +text + +00:00:00.000 --> 00:00:01.000 region:14 +text + +00:00:00.000 --> 00:00:01.000 region:15 +text + +00:00:00.000 --> 00:00:01.000 region:16 +text + +00:00:00.000 --> 00:00:01.000 region:17 +text + +00:00:00.000 --> 00:00:01.000 region:18 +text + +00:00:00.000 --> 00:00:01.000 region:19 +text diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-align.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-align.test new file mode 100644 index 0000000000..ec5618a64b --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-align.test @@ -0,0 +1,64 @@ +settings, align +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings"> + +assert_equals(cues.length, 13); + +[ + 'center', + 'start', + 'center', + 'end', + 'left', + 'right', + 'end', + 'end', + 'end', + 'end', + 'end', + 'end', + 'center', +].forEach(function(valid, index) { + assert_equals(cues[index].align, valid, 'Failed with cue ' + index); +}); + +=== +WEBVTT + +00:00:00.000 --> 00:00:01.000 +text0 + +00:00:00.000 --> 00:00:01.000 align:start +text1 + +00:00:00.000 --> 00:00:01.000 align:center +text2 + +00:00:00.000 --> 00:00:01.000 align:end +text3 + +00:00:00.000 --> 00:00:01.000 align:left +text4 + +00:00:00.000 --> 00:00:01.000 align:right +text5 + +00:00:00.000 --> 00:00:01.000 align:start align:end +text6 + +00:00:00.000 --> 00:00:01.000 align:end align:CENTER +text7 + +00:00:00.000 --> 00:00:01.000 align:end align: center +text8 + +00:00:00.000 --> 00:00:01.000 align:end align: +text9 + +00:00:00.000 --> 00:00:01.000 align:end align:middle +text10 + +00:00:00.000 --> 00:00:01.000 align:end align +text11 + +00:00:00.000 --> 00:00:01.000 align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:center +text12 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-line.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-line.test new file mode 100644 index 0000000000..5b68d9c8ab --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-line.test @@ -0,0 +1,223 @@ +settings, line +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings"> + +assert_equals(cues.length, 46); + +// Test starts with simple valid values +var valid_values = [ + -1, + 0, + 0, + 1, + 100, + 101, + 65536, + 4294967296, + 18446744073709552000, + 10000000000000000000000000000000000, + 1.5, + Number.MAX_VALUE, + -1 * Number.MAX_VALUE, + Number.MIN_VALUE, + 0, // Less than Number.MIN_VALUE +]; +valid_values.forEach(function(valid, index) { + assert_equals(cues[index].line, valid, 'Failed with cue ' + index); + assert_true(cues[index].snapToLines, 'Failed with cue ' + index); +}); + +// Then a set of invalid ones +var invalid_length = 23; +for (var i = 0; i < invalid_length; i++) { + var index = valid_values.length + i; + + assert_equals(cues[index].line, 'auto', 'Failed with cue ' + index); + assert_true(cues[index].snapToLines, 'Failed with cue ' + index); +} + +// Then more specific tests +var index = valid_values.length + invalid_length; + +assert_equals(cues[index].line, 0); +assert_false(cues[index].snapToLines); + +assert_equals(cues[index + 1].line, 0); +assert_false(cues[index + 1].snapToLines); + +assert_equals(cues[index + 2].line, 100); +assert_false(cues[index + 2].snapToLines); +assert_equals(cues[index + 2].lineAlign, 'start'); + +assert_equals(cues[index + 3].line, 100); +assert_false(cues[index + 3].snapToLines); +assert_equals(cues[index + 3].lineAlign, 'start'); + +assert_equals(cues[index + 4].line, 100); +assert_false(cues[index + 4].snapToLines); +assert_equals(cues[index + 4].lineAlign, 'center'); + +assert_equals(cues[index + 5].line, 100); +assert_false(cues[index + 5].snapToLines); +assert_equals(cues[index + 5].lineAlign, 'end'); + +assert_equals(cues[index + 6].line, Number.MIN_VALUE); +assert_false(cues[index + 6].snapToLines); + +assert_equals(cues[index + 7].line, 0); +assert_false(cues[index + 7].snapToLines); + +=== +WEBVTT + +NOTE valid + +00:00:00.000 --> 00:00:01.000 line:-1 +valid0 + +00:00:00.000 --> 00:00:01.000 line:0 +valid1 + +00:00:00.000 --> 00:00:01.000 line:-0 +valid2 + +00:00:00.000 --> 00:00:01.000 line:1 +valid3 + +00:00:00.000 --> 00:00:01.000 line:100 +valid4 + +00:00:00.000 --> 00:00:01.000 line:101 +valid5 + +00:00:00.000 --> 00:00:01.000 line:65536 +valid6 + +00:00:00.000 --> 00:00:01.000 line:4294967296 +valid7 + +00:00:00.000 --> 00:00:01.000 line:18446744073709552000 +valid8 + +00:00:00.000 --> 00:00:01.000 line:10000000000000000000000000000000000 +valid9 + +00:00:00.000 --> 00:00:01.000 line:1.5 +valid10 + +Number.MAX_VALUE +00:00:00.000 --> 00:00:01.000 line:179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 +valid11 + +-1 * Number.MAX_VALUE +00:00:00.000 --> 00:00:01.000 line:-179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 +valid12 + +Number.MIN_VALUE +00:00:00.000 --> 00:00:01.000 line:0.000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000005 +valid13 + +Less than Number.MIN_VALUE +00:00:00.000 --> 00:00:01.000 line:0.000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002 +valid14 + +NOTE invalid + +00:00:00.000 --> 00:00:01.000 line:65536% +invalid15 + +00:00:00.000 --> 00:00:01.000 line:4294967296% +invalid16 + +00:00:00.000 --> 00:00:01.000 line:18446744073709552000% +invalid17 + +00:00:00.000 --> 00:00:01.000 line:10000000000000000000000000000000000% +invalid18 + +00:00:00.000 --> 00:00:01.000 line:-0% +invalid19 + +00:00:00.000 --> 00:00:01.000 line:101% +invalid20 + +00:00:00.000 --> 00:00:01.000 line:1%- +invalid21 + +00:00:00.000 --> 00:00:01.000 line:1- +invalid22 + +00:00:00.000 --> 00:00:01.000 line:%1 +invalid23 + +00:00:00.000 --> 00:00:01.000 line:1%% +invalid24 + +00:00:00.000 --> 00:00:01.000 line:0%0 +invalid25 + +00:00:00.000 --> 00:00:01.000 line: 0% +invalid26 + +00:00:00.000 --> 00:00:01.000 line:0%x +invalid27 + +00:00:00.000 --> 00:00:01.000 line:- +invalid28 + +00:00:00.000 --> 00:00:01.000 line:% +invalid29 + +00:00:00.000 --> 00:00:01.000 line:1..5 +invalid30 + +00:00:00.000 --> 00:00:01.000 line:.5 +invalid31 + +00:00:00.000 --> 00:00:01.000 line:5. +invalid32 + +Greater than Number.MAX_VALUE +00:00:00.000 --> 00:00:01.000 line:179769313486231590000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 +invalid33 + +Less than -1 * Number.MAX_VALUE +00:00:00.000 --> 00:00:01.000 line:-179769313486231590000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 +invalid34 + +exponential notation +00:00:00.000 --> 00:00:01.000 line:1e2 +invalid35 + +00:00:00.000 --> 00:00:01.000 line:100%,middle +invalid36 + +00:00:00.000 --> 00:00:01.000 line:100%, +invalid37 + +NOTE extra + +00:00:00.000 --> 00:00:01.000 line:0% +text38 + +00:00:00.000 --> 00:00:01.000 line:00% +text39 + +00:00:00.000 --> 00:00:01.000 line:100% +text40 + +00:00:00.000 --> 00:00:01.000 line:100%,start +text41 + +00:00:00.000 --> 00:00:01.000 line:100%,center +text42 + +00:00:00.000 --> 00:00:01.000 line:100%,end +text43 + +Number.MIN_VALUE % +00:00:00.000 --> 00:00:01.000 line:0.000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000005% +text44 + +Less than Number.MIN_VALUE % +00:00:00.000 --> 00:00:01.000 line:0.000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002% +text45 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-multiple.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-multiple.test new file mode 100644 index 0000000000..2aa7dc1624 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-multiple.test @@ -0,0 +1,34 @@ +settings, multiple +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings"> + +assert_equals(cues.length, 2); + +var cue = cues[0]; +assert_equals(cue.id, 'id0'); +assert_equals(cue.text, 'text0'); +assert_equals(cue.align, 'start'); +assert_equals(cue.line, 1); +assert_equals(cue.snapToLines, false); +assert_equals(cue.vertical, 'lr'); +assert_equals(cue.size, 50); +assert_equals(cue.position, 25); + +var cue = cues[1]; +assert_equals(cue.id, 'id1'); +assert_equals(cue.text, 'text1'); +assert_equals(cue.align, 'center'); +assert_equals(cue.line, 1); +assert_equals(cue.vertical, 'rl'); +assert_equals(cue.size, 0); +assert_equals(cue.position, 100); + +=== +WEBVTT + +id0 +00:00:00.000 --> 00:00:01.000 align:start line:1% vertical:lr size:50% position:25% +text0 + +id1 +00:00:00.000 --> 00:00:01.000 align:center line:1 vertical:rl size:0% position:100% +text1 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-position.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-position.test new file mode 100644 index 0000000000..efed18caea --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-position.test @@ -0,0 +1,102 @@ +settings, position +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings"> + +assert_equals(cues.length, 22); + +var valid_positions = [ + [1, 'auto'], + [100, 'auto'], + [1, 'auto'], + [1.5, 'auto'], + [1, 'line-left'], + [1, 'center'], + [1, 'line-right'], + [1, 'auto'], +]; +valid_positions.forEach(function(pair, index) { + var position = pair[0]; + var positionAlign = pair[1]; + + assert_equals(cues[index].position, position, 'Failed with cue ' + index); + assert_equals(cues[index].positionAlign, positionAlign, 'Failed with cue ' + index); +}); + +for (var i = 0; i < 14; i++) { + var index = valid_positions.length + i; + + assert_equals(cues[index].position, 'auto', 'Failed with cue ' + index); + assert_equals(cues[index].positionAlign, 'auto', 'Failed with cue ' + index); +} + +=== +WEBVTT + +NOTE valid + +00:00:00.000 --> 00:00:01.000 position:1% +text0 + +00:00:00.000 --> 00:00:01.000 position:100% +text1 + +00:00:00.000 --> 00:00:01.000 position:1% position:x +text2 + +00:00:00.000 --> 00:00:01.000 position:1.5% +text3 + +00:00:00.000 --> 00:00:01.000 position:1%,line-left +text4 + +00:00:00.000 --> 00:00:01.000 position:1%,center +text5 + +00:00:00.000 --> 00:00:01.000 position:1%,line-right +text6 + +00:00:00.000 --> 00:00:01.000 position:1% ,center +text7 + +NOTE invalid + +00:00:00.000 --> 00:00:01.000 position:1%,middle +invalid8 + +00:00:00.000 --> 00:00:01.000 position:1%, center +invalid9 + +00:00:00.000 --> 00:00:01.000 position:-1% +invalid10 + +00:00:00.000 --> 00:00:01.000 position:1 +invalid11 + +00:00:00.000 --> 00:00:01.000 position:1x +invalid12 + +00:00:00.000 --> 00:00:01.000 position:1%x +invalid13 + +00:00:00.000 --> 00:00:01.000 position: +invalid14 + +00:00:00.000 --> 00:00:01.000 position: 1% +invalid15 + +00:00:00.000 --> 00:00:01.000 position:101% +invalid16 + +00:00:00.000 --> 00:00:01.000 position:65536% +invalid17 + +00:00:00.000 --> 00:00:01.000 position:4294967296% +invalid18 + +00:00:00.000 --> 00:00:01.000 position:101%,line-left +invalid19 + +00:00:00.000 --> 00:00:01.000 position:101%,center +invalid20 + +00:00:00.000 --> 00:00:01.000 position:101%,line-right +invalid21 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-region.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-region.test new file mode 100644 index 0000000000..bfd0434e76 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-region.test @@ -0,0 +1,71 @@ +settings, region +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings"> + +assert_equals(cues.length, 9); + +var fooRegion = cues[0].region; +assert_true(!!fooRegion, 'Cue 0 has invalid region'); + +var barRegion = cues[1].region; +assert_true(!!barRegion, 'Cue 1 has invalid region'); + +assert_not_equals(fooRegion, barRegion); + +var valid_regions = [ + fooRegion, + barRegion, + barRegion, + null, + fooRegion +]; +valid_regions.forEach(function(valid, index) { + assert_equals(cues[index].region, valid, 'Failed with cue ' + index); +}); + +for (var i = 0; i < 4; i++) { + var index = valid_regions.length + i; + + assert_equals(cues[index].region, null); +} + +=== +WEBVTT + +REGION +id:foo + +REGION +id:bar + +REGION +id:foo + +REGION +width:10% + +00:00:00.000 --> 00:00:01.000 region:foo +text0 + +00:00:00.000 --> 00:00:01.000 region:bar +text1 + +00:00:00.000 --> 00:00:01.000 region:foo region:bar +text2 + +00:00:00.000 --> 00:00:01.000 region:invalid +text3 + +00:00:00.000 --> 00:00:01.000 region:invalid region:foo +text4 + +00:00:00.000 --> 00:00:01.000 region: +invalid5 + +00:00:00.000 --> 00:00:01.000 region:\x20 +invalid6 + +00:00:00.000 --> 00:00:01.000 region: foo +invalid7 + +00:00:00.000 --> 00:00:01.000 region :foo +invalid8 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-size.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-size.test new file mode 100644 index 0000000000..4c2de1d5f2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-size.test @@ -0,0 +1,78 @@ +settings, size +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings"> + +assert_equals(cues.length, 16); + +var valid_sizes = [ + 100, + 2, + 0, + 0, + 100, + 50, + 1.5, +]; +valid_sizes.forEach(function(valid, index) { + assert_equals(cues[index].size, valid, 'Failed with cue ' + index); +}); + +for (var i = 0; i < 9; i++) { + var index = valid_sizes.length + i; + + assert_equals(cues[index].size, 100, 'Failed with cue ' + index); +} + +=== +WEBVTT + +NOTE valid + +00:00:00.000 --> 00:00:01.000 +text0 + +00:00:00.000 --> 00:00:01.000 size:1xx size:2% +text1 + +00:00:00.000 --> 00:00:01.000 size:0% +text2 + +00:00:00.000 --> 00:00:01.000 size:00% +text3 + +00:00:00.000 --> 00:00:01.000 size:50% size:100% +text4 + +00:00:00.000 --> 00:00:01.000 size:50% size:101% +text5 + +00:00:00.000 --> 00:00:01.000 size:1.5% +text6 + +NOTE invalid + +00:00:00.000 --> 00:00:01.000 size: +invalid7 + +00:00:00.000 --> 00:00:01.000 size:x +invalid8 + +00:00:00.000 --> 00:00:01.000 size:% +invalid9 + +00:00:00.000 --> 00:00:01.000 size:%% +invalid10 + +00:00:00.000 --> 00:00:01.000 size:1%% +invalid11 + +00:00:00.000 --> 00:00:01.000 size:1%x +invalid12 + +00:00:00.000 --> 00:00:01.000 size:101% +invalid13 + +00:00:00.000 --> 00:00:01.000 size:-3% +invalid14 + +00:00:00.000 --> 00:00:01.000 size:200% +invalid15 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-vertical.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-vertical.test new file mode 100644 index 0000000000..33d23b2c46 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/settings-vertical.test @@ -0,0 +1,47 @@ +settings, size +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings"> + +assert_equals(cues.length, 8); + +var valid_vertical = [ + '', + 'lr', + 'rl', + 'lr', +]; +valid_vertical.forEach(function(valid, index) { + assert_equals(cues[index].vertical, valid, 'Failed with cue ' + index); +}); + +for (var i = 0; i < 4; i++) { + var index = valid_vertical.length + i; + + assert_equals(cues[index].vertical, '', 'Failed with cue ' + index); +} + +=== +WEBVTT + +00:00:00.000 --> 00:00:01.000 +text0 + +00:00:00.000 --> 00:00:01.000 vertical:lr +text1 + +00:00:00.000 --> 00:00:01.000 vertical:rl +text2 + +00:00:00.000 --> 00:00:01.000 vertical:rl vertical:lr +text3 + +00:00:00.000 --> 00:00:01.000 vertical: +invalid4 + +00:00:00.000 --> 00:00:01.000 vertical:RL +invalid5 + +00:00:00.000 --> 00:00:01.000 vertical: rl +invalid6 + +00:00:00.000 --> 00:00:01.000 vertical:vertical-rl +invalid7 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-bom.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-bom.test new file mode 100644 index 0000000000..245385f572 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-bom.test @@ -0,0 +1,7 @@ +signature, bom +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> + +assert_equals(cues.length, 0); + +=== +\ufeffWEBVTT diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-formfeed.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-formfeed.vtt new file mode 100644 index 0000000000..0ba5286373 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-formfeed.vtt @@ -0,0 +1 @@ +WEBVTT diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-invalid-whitespace.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-invalid-whitespace.vtt new file mode 100644 index 0000000000..1f67eaee97 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-invalid-whitespace.vtt @@ -0,0 +1 @@ +WEBVTT foo diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-invalid.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-invalid.vtt new file mode 100644 index 0000000000..5407fcb350 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-invalid.vtt @@ -0,0 +1 @@ +VTTWEB diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-lowercase.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-lowercase.vtt new file mode 100644 index 0000000000..994d1694fd --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-lowercase.vtt @@ -0,0 +1 @@ +webvtt diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-missing-whitespace.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-missing-whitespace.vtt new file mode 100644 index 0000000000..7ed44af02c --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-missing-whitespace.vtt @@ -0,0 +1 @@ +WEBVTTfoo diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-missing.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-missing.vtt new file mode 100644 index 0000000000..bd90460a23 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-missing.vtt @@ -0,0 +1,2 @@ +00:00:00.000 --> 00:00:01.000 +invalid diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-no-newline.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-no-newline.test new file mode 100644 index 0000000000..13cf042c17 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-no-newline.test @@ -0,0 +1,7 @@ +signature, no newline +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> + +assert_equals(cues.length, 0); + +=== +WEBVTT
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-null.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-null.vtt Binary files differnew file mode 100644 index 0000000000..ead93cc166 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-null.vtt diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-partial.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-partial.vtt new file mode 100644 index 0000000000..3e5de2b6c9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-partial.vtt @@ -0,0 +1 @@ +WEBVT diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-space-no-newline.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-space-no-newline.test new file mode 100644 index 0000000000..021107316f --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-space-no-newline.test @@ -0,0 +1,7 @@ +signature, space, no newline +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> + +assert_equals(cues.length, 0); + +=== +WEBVTT\x20
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-space.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-space.test new file mode 100644 index 0000000000..349562eb9e --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-space.test @@ -0,0 +1,7 @@ +signature, space +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> + +assert_equals(cues.length, 0); + +=== +WEBVTT\x20 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-tab-no-newline.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-tab-no-newline.test new file mode 100644 index 0000000000..fbca4bed60 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-tab-no-newline.test @@ -0,0 +1,7 @@ +signature, tab, no newline +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> + +assert_equals(cues.length, 0); + +=== +WEBVTT\t
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-tab.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-tab.test new file mode 100644 index 0000000000..3b500d0463 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-tab.test @@ -0,0 +1,7 @@ +signature, tab +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> + +assert_equals(cues.length, 0); + +=== +WEBVTT\t diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-timings.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-timings.test new file mode 100644 index 0000000000..0197e8ac42 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-timings.test @@ -0,0 +1,8 @@ +signature, timings +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> + +assert_equals(cues.length, 0); + +=== +WEBVTT 00:00:00.000 --> 00:00:01.000 +text diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-two-boms.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-two-boms.vtt new file mode 100644 index 0000000000..05c973be18 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-two-boms.vtt @@ -0,0 +1 @@ +WEBVTT diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-websrt.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-websrt.vtt new file mode 100644 index 0000000000..4a02525e38 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/signature-websrt.vtt @@ -0,0 +1 @@ +WEBSRT diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/stylesheets.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/stylesheets.test new file mode 100644 index 0000000000..f4fbf424fc --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/stylesheets.test @@ -0,0 +1,36 @@ +stylesheets, rules +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block"> + +// There's no way to test the actual style from js +assert_equals(document.styleSheets.length, 0); + +=== +WEBVTT + +STYLE +::cue(#foo) { + width: 20px; +} /* +NOTE hello +00:00:00.000 -- > 00:00:01.000 +*/ +.foo { + width: 19px; +} + +.bar { + width: 18px; +} + +foo +00:00:00.000 --> 00:00:01.000 +text + +STYLE +::cue(::bar) { + width: 18px; +} + +bar +00:00:00.000 --> 00:00:01.000 +text diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-60.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-60.test new file mode 100644 index 0000000000..7cfe482392 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-60.test @@ -0,0 +1,33 @@ +timings, 60 +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp"> + +assert_equals(cues.length, 2); + +assert_equals(cues[0].text, 'text1'); +assert_equals(cues[0].startTime, 0); +assert_equals(cues[0].endTime, 216001); + +assert_equals(cues[1].text, 'text2'); +assert_equals(cues[1].startTime, 216000); +assert_equals(cues[1].endTime, 216001); + +=== +WEBVTT + +00:00:60.000 --> 00:00:01.000 +invalid + +00:60:00.000 --> 00:00:01.000 +invalid + +00:00:00.000 --> 00:00:60.000 +invalid + +00:00:00.000 --> 00:60:00.000 +invalid + +00:00:00.000 --> 60:00:01.000 +text1 + +60:00:00.000 --> 60:00:01.000 +text2 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-eof.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-eof.test new file mode 100644 index 0000000000..7b871164e9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-eof.test @@ -0,0 +1,9 @@ +timings, eof +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp"> + +assert_equals(cues.length, 0); + +=== +WEBVTT + +00:00:00.000 -->
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-garbage.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-garbage.test new file mode 100644 index 0000000000..99f7c28b42 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-garbage.test @@ -0,0 +1,197 @@ +timings, garbage +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp"> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings"> + +assert_equals(cues.length, 0); + +=== +WEBVTT + +x00:00:00.000 --> 00:00:01.000 +invalid + +0x0:00:00.000 --> 00:00:01.000 +invalid + +00x:00:00.000 --> 00:00:01.000 +invalid + +00:x00:00.000 --> 00:00:01.000 +invalid + +00:0x0:00.000 --> 00:00:01.000 +invalid + +00:00x:00.000 --> 00:00:01.000 +invalid + +00:00:x00.000 --> 00:00:01.000 +invalid + +00:00:0x0.000 --> 00:00:01.000 +invalid + +00:00:00x.000 --> 00:00:01.000 +invalid + +00:00:00.x000 --> 00:00:01.000 +invalid + +00:00:00.0x00 --> 00:00:01.000 +invalid + +00:00:00.00x0 --> 00:00:01.000 +invalid + +00:00:00.000x --> 00:00:01.000 +invalid + +00:00:00.000 x--> 00:00:01.000 +invalid + +00:00:00.000 -x-> 00:00:01.000 +invalid + +00:00:00.000 --x> 00:00:01.000 +invalid + +00:00:00.000 -->x 00:00:01.000 +invalid + +00:00:00.000 --> x00:00:01.000 +invalid + +00:00:00.000 --> 0x0:00:01.000 +invalid + +00:00:00.000 --> 00x:00:01.000 +invalid + +00:00:00.000 --> 00:x00:01.000 +invalid + +00:00:00.000 --> 00:0x0:01.000 +invalid + +00:00:00.000 --> 00:00x:01.000 +invalid + +00:00:00.000 --> 00:00:x01.000 +invalid + +00:00:00.000 --> 00:00:0x1.000 +invalid + +00:00:00.000 --> 00:00:01x.000 +invalid + +00:00:00.000 --> 00:00:01.x000 +invalid + +00:00:00.000 --> 00:00:01.0x00 +invalid + +00:00:00.000 --> 00:00:01.00x0 +invalid + +x0:00:00.000 --> 00:00:01.000 +invalid + +0x:00:00.000 --> 00:00:01.000 +invalid + +00x00:00.000 --> 00:00:01.000 +invalid + +00:x0:00.000 --> 00:00:01.000 +invalid + +00:0x:00.000 --> 00:00:01.000 +invalid + +00:00x00.000 --> 00:00:01.000 +invalid + +00:00:x0.000 --> 00:00:01.000 +invalid + +00:00:0x.000 --> 00:00:01.000 +invalid + +00:00:00x000 --> 00:00:01.000 +invalid + +00:00:00.x00 --> 00:00:01.000 +invalid + +00:00:00.0x0 --> 00:00:01.000 +invalid + +00:00:00.00x --> 00:00:01.000 +invalid + +00:00:00.000x--> 00:00:01.000 +invalid + +00:00:00.000 x-> 00:00:01.000 +invalid + +00:00:00.000 -x> 00:00:01.000 +invalid + +00:00:00.000 --x 00:00:01.000 +invalid + +00:00:00.000 -->x00:00:01.000 +invalid + +00:00:00.000 --> x0:00:01.000 +invalid + +00:00:00.000 --> 0x:00:01.000 +invalid + +00:00:00.000 --> 00x00:01.000 +invalid + +00:00:00.000 --> 00:x0:01.000 +invalid + +00:00:00.000 --> 00:0x:01.000 +invalid + +00:00:00.000 --> 00:00x01.000 +invalid + +00:00:00.000 --> 00:00:x1.000 +invalid + +00:00:00.000 --> 00:00:0x.000 +invalid + +00:00:00.000 --> 00:00:01x000 +invalid + +00:00:00.000 --> 00:00:01.x00 +invalid + +00:00:00.000 --> 00:00:01.0x0 +invalid + +00:00:00.000 --> 00:00:01.00x +invalid + +00.00:00.000 --> 00:00:01.000 +invalid + +00:00.00.000 --> 00:00:01.000 +invalid + +00:00:00:000 --> 00:00:01.000 +invalid + +00:00.00:000 --> 00:00:01.000 +invalid + +00:00:00,000 --> 00:00:01,000 +invalid
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-negative.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-negative.test new file mode 100644 index 0000000000..2cded00929 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-negative.test @@ -0,0 +1,33 @@ +timings, negative +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp"> + +assert_equals(cues.length, 4); + +[ + [0, 0], + [1, 0.999], + [60, 59.999], + [3600, 3599.999], +].forEach(function(pair, index) { + var startTime = pair[0]; + var endTime = pair[1]; + + assert_equals(cues[index].text, 'text' + index, 'Failed with cue ' + index); + assert_equals(cues[index].startTime, startTime, 'Failed with cue ' + index); + assert_equals(cues[index].endTime, endTime, 'Failed with cue ' + index); +}); + +=== +WEBVTT + +00:00:00.000 --> 00:00:00.000 +text0 + +00:00:01.000 --> 00:00:00.999 +text1 + +00:01:00.000 --> 00:00:59.999 +text2 + +01:00:00.000 --> 00:59:59.999 +text3 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-omitted-hours.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-omitted-hours.test new file mode 100644 index 0000000000..8fb5858571 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-omitted-hours.test @@ -0,0 +1,22 @@ +timings, omitted hours +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp"> + +assert_equals(cues.length, 3); + +Array.from(cues).forEach(function(cue, index) { + assert_equals(cue.text, 'text' + index, 'Failed with cue ' + index); + assert_equals(cue.startTime, 0, 'Failed with cue ' + index); + assert_equals(cue.endTime, 1, 'Failed with cue ' + index); +}); + +=== +WEBVTT + +00:00.000 --> 00:00:01.000 +text0 + +00:00:00.000 --> 00:01.000 +text1 + +00:00.000 --> 00:01.000 +text2 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-too-long.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-too-long.test new file mode 100644 index 0000000000..5f2cc889a6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-too-long.test @@ -0,0 +1,60 @@ +timings, too long +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp"> + +assert_equals(cues.length, 2); + +assert_equals(cues[0].text, 'text0'); +assert_equals(cues[0].startTime, 0); +assert_equals(cues[0].endTime, 1); + +assert_equals(cues[1].text, 'text1'); +assert_equals(cues[1].startTime, 0); +assert_equals(cues[1].endTime, 1); + +=== +WEBVTT + +000:00:00.000 --> 00:00:01.000 +text0 + +00::00:00.000 --> 00:00:01.000 +invalid + +00:000:00.000 --> 00:00:01.000 +invalid + +00:00::00.000 --> 00:00:01.000 +invalid + +00:00:000.000 --> 00:00:01.000 +invalid + +00:00:00..000 --> 00:00:01.000 +invalid + +00:00:00.0000 --> 00:00:01.000 +invalid + +00:00.0000 --> 00:00:01.000 +invalid + +000:00.000 --> 00:01.000 +invalid + +00::00.000 --> 00:01.000 +invalid + +00:000.000 --> 00:01.000 +invalid + +00:00..000 --> 00:01.000 +invalid + +00:00.0000 --> 00:01.000 +invalid + +00:00.000 --> 000:01.000 +invalid + +00:00:00.000 --> 000:00:01.000 +text1 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-too-short.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-too-short.test new file mode 100644 index 0000000000..d078eacf7c --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/timings-too-short.test @@ -0,0 +1,111 @@ +timings, too short +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp"> + +assert_equals(cues.length, 2); + +assert_equals(cues[0].text, 'text0'); +assert_equals(cues[0].startTime, 0); +assert_equals(cues[0].endTime, 1); + +assert_equals(cues[1].text, 'text1'); +assert_equals(cues[1].startTime, 0); +assert_equals(cues[1].endTime, 1); + +=== +WEBVTT + +0:00:00.000 --> 00:00:01.000 +text0 + +0000:00.000 --> 00:00:01.000 +invalid + +00:0:00.000 --> 00:00:01.000 +invalid + +00:0000.000 --> 00:00:01.000 +invalid + +00:00:0.000 --> 00:00:01.000 +invalid + +00:00:00000 --> 00:00:01.000 +invalid + +00:00:00.00 --> 00:00:01.000 +invalid + +00:00:00.0 --> 00:00:01.000 +invalid + +00:00:00. --> 00:00:01.000 +invalid + +00:00:00 --> 00:00:01.000 +invalid + +00:00:0 --> 00:00:01.000 +invalid + +00:00: --> 00:00:01.000 +invalid + +00:00 --> 00:00:01.000 +invalid + +00:0 --> 00:00:01.000 +invalid + +00: --> 00:00:01.000 +invalid + +00 --> 00:00:01.000 +invalid + +0 --> 00:00:01.000 +invalid + + --> 00:00:01.000 +invalid + +0:00.000 --> 00:01.000 +invalid + +0000.000 --> 00:01.000 +invalid + +00:0.000 --> 00:01.000 +invalid + +00:00000 --> 00:01.000 +invalid + +00:00.00 --> 00:01.000 +invalid + +00:00.0 --> 00:01.000 +invalid + +00:00. --> 00:01.000 +invalid + +0:00. --> 00:01.000 +invalid + +:00. --> 00:01.000 +invalid + +00. --> 00:01.000 +invalid + +0. --> 00:01.000 +invalid + +. --> 00:01.000 +invalid + +00:00.000 --> 0:01.000 +invalid + +00:00:00.000 --> 0:00:01.000 +text1 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/support/whitespace-chars.test b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/whitespace-chars.test new file mode 100644 index 0000000000..7ee43facaa --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/support/whitespace-chars.test @@ -0,0 +1,32 @@ +whitespace chars +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block"> + +assert_equals(cues.length, 3); + +assert_equals(cues[0].id, 'spaces'); +assert_equals(cues[0].text, ' text0'); + +assert_equals(cues[1].id, 'tabs'); +assert_equals(cues[1].text, 'text1'); + +assert_equals(cues[2].id, 'form feed'); +assert_equals(cues[2].text, 'text2'); + +=== +WEBVTT + +spaces + 00:00:00.000 --> 00:00:01.000\x20 + text0 + +tabs +\t\t\t00:00:00.000\t\t\t\t-->\t\t00:00:01.000\t +text1 + +form feed +\f\f\f00:00:00.000\f\f\f\f-->\f\f00:00:01.000\f +text2 + +vertical tab +\v\v\v00:00:00.000\v\v\v\v-->\v\v00:00:01.000\v +invalid diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/arrows.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/arrows.html new file mode 100644 index 0000000000..7eefc797c7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/arrows.html @@ -0,0 +1,44 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/arrows.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: arrows</title> +<link rel="help" href="https://w3c.github.io/webvtt/#cue-timings-and-settings-parsing"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('arrows'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/arrows.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 6); + +for (var i = 0; i < cues.length; i++) { + assert_equals(cues[i].id, '', 'Failed with cue ' + i); + assert_equals(cues[i].text, 'text' + i, 'Failed with cue ' + i); +} + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/categories.json b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/categories.json new file mode 100644 index 0000000000..eac23f67dd --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/categories.json @@ -0,0 +1,9 @@ +{ + "arrows.html": "cues", + "ids.html": "cues", + "settings-*.html": "cues", + "signature-timings.html": "cues", + "timings-*.html": "cues", + "regions-*.html": "regions", + "stylesheets-*.html": "stylesheets" +} diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/comment-in-cue-text.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/comment-in-cue-text.html new file mode 100644 index 0000000000..d3cd12549b --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/comment-in-cue-text.html @@ -0,0 +1,47 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/comment-in-cue-text.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: comment-in-cue-text</title> +<link rel="help" href="https://www.w3.org/TR/webvtt1/#webvtt-comment-block"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('comment-in-cue-text'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/comment-in-cue-text.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 2); + +assert_equals(cues[0].text, 'NOTE text'); +assert_equals(cues[0].startTime, 0); +assert_equals(cues[0].endTime, 1); + +assert_equals(cues[1].text, 'NOTE text\nNOTE text2'); +assert_equals(cues[1].startTime, 1); +assert_equals(cues[1].endTime, 2); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-garbage.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-garbage.html new file mode 100644 index 0000000000..4ebace2409 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-garbage.html @@ -0,0 +1,43 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/header-garbage.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: header, garbage</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('header, garbage'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/header-garbage.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 1); + +assert_equals(cues[0].text, 'text'); +assert_equals(cues[0].startTime, 0); +assert_equals(cues[0].endTime, 1); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-regions.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-regions.html new file mode 100644 index 0000000000..b10fcbcef9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-regions.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<title>Tests proper parsing of various regions present in WebVTT header area.</title> +<script src="/common/media.js"></script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +const regionDefaults = { + width: 100, + lines: 3, + regionAnchorX: 0, + regionAnchorY: 100, + viewportAnchorX: 0, + viewportAnchorY: 100, + scroll: '' +}; + +function checkProperties(region, expected, i) { + for (var prop in regionDefaults) { + if (!(prop in expected)) + expected[prop] = regionDefaults[prop]; + assert_equals(region[prop], expected[prop], prop + ' (cue ' + ( i + 1 ) + ')'); + } +} + +function checkCueRegions(cues) { + for (let i = 0; i < cues.length; ++i) { + let cue = cues[i]; + let expected = JSON.parse(cue.text); + if (cue.region) + checkProperties(cue.region, expected, i); + else + assert_equals(expected, 'no region'); + } +} + +async_test(function(t) { + var video = document.createElement('video'); + video.src = getVideoURI('/media/test'); + var testTrack = document.createElement('track'); + testTrack.onload = t.step_func_done(function() { + var track = testTrack.track; + assert_equals(track.cues.length, 9); + checkCueRegions(track.cues); + }); + testTrack.src = 'support/header-regions.vtt'; + testTrack.kind = 'captions'; + testTrack.default = true; + video.appendChild(testTrack); +}); +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-space.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-space.html new file mode 100644 index 0000000000..c679d69f51 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-space.html @@ -0,0 +1,43 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/header-space.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: header, space</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('header, space'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/header-space.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 1); + +assert_equals(cues[0].text, 'text'); +assert_equals(cues[0].startTime, 0); +assert_equals(cues[0].endTime, 1); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-tab.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-tab.html new file mode 100644 index 0000000000..540bad54b6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-tab.html @@ -0,0 +1,43 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/header-tab.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: header, tab</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('header, tab'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/header-tab.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 1); + +assert_equals(cues[0].text, 'text'); +assert_equals(cues[0].startTime, 0); +assert_equals(cues[0].endTime, 1); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-timings.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-timings.html new file mode 100644 index 0000000000..adff8579a7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/header-timings.html @@ -0,0 +1,43 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/header-timings.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: header, timings</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('header, timings'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/header-timings.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 1); + +assert_equals(cues[0].text, 'text'); +assert_equals(cues[0].startTime, 0); +assert_equals(cues[0].endTime, 1); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/ids.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/ids.html new file mode 100644 index 0000000000..73763836bc --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/ids.html @@ -0,0 +1,44 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/ids.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: ids</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('ids'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/ids.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 5); +assert_equals(cues[0].id, " leading space"); +assert_equals(cues[1].id, "trailing space "); +assert_equals(cues[2].id, "-- >"); +assert_equals(cues[3].id, "->"); +assert_equals(cues[4].id, " "); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/newlines.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/newlines.html new file mode 100644 index 0000000000..6afab36067 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/newlines.html @@ -0,0 +1,51 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/newlines.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: newlines</title> +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('newlines'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/newlines.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 4); + +assert_equals(cues[0].id, "cr"); +assert_equals(cues[0].text, "text0"); + +assert_equals(cues[1].id, "lf"); +assert_equals(cues[1].text, "text1"); + +assert_equals(cues[2].id, "crlf"); +assert_equals(cues[2].text, "text2"); + +assert_equals(cues[3].id, "lfcr"); +assert_equals(cues[3].text, "text3"); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/nulls.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/nulls.html new file mode 100644 index 0000000000..d3a97eae8d --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/nulls.html @@ -0,0 +1,60 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/nulls.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: nulls</title> +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('nulls'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/nulls.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 7, cues); + +assert_equals(cues[0].id, ""); +assert_equals(cues[0].text, "text0"); + +assert_equals(cues[1].id, "\uFFFD (null in id)"); +assert_equals(cues[1].text, "text1"); + +assert_equals(cues[2].id, "\uFFFD (null in cue data)"); +assert_equals(cues[2].text, "\uFFFDtext\uFFFD2"); + +assert_equals(cues[3].align, "center"); +assert_equals(cues[3].text, "text3"); + +assert_equals(cues[4].align, "center"); +assert_equals(cues[4].text, "text4"); + +assert_equals(cues[5].align, "center"); +assert_equals(cues[5].text, "text5"); + +assert_equals(cues[6].align, "end"); +assert_equals(cues[6].text, "text6"); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-edge-case.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-edge-case.html new file mode 100644 index 0000000000..db1f27f67f --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-edge-case.html @@ -0,0 +1,55 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/regions-edge-case.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: multiple regions edge cases</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('regions, lines'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/regions-edge-case.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 4); + +var region1 = cues[0].region; +assert_equals(region1.lines, 1); +assert_equals(region1.id, "foo"); + +var region2 = cues[1].region; +assert_equals(region2.lines, 2); +assert_equals(region2.id, "bill"); + +var region3 = cues[2].region; +assert_equals(region3.lines, 3); +assert_equals(region3.id, "jill"); + +var region4 = cues[3].region; +assert_equals(region4.lines, 4); +assert_equals(region4.id, "jack"); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-id.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-id.html new file mode 100644 index 0000000000..3a6e3feafa --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-id.html @@ -0,0 +1,51 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/regions-id.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: regions, id</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('regions, id'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/regions-id.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 4); + +var region1 = cues[0].region; +assert_equals(region1.lines, 2); + +var region2 = cues[1].region; +assert_equals(region2.lines, 1); + +var region3 = cues[2].region; +assert_equals(region3.lines, 3); + +var region4 = cues[3].region; +assert_equals(region4.lines, 4); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-lines.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-lines.html new file mode 100644 index 0000000000..8e9b979291 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-lines.html @@ -0,0 +1,64 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/regions-lines.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: regions, lines</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('regions, lines'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/regions-lines.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 13); + +var regions = Array.from(cues).map(function(cue) { + return cue.region; +}); + +var valid_lines = [ + 0, + 1, + 100, + 101, + 65536, + 4294967296, + 18446744073709552000, + 10000000000000000000000000000000000, + 2, +]; +valid_lines.forEach(function(valid, index) { + assert_equals(regions[index].lines, valid, 'Failed with region ' + index); +}); + +for (var i = 0; i < 4; i++) { + var index = valid_lines.length + i; + + assert_equals(regions[index].lines, 3, 'Failed with region ' + index); +} + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-old.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-old.html new file mode 100644 index 0000000000..ea6875756e --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-old.html @@ -0,0 +1,42 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/regions-old.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: regions, old</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('regions, old'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/regions-old.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 2); + +assert_equals(cues[0].region, null); +assert_equals(cues[1].region, null); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-regionanchor.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-regionanchor.html new file mode 100644 index 0000000000..1cccfe9a04 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-regionanchor.html @@ -0,0 +1,66 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/regions-regionanchor.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: regions, regionanchor</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('regions, regionanchor'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/regions-regionanchor.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 20); + +var regions = Array.from(cues).map(function(cue) { + return cue.region; +}); + +var valid_anchors = [ + [0, 100], + [0, 0], + [1, 1], + [100, 0], + [0, 100], + [100, 100], +]; +valid_anchors.forEach(function(pair, index) { + var anchorX = pair[0]; + var anchorY = pair[1]; + + assert_equals(regions[index].regionAnchorX, anchorX, 'Failed with region ' + index); + assert_equals(regions[index].regionAnchorY, anchorY, 'Failed with region ' + index); +}); + +for (var i = 0; i < 14; i++) { + var index = valid_anchors.length + i; + + assert_equals(regions[index].regionAnchorX, 0, 'Failed with region ' + index); + assert_equals(regions[index].regionAnchorY, 100, 'Failed with region ' + index); +} + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-scroll.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-scroll.html new file mode 100644 index 0000000000..698af98f7a --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-scroll.html @@ -0,0 +1,54 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/regions-scroll.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: regions, scroll</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('regions, scroll'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/regions-scroll.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 6); + +var regions = Array.from(cues).map(function(cue) { + return cue.region; +}); + +var valid_lines = [ + '', + 'up', + 'up', + '', + '', + 'up', +].forEach(function(valid, index) { + assert_equals(regions[index].scroll, valid, 'Failed with region ' + index); +}); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-viewportanchor.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-viewportanchor.html new file mode 100644 index 0000000000..b4c905fa4e --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/regions-viewportanchor.html @@ -0,0 +1,66 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/regions-viewportanchor.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: regions, viewportanchor</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-region-settings"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('regions, viewportanchor'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/regions-viewportanchor.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 20); + +var regions = Array.from(cues).map(function(cue) { + return cue.region; +}); + +var valid_anchors = [ + [0, 100], + [0, 0], + [1, 1], + [100, 0], + [0, 100], + [100, 100], +]; +valid_anchors.forEach(function(pair, index) { + var anchorX = pair[0]; + var anchorY = pair[1]; + + assert_equals(regions[index].viewportAnchorX, anchorX, 'Failed with region ' + index); + assert_equals(regions[index].viewportAnchorY, anchorY, 'Failed with region ' + index); +}); + +for (var i = 0; i < 14; i++) { + var index = valid_anchors.length + i; + + assert_equals(regions[index].viewportAnchorX, 0, 'Failed with region ' + index); + assert_equals(regions[index].viewportAnchorY, 100, 'Failed with region ' + index); +} + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-align.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-align.html new file mode 100644 index 0000000000..06ea26fa78 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-align.html @@ -0,0 +1,57 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/settings-align.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: settings, align</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('settings, align'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/settings-align.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 13); + +[ + 'center', + 'start', + 'center', + 'end', + 'left', + 'right', + 'end', + 'end', + 'end', + 'end', + 'end', + 'end', + 'center', +].forEach(function(valid, index) { + assert_equals(cues[index].align, valid, 'Failed with cue ' + index); +}); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-line.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-line.html new file mode 100644 index 0000000000..a38e56eb0b --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-line.html @@ -0,0 +1,102 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/settings-line.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: settings, line</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('settings, line'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/settings-line.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 46); + +// Test starts with simple valid values +var valid_values = [ + -1, + 0, + 0, + 1, + 100, + 101, + 65536, + 4294967296, + 18446744073709552000, + 10000000000000000000000000000000000, + 1.5, + Number.MAX_VALUE, + -1 * Number.MAX_VALUE, + Number.MIN_VALUE, + 0, // Less than Number.MIN_VALUE +]; +valid_values.forEach(function(valid, index) { + assert_equals(cues[index].line, valid, 'Failed with cue ' + index); + assert_true(cues[index].snapToLines, 'Failed with cue ' + index); +}); + +// Then a set of invalid ones +var invalid_length = 23; +for (var i = 0; i < invalid_length; i++) { + var index = valid_values.length + i; + + assert_equals(cues[index].line, 'auto', 'Failed with cue ' + index); + assert_true(cues[index].snapToLines, 'Failed with cue ' + index); +} + +// Then more specific tests +var index = valid_values.length + invalid_length; + +assert_equals(cues[index].line, 0); +assert_false(cues[index].snapToLines); + +assert_equals(cues[index + 1].line, 0); +assert_false(cues[index + 1].snapToLines); + +assert_equals(cues[index + 2].line, 100); +assert_false(cues[index + 2].snapToLines); +assert_equals(cues[index + 2].lineAlign, 'start'); + +assert_equals(cues[index + 3].line, 100); +assert_false(cues[index + 3].snapToLines); +assert_equals(cues[index + 3].lineAlign, 'start'); + +assert_equals(cues[index + 4].line, 100); +assert_false(cues[index + 4].snapToLines); +assert_equals(cues[index + 4].lineAlign, 'center'); + +assert_equals(cues[index + 5].line, 100); +assert_false(cues[index + 5].snapToLines); +assert_equals(cues[index + 5].lineAlign, 'end'); + +assert_equals(cues[index + 6].line, Number.MIN_VALUE); +assert_false(cues[index + 6].snapToLines); + +assert_equals(cues[index + 7].line, 0); +assert_false(cues[index + 7].snapToLines); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-multiple.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-multiple.html new file mode 100644 index 0000000000..982a36a125 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-multiple.html @@ -0,0 +1,58 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/settings-multiple.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: settings, multiple</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('settings, multiple'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/settings-multiple.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 2); + +var cue = cues[0]; +assert_equals(cue.id, 'id0'); +assert_equals(cue.text, 'text0'); +assert_equals(cue.align, 'start'); +assert_equals(cue.line, 1); +assert_equals(cue.snapToLines, false); +assert_equals(cue.vertical, 'lr'); +assert_equals(cue.size, 50); +assert_equals(cue.position, 25); + +var cue = cues[1]; +assert_equals(cue.id, 'id1'); +assert_equals(cue.text, 'text1'); +assert_equals(cue.align, 'center'); +assert_equals(cue.line, 1); +assert_equals(cue.vertical, 'rl'); +assert_equals(cue.size, 0); +assert_equals(cue.position, 100); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-position.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-position.html new file mode 100644 index 0000000000..e4ddcf8dbe --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-position.html @@ -0,0 +1,64 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/settings-position.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: settings, position</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('settings, position'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/settings-position.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 22); + +var valid_positions = [ + [1, 'auto'], + [100, 'auto'], + [1, 'auto'], + [1.5, 'auto'], + [1, 'line-left'], + [1, 'center'], + [1, 'line-right'], + [1, 'auto'], +]; +valid_positions.forEach(function(pair, index) { + var position = pair[0]; + var positionAlign = pair[1]; + + assert_equals(cues[index].position, position, 'Failed with cue ' + index); + assert_equals(cues[index].positionAlign, positionAlign, 'Failed with cue ' + index); +}); + +for (var i = 0; i < 14; i++) { + var index = valid_positions.length + i; + + assert_equals(cues[index].position, 'auto', 'Failed with cue ' + index); + assert_equals(cues[index].positionAlign, 'auto', 'Failed with cue ' + index); +} + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-region.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-region.html new file mode 100644 index 0000000000..150f2feec4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-region.html @@ -0,0 +1,64 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/settings-region.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: settings, region</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('settings, region'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/settings-region.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 9); + +var fooRegion = cues[0].region; +assert_true(!!fooRegion, 'Cue 0 has invalid region'); + +var barRegion = cues[1].region; +assert_true(!!barRegion, 'Cue 1 has invalid region'); + +assert_not_equals(fooRegion, barRegion); + +var valid_regions = [ + fooRegion, + barRegion, + barRegion, + null, + fooRegion +]; +valid_regions.forEach(function(valid, index) { + assert_equals(cues[index].region, valid, 'Failed with cue ' + index); +}); + +for (var i = 0; i < 4; i++) { + var index = valid_regions.length + i; + + assert_equals(cues[index].region, null); +} + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-size.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-size.html new file mode 100644 index 0000000000..be0ee561cb --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-size.html @@ -0,0 +1,58 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/settings-size.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: settings, size</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('settings, size'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/settings-size.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 16); + +var valid_sizes = [ + 100, + 2, + 0, + 0, + 100, + 50, + 1.5, +]; +valid_sizes.forEach(function(valid, index) { + assert_equals(cues[index].size, valid, 'Failed with cue ' + index); +}); + +for (var i = 0; i < 9; i++) { + var index = valid_sizes.length + i; + + assert_equals(cues[index].size, 100, 'Failed with cue ' + index); +} + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-vertical.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-vertical.html new file mode 100644 index 0000000000..70af76588f --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/settings-vertical.html @@ -0,0 +1,55 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/settings-vertical.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: settings, size</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('settings, size'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/settings-vertical.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 8); + +var valid_vertical = [ + '', + 'lr', + 'rl', + 'lr', +]; +valid_vertical.forEach(function(valid, index) { + assert_equals(cues[index].vertical, valid, 'Failed with cue ' + index); +}); + +for (var i = 0; i < 4; i++) { + var index = valid_vertical.length + i; + + assert_equals(cues[index].vertical, '', 'Failed with cue ' + index); +} + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-bom.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-bom.html new file mode 100644 index 0000000000..6addc7bb69 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-bom.html @@ -0,0 +1,39 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/signature-bom.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: signature, bom</title> +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('signature, bom'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/signature-bom.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 0); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-no-newline.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-no-newline.html new file mode 100644 index 0000000000..e96915d3a3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-no-newline.html @@ -0,0 +1,39 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/signature-no-newline.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: signature, no newline</title> +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('signature, no newline'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/signature-no-newline.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 0); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-space-no-newline.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-space-no-newline.html new file mode 100644 index 0000000000..28a55f8f15 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-space-no-newline.html @@ -0,0 +1,39 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/signature-space-no-newline.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: signature, space, no newline</title> +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('signature, space, no newline'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/signature-space-no-newline.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 0); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-space.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-space.html new file mode 100644 index 0000000000..cfc1540947 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-space.html @@ -0,0 +1,39 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/signature-space.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: signature, space</title> +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('signature, space'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/signature-space.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 0); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-tab-no-newline.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-tab-no-newline.html new file mode 100644 index 0000000000..f4fd270df6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-tab-no-newline.html @@ -0,0 +1,39 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/signature-tab-no-newline.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: signature, tab, no newline</title> +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('signature, tab, no newline'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/signature-tab-no-newline.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 0); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-tab.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-tab.html new file mode 100644 index 0000000000..cd5df4c319 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-tab.html @@ -0,0 +1,39 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/signature-tab.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: signature, tab</title> +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('signature, tab'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/signature-tab.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 0); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-timings.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-timings.html new file mode 100644 index 0000000000..6394c89888 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/signature-timings.html @@ -0,0 +1,39 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/signature-timings.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: signature, timings</title> +<link rel="help" href="https://w3c.github.io/webvtt/#webvtt-parser-algorithm"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('signature, timings'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/signature-timings.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 0); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/stylesheets.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/stylesheets.html new file mode 100644 index 0000000000..48cd920c79 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/stylesheets.html @@ -0,0 +1,40 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/stylesheets.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: stylesheets, rules</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('stylesheets, rules'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/stylesheets.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +// There's no way to test the actual style from js +assert_equals(document.styleSheets.length, 0); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/arrows.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/arrows.vtt new file mode 100644 index 0000000000..30d17b9de1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/arrows.vtt @@ -0,0 +1,27 @@ +WEBVTT + +--> +00:00:00.000 --> 00:00:01.000 +text0 +foo--> +00:00:00.000 --> 00:00:01.000 +text1 +-->foo +00:00:00.000 --> 00:00:01.000 +text2 +---> +00:00:00.000 --> 00:00:01.000 +text3 +-->--> +00:00:00.000 --> 00:00:01.000 +text4 +00:00:00.000 --> 00:00:01.000 +text5 + +00:00:00.000 -a --> + +00:00:00.000 --a --> + +00:00:00.000 - --> + +00:00:00.000 -- --> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/comment-in-cue-text.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/comment-in-cue-text.vtt new file mode 100644 index 0000000000..47081905a7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/comment-in-cue-text.vtt @@ -0,0 +1,14 @@ +WEBVTT + +NOTE this is real comment that should be ignored + +00:00:00.000 --> 00:00:01.000 +NOTE text + +NOTE +this is also a real comment that should be ignored +this is also a real comment that should be ignored + +00:00:01.000 --> 00:00:02.000 +NOTE text +NOTE text2 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-garbage.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-garbage.vtt new file mode 100644 index 0000000000..0504e796be --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-garbage.vtt @@ -0,0 +1,5 @@ +WEBVTT +foobar + +00:00:00.000 --> 00:00:01.000 +text
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-regions.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-regions.vtt new file mode 100644 index 0000000000..81634c5cdc --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-regions.vtt @@ -0,0 +1,52 @@ +WEBVTT FILE + +REGION +id:region_without_settings + +REGION +id:region_with_all_settings width:32% +lines:5 +regionanchor:41%,20% viewportanchor:31%,84% +scroll:up + +REGION +id:region_floating_point_anchor +regionanchor:41.125%,20.25% viewportanchor:32.75%,32.5% + +REGION +id:not_unique_id width:42% + +REGION +id:not_unique_id +width:67% + +REGION +invalid_settings values but region still created +: Invalid Header + +00:00:00.000 --> 00:00:02.500 region:someregionattributeid +"no region" + +00:00:00.000 --> 00:00:02.500 line:5 region:ignored_attribute_value +"no region" + +00:00:00.000 --> 00:00:02.500 size:10% region:ignored_attribute_value +"no region" + +00:00:00.000 --> 00:00:02.500 vertical:lr region:ignored_attribute_value +"no region" + +00:00:03.000 --> 00:00:04.000 region:region_without_settings +{} + +00:00:04.000 --> 00:00:05.000 region:region_with_all_settings +{"width":32,"lines":5,"regionAnchorX":41,"regionAnchorY":20,"viewportAnchorX":31,"viewportAnchorY":84,"scroll":"up"} + +00:00:05.000 --> 00:00:06.000 region:region_floating_point_anchor +{"regionAnchorX":41.125,"regionAnchorY":20.25,"viewportAnchorX":32.75,"viewportAnchorY":32.5} + +00:00:06.000 --> 00:00:07.000 region:not_unique_id +{"width":67} + +00:00:07.000 --> 00:00:08.000 region: +"no region" diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-space.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-space.vtt new file mode 100644 index 0000000000..9462a1e7c1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-space.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:01.000 +text
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-tab.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-tab.vtt new file mode 100644 index 0000000000..76564a6e1a --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-tab.vtt @@ -0,0 +1,4 @@ +WEBVTT + +00:00:00.000 --> 00:00:01.000 +text diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-timings.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-timings.vtt new file mode 100644 index 0000000000..5442228eec --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/header-timings.vtt @@ -0,0 +1,3 @@ +WEBVTT +00:00:00.000 --> 00:00:01.000 +text
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/ids.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/ids.vtt new file mode 100644 index 0000000000..5f3e91f8a4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/ids.vtt @@ -0,0 +1,21 @@ +WEBVTT + + leading space +00:00:00.000 --> 00:00:01.000 +text0 + +trailing space +00:00:00.000 --> 00:00:01.000 +text1 + +-- > +00:00:00.000 --> 00:00:01.000 +text2 + +-> +00:00:00.000 --> 00:00:01.000 +text3 + + +00:00:00.000 --> 00:00:01.000 +text4 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/newlines.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/newlines.vtt new file mode 100644 index 0000000000..bde1c30e2c --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/newlines.vtt @@ -0,0 +1,12 @@ +WEBVTT
cr
00:00:00.000 --> 00:00:01.000
text0 + +lf +00:00:00.000 --> 00:00:01.000 +text1
+
+crlf
+00:00:00.000 --> 00:00:01.000
+text2 +
lfcr
00:00:00.000 --> 00:00:01.000 +text3 +
diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/nulls.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/nulls.vtt Binary files differnew file mode 100644 index 0000000000..fe6d193d63 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/nulls.vtt diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-edge-case.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-edge-case.vtt new file mode 100644 index 0000000000..29debd5bd8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-edge-case.vtt @@ -0,0 +1,44 @@ +WEBVTT + +NOTE valid + +REGION +id:foo lines:1 + +--> +REGION +id:foo +lines:2 +--> + +REGION +id:bill +lines:2 + +REGION +REGION +id:jill +lines:3 + +REGION +---> +id:jill lines:4 + +REGION +id:jack--> lines:5 + +REGION +id:jack lines:4 + +00:00:00.000 --> 00:00:01.000 region:foo +text + +00:00:00.000 --> 00:00:01.000 region:bill +text + +00:00:00.000 --> 00:00:01.000 region:jill +text + +00:00:00.000 --> 00:00:01.000 region:jack +text + diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-id.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-id.vtt new file mode 100644 index 0000000000..bbcc14d2cd --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-id.vtt @@ -0,0 +1,34 @@ +WEBVTT + +NOTE No API for accessing region ids, so using lines to uniquely identify regions + +REGION +id:foo +id:bar +lines:1 + +REGION +id:bar id:foo +lines:2 + +REGION +id:id +id: foo +id :bar +lines:3 + +REGION +id: +lines:4 + +00:00:00.000 --> 00:00:01.000 region:foo +valid + +00:00:00.000 --> 00:00:01.000 region:bar +valid + +00:00:00.000 --> 00:00:01.000 region:id +valid + +00:00:00.000 --> 00:00:01.000 region: +valid diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-lines.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-lines.vtt new file mode 100644 index 0000000000..d6397045aa --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-lines.vtt @@ -0,0 +1,98 @@ +WEBVTT + +NOTE valid + +REGION +id:1 +lines:0 + +REGION +id:2 +lines:1 + +REGION +id:3 +lines:100 + +REGION +id:4 +lines:101 + +REGION +id:5 +lines:65536 + +REGION +id:6 +lines:4294967296 + +REGION +id:7 +lines:18446744073709552000 + +REGION +id:8 +lines:10000000000000000000000000000000000 + +REGION +id:9 +lines:1 lines:3 +lines:2 + +NOTE invalid + +REGION +id:10 +lines:-0 + +REGION +id:11 +lines:1.5 + +REGION +id:12 +lines:-1 + +REGION +id:13 +lines: 1 +lines :1 + +00:00:00.000 --> 00:00:01.000 region:1 +text + +00:00:00.000 --> 00:00:01.000 region:2 +text + +00:00:00.000 --> 00:00:01.000 region:3 +text + +00:00:00.000 --> 00:00:01.000 region:4 +text + +00:00:00.000 --> 00:00:01.000 region:5 +text + +00:00:00.000 --> 00:00:01.000 region:6 +text + +00:00:00.000 --> 00:00:01.000 region:7 +text + +00:00:00.000 --> 00:00:01.000 region:8 +text + +00:00:00.000 --> 00:00:01.000 region:9 +text + +00:00:00.000 --> 00:00:01.000 region:10 +text + +00:00:00.000 --> 00:00:01.000 region:11 +text + +00:00:00.000 --> 00:00:01.000 region:12 +text + +00:00:00.000 --> 00:00:01.000 region:13 +text diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-old.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-old.vtt new file mode 100644 index 0000000000..f9b26659a8 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-old.vtt @@ -0,0 +1,9 @@ +WEBVTT +Region: id=foo width=40% lines=3 regionanchor=0%,100% viewportanchor=10%,90% scroll=up +Region: id=bar width=40% lines=3 regionanchor=100%,100% viewportanchor=90%,90% scroll=up + +00:00:00.000 --> 00:00:01.000 region:foo +text0 + +00:00:00.000 --> 00:00:01.000 region:bar +text1 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-regionanchor.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-regionanchor.vtt new file mode 100644 index 0000000000..e6aa770c37 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-regionanchor.vtt @@ -0,0 +1,149 @@ +WEBVTT + +NOTE valid + +REGION +id:0 + +REGION +id:1 +regionanchor:0%,0% + +REGION +id:2 +regionanchor:1%,1% + +REGION +id:3 +regionanchor:100%,0% + +REGION +id:4 +regionanchor:0%,100% + +REGION +id:5 +regionanchor:100%,100% + +NOTE invalid + +REGION +id:6 +regionanchor:0,0 + +REGION +id:7 +regionanchor:0%,0 + +REGION +id:8 +regionanchor:0,0% + +REGION +id:9 +regionanchor:1% + +REGION +id:10 +regionanchor:,1% + +REGION +id:11 +regionanchor:101%,1% + +REGION +id:12 +regionanchor:1%,101% + +REGION +id:13 +regionanchor:-0%,0% + +REGION +id:14 +regionanchor:0%,-0% + +REGION +id:15 +regionanchor:65536%,65536% + +REGION +id:16 +regionanchor:4294967296%,4294967296% + +REGION +id:17 +regionanchor:18446744073709552000%,18446744073709552000% + +REGION +id:18 +regionanchor:10000000000000000000000000000000000%,10000000000000000000000000000000000% + +REGION +id:19 +regionanchor: 100%,100% +regionanchor :100%,100% +regionanchor:100% ,100% +regionanchor:100%, 100% +regionanchor:100 %,100% +regionanchor:100%,100 % + +00:00:00.000 --> 00:00:01.000 region:0 +text + +00:00:00.000 --> 00:00:01.000 region:1 +text + +00:00:00.000 --> 00:00:01.000 region:2 +text + +00:00:00.000 --> 00:00:01.000 region:3 +text + +00:00:00.000 --> 00:00:01.000 region:4 +text + +00:00:00.000 --> 00:00:01.000 region:5 +text + +00:00:00.000 --> 00:00:01.000 region:6 +text + +00:00:00.000 --> 00:00:01.000 region:7 +text + +00:00:00.000 --> 00:00:01.000 region:8 +text + +00:00:00.000 --> 00:00:01.000 region:9 +text + +00:00:00.000 --> 00:00:01.000 region:10 +text + +00:00:00.000 --> 00:00:01.000 region:11 +text + +00:00:00.000 --> 00:00:01.000 region:12 +text + +00:00:00.000 --> 00:00:01.000 region:13 +text + +00:00:00.000 --> 00:00:01.000 region:14 +text + +00:00:00.000 --> 00:00:01.000 region:15 +text + +00:00:00.000 --> 00:00:01.000 region:16 +text + +00:00:00.000 --> 00:00:01.000 region:17 +text + +00:00:00.000 --> 00:00:01.000 region:18 +text + +00:00:00.000 --> 00:00:01.000 region:19 +text diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-scroll.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-scroll.vtt new file mode 100644 index 0000000000..4c7f21d935 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-scroll.vtt @@ -0,0 +1,46 @@ +WEBVTT + +REGION +id:0 + +REGION +id:1 +scroll:up + +REGION +id:2 +scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up +scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up scroll:up + +REGION +id:3 +scroll:down +scroll:left +scroll:right + +REGION +id:4 +scroll: up +scroll :up + +REGION +id:5 +scroll:up scroll: + +00:00:00.000 --> 00:00:01.000 region:0 +text + +00:00:00.000 --> 00:00:01.000 region:1 +text + +00:00:00.000 --> 00:00:01.000 region:2 +text + +00:00:00.000 --> 00:00:01.000 region:3 +text + +00:00:00.000 --> 00:00:01.000 region:4 +text + +00:00:00.000 --> 00:00:01.000 region:5 +text diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-viewportanchor.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-viewportanchor.vtt new file mode 100644 index 0000000000..7470be647c --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/regions-viewportanchor.vtt @@ -0,0 +1,149 @@ +WEBVTT + +NOTE valid + +REGION +id:0 + +REGION +id:1 +viewportanchor:0%,0% + +REGION +id:2 +viewportanchor:1%,1% + +REGION +id:3 +viewportanchor:100%,0% + +REGION +id:4 +viewportanchor:0%,100% + +REGION +id:5 +viewportanchor:100%,100% + +NOTE invalid + +REGION +id:6 +viewportanchor:0,0 + +REGION +id:7 +viewportanchor:0%,0 + +REGION +id:8 +viewportanchor:0,0% + +REGION +id:9 +viewportanchor:1% + +REGION +id:10 +viewportanchor:,1% + +REGION +id:11 +viewportanchor:101%,1% + +REGION +id:12 +viewportanchor:1%,101% + +REGION +id:13 +viewportanchor:-0%,0% + +REGION +id:14 +viewportanchor:0%,-0% + +REGION +id:15 +viewportanchor:65536%,65536% + +REGION +id:16 +viewportanchor:4294967296%,4294967296% + +REGION +id:17 +viewportanchor:18446744073709552000%,18446744073709552000% + +REGION +id:18 +viewportanchor:10000000000000000000000000000000000%,10000000000000000000000000000000000% + +REGION +id:19 +viewportanchor: 100%,100% +viewportanchor :100%,100% +viewportanchor:100% ,100% +viewportanchor:100%, 100% +viewportanchor:100 %,100% +viewportanchor:100%,100 % + +00:00:00.000 --> 00:00:01.000 region:0 +text + +00:00:00.000 --> 00:00:01.000 region:1 +text + +00:00:00.000 --> 00:00:01.000 region:2 +text + +00:00:00.000 --> 00:00:01.000 region:3 +text + +00:00:00.000 --> 00:00:01.000 region:4 +text + +00:00:00.000 --> 00:00:01.000 region:5 +text + +00:00:00.000 --> 00:00:01.000 region:6 +text + +00:00:00.000 --> 00:00:01.000 region:7 +text + +00:00:00.000 --> 00:00:01.000 region:8 +text + +00:00:00.000 --> 00:00:01.000 region:9 +text + +00:00:00.000 --> 00:00:01.000 region:10 +text + +00:00:00.000 --> 00:00:01.000 region:11 +text + +00:00:00.000 --> 00:00:01.000 region:12 +text + +00:00:00.000 --> 00:00:01.000 region:13 +text + +00:00:00.000 --> 00:00:01.000 region:14 +text + +00:00:00.000 --> 00:00:01.000 region:15 +text + +00:00:00.000 --> 00:00:01.000 region:16 +text + +00:00:00.000 --> 00:00:01.000 region:17 +text + +00:00:00.000 --> 00:00:01.000 region:18 +text + +00:00:00.000 --> 00:00:01.000 region:19 +text diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-align.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-align.vtt new file mode 100644 index 0000000000..3bcfe5ac4c --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-align.vtt @@ -0,0 +1,40 @@ +WEBVTT + +00:00:00.000 --> 00:00:01.000 +text0 + +00:00:00.000 --> 00:00:01.000 align:start +text1 + +00:00:00.000 --> 00:00:01.000 align:center +text2 + +00:00:00.000 --> 00:00:01.000 align:end +text3 + +00:00:00.000 --> 00:00:01.000 align:left +text4 + +00:00:00.000 --> 00:00:01.000 align:right +text5 + +00:00:00.000 --> 00:00:01.000 align:start align:end +text6 + +00:00:00.000 --> 00:00:01.000 align:end align:CENTER +text7 + +00:00:00.000 --> 00:00:01.000 align:end align: center +text8 + +00:00:00.000 --> 00:00:01.000 align:end align: +text9 + +00:00:00.000 --> 00:00:01.000 align:end align:middle +text10 + +00:00:00.000 --> 00:00:01.000 align:end align +text11 + +00:00:00.000 --> 00:00:01.000 align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:end align:center +text12 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-line.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-line.vtt new file mode 100644 index 0000000000..03ce64a1cf --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-line.vtt @@ -0,0 +1,154 @@ +WEBVTT + +NOTE valid + +00:00:00.000 --> 00:00:01.000 line:-1 +valid0 + +00:00:00.000 --> 00:00:01.000 line:0 +valid1 + +00:00:00.000 --> 00:00:01.000 line:-0 +valid2 + +00:00:00.000 --> 00:00:01.000 line:1 +valid3 + +00:00:00.000 --> 00:00:01.000 line:100 +valid4 + +00:00:00.000 --> 00:00:01.000 line:101 +valid5 + +00:00:00.000 --> 00:00:01.000 line:65536 +valid6 + +00:00:00.000 --> 00:00:01.000 line:4294967296 +valid7 + +00:00:00.000 --> 00:00:01.000 line:18446744073709552000 +valid8 + +00:00:00.000 --> 00:00:01.000 line:10000000000000000000000000000000000 +valid9 + +00:00:00.000 --> 00:00:01.000 line:1.5 +valid10 + +Number.MAX_VALUE +00:00:00.000 --> 00:00:01.000 line:179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 +valid11 + +-1 * Number.MAX_VALUE +00:00:00.000 --> 00:00:01.000 line:-179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 +valid12 + +Number.MIN_VALUE +00:00:00.000 --> 00:00:01.000 line:0.000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000005 +valid13 + +Less than Number.MIN_VALUE +00:00:00.000 --> 00:00:01.000 line:0.000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002 +valid14 + +NOTE invalid + +00:00:00.000 --> 00:00:01.000 line:65536% +invalid15 + +00:00:00.000 --> 00:00:01.000 line:4294967296% +invalid16 + +00:00:00.000 --> 00:00:01.000 line:18446744073709552000% +invalid17 + +00:00:00.000 --> 00:00:01.000 line:10000000000000000000000000000000000% +invalid18 + +00:00:00.000 --> 00:00:01.000 line:-0% +invalid19 + +00:00:00.000 --> 00:00:01.000 line:101% +invalid20 + +00:00:00.000 --> 00:00:01.000 line:1%- +invalid21 + +00:00:00.000 --> 00:00:01.000 line:1- +invalid22 + +00:00:00.000 --> 00:00:01.000 line:%1 +invalid23 + +00:00:00.000 --> 00:00:01.000 line:1%% +invalid24 + +00:00:00.000 --> 00:00:01.000 line:0%0 +invalid25 + +00:00:00.000 --> 00:00:01.000 line: 0% +invalid26 + +00:00:00.000 --> 00:00:01.000 line:0%x +invalid27 + +00:00:00.000 --> 00:00:01.000 line:- +invalid28 + +00:00:00.000 --> 00:00:01.000 line:% +invalid29 + +00:00:00.000 --> 00:00:01.000 line:1..5 +invalid30 + +00:00:00.000 --> 00:00:01.000 line:.5 +invalid31 + +00:00:00.000 --> 00:00:01.000 line:5. +invalid32 + +Greater than Number.MAX_VALUE +00:00:00.000 --> 00:00:01.000 line:179769313486231590000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 +invalid33 + +Less than -1 * Number.MAX_VALUE +00:00:00.000 --> 00:00:01.000 line:-179769313486231590000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 +invalid34 + +exponential notation +00:00:00.000 --> 00:00:01.000 line:1e2 +invalid35 + +00:00:00.000 --> 00:00:01.000 line:100%,middle +invalid36 + +00:00:00.000 --> 00:00:01.000 line:100%, +invalid37 + +NOTE extra + +00:00:00.000 --> 00:00:01.000 line:0% +text38 + +00:00:00.000 --> 00:00:01.000 line:00% +text39 + +00:00:00.000 --> 00:00:01.000 line:100% +text40 + +00:00:00.000 --> 00:00:01.000 line:100%,start +text41 + +00:00:00.000 --> 00:00:01.000 line:100%,center +text42 + +00:00:00.000 --> 00:00:01.000 line:100%,end +text43 + +Number.MIN_VALUE % +00:00:00.000 --> 00:00:01.000 line:0.000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000005% +text44 + +Less than Number.MIN_VALUE % +00:00:00.000 --> 00:00:01.000 line:0.000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002% +text45 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-multiple.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-multiple.vtt new file mode 100644 index 0000000000..17035a2a42 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-multiple.vtt @@ -0,0 +1,9 @@ +WEBVTT + +id0 +00:00:00.000 --> 00:00:01.000 align:start line:1% vertical:lr size:50% position:25% +text0 + +id1 +00:00:00.000 --> 00:00:01.000 align:center line:1 vertical:rl size:0% position:100% +text1 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-position.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-position.vtt new file mode 100644 index 0000000000..9ded1a67a3 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-position.vtt @@ -0,0 +1,71 @@ +WEBVTT + +NOTE valid + +00:00:00.000 --> 00:00:01.000 position:1% +text0 + +00:00:00.000 --> 00:00:01.000 position:100% +text1 + +00:00:00.000 --> 00:00:01.000 position:1% position:x +text2 + +00:00:00.000 --> 00:00:01.000 position:1.5% +text3 + +00:00:00.000 --> 00:00:01.000 position:1%,line-left +text4 + +00:00:00.000 --> 00:00:01.000 position:1%,center +text5 + +00:00:00.000 --> 00:00:01.000 position:1%,line-right +text6 + +00:00:00.000 --> 00:00:01.000 position:1% ,center +text7 + +NOTE invalid + +00:00:00.000 --> 00:00:01.000 position:1%,middle +invalid8 + +00:00:00.000 --> 00:00:01.000 position:1%, center +invalid9 + +00:00:00.000 --> 00:00:01.000 position:-1% +invalid10 + +00:00:00.000 --> 00:00:01.000 position:1 +invalid11 + +00:00:00.000 --> 00:00:01.000 position:1x +invalid12 + +00:00:00.000 --> 00:00:01.000 position:1%x +invalid13 + +00:00:00.000 --> 00:00:01.000 position: +invalid14 + +00:00:00.000 --> 00:00:01.000 position: 1% +invalid15 + +00:00:00.000 --> 00:00:01.000 position:101% +invalid16 + +00:00:00.000 --> 00:00:01.000 position:65536% +invalid17 + +00:00:00.000 --> 00:00:01.000 position:4294967296% +invalid18 + +00:00:00.000 --> 00:00:01.000 position:101%,line-left +invalid19 + +00:00:00.000 --> 00:00:01.000 position:101%,center +invalid20 + +00:00:00.000 --> 00:00:01.000 position:101%,line-right +invalid21 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-region.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-region.vtt new file mode 100644 index 0000000000..9116d37367 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-region.vtt @@ -0,0 +1,40 @@ +WEBVTT + +REGION +id:foo + +REGION +id:bar + +REGION +id:foo + +REGION +width:10% + +00:00:00.000 --> 00:00:01.000 region:foo +text0 + +00:00:00.000 --> 00:00:01.000 region:bar +text1 + +00:00:00.000 --> 00:00:01.000 region:foo region:bar +text2 + +00:00:00.000 --> 00:00:01.000 region:invalid +text3 + +00:00:00.000 --> 00:00:01.000 region:invalid region:foo +text4 + +00:00:00.000 --> 00:00:01.000 region: +invalid5 + +00:00:00.000 --> 00:00:01.000 region: +invalid6 + +00:00:00.000 --> 00:00:01.000 region: foo +invalid7 + +00:00:00.000 --> 00:00:01.000 region :foo +invalid8 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-size.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-size.vtt new file mode 100644 index 0000000000..9c2cb8a78c --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-size.vtt @@ -0,0 +1,53 @@ +WEBVTT + +NOTE valid + +00:00:00.000 --> 00:00:01.000 +text0 + +00:00:00.000 --> 00:00:01.000 size:1xx size:2% +text1 + +00:00:00.000 --> 00:00:01.000 size:0% +text2 + +00:00:00.000 --> 00:00:01.000 size:00% +text3 + +00:00:00.000 --> 00:00:01.000 size:50% size:100% +text4 + +00:00:00.000 --> 00:00:01.000 size:50% size:101% +text5 + +00:00:00.000 --> 00:00:01.000 size:1.5% +text6 + +NOTE invalid + +00:00:00.000 --> 00:00:01.000 size: +invalid7 + +00:00:00.000 --> 00:00:01.000 size:x +invalid8 + +00:00:00.000 --> 00:00:01.000 size:% +invalid9 + +00:00:00.000 --> 00:00:01.000 size:%% +invalid10 + +00:00:00.000 --> 00:00:01.000 size:1%% +invalid11 + +00:00:00.000 --> 00:00:01.000 size:1%x +invalid12 + +00:00:00.000 --> 00:00:01.000 size:101% +invalid13 + +00:00:00.000 --> 00:00:01.000 size:-3% +invalid14 + +00:00:00.000 --> 00:00:01.000 size:200% +invalid15 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-vertical.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-vertical.vtt new file mode 100644 index 0000000000..f24c86eaa9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/settings-vertical.vtt @@ -0,0 +1,25 @@ +WEBVTT + +00:00:00.000 --> 00:00:01.000 +text0 + +00:00:00.000 --> 00:00:01.000 vertical:lr +text1 + +00:00:00.000 --> 00:00:01.000 vertical:rl +text2 + +00:00:00.000 --> 00:00:01.000 vertical:rl vertical:lr +text3 + +00:00:00.000 --> 00:00:01.000 vertical: +invalid4 + +00:00:00.000 --> 00:00:01.000 vertical:RL +invalid5 + +00:00:00.000 --> 00:00:01.000 vertical: rl +invalid6 + +00:00:00.000 --> 00:00:01.000 vertical:vertical-rl +invalid7 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-bom.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-bom.vtt new file mode 100644 index 0000000000..c0a1057770 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-bom.vtt @@ -0,0 +1 @@ +WEBVTT diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-no-newline.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-no-newline.vtt new file mode 100644 index 0000000000..af1827ddf9 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-no-newline.vtt @@ -0,0 +1 @@ +WEBVTT
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-space-no-newline.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-space-no-newline.vtt new file mode 100644 index 0000000000..6abbf425ae --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-space-no-newline.vtt @@ -0,0 +1 @@ +WEBVTT
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-space.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-space.vtt new file mode 100644 index 0000000000..1352a20931 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-space.vtt @@ -0,0 +1 @@ +WEBVTT diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-tab-no-newline.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-tab-no-newline.vtt new file mode 100644 index 0000000000..e28ec9b83b --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-tab-no-newline.vtt @@ -0,0 +1 @@ +WEBVTT
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-tab.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-tab.vtt new file mode 100644 index 0000000000..ab4bb0ea6f --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-tab.vtt @@ -0,0 +1 @@ +WEBVTT diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-timings.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-timings.vtt new file mode 100644 index 0000000000..067c284f93 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/signature-timings.vtt @@ -0,0 +1,2 @@ +WEBVTT 00:00:00.000 --> 00:00:01.000 +text diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/stylesheets.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/stylesheets.vtt new file mode 100644 index 0000000000..409718af07 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/stylesheets.vtt @@ -0,0 +1,29 @@ +WEBVTT + +STYLE +::cue(#foo) { + width: 20px; +} /* +NOTE hello +00:00:00.000 -- > 00:00:01.000 +*/ +.foo { + width: 19px; +} + +.bar { + width: 18px; +} + +foo +00:00:00.000 --> 00:00:01.000 +text + +STYLE +::cue(::bar) { + width: 18px; +} + +bar +00:00:00.000 --> 00:00:01.000 +text diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-60.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-60.vtt new file mode 100644 index 0000000000..68475fbbaa --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-60.vtt @@ -0,0 +1,19 @@ +WEBVTT + +00:00:60.000 --> 00:00:01.000 +invalid + +00:60:00.000 --> 00:00:01.000 +invalid + +00:00:00.000 --> 00:00:60.000 +invalid + +00:00:00.000 --> 00:60:00.000 +invalid + +00:00:00.000 --> 60:00:01.000 +text1 + +60:00:00.000 --> 60:00:01.000 +text2 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-eof.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-eof.vtt new file mode 100644 index 0000000000..470221d29c --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-eof.vtt @@ -0,0 +1,3 @@ +WEBVTT + +00:00:00.000 -->
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-garbage.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-garbage.vtt new file mode 100644 index 0000000000..16291237a2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-garbage.vtt @@ -0,0 +1,190 @@ +WEBVTT + +x00:00:00.000 --> 00:00:01.000 +invalid + +0x0:00:00.000 --> 00:00:01.000 +invalid + +00x:00:00.000 --> 00:00:01.000 +invalid + +00:x00:00.000 --> 00:00:01.000 +invalid + +00:0x0:00.000 --> 00:00:01.000 +invalid + +00:00x:00.000 --> 00:00:01.000 +invalid + +00:00:x00.000 --> 00:00:01.000 +invalid + +00:00:0x0.000 --> 00:00:01.000 +invalid + +00:00:00x.000 --> 00:00:01.000 +invalid + +00:00:00.x000 --> 00:00:01.000 +invalid + +00:00:00.0x00 --> 00:00:01.000 +invalid + +00:00:00.00x0 --> 00:00:01.000 +invalid + +00:00:00.000x --> 00:00:01.000 +invalid + +00:00:00.000 x--> 00:00:01.000 +invalid + +00:00:00.000 -x-> 00:00:01.000 +invalid + +00:00:00.000 --x> 00:00:01.000 +invalid + +00:00:00.000 -->x 00:00:01.000 +invalid + +00:00:00.000 --> x00:00:01.000 +invalid + +00:00:00.000 --> 0x0:00:01.000 +invalid + +00:00:00.000 --> 00x:00:01.000 +invalid + +00:00:00.000 --> 00:x00:01.000 +invalid + +00:00:00.000 --> 00:0x0:01.000 +invalid + +00:00:00.000 --> 00:00x:01.000 +invalid + +00:00:00.000 --> 00:00:x01.000 +invalid + +00:00:00.000 --> 00:00:0x1.000 +invalid + +00:00:00.000 --> 00:00:01x.000 +invalid + +00:00:00.000 --> 00:00:01.x000 +invalid + +00:00:00.000 --> 00:00:01.0x00 +invalid + +00:00:00.000 --> 00:00:01.00x0 +invalid + +x0:00:00.000 --> 00:00:01.000 +invalid + +0x:00:00.000 --> 00:00:01.000 +invalid + +00x00:00.000 --> 00:00:01.000 +invalid + +00:x0:00.000 --> 00:00:01.000 +invalid + +00:0x:00.000 --> 00:00:01.000 +invalid + +00:00x00.000 --> 00:00:01.000 +invalid + +00:00:x0.000 --> 00:00:01.000 +invalid + +00:00:0x.000 --> 00:00:01.000 +invalid + +00:00:00x000 --> 00:00:01.000 +invalid + +00:00:00.x00 --> 00:00:01.000 +invalid + +00:00:00.0x0 --> 00:00:01.000 +invalid + +00:00:00.00x --> 00:00:01.000 +invalid + +00:00:00.000x--> 00:00:01.000 +invalid + +00:00:00.000 x-> 00:00:01.000 +invalid + +00:00:00.000 -x> 00:00:01.000 +invalid + +00:00:00.000 --x 00:00:01.000 +invalid + +00:00:00.000 -->x00:00:01.000 +invalid + +00:00:00.000 --> x0:00:01.000 +invalid + +00:00:00.000 --> 0x:00:01.000 +invalid + +00:00:00.000 --> 00x00:01.000 +invalid + +00:00:00.000 --> 00:x0:01.000 +invalid + +00:00:00.000 --> 00:0x:01.000 +invalid + +00:00:00.000 --> 00:00x01.000 +invalid + +00:00:00.000 --> 00:00:x1.000 +invalid + +00:00:00.000 --> 00:00:0x.000 +invalid + +00:00:00.000 --> 00:00:01x000 +invalid + +00:00:00.000 --> 00:00:01.x00 +invalid + +00:00:00.000 --> 00:00:01.0x0 +invalid + +00:00:00.000 --> 00:00:01.00x +invalid + +00.00:00.000 --> 00:00:01.000 +invalid + +00:00.00.000 --> 00:00:01.000 +invalid + +00:00:00:000 --> 00:00:01.000 +invalid + +00:00.00:000 --> 00:00:01.000 +invalid + +00:00:00,000 --> 00:00:01,000 +invalid
\ No newline at end of file diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-negative.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-negative.vtt new file mode 100644 index 0000000000..fb3589d8a1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-negative.vtt @@ -0,0 +1,13 @@ +WEBVTT + +00:00:00.000 --> 00:00:00.000 +text0 + +00:00:01.000 --> 00:00:00.999 +text1 + +00:01:00.000 --> 00:00:59.999 +text2 + +01:00:00.000 --> 00:59:59.999 +text3 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-omitted-hours.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-omitted-hours.vtt new file mode 100644 index 0000000000..f581ae3025 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-omitted-hours.vtt @@ -0,0 +1,10 @@ +WEBVTT + +00:00.000 --> 00:00:01.000 +text0 + +00:00:00.000 --> 00:01.000 +text1 + +00:00.000 --> 00:01.000 +text2 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-too-long.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-too-long.vtt new file mode 100644 index 0000000000..6357f8dccc --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-too-long.vtt @@ -0,0 +1,46 @@ +WEBVTT + +000:00:00.000 --> 00:00:01.000 +text0 + +00::00:00.000 --> 00:00:01.000 +invalid + +00:000:00.000 --> 00:00:01.000 +invalid + +00:00::00.000 --> 00:00:01.000 +invalid + +00:00:000.000 --> 00:00:01.000 +invalid + +00:00:00..000 --> 00:00:01.000 +invalid + +00:00:00.0000 --> 00:00:01.000 +invalid + +00:00.0000 --> 00:00:01.000 +invalid + +000:00.000 --> 00:01.000 +invalid + +00::00.000 --> 00:01.000 +invalid + +00:000.000 --> 00:01.000 +invalid + +00:00..000 --> 00:01.000 +invalid + +00:00.0000 --> 00:01.000 +invalid + +00:00.000 --> 000:01.000 +invalid + +00:00:00.000 --> 000:00:01.000 +text1 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-too-short.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-too-short.vtt new file mode 100644 index 0000000000..78d190a7bc --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/timings-too-short.vtt @@ -0,0 +1,97 @@ +WEBVTT + +0:00:00.000 --> 00:00:01.000 +text0 + +0000:00.000 --> 00:00:01.000 +invalid + +00:0:00.000 --> 00:00:01.000 +invalid + +00:0000.000 --> 00:00:01.000 +invalid + +00:00:0.000 --> 00:00:01.000 +invalid + +00:00:00000 --> 00:00:01.000 +invalid + +00:00:00.00 --> 00:00:01.000 +invalid + +00:00:00.0 --> 00:00:01.000 +invalid + +00:00:00. --> 00:00:01.000 +invalid + +00:00:00 --> 00:00:01.000 +invalid + +00:00:0 --> 00:00:01.000 +invalid + +00:00: --> 00:00:01.000 +invalid + +00:00 --> 00:00:01.000 +invalid + +00:0 --> 00:00:01.000 +invalid + +00: --> 00:00:01.000 +invalid + +00 --> 00:00:01.000 +invalid + +0 --> 00:00:01.000 +invalid + + --> 00:00:01.000 +invalid + +0:00.000 --> 00:01.000 +invalid + +0000.000 --> 00:01.000 +invalid + +00:0.000 --> 00:01.000 +invalid + +00:00000 --> 00:01.000 +invalid + +00:00.00 --> 00:01.000 +invalid + +00:00.0 --> 00:01.000 +invalid + +00:00. --> 00:01.000 +invalid + +0:00. --> 00:01.000 +invalid + +:00. --> 00:01.000 +invalid + +00. --> 00:01.000 +invalid + +0. --> 00:01.000 +invalid + +. --> 00:01.000 +invalid + +00:00.000 --> 0:01.000 +invalid + +00:00:00.000 --> 0:00:01.000 +text1 diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/whitespace-chars.vtt b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/whitespace-chars.vtt new file mode 100644 index 0000000000..b26c93cd19 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/support/whitespace-chars.vtt @@ -0,0 +1,17 @@ +WEBVTT + +spaces + 00:00:00.000 --> 00:00:01.000 + text0 + +tabs + 00:00:00.000 --> 00:00:01.000 +text1 + +form feed + 00:00:00.000 --> 00:00:01.000 +text2 + +vertical tab + 00:00:00.000 --> 00:00:01.000 +invalid diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-60.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-60.html new file mode 100644 index 0000000000..ddc21a0915 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-60.html @@ -0,0 +1,47 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/timings-60.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: timings, 60</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('timings, 60'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/timings-60.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 2); + +assert_equals(cues[0].text, 'text1'); +assert_equals(cues[0].startTime, 0); +assert_equals(cues[0].endTime, 216001); + +assert_equals(cues[1].text, 'text2'); +assert_equals(cues[1].startTime, 216000); +assert_equals(cues[1].endTime, 216001); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-eof.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-eof.html new file mode 100644 index 0000000000..3750cfb703 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-eof.html @@ -0,0 +1,39 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/timings-eof.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: timings, eof</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('timings, eof'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/timings-eof.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 0); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-garbage.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-garbage.html new file mode 100644 index 0000000000..4af3ca47f1 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-garbage.html @@ -0,0 +1,40 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/timings-garbage.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: timings, garbage</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp"> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('timings, garbage'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/timings-garbage.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 0); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-negative.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-negative.html new file mode 100644 index 0000000000..5645de6e27 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-negative.html @@ -0,0 +1,53 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/timings-negative.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: timings, negative</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('timings, negative'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/timings-negative.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 4); + +[ + [0, 0], + [1, 0.999], + [60, 59.999], + [3600, 3599.999], +].forEach(function(pair, index) { + var startTime = pair[0]; + var endTime = pair[1]; + + assert_equals(cues[index].text, 'text' + index, 'Failed with cue ' + index); + assert_equals(cues[index].startTime, startTime, 'Failed with cue ' + index); + assert_equals(cues[index].endTime, endTime, 'Failed with cue ' + index); +}); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-omitted-hours.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-omitted-hours.html new file mode 100644 index 0000000000..89c6f67896 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-omitted-hours.html @@ -0,0 +1,45 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/timings-omitted-hours.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: timings, omitted hours</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('timings, omitted hours'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/timings-omitted-hours.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 3); + +Array.from(cues).forEach(function(cue, index) { + assert_equals(cue.text, 'text' + index, 'Failed with cue ' + index); + assert_equals(cue.startTime, 0, 'Failed with cue ' + index); + assert_equals(cue.endTime, 1, 'Failed with cue ' + index); +}); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-too-long.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-too-long.html new file mode 100644 index 0000000000..5270c62173 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-too-long.html @@ -0,0 +1,47 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/timings-too-long.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: timings, too long</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('timings, too long'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/timings-too-long.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 2); + +assert_equals(cues[0].text, 'text0'); +assert_equals(cues[0].startTime, 0); +assert_equals(cues[0].endTime, 1); + +assert_equals(cues[1].text, 'text1'); +assert_equals(cues[1].startTime, 0); +assert_equals(cues[1].endTime, 1); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-too-short.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-too-short.html new file mode 100644 index 0000000000..3295260d44 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/timings-too-short.html @@ -0,0 +1,47 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/timings-too-short.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: timings, too short</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('timings, too short'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/timings-too-short.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 2); + +assert_equals(cues[0].text, 'text0'); +assert_equals(cues[0].startTime, 0); +assert_equals(cues[0].endTime, 1); + +assert_equals(cues[1].text, 'text1'); +assert_equals(cues[1].startTime, 0); +assert_equals(cues[1].endTime, 1); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/whitespace-chars.html b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/whitespace-chars.html new file mode 100644 index 0000000000..92ecf7e0c2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tests/whitespace-chars.html @@ -0,0 +1,48 @@ +<!doctype html> +<!-- DO NOT EDIT! This file and support/whitespace-chars.vtt are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: whitespace chars</title> +<link rel="help" href="https://w3c.github.io/webvtt/#collect-a-webvtt-block"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('whitespace chars'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = 'support/whitespace-chars.vtt'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +assert_equals(cues.length, 3); + +assert_equals(cues[0].id, 'spaces'); +assert_equals(cues[0].text, ' text0'); + +assert_equals(cues[1].id, 'tabs'); +assert_equals(cues[1].text, 'text1'); + +assert_equals(cues[2].id, 'form feed'); +assert_equals(cues[2].text, 'text2'); + + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/build.py b/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/build.py new file mode 100644 index 0000000000..d4c0fdf78d --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/build.py @@ -0,0 +1,120 @@ +import os +import glob +import shutil +from os import path + + +TEST_FILE_PATTERN = "support/**.test" +TEST_OUTPUT_PATH = "tests" + +TEMPLATE = """\ +<!doctype html> +<!-- DO NOT EDIT! This file and %vtt_file_rel_path are generated. --> +<!-- See /webvtt/parsing/file-parsing/README.md --> +<meta charset=utf-8> +<title>WebVTT parser test: %test_name</title> +%test_headers +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=log></div> +<script> +var t = async_test('%test_name'); +t.step(function(){ + var video = document.createElement('video'); + var track = document.createElement('track'); + assert_true('src' in track, 'track element not supported'); + track.src = '%vtt_file_rel_path'; + track['default'] = true; + track.kind = 'subtitles'; + track.onload = this.step_func(trackLoaded); + track.onerror = this.step_func(trackError); + video.appendChild(track); + document.body.appendChild(video); +}); + +function trackLoaded(event) { + var track = event.target; + var video = track.parentNode; + var cues = video.textTracks[0].cues; + { +%test_js + } + this.done(); +} + +function trackError(e) { + assert_unreached('got unexpected error event'); +} +</script> +""" + +def generate_test(test_path, output_dir): + # Read test file + test_filename = path.basename(test_path) + test_basefilename = path.splitext(test_filename)[0] + + with open(test_path, 'r') as test: + test_source = test.read() + + # Split test header + splits = test_source.split('\n\n', 1) + if len(splits) != 2: + raise ValueError("Leave an empty line between the test header and body") + + test_header, test_body = splits + + # Split header into name + html headers + splits = test_header.split('\n', 1) + + test_name = splits[0] + if len(splits) == 2: + test_headers = splits[1] + + # Split body into js + vtt + splits = test_body.split('\n===\n', 1) + if len(splits) != 2: + raise ValueError("Use === to separate the js and vtt parts") + + test_js, test_vtt = splits + + # Get output paths + os.makedirs(output_dir, exist_ok=True) + html_file_path = path.join(output_dir, test_basefilename + '.html') + + vtt_file_dir = path.join(output_dir, 'support') + os.makedirs(vtt_file_dir, exist_ok=True) + + vtt_file_name = test_basefilename + '.vtt' + vtt_file_path = path.join(vtt_file_dir, vtt_file_name) + vtt_file_rel_path = path.join('support', vtt_file_name) + + # Write html file + with open(html_file_path, 'w') as output: + html = (TEMPLATE.replace('%test_name', test_name) + .replace('%test_headers', test_headers) + .replace('%test_js', test_js) + .replace('%vtt_file_rel_path', vtt_file_rel_path)) + output.write(html) + + # Write vtt file + with open(vtt_file_path, 'w') as output: + encoded = bytes(test_vtt, "utf-8").decode("unicode_escape") + output.write(encoded) + +def main(): + file_parsing_path = path.normpath(path.join(path.dirname(__file__), "..")) + + test_output_path = path.join(file_parsing_path, TEST_OUTPUT_PATH) + + tests_pattern = path.join(file_parsing_path, TEST_FILE_PATTERN) + + # Clean test directory + shutil.rmtree(test_output_path) + + # Generate tests + for file in glob.glob(tests_pattern): + print('Building test files for: ' + file) + generate_test(file, test_output_path) + +if __name__ == '__main__': + main() diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/parser.py b/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/parser.py new file mode 100644 index 0000000000..b77e83de78 --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/parser.py @@ -0,0 +1,710 @@ +""" +A direct translation of the webvtt file parsing algorithm. + +See https://w3c.github.io/webvtt/#file-parsing for documentation +""" +import re +import string + +SPACE_CHARACTERS = [' ', '\t', '\n', '\f', '\r'] +SPACE_SPLIT_PATTERN = r"[{}]*".format(''.join(SPACE_CHARACTERS)) +DIGITS = string.digits + +class DictInit: + def __init__(self, **dict): + self.__dict__.update(dict) + +class VTTCue(DictInit): pass +class VTTRegion(DictInit): pass +class Stylesheet(DictInit): pass + +class W3CParser: + input = None + position = None + + def collect_characters(self, condition): + result = "" + while self.position < len(self.input) and condition(self.input[self.position]): + result += self.input[self.position] + self.position += 1 + return result + + def skip_whitespace(self): + self.collect_characters(lambda c: c in SPACE_CHARACTERS) + + def parse_percentage_string(self, input): + 'parse a percentage string' + + # 1. + input = input + + # 2. + if not re.match(r'^\d+(\.\d+)?%$', input): + return None + + # 3. + percentage = float(input[:-1]) + + # 4. + if percentage < 0 or percentage > 100: + return None + + # 5. + return percentage + +class VTTParser(W3CParser): + def __init__(self, input): + self.input = input + self.position = 0 + self.seen_cue = False + + self.text_tracks = [] + self.stylesheets = [] + self.regions = [] + self.errors = [] + + def parse(self): + 'WebVTT parser algorithm' + + # 1. + self.input = self.input.replace('\0', '\ufffd').replace('\r\n', '\n').replace('\r', '\n') + + # 2. + self.position = 0 + + # 3. + self.seen_cue = False + + # 4. + if len(self.input) < 6: + self.errors.append('input too small for webvtt') + return + + # 5. + if len(self.input) == 6 and self.input != 'WEBVTT': + self.errors.append('invalid webvtt header') + return + + # 6. + if len(self.input) > 6: + if not (self.input[0:6] == 'WEBVTT' and self.input[6] in ['\u0020', '\u0009', '\u000A']): + self.errors.append('invalid webvtt header') + return + + # 7. + self.collect_characters(lambda c: c != '\n') + + # 8. + if self.position >= len(self.input): + return + + # 9. + if self.input[self.position] == '\n': + self.position += 1 + + # 10. + if self.position >= len(self.input): + return + + # 11. + if self.input[self.position] != '\n': + self.collect_block(in_header = True) + else: + self.position += 1 + + # 12. + self.collect_characters(lambda c: c == '\n') + + # 13. + self.regions = [] + + # 14. + while self.position < len(self.input): + # 1. + block = self.collect_block() + + # 2. + if isinstance(block, VTTCue): + self.text_tracks.append(block) + + # 3. + elif isinstance(block, Stylesheet): + self.stylesheets.append(block) + + # 4. + elif isinstance(block, VTTRegion): + self.regions.append(block) + + # 5. + self.collect_characters(lambda c: c == '\n') + + # 15. + return + + def collect_block(self, in_header = False): + 'collect a WebVTT block' + + # 1. (done by class) + + line_count = 0 # 2. + previous_position = self.position # 3. + line = "" # 4. + buffer = "" # 5. + seen_eof = False # 6. + seen_arrow = False # 7. + cue = None # 8. + stylesheet = None # 9. + region = None # 10. + + # 11. + while True: + # 1. + line = self.collect_characters(lambda c: c != '\n') + + # 2. + line_count += 1 + + # 3. + if self.position >= len(self.input): + seen_eof = True + else: + self.position += 1 + + # 4. + if '-->' in line: + # 1. + if not in_header and (line_count == 1 or line_count == 2 and not seen_arrow): + # 1. + seen_arrow = True + + # 2. + previous_position = self.position + + # 3. + cue = VTTCue( + id = buffer, + pause_on_exit = False, + region = None, + writing_direction = 'horizontal', + snap_to_lines = True, + line = 'auto', + line_alignment = 'start alignment', + position = 'auto', + position_alignment = 'auto', + cue_size = 100, + text_alignment = 'center', + text = '', + ) + + # 4. + if not VTTCueParser(self, line, cue).collect_cue_timings_and_settings(): + cue = None + else: + buffer = '' + self.seen_cue = True # DIFFERENCE + + else: + self.errors.append('invalid webvtt cue block') + self.position = previous_position + break + + # 5. + elif line == '': + break + + # 6. + else: + # 1. + if not in_header and line_count == 2: + # 1. + if not self.seen_cue and re.match(r'^STYLE\s*$', buffer): + stylesheet = Stylesheet( + location = None, + parent = None, + owner_node = None, + owner_rule = None, + media = None, + title = None, + alternate = False, + origin_clean = True, + source = None, + ) + buffer = '' + # 2. + elif not self.seen_cue and re.match(r'^REGION\s*$', buffer): + region = VTTRegion( + id = '', + width = 100, + lines = 3, + anchor_point = (0, 100), + viewport_anchor_point = (0, 100), + scroll_value = None, + ) + buffer = '' + + # 2. + if buffer != '': + buffer += '\n' + + # 3. + buffer += line + + # 4. + previous_position = self.position + + # 7. + if seen_eof: + break + + # 12. + if cue is not None: + cue.text = buffer + return cue + + # 13. + elif stylesheet is not None: + stylesheet.source = buffer + return stylesheet + + # 14. + elif region is not None: + self.collect_region_settings(region, buffer) + return region + + # 15. + return None + + def collect_region_settings(self, region, input): + 'collect WebVTT region settings' + + # 1. + settings = re.split(SPACE_SPLIT_PATTERN, input) + + # 2. + for setting in settings: + # 1. + if ':' not in setting: + continue + + index = setting.index(':') + if index in [0, len(setting) - 1]: + continue + + # 2. + name = setting[:index] + + # 3. + value = setting[index + 1:] + + # 4. + if name == "id": + region.id = value + + elif name == "width": + percentage = self.parse_percentage_string(value) + if percentage is not None: + region.width = percentage + + elif name == "lines": + # 1. + if not re.match(r'^\d+$', value): + continue + + # 2. + number = int(value) + + # 3. + region.lines = number + + elif name == "regionanchor": + # 1. + if ',' not in value: + continue + + #. 2. + index = value.index(',') + anchorX = value[:index] + + # 3. + anchorY = value[index + 1:] + + # 4. + percentageX = self.parse_percentage_string(anchorX) + percentageY = self.parse_percentage_string(anchorY) + if None in [percentageX, percentageY]: + continue + + # 5. + region.anchor_point = (percentageX, percentageY) + + elif name == "viewportanchor": + # 1. + if ',' not in value: + continue + + #. 2. + index = value.index(',') + viewportanchorX = value[:index] + + # 3. + viewportanchorY = value[index + 1:] + + # 4. + percentageX = self.parse_percentage_string(viewportanchorX) + percentageY = self.parse_percentage_string(viewportanchorY) + if None in [percentageX, percentageY]: + continue + + # 5. + region.viewport_anchor_point = (percentageX, percentageY) + + elif name == "scroll": + # 1. + if value == "up": + region.scroll_value = "up" + + # 5. + continue + + +class VTTCueParser(W3CParser): + def __init__(self, parent, input, cue): + self.parent = parent + self.errors = self.parent.errors + self.input = input + self.position = 0 + self.cue = cue + + def collect_cue_timings_and_settings(self): + 'collect WebVTT cue timings and settings' + + # 1. (handled by class) + + # 2. + self.position = 0 + + # 3. + self.skip_whitespace() + + # 4. + timestamp = self.collect_timestamp() + if timestamp is None: + self.errors.append('invalid start time for VTTCue') + return False + self.cue.start_time = timestamp + + # 5. + self.skip_whitespace() + + # 6. + if self.input[self.position] != '-': + return False + self.position += 1 + + # 7. + if self.input[self.position] != '-': + return False + self.position += 1 + + # 8. + if self.input[self.position] != '>': + return False + self.position += 1 + + # 9. + self.skip_whitespace() + + # 10. + timestamp = self.collect_timestamp() + if timestamp is None: + self.errors.append('invalid end time for VTTCue') + return False + self.cue.end_time = timestamp + + # 11. + remainder = self.input[self.position:] + + # 12. + self.parse_settings(remainder) + + # Extra + return True + + def parse_settings(self, input): + 'parse the WebVTT cue settings' + + # 1. + + settings = re.split(SPACE_SPLIT_PATTERN, input) + + # 2. + for setting in settings: + # 1. + if ':' not in setting: + continue + + index = setting.index(':') + if index in [0, len(setting) - 1]: + continue + + # 2. + name = setting[:index] + + # 3. + value = setting[index + 1:] + + # 4. + if name == 'region': + # 1. + last_regions = (region for region in reversed(self.parent.regions) if region.id == value) + self.cue.region = next(last_regions, None) + + elif name == 'vertical': + # 1. and 2. + if value in ['rl', 'lr']: + self.cue.writing_direction = value + + elif name == 'line': + # 1. + if ',' in value: + index = value.index(',') + linepos = value[:index] + linealign = value[index + 1:] + + # 2. + else: + linepos = value + linealign = None + + # 3. + if not re.search(r'\d', linepos): + continue + + # 4. + if linepos[-1] == '%': + number = self.parse_percentage_string(linepos) + if number is None: + continue + else: + # 1. + if not re.match(r'^[-\.\d]*$', linepos): + continue + + # 2. + if '-' in linepos[1:]: + continue + + # 3. + if linepos.count('.') > 1: + continue + + # 4. + if '.' in linepos: + if not re.search(r'\d\.\d', linepos): + continue + + # 5. + number = float(linepos) + + # 5. + if linealign == "start": + self.cue.line_alignment = 'start' + + # 6. + elif linealign == "center": + self.cue.line_alignment = 'center' + + # 7. + elif linealign == "end": + self.cue.line_alignment = 'end' + + # 8. + elif linealign != None: + continue + + # 9. + self.cue.line = number + + # 10. + if linepos[-1] == '%': + self.cue.snap_to_lines = False + else: + self.cue.snap_to_lines = True + + elif name == 'position': + # 1. + if ',' in value: + index = value.index(',') + colpos = value[:index] + colalign = value[index + 1:] + + # 2. + else: + colpos = value + colalign = None + + # 3. + number = self.parse_percentage_string(colpos) + if number is None: + continue + + # 4. + if colalign == "line-left": + self.cue.line_alignment = 'line-left' + + # 5. + elif colalign == "center": + self.cue.line_alignment = 'center' + + # 6. + elif colalign == "line-right": + self.cue.line_alignment = 'line-right' + + # 7. + elif colalign != None: + continue + + # 8. + self.cue.position = number + + elif name == 'size': + # 1. + number = self.parse_percentage_string(value) + if number is None: + continue + + # 2. + self.cue.cue_size = number + + elif name == 'align': + # 1. + if value == 'start': + self.cue.text_alignment = 'start' + + # 2. + if value == 'center': + self.cue.text_alignment = 'center' + + # 3. + if value == 'end': + self.cue.text_alignment = 'end' + + # 4. + if value == 'left': + self.cue.text_alignment = 'left' + + # 5. + if value == 'right': + self.cue.text_alignment = 'right' + + # 5. + continue + + def collect_timestamp(self): + 'collect a WebVTT timestamp' + + # 1. (handled by class) + + # 2. + most_significant_units = 'minutes' + + # 3. + if self.position >= len(self.input): + return None + + # 4. + if self.input[self.position] not in DIGITS: + return None + + # 5. + string = self.collect_characters(lambda c: c in DIGITS) + + # 6. + value_1 = int(string) + + # 7. + if len(string) != 2 or value_1 > 59: + most_significant_units = 'hours' + + # 8. + if self.position >= len(self.input) or self.input[self.position] != ':': + return None + self.position += 1 + + # 9. + string = self.collect_characters(lambda c: c in DIGITS) + + # 10. + if len(string) != 2: + return None + + # 11. + value_2 = int(string) + + # 12. + if most_significant_units == 'hours' or self.position < len(self.input) and self.input[self.position] == ':': + # 1. + if self.position >= len(self.input) or self.input[self.position] != ':': + return None + self.position += 1 + + # 2. + string = self.collect_characters(lambda c: c in DIGITS) + + # 3. + if len(string) != 2: + return None + + # 4. + value_3 = int(string) + else: + value_3 = value_2 + value_2 = value_1 + value_1 = 0 + + # 13. + if self.position >= len(self.input) or self.input[self.position] != '.': + return None + self.position += 1 + + # 14. + string = self.collect_characters(lambda c: c in DIGITS) + + # 15. + if len(string) != 3: + return None + + # 16. + value_4 = int(string) + + # 17. + if value_2 >= 59 or value_3 >= 59: + return None + + # 18. + result = value_1 * 60 * 60 + value_2 * 60 + value_3 + value_4 / 1000 + + # 19. + return result + + +def main(argv): + files = [open(path, 'r') for path in argv[1:]] + + try: + for file in files: + parser = VTTParser(file.read()) + parser.parse() + + print("Results: {}".format(file)) + print(" Cues: {}".format(parser.text_tracks)) + print(" StyleSheets: {}".format(parser.stylesheets)) + print(" Regions: {}".format(parser.regions)) + print(" Errors: {}".format(parser.errors)) + finally: + for file in files: + file.close() + +if __name__ == '__main__': + import sys + main(sys.argv); diff --git a/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/spec_report.py b/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/spec_report.py new file mode 100644 index 0000000000..beb140eb8c --- /dev/null +++ b/testing/web-platform/tests/webvtt/parsing/file-parsing/tools/spec_report.py @@ -0,0 +1,99 @@ +import os +import sys +import glob +import html +import fnmatch +from os import path + +import coverage + +OUTPUT_TEMPLATE = """ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Spec Coverage</title> + <link rel="stylesheet" href="style.css" type="text/css"> + <style> + .covered { + } + + .missed { + background-color: lightcoral; + } + code { + margin: 0; + padding: 0; + display:block; + white-space:pre-wrap; + } + </style> +</head> +<body> + %head + <div><pre> + %body + </pre></div> +</body> +</html> +""" + +LINE_TEMPLATE = "<code class=\"%class\">%lineno| %source</code>" + +def write_report(data, source_file, output_file): + module_name, executable_lines, excluded_lines, missing_lines, _ = data + missing_lines = set(missing_lines) + + with open(output_file, "w") as output, open(source_file, "r") as source: + lines = source.readlines() + + file_report = [] + padding = len(str(len(lines))) + + for index, line in enumerate(lines): + line = line[0:-1] + lineno = index + 1 + line_number = str(lineno).rjust(padding) + + covered = lineno not in missing_lines + line_class = 'covered' if covered else 'missed' + + formatted_line = (LINE_TEMPLATE.replace('%class', line_class) + .replace('%lineno', line_number) + .replace('%source', html.escape(line))) + file_report.append(formatted_line) + + report_body = ''.join(file_report) + + report_header = '' + + report = (OUTPUT_TEMPLATE.replace('%head', report_header) + .replace('%body', report_body)) + output.write(report) + +def main(argv): + parsing_path = path.normpath(path.join(path.dirname(__file__), "..")) + + files = argv[1:] + if not files: + files = [os.path.join(root, file) for root, _, files in os.walk(parsing_path) + for file in fnmatch.filter(files, '*.vtt')] + + cov = coverage.Coverage() + cov.start() + + for file_path in files: + with open(file_path, "r") as file: + source = file.read() + + import parser + p = parser.VTTParser(source) + p.parse() + + cov.stop() + + data = cov.analysis2(parser.__file__) + write_report(data, parser.__file__, "report.html") + +if __name__ == '__main__': + main(sys.argv) diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up-ref.html new file mode 100644 index 0000000000..17222bdc7b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, repositioning (up) when 2 cues overlap completely</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; +} +.cueText { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"> + <span class="cue"> + <div><span class="cueText">This is another test subtitle</span></div> + <div><span class="cueText">This is a test subtitle</span></div> + </span> +</div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up.html new file mode 100644 index 0000000000..aca503f4b6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, repositioning (up) when 2 cues overlap completely</title> +<link rel="match" href="2_cues_overlapping_completely_move_up-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 2;" onseeked="this.onseeked = null; takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/2_cues_overlapping_completely_move_up.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down-ref.html new file mode 100644 index 0000000000..8262b9e598 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, repositioning (down) when 2 cues overlap partially</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +#cue1 { + position: absolute; + top: 50%; + left: 0; + right: 0; + margin-top: -4.5px; + text-align: center +} +#cue2 { + position: absolute; + top: 50%; + left: 0; + right: 0; + margin-top: 4.5px; + text-align: center +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class="video"><span class="cue" id="cue1"><span>This is a test subtitle</span></span><span class="cue" id="cue2"><span>This is another test subtitle</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down.html new file mode 100644 index 0000000000..9620456780 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, repositioning (down) when 2 cues overlap partially</title> +<link rel="match" href="2_cues_overlapping_partially_move_down-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 2;" onseeked="this.onseeked = null; takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/2_cues_overlapping_partially_move_down.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up-ref.html new file mode 100644 index 0000000000..22a711af68 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, repositioning (down) when 2 cues overlap partially</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; +} +.cueText { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +.cueTextGoingUp { + position: relative; + top: -1.8px; /* 1% height of video's height */ +} +</style> +<div class="video"> + <span class="cue"> + <div><span class="cueText cueTextGoingUp">This is another test subtitle</span></div> + <div><span class="cueText">This is a test subtitle</span></div> + </span> +</div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up.html new file mode 100644 index 0000000000..2dedb8ee12 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, repositioning (down) when 2 cues overlap partially</title> +<link rel="match" href="2_cues_overlapping_partially_move_up-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 2;" onseeked="this.onseeked = null; takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/2_cues_overlapping_partially_move_up.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks-ref.html new file mode 100644 index 0000000000..464fbcff8b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for WebVTT rendering, 2 tracks enabled at the same time</title> +<script src="/common/reftest-wait.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; +} +.cueText { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"> + <video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + </video> + <span class="cue"> + <div><span class="cueText">This is a <u>test subtitle</u></span></div> + <div><span class="cueText">This is a test subtitle</span></div> + </span> +</div> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks.html new file mode 100644 index 0000000000..1a29be86a4 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_tracks.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, 2 tracks enabled at the same time</title> +<link rel="match" href="2_tracks-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/test.vtt"> + <track src="support/test_underline.vtt"> +</video> +<script> +document.getElementsByTagName('track')[0].track.mode = 'showing'; +document.getElementsByTagName('track')[1].track.mode = 'showing'; +</script> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks-ref.html new file mode 100644 index 0000000000..3f155dd0ad --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for WebVTT rendering, 3 tracks enabled at the same time</title> +<script src="/common/reftest-wait.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; +} +.cueText { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: white; +} +</style> +<div class="video"> + <video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + </video> + <span class="cue"> + <div><span class="cueText">This is a <b>test subtitle</b></span></div> + <div><span class="cueText">This is a <u>test subtitle</u></span></div> + <div><span class="cueText">This is a test subtitle</span></div> + </span> +</div> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks.html new file mode 100644 index 0000000000..bdb45f1110 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/3_tracks.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, 3 tracks enabled at the same time</title> +<link rel="match" href="3_tracks-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/test.vtt"> + <track src="support/test_underline.vtt"> + <track src="support/test_bold.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + document.getElementsByTagName('track')[1].track.mode = 'showing'; + document.getElementsByTagName('track')[2].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center-ref.html new file mode 100644 index 0000000000..90f011dc57 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:center</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video><span class=cue><span>This is a test</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center.html new file mode 100644 index 0000000000..c7ab0dee17 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:center</title> +<link rel="match" href="align_center-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_center.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50-ref.html new file mode 100644 index 0000000000..ed5e3a5e8e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:center, position:50%</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video><span class=cue><span>This is a test</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50.html new file mode 100644 index 0000000000..38df5e1bb2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_50.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:center, position:50%</title> +<link rel="match" href="align_center_position_50-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_center_position_50.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50-ref.html new file mode 100644 index 0000000000..4d7553a8b7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:center, position greater than 50%</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; +} +.cue { + position: absolute; + bottom: 0; + right: 0px; + width: 64px; + text-align: center; + font: 20px/1 Ahem; +} +.cueText { + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video> + <div class="cue"> + <span class="cueText">foo</span> + </div> +</div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50.html new file mode 100644 index 0000000000..0f69e57251 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:center, position greater than 50%</title> +<link rel="match" href="align_center_position_gt_50-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font: 20px/1 Ahem; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_center_position_gt_50.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size-ref.html new file mode 100644 index 0000000000..73db73ed6a --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:center, position greater than 50%, size greater than maximum size</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; +} +.cue { + position: absolute; + bottom: 0px; + right: 0px; + width: 64px; + text-align: center; + font: 20px/1 Ahem; +} +.cueText { + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video> + <div class="cue"> + <div><span class="cueText">Awe</span></div> + <div><span class="cueText">som</span></div> + <div><span class="cueText">e!!</span></div> + <div><span class="cueText">!</span></div> + </div> +</div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size.html new file mode 100644 index 0000000000..869b5f669e --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:center, position greater than 50%, size greater than maximum size</title> +<link rel="match" href="align_center_position_gt_50_size_gt_maximum_size-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font: 20px/1 Ahem; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_center_position_gt_50_size_gt_maximum_size.vtt"> +</video> +<script> +document.getElementsByTagName('track')[0].track.mode = 'showing'; +</script> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50-ref.html new file mode 100644 index 0000000000..baa6511046 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:center, position less than 50%</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; +} +.cue { + position: absolute; + bottom: 0; + left: 0px; + right: 0; + width: 64px; + text-align: center; + font: 20px/1 Ahem; +} +.cueText { + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video> + <div class="cue"> + <span class="cueText">foo</span> + </div> +</div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50.html new file mode 100644 index 0000000000..953e74183b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:center, position less than 50%</title> +<link rel="match" href="align_center_position_lt_50-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font: 20px/1 Ahem; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_center_position_lt_50.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size-ref.html new file mode 100644 index 0000000000..aeaf757cc6 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:center, position less than 50%, size greater than maximum size</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; +} +.cue { + position: absolute; + bottom: 0px; + left: 0px; + width: 64px; + text-align: center; + font: 20px/1 Ahem; +} +.cueText { + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video> + <div class="cue"> + <div><span class="cueText">Awe</span></div> + <div><span class="cueText">som</span></div> + <div><span class="cueText">e!!</span></div> + <div><span class="cueText">!</span></div> + </div> +</div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size.html new file mode 100644 index 0000000000..174894bf0c --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:center, position less than 50%, size greater than maximum size</title> +<link rel="match" href="align_center_position_lt_50_size_gt_maximum_size-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font: 20px/1 Ahem; + color: green; +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_center_position_lt_50_size_gt_maximum_size.vtt"> +</video> +<script> +document.getElementsByTagName('track')[0].track.mode = 'showing'; +</script> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped-ref.html new file mode 100644 index 0000000000..55aed284b7 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:center with long cues</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video><span class=cue><span>This is a test subtitle that most likely will span over several rows since it is a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped.html new file mode 100644 index 0000000000..3773593f0f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_wrapped.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:center with long cues</title> +<link rel="match" href="align_center_wrapped-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_center_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end-ref.html new file mode 100644 index 0000000000..23c7c71aff --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:end</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: right; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video><span class=cue><span>This is a test</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end.html new file mode 100644 index 0000000000..c413579b23 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:end</title> +<link rel="match" href="align_end-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_end.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped-ref.html new file mode 100644 index 0000000000..eee75f138f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:end with long cues</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: right +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video><span class=cue><span>This is a test subtitle that most likely will span over several rows since it is a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped.html new file mode 100644 index 0000000000..97e9ef7bf2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:end with long cues</title> +<link rel="match" href="align_end_wrapped-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_end_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start-ref.html new file mode 100644 index 0000000000..b1bae4af0b --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:start</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: left; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video><span class=cue><span>This is a test</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start.html new file mode 100644 index 0000000000..955b231b02 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:start</title> +<link rel="match" href="align_start-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_start.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped-ref.html new file mode 100644 index 0000000000..45cb287e2f --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Reference for WebVTT rendering, align:start with long cues</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +.video { + display: inline-block; + width: 320px; + height: 180px; + position: relative; + font-size: 9px; +} +.cue { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: left; +} +.cue > span { + font-family: Ahem, sans-serif; + background: rgba(0,0,0,0.8); + color: green; +} +</style> +<div class=video><span class=cue><span>This is a test subtitle that most likely will span over several rows since it is a pretty long cue with a lot of text.</span></span></div> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped.html new file mode 100644 index 0000000000..0664f38e63 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>WebVTT rendering, align:start with long cues</title> +<link rel="match" href="align_start_wrapped-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +html { overflow:hidden } +body { margin:0 } +::cue { + font-family: Ahem, sans-serif; + color: green +} +</style> +<script src="/common/reftest-wait.js"></script> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> + <track src="support/align_start_long.vtt"> + <script> + document.getElementsByTagName('track')[0].track.mode = 'showing'; + </script> +</video> +</html> diff --git a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles-ref.html b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles-ref.html new file mode 100644 index 0000000000..d4bd2b74c2 --- /dev/null +++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for WebVTT rendering, <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/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> diff --git a/testing/web-platform/tests/webvtt/tools/categorize_results.py b/testing/web-platform/tests/webvtt/tools/categorize_results.py new file mode 100644 index 0000000000..6cb18c3c2d --- /dev/null +++ b/testing/web-platform/tests/webvtt/tools/categorize_results.py @@ -0,0 +1,137 @@ +import os +import sys +import json +import fnmatch + +TEST_DIR = "/webvtt/" +CATEGORIES_FILE = "../categories.json" + +class Test: + def __init__(self, file, name, status, message): + self.file = file + self.name = name + self.status = status + self.message = message + self.passed = status == 'PASS' + self.categories = [] + + @classmethod + def from_json(cls, json): + file = json["test"] + if not file.startswith(TEST_DIR): + return [] + file = file[len(TEST_DIR):] + + status = json["status"] + message = json["message"] + + tests = [] + + for test in json["subtests"]: + name = test["name"] + if status == 'OK': + test_status = test["status"] + test_message = test["message"] + else: + test_status, test_message = status, message + + tests.append(Test(file, name, test_status, test_message)) + + return tests + +class Category: + def __init__(self, names): + self.names = set(names) + self.tests = {} + + @classmethod + def from_json(cls, json): + return Category(json) + + def add_test(self, name, test): + self.tests[test] = name + + def __contains__(self, name): + return name in self.names + +def parse_results(file): + data = json.load(file) + + results = data["results"] + tests = [] + for result in results: + tests += Test.from_json(result) + + return tests + +def parse_categories(file, tests, categories = None, categories_map = None): + data = json.load(file) + basepath = os.path.dirname(file.name) + + categories = categories or [] + + if categories_map: + categories_map = dict(categories_map) + else: + categories_map = {} + + if ":categories" in data: + for cat_data in data[":categories"]: + category = Category.from_json(cat_data) + + categories.append(category) + for name in category.names: + categories_map[name] = category + + for pattern, category_name in data.items(): + if pattern.startswith(":"): + continue + category = categories_map[category_name] + + file_pattern = os.path.normpath(os.path.join(basepath, pattern)) + for test in tests: + if fnmatch.fnmatch(test.name, file_pattern) or fnmatch.fnmatch(test.file, file_pattern): + category.add_test(category_name, test) + test.categories.append(category) + + if ":subcategories" in data: + for subcat_name in data[":subcategories"]: + path = os.path.join(basepath, subcat_name) + file = open(path, "r") + parse_categories(file, tests, categories, categories_map) + + return categories + +def main(argv): + if len(argv) == 1: + if argv[0] == '-': + results_file = sys.stdin + else: + results_file = open(argv[0], "r") + else: + print("USAGE: python3 categorize_results.py <file>") + print("<file>\tA file containing wpt results. Or `-` for reading results from stdin.") + return + + filepath = os.path.dirname(__file__) + categories_path = os.path.join(filepath, CATEGORIES_FILE) + categories_file = open(categories_path, "r") + + tests = parse_results(results_file) + categories = parse_categories(categories_file, tests) + + for category in categories: + tests_by_name = { name: [] for name in category.names } + for test, name in category.tests.items(): + tests_by_name[name].append(test) + + for name in category.names: + test_group = tests_by_name[name] + amount = len(test_group) + if amount == 0: + continue + passed = sum(1 for test in test_group if test.passed) + print("{}:\t{}/{} - {}%".format(name, passed, amount, round(passed / amount * 100, 2))) + +if __name__ == "__main__": + main(sys.argv[1:]) |
