Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-20 08:45:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1305732 - part6 : modify wpts. r=heycam

Browse Source 
In this patch, we do the following changes.

1. using Ahem and using it as recommanded font size and line height.
2. reduce the cue text length in `align_center_position_lt_50.vtt` and `align_center_position_gt_50.vtt` in order to prevent text wrapping to multiple lines
3. wrapping to mulitple lines would be tested in `align_center_position_lt_50_size_gt_maximum_size.html` and `align_center_position_gt_50_size_gt_maximum_size-ref.html`

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

--HG--
extra : moz-landing-system : lando
This commit is contained in:
alwu 2019-07-08 03:05:16 +00:00
parent c2ca57258b
commit 10c0d48c5a
12 changed files with 98 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
testing/web-platform/meta/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size.html.ini Normal file
View File

@ -0,0 +1,4 @@
[align_center_position_gt_50_size_gt_maximum_size.html]
disabled:
if (os == "android"): https://bugzilla.mozilla.org/show_bug.cgi?id=1536762
fuzzy: align_center_position_gt_50_size_gt_maximum_size-ref.html:maxDifference=0-2;totalPixels=0-43000

11
testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50-ref.html
View File

@ -9,7 +9,6 @@ body { margin:0 }
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -17,11 +16,15 @@ body { margin:0 }
right: 0px;
width: 64px;
text-align: center;
font: 20px/1 Ahem;
}
.cue > span {
font-family: Ahem, sans-serif;
.cueText {
background: rgba(0,0,0,0.8);
color: green;
}
</style>
<div class=video><span class=cue><span>Awesome!!!</span></span></div>
<div class=video>
<div class="cue">
<span class="cueText">foo</span>
</div>
</div>

4
testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50.html
View File

@ -7,8 +7,8 @@
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
font: 20px/1 Ahem;
color: green;
}
</style>
<script src="/common/reftest-wait.js"></script>

33
testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size-ref.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<title>Reference for WebVTT rendering, align:center, position greater than 50%, size greater than maximum size</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
html { overflow:hidden }
body { margin:0 }
.video {
display: inline-block;
width: 320px;
height: 180px;
position: relative;
}
.cue {
position: absolute;
bottom: 0px;
right: 0px;
width: 64px;
text-align: center;
font: 20px/1 Ahem;
}
.cueText {
background: rgba(0,0,0,0.8);
color: green;
}
</style>
<div class=video>
<div class="cue">
<div><span class="cueText">Awe</span></div>
<div><span class="cueText">som</span></div>
<div><span class="cueText">e!!</span></div>
<div><span class="cueText">!</span></div>
</div>
</div>

23
testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_gt_50_size_gt_maximum_size.html Normal file
View File

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

13
testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50-ref.html
View File

@ -9,7 +9,6 @@ body { margin:0 }
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
@ -17,12 +16,16 @@ body { margin:0 }
left: 0px;
right: 0;
width: 64px;
text-align: center
text-align: center;
font: 20px/1 Ahem;
}
.cue > span {
font-family: Ahem, sans-serif;
.cueText {
background: rgba(0,0,0,0.8);
color: green;
}
</style>
<div class=video><span class=cue><span>Awesome!!!</span></span></div>
<div class=video>
<div class="cue">
<span class="cueText">foo</span>
</div>
</div>

4
testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50.html
View File

@ -7,8 +7,8 @@
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
font: 20px/1 Ahem;
color: green;
}
</style>
<script src="/common/reftest-wait.js"></script>

17
testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size-ref.html
View File

@ -9,20 +9,25 @@ body { margin:0 }
width: 320px;
height: 180px;
position: relative;
font-size: 9px;
}
.cue {
position: absolute;
bottom: 0;
bottom: 0px;
left: 0px;
right: 0;
width: 64px;
text-align: center;
font: 20px/1 Ahem;
}
.cue > span {
font-family: Ahem, sans-serif;
.cueText {
background: rgba(0,0,0,0.8);
color: green;
}
</style>
<div class=video><span class=cue><span>Awesome!!!</span></span></div>
<div class=video>
<div class="cue">
<div><span class="cueText">Awe</span></div>
<div><span class="cueText">som</span></div>
<div><span class="cueText">e!!</span></div>
<div><span class="cueText">!</span></div>
</div>
</div>

4
testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/align_center_position_lt_50_size_gt_maximum_size.html
View File

@ -7,8 +7,8 @@
html { overflow:hidden }
body { margin:0 }
::cue {
font-family: Ahem, sans-serif;
color: green
font: 20px/1 Ahem;
color: green;
}
</style>
<script src="/common/reftest-wait.js"></script>

2
testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_gt_50.vtt
View File

@ -1,4 +1,4 @@
WEBVTT
00:00:00.000 --> 00:00:05.000 align:center position:90%
Awesome!!!
foo

4
testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_gt_50_size_gt_maximum_size.vtt Normal file
View File

@ -0,0 +1,4 @@
WEBVTT
00:00:00.000 --> 00:00:05.000 align:center position:90% size:75%
Awesome!!!

2
testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/align_center_position_lt_50.vtt
View File

@ -1,4 +1,4 @@
WEBVTT
00:00:00.000 --> 00:00:05.000 align:center position:10%
Awesome!!!
foo