Bug 1488673 - part1 : use correct size to calculate position. r=heycam
☠☠ backed out by 2e3d01a1b848 ☠ ☠
authorAlastor Wu <alwu@mozilla.com>
Thu, 14 Mar 2019 01:37:42 +0000
changeset 464743 ca1266e7fbade736e426c4a3544196a2df4343f6
parent 464742 f64eeef3529627eb85be22d6c5393014204c5105
child 464744 9206cafa87786869129717123cc8d60f91008637
push id112481
push userrgurzau@mozilla.com
push dateMon, 18 Mar 2019 21:51:19 +0000
treeherdermozilla-inbound@6ed5e5a3e39e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersheycam
bugs1488673
milestone67.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 1488673 - part1 : use correct size to calculate position. r=heycam According to the spec [1], we have calculated the size in step 7.3 and then we should use that for calculating x-position and y-position, instead of using cue's size. [1] https://w3c.github.io/webvtt/#apply-webvtt-cue-settings Differential Revision: https://phabricator.services.mozilla.com/D22808
dom/media/webvtt/vtt.jsm
--- a/dom/media/webvtt/vtt.jsm
+++ b/dom/media/webvtt/vtt.jsm
@@ -585,35 +585,32 @@ XPCOMUtils.defineLazyPreferenceGetter(th
       return styles;
     }
 
     // spec https://www.w3.org/TR/webvtt1/#processing-cue-settings
     _processCueSetting(cue, styles) {
       // spec 7.2.1, calculate 'writing-mode'.
       styles["writing-mode"] = this._getCueWritingMode(cue);
 
-      // spec 7.2.2 ~ 7.2.4, calculate 'width' and 'height'.
-      const {width, height} = this._getCueWidthAndHeight(cue);
+      // spec 7.2.2 ~ 7.2.7, calculate 'width', 'height', 'left' and 'top'.
+      const {width, height, left, top} = this._getCueSizeAndPosition(cue);
       styles["width"] = width;
       styles["height"] = height;
-
-      // spec 7.2.5 ~ 7.2.7, calculate 'left' and 'top'.
-      const {left, top} = this._getCueLeftAndTop(cue);
       styles["left"] = left;
       styles["top"] = top;
     }
 
     _getCueWritingMode(cue) {
       if (cue.vertical == "") {
         return "horizontal-tb";
       }
       return cue.vertical == "lr" ? "vertical-lr" : "vertical-rl";
     }
 
-    _getCueWidthAndHeight(cue) {
+    _getCueSizeAndPosition(cue) {
       // spec 7.2.2, determine the value of maximum size for cue as per the
       // appropriate rules from the following list.
       let maximumSize;
       let computedPosition = cue.computedPosition;
       switch (cue.computedPositionAlign) {
         case "line-left":
           maximumSize = 100 - computedPosition;
           break;
@@ -621,50 +618,41 @@ XPCOMUtils.defineLazyPreferenceGetter(th
           maximumSize = computedPosition;
           break;
         case "center":
           maximumSize = computedPosition <= 50 ?
             computedPosition * 2 : (100 - computedPosition) * 2;
           break;
       }
       const size = Math.min(cue.size, maximumSize);
-      return cue.vertical == "" ? {
-        width: size + "%",
-        height: "auto",
-      } : {
-        width: "auto",
-        height: size + "%",
-      };
-    }
 
-    _getCueLeftAndTop(cue) {
       // spec 7.2.5, determine the value of x-position or y-position for cue as
       // per the appropriate rules from the following list.
       let xPosition = 0.0, yPosition = 0.0;
       const isWritingDirectionHorizontal = cue.vertical == "";
       switch (cue.computedPositionAlign) {
         case "line-left":
           if (isWritingDirectionHorizontal) {
             xPosition = cue.computedPosition;
           } else {
             yPosition = cue.computedPosition;
           }
           break;
         case "center":
           if (isWritingDirectionHorizontal) {
-            xPosition = cue.computedPosition - (cue.size / 2);
+            xPosition = cue.computedPosition - (size / 2);
           } else {
-            yPosition = cue.computedPosition - (cue.size / 2);
+            yPosition = cue.computedPosition - (size / 2);
           }
           break;
         case "line-right":
           if (isWritingDirectionHorizontal) {
-            xPosition = cue.computedPosition - cue.size;
+            xPosition = cue.computedPosition - size;
           } else {
-            yPosition = cue.computedPosition - cue.size;
+            yPosition = cue.computedPosition - size;
           }
           break;
       }
 
       // spec 7.2.6, determine the value of whichever of x-position or
       // y-position is not yet calculated for cue as per the appropriate rules
       // from the following list.
       if (!cue.snapToLines) {
@@ -675,17 +663,22 @@ XPCOMUtils.defineLazyPreferenceGetter(th
         }
       } else {
         if (isWritingDirectionHorizontal) {
           yPosition = 0;
         } else {
           xPosition = 0;
         }
       }
-      return { left: xPosition + "%", top: yPosition + "%"};
+      return {
+        left: xPosition + "%",
+        top: yPosition + "%",
+        width: isWritingDirectionHorizontal ? size + "%" : "auto",
+        height: isWritingDirectionHorizontal ? "auto" : size + "%",
+      };
     }
   }
 
   function RegionNodeBox(window, region, container) {
     StyleBox.call(this);
 
     var boxLineHeight = container.height * 0.0533 // 0.0533vh ? 5.33vh
     var boxHeight = boxLineHeight * region.lines;