Bug 1488673 - part2 : keep font size consistent even if applying CSS transform scale on the parent element r=heycam
authorAlastor Wu <alwu@mozilla.com>
Tue, 19 Mar 2019 03:29:27 +0000
changeset 464982 367a2a68fb2dfeef6e945b01263335124f05ca12
parent 464981 93cb5631f24b43006a5b464ad047f16caaf8d91e
child 464983 e89cf185fc33bf7deb0edea5d42ca918301aa797
push id112486
push useropoprus@mozilla.com
push dateTue, 19 Mar 2019 16:41:04 +0000
treeherdermozilla-inbound@ee866fb50236 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersheycam
bugs1488673
milestone68.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 - part2 : keep font size consistent even if applying CSS transform scale on the parent element r=heycam When calculating font size, we should use the original bounding box as a reference, or it would cause incorrect font size scale. Differential Revision: https://phabricator.services.mozilla.com/D20026
dom/media/webvtt/vtt.jsm
--- a/dom/media/webvtt/vtt.jsm
+++ b/dom/media/webvtt/vtt.jsm
@@ -514,17 +514,17 @@ XPCOMUtils.defineLazyPreferenceGetter(th
     constructor(window, cue, containerBox) {
       super();
       this.cue = cue;
       this.div = window.document.createElement("div");
       this.cueDiv = parseContent(window, cue.text, supportPseudo ?
         PARSE_CONTENT_MODE.PSUEDO_CUE : PARSE_CONTENT_MODE.NORMAL_CUE);
       this.div.appendChild(this.cueDiv);
 
-      this.fontSize = this._getFontSize(containerBox.height);
+      this.fontSize = this._getFontSize(containerBox);
       // As pseudo element won't inherit the parent div's style, so we have to
       // set the font size explicitly.
       if (supportPseudo) {
         this.cueDiv.style.setProperty("--cue-font-size", this.fontSize);
       } else {
         this._applyNonPseudoCueStyles();
       }
       this.applyStyles(this._getNodeDefaultStyles(cue));
@@ -540,23 +540,23 @@ XPCOMUtils.defineLazyPreferenceGetter(th
         width: this.formatStyle(box.width, "px")
       });
     }
 
     /**
      * Following methods are private functions, should not use them outside this
      * class.
      */
-    _getFontSize(renderingAreaHeight) {
+    _getFontSize(containerBox) {
       // In https://www.w3.org/TR/webvtt1/#applying-css-properties, the spec
       // said the font size is '5vh', which means 5% of the viewport height.
       // However, if we use 'vh' as a basic unit, it would eventually become
       // 5% of screen height, instead of video's viewport height. Therefore, we
       // have to use 'px' here to make sure we have the correct font size.
-      return renderingAreaHeight * 0.05 + "px";
+      return containerBox.height * 0.05 + "px";
     }
 
     _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.