Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support "align-content: space-evenly" #1422

Closed
wants to merge 2 commits into from
Closed

Support "align-content: space-evenly" #1422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d8666be
Regenerate tests
nicoburns Oct 13, 2023
19240eb
Support "align-content: space-evenly"
nicoburns Oct 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions enums.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"Baseline",
"SpaceBetween",
"SpaceAround",
"SpaceEvenly",
],
"PositionType": ["Static", "Relative", "Absolute"],
"Display": ["Flex", "None"],
Expand Down
215 changes: 205 additions & 10 deletions gentest/fixtures/YGAlignContentTest.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,38 @@
<div id="align_content_flex_start" style="width: 130px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: flex-start;">
<!-- ALIGN CONTENT: FLEX-START -->

<div id="align_content_flex_start_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: flex-start;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_flex_start_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-start;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_flex_start_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-start;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_flex_start_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; height: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>

<div id="align_content_flex_start_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; height: 10px; gap: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>

<div id="align_content_flex_start_without_height_on_children" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-start;">
Expand All @@ -22,38 +51,204 @@
<div style="width: 50px;"></div>
</div>

<div id="align_content_flex_end" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-end;">
<!-- ALIGN CONTENT: FLEX-END -->

<div id="align_content_flex_end_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: flex-end;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_flex_end_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-end;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_stretch" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: stretch;">
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_flex_end_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-end;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_flex_end_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-end; justify-content: center; height: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>

<div id="align_content_flex_end_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-end; justify-content: center; height: 10px; gap: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>


<!-- ALIGN CONTENT: CENTER -->

<div id="align_content_center_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: center;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_center_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: center;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_center_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: center;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_center_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; height: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>

<div id="align_content_center_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; height: 10px; gap: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>

<!-- ALIGN CONTENT: SPACE-BETWEEN -->

<div id="align_content_space_between_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: space-between;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_space_between_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-between;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_space_between_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-between;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_space_between_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-between; justify-content: center; height: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>

<div id="align_content_space_between_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-between; justify-content: center; height: 10px; gap: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>

<div id="align_content_spacebetween" style="width: 130px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: space-between;">
<!-- ALIGN CONTENT: SPACE-AROUND -->

<div id="align_content_space_around_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: space-around;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_space_around_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-around;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_space_around_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-around;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_space_around_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; height: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>

<div id="align_content_space_around_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; height: 10px; gap: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>


<!-- ALIGN CONTENT: SPACE-EVENLY -->

<div id="align_content_space_evenly_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: space-evenly;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_spacearound" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-around;">
<div id="align_content_space_evenly_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-evenly;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_space_evenly_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-evenly;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_space_evenly_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we also add a test for when we have negative free space left, since that has special logic?

Copy link
Contributor Author

@nicoburns nicoburns Oct 14, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, yes. I have imported Taffy's tests for these cases (we also have one that tests with negative space combined with gap), and for the same cases for the other align-content modes.

<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-evenly; justify-content: center; height: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>

<div id="align_content_space_evenly_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-evenly; justify-content: center; height: 10px; gap: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>


<!-- ALIGN CONTENT: STRETCH -->

<div id="align_content_stretch" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: stretch;">
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
</div>

<div id="align_content_stretch_row" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
Expand Down
1 change: 1 addition & 0 deletions gentest/gentest-cpp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
YGAlignStretch: {value: 'YGAlignStretch'},
YGAlignSpaceBetween: {value: 'YGAlignSpaceBetween'},
YGAlignSpaceAround: {value: 'YGAlignSpaceAround'},
YGAlignSpaceEvenly: {value: 'YGAlignSpaceEvenly'},
YGAlignBaseline: {value: 'YGAlignBaseline'},

YGDirectionInherit: {value: 'YGDirectionInherit'},
Expand Down
1 change: 1 addition & 0 deletions gentest/gentest-java.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
YGAlignStretch: {value: 'YogaAlign.STRETCH'},
YGAlignSpaceBetween: {value: 'YogaAlign.SPACE_BETWEEN'},
YGAlignSpaceAround: {value: 'YogaAlign.SPACE_AROUND'},
YGAlignSpaceEvenly: {value: 'YogaAlign.SPACE_EVENLY'},
YGAlignBaseline: {value: 'YogaAlign.BASELINE'},

YGDirectionInherit: {value: 'YogaDirection.INHERIT'},
Expand Down
1 change: 1 addition & 0 deletions gentest/gentest-javascript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
YGAlignStretch: {value: 'Align.Stretch'},
YGAlignSpaceBetween: {value: 'Align.SpaceBetween'},
YGAlignSpaceAround: {value: 'Align.SpaceAround'},
YGAlignSpaceEvenly: {value: 'Align.SpaceEvenly'},
YGAlignBaseline: {value: 'Align.Baseline'},

YGDirectionInherit: {value: 'Direction.Inherit'},
Expand Down
2 changes: 2 additions & 0 deletions gentest/gentest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -608,6 +608,8 @@ function alignValue(e, value) {
return e.YGAlignSpaceBetween;
case 'space-around':
return e.YGAlignSpaceAround;
case 'space-evenly':
return e.YGAlignSpaceEvenly;
case 'baseline':
return e.YGAlignBaseline;
}
Expand Down
4 changes: 3 additions & 1 deletion java/com/facebook/yoga/YogaAlign.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ public enum YogaAlign {
STRETCH(4),
BASELINE(5),
SPACE_BETWEEN(6),
SPACE_AROUND(7);
SPACE_AROUND(7),
SPACE_EVENLY(8);

private final int mIntValue;

Expand All @@ -39,6 +40,7 @@ public static YogaAlign fromInt(int value) {
case 5: return BASELINE;
case 6: return SPACE_BETWEEN;
case 7: return SPACE_AROUND;
case 8: return SPACE_EVENLY;
default: throw new IllegalArgumentException("Unknown enum value: " + value);
}
}
Expand Down
Loading
Loading