DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
932361cdbf5864a2e6929b68154b4ada2ac586d9
yoga/gentest/fixtures/YGJustifyContentTest.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

177 lines
7.7 KiB
HTML
Raw Blame History

<div id="justify_content_row_flex_start" style="width: 102px; height: 102px; flex-direction: row; justify-content: flex-start;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="justify_content_row_flex_end" style="width: 102px; height: 102px; flex-direction: row; justify-content: flex-end;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="justify_content_row_center" style="width: 102px; height: 102px; flex-direction: row; justify-content: center;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="justify_content_row_space_between" style="width: 102px; height: 102px; flex-direction: row; justify-content: space-between;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="justify_content_row_space_around" style="width: 102px; height: 102px; flex-direction: row; justify-content: space-around;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="justify_content_column_flex_start" style="width: 102px; height: 102px; justify-content: flex-start;">
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
</div>
<div id="justify_content_column_flex_end" style="width: 102px; height: 102px; justify-content: flex-end;">
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
</div>
<div id="justify_content_column_center" style="width: 102px; height: 102px; justify-content: center;">
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
</div>
<div id="justify_content_column_space_between" style="width: 102px; height: 102px; justify-content: space-between;">
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
</div>
<div id="justify_content_column_space_around" style="width: 102px; height: 102px; justify-content: space-around;">
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
</div>
<div id="justify_content_row_min_width_and_margin" style="min-width: 50px; margin-left: 100px; justify-content: center; flex-direction: row;">
<div style="height: 20px; width: 20px;"></div>
</div>
<div id="justify_content_row_max_width_and_margin" style="width: 100px; max-width: 80px; margin-left: 100px; justify-content: center; flex-direction: row;">
<div style="height: 20px; width: 20px;"></div>
</div>
<div id="justify_content_column_min_height_and_margin" style="min-height: 50px; margin-top: 100px; justify-content: center; flex-direction: column;">
<div style="height: 20px; width: 20px;"></div>
</div>
<div id="justify_content_column_max_height_and_margin" style="height: 100px; max-height: 80px; margin-top: 100px; justify-content: center; flex-direction: column;">
<div style="height: 20px; width: 20px;"></div>
</div>
<div id="justify_content_column_space_evenly" style="width: 102px; height: 102px; justify-content: space-evenly;">
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
</div>
<div id="justify_content_row_space_evenly" style="width: 102px; height: 102px; justify-content: space-evenly; flex-direction: row; ">
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
</div>
<div id="justify_content_min_width_with_padding_child_width_greater_than_parent" style="width: 1000px; height: 1584px; align-content: stretch;">
<div style="flex-direction: row; align-content: stretch;">
<div style="flex-direction: row; justify-content: center; align-content: stretch; min-width: 400px; padding-left: 100px; padding-right: 100px;">
<div style="height: 100px; width: 300px; align-content: stretch; flex-direction: row;"></div>
</div>
</div>
</div>
<div id="justify_content_min_width_with_padding_child_width_lower_than_parent" style="width: 1080px; height: 1584px; align-content: stretch;">
<div style="flex-direction: row; align-content: stretch;">
<div style="flex-direction: row; justify-content: center; align-content: stretch; min-width: 400px; padding-left: 100px; padding-right: 100px;">
<div style="height: 100px; width: 199px; align-content: stretch; flex-direction: row;"></div>
</div>
</div>
</div>
<div id="justify_content_space_between_indefinite_container_dim_with_free_space" style="width: 300px; height: 300x; align-items: center;">
<div style="flex-direction: row; min-width: 200px; justify-content: space-between;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>
</div>
<div id="justify_content_flex_start_row_reverse" style="width: 100px; height: 100px; flex-direction: row-reverse; justify-content: flex-start;">
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
</div>
<div id="justify_content_flex_end_row_reverse" style="width: 100px; height: 100px; flex-direction: row-reverse; justify-content: flex-start;">
<div style="width: 20px;"></div>
<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>
Reference in New Issue View Git Blame Copy Permalink