facebook · joevilches · Sep 25, 2024 · Sep 25, 2024 · Sep 25, 2024
diff --git a/enums.py b/enums.py
@@ -4,7 +4,6 @@
 # This source code is licensed under the MIT license found in the
 # LICENSE file in the root directory of this source tree.
 
-import math
 import os
 
 ENUMS = {
@@ -34,6 +33,7 @@
     "PositionType": ["Static", "Relative", "Absolute"],
     "Display": ["Flex", "None"],
     "Wrap": ["NoWrap", "Wrap", "WrapReverse"],
+    "BoxSizing": ["ContentBox", "BorderBox"],
     "MeasureMode": ["Undefined", "Exactly", "AtMost"],
     "Dimension": ["Width", "Height"],
     "Edge": [

diff --git a/gentest/fixtures/YGBoxSizingTest.html b/gentest/fixtures/YGBoxSizingTest.html
@@ -0,0 +1,145 @@
+<div data-disabled="true" id="box_sizing_content_box"
+  style="width: 100px; height: 100px; padding: 5px; border-width: 10px; box-sizing: content-box">
+</div>
+
+<div id="box_sizing_border_box"
+  style="width: 100px; height: 100px; padding: 5px; border-width: 10px; box-sizing: border-box">
+</div>
+
+<div data-disabled="true" id="box_sizing_content_box_padding_only"
+  style="width: 100px; height: 100px; padding: 5px; box-sizing: content-box">
+</div>
+
+<div id="box_sizing_border_box_padding_only"
+  style="width: 100px; height: 100px; padding: 5px; box-sizing: border-box">
+</div>
+
+<div data-disabled="true" id="box_sizing_content_box_border_only"
+  style="width: 100px; height: 100px; border-width: 10px; box-sizing: content-box">
+</div>
+
+<div id="box_sizing_border_box_border_only"
+  style="width: 100px; height: 100px; border-width: 10px; box-sizing: border-box">
+</div>
+
+<div data-disabled="true" id="box_sizing_content_box_no_padding_no_border"
+  style="width: 100px; height: 100px; box-sizing: content-box">
+</div>
+
+<div id="box_sizing_border_box_no_padding_no_border"
+  style="width: 100px; height: 100px; box-sizing: border-box">
+</div>
+
+<div data-disabled="true" id="box_sizing_content_box_children"
+  style="width: 100px; height: 100px; padding: 5px; border-width: 10px; box-sizing: content-box">
+  <div style="width: 25px; height: 25px"></div>
+  <div style="width: 25px; height: 25px"></div>
+  <div style="width: 25px; height: 25px"></div>
+  <div style="width: 25px; height: 25px"></div>
+</div>
+
+<div id="box_sizing_border_box_children"
+  style="width: 100px; height: 100px; padding: 5px; border-width: 10px; box-sizing: border-box">
+  <div style="width: 25px; height: 25px"></div>
+  <div style="width: 25px; height: 25px"></div>
+  <div style="width: 25px; height: 25px"></div>
+  <div style="width: 25px; height: 25px"></div>
+</div>
+
+<div data-disabled="true" id="box_sizing_content_box_siblings" style="width: 100px; height: 100px;">
+  <div style="width: 25px; height: 25px"></div>
+  <div style="width: 25px; height: 25px; box-sizing: content-box; padding: 10px; border-width: 10px"></div>
+  <div style="width: 25px; height: 25px"></div>
+  <div style="width: 25px; height: 25px"></div>
+</div>
+
+<div id="box_sizing_border_box_siblings" style="width: 100px; height: 100px;">
+  <div style="width: 25px; height: 25px"></div>
+  <div style="width: 25px; height: 25px; box-sizing: border-box; padding: 10px; border-width: 10px"></div>
+  <div style="width: 25px; height: 25px"></div>
+  <div style="width: 25px; height: 25px"></div>
+</div>
+
+<div data-disabled="true" id="box_sizing_content_box_max_width" style="width: 100px; height: 100px;">
+  <div style="max-width: 50px; height: 25px; box-sizing: content-box; padding: 5px; border-width: 15px"></div>
+  <div style="width: 25px; height: 25px"></div>
+</div>
+
+<div id="box_sizing_border_box_max_width" style="width: 100px; height: 100px;">
+  <div style="max-width: 50px; height: 25px; box-sizing: border-box; padding: 5px; border-width: 15px"></div>
+  <div style="width: 25px; height: 25px"></div>
+</div>
+
+<div data-disabled="true" id="box_sizing_content_box_max_height" style="width: 100px; height: 100px;">
+  <div style="width: 50px; max-height: 50px; box-sizing: content-box; padding: 5px; border-width: 15px"></div>
+  <div style="width: 25px; height: 25px"></div>
+</div>
+
+<div id="box_sizing_border_box_max_height" style="width: 100px; height: 100px;">
+  <div style="width: 50px; max-height: 50px; box-sizing: border-box; padding: 5px; border-width: 15px"></div>
+  <div style="width: 25px; height: 25px"></div>
+</div>
+
+<div data-disabled="true" id="box_sizing_content_box_min_width" style="width: 100px; height: 100px;">
+  <div style="min-width: 50px; height: 25px; box-sizing: content-box; padding: 5px; border-width: 15px"></div>
+  <div style="width: 25px; height: 25px"></div>
+</div>
+
+<div id="box_sizing_border_box_min_width" style="width: 100px; height: 100px;">
+  <div style="min-width: 50px; height: 25px; box-sizing: border-box; padding: 5px; border-width: 15px"></div>
+  <div style="width: 25px; height: 25px"></div>
+</div>
+
+<div data-disabled="true" id="box_sizing_content_box_min_height" style="width: 100px; height: 100px;">
+  <div style="width: 50px; min-height: 50px; box-sizing: content-box; padding: 5px; border-width: 15px"></div>
+  <div style="width: 25px; height: 25px"></div>
+</div>
+
+<div id="box_sizing_border_box_min_height" style="width: 100px; height: 100px;">
+  <div style="width: 50px; min-height: 50px; box-sizing: border-box; padding: 5px; border-width: 15px"></div>
+  <div style="width: 25px; height: 25px"></div>
+</div>
+
+<div data-disabled="true" id="box_sizing_content_box_no_height_no_width" style="width: 100px; height: 100px;">
+  <div style="box-sizing: content-box; padding: 2px; border-width: 7px">
+  </div>
+</div>
+
+<div id="box_sizing_border_box_no_height_no_width" style="width: 100px; height: 100px;">
+  <div style="box-sizing: border-box; padding: 2px; border-width: 7px">
+  </div>
+</div>
+
+<div data-disabled="true" id="box_sizing_content_box_nested"
+  style="width: 100px; height: 100px; box-sizing: content-box; padding: 15px; border-width: 3px;">
+  <div style="width: 20px; height: 20px; box-sizing: content-box; padding: 2px; border-width: 7px">
+    <div style="width: 10px; height: 5px; box-sizing: content-box; padding: 1px; border-width: 2px"></div>
+  </div>
+</div>
+
+<div id="box_sizing_border_box_nested"
+  style="width: 100px; height: 100px; box-sizing: border-box; padding: 15px; border-width: 3px;">
+  <div style="width: 20px; height: 20px; box-sizing: border-box; padding: 2px; border-width: 7px">
+    <div style="width: 10px; height: 5px; box-sizing: border-box; padding: 1px; border-width: 2px"></div>
+  </div>
+</div>
+
+<div data-disabled="true" id="box_sizing_content_box_nested_alternating"
+  style="width: 100px; height: 100px; box-sizing: content-box; padding: 3px; border-width: 2px;">
+  <div style="width: 40px; height: 40px; box-sizing: border-box; padding: 8px; border-width: 2px">
+    <div style="width: 20px; height: 25px; box-sizing: content-box; padding: 3px; border-width: 6px">
+      <div style="width: 10px; height: 5px; box-sizing: border-box; padding: 1px; border-width: 1px">
+      </div>
+    </div>
+  </div>
+</div>
+
+<div data-disabled="true" id="box_sizing_border_box_nested_alternating"
+  style="width: 100px; height: 100px; box-sizing: border-box; padding: 3px; border-width: 2px;">
+  <div style="width: 40px; height: 40px; box-sizing: content-box; padding: 8px; border-width: 2px">
+    <div style="width: 20px; height: 25px; box-sizing: border-box; padding: 3px; border-width: 6px">
+      <div style="width: 10px; height: 5px; box-sizing: content-box; padding: 1px; border-width: 1px">
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/gentest/gentest-cpp.js b/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}");`);

diff --git a/gentest/gentest-java.js b/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}");`);

diff --git a/gentest/gentest-javascript.js b/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(

diff --git a/gentest/gentest.js b/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);

diff --git a/java/com/facebook/yoga/YogaBoxSizing.java b/java/com/facebook/yoga/YogaBoxSizing.java
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @generated by enums.py
+
+package com.facebook.yoga;
+
+public enum YogaBoxSizing {
+  CONTENT_BOX(0),
+  BORDER_BOX(1);
+
+  private final int mIntValue;
+
+  YogaBoxSizing(int intValue) {
+    mIntValue = intValue;
+  }
+
+  public int intValue() {
+    return mIntValue;
+  }
+
+  public static YogaBoxSizing fromInt(int value) {
+    switch (value) {
+      case 0: return CONTENT_BOX;
+      case 1: return BORDER_BOX;
+      default: throw new IllegalArgumentException("Unknown enum value: " + value);
+    }
+  }
+}
diff --git a/java/com/facebook/yoga/YogaNative.java b/java/com/facebook/yoga/YogaNative.java
@@ -56,6 +56,8 @@ public class YogaNative {
   static native void jni_YGNodeStyleSetAlignContentJNI(long nativePointer, int alignContent);
   static native int jni_YGNodeStyleGetPositionTypeJNI(long nativePointer);
   static native void jni_YGNodeStyleSetPositionTypeJNI(long nativePointer, int positionType);
+  static native int jni_YGNodeStyleGetBoxSizingJNI(long nativePointer);
+  static native void jni_YGNodeStyleSetBoxSizingJNI(long nativePointer, int boxSizing);
   static native int jni_YGNodeStyleGetFlexWrapJNI(long nativePointer);
   static native void jni_YGNodeStyleSetFlexWrapJNI(long nativePointer, int wrapType);
   static native int jni_YGNodeStyleGetOverflowJNI(long nativePointer);

diff --git a/java/com/facebook/yoga/YogaNode.java b/java/com/facebook/yoga/YogaNode.java
@@ -88,6 +88,10 @@ public interface Inputs {
 
   public abstract void setPositionType(YogaPositionType positionType);
 
+  public abstract YogaBoxSizing getBoxSizing();
+
+  public abstract void setBoxSizing(YogaBoxSizing boxSizing);
+
   public abstract YogaWrap getWrap();
 
   public abstract void setWrap(YogaWrap flexWrap);

diff --git a/java/com/facebook/yoga/YogaNodeJNIBase.java b/java/com/facebook/yoga/YogaNodeJNIBase.java
@@ -299,6 +299,14 @@ public void setPositionType(YogaPositionType positionType) {
     YogaNative.jni_YGNodeStyleSetPositionTypeJNI(mNativePointer, positionType.intValue());
   }
 
+  public YogaBoxSizing getBoxSizing() {
+    return YogaBoxSizing.fromInt(YogaNative.jni_YGNodeStyleGetBoxSizingJNI(mNativePointer));
+  }
+
+  public void setBoxSizing(YogaBoxSizing boxSizing) {
+    YogaNative.jni_YGNodeStyleSetBoxSizingJNI(mNativePointer, boxSizing.intValue());
+  }
+
   public YogaWrap getWrap() {
     return YogaWrap.fromInt(YogaNative.jni_YGNodeStyleGetFlexWrapJNI(mNativePointer));
   }

diff --git a/java/com/facebook/yoga/YogaProps.java b/java/com/facebook/yoga/YogaProps.java
@@ -105,6 +105,8 @@ public interface YogaProps {
 
   void setBaselineFunction(YogaBaselineFunction yogaBaselineFunction);
 
+  void setBoxSizing(YogaBoxSizing boxSizing);
+
   /* Getters */
 
   YogaValue getWidth();
@@ -148,4 +150,6 @@ public interface YogaProps {
   YogaValue getPosition(YogaEdge edge);
 
   float getBorder(YogaEdge edge);
+
+  YogaBoxSizing getBoxSizing();
 }