Impl of content box

Summary:
box sizing is really just a reinterpretation of what length properties (like `width`, `height`, `max-width`, etc) mean. So to implement this I just add the border and padding if we are in content box when we ask for any of these properties. All the math that gets done by the algorithm is still in border box land, and the layout we return is to be interpreted as the border box (this is actually the expected behavior per https://drafts.csswg.org/css-sizing/#box-sizing). This makes this implementation pretty simple actually.

Chnagelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D63416833

gentest/fixtures/YGBoxSizingTest.html

@@ -1,36 +1,36 @@
-<div data-disabled="true" id="box_sizing_content_box"
+<div id="box_sizing_content_box_simple"
   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"
+<div 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"
+<div 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"
+<div 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"
+<div 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>
@@ -46,7 +46,7 @@
   <div style="width: 25px; height: 25px"></div>
 </div>
 
-<div data-disabled="true" id="box_sizing_content_box_siblings" style="width: 100px; height: 100px;">
+<div 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>
@@ -60,7 +60,7 @@
   <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 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>
@@ -70,7 +70,7 @@
   <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 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>
@@ -80,7 +80,7 @@
   <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 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>
@@ -90,7 +90,7 @@
   <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 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>
@@ -100,7 +100,7 @@
   <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 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>
@@ -110,7 +110,7 @@
   </div>
 </div>
 
-<div data-disabled="true" id="box_sizing_content_box_nested"
+<div 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>
@@ -124,7 +124,7 @@
   </div>
 </div>
 
-<div data-disabled="true" id="box_sizing_content_box_nested_alternating"
+<div 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">
@@ -134,7 +134,7 @@
   </div>
 </div>
 
-<div data-disabled="true" id="box_sizing_border_box_nested_alternating"
+<div 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">

java/tests/generated/com/facebook/yoga/YGBoxSizingTest.java

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<84bb16d1a7ae39fb8f159ee58baef4c2>>
+ * @generated SignedSource<<c57cfea6c33a34e2a67a855138e9833b>>
  * generated by gentest/gentest-driver.ts from gentest/fixtures/YGBoxSizingTest.html
  */
 
@@ -28,8 +28,7 @@ public static Iterable<TestParametrization.NodeFactory> nodeFactories() {
   @Parameterized.Parameter public TestParametrization.NodeFactory mNodeFactory;
 
   @Test
-  @Ignore
-  public void test_box_sizing_content_box() {
+  public void test_box_sizing_content_box_simple() {
     YogaConfig config = YogaConfigFactory.create();
 
     final YogaNode root = createNode(config);
@@ -96,7 +95,6 @@ public void test_box_sizing_border_box() {
   }
 
   @Test
-  @Ignore
   public void test_box_sizing_content_box_padding_only() {
     YogaConfig config = YogaConfigFactory.create();
 
@@ -156,7 +154,6 @@ public void test_box_sizing_border_box_padding_only() {
   }
 
   @Test
-  @Ignore
   public void test_box_sizing_content_box_border_only() {
     YogaConfig config = YogaConfigFactory.create();
 
@@ -216,7 +213,6 @@ public void test_box_sizing_border_box_border_only() {
   }
 
   @Test
-  @Ignore
   public void test_box_sizing_content_box_no_padding_no_border() {
     YogaConfig config = YogaConfigFactory.create();
 
@@ -268,7 +264,6 @@ public void test_box_sizing_border_box_no_padding_no_border() {
   }
 
   @Test
-  @Ignore
   public void test_box_sizing_content_box_children() {
     YogaConfig config = YogaConfigFactory.create();
 
@@ -456,7 +451,6 @@ public void test_box_sizing_border_box_children() {
   }
 
   @Test
-  @Ignore
   public void test_box_sizing_content_box_siblings() {
     YogaConfig config = YogaConfigFactory.create();
 
@@ -644,7 +638,6 @@ public void test_box_sizing_border_box_siblings() {
   }
 
   @Test
-  @Ignore
   public void test_box_sizing_content_box_max_width() {
     YogaConfig config = YogaConfigFactory.create();
 
@@ -772,7 +765,6 @@ public void test_box_sizing_border_box_max_width() {
   }
 
   @Test
-  @Ignore
   public void test_box_sizing_content_box_max_height() {
     YogaConfig config = YogaConfigFactory.create();
 
@@ -900,7 +892,6 @@ public void test_box_sizing_border_box_max_height() {
   }
 
   @Test
-  @Ignore
   public void test_box_sizing_content_box_min_width() {
     YogaConfig config = YogaConfigFactory.create();
 
@@ -1028,7 +1019,6 @@ public void test_box_sizing_border_box_min_width() {
   }
 
   @Test
-  @Ignore
   public void test_box_sizing_content_box_min_height() {
     YogaConfig config = YogaConfigFactory.create();
 
@@ -1156,7 +1146,6 @@ public void test_box_sizing_border_box_min_height() {
   }
 
   @Test
-  @Ignore
   public void test_box_sizing_content_box_no_height_no_width() {
     YogaConfig config = YogaConfigFactory.create();
 
@@ -1250,7 +1239,6 @@ public void test_box_sizing_border_box_no_height_no_width() {
   }
 
   @Test
-  @Ignore
   public void test_box_sizing_content_box_nested() {
     YogaConfig config = YogaConfigFactory.create();
 
@@ -1412,7 +1400,6 @@ public void test_box_sizing_border_box_nested() {
   }
 
   @Test
-  @Ignore
   public void test_box_sizing_content_box_nested_alternating() {
     YogaConfig config = YogaConfigFactory.create();
 
@@ -1517,7 +1504,6 @@ public void test_box_sizing_content_box_nested_alternating() {
   }
 
   @Test
-  @Ignore
   public void test_box_sizing_border_box_nested_alternating() {
     YogaConfig config = YogaConfigFactory.create();
 

javascript/tests/generated/YGBoxSizingTest.test.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<40a2a45449f152b9c1f91adfc46ac6df>>
+ * @generated SignedSource<<5ce4b1bc764d2bf325b844053b98134e>>
  * generated by gentest/gentest-driver.ts from gentest/fixtures/YGBoxSizingTest.html
  */
 
@@ -28,7 +28,7 @@ import {
   Wrap,
 } from 'yoga-layout';
 
-test.skip('box_sizing_content_box', () => {
+test('box_sizing_content_box_simple', () => {
   const config = Yoga.Config.create();
   let root;
 
@@ -105,7 +105,7 @@ test('box_sizing_border_box', () => {
     config.free();
   }
 });
-test.skip('box_sizing_content_box_padding_only', () => {
+test('box_sizing_content_box_padding_only', () => {
   const config = Yoga.Config.create();
   let root;
 
@@ -174,7 +174,7 @@ test('box_sizing_border_box_padding_only', () => {
     config.free();
   }
 });
-test.skip('box_sizing_content_box_border_only', () => {
+test('box_sizing_content_box_border_only', () => {
   const config = Yoga.Config.create();
   let root;
 
@@ -243,7 +243,7 @@ test('box_sizing_border_box_border_only', () => {
     config.free();
   }
 });
-test.skip('box_sizing_content_box_no_padding_no_border', () => {
+test('box_sizing_content_box_no_padding_no_border', () => {
   const config = Yoga.Config.create();
   let root;
 
@@ -304,7 +304,7 @@ test('box_sizing_border_box_no_padding_no_border', () => {
     config.free();
   }
 });
-test.skip('box_sizing_content_box_children', () => {
+test('box_sizing_content_box_children', () => {
   const config = Yoga.Config.create();
   let root;
 
@@ -501,7 +501,7 @@ test('box_sizing_border_box_children', () => {
     config.free();
   }
 });
-test.skip('box_sizing_content_box_siblings', () => {
+test('box_sizing_content_box_siblings', () => {
   const config = Yoga.Config.create();
   let root;
 
@@ -698,7 +698,7 @@ test('box_sizing_border_box_siblings', () => {
     config.free();
   }
 });
-test.skip('box_sizing_content_box_max_width', () => {
+test('box_sizing_content_box_max_width', () => {
   const config = Yoga.Config.create();
   let root;
 
@@ -835,7 +835,7 @@ test('box_sizing_border_box_max_width', () => {
     config.free();
   }
 });
-test.skip('box_sizing_content_box_max_height', () => {
+test('box_sizing_content_box_max_height', () => {
   const config = Yoga.Config.create();
   let root;
 
@@ -972,7 +972,7 @@ test('box_sizing_border_box_max_height', () => {
     config.free();
   }
 });
-test.skip('box_sizing_content_box_min_width', () => {
+test('box_sizing_content_box_min_width', () => {
   const config = Yoga.Config.create();
   let root;
 
@@ -1109,7 +1109,7 @@ test('box_sizing_border_box_min_width', () => {
     config.free();
   }
 });
-test.skip('box_sizing_content_box_min_height', () => {
+test('box_sizing_content_box_min_height', () => {
   const config = Yoga.Config.create();
   let root;
 
@@ -1246,7 +1246,7 @@ test('box_sizing_border_box_min_height', () => {
     config.free();
   }
 });
-test.skip('box_sizing_content_box_no_height_no_width', () => {
+test('box_sizing_content_box_no_height_no_width', () => {
   const config = Yoga.Config.create();
   let root;
 
@@ -1349,7 +1349,7 @@ test('box_sizing_border_box_no_height_no_width', () => {
     config.free();
   }
 });
-test.skip('box_sizing_content_box_nested', () => {
+test('box_sizing_content_box_nested', () => {
   const config = Yoga.Config.create();
   let root;
 
@@ -1520,7 +1520,7 @@ test('box_sizing_border_box_nested', () => {
     config.free();
   }
 });
-test.skip('box_sizing_content_box_nested_alternating', () => {
+test('box_sizing_content_box_nested_alternating', () => {
   const config = Yoga.Config.create();
   let root;
 
@@ -1629,7 +1629,7 @@ test.skip('box_sizing_content_box_nested_alternating', () => {
     config.free();
   }
 });
-test.skip('box_sizing_border_box_nested_alternating', () => {
+test('box_sizing_border_box_nested_alternating', () => {
   const config = Yoga.Config.create();
   let root;