Skip to content

Commit

Permalink
Fix issue where we were not applying flex end correctly when justifyi…
Browse files Browse the repository at this point in the history 
…ng (facebook#1487)

Summary:
Pull Request resolved: facebook#1487

X-link: facebook/react-native#41691

The code here was just wrong. I changed it to be the same logic as the Justify:FlexStart case, but with the flex end sides. Then I get the position for the opposite edge since we need to write to flex start side.

Reviewed By: NickGerleman

Differential Revision: D51383792

fbshipit-source-id: 5b17d8503406d380d08a721e14ace22361c91cdf
  • Loading branch information
@joevilches @facebook-github-bot
joevilches authored and facebook-github-bot committed Dec 4, 2023
1 parent 836ef23 commit cc1445c
Show file tree
Hide file tree
Showing 5 changed files with 764 additions and 2 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 @@ -529,3 +529,29 @@
</div>
</div>
</div>

<div id="static_position_justify_flex_end_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: flex-end;">
<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 @@ -4517,6 +4517,247 @@ public void test_static_position_justify_center_amalgamation() {
assertEquals(50f, root_child0_child0_child2_child0.getLayoutHeight(), 0.0f);
}

@Test
public void test_static_position_justify_flex_end_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.FLEX_END);
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(140f, 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(140f, 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 cc1445c

Please sign in to comment.