Bug 1822131 - Allow XUL elements to shrink-by-default. r=dholbert

Bug 1821920 and bug 1821871 are instances of an interesting behavior change from bug 1820534. The default flex-basis of old XUL was auto instead of max-content, because of this code: https://searchfox.org/mozilla-central/rev/af78418c4b5f2c8721d1a06486cf4cf0b33e1e8d/layout/generic/nsFlexContainerFrame.cpp#1327 So stuff that used to wrap now no longer does, in an horizontal flex container, since xul.css prevents XUL elements from shrinking. Per the comment, a few tests relied on this, but I believe it should generally be safe to shrink the items. This only causes to shrink if they have an explicit width but no min-width (including min-width: auto). Some tests like test_mousescroll.xhtml hit this, because they have explicit sizes but min-width: auto ends up being 0 effectively, but I believe we should tweak those tests instead. Differential Revision: https://phabricator.services.mozilla.com/D172462
iaxat · Mar 14, 2023 · 8d5b4b0 · 8d5b4b0
1 parent e49f680
commit 8d5b4b0
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 42 deletions.
diff --git a/browser/components/customizableui/test/browser_hidden_widget_overflow.js b/browser/components/customizableui/test/browser_hidden_widget_overflow.js
@@ -49,7 +49,7 @@ add_setup(async function() {
   // of the hidden widget) get overflowed.
   for (let webExtID of [kWebExtensionButtonID1, kWebExtensionButtonID2]) {
     let webExtNode = CustomizableUI.getWidget(webExtID).forWindow(gWin).node;
-    webExtNode.style.width = "100px";
+    webExtNode.style.minWidth = "100px";
   }
 
   CustomizableUI.createWidget({

diff --git a/dom/events/test/bug602962.xhtml b/dom/events/test/bug602962.xhtml
@@ -3,6 +3,6 @@
 
 <window onload="window.opener.doTest()" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <scrollbox id="page-scrollbox" style="border: 1px solid red; background-color: black;overflow: auto" flex="1">
-    <box id="page-box" style="border: 1px solid green;"/>
+    <box id="page-box" style="flex-shrink: 0; border: 1px solid green;"/>
   </scrollbox>
 </window>
diff --git a/layout/base/tests/chrome/printpreview_helper.xhtml b/layout/base/tests/chrome/printpreview_helper.xhtml
@@ -4,8 +4,8 @@
                  type="text/css"?>
 <window onload="runTests()"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-  <iframe style="height: 200px; width: 600px" type="content"></iframe>
-  <iframe style="height: 200px; width: 600px" type="content"></iframe>
+  <iframe style="min-height: 200px; min-width: 600px" type="content"></iframe>
+  <iframe style="min-height: 200px; min-width: 600px" type="content"></iframe>
 <script type="application/javascript">
 <![CDATA[
 // Note: We can't use window.frames directly here because the type="content"
@@ -86,9 +86,8 @@ function printpreview(options = {}) {
     let bc = frameElts[0].contentWindow.browsingContext;
     let browser = document.createXULElement("browser");
     browser.setAttribute("type", "content");
-    browser.style.width = "800px";
-    browser.style.height = "800px";
-    browser.style.maxWidth = "800px"; // Deal with XUL silliness.
+    browser.style.minHeight = "800px";
+    browser.style.maxWidth = browser.style.minWidth = "800px";
     browser.setAttribute("initialBrowsingContextGroupId", bc.group.id);
     browser.setAttribute("nodefaultsrc", "true");
     document.documentElement.appendChild(browser);

diff --git a/layout/generic/test/test_bug469613.xhtml b/layout/generic/test/test_bug469613.xhtml
@@ -18,7 +18,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=469613
 </body>
 
 <vbox style="height: 100px; overflow: auto;" id="scrollbox">
-  <hbox style="height: 200px;"/>
+  <hbox style="min-height: 200px;"/>
 </vbox>
 
 <script class="testbody" type="application/javascript"><![CDATA[

diff --git a/layout/reftests/invalidation/540247-1-ref.xhtml b/layout/reftests/invalidation/540247-1-ref.xhtml
@@ -7,7 +7,7 @@
 document.addEventListener("MozReftestInvalidate", runtest, false);
 
 function runtest() {
-  document.getElementById('b').style.height = '100px';
+  document.getElementById('b').style.minHeight = '100px';
 
   var scrollbox = document.getElementById('s');
   scrollbox.scrollTo(0, 1000);
@@ -19,9 +19,9 @@ function runtest() {
 
   <scrollbox id="s" style="height: 200px; overflow: scroll;">
     <vbox>
-      <vbox style="height: 150px; width: 200px; background: red;" id="b"/>
-      <vbox style="height: 150px; width: 200px; background: green;"/>
-      <vbox style="height: 150px; width: 200px; background: blue;"/>
+      <vbox style="min-height: 150px; min-width: 200px; background: red;" id="b"/>
+      <vbox style="min-height: 150px; min-width: 200px; background: green;"/>
+      <vbox style="min-height: 150px; min-width: 200px; background: blue;"/>
       <label value="a"/>
     </vbox>
   </scrollbox>

diff --git a/layout/reftests/invalidation/540247-1.xhtml b/layout/reftests/invalidation/540247-1.xhtml
@@ -15,17 +15,17 @@ function runtest() {
 }
 
 function finish() {
-  document.getElementById('b').style.height = '100px';
+  document.getElementById('b').style.minHeight = '100px';
   document.documentElement.className = "";
 }
 ]]>
 </script>
 
   <scrollbox id="s" style="height: 200px; overflow: scroll;">
     <vbox>
-      <vbox style="height: 150px; width: 200px; background: red;" id="b"/>
-      <vbox style="height: 150px; width: 200px; background: green;"/>
-      <vbox style="height: 150px; width: 200px; background: blue;"/>
+      <vbox style="min-height: 150px; min-width: 200px; background: red;" id="b"/>
+      <vbox style="min-height: 150px; min-width: 200px; background: green;"/>
+      <vbox style="min-height: 150px; min-width: 200px; background: blue;"/>
       <label value="a"/>
     </vbox>
   </scrollbox>

diff --git a/layout/xul/test/test_splitter.xhtml b/layout/xul/test/test_splitter.xhtml
@@ -1,7 +1,7 @@
 <?xml version="1.0"?>
 <?xml-stylesheet href="chrome://global/skin" type="text/css"?>
 <?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
-<?xml-stylesheet href="data:text/css, hbox { border: 1px solid red; } vbox { border: 1px solid green }" type="text/css"?>
+<?xml-stylesheet href="data:text/css, * { flex-shrink: 0 } hbox { border: 1px solid red; } vbox { border: 1px solid green }" type="text/css"?>
 <!--
 XUL <splitter> collapsing tests
 -->

diff --git a/toolkit/content/tests/chrome/test_hiddenpaging.xhtml b/toolkit/content/tests/chrome/test_hiddenpaging.xhtml
@@ -12,7 +12,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=317422
   <style xmlns="http://www.w3.org/1999/xhtml">
     /* This makes the richlistbox about 4.5 rows high */
     richlistitem:not([collapsed]) {
-      height: 30px;
+      min-height: 30px;
     }
     richlistbox {
       height: 135px;

diff --git a/toolkit/content/tests/chrome/test_mousescroll.xhtml b/toolkit/content/tests/chrome/test_mousescroll.xhtml
@@ -34,31 +34,31 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=378028
   <box orient="horizontal">
     <arrowscrollbox id="hscrollbox" clicktoscroll="true" orient="horizontal"
      smoothscroll="false" style="max-width:80px;" flex="1">
-      <hbox style="width:40px; height:20px; background:black;" hidden="true"/>
-      <hbox style="width:40px; height:20px; background:white;"/>
-      <hbox style="width:40px; height:20px; background:black;"/>
-      <hbox style="width:40px; height:20px; background:white;"/>
-      <hbox style="width:40px; height:20px; background:black;"/>
-      <hbox style="width:40px; height:20px; background:white;"/>
-      <hbox style="width:40px; height:20px; background:black;"/>
-      <hbox style="width:40px; height:20px; background:white;"/>
-      <hbox style="width:40px; height:20px; background:black;"/>
+      <hbox style="min-width:40px; min-height:20px; background:black;" hidden="true"/>
+      <hbox style="min-width:40px; min-height:20px; background:white;"/>
+      <hbox style="min-width:40px; min-height:20px; background:black;"/>
+      <hbox style="min-width:40px; min-height:20px; background:white;"/>
+      <hbox style="min-width:40px; min-height:20px; background:black;"/>
+      <hbox style="min-width:40px; min-height:20px; background:white;"/>
+      <hbox style="min-width:40px; min-height:20px; background:black;"/>
+      <hbox style="min-width:40px; min-height:20px; background:white;"/>
+      <hbox style="min-width:40px; min-height:20px; background:black;"/>
     </arrowscrollbox>
   </box>
 
   <arrowscrollbox id="vscrollbox" clicktoscroll="true" orient="vertical"
    smoothscroll="false" style="max-height:80px;" flex="1">
-      <vbox style="width:100px; height:40px; background:black;" hidden="true"/>
-      <vbox style="width:100px; height:40px; background:white;"/>
-      <vbox style="width:100px; height:40px; background:black;"/>
-      <vbox style="width:100px; height:40px; background:white;"/>
-      <vbox style="width:100px; height:40px; background:black;"/>
-      <vbox style="width:100px; height:40px; background:white;"/>
-      <vbox style="width:100px; height:40px; background:black;"/>
-      <vbox style="width:100px; height:40px; background:white;"/>
-      <vbox style="width:100px; height:40px; background:black;"/>
-      <vbox style="width:100px; height:40px; background:white;"/>
-      <vbox style="width:100px; height:40px; background:black;"/>
+      <vbox style="min-width:100px; min-height:40px; background:black;" hidden="true"/>
+      <vbox style="min-width:100px; min-height:40px; background:white;"/>
+      <vbox style="min-width:100px; min-height:40px; background:black;"/>
+      <vbox style="min-width:100px; min-height:40px; background:white;"/>
+      <vbox style="min-width:100px; min-height:40px; background:black;"/>
+      <vbox style="min-width:100px; min-height:40px; background:white;"/>
+      <vbox style="min-width:100px; min-height:40px; background:black;"/>
+      <vbox style="min-width:100px; min-height:40px; background:white;"/>
+      <vbox style="min-width:100px; min-height:40px; background:black;"/>
+      <vbox style="min-width:100px; min-height:40px; background:white;"/>
+      <vbox style="min-width:100px; min-height:40px; background:black;"/>
   </arrowscrollbox>
 
   <!-- test code goes here -->

diff --git a/toolkit/content/xul.css b/toolkit/content/xul.css
@@ -19,10 +19,6 @@
   -moz-user-focus: ignore;
   display: flex;
   box-sizing: border-box;
-  /* By default XUL content isn't allowed to shrink. This is legacy (result of
-   * -moz-box-flex defaulting to zero) and could be removed with some amount of
-   * effort. */
-  flex-shrink: 0;
 }
 
 /* hide the content and destroy the frame */