Bug 1353689 - selectors/cue : Enable testcases under */selector/* . Fix the padding and overflow issue. r=rillian
authorbechen <bechen@mozilla.com>
Mon, 17 Apr 2017 17:27:23 +0800
changeset 354532 b77efb1bfd41959a609fdd21b8f1e050008eef73
parent 354531 01652f326a800471b8104e1c62f78b3a48d63a46
child 354533 079e84d187bd55537905c2dac83674a52e1513a5
push id41349
push usercbook@mozilla.com
push dateMon, 24 Apr 2017 12:55:47 +0000
treeherderautoland@c90ea6b2e05a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrillian
bugs1353689
milestone55.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 1353689 - selectors/cue : Enable testcases under */selector/* . Fix the padding and overflow issue. r=rillian MozReview-Commit-ID: 6jdlx01hEv7
dom/media/webvtt/vtt.jsm
layout/style/res/html.css
testing/web-platform/meta/webvtt/rendering/cues-with-video/processing-model/selectors/__dir__.ini
testing/web-platform/meta/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_properties.html.ini
testing/web-platform/meta/webvtt/rendering/cues-with-video/processing-model/selectors/cue/font_shorthand.html.ini
testing/web-platform/meta/webvtt/rendering/cues-with-video/processing-model/selectors/cue/white-space_pre-line_wrapped.html.ini
--- 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
+