Bug 1382218 - Cap the height of <audio> controlBar as well to get rid of endless reflow. r=jaws
authorRay Lin <ralin@mozilla.com>
Thu, 20 Jul 2017 23:14:33 +0800
changeset 418865 e999e5ea1f78dd6f89ae485c199477083b369946
parent 418864 c82858285f0b37cb3f6e16245d5e993a50102e57
child 418866 fec3b51a474ce462b9ea8d358afc8e7b7fd1270c
push id7566
push usermtabara@mozilla.com
push dateWed, 02 Aug 2017 08:25:16 +0000
treeherdermozilla-beta@86913f512c3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1382218
milestone56.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 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,20 @@
         // 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 = Math.max(Math.min(givenHeight, this.controlBarMinHeight), 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");