--- a/dom/media/webvtt/vtt.jsm
+++ b/dom/media/webvtt/vtt.jsm
@@ -517,37 +517,45 @@ const { XPCOMUtils } = require("resource
     }
     this.applyStyles(styles, this.cueDiv);
 
     // Create an absolutely positioned div that will be used to position the cue
     // div.
     styles = {
       position: "absolute",
       textAlign: cue.align,
+      font: styleOptions.font,
     };
 
     this.div = window.document.createElement("div");
     this.applyStyles(styles);
 
     this.div.appendChild(this.cueDiv);
 
     // 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;
     }
 
     // Horizontal box orientation; textPos is the distance from the left edge of the
     // area to the left edge of the box and cue.size is the distance extending to
     // the right from there.
     if (cue.vertical === "") {
       this.applyStyles({
@@ -888,17 +896,16 @@ const { XPCOMUtils } = require("resource
     if (!window) {
       return null;
     }
     return parseContent(window, cuetext, true);
   };
 
   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
   //                and regions will be placed into.
   // @param controls  A Control bar element. Cues' position will be
   //                 affected and repositioned according to it.
   WebVTT.processCues = function(window, cues, overlay, controls) {
     if (!window || !cues || !overlay) {
@@ -914,24 +921,23 @@ const { XPCOMUtils } = require("resource
     var controlBarShown;
 
     if (controls) {
       controlBar = controls.ownerDocument.getAnonymousElementByAttribute(
         controls, "anonid", "controlBar");
       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
     // if it has not been computed yet.
     function shouldCompute(cues) {
       if (controlBarShown) {
         return true;
       }
@@ -942,23 +948,23 @@ const { XPCOMUtils } = require("resource
         }
       }
       return false;
     }
 
     // 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
     };
 
     (function() {
       var styleBox, cue;
 
@@ -968,17 +974,17 @@ const { XPCOMUtils } = require("resource
       }
 
       for (var i = 0; i < cues.length; i++) {
         cue = cues[i];
 
         // 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);
 
         // Remember the computed div so that we don't have to recompute it later
         // if we don't have too.
         cue.displayState = styleBox.div;
 

--- a/layout/style/res/html.css
+++ b/layout/style/res/html.css
@@ -768,17 +768,16 @@ audio[controls] {
   /* we want to be an absolute and fixed container */
   transform: translate(0) !important;
 }
 
 video > .caption-box {
   width: 100%;
   height: 100%;
   position: relative;
-  overflow: hidden;
 }
 
 /* ::cue default settings */
 ::cue {
   color: rgba(255, 255, 255, 1);
   white-space: pre-line;
   background-color: rgba(0, 0, 0, 0.8);
   font: var(--cue-font-size) sans-serif;

deleted file mode 100644
--- a/testing/web-platform/meta/webvtt/rendering/cues-with-video/processing-model/selectors/__dir__.ini
+++ /dev/null
@@ -1,1 +0,0 @@
-disabled: https://bugzilla.mozilla.org/show_bug.cgi?id=1332564

deleted file mode 100644
--- a/testing/web-platform/meta/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties.html.ini
+++ /dev/null
@@ -1,3 +0,0 @@
-[font_properties.html]
-  type: reftest
-  expected: FAIL

deleted file mode 100644
--- a/testing/web-platform/meta/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand.html.ini
+++ /dev/null
@@ -1,3 +0,0 @@
-[font_shorthand.html]
-  type: reftest
-  expected: FAIL

new file mode 100644
--- /dev/null
+++ b/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
+