Impl of content box (#1711)

Summary:
X-link: https://github.com/facebook/react-native/pull/46741

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

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.

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D63416833

fbshipit-source-id: fd76132cf51e8a5092129802c3a12ab24023018b

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;