corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1953102: Go back to using 'flex-start' as fallback alignment for 'justify-content: space-between' (rather than 'safe flex-start'). r=emilio

Browse Source 
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
This commit is contained in:
Daniel Holbert
2025-03-14 18:54:21 +00:00
parent 8d6c32f691
commit 94e23b3d89
2 changed files with 41 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
layout/generic/nsFlexContainerFrame.cpp
View File

@@ -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) {

33
testing/web-platform/tests/css/css-flexbox/justify-content_space-between-003.tentative.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1953102">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11937">
<!-- Note: this test is named ".tentative" pending a resolution of the issue
linked above, #11937. -->
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<style>
.container {
display: flex;
overflow: hidden;
width: 100px;
height: 50px;
justify-content: space-between;
}
</style>
<p>Test passes if there is a filled green square.</p>
<div class="container" style="flex-direction: column-reverse">
<!-- 'justify-content' has to fall back to 'flex-start' alignment in order
for us to show the green bottom-most portion of this flex item: -->
<div style="height: 300px">
<div style="width: 200px; height: 200px; background: red"></div>
<div style="width: 100px; height: 50px; background: green"></div>
</div>
</div>
<div class="container" style="flex-direction:row-reverse">
<!-- 'justify-content' has to fall back to 'flex-start' alignment in order
for us to show the green right-most portion of this flex item: -->
<div style="width: 300px; display: flex">
<div style="width: 200px; height: 50px; background: red"></div>
<div style="width: 100px; height: 50px; background: green"></div>
</div>
</div>