Add more tests for border + child interaction

Summary:
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]

Differential Revision: D61695025

packages/rn-tester/js/examples/Border/BorderExample.js

@@ -233,6 +233,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: 25,
+    height: 25,
+    left: -10,
+    top: -10,
+    backgroundColor: 'blue',
+  },
 });
 
 export default ({
@@ -541,5 +561,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.box, styles.borderWithChildren]}>
+              <View style={styles.childOfBorder} />
+            </View>
+            <View
+              style={[
+                styles.box,
+                styles.borderWithChildren2,
+                {overflow: 'hidden'},
+              ]}>
+              <View style={styles.childOfBorder} />
+            </View>
+            <View style={[styles.box, styles.borderWithChildren2]}>
+              <View style={[styles.childOfBorder, {left: -15, top: 0}]} />
+            </View>
+          </View>
+        );
+      },
+    },
   ],
 }: RNTesterModule);