Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-11 16:35:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 0d318188757a9c996e20b82db201fd04de5aa255

Browse source
This commit is contained in:
James Graham 2015-03-27 09:15:38 +00:00
parent b2a5225831
commit 1a81b18b9f
12321 changed files with 544385 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

35
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up-ref.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, repositioning (up) when 2 cues overlap completely</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
#cue1 {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -18px;
text-align: center
}
#cue2 {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -54px;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px;
}
</style>
<div class="video"><span class="cue" id="cue1"><span>This is a test subtitle</span></span><span class="cue" id="cue2"><span>This is another test subtitle</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, repositioning (up) when 2 cues overlap completely</title>
<link rel="match" href="2_cues_overlapping_completely_move_up-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 2;" onseeked="this.onseeked = null; takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/2_cues_overlapping_completely_move_up.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

35
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down-ref.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, repositioning (down) when 2 cues overlap partially</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
#cue1 {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -18px;
text-align: center
}
#cue2 {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: 18px;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px;
}
</style>
<div class="video"><span class="cue" id="cue1"><span>This is a test subtitle</span></span><span class="cue" id="cue2"><span>This is another test subtitle</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_down.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, repositioning (down) when 2 cues overlap partially</title>
<link rel="match" href="2_cues_overlapping_partially_move_down-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 2;" onseeked="this.onseeked = null; takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/2_cues_overlapping_partially_move_down.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

35
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up-ref.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, repositioning (down) when 2 cues overlap partially</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
#cue1 {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -18px;
text-align: center
}
#cue2 {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -54px;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px;
}
</style>
<div class="video"><span class="cue" id="cue1"><span>This is a test subtitle</span></span><span class="cue" id="cue2"><span>This is another test subtitle</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, repositioning (down) when 2 cues overlap partially</title>
<link rel="match" href="2_cues_overlapping_partially_move_up-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); this.currentTime = 2;" onseeked="this.onseeked = null; takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/2_cues_overlapping_partially_move_up.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/2_tracks-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, 2 tracks enabled at the same time</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: sans-serif;
background: rgba(0,0,0,0.8);
color: white;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>This is a <u>test subtitle</u><br>This is a test subtitle</span></span></div>

20
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/2_tracks.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, 2 tracks enabled at the same time</title>
<link rel="match" href="2_tracks-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/test.vtt">
<track src="support/test_underline.vtt">
</video>
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
document.getElementsByTagName('track')[1].track.mode = 'showing';
</script>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/3_tracks-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, 3 tracks enabled at the same time</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: sans-serif;
background: rgba(0,0,0,0.8);
color: white;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>This is a <b>test subtitle</b><br>This is a <u>test subtitle</u><br>This is a test subtitle</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/3_tracks.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, 3 tracks enabled at the same time</title>
<link rel="match" href="3_tracks-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/test.vtt">
<track src="support/test_underline.vtt">
<track src="support/test_bold.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
document.getElementsByTagName('track')[1].track.mode = 'showing';
document.getElementsByTagName('track')[2].track.mode = 'showing';
</script>
</video>
</html>

27
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_end-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, align:end</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 50%;
text-align: right;
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px
}
</style>
<div class=video><span class=cue><span>This is a test</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_end.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, align:end</title>
<link rel="match" href="align_end-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/align_end.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

27
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, align:end with long cues</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 50%;
text-align: right
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px
}
</style>
<div class=video><span class=cue><span>This is a test <br>subtitle that <br>most likely <br>will span over <br>several rows <br>since it is a <br>pretty long <br>cue with a <br>lot of text.</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_end_wrapped.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, align:end with long cues</title>
<link rel="match" href="align_end_wrapped-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/align_end_long.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_middle-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, align:middle</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px
}
</style>
<div class=video><span class=cue><span>This is a test</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_middle.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, align:middle</title>
<link rel="match" href="align_middle-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/align_middle.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_50-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, align:middle, position:50%</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px
}
</style>
<div class=video><span class=cue><span>This is a test</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_50.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, align:middle, position:50%</title>
<link rel="match" href="align_middle_position_50-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/align_middle_position_50.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_gt_50-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, align:middle, position greater than 50%</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
right: 92px;
width: 256px;
text-align: center;
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px
}
</style>
<div class=video><span class=cue><span>Aweso<br>me!!!</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_gt_50.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, align:middle, position greater than 50%</title>
<link rel="match" href="align_middle_position_gt_50-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/align_middle_position_gt_50.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

27
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_lt_50-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, align:middle, position less than 50%</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 92px;
right: 0;
width: 256px;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px
}
</style>
<div class=video><span class=cue><span>Awesome<br>!!!</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_lt_50.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, align:middle, position less than 50%</title>
<link rel="match" href="align_middle_position_lt_50-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/align_middle_position_lt_50.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

27
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_lt_50_size_gt_maximum_size-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, align:middle, position less than 50%, size greater than maximum size</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 92px;
right: 0;
width: 256px;
text-align: center;
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px
}
</style>
<div class=video><span class=cue><span>Aweso<br>me!!!</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_middle_position_lt_50_size_gt_maximum_size.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, align:middle, position less than 50%, size greater than maximum size</title>
<link rel="match" href="align_middle_position_lt_50_size_gt_maximum_size-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/align_middle_position_lt_50_size_gt_maximum_size.vtt">
</video>
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_middle_wrapped-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, align:middle with long cues</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px
}
</style>
<div class=video><span class=cue><span>This is a test subtitle that <br>most likely will span over <br>several rows since it is a pretty <br>long cue with a lot of text.</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_middle_wrapped.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, align:middle with long cues</title>
<link rel="match" href="align_middle_wrapped-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/align_middle_long.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

25
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_start-ref.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, align:start</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 50%;
right: 0;
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px
}
</style>
<div class=video><span class=cue><span>This is a test</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_start.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, align:start</title>
<link rel="match" href="align_start-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/align_start.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

25
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped-ref.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, align:start with long cues</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 50%;
right: 0;
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px
}
</style>
<div class=video><span class=cue><span>This is a test <br>subtitle that <br>most likely <br>will span over <br>several rows <br>since it is a <br>pretty long <br>cue with a <br>lot of text.</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/align_start_wrapped.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, align:start with long cues</title>
<link rel="match" href="align_start_wrapped-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/align_start_long.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

15
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles-ref.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Reference for WebVTT rendering, &lt;audio&gt; should not have subtitles</title>
<style>
audio {
width: 1280px;
height: 720px;
outline: solid
}
</style>
<script src="/common/reftest-wait.js"></script>
<audio autoplay controls onplaying="this.onplaying = null; this.pause(); this.currentTime = 0; takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
</audio>

25
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/audio_has_no_subtitles.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, &lt;audio&gt; should not have subtitles</title>
<link rel="match" href="audio_has_no_subtitles-ref.html">
<style>
audio {
width: 1280px;
height: 720px;
outline: solid
}
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<audio autoplay controls onplaying="this.onplaying = null; this.pause(); this.currentTime = 0; takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/test.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</audio>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/basic-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, basic</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/basic.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, basic</title>
<link rel="match" href="basic-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/test.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/bidi/bidi_ruby-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, bidi ruby</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: sans-serif;
background: rgba(0,0,0,0.8);
color: white;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span><ruby>.<rt><bdo dir="ltr">&#x05D0;&#x05D0;</bdo></rt>ab)<rt>x</rt></ruby></span></span></div>

18
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/bidi/bidi_ruby.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<title>WebVTT rendering, bidi ruby</title>
<link rel="match" href="bidi_ruby-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="../support/bidi_ruby.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_LF_u05D0-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, bidi U+002E LF U+05D0</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: sans-serif;
background: rgba(0,0,0,0.8);
color: white;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>.<br><bdo dir=ltr>&#x05D0;ab)</bdo></span></span></div>

18
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_LF_u05D0.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<title>WebVTT rendering, bidi U+002E LF U+05D0</title>
<link rel="match" href="u002E_LF_u05D0-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="../support/u002E_LF_u05D0.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2028_u05D0-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, bidi U+002E U+2028 U+05D0</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: sans-serif;
background: rgba(0,0,0,0.8);
color: white;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>.<br><bdo dir=ltr>(ab&#x05D0;</bdo></span></span></div>

18
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2028_u05D0.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<title>WebVTT rendering, bidi U+002E U+2028 U+05D0</title>
<link rel="match" href="u002E_u2028_u05D0-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="../support/u002E_u2028_u05D0.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2029_u05D0-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, bidi U+002E U+2029 U+05D0</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: sans-serif;
background: rgba(0,0,0,0.8);
color: white;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>.<br><bdo dir=ltr>&#x05D0;ab)</bdo></span></span></div>

18
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/bidi/u002E_u2029_u05D0.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<title>WebVTT rendering, bidi U+002E U+2029 U+05D0</title>
<link rel="match" href="u002E_u2029_u05D0-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="../support/u002E_u2029_u05D0.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0041_first-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, bidi U+0041 first</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: sans-serif;
background: rgba(0,0,0,0.8);
color: white;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span><bdo dir=ltr>Aab)</bdo></span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0041_first.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<title>WebVTT rendering, bidi U+0041 first</title>
<link rel="match" href="u0041_first-ref.html">
<!--
0041..005A ; L # L& [26] LATIN CAPITAL LETTER A..LATIN CAPITAL LETTER Z
http://www.unicode.org/Public/UNIDATA/extracted/DerivedBidiClass.txt
-->
<style>
html { overflow:hidden }
body { margin:0 }
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="../support/u0041_first.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/bidi/u05D0_first-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, bidi U+05D0 first</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: sans-serif;
background: rgba(0,0,0,0.8);
color: white;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span><bdo dir=ltr>(ab&#x05D0;</bdo></span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/bidi/u05D0_first.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<title>WebVTT rendering, bidi U+05D0 first</title>
<link rel="match" href="u05D0_first-ref.html">
<!--
05D0..05EA ; R # Lo [27] HEBREW LETTER ALEF..HEBREW LETTER TAV
http://www.unicode.org/Public/UNIDATA/extracted/DerivedBidiClass.txt
-->
<style>
html { overflow:hidden }
body { margin:0 }
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="../support/u05D0_first.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0628_first-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, bidi U+0628 first</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: sans-serif;
background: rgba(0,0,0,0.8);
color: white;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span><bdo dir=ltr>(ab&#x0628;</bdo></span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/bidi/u0628_first.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<title>WebVTT rendering, bidi U+0628 first</title>
<link rel="match" href="u0628_first-ref.html">
<!--
0620..063F ; AL # Lo [32] ARABIC LETTER KASHMIRI YEH..ARABIC LETTER FARSI YEH WITH THREE DOTS ABOVE
http://www.unicode.org/Public/UNIDATA/extracted/DerivedBidiClass.txt
-->
<style>
html { overflow:hidden }
body { margin:0 }
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="../support/u0628_first.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/bidi/u06E9_no_strong_dir-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, bidi U+06E9 no strong direction</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: sans-serif;
background: rgba(0,0,0,0.8);
color: white;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span><bdo dir=ltr>&#x06E9;)</bdo></span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/bidi/u06E9_no_strong_dir.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<title>WebVTT rendering, bidi U+06E9 no strong direction</title>
<link rel="match" href="u06E9_no_strong_dir-ref.html">
<!--
06E9 ; ON # So ARABIC PLACE OF SAJDAH
http://www.unicode.org/Public/UNIDATA/extracted/DerivedBidiClass.txt
-->
<style>
html { overflow:hidden }
body { margin:0 }
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="../support/u06E9_no_strong_dir.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

27
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, size:50%, cue too long - should be cut</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 25%;
right: 0;
width: 50%;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>This is a test subtitle that should wrap several times and become so long that the cue must be cut when displayed, because it does not fit on the screen. This is a test subtitle that should wrap several times and become so long that the cue must be cut when displayed, because it does not fit on the</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/cue_too_long.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, size:50%, cue too long - should be cut</title>
<link rel="match" href="cue_too_long-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/very_long_cue.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, decoding of escaped entities</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>Here are the escaped <br>entities: &amp; &lt; &gt; &lrm; &rlm; &nbsp;</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/decode_escaped_entities.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Reference for WebVTT rendering, decoding of escaped entities</title>
<link rel="match" href="decode_escaped_entities-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/decode_escaped_entities.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

25
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition-ref.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, cue reposition after enabling controls</title>
<style>
.video {
display: inline-block;
outline: solid;
width: 320px;
height: 240px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 50px;
}
</style>
<div class="video"><span class="cue"><span>Foo</span></span></div>

28
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition.html Normal file
View file

@ -0,0 +1,28 @@
<!doctype html>
<html class="reftest-wait">
<title>WebVTT rendering, cue reposition after disabling controls</title>
<link rel="match" href="disable_controls_reposition-ref.html">
<style>
video {
outline: solid;
width: 320px;
height: 240px;
}
::cue {
font-family: Ahem, sans-serif;
font-size: 50px;
color: green;
}
</style>
<script src="/common/reftest-wait.js"></script>
<video autoplay controls onplaying="this.onplaying = null;
this.pause();
this.currentTime = 0;
setTimeout(function(video){
video.controls = false;
}, 100, this);
setTimeout(takeScreenshot, 200);">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src=support/foo.vtt>
</video>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, a cue's align, position, line and size properties is possible to override using the DOM APIs</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
top: 0;
right: 204.8px;
width: 256px;
text-align: left
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>There is nothing to see here people, move on</span></span></div>

43
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, a cue's align, position, line and size properties is possible to override using the DOM APIs</title>
<link rel="match" href="dom_override_cue_align_position_line_size-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<script>
function updateCue() {
var t = document.getElementById('track');
var c = t.track.cues[0];
c.align = 'start';
c.position = 80;
c.line = 0;
c.size = 20;
c.text = 'There is nothing to see here people, move on';
updateRendering();
}
function updateRendering() {
var v = document.getElementById('video');
v.onplaying = function() {
this.onplaying = null;
this.pause();
takeScreenshot();
};
v.play();
}
</script>
<video id="video" width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track id="track" src="support/test.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size_while_paused-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, a cue's align, position, line and size properties should be rerendered when overriding them using the DOM APIs while paused</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
top: 0;
right: 204.8px;
width: 256px;
text-align: left
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>This test tests</span></span></div>

34
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_align_position_line_size_while_paused.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, a cue's align, position, line and size properties should be rerendered when overriding them using the DOM APIs while paused</title>
<link rel="match" href="dom_override_cue_align_position_line_size_while_paused-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<script>
function updateCue() {
var t = document.getElementById('track');
var c = t.track.cues[0];
c.align = 'start';
c.position = 80;
c.line = 0;
c.size = 20;
c.text = 'This test tests';
takeScreenshot();
}
</script>
<video id="video" width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track id="track" src="support/test.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, it is possible to override cue line with the DOM APIs</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>

39
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_line.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, it is possible to override cue line with the DOM APIs</title>
<link rel="match" href="dom_override_cue_line-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<script>
function updateCue() {
var t = document.getElementById('track');
var c = t.track.cues[0];
c.line = 0;
updateRendering();
}
function updateRendering() {
var v = document.getElementById('video');
v.onplaying = function() {
this.onplaying = null;
this.pause();
takeScreenshot();
};
v.play();
}
</script>
<video id="video" width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track id="track" src="support/test.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, it is possible to override cue text with the DOM APIs</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>f o o</span></span></div>

39
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, it is possible to override cue text with the DOM APIs</title>
<link rel="match" href="dom_override_cue_text-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<script>
function updateCue() {
var t = document.getElementById('track');
var c = t.track.cues[0];
c.text = 'f o o';
updateRendering();
}
function updateRendering() {
var v = document.getElementById('video');
v.onplaying = function() {
this.onplaying = null;
this.pause();
takeScreenshot();
};
v.play();
}
</script>
<video id="video" width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track id="track" src="support/test.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text_while_paused-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, cue text should be rerendered when overriding them using the DOM APIs while paused</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>f o o</span></span></div>

30
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_cue_text_while_paused.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, cue text should be rerendered when overriding them using the DOM APIs while paused</title>
<link rel="match" href="dom_override_cue_text_while_paused-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<script>
function updateCue() {
var t = document.getElementById('track');
var c = t.track.cues[0];
c.text = 'f o o';
takeScreenshot();
}
</script>
<video id="video" width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track id="track" src="support/test.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

13
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused-ref.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, cue text should be removed when removing them using the DOM APIs while paused</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
</style>
<div class="video"></div>

30
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, cue text should be removed when removing them using the DOM APIs while paused</title>
<link rel="match" href="dom_override_remove_cue_while_paused-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<script>
function updateCue() {
var t = document.getElementById('track');
var c = t.track.cues[0];
t.track.removeCue(c);
takeScreenshot();
}
</script>
<video id="video" width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track id="track" src="support/test.vtt">
</video>
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</html>

34
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition-ref.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, cue reposition after enabling controls</title>
<style>
.video {
display: inline-block;
outline: solid;
width: 320px;
height: 240px;
position: relative
}
video {
position: absolute;
width:320px;
height:240px;
}
.cue {
position: absolute;
bottom: 50px;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 50px;
}
</style>
<video controls>
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
</video>
<div class="video"><span class="cue"><span>Foo</span></span></div>

28
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition.html Normal file
View file

@ -0,0 +1,28 @@
<!doctype html>
<html class="reftest-wait">
<title>WebVTT rendering, cue reposition after enabling controls</title>
<link rel="match" href="enable_controls_reposition-ref.html">
<style>
video {
outline: solid;
width: 320px;
height: 240px;
}
::cue {
font-family: Ahem, sans-serif;
font-size: 50px;
color: green;
}
</style>
<script src="/common/reftest-wait.js"></script>
<video autoplay onplaying="this.onplaying = null;
this.pause();
this.currentTime = 0;
setTimeout(function(video){
video.controls = true;
}, 100, this);
setTimeout(takeScreenshot, 200);">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src=support/foo.vtt>
</video>

112
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely-ref.html Normal file
View file

@ -0,0 +1,112 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, repositioning of 9 cues that overlap completely</title>
<style>
.video {
display: inline-block;
width: 720px;
height: 720px;
outline: solid;
position: relative
}
#cue1 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: -18px;
margin-left: -18px;
color: #000
}
#cue2 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: -54px;
margin-left: -18px;
color: #222
}
#cue3 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: -18px;
margin-left: -54px;
color: #444
}
#cue4 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: -18px;
margin-left: 18px;
color: #666
}
#cue5 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: 18px;
margin-left: -18px;
color: #888
}
#cue6 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: -54px;
margin-left: -54px;
color: #aaa
}
#cue7 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: -54px;
margin-left: 18px;
color: #ccc
}
#cue8 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: 18px;
margin-left: -54px;
color: #eee
}
#cue9 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: 18px;
margin-left: 18px;
color: green
}
.cue {
width: 36px;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
font-size: 36px;
}
</style>
<div class="video">
<span class="cue" id="cue1"><span>1</span></span>
<span class="cue" id="cue2"><span>2</span></span>
<span class="cue" id="cue3"><span>3</span></span>
<span class="cue" id="cue4"><span>4</span></span>
<span class="cue" id="cue5"><span>5</span></span>
<span class="cue" id="cue6"><span>6</span></span>
<span class="cue" id="cue7"><span>7</span></span>
<span class="cue" id="cue8"><span>8</span></span>
<span class="cue" id="cue9"><span>9</span></span>
</div>

48
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<title>WebVTT rendering, repositioning of 9 cues that overlap completely</title>
<link rel="match" href="9_cues_overlapping_completely-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
}
::cue(#cue1) {
color: #000
}
::cue(#cue2) {
color: #222
}
::cue(#cue3) {
color: #444
}
::cue(#cue4) {
color: #666
}
::cue(#cue5) {
color: #888
}
::cue(#cue6) {
color: #aaa
}
::cue(#cue7) {
color: #ccc
}
::cue(#cue8) {
color: #eee
}
::cue(#cue9) {
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="720" height="720" autoplay ontimeupdate="if (this.currentTime >= 1) { this.ontimeupdate = null; this.pause(); takeScreenshot(); }">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/9_cues_overlapping_completely.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

112
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely_all_cues_have_same_timestamp-ref.html Normal file
View file

@ -0,0 +1,112 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, repositioning of 9 cues that overlap completely and all cues have the same timestamp</title>
<style>
.video {
display: inline-block;
width: 720px;
height: 720px;
outline: solid;
position: relative
}
#cue1 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: -18px;
margin-left: -18px;
color: #000
}
#cue2 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: -54px;
margin-left: -18px;
color: #222
}
#cue3 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: -18px;
margin-left: -54px;
color: #444
}
#cue4 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: -18px;
margin-left: 18px;
color: #666
}
#cue5 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: 18px;
margin-left: -18px;
color: #888
}
#cue6 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: -54px;
margin-left: -54px;
color: #aaa
}
#cue7 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: -54px;
margin-left: 18px;
color: #ccc
}
#cue8 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: 18px;
margin-left: -54px;
color: #eee
}
#cue9 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: 18px;
margin-left: 18px;
color: green
}
.cue {
width: 36px;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
font-size: 36px;
}
</style>
<div class="video">
<span class="cue" id="cue1"><span>1</span></span>
<span class="cue" id="cue2"><span>2</span></span>
<span class="cue" id="cue3"><span>3</span></span>
<span class="cue" id="cue4"><span>4</span></span>
<span class="cue" id="cue5"><span>5</span></span>
<span class="cue" id="cue6"><span>6</span></span>
<span class="cue" id="cue7"><span>7</span></span>
<span class="cue" id="cue8"><span>8</span></span>
<span class="cue" id="cue9"><span>9</span></span>
</div>

48
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/9_cues_overlapping_completely_all_cues_have_same_timestamp.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<title>WebVTT rendering, repositioning of 9 cues that overlap completely and all cues have the same timestamp</title>
<link rel="match" href="9_cues_overlapping_completely_all_cues_have_same_timestamp-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
}
::cue(#cue1) {
color: #000
}
::cue(#cue2) {
color: #222
}
::cue(#cue3) {
color: #444
}
::cue(#cue4) {
color: #666
}
::cue(#cue5) {
color: #888
}
::cue(#cue6) {
color: #aaa
}
::cue(#cue7) {
color: #ccc
}
::cue(#cue8) {
color: #eee
}
::cue(#cue9) {
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="720" height="720" autoplay ontimeupdate="if (this.currentTime >= 1) { this.ontimeupdate = null; this.pause(); takeScreenshot(); }">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/9_cues_overlapping_completely_all_cues_have_same_timestamp.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

13
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles-ref.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, when media cannot be played (404 error), subtitles are not displayed</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
</style>
<div class="video"></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/media_404_omit_subtitles.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<title>WebVTT rendering, when media cannot be played (404 error), subtitles are not displayed</title>
<link rel="match" href="media_404_omit_subtitles-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="videonotfound.webm" type="video/webm">
<source src="videonotfound.mp4" type="video/mp4">
<track src="support/test.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

25
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19-ref.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, when media height is 19 or less, font size should be smaller than when it is 20 and above</title>
<style>
.video {
display: inline-block;
width: 1280px;
height: 19px;
outline: solid;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 0.95px
}
</style>
<div class=video><span class=cue><span>This is a test subtitle</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/media_height_19.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<title>WebVTT rendering, when media height is 19 or less, font size should be smaller than when it is 20 and above</title>
<link rel="match" href="media_height_19-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family:Ahem, sans-serif;
color:green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="19" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/test.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/single_quote-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, single quote should not be levitated</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>'</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/single_quote.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<title>WebVTT rendering, single quote should not be levitated</title>
<link rel="match" href="single_quote-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/single_quote.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, size:90% == size:100% when text does not need to wrap</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px
}
</style>
<div class=video><span class=cue><span>This is a test subtitle</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/size_90.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<title>WebVTT rendering, size:99% == size:100% when text does not need to wrap</title>
<link rel="match" href="size_90-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/size_90.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, size:99% == size:100% when text does not need to wrap</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px
}
</style>
<div class=video><span class=cue><span>This is a test subtitle</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/size_99.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<title>WebVTT rendering, size:99% == size:100% when text does not need to wrap</title>
<link rel="match" href="size_99-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/size_99.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

37
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/support/9_cues_overlapping_completely.vtt Normal file
View file

@ -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

37
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/support/9_cues_overlapping_completely_all_cues_have_same_timestamp.vtt Normal file
View file

@ -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

4
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/support/single_quote.vtt Normal file
View file

@ -0,0 +1,4 @@
WEBVTT
00:00:00.000 --> 00:00:05.000
'

4
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/support/size_90.vtt Normal file
View file

@ -0,0 +1,4 @@
WEBVTT
00:00:00.000 --> 00:00:05.000 size:90%
This is a test subtitle

4
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/support/size_99.vtt Normal file
View file

@ -0,0 +1,4 @@
WEBVTT
00:00:00.000 --> 00:00:05.000 size:99%
This is a test subtitle

4
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/evil/support/test.vtt Normal file
View file

@ -0,0 +1,4 @@
WEBVTT
00:00:00.000 --> 00:00:05.000
This is a test subtitle

27
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/line_-2_wrapped_cue_grow_upwards-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, line:-2, size:50%, wrapped cue should grow upwards</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
bottom: 36px;
left: 320px;
right: 0;
width: 640px;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>This is a test subtitle that will line break</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/line_-2_wrapped_cue_grow_upwards.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, line:-2, size:50%, wrapped cue should grow upwards</title>
<link rel="match" href="line_-2_wrapped_cue_grow_upwards-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/line_-2_long.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

26
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, line:0 should be top line</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/line_0_is_top.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, line:0 should be top line</title>
<link rel="match" href="line_0_is_top-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/line_0.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

27
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/line_1_wrapped_cue_grow_downwards-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, line:1, size:50%, wrapped cue should grow downwards</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
top: 36px;
left: 320px;
right: 0;
width: 640px;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>This is a test subtitle that will line break</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/line_1_wrapped_cue_grow_downwards.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, line:1, size:50%, wrapped cue should grow downwards</title>
<link rel="match" href="line_1_wrapped_cue_grow_downwards-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/line_1_long.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

27
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, line:50% should be vertically centered</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
.cue {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -18px;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px;
}
</style>
<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/line_50_percent.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, line:50% should be vertically centered</title>
<link rel="match" href="line_50_percent-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/line_50_percent.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

33
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap-ref.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, line integer and percent mixed with overlap</title>
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
}
#cue1 {
position: absolute;
top: 324px;
left: 0;
right: 0;
text-align: center
}
#cue2 {
position: absolute;
top: 360px;
left: 0;
right: 0;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 36px;
}
</style>
<div class="video"><span id="cue1" class="cue"><span>This is a test subtitle</span></span><span id="cue2" class="cue"><span>This is another test subtitle</span></span></div>

22
tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/line_integer_and_percent_mixed_overlap.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, line integer and percent mixed with overlap</title>
<link rel="match" href="line_integer_and_percent_mixed_overlap-ref.html">
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green;
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/line_integer_and_percent_overlap.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

Some files were not shown because too many files have changed in this diff Show more