Bug 1424095 - Use display: block on iframes in XUL flexbox emulation mode;r=Gijs
With emulated flex display we wrap inline-level children into anonymous
wrapper-blocks, and those wrapper blocks serve as the flex items. Using
display: block and then resetting the hardcoded width/height does the trick.
MozReview-Commit-ID: Grh1KsSmngP
--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@@ -164,16 +164,24 @@ toolbar[mode="text"] .toolbarbutton-icon
/******** browser, editor, iframe ********/
browser,
editor,
iframe {
display: inline;
}
+@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
+ browser,
+ editor,
+ iframe {
+ display: block;
+ }
+}
+
browser {
-moz-binding: url("chrome://global/content/bindings/browser.xml#browser");
}
browser[remote=true]:not(.lightweight) {
-moz-binding: url("chrome://global/content/bindings/remote-browser.xml#remote-browser");
}
--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -83,16 +83,24 @@ window.dialog {
iframe {
border: none;
width: 100px;
height: 100px;
min-width: 10px;
min-height: 10px;
}
+@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
+ /* In emulation, <iframe> is block instead of inline, so reset the width/height */
+ iframe {
+ width: auto;
+ height: auto;
+ }
+}
+
/* XXXBlake yeah, shoot me -- these don't belong here. I'll move them later. */
sidebarheader {
min-height: 25px;
text-shadow: none;
}
sidebarheader > label {
--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -78,16 +78,24 @@ window.dialog {
iframe {
border: none;
width: 100px;
height: 100px;
min-width: 10px;
min-height: 10px;
}
+@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
+ /* In emulation, <iframe> is block instead of inline, so reset the width/height */
+ iframe {
+ width: auto;
+ height: auto;
+ }
+}
+
/* ::::: miscellaneous formatting ::::: */
sidebarheader {
background-color: -moz-Dialog;
color: -moz-dialogText;
text-shadow: none;
}
--- a/toolkit/themes/windows/global/global.css
+++ b/toolkit/themes/windows/global/global.css
@@ -94,16 +94,24 @@ window.dialog {
iframe {
border: none;
width: 100px;
height: 100px;
min-width: 10px;
min-height: 10px;
}
+@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
+ /* In emulation, <iframe> is block instead of inline, so reset the width/height */
+ iframe {
+ width: auto;
+ height: auto;
+ }
+}
+
/* XXXBlake yeah, shoot me -- these don't belong here. I'll move them later. */
sidebarheader {
min-height: 25px;
text-shadow: none;
}
sidebarheader > label {