DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Fixup margin: auto and justification behavior for overflowed containers (#1646)

Browse Source 
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1646

X-link: https://github.com/facebook/react-native/pull/44069

Fixes https://github.com/facebook/yoga/issues/978

1. Don't allow auto margin spaces to become a negative length
2. Replicate fallback alignment behavior specified by box-alignment spec that we are using for align-content.

Reviewed By: joevilches

Differential Revision: D56091577

fbshipit-source-id: 3c02f81f969bb947cdc5c80b15faaa0b0d39c0c2
This commit is contained in:
Nick Gerleman
2024-04-17 21:50:55 -07:00
committed by Facebook GitHub Bot
parent c0239e338f
commit 932361cdbf
12 changed files with 2233 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
gentest/fixtures/YGJustifyContentTest.html
View File

@@ -120,3 +120,57 @@
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
</div>
<div id="justify_content_overflow_row_flex_start" style="width: 102px; height: 102px; flex-direction: row; justify-content: flex-start;">
<div style="width: 40px;"></div>
<div style="width: 40px;"></div>
<div style="width: 40px;"></div>
</div>
<div id="justify_content_overflow_row_flex_end" style="width: 102px; height: 102px; flex-direction: row; justify-content: flex-end;">
<div style="width: 40px;"></div>
<div style="width: 40px;"></div>
<div style="width: 40px;"></div>
</div>
<div id="justify_content_overflow_row_center" style="width: 102px; height: 102px; flex-direction: row; justify-content: center;">
<div style="width: 40px;"></div>
<div style="width: 40px;"></div>
<div style="width: 40px;"></div>
</div>
<div id="justify_content_overflow_row_space_between" style="width: 102px; height: 102px; flex-direction: row; justify-content: space-between;">
<div style="width: 40px;"></div>
<div style="width: 40px;"></div>
<div style="width: 40px;"></div>
</div>
<div id="justify_content_overflow_row_space_around" style="width: 102px; height: 102px; flex-direction: row; justify-content: space-around;">
<div style="width: 40px;"></div>
<div style="width: 40px;"></div>
<div style="width: 40px;"></div>
</div>
<div id="justify_content_overflow_row_space_evenly" style="width: 102px; height: 102px; flex-direction: row; justify-content: space-evenly;">
<div style="width: 40px;"></div>
<div style="width: 40px;"></div>
<div style="width: 40px;"></div>
</div>
<div id="justify_content_overflow_row_reverse_space_around" style="width: 102px; height: 102px; flex-direction: row-reverse; justify-content: space-around;">
<div style="width: 40px;"></div>
<div style="width: 40px;"></div>
<div style="width: 40px;"></div>
</div>
<div id="justify_content_overflow_row_reverse_space_evenly" style="width: 102px; height: 102px; flex-direction: row-reverse; justify-content: space-evenly;">
<div style="width: 40px;"></div>
<div style="width: 40px;"></div>
<div style="width: 40px;"></div>
</div>
<div id="justify_content_overflow_row_space_evenly_auto_margin" style="width: 102px; height: 102px; flex-direction: row; justify-content: space-evenly;">
<div style="width: 40px; margin-right: auto;"></div>
<div style="width: 40px;"></div>
<div style="width: 40px;"></div>
</div>

5
gentest/fixtures/YGMarginTest.html
View File

@@ -150,3 +150,8 @@
<div style="flex: 1; margin-left:auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="margin_auto_overflowing_container" style="width: 200px; height: 200px; align-items: center;">
<div style="width: 50px; height: 150px; margin-bottom: auto;"></div>
<div style="width: 50px; height: 150px;"></div>
</div>