DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
a5c955a57981007a2bfcd130ae4e701c7f14bca1
yoga/gentest/fixtures/YGStaticPositionTest.html
Joe Vilches 9b87d8b3f3 Fix issue where percentages were off of the border box, not padding box (#1485) 
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1485

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

The size of the containing block is the size of the padding box of the containing node for absolute nodes. We were looking at  `containingNode->getLayout().measuredDimension(Dimension::Width)` which is the border box. So we need to subtract the border from this.

Added a test that was failing before this change as well

Reviewed By: NickGerleman

Differential Revision: D51330526

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

337 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>
<div id="static_position_containing_block_padding_and_border">
<div
style="width: 400px; height: 400px; padding: 8px 1px 4px 9px; border-width: 5px 7px 4px 2px; position: relative">
<div style="height:100px; width: 100px; position: static">
<div style="height: 61%; width: 41%; position: absolute">
</div>
</div>
</div>
</div>
Reference in New Issue View Git Blame Copy Permalink