Bug 1353689 - selectors/cue : Enable testcases under */selector/* . Fix the padding and overflow issue. r=rillian
MozReview-Commit-ID: 6jdlx01hEv7
--- 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
+