Bug 1534888 - part1 : modify wpt '2_cues_overlapping_completely_move_up.html' and '2_cues_overlapping_partially_move_up.html'. r=heycam

In order to simulate the line break correctly and robustly, we use <div> to trigger the line break, instead of using `martin-top` to adjust the box position, which have to specify the actual line box's size. Notice that the line box size is not actullay equal to the font size, it would make the offset really tricky (like moving aroung 9.33px if font is 9px) and not robust.

In addtion, as the main purpose of these tests are to check whether the second cue would be moved upward and not overlapped with the first box, we change the line position to `100%`, which can eliminate unnecessary moving. If we set `position:50%` for first box, the first box's top would be aligned to the 50% place height of video rendering area, and the second cue would be put above the first cue, which makes that the reference files have to use more complicated CSS style in order to get the same rendering. But if we put the first cue on the bottom, it's way more easier to write the style for the make-up cue line in the reference files.

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

--HG--
extra : moz-landing-system : lando

testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_completely_move_up-ref.html

@@ -10,26 +10,22 @@ body { margin:0 }
     position: relative;
     font-size: 9px;
 }
-#cue1 {
+.cue {
     position: absolute;
-    top: 50%;
+    bottom: 0;
     left: 0;
     right: 0;
-    margin-top: -4.5px;
-    text-align: center
+    text-align: center;
 }
-#cue2 {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    right: 0;
-    margin-top: -13.5px;
-    text-align: center
-}
-.cue > span {
+.cueText {
     font-family: Ahem, sans-serif;
     background: rgba(0,0,0,0.8);
     color: green;
 }
 </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>
+<div class="video">
+    <span class="cue">
+        <div><span class="cueText">This is another test subtitle</span></div>
+        <div><span class="cueText">This is a test subtitle</span></div>
+    </span>
+</div>

testing/web-platform/tests/webvtt/rendering/cues-with-video/processing-model/2_cues_overlapping_partially_move_up-ref.html

@@ -10,26 +10,22 @@ body { margin:0 }
     position: relative;
     font-size: 9px;
 }
-#cue1 {
+.cue {
     position: absolute;
-    top: 50%;
+    bottom: 0;
     left: 0;
     right: 0;
-    margin-top: -4.5px;
-    text-align: center
+    text-align: center;
 }
-#cue2 {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    right: 0;
-    margin-top: -13.5px;
-    text-align: center
-}
-.cue > span {
+.cueText {
     font-family: Ahem, sans-serif;
     background: rgba(0,0,0,0.8);
     color: green;
 }
 </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>
+<div class="video">
+    <span class="cue">
+        <div><span class="cueText">This is another test subtitle</span></div>
+        <div><span class="cueText">This is a test subtitle</span></div>
+    </span>
+</div>

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

@@ -1,7 +1,7 @@
 WEBVTT
 
-00:00:00.000 --> 00:00:05.000 line:50%
+00:00:00.000 --> 00:00:05.000 line:100%
 This is a test subtitle
 
-00:00:01.000 --> 00:00:05.000 line:50%
+00:00:01.000 --> 00:00:05.000 line:100%
 This is another test subtitle

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

@@ -1,7 +1,7 @@
 WEBVTT
 
-00:00:00.000 --> 00:00:05.000 line:50%
+00:00:00.000 --> 00:00:05.000 line:100%
 This is a test subtitle
 
-00:00:01.000 --> 00:00:05.000 line:49%
+00:00:01.000 --> 00:00:05.000 line:99%
 This is another test subtitle