DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
283e3203f6f12cb4d41dc4d91516ea58357224db
yoga/gentest/fixtures/YGFlexDirectionTest.html
Joe Vilches 283e3203f6 Fix issue where absolute children of row-reverse containers would inset on the wrong side (#1446) 
Summary:
X-link: https://github.com/facebook/react-native/pull/41293

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

NickGerleman pointed out that my recent changes to fix the slew of row-reverse problems in Yoga actually ended up regressing some parts. Specifically, absolute children of row-reverse containers would have their insets set to the wrong side. So if you set left: 10 it would apply it to the right.

Turns out, in `layoutAbsoluteChild` there were cases where we were applying inlineStart/End values to the flexStart/End edge, which can never be right. So I changed the values to also be flexStart/End as the fix here.

Reviewed By: NickGerleman

Differential Revision: D50945475

fbshipit-source-id: 290de06dcc04e8e644a3a32c127af12fdabb2f75
2023-11-07 11:02:20 -08:00

403 lines
16 KiB
HTML
Raw Blame History

<div id="flex_direction_column_no_height" style="width: 100px">
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
</div>
<div id="flex_direction_row_no_width" style="height: 100px; flex-direction: row;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_column" style="height: 100px; width: 100px;">
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
</div>
<div id="flex_direction_row" style="height: 100px; width: 100px; flex-direction: row;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_column_reverse" style="height: 100px; width: 100px; flex-direction: column-reverse;">
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
<div style="height: 10px;"></div>
</div>
<div id="flex_direction_row_reverse" style="height: 100px; width: 100px; flex-direction: row-reverse;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_row_reverse_margin_left"
style="height: 100px; width: 100px; flex-direction: row-reverse; margin-left: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<!-- gentest.rb will swap margin-start to margin-left. This is needed to use YGEdgeStart instead of YGEdgeLeft in the generated tests -->
<div id="flex_direction_row_reverse_margin_start"
style="height: 100px; width: 100px; flex-direction: row-reverse; margin-start: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_row_reverse_margin_right"
style="height: 100px; width: 100px; flex-direction: row-reverse; margin-right: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_row_reverse_margin_end"
style="height: 100px; width: 100px; flex-direction: row-reverse; margin-end: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_column_reverse_margin_top"
style="height: 100px; width: 100px; flex-direction: column-reverse; margin-top: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_column_reverse_margin_bottom"
style="height: 100px; width: 100px; flex-direction: column-reverse; margin-bottom: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_row_reverse_padding_left"
style="height: 100px; width: 100px; flex-direction: row-reverse; padding-left: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_row_reverse_padding_start"
style="height: 100px; width: 100px; flex-direction: row-reverse; padding-start: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_row_reverse_padding_right"
style="height: 100px; width: 100px; flex-direction: row-reverse; padding-right: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_row_reverse_padding_end"
style="height: 100px; width: 100px; flex-direction: row-reverse; padding-end: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_column_reverse_padding_top"
style="height: 100px; width: 100px; flex-direction: column-reverse; padding-top: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_column_reverse_padding_bottom"
style="height: 100px; width: 100px; flex-direction: column-reverse; padding-bottom: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_row_reverse_border_left"
style="height: 100px; width: 100px; flex-direction: row-reverse; border-left-width: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_row_reverse_border_start"
style="height: 100px; width: 100px; flex-direction: row-reverse; border-start-width: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_row_reverse_border_right"
style="height: 100px; width: 100px; flex-direction: row-reverse; border-right-width: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_row_reverse_border_end"
style="height: 100px; width: 100px; flex-direction: row-reverse; border-end-width: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_column_reverse_border_top"
style="height: 100px; width: 100px; flex-direction: column-reverse; border-top-width: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_column_reverse_border_bottom"
style="height: 100px; width: 100px; flex-direction: column-reverse; border-bottom-width: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
<div id="flex_direction_row_reverse_pos_left" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; left: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_pos_start" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; start: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_pos_right" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; right: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_pos_end" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; end: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_column_reverse_pos_top" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: column-reverse; top: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_column_reverse_pos_bottom" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: column-reverse; bottom: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_inner_pos_left" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; left: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_inner_pos_right" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; right: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_col_reverse_inner_pos_top" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; top: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_col_reverse_inner_pos_bottom" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; bottom: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_inner_pos_start" data-disabled="true" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; start: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_inner_pos_end" data-disabled="true" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; end: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_inner_margin_left" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; margin-left: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_inner_margin_right" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; margin-right: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_col_reverse_inner_margin_top" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; margin-top: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_col_reverse_inner_margin_bottom" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; margin-bottom: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_inner_marign_start" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; margin-start: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_inner_margin_end" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; margin-end: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_inner_border_left" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; border-left: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_inner_border_right" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; border-right: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_col_reverse_inner_border_top" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; border-top: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_col_reverse_inner_border_bottom" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; border-bottom: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_inner_border_start" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; border-start: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_inner_border_end" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; border-end: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_inner_padding_left" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; padding-left: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_inner_padding_right" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; padding-right: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_col_reverse_inner_padding_top" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; padding-top: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_col_reverse_inner_padding_bottom" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; padding-bottom: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_inner_padding_start" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; padding-start: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
<div id="flex_direction_row_reverse_inner_padding_end" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; padding-end: 10px"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
Reference in New Issue View Git Blame Copy Permalink