Bug 1382218 - Cap the height of <audio> controlBar as well to get rid of endless reflow. r=jaws
MozReview-Commit-ID: A0wukWRE4fM
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");