Add fixtures to test proper margins with reverse flex directions

Summary:
Yoga has a known bug where marginStart and marginEnd will swap with row-reverse flex direction. This is not the intended behavior. On Paper this is also an issue with marginLeft and marginRight (at least we think Paper is the culprit, not exactly clear yet).

margin-start (and end) is not actually valid css. The gentest.rb script will just turn this into margin-left, but the cpp generated will properly test marginStart. This seems a bit weird to be since marginStart != marginLeft AFAIK. Things like RTL and LTR modes might make this test not exactly right. But given how many other tests depend on this quirk I think it is fine to add as is - the end result is the same after all. If not, a followup would be to add support for mapping margin-inline-start (valid css) to marginStart.

Anyway, this diff is to add test coverage for this scenario. Next stop is to actually try to fix this problem, which may be a bit harder :P

See https://github.com/facebook/yoga/issues/1208 for more info.

Reviewed By: NickGerleman

Differential Revision: D49744271

fbshipit-source-id: 75b8dd0cc5c53b2f338476fb70b60006aaa89054

javascript/tests/generated/YGFlexDirectionTest.test.ts

@@ -465,3 +465,453 @@ test('flex_direction_row_reverse', () => {
     config.free();
   }
 });
+test('flex_direction_row_reverse_margin_left', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.RowReverse);
+    root.setMargin(Edge.Left, 100);
+    root.setWidth(100);
+    root.setHeight(100);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(10);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(10);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(10);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(100);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(100);
+    expect(root.getComputedHeight()).toBe(100);
+
+    expect(root_child0.getComputedLeft()).toBe(90);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(80);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(10);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(70);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(10);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(100);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(100);
+    expect(root.getComputedHeight()).toBe(100);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(10);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(10);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(20);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(10);
+    expect(root_child2.getComputedHeight()).toBe(100);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test.skip('flex_direction_row_reverse_margin_start', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.RowReverse);
+    root.setMargin(Edge.Start, 100);
+    root.setWidth(100);
+    root.setHeight(100);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(10);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(10);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(10);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(100);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(100);
+    expect(root.getComputedHeight()).toBe(100);
+
+    expect(root_child0.getComputedLeft()).toBe(90);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(80);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(10);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(70);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(10);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(100);
+    expect(root.getComputedHeight()).toBe(100);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(10);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(10);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(20);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(10);
+    expect(root_child2.getComputedHeight()).toBe(100);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('flex_direction_row_reverse_margin_right', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.RowReverse);
+    root.setMargin(Edge.Right, 100);
+    root.setWidth(100);
+    root.setHeight(100);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(10);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(10);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(10);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(100);
+    expect(root.getComputedHeight()).toBe(100);
+
+    expect(root_child0.getComputedLeft()).toBe(90);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(80);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(10);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(70);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(10);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(100);
+    expect(root.getComputedHeight()).toBe(100);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(10);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(10);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(20);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(10);
+    expect(root_child2.getComputedHeight()).toBe(100);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test.skip('flex_direction_row_reverse_margin_end', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.RowReverse);
+    root.setMargin(Edge.End, 100);
+    root.setWidth(100);
+    root.setHeight(100);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(10);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(10);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(10);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(100);
+    expect(root.getComputedHeight()).toBe(100);
+
+    expect(root_child0.getComputedLeft()).toBe(90);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(80);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(10);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(70);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(10);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(100);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(100);
+    expect(root.getComputedHeight()).toBe(100);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(10);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(10);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(20);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(10);
+    expect(root_child2.getComputedHeight()).toBe(100);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('flex_direction_column_reverse_margin_top', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.ColumnReverse);
+    root.setMargin(Edge.Top, 100);
+    root.setWidth(100);
+    root.setHeight(100);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(10);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(10);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(10);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(100);
+    expect(root.getComputedWidth()).toBe(100);
+    expect(root.getComputedHeight()).toBe(100);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(100);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(0);
+
+    expect(root_child1.getComputedLeft()).toBe(0);
+    expect(root_child1.getComputedTop()).toBe(100);
+    expect(root_child1.getComputedWidth()).toBe(10);
+    expect(root_child1.getComputedHeight()).toBe(0);
+
+    expect(root_child2.getComputedLeft()).toBe(0);
+    expect(root_child2.getComputedTop()).toBe(100);
+    expect(root_child2.getComputedWidth()).toBe(10);
+    expect(root_child2.getComputedHeight()).toBe(0);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(100);
+    expect(root.getComputedWidth()).toBe(100);
+    expect(root.getComputedHeight()).toBe(100);
+
+    expect(root_child0.getComputedLeft()).toBe(90);
+    expect(root_child0.getComputedTop()).toBe(100);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(0);
+
+    expect(root_child1.getComputedLeft()).toBe(90);
+    expect(root_child1.getComputedTop()).toBe(100);
+    expect(root_child1.getComputedWidth()).toBe(10);
+    expect(root_child1.getComputedHeight()).toBe(0);
+
+    expect(root_child2.getComputedLeft()).toBe(90);
+    expect(root_child2.getComputedTop()).toBe(100);
+    expect(root_child2.getComputedWidth()).toBe(10);
+    expect(root_child2.getComputedHeight()).toBe(0);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('flex_direction_column_reverse_margin_bottom', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.ColumnReverse);
+    root.setMargin(Edge.Bottom, 100);
+    root.setWidth(100);
+    root.setHeight(100);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(10);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(10);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(10);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(100);
+    expect(root.getComputedHeight()).toBe(100);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(100);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(0);
+
+    expect(root_child1.getComputedLeft()).toBe(0);
+    expect(root_child1.getComputedTop()).toBe(100);
+    expect(root_child1.getComputedWidth()).toBe(10);
+    expect(root_child1.getComputedHeight()).toBe(0);
+
+    expect(root_child2.getComputedLeft()).toBe(0);
+    expect(root_child2.getComputedTop()).toBe(100);
+    expect(root_child2.getComputedWidth()).toBe(10);
+    expect(root_child2.getComputedHeight()).toBe(0);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(100);
+    expect(root.getComputedHeight()).toBe(100);
+
+    expect(root_child0.getComputedLeft()).toBe(90);
+    expect(root_child0.getComputedTop()).toBe(100);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(0);
+
+    expect(root_child1.getComputedLeft()).toBe(90);
+    expect(root_child1.getComputedTop()).toBe(100);
+    expect(root_child1.getComputedWidth()).toBe(10);
+    expect(root_child1.getComputedHeight()).toBe(0);
+
+    expect(root_child2.getComputedLeft()).toBe(90);
+    expect(root_child2.getComputedTop()).toBe(100);
+    expect(root_child2.getComputedWidth()).toBe(10);
+    expect(root_child2.getComputedHeight()).toBe(0);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});