Bug 1305732 - part4 : background box should be a inline node. r=heycam a=RyanVM
authoralwu <alwu@mozilla.com>
Mon, 08 Jul 2019 18:02:53 +0000
changeset 544486 cb42f7e76d0fed643773da7644f7bb476266dc26
parent 544485 0e4e5645b8223acdab08e9450291b6d512e55c64
child 544487 8c74a8452ad56f63645f70ca737598dbc007b0bf
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersheycam, RyanVM
bugs1305732
milestone69.0
Bug 1305732 - part4 : background box should be a inline node. r=heycam a=RyanVM According to the spec [1], the background box should be `display:inline`. Therefore, we should create a `<span>`, which already is an inline element, for the background box, not a `<div>`, which is a block element. In addition, when the pseudo element is enabled, even though the element is currently a `div`, it doesn't match the div `{ display: block; }` rule from the UA style sheet because the pseudo element only matches `::cue` rules. It also has the initial value of display which is `inline`. [1] https://www.w3.org/TR/webvtt1/#webvtt-cue-background-box Differential Revision: https://phabricator.services.mozilla.com/D36849
dom/media/webvtt/vtt.jsm
--- a/dom/media/webvtt/vtt.jsm
+++ b/dom/media/webvtt/vtt.jsm
@@ -411,21 +411,21 @@ XPCOMUtils.defineLazyPreferenceGetter(th
         f = "000";
       }
       return hours + ':' + minutes + ':' + seconds + '.' + f;
     }
 
     let root;
     switch (mode) {
       case PARSE_CONTENT_MODE.PSUEDO_CUE:
-        root = window.document.createElement("div", {pseudo: "::cue"});
+        root = window.document.createElement("span", {pseudo: "::cue"});
         break;
       case PARSE_CONTENT_MODE.NORMAL_CUE:
       case PARSE_CONTENT_MODE.REGION_CUE:
-        root = window.document.createElement("div");
+        root = window.document.createElement("span");
         break;
       case PARSE_CONTENT_MODE.DOCUMENT_FRAGMENT:
         root = window.document.createDocumentFragment();
         break;
     }
 
     if (!input) {
       root.appendChild(window.document.createTextNode(""));
@@ -604,17 +604,16 @@ XPCOMUtils.defineLazyPreferenceGetter(th
     _applyNonPseudoCueStyles() {
       // If cue div is not a pseudo element, we should set the default css style
       // for it, the reason we need to set these attributes to cueDiv is because
       // if we set background on the root node directly, if would cause filling
       // too large area for the background color as the size of root node won't
       // be adjusted by cue size.
       this.applyStyles({
         "background-color": "rgba(0, 0, 0, 0.8)",
-        "display": "inline",
       }, this.cueDiv);
     }
 
     // spec https://www.w3.org/TR/webvtt1/#applying-css-properties
     _applyDefaultStylesOnRootNode() {
       // The variables writing-mode, top, left, width, and height are calculated
       // in the spec 7.2, https://www.w3.org/TR/webvtt1/#processing-cue-settings
       // spec 7.2.1, calculate 'writing-mode'.