From 311afc18018c98f3d9dca150e82a8924e4a42e1b Mon Sep 17 00:00:00 2001
From: Jorge Cabiedes Acosta <jorgecab@meta.com>
Date: Thu, 9 May 2024 11:18:27 -0700
Subject: [PATCH] Add E2E tests for border-radius percentages (#44460)

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

Added missing e2e tests for border-radiusf

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D57062098

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

diff --git a/packages/rn-tester/js/examples/Border/BorderExample.js b/packages/rn-tester/js/examples/Border/BorderExample.js
index b58c8e6a17e..653509fca70 100644
--- a/packages/rn-tester/js/examples/Border/BorderExample.js
+++ b/packages/rn-tester/js/examples/Border/BorderExample.js
@@ -124,6 +124,12 @@ const styles = StyleSheet.create({
     borderBottomRightRadius: 20,
     borderColor: 'black',
   },
+  border9Percentages: {
+    borderWidth: 10,
+    borderTopLeftRadius: '10%',
+    borderBottomRightRadius: '20%',
+    borderColor: 'black',
+  },
   border10: {
     borderWidth: 10,
     backgroundColor: 'white',
@@ -132,6 +138,14 @@ const styles = StyleSheet.create({
     borderColor: 'black',
     elevation: 10,
   },
+  border10Percentages: {
+    borderWidth: 10,
+    backgroundColor: 'white',
+    borderTopLeftRadius: '10%',
+    borderBottomRightRadius: '20%',
+    borderColor: 'black',
+    elevation: 10,
+  },
   border11: {
     width: 0,
     height: 0,
@@ -343,6 +357,19 @@ export default ({
         );
       },
     },
+    {
+      title: 'Corner Radii (Percentages)',
+      name: 'corner-radii',
+      description: 'borderTopLeftRadius & borderBottomRightRadius',
+      render: function (): React.Node {
+        return (
+          <View
+            testID="border-test-corner-radii-percentages"
+            style={[styles.box, styles.border9Percentages]}
+          />
+        );
+      },
+    },
     {
       title: 'Corner Radii / Elevation',
       name: 'corner-radii-elevation',
@@ -357,6 +384,20 @@ export default ({
         );
       },
     },
+    {
+      title: 'Corner Radii / Elevation (Percentages)',
+      name: 'corner-radii-elevation',
+      description: 'borderTopLeftRadius & borderBottomRightRadius & elevation',
+      platform: 'android',
+      render: function (): React.Node {
+        return (
+          <View
+            testID="border-test-corner-radii-elevation-percentages"
+            style={[styles.box, styles.border10Percentages]}
+          />
+        );
+      },
+    },
     {
       title: 'CSS Trick - Triangle',
       name: 'css-trick-triangle',