Bug 1501263 - Dont say that siblings have used all the space when an item was clamped; r=mtigley
authorPatrick Brosset <pbrosset@mozilla.com>
Wed, 24 Oct 2018 08:21:06 +0000
changeset 491080 f2a0505d9f54131436b6172a079a55a6aca22460
parent 491079 c4123efb05361326c6ad4da81e8d826367efea36
child 491081 765bb35eb5b9dcf5199b45401863a1948c9b714c
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersmtigley
bugs1501263
milestone65.0a1
Bug 1501263 - Dont say that siblings have used all the space when an item was clamped; r=mtigley Differential Revision: https://phabricator.services.mozilla.com/D9509
devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
devtools/client/inspector/flexbox/test/browser.ini
devtools/client/inspector/flexbox/test/browser_flexbox_sizing_unrelated_to_siblings_when_clamped.js
--- a/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
@@ -208,20 +208,22 @@ class FlexItemSizingProperties extends P
       }
 
       if (wasClamped) {
         // It might have wanted to shrink more (to accomodate all items) but couldn't
         // because it was later min-clamped.
         reasons.push(getStr("flexbox.itemSizing.shrinkAttemptWhenClamped"));
       }
     } else if (lineGrowthState === "growing" && nonZeroFlexGrowDefined) {
-      // The item did not grow or shrink. There was room on the line and flex-grow was
-      // set, other items have likely used up all of the space.
       property = this.renderCssProperty("flex-grow", flexGrow);
-      reasons.push(getStr("flexbox.itemSizing.growthAttemptButSiblings"));
+      if (!wasClamped) {
+        // The item did not grow or shrink. There was room on the line and flex-grow was
+        // set, other items have likely used up all of the space.
+        reasons.push(getStr("flexbox.itemSizing.growthAttemptButSiblings"));
+      }
     } else if (lineGrowthState === "shrinking") {
       // The item did not grow or shrink and there wasn't enough room on the line.
       if (!flexShrink0) {
         // flex-shrink was set (either defined in CSS, or via its default value of 1).
         // but the item didn't shrink.
         if (flexShrink) {
           property = this.renderCssProperty("flex-shrink", flexShrink);
         } else {
--- a/devtools/client/inspector/flexbox/test/browser.ini
+++ b/devtools/client/inspector/flexbox/test/browser.ini
@@ -21,9 +21,10 @@ support-files =
 [browser_flexbox_item_outline_hidden_when_useless.js]
 [browser_flexbox_item_outline_rotates_for_column.js]
 [browser_flexbox_pseudo_elements_are_listed.js]
 [browser_flexbox_sizing_grow_and_not_grow.js]
 [browser_flexbox_sizing_info_exists.js]
 [browser_flexbox_sizing_info_for_pseudos.js]
 [browser_flexbox_sizing_info_for_text_nodes.js]
 [browser_flexbox_sizing_info_has_correct_sections.js]
+[browser_flexbox_sizing_unrelated_to_siblings_when_clamped.js]
 [browser_flexbox_text_nodes_are_listed.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_unrelated_to_siblings_when_clamped.js
@@ -0,0 +1,33 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const { getStr } = require("devtools/client/inspector/layout/utils/l10n");
+
+// Non-regression for bug 1501263.
+// In this bug, an item that was set to grow, with a max-width, and growing siblings
+// was marked as "couldn't grow because siblings have used the extra space". This was
+// wrong because the item was only being clamped by its max-width.
+// This test prevents this from happening again.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function() {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  info("Select the test item in the document and wait for the sizing info to render");
+  const onFlexibilityReasonsRendered = waitForDOM(doc,
+    "ul.flex-item-sizing .section.flexibility .reasons");
+  await selectNode("#grow-not-grow div:first-child", inspector);
+  const [reasonsList] = await onFlexibilityReasonsRendered;
+
+  info("Get the list of reasons in the flexibility section");
+  const [...reasons] = reasonsList.querySelectorAll("li");
+  const str = getStr("flexbox.itemSizing.growthAttemptButSiblings");
+  ok(reasons.every(r => r.textContent !== str),
+     "The 'could not grow because of siblings' reason was not found");
+});