Bug 1557185 - part1 : use recommended font size for Ahem. r=heycam
authoralwu <alwu@mozilla.com>
Tue, 02 Jul 2019 18:05:13 +0000
changeset 543827 69150f66631941dba8e44904e809f2b3f6d29deb
parent 543826 6822d5123b3c395d54acecbde8411726dc5de642
child 543828 6ead08887181573a345fd5daf534e795a29304df
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersheycam
bugs1557185
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1557185 - part1 : use recommended font size for Ahem. r=heycam As the default `line-height` (normal) is computed, which would vary depending on different platforms. In these tests, we have to fix the number of showing cues, the varied `line-height` would affect how many lines could be showed in the screen. Therefore, we use `20px/1 Ahem` to fix the line height and 20px is the minimum requirement for using Ahem based on its guideline. If we use 20px for each text, then we would have 9 lines showing in the screen (180px/20px), so we can reduce the cue numbers in both vtt file and reference files. In `too_many_cues.vtt`, the first 9 cues would be displayed and the last one won't. In `too_many_cues_wrapped.vtt` the first 8 cues would be displayed and the last one won't because its text is too long to show in one line. In addtion, because of increasing the font size, we have to reduce the text number in one line to prevent unnecessary line break. Differential Revision: https://phabricator.services.mozilla.com/D34033
testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues.vtt
testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues_wrapped.vtt
testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues-ref.html
testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues.html
testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped-ref.html
testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped.html
--- a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues.vtt
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues.vtt
@@ -1,64 +1,31 @@
 WEBVTT
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
+This is a test
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
+This is a test
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
+This is a test
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
+This is a test
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
+This is a test
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
+This is a test
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
+This is a test
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
+This is a test
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
+This is a test
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-abcdefghijklmnopqrstuvw
+This text won't be shown in the screen
--- a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues_wrapped.vtt
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/support/too_many_cues_wrapped.vtt
@@ -1,61 +1,28 @@
 WEBVTT
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
+This is a test
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
+This is a test
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
+This is a test
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
+This is a test
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
+This is a test
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
+This is a test
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
+This is a test
 
 00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
-
-00:00:00.000 --> 00:00:10.000
-This is a test subtitle
+This is a test
 
 00:00:00.000 --> 00:00:10.000 size:70%
 This is a test subtitle that wraps and the part after the first subtitle should be cut out
--- a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues-ref.html
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues-ref.html
@@ -4,25 +4,36 @@
 <style>
 html { overflow:hidden }
 body { margin:0 }
 .video {
     display: inline-block;
     width: 320px;
     height: 180px;
     position: relative;
-    font-size: 9px;
 }
 .cue {
     position: absolute;
     bottom: 0;
     left: 15%;
     right: 0;
     width: 70%;
-    text-align: center
+    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>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br></span></span></div>
+<div class="video">
+    <span class="cue">
+        <div><span class="cueText">This is a test</span></div>
+        <div><span class="cueText">This is a test</span></div>
+        <div><span class="cueText">This is a test</span></div>
+        <div><span class="cueText">This is a test</span></div>
+        <div><span class="cueText">This is a test</span></div>
+        <div><span class="cueText">This is a test</span></div>
+        <div><span class="cueText">This is a test</span></div>
+        <div><span class="cueText">This is a test</span></div>
+        <div><span class="cueText">This is a test</span></div>
+    </span>
+</div>
--- a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues.html
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues.html
@@ -2,18 +2,18 @@
 <html class="reftest-wait">
 <title>WebVTT rendering, too many cues - cues that cannot fit should not be shown</title>
 <link rel="match" href="too_many_cues-ref.html">
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
 <style>
 html { overflow:hidden }
 body { margin:0 }
 ::cue {
-    font-family: Ahem, sans-serif;
-    color: green
+    font: 20px/1 Ahem;
+    color: green;
 }
 </style>
 <script src="/common/reftest-wait.js"></script>
 <video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
     <source src="/media/white.webm" type="video/webm">
     <source src="/media/white.mp4" type="video/mp4">
     <track src="support/too_many_cues.vtt">
     <script>
--- a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped-ref.html
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped-ref.html
@@ -4,25 +4,35 @@
 <style>
 html { overflow:hidden }
 body { margin:0 }
 .video {
     display: inline-block;
     width: 320px;
     height: 180px;
     position: relative;
-    font-size: 9px;
 }
 .cue {
     position: absolute;
     bottom: 0;
     left: 15%;
     right: 0;
     width: 70%;
-    text-align: center
+    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>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle<br>This is a test subtitle</span></span></div>
+<div class="video">
+    <span class="cue">
+        <div><span class="cueText">This is a test</span></div>
+        <div><span class="cueText">This is a test</span></div>
+        <div><span class="cueText">This is a test</span></div>
+        <div><span class="cueText">This is a test</span></div>
+        <div><span class="cueText">This is a test</span></div>
+        <div><span class="cueText">This is a test</span></div>
+        <div><span class="cueText">This is a test</span></div>
+        <div><span class="cueText">This is a test</span></div>
+    </span>
+</div>
--- a/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped.html
+++ b/testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/too_many_cues_wrapped.html
@@ -2,17 +2,17 @@
 <html class="reftest-wait">
 <title>WebVTT rendering, too many cues (wrapped) - cues that cannot fit should not be shown</title>
 <link rel="match" href="too_many_cues_wrapped-ref.html">
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
 <style>
 html { overflow:hidden }
 body { margin:0 }
 ::cue {
-    font-family: Ahem, sans-serif;
+    font: 20px/1 Ahem;
     color: green
 }
 </style>
 <script src="/common/reftest-wait.js"></script>
 <video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
     <source src="/media/white.webm" type="video/webm">
     <source src="/media/white.mp4" type="video/mp4">
     <track src="support/too_many_cues_wrapped.vtt">