DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
8fe38fc7a8d45f50330b44b4c47f4b7546b94c01
yoga/gentest/fixtures/YGAlignItemsTest.html
Joe Vilches 8fe38fc7a8 Fix mismatched cases of inlineStart/End and flexStart/End (#1561) 
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1561

Back when I introduced the inline functions that would get the edge according to the writing direction I swapped some instances of `setLayoutPosition` which wrote to the flexStart edge erroneously. We should basically never read from some inline style and write to the flex edge. This changes them all to use the flex values.

Reviewed By: NickGerleman

Differential Revision: D52921401

fbshipit-source-id: 92b74d652018596134c91827806272ed7418ef6c
2024-01-22 15:41:09 -08:00

243 lines
9.5 KiB
HTML
Raw Blame History

<div id="align_items_stretch" style="width: 100px; height: 100px;">
<div style="height: 10px;"></div>
</div>
<div id="align_items_center" style="width: 100px; height: 100px; align-items: center;">
<div style="height: 10px; width: 10px;"></div>
</div>
<div id="align_items_flex_start" style="width: 100px; height: 100px; align-items: flex-start;">
<div style="height: 10px; width: 10px;"></div>
</div>
<div id="align_items_flex_end" style="width: 100px; height: 100px; align-items: flex-end;">
<div style="height: 10px; width: 10px;"></div>
</div>
<div id="align_baseline" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;"></div>
</div>
<div id="align_baseline_child" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 10px;"></div>
</div>
</div>
<div id="align_baseline_child_multiline"
style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 60px;"></div>
<div style="width: 50px; height: 25px;flex-wrap:wrap;flex-direction:row;">
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;"></div>
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;"></div>
</div>
</div>
<div id="align_baseline_child_multiline_override"
style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 60px;"></div>
<div style="width: 50px; height: 25px;flex-wrap:wrap;flex-direction:row;">
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;align-self:baseline;"></div>
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;align-self:baseline;"></div>
</div>
</div>
<div id="align_baseline_child_multiline_no_override_on_secondline"
style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 60px;"></div>
<div style="width: 50px; height: 25px;flex-wrap:wrap;flex-direction:row;">
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;"></div>
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;align-self:baseline;"></div>
</div>
</div>
<div id="align_baseline_child_top" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;top:10px;"></div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 10px;"></div>
</div>
</div>
<div id="align_baseline_child_top2" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;top:5px">
<div style="width: 50px; height: 10px;"></div>
</div>
</div>
<div id="align_baseline_double_nested_child"
style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;">
<div style="width: 50px; height: 20px;"></div>
</div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 15px;"></div>
</div>
</div>
<div id="align_baseline_column" style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;"></div>
</div>
<div id="align_baseline_child_margin" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;margin: 5px;"></div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 10px;margin: 1px;"></div>
</div>
</div>
<div id="align_baseline_child_padding"
style="width: 100px; height: 100px; padding:5px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;padding:5px;">
<div style="width: 50px; height: 10px;"></div>
</div>
</div>
<div id="align_baseline_multiline"
style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;flex-wrap:wrap;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 10px;"></div>
</div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 10px;"></div>
</div>
<div style="width: 50px; height: 50px;"></div>
</div>
<!-- TODO: Yoga's behavior is no longer in line with Chromium -->
<div id="align_baseline_multiline_column" data-disabled="true"
style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;flex-wrap:wrap;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 30px; height: 50px;">
<div style="width: 20px; height: 20px;"></div>
</div>
<div style="width: 40px; height: 70px;">
<div style="width: 10px; height: 10px;"></div>
</div>
<div style="width: 50px; height: 20px;"></div>
</div>
<!-- TODO: Yoga's behavior is no longer in line with Chromium -->
<div id="align_baseline_multiline_column2" data-disabled="true"
style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;flex-wrap:wrap;">
<div style="width: 50px; height: 50px;flex-direction:column;"></div>
<div style="width: 30px; height: 50px;flex-direction:column;">
<div style="width: 20px; height: 20px;flex-direction:column;"></div>
</div>
<div style="width: 40px; height: 70px;flex-direction:column;">
<div style="width: 10px; height: 10px;flex-direction:column;"></div>
</div>
<div style="width: 50px; height: 20px;flex-direction:column;"></div>
</div>
<div id="align_baseline_multiline_row_and_column"
style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;flex-wrap:wrap;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 50px;flex-direction:column;">
<div style="width: 50px; height: 10px;"></div>
</div>
<div style="width: 50px; height: 20px;flex-direction:column;">
<div style="width: 50px; height: 10px;"></div>
</div>
<div style="width: 50px; height: 20px;"></div>
</div>
<div id="align_items_center_child_with_margin_bigger_than_parent"
style="height: 52px; width: 52px; align-items: center; justify-content: center;">
<div style="align-items: center;">
<div style="width: 52px; height: 52px; margin-left: 10px; margin-right: 10px;"></div>
</div>
</div>
<div id="align_items_flex_end_child_with_margin_bigger_than_parent"
style="height: 52px; width: 52px; align-items: center; justify-content: center;">
<div style="align-items: flex-end;">
<div style="width: 52px; height: 52px; margin-left: 10px; margin-right: 10px;"></div>
</div>
</div>
<div id="align_items_center_child_without_margin_bigger_than_parent"
style="height: 52px; width: 52px; align-items: center; justify-content: center;">
<div style="align-items: center;">
<div style="width: 72px; height: 72px;"></div>
</div>
</div>
<div id="align_items_flex_end_child_without_margin_bigger_than_parent"
style="height: 52px; width: 52px; align-items: center; justify-content: center;">
<div style="align-items: flex-end;">
<div style="width: 72px; height: 72px;"></div>
</div>
</div>
<div id="align_center_should_size_based_on_content"
style="width: 100px; height: 100px; align-items: center; margin-top: 20px;">
<div style="flex-grow: 0; flex-shrink: 1; justify-content: center;">
<div style="flex-grow: 1; flex-shrink: 1;">
<div style="width: 20px; height: 20px;"></div>
</div>
</div>
</div>
<div id="align_stretch_should_size_based_on_parent"
style="width: 100px; height: 100px; align-items: stretch; margin-top: 20px;">
<div style="flex-grow: 0; flex-shrink: 1; justify-content: center;">
<div style="flex-grow: 1; flex-shrink: 1;">
<div style="width: 20px; height: 20px;"></div>
</div>
</div>
</div>
<div id="align_flex_start_with_shrinking_children" style="height: 500px; width: 500px">
<div style="align-items: flex-start;">
<div style="flex-grow: 1; flex-shrink: 1;">
<div style="flex-grow: 1; flex-shrink: 1;"></div>
</div>
</div>
</div>
<div id="align_flex_start_with_stretching_children" style="height: 500px; width: 500px">
<div style="align-items: stretch;">
<div style="flex-grow: 1; flex-shrink: 1;">
<div style="flex-grow: 1; flex-shrink: 1;"></div>
</div>
</div>
</div>
<div id="align_flex_start_with_shrinking_children_with_stretch" style="height: 500px; width: 500px">
<div style="align-items: flex-start;">
<div style="flex-grow: 1; flex-shrink: 1; align-items: stretch;">
<div style="flex-grow: 1; flex-shrink: 1;"></div>
</div>
</div>
</div>
<div id="align_flex_end_with_row_reverse"
style="width: 100px; height: 75px; align-items: flex-end; flex-direction: column; flex-wrap: wrap;">
<div style="position:relative; width:50px; height:50px; margin-right: 5px; margin-left: 3px;">
</div>
<div style="position:relative; width:50px; height:50px;">
</div>
</div>
<div id="align_stretch_with_row_reverse"
style="width: 100px; height: 75px; align-items: stretch; flex-direction: column; flex-wrap: wrap;">
<div style="position:relative; width:50px; height:50px; margin-right: 5px; margin-left: 3px;">
</div>
<div style="position:relative; width:50px; height:50px;">
</div>
</div>
Reference in New Issue View Git Blame Copy Permalink