Fix issues with aligning absolute nodes (#1490)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1490

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

In the previous diffs I fixed problems with justifying absolute nodes. The same issues plague aligning so I fixed them in the same way. Added tests that were failing before but now passing

Reviewed By: NickGerleman

Differential Revision: D51404489

fbshipit-source-id: 604495d651eb67cfdcca40df9d8d3a125c5741a8
This commit is contained in:
Joe Vilches
2023-12-07 21:25:45 -08:00
committed by Facebook GitHub Bot
parent b573f91a38
commit bc5dc2d6bf
5 changed files with 2288 additions and 46 deletions

View File

@@ -555,3 +555,81 @@
</div>
</div>
</div>
<div id="static_position_align_flex_start_amalgamation">
<div style="position: relative; margin: 5px 9px 1px 4px; border-width: 6px 7px 8px 5px; padding: 9px 11px 13px 2px">
<div
style="position: static; margin: 6px 3px 9px 8px; border-width: 10px 2px 1px 8px; padding: 7px 9px 4px 1px; align-items: flex-start;">
<div
style="position: absolute; width: 21%; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
<div
style="width: 100px; height: 50px; position: relative; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
</div>
</div>
<div
style="position: relative; width: 10%; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
<div
style="width: 100px; height: 50px; position: relative; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
</div>
</div>
<div
style="position: relative; width: 10%; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
<div
style="width: 100px; height: 50px; position: relative; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
</div>
</div>
</div>
</div>
</div>
<div id="static_position_align_center_amalgamation">
<div style="position: relative; margin: 5px 9px 1px 4px; border-width: 6px 7px 8px 5px; padding: 9px 11px 13px 2px">
<div
style="position: static; margin: 6px 3px 9px 8px; border-width: 10px 2px 1px 8px; padding: 7px 9px 4px 1px; align-items: center;">
<div
style="position: absolute; width: 21%; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
<div
style="width: 100px; height: 50px; position: relative; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
</div>
</div>
<div
style="position: relative; width: 10%; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
<div
style="width: 100px; height: 50px; position: relative; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
</div>
</div>
<div
style="position: relative; width: 10%; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
<div
style="width: 100px; height: 50px; position: relative; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
</div>
</div>
</div>
</div>
</div>
<div id="static_position_align_flex_end_amalgamation">
<div style="position: relative; margin: 5px 9px 1px 4px; border-width: 6px 7px 8px 5px; padding: 9px 11px 13px 2px">
<div
style="position: static; margin: 6px 3px 9px 8px; border-width: 10px 2px 1px 8px; padding: 7px 9px 4px 1px; align-items: flex-end;">
<div
style="position: absolute; width: 21%; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
<div
style="width: 100px; height: 50px; position: relative; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
</div>
</div>
<div
style="position: relative; width: 10%; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
<div
style="width: 100px; height: 50px; position: relative; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
</div>
</div>
<div
style="position: relative; width: 10%; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
<div
style="width: 100px; height: 50px; position: relative; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
</div>
</div>
</div>
</div>
</div>