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

Fix bug where absolute nodes were not insetted correctly in certain cases (#1593)

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

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

There was a bug where we did not position absolute nodes correctly if the static node had a different main/cross axis from the containing node. This fixes that. The change is somewhat complicated unfortunately but I tried to add sufficient comments to explain what is happening

Reviewed By: NickGerleman

Differential Revision: D54703955

fbshipit-source-id: 096c643f61d4f9bb3ee6278d675ebd69b57350d7
This commit is contained in:
Joe Vilches
2024-03-12 11:08:43 -07:00
committed by Facebook GitHub Bot
parent d591885e29
commit 543f36d5b4
6 changed files with 1499 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
gentest/fixtures/YGStaticPositionTest.html
View File

@@ -19,6 +19,60 @@
</div>
</div>
<div id="static_position_absolute_child_insets_relative_to_positioned_ancestor_row_reverse">
<div style="width: 200px; height: 200px; position: relative; flex-direction: row-reverse">
<div style="height: 100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; position: absolute; top: 50px; left: 50px;">
</div>
</div>
</div>
</div>
<div id="column_reverse_static_position_absolute_child_insets_relative_to_positioned_ancestor_row_reverse">
<div style="width: 200px; height: 200px; position: relative; flex-direction: row-reverse">
<div style="height: 100px; width: 100px; position: static; flex-direction: column-reverse">
<div style="height: 50px; width: 50px; position: absolute; top: 50px; left: 50px;">
</div>
</div>
</div>
</div>
<div id="static_position_absolute_child_insets_relative_to_positioned_ancestor_row">
<div style="width: 200px; height: 200px; position: relative; flex-direction: row">
<div style="height: 100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; position: absolute; top: 50px; right: 50px;">
</div>
</div>
</div>
</div>
<div id="column_reverse_static_position_absolute_child_insets_relative_to_positioned_ancestor_row">
<div style="width: 200px; height: 200px; position: relative; flex-direction: row">
<div style="height: 100px; width: 100px; position: static; flex-direction: column-reverse">
<div style="height: 50px; width: 50px; position: absolute; top: 50px; right: 50px;">
</div>
</div>
</div>
</div>
<div id="static_position_absolute_child_insets_relative_to_positioned_ancestor_column_reverse">
<div style="width: 200px; height: 200px; position: relative; flex-direction: column-reverse">
<div style="height: 100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; position: absolute; top: 50px; right: 50px;">
</div>
</div>
</div>
</div>
<div id="column_reverse_static_position_absolute_child_insets_relative_to_positioned_ancestor_column_reverse">
<div style="width: 200px; height: 200px; position: relative; flex-direction: column-reverse">
<div style="height: 100px; width: 100px; position: static; flex-direction: column-reverse">
<div style="height: 50px; width: 50px; position: absolute; top: 50px; right: 50px;">
</div>
</div>
</div>
</div>
<div id="static_position_absolute_child_insets_relative_to_positioned_ancestor_deep">
<div style="width: 200px; height: 200px; position: relative">
<div style="height: 100px; width: 100px; margin-left: 100px; position: static">
@@ -634,8 +688,7 @@
</div>
</div>
<div id="static_position_static_root"
style="height:200px; width: 100px; position: static; padding: 1px 11px 4px 6px;">
<div id="static_position_static_root" style="height:200px; width: 100px; position: static; padding: 1px 11px 4px 6px;">
<div
style="height: 50%; width: 50%; position: absolute; border-width: 3px 2px 1px 4px; padding: 7px 5px 4px 3px; margin: 11px 15px 1px 12px">
</div>