diff options
Diffstat (limited to 'devtools/client/inspector/flexbox/test/browser_flexbox_sizing_wanted_to_grow_but_was_clamped.js')
-rw-r--r-- | devtools/client/inspector/flexbox/test/browser_flexbox_sizing_wanted_to_grow_but_was_clamped.js | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_wanted_to_grow_but_was_clamped.js b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_wanted_to_grow_but_was_clamped.js new file mode 100644 index 0000000000..72e2861ef3 --- /dev/null +++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_wanted_to_grow_but_was_clamped.js @@ -0,0 +1,44 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const { + getStr, +} = require("resource://devtools/client/inspector/layout/utils/l10n.js"); + +// Test the specific max-clamping scenario where an item wants to grow a certain amount +// but its max-size prevents it from growing that much. + +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 onRendered = waitForDOM(doc, ".flex-outline, .flex-item-sizing", 2); + await selectNode("#want-to-grow-more-than-max div", inspector); + const [outlineContainer, sizingContainer] = await onRendered; + + info( + "Check that the outline contains the max point and that it's equal to final" + ); + const maxPoint = outlineContainer.querySelector(".flex-outline-point.max"); + ok(maxPoint, "The max point is displayed"); + ok( + outlineContainer.style.gridTemplateColumns.includes("[final-end max]"), + "The final and max points are at the same position" + ); + + info("Check that the maximum sizing section displays the right info"); + const reasons = [...sizingContainer.querySelectorAll(".reasons li")]; + const expectedReason = getStr("flexbox.itemSizing.clampedToMax"); + ok( + reasons.some(r => r.textContent === expectedReason), + "The clampedToMax reason was found" + ); +}); |