From cfbd15aff18655f634d14cd28d5ad37ba69da06b Mon Sep 17 00:00:00 2001
From: Nick Gerleman <ngerlem@meta.com>
Date: Wed, 29 May 2024 23:32:34 -0700
Subject: [PATCH] Add border clipping examples (#44711)

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

This adds just the border clipping examples and tests from D57668976

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D57941945

fbshipit-source-id: 2234927cb944710c9d929d1d77087d3d2ecdbca6
---
 .../js/examples/Border/BorderExample.js       | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/packages/rn-tester/js/examples/Border/BorderExample.js b/packages/rn-tester/js/examples/Border/BorderExample.js
index 12e9a08c3e3..e8a7a7e87bd 100644
--- a/packages/rn-tester/js/examples/Border/BorderExample.js
+++ b/packages/rn-tester/js/examples/Border/BorderExample.js
@@ -12,9 +12,11 @@
 
 import type {RNTesterModule} from '../../types/RNTesterTypes';
 
+import hotdog from '../../assets/hotdog.jpg';
 import * as React from 'react';
 import {
   DynamicColorIOS,
+  Image,
   Platform,
   PlatformColor,
   StyleSheet,
@@ -214,6 +216,23 @@ const styles = StyleSheet.create({
         ? DynamicColorIOS({light: 'magenta', dark: 'cyan'})
         : 'black',
   },
+  borderWithoutClipping: {
+    borderWidth: 10,
+    overflow: 'visible',
+  },
+  borderWithClipping: {
+    borderWidth: 10,
+    overflow: 'hidden',
+  },
+  borderWithClippingAndRadius: {
+    borderWidth: 10,
+    borderRadius: 30,
+    overflow: 'hidden',
+  },
+  hotdog: {
+    width: 100,
+    height: 100,
+  },
 });
 
 export default ({
@@ -477,5 +496,50 @@ export default ({
         );
       },
     },
+    {
+      title: 'Child without clipping',
+      name: 'child-no-clipping',
+      description:
+        '"overflow: visible" will cause child content to show above borders',
+      render: function (): React.Node {
+        return (
+          <View
+            testID="border-test-child-no-clipping"
+            style={[styles.box, styles.borderWithoutClipping]}>
+            <Image source={hotdog} style={styles.hotdog} />
+          </View>
+        );
+      },
+    },
+    {
+      title: 'Child clipping',
+      name: 'child-clipping',
+      description:
+        '"overflow: hidden" will cause child content to be clipped to borders',
+      render: function (): React.Node {
+        return (
+          <View
+            testID="border-test-child-clipping"
+            style={[styles.box, styles.borderWithClipping]}>
+            <Image source={hotdog} style={styles.hotdog} />
+          </View>
+        );
+      },
+    },
+    {
+      title: 'Child clipping with radius',
+      name: 'child-clipping-radius',
+      description:
+        '"overflow: hidden" will cause child content to be clipped to rounded corners',
+      render: function (): React.Node {
+        return (
+          <View
+            testID="border-test-child-clipping-radius"
+            style={[styles.box, styles.borderWithClippingAndRadius]}>
+            <Image source={hotdog} style={styles.hotdog} />
+          </View>
+        );
+      },
+    },
   ],
 }: RNTesterModule);