DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
c93734f579b4d4d2a4968c157559504efd48c4e8
yoga/gentest/fixtures/YGStaticPositionTest.html
Joe Vilches 59bf902a17 Insets no longer apply to statically positioned nodes (#1454) 
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1454

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

One of the most basic aspects of statically positioned nodes is that [insets do not apply to them](https://developer.mozilla.org/en-US/docs/Web/CSS/position#static). So I put a guard inside `Node::relativePosition` where we take that into account when setting the position.

Reviewed By: NickGerleman

Differential Revision: D50507808

fbshipit-source-id: 7aab4138b06e60936db0ddb6019a9a30f1ded2db
2023-12-04 19:35:30 -08:00

327 lines
13 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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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" data-disabled="true">
<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