Skip to content

Commit

Permalink
Fix issue where we were not centering absolute nodes correctly when j…
Browse files Browse the repository at this point in the history 
…ustifying (facebook#1489)

Summary:
Pull Request resolved: facebook#1489

X-link: facebook/react-native#41690

Centering involves centering the margin box in the content box of the parent, and then getting the distance from the flex start edge of the parent to the child

Reviewed By: NickGerleman

Differential Revision: D51383625

fbshipit-source-id: 234f6f0984217db26387ddef79fc4b2f8ba969f6
  • Loading branch information
@joevilches @facebook-github-bot
joevilches authored and facebook-github-bot committed Dec 4, 2023
1 parent 6959a7b commit dc0f33d
Show file tree
Hide file tree
Showing 5 changed files with 770 additions and 3 deletions.
26 changes: 26 additions & 0 deletions gentest/fixtures/YGStaticPositionTest.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -503,3 +503,29 @@
</div>
</div>
</div>

<div id="static_position_justify_center_amalgamation">
<div style="position: relative; margin: 5px 9px 1px 4px; border-width: 6px 7px 8px 5px; padding: 9px 11px 13px 2px">
<div
style="position: static; margin: 6px 3px 9px 8px; border-width: 10px 2px 1px 8px; padding: 7px 9px 4px 1px; justify-content: center;">
<div
style="position: absolute; width: 21%; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
<div
style="width: 100px; height: 50px; position: relative; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
</div>
</div>
<div
style="position: relative; width: 10%; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
<div
style="width: 100px; height: 50px; position: relative; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
</div>
</div>
<div
style="position: relative; width: 10%; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
<div
style="width: 100px; height: 50px; position: relative; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
</div>
</div>
</div>
</div>
</div>
241 changes: 241 additions & 0 deletions java/tests/com/facebook/yoga/YGStaticPositionTest.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4276,6 +4276,247 @@ public void test_static_position_both_insets_set_amalgamation() {
assertEquals(50f, root_child0_child0_child0_child0.getLayoutHeight(), 0.0f);
}

@Test
public void test_static_position_justify_center_amalgamation() {
YogaConfig config = YogaConfigFactory.create();
config.setExperimentalFeatureEnabled(YogaExperimentalFeature.ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);

final YogaNode root = createNode(config);
root.setPositionType(YogaPositionType.ABSOLUTE);

final YogaNode root_child0 = createNode(config);
root_child0.setPositionType(YogaPositionType.RELATIVE);
root_child0.setMargin(YogaEdge.LEFT, 4f);
root_child0.setMargin(YogaEdge.TOP, 5f);
root_child0.setMargin(YogaEdge.RIGHT, 9f);
root_child0.setMargin(YogaEdge.BOTTOM, 1f);
root_child0.setPadding(YogaEdge.LEFT, 2);
root_child0.setPadding(YogaEdge.TOP, 9);
root_child0.setPadding(YogaEdge.RIGHT, 11);
root_child0.setPadding(YogaEdge.BOTTOM, 13);
root_child0.setBorder(YogaEdge.LEFT, 5f);
root_child0.setBorder(YogaEdge.TOP, 6f);
root_child0.setBorder(YogaEdge.RIGHT, 7f);
root_child0.setBorder(YogaEdge.BOTTOM, 8f);
root.addChildAt(root_child0, 0);

final YogaNode root_child0_child0 = createNode(config);
root_child0_child0.setJustifyContent(YogaJustify.CENTER);
root_child0_child0.setMargin(YogaEdge.LEFT, 8f);
root_child0_child0.setMargin(YogaEdge.TOP, 6f);
root_child0_child0.setMargin(YogaEdge.RIGHT, 3f);
root_child0_child0.setMargin(YogaEdge.BOTTOM, 9f);
root_child0_child0.setPadding(YogaEdge.LEFT, 1);
root_child0_child0.setPadding(YogaEdge.TOP, 7);
root_child0_child0.setPadding(YogaEdge.RIGHT, 9);
root_child0_child0.setPadding(YogaEdge.BOTTOM, 4);
root_child0_child0.setBorder(YogaEdge.LEFT, 8f);
root_child0_child0.setBorder(YogaEdge.TOP, 10f);
root_child0_child0.setBorder(YogaEdge.RIGHT, 2f);
root_child0_child0.setBorder(YogaEdge.BOTTOM, 1f);
root_child0.addChildAt(root_child0_child0, 0);

final YogaNode root_child0_child0_child0 = createNode(config);
root_child0_child0_child0.setPositionType(YogaPositionType.ABSOLUTE);
root_child0_child0_child0.setMargin(YogaEdge.LEFT, 9f);
root_child0_child0_child0.setMargin(YogaEdge.TOP, 12f);
root_child0_child0_child0.setMargin(YogaEdge.RIGHT, 4f);
root_child0_child0_child0.setMargin(YogaEdge.BOTTOM, 7f);
root_child0_child0_child0.setPadding(YogaEdge.LEFT, 5);
root_child0_child0_child0.setPadding(YogaEdge.TOP, 3);
root_child0_child0_child0.setPadding(YogaEdge.RIGHT, 8);
root_child0_child0_child0.setPadding(YogaEdge.BOTTOM, 10);
root_child0_child0_child0.setBorder(YogaEdge.LEFT, 2f);
root_child0_child0_child0.setBorder(YogaEdge.TOP, 1f);
root_child0_child0_child0.setBorder(YogaEdge.RIGHT, 5f);
root_child0_child0_child0.setBorder(YogaEdge.BOTTOM, 9f);
root_child0_child0_child0.setWidthPercent(21f);
root_child0_child0.addChildAt(root_child0_child0_child0, 0);

final YogaNode root_child0_child0_child0_child0 = createNode(config);
root_child0_child0_child0_child0.setPositionType(YogaPositionType.RELATIVE);
root_child0_child0_child0_child0.setMargin(YogaEdge.LEFT, 9f);
root_child0_child0_child0_child0.setMargin(YogaEdge.TOP, 12f);
root_child0_child0_child0_child0.setMargin(YogaEdge.RIGHT, 4f);
root_child0_child0_child0_child0.setMargin(YogaEdge.BOTTOM, 7f);
root_child0_child0_child0_child0.setPadding(YogaEdge.LEFT, 5);
root_child0_child0_child0_child0.setPadding(YogaEdge.TOP, 3);
root_child0_child0_child0_child0.setPadding(YogaEdge.RIGHT, 8);
root_child0_child0_child0_child0.setPadding(YogaEdge.BOTTOM, 10);
root_child0_child0_child0_child0.setBorder(YogaEdge.LEFT, 2f);
root_child0_child0_child0_child0.setBorder(YogaEdge.TOP, 1f);
root_child0_child0_child0_child0.setBorder(YogaEdge.RIGHT, 5f);
root_child0_child0_child0_child0.setBorder(YogaEdge.BOTTOM, 9f);
root_child0_child0_child0_child0.setWidth(100f);
root_child0_child0_child0_child0.setHeight(50f);
root_child0_child0_child0.addChildAt(root_child0_child0_child0_child0, 0);

final YogaNode root_child0_child0_child1 = createNode(config);
root_child0_child0_child1.setPositionType(YogaPositionType.RELATIVE);
root_child0_child0_child1.setMargin(YogaEdge.LEFT, 9f);
root_child0_child0_child1.setMargin(YogaEdge.TOP, 12f);
root_child0_child0_child1.setMargin(YogaEdge.RIGHT, 4f);
root_child0_child0_child1.setMargin(YogaEdge.BOTTOM, 7f);
root_child0_child0_child1.setPadding(YogaEdge.LEFT, 5);
root_child0_child0_child1.setPadding(YogaEdge.TOP, 3);
root_child0_child0_child1.setPadding(YogaEdge.RIGHT, 8);
root_child0_child0_child1.setPadding(YogaEdge.BOTTOM, 10);
root_child0_child0_child1.setBorder(YogaEdge.LEFT, 2f);
root_child0_child0_child1.setBorder(YogaEdge.TOP, 1f);
root_child0_child0_child1.setBorder(YogaEdge.RIGHT, 5f);
root_child0_child0_child1.setBorder(YogaEdge.BOTTOM, 9f);
root_child0_child0_child1.setWidthPercent(10f);
root_child0_child0.addChildAt(root_child0_child0_child1, 1);

final YogaNode root_child0_child0_child1_child0 = createNode(config);
root_child0_child0_child1_child0.setPositionType(YogaPositionType.RELATIVE);
root_child0_child0_child1_child0.setMargin(YogaEdge.LEFT, 9f);
root_child0_child0_child1_child0.setMargin(YogaEdge.TOP, 12f);
root_child0_child0_child1_child0.setMargin(YogaEdge.RIGHT, 4f);
root_child0_child0_child1_child0.setMargin(YogaEdge.BOTTOM, 7f);
root_child0_child0_child1_child0.setPadding(YogaEdge.LEFT, 5);
root_child0_child0_child1_child0.setPadding(YogaEdge.TOP, 3);
root_child0_child0_child1_child0.setPadding(YogaEdge.RIGHT, 8);
root_child0_child0_child1_child0.setPadding(YogaEdge.BOTTOM, 10);
root_child0_child0_child1_child0.setBorder(YogaEdge.LEFT, 2f);
root_child0_child0_child1_child0.setBorder(YogaEdge.TOP, 1f);
root_child0_child0_child1_child0.setBorder(YogaEdge.RIGHT, 5f);
root_child0_child0_child1_child0.setBorder(YogaEdge.BOTTOM, 9f);
root_child0_child0_child1_child0.setWidth(100f);
root_child0_child0_child1_child0.setHeight(50f);
root_child0_child0_child1.addChildAt(root_child0_child0_child1_child0, 0);

final YogaNode root_child0_child0_child2 = createNode(config);
root_child0_child0_child2.setPositionType(YogaPositionType.RELATIVE);
root_child0_child0_child2.setMargin(YogaEdge.LEFT, 9f);
root_child0_child0_child2.setMargin(YogaEdge.TOP, 12f);
root_child0_child0_child2.setMargin(YogaEdge.RIGHT, 4f);
root_child0_child0_child2.setMargin(YogaEdge.BOTTOM, 7f);
root_child0_child0_child2.setPadding(YogaEdge.LEFT, 5);
root_child0_child0_child2.setPadding(YogaEdge.TOP, 3);
root_child0_child0_child2.setPadding(YogaEdge.RIGHT, 8);
root_child0_child0_child2.setPadding(YogaEdge.BOTTOM, 10);
root_child0_child0_child2.setBorder(YogaEdge.LEFT, 2f);
root_child0_child0_child2.setBorder(YogaEdge.TOP, 1f);
root_child0_child0_child2.setBorder(YogaEdge.RIGHT, 5f);
root_child0_child0_child2.setBorder(YogaEdge.BOTTOM, 9f);
root_child0_child0_child2.setWidthPercent(10f);
root_child0_child0.addChildAt(root_child0_child0_child2, 2);

final YogaNode root_child0_child0_child2_child0 = createNode(config);
root_child0_child0_child2_child0.setPositionType(YogaPositionType.RELATIVE);
root_child0_child0_child2_child0.setMargin(YogaEdge.LEFT, 9f);
root_child0_child0_child2_child0.setMargin(YogaEdge.TOP, 12f);
root_child0_child0_child2_child0.setMargin(YogaEdge.RIGHT, 4f);
root_child0_child0_child2_child0.setMargin(YogaEdge.BOTTOM, 7f);
root_child0_child0_child2_child0.setPadding(YogaEdge.LEFT, 5);
root_child0_child0_child2_child0.setPadding(YogaEdge.TOP, 3);
root_child0_child0_child2_child0.setPadding(YogaEdge.RIGHT, 8);
root_child0_child0_child2_child0.setPadding(YogaEdge.BOTTOM, 10);
root_child0_child0_child2_child0.setBorder(YogaEdge.LEFT, 2f);
root_child0_child0_child2_child0.setBorder(YogaEdge.TOP, 1f);
root_child0_child0_child2_child0.setBorder(YogaEdge.RIGHT, 5f);
root_child0_child0_child2_child0.setBorder(YogaEdge.BOTTOM, 9f);
root_child0_child0_child2_child0.setWidth(100f);
root_child0_child0_child2_child0.setHeight(50f);
root_child0_child0_child2.addChildAt(root_child0_child0_child2_child0, 0);
root.setDirection(YogaDirection.LTR);
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);

assertEquals(0f, root.getLayoutX(), 0.0f);
assertEquals(0f, root.getLayoutY(), 0.0f);
assertEquals(215f, root.getLayoutWidth(), 0.0f);
assertEquals(301f, root.getLayoutHeight(), 0.0f);

assertEquals(4f, root_child0.getLayoutX(), 0.0f);
assertEquals(5f, root_child0.getLayoutY(), 0.0f);
assertEquals(202f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(295f, root_child0.getLayoutHeight(), 0.0f);

assertEquals(15f, root_child0_child0.getLayoutX(), 0.0f);
assertEquals(21f, root_child0_child0.getLayoutY(), 0.0f);
assertEquals(166f, root_child0_child0.getLayoutWidth(), 0.0f);
assertEquals(244f, root_child0_child0.getLayoutHeight(), 0.0f);

assertEquals(18f, root_child0_child0_child0.getLayoutX(), 0.0f);
assertEquals(85f, root_child0_child0_child0.getLayoutY(), 0.0f);
assertEquals(40f, root_child0_child0_child0.getLayoutWidth(), 0.0f);
assertEquals(92f, root_child0_child0_child0.getLayoutHeight(), 0.0f);

assertEquals(16f, root_child0_child0_child0_child0.getLayoutX(), 0.0f);
assertEquals(16f, root_child0_child0_child0_child0.getLayoutY(), 0.0f);
assertEquals(100f, root_child0_child0_child0_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0_child0_child0_child0.getLayoutHeight(), 0.0f);

assertEquals(18f, root_child0_child0_child1.getLayoutX(), 0.0f);
assertEquals(29f, root_child0_child0_child1.getLayoutY(), 0.0f);
assertEquals(20f, root_child0_child0_child1.getLayoutWidth(), 0.0f);
assertEquals(92f, root_child0_child0_child1.getLayoutHeight(), 0.0f);

assertEquals(16f, root_child0_child0_child1_child0.getLayoutX(), 0.0f);
assertEquals(16f, root_child0_child0_child1_child0.getLayoutY(), 0.0f);
assertEquals(100f, root_child0_child0_child1_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0_child0_child1_child0.getLayoutHeight(), 0.0f);

assertEquals(18f, root_child0_child0_child2.getLayoutX(), 0.0f);
assertEquals(140f, root_child0_child0_child2.getLayoutY(), 0.0f);
assertEquals(20f, root_child0_child0_child2.getLayoutWidth(), 0.0f);
assertEquals(92f, root_child0_child0_child2.getLayoutHeight(), 0.0f);

assertEquals(16f, root_child0_child0_child2_child0.getLayoutX(), 0.0f);
assertEquals(16f, root_child0_child0_child2_child0.getLayoutY(), 0.0f);
assertEquals(100f, root_child0_child0_child2_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0_child0_child2_child0.getLayoutHeight(), 0.0f);

root.setDirection(YogaDirection.RTL);
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);

assertEquals(0f, root.getLayoutX(), 0.0f);
assertEquals(0f, root.getLayoutY(), 0.0f);
assertEquals(215f, root.getLayoutWidth(), 0.0f);
assertEquals(301f, root.getLayoutHeight(), 0.0f);

assertEquals(4f, root_child0.getLayoutX(), 0.0f);
assertEquals(5f, root_child0.getLayoutY(), 0.0f);
assertEquals(202f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(295f, root_child0.getLayoutHeight(), 0.0f);

assertEquals(15f, root_child0_child0.getLayoutX(), 0.0f);
assertEquals(21f, root_child0_child0.getLayoutY(), 0.0f);
assertEquals(166f, root_child0_child0.getLayoutWidth(), 0.0f);
assertEquals(244f, root_child0_child0.getLayoutHeight(), 0.0f);

assertEquals(111f, root_child0_child0_child0.getLayoutX(), 0.0f);
assertEquals(85f, root_child0_child0_child0.getLayoutY(), 0.0f);
assertEquals(40f, root_child0_child0_child0.getLayoutWidth(), 0.0f);
assertEquals(92f, root_child0_child0_child0.getLayoutHeight(), 0.0f);

assertEquals(-77f, root_child0_child0_child0_child0.getLayoutX(), 0.0f);
assertEquals(16f, root_child0_child0_child0_child0.getLayoutY(), 0.0f);
assertEquals(100f, root_child0_child0_child0_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0_child0_child0_child0.getLayoutHeight(), 0.0f);

assertEquals(131f, root_child0_child0_child1.getLayoutX(), 0.0f);
assertEquals(29f, root_child0_child0_child1.getLayoutY(), 0.0f);
assertEquals(20f, root_child0_child0_child1.getLayoutWidth(), 0.0f);
assertEquals(92f, root_child0_child0_child1.getLayoutHeight(), 0.0f);

assertEquals(-97f, root_child0_child0_child1_child0.getLayoutX(), 0.0f);
assertEquals(16f, root_child0_child0_child1_child0.getLayoutY(), 0.0f);
assertEquals(100f, root_child0_child0_child1_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0_child0_child1_child0.getLayoutHeight(), 0.0f);

assertEquals(131f, root_child0_child0_child2.getLayoutX(), 0.0f);
assertEquals(140f, root_child0_child0_child2.getLayoutY(), 0.0f);
assertEquals(20f, root_child0_child0_child2.getLayoutWidth(), 0.0f);
assertEquals(92f, root_child0_child0_child2.getLayoutHeight(), 0.0f);

assertEquals(-97f, root_child0_child0_child2_child0.getLayoutX(), 0.0f);
assertEquals(16f, root_child0_child0_child2_child0.getLayoutY(), 0.0f);
assertEquals(100f, root_child0_child0_child2_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0_child0_child2_child0.getLayoutHeight(), 0.0f);
}

private YogaNode createNode(YogaConfig config) {
return mNodeFactory.create(config);
}
Expand Down
Loading

0 comments on commit dc0f33d

Please sign in to comment.