DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
v3.1.0
yoga/gentest/fixtures/YGMarginTest.html
Nick Gerleman 932361cdbf Fixup margin: auto and justification behavior for overflowed containers (#1646) 
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
2024-04-17 21:50:55 -07:00

158 lines
7.0 KiB
HTML
Raw Permalink Blame History

<div id="margin_start" style="width: 100px; height: 100px; flex-direction: row;">
<div style="width: 10px; margin-start: 10px;"></div>
</div>
<div id="margin_top" style="width: 100px; height: 100px;">
<div style="height: 10px; margin-top: 10px;"></div>
</div>
<div id="margin_end" style="width: 100px; height: 100px; flex-direction: row; justify-content: flex-end;">
<div style="width: 10px; margin-end: 10px;"></div>
</div>
<div id="margin_bottom" style="width: 100px; height: 100px; justify-content: flex-end;">
<div style="height: 10px; margin-bottom: 10px;"></div>
</div>
<div id="margin_and_flex_row" style="width: 100px; height: 100px; flex-direction: row;">
<div style="margin-start: 10px; margin-end: 10px; flex-grow: 1;"></div>
</div>
<div id="margin_and_flex_column" style="width: 100px; height: 100px;">
<div style="margin-top: 10px; margin-bottom: 10px; flex-grow: 1;"></div>
</div>
<div id="margin_and_stretch_row" style="width: 100px; height: 100px; flex-direction: row;">
<div style="margin-top: 10px; margin-bottom: 10px; flex-grow: 1;"></div>
</div>
<div id="margin_and_stretch_column" style="width: 100px; height: 100px;">
<div style="margin-start: 10px; margin-end: 10px; flex-grow: 1;"></div>
</div>
<div id="margin_with_sibling_row" style="width: 100px; height: 100px; flex-direction: row;">
<div style="margin-end: 10px; flex-grow: 1;"></div>
<div style="flex-grow: 1;"></div>
</div>
<div id="margin_with_sibling_column" style="width: 100px; height: 100px;">
<div style="margin-bottom: 10px; flex-grow: 1;"></div>
<div style="flex-grow: 1;"></div>
</div>
<div id="margin_auto_bottom" style="width: 200px; height: 200px; align-items: center;">
<div style="width: 50px; height: 50px; margin-bottom:auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="margin_auto_top" style="width: 200px; height: 200px; align-items: center;">
<div style="width: 50px; height: 50px; margin-top:auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="margin_auto_bottom_and_top" style="width: 200px; height: 200px; align-items: center;">
<div style="width: 50px; height: 50px; margin-top:auto; margin-bottom:auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="margin_auto_bottom_and_top_justify_center" style="width: 200px; height: 200px; justify-content: center;">
<div style="width: 50px; height: 50px; margin-top:auto; margin-bottom:auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="margin_auto_multiple_children_column" style="width: 200px; height: 200px; flex-direction: column; align-items: center;">
<div style="width: 50px; height: 50px; margin-top:auto;"></div>
<div style="width: 50px; height: 50px; margin-top:auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="margin_auto_multiple_children_row" style="width: 200px; height: 200px; flex-direction:row; align-items: center;">
<div style="width: 50px; height: 50px; margin-right:auto;"></div>
<div style="width: 50px; height: 50px; margin-right:auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="margin_auto_left_and_right_column" style="width: 200px; height: 200px; align-items: center; flex-direction: row;">
<div style="width: 50px; height: 50px; margin-left:auto; margin-right:auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="margin_auto_left_and_right" style="width: 200px; height: 200px; ">
<div style="width: 50px; height: 50px; margin-left:auto; margin-right:auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="margin_auto_start_and_end_column" style="width: 200px; height: 200px; align-items: center; flex-direction: row;">
<div style="width: 50px; height: 50px; margin-start: auto; margin-end: auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="margin_auto_start_and_end" style="width: 200px; height: 200px; ">
<div style="width: 50px; height: 50px; margin-start: auto; margin-end: auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="margin_auto_left_and_right_column_and_center" style="width: 200px; height: 200px; align-items: center;">
<div style="width: 50px; height: 50px; margin-left:auto; margin-right:auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="margin_auto_left" style="width: 200px; height: 200px; align-items: center;">
<div style="width: 50px; height: 50px; margin-left:auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="margin_auto_right" style="width: 200px; height: 200px; align-items: center;">
<div style="width: 50px; height: 50px; margin-right:auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="margin_auto_left_and_right_stretch" style="width: 200px; height: 200px; flex-direction:row; align-items: stretch;">
<div style="width: 50px; height: 50px; margin-left:auto; margin-right:auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="margin_auto_top_and_bottom_stretch" style="width: 200px; height: 200px; flex-direction: column; align-items: stretch;">
<div style="width: 50px; height: 50px; margin-top:auto; margin-bottom:auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="margin_should_not_be_part_of_max_height" style="width: 250px; height: 250px;">
<div style="width: 100px; height: 100px; max-height: 100px; margin-top: 20px;"></div>
</div>
<div id="margin_should_not_be_part_of_max_width" style="width: 250px; height: 250px;">
<div style="width: 100px; height: 100px; max-width: 100px; margin-left: 20px;"></div>
</div>
<div id="margin_auto_left_right_child_bigger_than_parent" style="height: 52px; width: 52px; justify-content: center;">
<div style="width: 72px; height: 72px; margin-left: auto; margin-right:auto;"></div>
</div>
<div id="margin_auto_left_child_bigger_than_parent" style="height: 52px; width: 52px; justify-content: center;">
<div style="width: 72px; height: 72px; margin-left: auto;"></div>
</div>
<div id="margin_fix_left_auto_right_child_bigger_than_parent" style="height: 52px; width: 52px; justify-content: center;">
<div style="width: 72px; height: 72px; margin-left: 10px; margin-right: auto;"></div>
</div>
<div id="margin_auto_left_fix_right_child_bigger_than_parent" style="height: 52px; width: 52px; justify-content: center;">
<div style="width: 72px; height: 72px; margin-left: auto; margin-right: 10px;"></div>
</div>
<div id="margin_auto_top_stretching_child" style="width: 200px; height: 200px; align-items: center;">
<div style="flex: 1; margin-top:auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="margin_auto_left_stretching_child" style="width: 200px; height: 200px; align-items: center;">
<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>
Reference in New Issue View Git Blame Copy Permalink