From 94e23b3d8919ace7bce219e4bfdb1a588ebd45bf Mon Sep 17 00:00:00 2001 From: Daniel Holbert Date: Fri, 14 Mar 2025 18:54:21 +0000 Subject: [PATCH] Bug 1953102: Go back to using 'flex-start' as fallback alignment for 'justify-content: space-between' (rather than 'safe flex-start'). r=emilio The 'safe' flag actually causes overflow to be lost, in cases where the flex container is set up to scroll in the reverse direction. The spec says to use that flag here, but I don't think other browsers do (and we didn't either until recently); and I'm proposing we change the spec in https://github.com/w3c/csswg-drafts/issues/11937 Differential Revision: https://phabricator.services.mozilla.com/D241670 --- layout/generic/nsFlexContainerFrame.cpp | 12 ++++--- ...y-content_space-between-003.tentative.html | 33 +++++++++++++++++++ 2 files changed, 41 insertions(+), 4 deletions(-) create mode 100644 testing/web-platform/tests/css/css-flexbox/justify-content_space-between-003.tentative.html diff --git a/layout/generic/nsFlexContainerFrame.cpp b/layout/generic/nsFlexContainerFrame.cpp index 07a48dd36165..0904be796719 100644 --- a/layout/generic/nsFlexContainerFrame.cpp +++ b/layout/generic/nsFlexContainerFrame.cpp @@ -3492,13 +3492,17 @@ MainAxisPositionTracker::MainAxisPositionTracker( mPackingSpaceRemaining -= aLine->SumOfGaps(); // If packing space is negative or we only have one item, 'space-between' - // falls back to 'safe flex-start', and 'space-around' & 'space-evenly' fall - // back to 'safe center'. In those cases, it's simplest to just pretend we - // have a different 'justify-content' value and share code. + // falls back to 'safe flex-start'[1], and 'space-around' & 'space-evenly' + // fall back to 'safe center'. In those cases, it's simplest to just pretend + // we have a different 'justify-content' value and share code. // https://drafts.csswg.org/css-align-3/#distribution-values if (mPackingSpaceRemaining < 0 || aLine->NumItems() == 1) { if (mJustifyContent.primary == StyleAlignFlags::SPACE_BETWEEN) { - justifyContentFlags = StyleAlignFlags::SAFE; + // [1] XXXdholbert Per spec, we should do... + // justifyContentFlags = StyleAlignFlags::SAFE; + // ...here, but for now let's not do that since it causes overflow to be + // inadvertently clipped in situations with a reversed main axis! + // See https://github.com/w3c/csswg-drafts/issues/11937 mJustifyContent.primary = StyleAlignFlags::FLEX_START; } else if (mJustifyContent.primary == StyleAlignFlags::SPACE_AROUND || mJustifyContent.primary == StyleAlignFlags::SPACE_EVENLY) { diff --git a/testing/web-platform/tests/css/css-flexbox/justify-content_space-between-003.tentative.html b/testing/web-platform/tests/css/css-flexbox/justify-content_space-between-003.tentative.html new file mode 100644 index 000000000000..dfe14a868355 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/justify-content_space-between-003.tentative.html @@ -0,0 +1,33 @@ + + + + + + + +

Test passes if there is a filled green square.

+
+ +
+
+
+
+
+
+ +
+
+
+
+