From a4be38987879aad20b7f10230051825b95c22179 Mon Sep 17 00:00:00 2001
From: Joe Vilches <joevilches@meta.com>
Date: Mon, 26 Aug 2024 11:00:29 -0700
Subject: [PATCH] Add more tests for border + child interaction (#46195)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46195

go tests!

Testing
* Symmetrical, transparent border clips to padding box (wrong behavior atm)
* Asymmetrical, transparent border clips to padding box (wrong behavior atm)
* Children render over borders with no clipping (correct behavior atm)

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D61695025
---
 .../js/examples/Border/BorderExample.js       | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/packages/rn-tester/js/examples/Border/BorderExample.js b/packages/rn-tester/js/examples/Border/BorderExample.js
index e8a7a7e87bd82b..eb0790087a1510 100644
--- a/packages/rn-tester/js/examples/Border/BorderExample.js
+++ b/packages/rn-tester/js/examples/Border/BorderExample.js
@@ -28,6 +28,10 @@ const styles = StyleSheet.create({
     width: 100,
     height: 100,
   },
+  smallBox: {
+    width: 50,
+    height: 50,
+  },
   wrapper: {
     flexDirection: 'row',
   },
@@ -233,6 +237,26 @@ const styles = StyleSheet.create({
     width: 100,
     height: 100,
   },
+  borderWithChildren: {
+    backgroundColor: 'red',
+    borderWidth: 10,
+    borderRadius: 10,
+    borderColor: 'rgba(0, 0, 0, 0.5)',
+    overflow: 'hidden',
+  },
+  borderWithChildren2: {
+    backgroundColor: 'red',
+    borderWidth: 10,
+    borderTopLeftRadius: 20,
+    borderColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  childOfBorder: {
+    width: 20,
+    height: 20,
+    left: -10,
+    top: -10,
+    backgroundColor: 'blue',
+  },
 });
 
 export default ({
@@ -541,5 +565,32 @@ export default ({
         );
       },
     },
+    {
+      title: 'Borders and children compliance',
+      name: 'border-clipping-compliance',
+      description: 'Some edge cases of Views with borders and children.',
+      render: function (): React.Node {
+        return (
+          <View
+            testID="border-test-border-clipping-compliance"
+            style={{flexDirection: 'row', gap: '10'}}>
+            <View style={[styles.smallBox, styles.borderWithChildren]}>
+              <View style={styles.childOfBorder} />
+            </View>
+            <View
+              style={[
+                styles.smallBox,
+                styles.borderWithChildren2,
+                {overflow: 'hidden'},
+              ]}>
+              <View style={styles.childOfBorder} />
+            </View>
+            <View style={[styles.smallBox, styles.borderWithChildren2]}>
+              <View style={[styles.childOfBorder, {left: -15, top: 0}]} />
+            </View>
+          </View>
+        );
+      },
+    },
   ],
 }: RNTesterModule);