Update web-platform-tests to revision 7a767a52741f628430ffbbed46e7f3df68ba3534

Fixes #15648.
This commit is contained in:
Ms2ger 2017-02-20 11:44:42 +01:00
parent a1e4c547f0
commit 4fadf9b0b6
1184 changed files with 22551 additions and 9856 deletions

View file

@ -5,16 +5,17 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
#cue1 {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -18px;
margin-top: -4.5px;
text-align: center
}
#cue2 {
@ -22,14 +23,13 @@ body { margin:0 }
top: 50%;
left: 0;
right: 0;
margin-top: -54px;
margin-top: -13.5px;
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</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();">
<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">

View file

@ -5,16 +5,17 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
#cue1 {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -18px;
margin-top: -4.5px;
text-align: center
}
#cue2 {
@ -22,14 +23,13 @@ body { margin:0 }
top: 50%;
left: 0;
right: 0;
margin-top: 18px;
margin-top: 4.5px;
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</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();">
<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">

View file

@ -5,16 +5,17 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
#cue1 {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -18px;
margin-top: -4.5px;
text-align: center
}
#cue2 {
@ -22,14 +23,13 @@ body { margin:0 }
top: 50%;
left: 0;
right: 0;
margin-top: -54px;
margin-top: -13.5px;
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</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();">
<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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -7,7 +7,7 @@ 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();">
<video width="320" height="180" autoplay onplaying="this.onplaying = 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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -7,7 +7,7 @@ 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();">
<video width="320" height="180" autoplay onplaying="this.onplaying = 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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -21,7 +22,6 @@ body { margin:0 }
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -21,7 +22,6 @@ body { margin:0 }
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,22 +5,22 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
bottom: 0;
right: 92px;
width: 256px;
right: 23px;
width: 64px;
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,23 +5,23 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
bottom: 0;
left: 92px;
left: 23px;
right: 0;
width: 256px;
width: 64px;
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,23 +5,23 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
bottom: 0;
left: 92px;
left: 23px;
right: 0;
width: 256px;
width: 64px;
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -19,7 +20,6 @@ body { margin:0 }
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -19,7 +20,6 @@ body { margin:0 }
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -3,13 +3,13 @@
<title>Reference for WebVTT rendering, &lt;audio&gt; should not have subtitles</title>
<style>
audio {
width: 1280px;
height: 720px;
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; takeScreenshot();">
<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>

View file

@ -4,8 +4,8 @@
<link rel="match" href="audio_has_no_subtitles-ref.html">
<style>
audio {
width: 1280px;
height: 720px;
width: 320px;
height: 180px;
outline: solid
}
::cue {
@ -14,7 +14,7 @@ audio {
}
</style>
<script src="/common/reftest-wait.js"></script>
<audio autoplay controls onplaying="this.onplaying = null; this.pause(); this.currentTime = 0; takeScreenshot();">
<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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.onplaying = 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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="reftest-wait">
<title>WebVTT rendering, bidi ruby</title>
<link rel="match" href="bidi_ruby-ref.html">
<style>
@ -7,7 +7,7 @@ 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();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<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>
@ -7,7 +7,7 @@ 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();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<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>
@ -7,7 +7,7 @@ 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();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<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>
@ -7,7 +7,7 @@ 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();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="reftest-wait">
<title>WebVTT rendering, bidi U+0041 first</title>
<link rel="match" href="u0041_first-ref.html">
<!--
@ -11,7 +11,7 @@ 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();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="reftest-wait">
<title>WebVTT rendering, bidi U+05D0 first</title>
<link rel="match" href="u05D0_first-ref.html">
<!--
@ -11,7 +11,7 @@ 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();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="reftest-wait">
<title>WebVTT rendering, bidi U+0628 first</title>
<link rel="match" href="u0628_first-ref.html">
<!--
@ -11,7 +11,7 @@ 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();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<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">
<!--
@ -11,7 +11,7 @@ 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();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -21,7 +22,6 @@ body { margin:0 }
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -21,8 +21,11 @@ video {
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>
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>

View file

@ -5,22 +5,22 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
top: 0;
right: 204.8px;
width: 256px;
right: 51.2px;
width: 64px;
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>

View file

@ -12,7 +12,12 @@ body { margin:0 }
</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';
@ -27,15 +32,15 @@ body { margin:0 }
v.onplaying = function() {
this.onplaying = null;
this.pause();
takeScreenshot();
takeScreenshotDelayed(1000);
};
v.play();
}
</script>
<video id="video" width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
<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">
<track id="track" src="support/test.vtt" onload="updateCue();">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>

View file

@ -5,22 +5,22 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
top: 0;
right: 204.8px;
width: 256px;
right: 51.2px;
width: 64px;
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>

View file

@ -12,7 +12,12 @@ body { margin:0 }
</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';
@ -20,13 +25,13 @@ body { margin:0 }
c.line = 0;
c.size = 20;
c.text = 'This test tests';
takeScreenshot();
takeScreenshotDelayed(1000);
}
</script>
<video id="video" width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
<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">
<track id="track" src="support/test.vtt" onload="updateCue();">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -12,7 +12,12 @@ body { margin:0 }
</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;
@ -23,15 +28,15 @@ body { margin:0 }
v.onplaying = function() {
this.onplaying = null;
this.pause();
takeScreenshot();
takeScreenshotDelayed(1000);
};
v.play();
}
</script>
<video id="video" width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
<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">
<track id="track" src="support/test.vtt" onload="updateCue();">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -12,7 +12,12 @@ body { margin:0 }
</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';
@ -23,15 +28,15 @@ body { margin:0 }
v.onplaying = function() {
this.onplaying = null;
this.pause();
takeScreenshot();
takeScreenshotDelayed(1000);
};
v.play();
}
</script>
<video id="video" width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
<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">
<track id="track" src="support/test.vtt" onload="updateCue();">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -12,17 +12,22 @@ body { margin:0 }
</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';
takeScreenshot();
takeScreenshotDelayed(1000);
}
</script>
<video id="video" width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
<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">
<track id="track" src="support/test.vtt" onload="updateCue();">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
</style>
<div class="video"></div>

View file

@ -12,19 +12,24 @@ body { margin:0 }
</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];
t.track.removeCue(c);
takeScreenshot();
takeScreenshotDelayed(1000);
}
</script>
<video id="video" width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();">
<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">
<track id="track" src="support/test.vtt" onload="updateCue();">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</html>

View file

@ -28,7 +28,7 @@ video {
}
</style>
<video controls>
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<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>

View file

@ -21,8 +21,11 @@ video {
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>
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>

View file

@ -3,18 +3,19 @@
<style>
.video {
display: inline-block;
width: 720px;
height: 720px;
width: 180px;
height: 180px;
outline: solid;
position: relative
position: relative;
font-size: 9px
}
#cue1 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: -18px;
margin-left: -18px;
margin-top: -4.5px;
margin-left: -4.5px;
color: #000
}
#cue2 {
@ -22,8 +23,8 @@
top: 50%;
left: 50%;
right: 0;
margin-top: -54px;
margin-left: -18px;
margin-top: -13.5px;
margin-left: -4.5px;
color: #222
}
#cue3 {
@ -31,8 +32,8 @@
top: 50%;
left: 50%;
right: 0;
margin-top: -18px;
margin-left: -54px;
margin-top: -4.5px;
margin-left: -13.5px;
color: #444
}
#cue4 {
@ -40,8 +41,8 @@
top: 50%;
left: 50%;
right: 0;
margin-top: -18px;
margin-left: 18px;
margin-top: -4.5px;
margin-left: 4.5px;
color: #666
}
#cue5 {
@ -49,8 +50,8 @@
top: 50%;
left: 50%;
right: 0;
margin-top: 18px;
margin-left: -18px;
margin-top: 4.5px;
margin-left: -4.5px;
color: #888
}
#cue6 {
@ -58,8 +59,8 @@
top: 50%;
left: 50%;
right: 0;
margin-top: -54px;
margin-left: -54px;
margin-top: -13.5px;
margin-left: -13.5px;
color: #aaa
}
#cue7 {
@ -67,8 +68,8 @@
top: 50%;
left: 50%;
right: 0;
margin-top: -54px;
margin-left: 18px;
margin-top: -13.5px;
margin-left: 4.5px;
color: #ccc
}
#cue8 {
@ -76,8 +77,8 @@
top: 50%;
left: 50%;
right: 0;
margin-top: 18px;
margin-left: -54px;
margin-top: 4.5px;
margin-left: -13.5px;
color: #eee
}
#cue9 {
@ -85,18 +86,17 @@
top: 50%;
left: 50%;
right: 0;
margin-top: 18px;
margin-left: 18px;
margin-top: 4.5px;
margin-left: 4.5px;
color: green
}
.cue {
width: 36px;
width: 9px;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
font-size: 36px;
}
</style>
<div class="video">

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="reftest-wait">
<title>WebVTT rendering, repositioning of 9 cues that overlap completely</title>
<link rel="match" href="9_cues_overlapping_completely-ref.html">
<style>
@ -37,7 +37,7 @@ body { margin:0 }
}
</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(); }">
<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">

View file

@ -3,18 +3,19 @@
<style>
.video {
display: inline-block;
width: 720px;
height: 720px;
width: 180px;
height: 180px;
outline: solid;
position: relative
position: relative;
font-size: 9px;
}
#cue1 {
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-top: -18px;
margin-left: -18px;
margin-top: -4.5px;
margin-left: -4.5px;
color: #000
}
#cue2 {
@ -22,8 +23,8 @@
top: 50%;
left: 50%;
right: 0;
margin-top: -54px;
margin-left: -18px;
margin-top: -13.5px;
margin-left: -4.5px;
color: #222
}
#cue3 {
@ -31,8 +32,8 @@
top: 50%;
left: 50%;
right: 0;
margin-top: -18px;
margin-left: -54px;
margin-top: -4.5px;
margin-left: -13.5px;
color: #444
}
#cue4 {
@ -40,8 +41,8 @@
top: 50%;
left: 50%;
right: 0;
margin-top: -18px;
margin-left: 18px;
margin-top: -4.5px;
margin-left: 4.5px;
color: #666
}
#cue5 {
@ -49,8 +50,8 @@
top: 50%;
left: 50%;
right: 0;
margin-top: 18px;
margin-left: -18px;
margin-top: 4.5px;
margin-left: -4.5px;
color: #888
}
#cue6 {
@ -58,8 +59,8 @@
top: 50%;
left: 50%;
right: 0;
margin-top: -54px;
margin-left: -54px;
margin-top: -13.5px;
margin-left: -13.5px;
color: #aaa
}
#cue7 {
@ -67,8 +68,8 @@
top: 50%;
left: 50%;
right: 0;
margin-top: -54px;
margin-left: 18px;
margin-top: -13.5px;
margin-left: 4.5px;
color: #ccc
}
#cue8 {
@ -76,8 +77,8 @@
top: 50%;
left: 50%;
right: 0;
margin-top: 18px;
margin-left: -54px;
margin-top: 4.5px;
margin-left: -13.5px;
color: #eee
}
#cue9 {
@ -85,18 +86,17 @@
top: 50%;
left: 50%;
right: 0;
margin-top: 18px;
margin-left: 18px;
margin-top: 4.5px;
margin-left: 4.5px;
color: green
}
.cue {
width: 36px;
width: 9px;
text-align: center
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
font-size: 36px;
}
</style>
<div class="video">

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<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">
<style>
@ -37,7 +37,7 @@ body { margin:0 }
}
</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(); }">
<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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
</style>
<div class="video"></div>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<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">
<style>
@ -10,10 +10,12 @@ body { margin:0 }
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">
<!--
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';

View file

@ -3,10 +3,11 @@
<style>
.video {
display: inline-block;
width: 1280px;
width: 320px;
height: 19px;
outline: solid;
position: relative
position: relative;
font-size: 0.95px
}
.cue {
position: absolute;
@ -19,7 +20,6 @@
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>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<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">
<style>
@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="19" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="reftest-wait">
<title>WebVTT rendering, single quote should not be levitated</title>
<link rel="match" href="single_quote-ref.html">
<style>
@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<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">
<style>
@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<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">
<style>
@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,23 +5,23 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
bottom: 36px;
left: 320px;
bottom: 9px;
left: 80px;
right: 0;
width: 640px;
width: 160px;
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -20,7 +21,6 @@ body { margin:0 }
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,23 +5,23 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
top: 36px;
left: 320px;
top: 9px;
left: 80px;
right: 0;
width: 640px;
width: 160px;
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,23 +5,23 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -18px;
margin-top: -4.5px;
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,20 +5,21 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
#cue1 {
position: absolute;
top: 324px;
top: 81px;
left: 0;
right: 0;
text-align: center
}
#cue2 {
position: absolute;
top: 360px;
top: 90px;
left: 0;
right: 0;
text-align: center
@ -27,7 +28,6 @@ body { margin:0 }
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,20 +5,21 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
#cue1 {
position: absolute;
top: 360px;
top: 90px;
left: 0;
right: 0;
text-align: center
}
#cue2 {
position: absolute;
top: 324px;
top: 81px;
left: 0;
right: 0;
text-align: center
@ -27,7 +28,6 @@ body { margin:0 }
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,20 +5,21 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
#cue1 {
position: absolute;
top: 307.8px;
top: 76.95px;
left: 0;
right: 0;
text-align: center
}
#cue2 {
position: absolute;
top: 360px;
top: 90px;
left: 0;
right: 0;
text-align: center
@ -27,7 +28,6 @@ body { margin:0 }
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,20 +5,21 @@ html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 1280px;
height: 720px;
position: relative
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
#cue1 {
position: absolute;
top: 376.2px;
top: 94.05px;
left: 0;
right: 0;
text-align: center
}
#cue2 {
position: absolute;
top: 324px;
top: 81px;
left: 0;
right: 0;
text-align: center
@ -27,7 +28,6 @@ body { margin:0 }
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>

View file

@ -11,7 +11,7 @@ body { margin:0 }
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<video width="320" height="180" autoplay onplaying="this.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">

View file

@ -5,9 +5,10 @@
.video {
display: inline-block;
position: absolute;
width: 1280px;
width: 320px;
height: 400px;
outline: solid
outline: solid;
font-size: 20px;
}
.cue {
position: absolute;
@ -15,18 +16,17 @@
left: 0;
right: 0;
text-align: center;
padding-bottom: 40px
padding-bottom: 40px;
}
.cue > span {
font-family: Ahem, sans-serif;
background: rgba(0,0,0,0.8);
color: green;
font-size: 20px
}
</style>
<script src="/common/reftest-wait.js"></script>
<div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>
<video width="1280" height="400" autoplay controls onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<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>

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