629e401deb
Summary: 1, Change bottom to be based� on height of parent. 2, Respect margin value when layout with right/bottom. Closes https://github.com/facebook/yoga/pull/552 Differential Revision: D5102090 Pulled By: emilsjolander fbshipit-source-id: dca291413ffc2027d7628f4c8b8eeeb0b4823bc2
74 lines
4.1 KiB
HTML
74 lines
4.1 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>
|