Bug 1571908 - part5 : add wpt 'snap-to-line.html'. r=heycam

Add wpt `snap-to-line.html` to ensure that the cue with `snap-to-line=false` can be placed in correct place.

Setting `line` as percentage will make cue's `snap-to-line` to `false` automatically [1], and we also set `position` and `align` to test if we can handle all these attributes well when  `snap-to-line` is false.

[1] https://www.w3.org/TR/webvtt1/#ref-for-webvtt-cue-snap-to-lines-flag-9

Differential Revision: https://phabricator.services.mozilla.com/D42433

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Alastor Wu 2019-08-21 07:10:27 +00:00
parent b43ac32ce9
commit 5eb414efca
4 changed files with 62 additions and 0 deletions

View File

@ -0,0 +1,5 @@
[snap-to-line.html]
disabled:
if (os == "win"): https://bugzilla.mozilla.org/show_bug.cgi?id=1536762
if (os == "android"): https://bugzilla.mozilla.org/show_bug.cgi?id=1536762
fuzzy: snap-to-line-ref.html:maxDifference=0-2;totalPixels=0-3500

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, set explicit 'line' and 'position', which will force 'snap-to-line' to false</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 320px;
height: 180px;
position: relative;
}
.cue {
position: absolute;
top: 90px;
left: 160px;
text-align: center;
font: 20px/1 Ahem;
}
.cueText {
background: rgba(0,0,0,0.8);
color: green;
}
</style>
<div class=video>
<div class="cue">
<span class="cueText">foo</span>
</div>
</div>

View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>WebVTT rendering, set explicit 'line' and 'position', which will force 'snap-to-line' to false</title>
<link rel="match" href="snap-to-line-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
html { overflow:hidden }
body { margin:0 }
::cue {
font: 20px/1 Ahem;
color: green;
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/snap-to-line.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
</script>
</video>
</html>

View File

@ -0,0 +1,5 @@
WEBVTT
NOTE set line as percentage would make 'snap-to-line' to false
00:00:00.000 --> 00:00:05.000 align:start position:50%,line-left line:50%,start
foo