Fix flex-end/flex-start RTL transpilation

Summary: Oops, when regexing start->left/right end->left/right I did not take into account flex-start and flex-end. Easiest solution is to regex back flex-left and flex-right into their correct values.

Reviewed By: lucasr

Differential Revision: D3930244

fbshipit-source-id: 20742cbc8e5f23af694e14584c7c3df89526876e

gentest/gentest.js

@@ -69,7 +69,12 @@ function printTest(LTRContainer, RTLContainer, genericContainer) {
   for (var i = 0; i < genericLayoutTree.length; i++) {
     lines.push('TEST(CSSLayoutTest, ' + genericLayoutTree[i].name + ') {');
 
-    lines.push('  ' + setupTestTree(LTRLayoutTree[i], genericLayoutTree[i], 'root', null).reduce(function(curr, prev) {
+    lines.push('  ' + setupTestTree(
+        undefined,
+        LTRLayoutTree[i],
+        genericLayoutTree[i],
+        'root',
+        null).reduce(function(curr, prev) {
       return curr + '\n  ' + prev;
     }));
 
@@ -112,7 +117,7 @@ function assertTestTree(node, nodeName, parentName) {
   return lines;
 }
 
-function setupTestTree(node, genericNode, nodeName, parentName, index) {
+function setupTestTree(parent, node, genericNode, nodeName, parentName, index) {
   var lines = [
     'const CSSNodeRef ' + nodeName + ' = CSSNodeNew();',
   ];
@@ -154,15 +159,18 @@ function setupTestTree(node, genericNode, nodeName, parentName, index) {
               alignValue(node.style[style]) + ');');
           break;
         case 'align-self':
-          lines.push('CSSNodeStyleSetAlignSelf(' + nodeName + ', ' +
+          if (!parent || node.style[style] !== parent.style['align-items']) {
-              alignValue(node.style[style]) + ');');
+            lines.push('CSSNodeStyleSetAlignSelf(' + nodeName + ', ' +
+                alignValue(node.style[style]) + ');');
+          }
           break;
         case 'position':
           lines.push('CSSNodeStyleSetPositionType(' + nodeName + ', ' +
               positionValue(node.style[style]) + ');');
           break;
         case 'flex-wrap':
-          lines.push('CSSNodeStyleSetFlexWrap(' + nodeName + ', ' + wrapValue(node.style[style]) + ');');
+          lines.push('CSSNodeStyleSetFlexWrap(' + nodeName + ', ' +
+              wrapValue(node.style[style]) + ');');
           break;
         case 'overflow':
           lines.push('CSSNodeStyleSetOverflow(' + nodeName + ', ' +
@@ -319,6 +327,7 @@ function setupTestTree(node, genericNode, nodeName, parentName, index) {
     var childName = nodeName + '_child' + i;
     lines = lines.concat(
         setupTestTree(
+            node,
             node.children[i],
             genericNode.children[i],
             childName,

gentest/gentest.sh

@@ -7,9 +7,13 @@ RTL_TEST="$(cat $(dirname $0)/test.html)"
 
 LTR_TEST=${LTR_TEST//start/left}
 LTR_TEST=${LTR_TEST//end/right}
+LTR_TEST=${LTR_TEST//flex-left/flex-start}
+LTR_TEST=${LTR_TEST//flex-right/flex-end}
 
 RTL_TEST=${RTL_TEST//start/right}
 RTL_TEST=${RTL_TEST//end/left}
+RTL_TEST=${RTL_TEST//flex-right/flex-start}
+RTL_TEST=${RTL_TEST//flex-left/flex-end}
 
 printf "$(cat $(dirname $0)/test-template.html)" "$LTR_TEST" "$RTL_TEST" "$GENERIC_TEST" > $(dirname $0)/test.html
 open $(dirname $0)/test.html

tests/CSSLayoutAlignContentTest.cpp

@@ -49,6 +49,7 @@
 
 TEST(CSSLayoutTest, align_content_flex_start) {
   const CSSNodeRef root = CSSNodeNew();
+  CSSNodeStyleSetAlignContent(root, CSSAlignFlexStart);
   CSSNodeStyleSetFlexWrap(root, CSSWrapTypeWrap);
   CSSNodeStyleSetWidth(root, 100);
   CSSNodeStyleSetHeight(root, 100);
@@ -144,6 +145,7 @@ TEST(CSSLayoutTest, align_content_flex_start) {
 
 TEST(CSSLayoutTest, align_content_flex_end) {
   const CSSNodeRef root = CSSNodeNew();
+  CSSNodeStyleSetAlignContent(root, CSSAlignFlexEnd);
   CSSNodeStyleSetFlexWrap(root, CSSWrapTypeWrap);
   CSSNodeStyleSetWidth(root, 100);
   CSSNodeStyleSetHeight(root, 100);

tests/CSSLayoutAlignItemsTest.cpp

@@ -71,7 +71,6 @@ TEST(CSSLayoutTest, align_items_center) {
   CSSNodeStyleSetHeight(root, 100);
 
   const CSSNodeRef root_child0 = CSSNodeNew();
-  CSSNodeStyleSetAlignSelf(root_child0, CSSAlignCenter);
   CSSNodeStyleSetWidth(root_child0, 10);
   CSSNodeStyleSetHeight(root_child0, 10);
   CSSNodeInsertChild(root, root_child0, 0);
@@ -102,6 +101,7 @@ TEST(CSSLayoutTest, align_items_center) {
 
 TEST(CSSLayoutTest, align_items_flex_start) {
   const CSSNodeRef root = CSSNodeNew();
+  CSSNodeStyleSetAlignItems(root, CSSAlignFlexStart);
   CSSNodeStyleSetWidth(root, 100);
   CSSNodeStyleSetHeight(root, 100);
 
@@ -136,6 +136,7 @@ TEST(CSSLayoutTest, align_items_flex_start) {
 
 TEST(CSSLayoutTest, align_items_flex_end) {
   const CSSNodeRef root = CSSNodeNew();
+  CSSNodeStyleSetAlignItems(root, CSSAlignFlexEnd);
   CSSNodeStyleSetWidth(root, 100);
   CSSNodeStyleSetHeight(root, 100);
 
@@ -150,7 +151,7 @@ TEST(CSSLayoutTest, align_items_flex_end) {
   ASSERT_EQ(100, CSSNodeLayoutGetWidth(root));
   ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
 
-  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
+  ASSERT_EQ(90, CSSNodeLayoutGetLeft(root_child0));
   ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetWidth(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetHeight(root_child0));
@@ -162,7 +163,7 @@ TEST(CSSLayoutTest, align_items_flex_end) {
   ASSERT_EQ(100, CSSNodeLayoutGetWidth(root));
   ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
 
-  ASSERT_EQ(90, CSSNodeLayoutGetLeft(root_child0));
+  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
   ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetWidth(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetHeight(root_child0));

tests/CSSLayoutAlignSelfTest.cpp

@@ -72,6 +72,7 @@ TEST(CSSLayoutTest, align_self_flex_end) {
   CSSNodeStyleSetHeight(root, 100);
 
   const CSSNodeRef root_child0 = CSSNodeNew();
+  CSSNodeStyleSetAlignSelf(root_child0, CSSAlignFlexEnd);
   CSSNodeStyleSetWidth(root_child0, 10);
   CSSNodeStyleSetHeight(root_child0, 10);
   CSSNodeInsertChild(root, root_child0, 0);
@@ -82,7 +83,7 @@ TEST(CSSLayoutTest, align_self_flex_end) {
   ASSERT_EQ(100, CSSNodeLayoutGetWidth(root));
   ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
 
-  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
+  ASSERT_EQ(90, CSSNodeLayoutGetLeft(root_child0));
   ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetWidth(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetHeight(root_child0));
@@ -94,7 +95,7 @@ TEST(CSSLayoutTest, align_self_flex_end) {
   ASSERT_EQ(100, CSSNodeLayoutGetWidth(root));
   ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
 
-  ASSERT_EQ(90, CSSNodeLayoutGetLeft(root_child0));
+  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
   ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetWidth(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetHeight(root_child0));
@@ -106,6 +107,7 @@ TEST(CSSLayoutTest, align_self_flex_start) {
   CSSNodeStyleSetHeight(root, 100);
 
   const CSSNodeRef root_child0 = CSSNodeNew();
+  CSSNodeStyleSetAlignSelf(root_child0, CSSAlignFlexStart);
   CSSNodeStyleSetWidth(root_child0, 10);
   CSSNodeStyleSetHeight(root_child0, 10);
   CSSNodeInsertChild(root, root_child0, 0);
@@ -136,10 +138,12 @@ TEST(CSSLayoutTest, align_self_flex_start) {
 
 TEST(CSSLayoutTest, align_self_flex_end_override_flex_start) {
   const CSSNodeRef root = CSSNodeNew();
+  CSSNodeStyleSetAlignItems(root, CSSAlignFlexStart);
   CSSNodeStyleSetWidth(root, 100);
   CSSNodeStyleSetHeight(root, 100);
 
   const CSSNodeRef root_child0 = CSSNodeNew();
+  CSSNodeStyleSetAlignSelf(root_child0, CSSAlignFlexEnd);
   CSSNodeStyleSetWidth(root_child0, 10);
   CSSNodeStyleSetHeight(root_child0, 10);
   CSSNodeInsertChild(root, root_child0, 0);
@@ -150,7 +154,7 @@ TEST(CSSLayoutTest, align_self_flex_end_override_flex_start) {
   ASSERT_EQ(100, CSSNodeLayoutGetWidth(root));
   ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
 
-  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
+  ASSERT_EQ(90, CSSNodeLayoutGetLeft(root_child0));
   ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetWidth(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetHeight(root_child0));
@@ -162,7 +166,7 @@ TEST(CSSLayoutTest, align_self_flex_end_override_flex_start) {
   ASSERT_EQ(100, CSSNodeLayoutGetWidth(root));
   ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
 
-  ASSERT_EQ(90, CSSNodeLayoutGetLeft(root_child0));
+  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
   ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetWidth(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetHeight(root_child0));

tests/CSSLayoutJustifyContentTest.cpp

@@ -140,6 +140,7 @@ TEST(CSSLayoutTest, justify_content_row_flex_start) {
 TEST(CSSLayoutTest, justify_content_row_flex_end) {
   const CSSNodeRef root = CSSNodeNew();
   CSSNodeStyleSetFlexDirection(root, CSSFlexDirectionRow);
+  CSSNodeStyleSetJustifyContent(root, CSSJustifyFlexEnd);
   CSSNodeStyleSetWidth(root, 102);
   CSSNodeStyleSetHeight(root, 102);
 
@@ -161,17 +162,17 @@ TEST(CSSLayoutTest, justify_content_row_flex_end) {
   ASSERT_EQ(102, CSSNodeLayoutGetWidth(root));
   ASSERT_EQ(102, CSSNodeLayoutGetHeight(root));
 
-  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
+  ASSERT_EQ(72, CSSNodeLayoutGetLeft(root_child0));
   ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetWidth(root_child0));
   ASSERT_EQ(102, CSSNodeLayoutGetHeight(root_child0));
 
-  ASSERT_EQ(10, CSSNodeLayoutGetLeft(root_child1));
+  ASSERT_EQ(82, CSSNodeLayoutGetLeft(root_child1));
   ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child1));
   ASSERT_EQ(10, CSSNodeLayoutGetWidth(root_child1));
   ASSERT_EQ(102, CSSNodeLayoutGetHeight(root_child1));
 
-  ASSERT_EQ(20, CSSNodeLayoutGetLeft(root_child2));
+  ASSERT_EQ(92, CSSNodeLayoutGetLeft(root_child2));
   ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child2));
   ASSERT_EQ(10, CSSNodeLayoutGetWidth(root_child2));
   ASSERT_EQ(102, CSSNodeLayoutGetHeight(root_child2));
@@ -183,17 +184,17 @@ TEST(CSSLayoutTest, justify_content_row_flex_end) {
   ASSERT_EQ(102, CSSNodeLayoutGetWidth(root));
   ASSERT_EQ(102, CSSNodeLayoutGetHeight(root));
 
-  ASSERT_EQ(92, CSSNodeLayoutGetLeft(root_child0));
+  ASSERT_EQ(20, CSSNodeLayoutGetLeft(root_child0));
   ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetWidth(root_child0));
   ASSERT_EQ(102, CSSNodeLayoutGetHeight(root_child0));
 
-  ASSERT_EQ(82, CSSNodeLayoutGetLeft(root_child1));
+  ASSERT_EQ(10, CSSNodeLayoutGetLeft(root_child1));
   ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child1));
   ASSERT_EQ(10, CSSNodeLayoutGetWidth(root_child1));
   ASSERT_EQ(102, CSSNodeLayoutGetHeight(root_child1));
 
-  ASSERT_EQ(72, CSSNodeLayoutGetLeft(root_child2));
+  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child2));
   ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child2));
   ASSERT_EQ(10, CSSNodeLayoutGetWidth(root_child2));
   ASSERT_EQ(102, CSSNodeLayoutGetHeight(root_child2));
@@ -450,6 +451,7 @@ TEST(CSSLayoutTest, justify_content_column_flex_start) {
 
 TEST(CSSLayoutTest, justify_content_column_flex_end) {
   const CSSNodeRef root = CSSNodeNew();
+  CSSNodeStyleSetJustifyContent(root, CSSJustifyFlexEnd);
   CSSNodeStyleSetWidth(root, 102);
   CSSNodeStyleSetHeight(root, 102);
 
@@ -472,17 +474,17 @@ TEST(CSSLayoutTest, justify_content_column_flex_end) {
   ASSERT_EQ(102, CSSNodeLayoutGetHeight(root));
 
   ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
-  ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
+  ASSERT_EQ(72, CSSNodeLayoutGetTop(root_child0));
   ASSERT_EQ(102, CSSNodeLayoutGetWidth(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetHeight(root_child0));
 
   ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child1));
-  ASSERT_EQ(10, CSSNodeLayoutGetTop(root_child1));
+  ASSERT_EQ(82, CSSNodeLayoutGetTop(root_child1));
   ASSERT_EQ(102, CSSNodeLayoutGetWidth(root_child1));
   ASSERT_EQ(10, CSSNodeLayoutGetHeight(root_child1));
 
   ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child2));
-  ASSERT_EQ(20, CSSNodeLayoutGetTop(root_child2));
+  ASSERT_EQ(92, CSSNodeLayoutGetTop(root_child2));
   ASSERT_EQ(102, CSSNodeLayoutGetWidth(root_child2));
   ASSERT_EQ(10, CSSNodeLayoutGetHeight(root_child2));
 
@@ -494,17 +496,17 @@ TEST(CSSLayoutTest, justify_content_column_flex_end) {
   ASSERT_EQ(102, CSSNodeLayoutGetHeight(root));
 
   ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
-  ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
+  ASSERT_EQ(72, CSSNodeLayoutGetTop(root_child0));
   ASSERT_EQ(102, CSSNodeLayoutGetWidth(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetHeight(root_child0));
 
   ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child1));
-  ASSERT_EQ(10, CSSNodeLayoutGetTop(root_child1));
+  ASSERT_EQ(82, CSSNodeLayoutGetTop(root_child1));
   ASSERT_EQ(102, CSSNodeLayoutGetWidth(root_child1));
   ASSERT_EQ(10, CSSNodeLayoutGetHeight(root_child1));
 
   ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child2));
-  ASSERT_EQ(20, CSSNodeLayoutGetTop(root_child2));
+  ASSERT_EQ(92, CSSNodeLayoutGetTop(root_child2));
   ASSERT_EQ(102, CSSNodeLayoutGetWidth(root_child2));
   ASSERT_EQ(10, CSSNodeLayoutGetHeight(root_child2));
 }

tests/CSSLayoutMarginTest.cpp

@@ -129,6 +129,7 @@ TEST(CSSLayoutTest, margin_top) {
 TEST(CSSLayoutTest, margin_end) {
   const CSSNodeRef root = CSSNodeNew();
   CSSNodeStyleSetFlexDirection(root, CSSFlexDirectionRow);
+  CSSNodeStyleSetJustifyContent(root, CSSJustifyFlexEnd);
   CSSNodeStyleSetWidth(root, 100);
   CSSNodeStyleSetHeight(root, 100);
 
@@ -143,7 +144,7 @@ TEST(CSSLayoutTest, margin_end) {
   ASSERT_EQ(100, CSSNodeLayoutGetWidth(root));
   ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
 
-  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
+  ASSERT_EQ(80, CSSNodeLayoutGetLeft(root_child0));
   ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetWidth(root_child0));
   ASSERT_EQ(100, CSSNodeLayoutGetHeight(root_child0));
@@ -155,7 +156,7 @@ TEST(CSSLayoutTest, margin_end) {
   ASSERT_EQ(100, CSSNodeLayoutGetWidth(root));
   ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
 
-  ASSERT_EQ(90, CSSNodeLayoutGetLeft(root_child0));
+  ASSERT_EQ(10, CSSNodeLayoutGetLeft(root_child0));
   ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetWidth(root_child0));
   ASSERT_EQ(100, CSSNodeLayoutGetHeight(root_child0));
@@ -163,6 +164,7 @@ TEST(CSSLayoutTest, margin_end) {
 
 TEST(CSSLayoutTest, margin_bottom) {
   const CSSNodeRef root = CSSNodeNew();
+  CSSNodeStyleSetJustifyContent(root, CSSJustifyFlexEnd);
   CSSNodeStyleSetWidth(root, 100);
   CSSNodeStyleSetHeight(root, 100);
 
@@ -178,7 +180,7 @@ TEST(CSSLayoutTest, margin_bottom) {
   ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
 
   ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
-  ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
+  ASSERT_EQ(80, CSSNodeLayoutGetTop(root_child0));
   ASSERT_EQ(100, CSSNodeLayoutGetWidth(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetHeight(root_child0));
 
@@ -190,7 +192,7 @@ TEST(CSSLayoutTest, margin_bottom) {
   ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
 
   ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
-  ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
+  ASSERT_EQ(80, CSSNodeLayoutGetTop(root_child0));
   ASSERT_EQ(100, CSSNodeLayoutGetWidth(root_child0));
   ASSERT_EQ(10, CSSNodeLayoutGetHeight(root_child0));
 }