Update gentest to account for box sizing (#1700)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1700

tsia, need to teach gentest to write box sizing now.

Reviewed By: NickGerleman

Differential Revision: D63138372

fbshipit-source-id: 29072b3e602fe77edb14a8857a83e5bba4c92205

gentest/fixtures/YGBoxSizingTest.html

@@ -0,0 +1,3 @@
+<div data-disabled="true" id="box_sizing_content_box"
+  style="width: 100px; height: 100px; padding: 5px; border-width: 10px; box-sizing: content-box">
+</div>

gentest/gentest-cpp.js

@@ -136,6 +136,9 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
   YGWrapWrap: {value: 'YGWrapWrap'},
   YGWrapWrapReverse: {value: 'YGWrapWrapReverse'},
 
+  YGBoxSizingBorderBox: {value: 'YGBoxSizingBorderBox'},
+  YGBoxSizingContentBox: {value: 'YGBoxSizingContentBox'},
+
   YGUndefined: {value: 'YGUndefined'},
 
   YGDisplayFlex: {value: 'YGDisplayFlex'},
@@ -512,6 +515,14 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
     },
   },
 
+  YGNodeStyleSetBoxSizing: {
+    value: function (nodeName, value) {
+      this.push(
+        'YGNodeStyleSetBoxSizing(' + nodeName + ', ' + toValueCpp(value) + ');',
+      );
+    },
+  },
+
   YGNodeSetMeasureFunc: {
     value: function (nodeName, innerText) {
       this.push(`YGNodeSetContext(${nodeName}, (void*)"${innerText}");`);

gentest/gentest-java.js

@@ -184,6 +184,9 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
   YGWrapWrap: {value: 'YogaWrap.WRAP'},
   YGWrapWrapReverse: {value: 'YogaWrap.WRAP_REVERSE'},
 
+  YGBoxSizingBorderBox: {value: 'YogaBoxSizing.BORDER_BOX'},
+  YGBoxSizingContentBox: {value: 'YogaBoxSizing.CONTENT_BOX'},
+
   YGNodeCalculateLayout: {
     value: function (node, dir, _experiments) {
       this.push(node + '.setDirection(' + dir + ');');
@@ -473,6 +476,12 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
     },
   },
 
+  YGNodeStyleSetBoxSizing: {
+    value: function (nodeName, value) {
+      this.push(nodeName + '.setBoxSizing(' + toValueJava(value) + ');');
+    },
+  },
+
   YGNodeSetMeasureFunc: {
     value: function (nodeName, innerText) {
       this.push(`${nodeName}.setData("${innerText}");`);

gentest/gentest-javascript.js

@@ -30,6 +30,7 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
       this.push('import {');
       this.pushIndent();
       this.push('Align,');
+      this.push('BoxSizing,');
       this.push('Direction,');
       this.push('Display,');
       this.push('Edge,');
@@ -171,6 +172,9 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
   YGDisplayFlex: {value: 'Display.Flex'},
   YGDisplayNone: {value: 'Display.None'},
 
+  YGBoxSizingBorderBox: {value: 'BoxSizing.BorderBox'},
+  YGBoxSizingContentBox: {value: 'BoxSizing.ContentBox'},
+
   YGNodeCalculateLayout: {
     value: function (node, dir, _experiments) {
       this.push(node + '.calculateLayout(undefined, undefined, ' + dir + ');');
@@ -410,6 +414,12 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
     },
   },
 
+  YGNodeStyleSetBoxSizing: {
+    value: function (nodeName, value) {
+      this.push(nodeName + '.setBoxSizing(' + toValueJavascript(value) + ');');
+    },
+  },
+
   YGNodeSetMeasureFunc: {
     value: function (nodeName, innerText) {
       this.push(

gentest/gentest.js

@@ -175,6 +175,7 @@ function checkDefaultValues() {
     {style: 'right', value: 'undefined'},
     {style: 'bottom', value: 'undefined'},
     {style: 'display', value: 'flex'},
+    {style: 'box-sizing', value: 'border-box'},
   ].forEach(item => {
     assert(
       isDefaultStyleValue(item.style, item.value),
@@ -193,7 +194,6 @@ function setupTestTree(
   index,
 ) {
   e.emitTestTreePrologue(nodeName);
-
   for (const style in node.style) {
     // Skip position info for root as it messes up tests
     if (
@@ -207,7 +207,6 @@ function setupTestTree(
     ) {
       continue;
     }
-
     if (!isDefaultStyleValue(style, node.style[style])) {
       switch (style) {
         case 'aspect-ratio':
@@ -520,6 +519,11 @@ function setupTestTree(
         case 'display':
           e.YGNodeStyleSetDisplay(nodeName, displayValue(e, node.style[style]));
           break;
+        case 'box-sizing':
+          e.YGNodeStyleSetBoxSizing(
+            nodeName,
+            boxSizingValue(e, node.style[style]),
+          );
       }
     }
   }
@@ -664,6 +668,15 @@ function displayValue(e, value) {
   }
 }
 
+function boxSizingValue(e, value) {
+  switch (value) {
+    case 'border-box':
+      return e.YGBoxSizingBorderBox;
+    case 'content-box':
+      return e.YGBoxSizingContentBox;
+  }
+}
+
 const DEFAULT_STYLES = new Map();
 
 function isDefaultStyleValue(style, value) {
@@ -782,6 +795,7 @@ function getYogaStyle(node) {
     'row-gap',
     'display',
     'aspect-ratio',
+    'box-sizing',
   ].reduce((map, key) => {
     map[key] =
       node.style[key] || getComputedStyle(node, null).getPropertyValue(key);