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
--- 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");
+});