From 16c9acdda9a64ededdf5bf70c96eba3690d954c7 Mon Sep 17 00:00:00 2001
From: Joe Vilches <joevilches@meta.com>
Date: Thu, 3 Oct 2024 14:14:56 -0700
Subject: [PATCH] Add RNTester box sizing example and e2e test round 2

Differential Revision: D63844898
---
 .../rn-tester/js/examples/View/ViewExample.js | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js
index f95b48e8562854..2bb0ecff29d709 100644
--- a/packages/rn-tester/js/examples/View/ViewExample.js
+++ b/packages/rn-tester/js/examples/View/ViewExample.js
@@ -668,6 +668,37 @@ function OutlineExample(): React.Node {
   );
 }
 
+function BoxSizingExample(): React.Node {
+  const styles = StyleSheet.create({
+    boxSizingBox: {
+      padding: 5,
+      backgroundColor: 'green',
+      borderWidth: 5,
+      margin: 10,
+      width: 50,
+      height: 25,
+    },
+    boxSizingChild: {
+      backgroundColor: 'red',
+      width: '100%',
+      height: '100%',
+    },
+  });
+
+  return (
+    <View testID={'view-test-box-sizing'}>
+      <Text>Content box 50x25</Text>
+      <View style={[styles.boxSizingBox, {boxSizing: 'content-box'}]}>
+        <View style={styles.boxSizingChild} />
+      </View>
+      <Text>Border box 50x25</Text>
+      <View style={[styles.boxSizingBox, {boxSizing: 'border-box'}]}>
+        <View style={styles.boxSizingChild} />
+      </View>
+    </View>
+  );
+}
+
 export default ({
   title: 'View',
   documentationURL: 'https://reactnative.dev/docs/view',
@@ -1312,5 +1343,10 @@ export default ({
       name: 'outline',
       render: OutlineExample,
     },
+    {
+      title: 'Box Sizing',
+      name: 'box-sizing',
+      render: BoxSizingExample,
+    },
   ],
 }: RNTesterModule);