Bug 1382218 - Cap the height of <audio> controlBar as well to get rid of endless reflow. r=jaws draft
authorRay Lin <ralin@mozilla.com>
Thu, 20 Jul 2017 23:14:33 +0800
changeset 612237 f8dd97419feee2dd014e79aaea2f3aec8213a44a
parent 612171 68046a58f82913eb7804e4796ec981f6f8ea490e
child 638365 0619c79449fa6e1070a1219a6dd793b39281c57b
push id69449
push userbmo:ralin@mozilla.com
push dateThu, 20 Jul 2017 15:21:36 +0000
reviewersjaws
bugs1382218
milestone56.0a1
Bug 1382218 - Cap the height of <audio> controlBar as well to get rid of endless reflow. r=jaws MozReview-Commit-ID: A0wukWRE4fM
toolkit/content/tests/reftests/audio-height-with-padding-ref.html
toolkit/content/tests/reftests/audio-height-with-padding.html
toolkit/content/tests/reftests/reftest.list
toolkit/content/widgets/videocontrols.xml
new file mode 100644
--- /dev/null
+++ b/toolkit/content/tests/reftests/audio-height-with-padding-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+  html, body {
+    margin: 0;
+    padding: 0;
+  }
+
+  #wrapper {
+    padding-top: 20px;
+  }
+</style>
+</head>
+<body>
+  <div id="wrapper">
+    <audio controls></audio>
+  <div>
+</body>
new file mode 100644
--- /dev/null
+++ b/toolkit/content/tests/reftests/audio-height-with-padding.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+  html, body {
+    margin: 0;
+    padding: 0;
+  }
+
+  audio {
+    padding-top: 20px;
+  }
+</style>
+</head>
+<body>
+  <audio controls></audio>
+</body>
--- a/toolkit/content/tests/reftests/reftest.list
+++ b/toolkit/content/tests/reftests/reftest.list
@@ -1,5 +1,6 @@
 random-if(cocoaWidget||(/^Windows\x20NT\x206\.2/.test(http.oscpu)&&isDebugBuild)) == bug-442419-progressmeter-max.xul bug-442419-progressmeter-max-ref.xul # fails most of the time on Mac because progress meter animates
 != textbox-multiline-default-value.xul textbox-multiline-empty.xul
 fails-if(styloVsGecko) == videocontrols-dynamically-add-cc.html videocontrols-dynamically-add-cc-ref.html
 fails-if(styloVsGecko) == audio-with-bogus-url.html audio-with-bogus-url-ref.html
 fails-if(styloVsGecko) == audio-dynamically-change-small-width.html audio-dynamically-change-small-width-ref.html
+fails-if(styloVsGecko) == audio-height-with-padding.html audio-height-with-padding-ref.html
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -1675,17 +1675,25 @@
         // As long as muteButton hidden, which means only play button presents,
         // hide spacer and make playButton centered.
         this.controlBarSpacer.hidden = !this.scrubberStack.hidden || this.muteButton.hidden;
 
         // Since the size of videocontrols is expanded with controlBar in <audio>, we
         // should fix the dimensions in order not to recursively trigger reflow afterwards.
         if (this.video instanceof HTMLAudioElement) {
           if (givenHeight) {
-            this.controlBar.style.height = `${Math.max(givenHeight, this.controlBarMinVisibleHeight)}px`;
+            // The height of controlBar should be capped with the bounds between controlBarMinHeight
+            // and controlBarMinVisibleHeight.
+            let controlBarHeight = givenHeight;
+            if (givenHeight >= this.controlBarMinHeight) {
+              controlBarHeight = this.controlBarMinHeight;
+            } else if (givenHeight <= this.controlBarMinVisibleHeight) {
+              controlBarHeight = this.controlBarMinVisibleHeight;
+            }
+            this.controlBar.style.height = `${controlBarHeight}px`;
           }
           this.controlBar.style.width = `${videoWidth - minControlBarPaddingWidth}px`;
           return;
         }
 
         if (videoHeight < this.controlBarMinHeight ||
             widthUsed === minControlBarPaddingWidth) {
           this.controlBar.setAttribute("size", "hidden");