DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
f6c4a8e8e4cf71d70c79a22784c67ce656654512
yoga/gentest/fixtures/YGStaticPositionTest.html
Joe Vilches f6c4a8e8e4 Make position static behave like position static (#1482) 
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1482

X-link: https://github.com/facebook/react-native/pull/41685

This is the final step (that I know of) to get the core features of static working. Here we turn on all of the tests and pass down the correct owner size for the call to `calculateLayoutInternal` that is in `layoutAbsoluteChild`

Reviewed By: NickGerleman

Differential Revision: D51293606

fbshipit-source-id: 972259e7ebecb19b55aef2ef866bd7cb57aaf0ca
2023-12-07 21:25:45 -08:00

327 lines
12 KiB
HTML
Raw Blame History

<!-- The top level divs in each test are needed so that each div overlays each
other and the top measurement is accurate -->
<div id="static_position_insets_have_no_effect_left_top">
<div style="width: 100px; height: 100px; position: static; top: 50px; left: 50px;">
</div>
</div>
<div id="static_position_insets_have_no_effect_right_bottom">
<div style="width: 100px; height: 100px; position: static; bottom: 50px; right: 50px;">
</div>
</div>
<div id="static_position_absolute_child_insets_relative_to_positioned_ancestor">
<div style="width: 200px; height: 200px; position: relative">
<div style="height: 100px; width: 100px; margin-left: 100px; position: static">
<div style="height: 50px; width: 50px; position: absolute; top: 50px; left: 50px;">
</div>
</div>
</div>
</div>
<div id="static_position_absolute_child_insets_relative_to_positioned_ancestor_deep">
<div style="width: 200px; height: 200px; position: relative">
<div style="height: 100px; width: 100px; margin-left: 100px; position: static">
<div style="height: 100px; width: 100px; margin-left: 100px; position: static">
<div style="height: 100px; width: 100px; margin-left: 100px; position: static">
<div style="height: 100px; width: 100px; margin-left: 100px; position: static">
<div style="height: 50px; width: 50px; position: absolute; top: 50px; left: 50px;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="static_position_absolute_child_width_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50%; position: absolute">
</div>
</div>
</div>
</div>
<div id="static_position_relative_child_width_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50%; position: relative">
</div>
</div>
</div>
</div>
<div id="static_position_static_child_width_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50%; position: static">
</div>
</div>
</div>
</div>
<div id="static_position_absolute_child_height_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50%; width: 50px; position: absolute">
</div>
</div>
</div>
</div>
<div id="static_position_relative_child_height_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50%; width: 50px; position: relative">
</div>
</div>
</div>
</div>
<div id="static_position_static_child_height_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50%; width: 50px; position: static">
</div>
</div>
</div>
</div>
<div id="static_position_absolute_child_left_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; left: 50%; position: absolute">
</div>
</div>
</div>
</div>
<div id="static_position_relative_child_left_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; left: 50%; position: relative">
</div>
</div>
</div>
</div>
<div id="static_position_static_child_left_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; left: 50%; position: static">
</div>
</div>
</div>
</div>
<div id="static_position_absolute_child_right_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; right: 50%; position: absolute">
</div>
</div>
</div>
</div>
<div id="static_position_relative_child_right_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; right: 50%; position: relative">
</div>
</div>
</div>
</div>
<div id="static_position_static_child_right_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; right: 50%; position: static">
</div>
</div>
</div>
</div>
<div id="static_position_absolute_child_top_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; top: 50%; position: absolute">
</div>
</div>
</div>
</div>
<div id="static_position_relative_child_top_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; top: 50%; position: relative">
</div>
</div>
</div>
</div>
<div id="static_position_static_child_top_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; top: 50%; position: static">
</div>
</div>
</div>
</div>
<div id="static_position_absolute_child_bottom_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; bottom: 50%; position: absolute">
</div>
</div>
</div>
</div>
<div id="static_position_relative_child_bottom_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; bottom: 50%; position: relative">
</div>
</div>
</div>
</div>
<div id="static_position_static_child_bottom_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; bottom: 50%; position: static">
</div>
</div>
</div>
</div>
<div id="static_position_absolute_child_margin_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; margin: 50%; position: absolute">
</div>
</div>
</div>
</div>
<div id="static_position_relative_child_margin_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; margin: 50%; position: relative">
</div>
</div>
</div>
</div>
<div id="static_position_static_child_margin_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; margin: 50%; position: static">
</div>
</div>
</div>
</div>
<div id="static_position_absolute_child_padding_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; padding: 50%; position: absolute">
</div>
</div>
</div>
</div>
<div id="static_position_relative_child_padding_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; padding: 50%; position: relative">
</div>
</div>
</div>
</div>
<div id="static_position_static_child_padding_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; padding: 50%; position: static">
</div>
</div>
</div>
</div>
<div id="static_position_absolute_child_border_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; border: 50%; position: absolute">
</div>
</div>
</div>
</div>
<div id="static_position_relative_child_border_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; border: 50%; position: relative">
</div>
</div>
</div>
</div>
<div id="static_position_static_child_border_percentage">
<div style="width: 200px; height: 200px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50px; border: 50%; position: static">
</div>
</div>
</div>
</div>
<div id="static_position_absolute_child_containing_block_padding_box">
<div style="width: 400px; height: 400px; padding: 100px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50%; position: absolute">
</div>
</div>
</div>
</div>
<div id="static_position_relative_child_containing_block_padding_box">
<div style="width: 400px; height: 400px; padding: 100px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50%; position: relative">
</div>
</div>
</div>
</div>
<div id="static_position_static_child_containing_block_padding_box">
<div style="width: 400px; height: 400px; padding: 100px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 50px; width: 50%; position: static">
</div>
</div>
</div>
</div>
<div id="static_position_absolute_child_containing_block_content_box" data-disabled="true">
<div style="width: 400px; height: 400px; padding: 100px; position: relative">
<div style="height:50px; width: 50%; position: absolute">
</div>
</div>
</div>
<div id="static_position_relative_child_containing_block_content_box">
<div style="width: 400px; height: 400px; padding: 100px; position: relative">
<div style="height:50px; width: 50%; position: relative">
</div>
</div>
</div>
<div id="static_position_static_child_containing_block_content_box">
<div style="width: 400px; height: 400px; padding: 100px; position: relative">
<div style="height:50px; width: 50%; position: static">
</div>
</div>
</div>
Reference in New Issue View Git Blame Copy Permalink