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

Update align-content handling of overflow

Browse Source 
Summary:
X-link: https://github.com/facebook/react-native/pull/43752

Gentest tests started failing because Chrome changed behavior of overflowed align-content container. Spec says should fallback to "safe center", which is really just "start", instead of previous "center" behavior. This changes behavior accordingly.

There is one bit where I think we are doing the wrong thing wrt alignment of flex start vs start (which we don't support yet), but couldn't repro a failing chrome test.

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D55617689

fbshipit-source-id: 08f23d198c75f2c2f51ccaa8795289e6e4a92cb8
This commit is contained in:
Nick Gerleman
2024-04-02 04:47:09 -07:00
committed by Facebook GitHub Bot
parent f12d436314
commit 6f10656868
5 changed files with 710 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
gentest/fixtures/YGAlignContentTest.html
View File

@@ -155,6 +155,14 @@
</div>
</div>
<div id="align_content_space_between_wrapped_negative_space_row_reverse" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row-reverse; 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>
@@ -192,6 +200,14 @@
</div>
</div>
<div id="align_content_space_around_wrapped_negative_space_row_reverse" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row-reverse; 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>