Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix issue where percentages were off of the border box, not padding box #1485

Closed
wants to merge 3 commits into from
Closed

Fix issue where percentages were off of the border box, not padding box #1485

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5e6dd8f
Make positionAbsoluteChild the sole place that matters when determini…
Dec 7, 2023
340a792
Make position static behave like position static (#1482)
joevilches Dec 7, 2023
e74e6bd
Fix issue where percentages were off of the border box, not padding b…
Dec 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions enums.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,9 @@
("StartingEndingEdgeFromFlexDirection", 1 << 1),
# Position: static behaves like position: relative within Yoga
("PositionStaticBehavesLikeRelative", 1 << 2),
# Positioning of absolute nodes will have various bugs related to
# justification, alignment, and insets
("AbsolutePositioning", 1 << 3),
# Enable all incorrect behavior (preserve compatibility)
("All", 0x7FFFFFFF),
# Enable all errata except for "StretchFlexBasis" (Defaults behavior
Expand Down
2 changes: 1 addition & 1 deletion gentest/fixtures/YGAbsolutePositionTest.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
<div style="width:20%; height:20%; left:20%; top:20%; position: absolute;"></div>
</div>

<div id="absolute_layout_percentage_height_based_on_padded_parent" data-disabled="true" style="flex-direction:column; width:100px; height:100px; padding-top: 10px; border-top: 10px solid black;">
<div id="absolute_layout_percentage_height_based_on_padded_parent" style="flex-direction:column; width:100px; height:100px; padding-top: 10px; border-top: 10px solid black;">
<div style="width:100px; height:50%; position: absolute;"></div>
</div>

Expand Down
78 changes: 44 additions & 34 deletions gentest/fixtures/YGStaticPositionTest.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
</div>
</div>

<div id="static_position_absolute_child_insets_relative_to_positioned_ancestor" data-disabled="true">
<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;">
Expand All @@ -19,7 +19,7 @@
</div>
</div>

<div id="static_position_absolute_child_insets_relative_to_positioned_ancestor_deep" data-disabled="true">
<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">
Expand All @@ -34,7 +34,7 @@
</div>
</div>

<div id="static_position_absolute_child_width_percentage" data-disabled="true">
<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">
Expand All @@ -43,7 +43,7 @@
</div>
</div>

<div id="static_position_relative_child_width_percentage" data-disabled="true">
<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">
Expand All @@ -52,7 +52,7 @@
</div>
</div>

<div id="static_position_static_child_width_percentage" data-disabled="true">
<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">
Expand All @@ -61,7 +61,7 @@
</div>
</div>

<div id="static_position_absolute_child_height_percentage" data-disabled="true">
<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">
Expand All @@ -70,7 +70,7 @@
</div>
</div>

<div id="static_position_relative_child_height_percentage" data-disabled="true">
<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">
Expand All @@ -79,7 +79,7 @@
</div>
</div>

<div id="static_position_static_child_height_percentage" data-disabled="true">
<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">
Expand All @@ -88,7 +88,7 @@
</div>
</div>

<div id="static_position_absolute_child_left_percentage" data-disabled="true">
<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">
Expand All @@ -97,7 +97,7 @@
</div>
</div>

<div id="static_position_relative_child_left_percentage" data-disabled="true">
<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">
Expand All @@ -106,7 +106,7 @@
</div>
</div>

<div id="static_position_static_child_left_percentage" data-disabled="true">
<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">
Expand All @@ -115,7 +115,7 @@
</div>
</div>

<div id="static_position_absolute_child_right_percentage" data-disabled="true">
<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">
Expand All @@ -124,7 +124,7 @@
</div>
</div>

<div id="static_position_relative_child_right_percentage" data-disabled="true">
<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">
Expand All @@ -133,7 +133,7 @@
</div>
</div>

<div id="static_position_static_child_right_percentage" data-disabled="true">
<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">
Expand All @@ -142,7 +142,7 @@
</div>
</div>

<div id="static_position_absolute_child_top_percentage" data-disabled="true">
<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">
Expand All @@ -151,7 +151,7 @@
</div>
</div>

<div id="static_position_relative_child_top_percentage" data-disabled="true">
<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">
Expand All @@ -160,7 +160,7 @@
</div>
</div>

<div id="static_position_static_child_top_percentage" data-disabled="true">
<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">
Expand All @@ -169,7 +169,7 @@
</div>
</div>

<div id="static_position_absolute_child_bottom_percentage" data-disabled="true">
<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">
Expand All @@ -178,7 +178,7 @@
</div>
</div>

<div id="static_position_relative_child_bottom_percentage" data-disabled="true">
<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">
Expand All @@ -187,7 +187,7 @@
</div>
</div>

<div id="static_position_static_child_bottom_percentage" data-disabled="true">
<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">
Expand All @@ -196,7 +196,7 @@
</div>
</div>

<div id="static_position_absolute_child_margin_percentage" data-disabled="true">
<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">
Expand All @@ -205,7 +205,7 @@
</div>
</div>

<div id="static_position_relative_child_margin_percentage" data-disabled="true">
<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">
Expand All @@ -214,7 +214,7 @@
</div>
</div>

<div id="static_position_static_child_margin_percentage" data-disabled="true">
<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">
Expand All @@ -223,7 +223,7 @@
</div>
</div>

<div id="static_position_absolute_child_padding_percentage" data-disabled="true">
<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">
Expand All @@ -232,7 +232,7 @@
</div>
</div>

<div id="static_position_relative_child_padding_percentage" data-disabled="true">
<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">
Expand All @@ -241,7 +241,7 @@
</div>
</div>

<div id="static_position_static_child_padding_percentage" data-disabled="true">
<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">
Expand All @@ -250,7 +250,7 @@
</div>
</div>

<div id="static_position_absolute_child_border_percentage" data-disabled="true">
<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">
Expand All @@ -259,7 +259,7 @@
</div>
</div>

<div id="static_position_relative_child_border_percentage" data-disabled="true">
<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">
Expand All @@ -268,7 +268,7 @@
</div>
</div>

<div id="static_position_static_child_border_percentage" data-disabled="true">
<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">
Expand All @@ -277,7 +277,7 @@
</div>
</div>

<div id="static_position_absolute_child_containing_block_padding_box" data-disabled="true">
<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">
Expand All @@ -286,7 +286,7 @@
</div>
</div>

<div id="static_position_relative_child_containing_block_padding_box" data-disabled="true">
<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">
Expand All @@ -295,7 +295,7 @@
</div>
</div>

<div id="static_position_static_child_containing_block_padding_box" data-disabled="true">
<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">
Expand All @@ -311,16 +311,26 @@
</div>
</div>

<div id="static_position_relative_child_containing_block_content_box" data-disabled="true">
<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" data-disabled="true">
<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>
2 changes: 2 additions & 0 deletions java/com/facebook/yoga/YogaErrata.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ public enum YogaErrata {
STRETCH_FLEX_BASIS(1),
STARTING_ENDING_EDGE_FROM_FLEX_DIRECTION(2),
POSITION_STATIC_BEHAVES_LIKE_RELATIVE(4),
ABSOLUTE_POSITIONING(8),
ALL(2147483647),
CLASSIC(2147483646);

Expand All @@ -33,6 +34,7 @@ public static YogaErrata fromInt(int value) {
case 1: return STRETCH_FLEX_BASIS;
case 2: return STARTING_ENDING_EDGE_FROM_FLEX_DIRECTION;
case 4: return POSITION_STATIC_BEHAVES_LIKE_RELATIVE;
case 8: return ABSOLUTE_POSITIONING;
case 2147483647: return ALL;
case 2147483646: return CLASSIC;
default: throw new IllegalArgumentException("Unknown enum value: " + value);
Expand Down
Loading
Loading