7e96b65790
Summary: Fixes https://github.com/facebook/yoga/issues/850 https://github.com/facebook/yoga/issues/850 describes a conformance issue where positioning of an absolute child using percentages is not calculated against the correct box size. This takes the fix for that in https://github.com/facebook/yoga/pull/1028, regenerates tests, and fixes tests so that the experimental feature can be enabled. Goal is to run this as an experiment internally to see if we can enable by default. Changelog: [Internal] Pull Request resolved: https://github.com/facebook/yoga/pull/1201 Reviewed By: yungsters Differential Revision: D42282358 Pulled By: NickGerleman fbshipit-source-id: 57c0dd9b0f1c47cb9335ff6e13d44b4646e5fa58
103 lines
5.8 KiB
HTML
103 lines
5.8 KiB
HTML
<div id="absolute_layout_width_height_start_top" style="width: 100px; height: 100px;">
|
|
<div style="width:10px; height: 10px; position: absolute; start: 10px; top: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_width_height_end_bottom" style="width: 100px; height: 100px;">
|
|
<div style="width:10px; height: 10px; position: absolute; end: 10px; bottom: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_start_top_end_bottom" style="width: 100px; height: 100px;">
|
|
<div style="position: absolute; start: 10px; top: 10px; end: 10px; bottom: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_width_height_start_top_end_bottom" style="width: 100px; height: 100px;">
|
|
<div style="width:10px; height: 10px; position: absolute; start: 10px; top: 10px; end: 10px; bottom: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="do_not_clamp_height_of_absolute_node_to_height_of_its_overflow_hidden_parent" style="height: 50px; width: 50px; overflow: hidden; flex-direction: row;">
|
|
<div style="position: absolute; start: 0px; top: 0px;">
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_within_border" style="height:100px; width:100px; border-width: 10px; margin: 10px; padding: 10px;">
|
|
<div style="position: absolute; width: 50px; height: 50px; left: 0px; top: 0px;"></div>
|
|
<div style="position: absolute; width: 50px; height: 50px; right: 0px; bottom: 0px;"></div>
|
|
<div style="position: absolute; width: 50px; height: 50px; left: 0px; top: 0px; margin: 10px;"></div>
|
|
<div style="position: absolute; width: 50px; height: 50px; right: 0px; bottom: 0px; margin: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_align_items_and_justify_content_center" style="height: 100px; width: 110px; flex-grow: 1; align-items: center; justify-content: center;">
|
|
<div style="position: absolute; width: 60px; height: 40px;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_align_items_and_justify_content_flex_end" style="height: 100px; width: 110px; flex-grow: 1; align-items: flex-end; justify-content: flex-end;">
|
|
<div style="position: absolute; width: 60px; height: 40px;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_justify_content_center" style="height: 100px; width: 110px; flex-grow: 1; justify-content: center;">
|
|
<div style="position: absolute; width: 60px; height: 40px;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_align_items_center" style="height: 100px; width: 110px; flex-grow: 1; align-items: center;">
|
|
<div style="position: absolute; width: 60px; height: 40px;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_align_items_center_on_child_only" style="height: 100px; width: 110px; flex-grow: 1;">
|
|
<div style="position: absolute; width: 60px; height: 40px;align-self: center;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_align_items_and_justify_content_center_and_top_position" style="height: 100px; width: 110px; flex-grow: 1; align-items: center; justify-content: center;">
|
|
<div style="position: absolute; width: 60px; height: 40px;top:10px;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_align_items_and_justify_content_center_and_bottom_position" style="height: 100px; width: 110px; flex-grow: 1; align-items: center; justify-content: center;">
|
|
<div style="position: absolute; width: 60px; height: 40px;bottom:10px;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_align_items_and_justify_content_center_and_left_position" style="height: 100px; width: 110px; flex-grow: 1; align-items: center; justify-content: center;">
|
|
<div style="position: absolute; width: 60px; height: 40px;left:5px;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_align_items_and_justify_content_center_and_right_position" style="height: 100px; width: 110px; flex-grow: 1; align-items: center; justify-content: center;">
|
|
<div style="position: absolute; width: 60px; height: 40px;right:5px;"></div>
|
|
</div>
|
|
|
|
<div id="position_root_with_rtl_should_position_withoutdirection" style="height: 52px; width: 52px; left: 72px; ">
|
|
</div>
|
|
|
|
<div id="absolute_layout_percentage_bottom_based_on_parent_height" style="width: 100px; height: 200px;">
|
|
<div style="position: absolute; top: 50%; width: 10px; height: 10px;"></div>
|
|
<div style="position: absolute; bottom: 50%; width: 10px; height: 10px;"></div>
|
|
<div style="position: absolute; top: 10%; width: 10px; bottom: 10%;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_in_wrap_reverse_column_container" style="flex-direction:column; width:100px; height:100px; flex-wrap: wrap-reverse;">
|
|
<div style="width:20px; height:20px; position: absolute;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_in_wrap_reverse_row_container" style="flex-direction:row; width:100px; height:100px; flex-wrap: wrap-reverse;">
|
|
<div style="width:20px; height:20px; position: absolute;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_in_wrap_reverse_column_container_flex_end" style="flex-direction:column; width:100px; height:100px; flex-wrap: wrap-reverse;">
|
|
<div style="width:20px; height:20px; position: absolute; align-self: flex-end;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_in_wrap_reverse_row_container_flex_end" style="flex-direction:row; width:100px; height:100px; flex-wrap: wrap-reverse;">
|
|
<div style="width:20px; height:20px; position: absolute; align-self: flex-end;"></div>
|
|
</div>
|
|
|
|
<div id="percent_absolute_position_infinite_height" style="flex-direction:column; width:300px;">
|
|
<div style="width:300px; height:300;"></div>
|
|
<div style="width:20%; height:20%; left:20%; top:20%; position: absolute;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_percentage_height_based_on_padded_parent" style="flex-direction:column; width:100px; height:100px; padding-top: 10px; border-top: 10px;">
|
|
<div style="width:100px; height:50%; position: absolute;"></div>
|
|
</div>
|
|
|
|
<div id="absolute_layout_percentage_height_based_on_padded_parent_and_align_items_center" style="position: relative; flex-direction:column; align-items:center; justify-content:center; width:100px; height:100px; padding-top:20px; padding-bottom:20px; ">
|
|
<div style="position:absolute; width:100px; height:50%;"></div>
|
|
</div>
|