Bug 1353689 - selectors/cue : Enable testcases under */selector/* . Fix the padding and overflow issue. r=rillian

MozReview-Commit-ID: 6jdlx01hEv7

--HG--
extra : rebase_source : 93a63954d5b64cb8a33de1ce560da8f97a5a2001

dom/media/webvtt/vtt.jsm

@@ -522,6 +522,7 @@ const { XPCOMUtils } = require("resource://gre/modules/XPCOMUtils.jsm");
     styles = {
       position: "absolute",
       textAlign: cue.align,
+      font: styleOptions.font,
     };
 
     this.div = window.document.createElement("div");
@@ -532,17 +533,24 @@ const { XPCOMUtils } = require("resource://gre/modules/XPCOMUtils.jsm");
     // Calculate the distance from the reference edge of the viewport to the text
     // position of the cue box. The reference edge will be resolved later when
     // the box orientation styles are applied.
+    function convertCuePostionToPercentage(cuePosition) {
+      if (cuePosition === "auto") {
+        return 50;
+      }
+      return cuePosition;
+    }
     var textPos = 0;
+    let postionPercentage = convertCuePostionToPercentage(cue.position);
     switch (cue.computedPositionAlign) {
       // TODO : modify these fomula to follow the spec, see bug 1277437.
       case "line-left":
-        textPos = cue.position;
+        textPos = postionPercentage;
         break;
       case "center":
-        textPos = cue.position - (cue.size / 2);
+        textPos = postionPercentage - (cue.size / 2);
         break;
       case "line-right":
-        textPos = cue.position - cue.size;
+        textPos = postionPercentage - cue.size;
         break;
     }
 
@@ -893,7 +901,6 @@ const { XPCOMUtils } = require("resource://gre/modules/XPCOMUtils.jsm");
 
   var FONT_SIZE_PERCENT = 0.05;
   var FONT_STYLE = "sans-serif";
-  var CUE_BACKGROUND_PADDING = "1.5%";
 
   // Runs the processing model over the cues and regions passed to it.
   // @param overlay A block level element (usually a div) that the computed cues
@@ -919,14 +926,13 @@ const { XPCOMUtils } = require("resource://gre/modules/XPCOMUtils.jsm");
       controlBarShown = controlBar ? !!controlBar.clientHeight : false;
     }
 
-    var paddedOverlay = window.document.createElement("div");
-    paddedOverlay.style.position = "absolute";
-    paddedOverlay.style.left = "0";
-    paddedOverlay.style.right = "0";
-    paddedOverlay.style.top = "0";
-    paddedOverlay.style.bottom = "0";
-    paddedOverlay.style.margin = CUE_BACKGROUND_PADDING;
-    overlay.appendChild(paddedOverlay);
+    var rootOfCues = window.document.createElement("div");
+    rootOfCues.style.position = "absolute";
+    rootOfCues.style.left = "0";
+    rootOfCues.style.right = "0";
+    rootOfCues.style.top = "0";
+    rootOfCues.style.bottom = "0";
+    overlay.appendChild(rootOfCues);
 
     // Determine if we need to compute the display states of the cues. This could
     // be the case if a cue's state has been changed since the last computation or
@@ -947,13 +953,13 @@ const { XPCOMUtils } = require("resource://gre/modules/XPCOMUtils.jsm");
     // We don't need to recompute the cues' display states. Just reuse them.
     if (!shouldCompute(cues)) {
       for (var i = 0; i < cues.length; i++) {
-        paddedOverlay.appendChild(cues[i].displayState);
+        rootOfCues.appendChild(cues[i].displayState);
       }
       return;
     }
 
     var boxPositions = [],
-        containerBox = BoxPosition.getSimpleBoxPosition(paddedOverlay),
+        containerBox = BoxPosition.getSimpleBoxPosition(rootOfCues),
         fontSize = Math.round(containerBox.height * FONT_SIZE_PERCENT * 100) / 100;
     var styleOptions = {
       font: fontSize + "px " + FONT_STYLE
@@ -973,7 +979,7 @@ const { XPCOMUtils } = require("resource://gre/modules/XPCOMUtils.jsm");
         // Compute the intial position and styles of the cue div.
         styleBox = new CueStyleBox(window, cue, styleOptions);
         styleBox.cueDiv.style.setProperty("--cue-font-size", fontSize + "px");
-        paddedOverlay.appendChild(styleBox.div);
+        rootOfCues.appendChild(styleBox.div);
 
         // Move the cue div to it's correct line position.
         moveBoxToLinePosition(window, styleBox, containerBox, boxPositions);

layout/style/res/html.css

@@ -773,7 +773,6 @@ video > .caption-box {
   width: 100%;
   height: 100%;
   position: relative;
-  overflow: hidden;
 }
 
 /* ::cue default settings */

testing/web-platform/meta/webvtt/rendering/cues-with-video/processing-model/selectors/__dir__.ini

@@ -1 +0,0 @@
-disabled: https://bugzilla.mozilla.org/show_bug.cgi?id=1332564

testing/web-platform/meta/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties.html.ini

@@ -1,3 +0,0 @@
-[font_properties.html]
-  type: reftest
-  expected: FAIL

testing/web-platform/meta/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand.html.ini

@@ -1,3 +0,0 @@
-[font_shorthand.html]
-  type: reftest
-  expected: FAIL

testing/web-platform/meta/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-line_wrapped.html.ini

@@ -0,0 +1,4 @@
+[white-space_pre-line_wrapped.html]
+  type: reftest
+  expected: FAIL
+