Add e2e tests for fixed transform cases (#49318)

Summary: Pull Request resolved: #49318 tsia see previous diffs for fix. Added more tests to box shadow, filter, and borders Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D69416675 fbshipit-source-id: ae1e33750b56c1a4720e04e29fc110f1e11c0b3d
facebook · Feb 11, 2025 · a733930 · a733930
1 parent ba4a0cc
commit a733930
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 39 deletions.
diff --git a/packages/rn-tester/js/examples/Border/BorderExample.js b/packages/rn-tester/js/examples/Border/BorderExample.js
@@ -600,5 +600,26 @@ export default ({
         );
       },
     },
+    {
+      title: 'Borders and scaling transforms',
+      name: 'scaling-transforms',
+      description: 'Ensure borders can render properly with scaling transforms',
+      render: function (): React.Node {
+        return (
+          <View
+            testID="border-test-scaling-transforms"
+            style={[
+              styles.smallBox,
+              {
+                backgroundColor: 'red',
+                borderLeftWidth: 10,
+                borderRadius: 10,
+                transform: [{scale: 1.2}],
+              },
+            ]}
+          />
+        );
+      },
+    },
   ],
 }: RNTesterModule);
diff --git a/packages/rn-tester/js/examples/Filter/FilterExample.js b/packages/rn-tester/js/examples/Filter/FilterExample.js
@@ -20,41 +20,35 @@ const alphaHotdog = require('../../assets/alpha-hotdog.png');
 const hotdog = require('../../assets/hotdog.jpg');
 
 type Props = $ReadOnly<{
-  style: ViewStyleProp,
+  style?: ViewStyleProp,
   testID?: string,
   imageSource?: number,
 }>;
 
 function StaticViewAndImage(props: Props): React.Node {
   return (
-    <>
-      <View style={styles.container} testID={props.testID}>
-        <View style={[props.style, styles.commonView]}>
-          <View style={styles.subview}>
-            <View style={styles.subsubview} />
-            <Text>Hello world!</Text>
-          </View>
+    <View style={styles.verticalContainer} testID={props.testID}>
+      <View style={[props.style, styles.commonView]}>
+        <View style={styles.subview}>
+          <View style={styles.subsubview} />
+          <Text>Hello world!</Text>
         </View>
-        <View style={styles.commonView}>
-          <View style={styles.subview}>
-            <View style={styles.subsubview} />
-            <Text>Hello world!</Text>
-          </View>
-        </View>
-      </View>
-      <View style={styles.container}>
-        <Image
-          source={props.imageSource ?? hotdog}
-          style={[props.style, styles.commonImage]}
-          resizeMode="contain"
-        />
-        <Image
-          source={props.imageSource ? props.imageSource : hotdog}
-          style={styles.commonImage}
-          resizeMode="contain"
-        />
       </View>
-    </>
+      <Image
+        source={props.imageSource ?? hotdog}
+        style={[props.style, styles.commonImage]}
+        resizeMode="contain"
+      />
+    </View>
+  );
+}
+
+function StaticViewAndImageComparison(props: Props): React.Node {
+  return (
+    <View style={styles.container} testID={props.testID}>
+      <StaticViewAndImage imageSource={props.imageSource} style={props.style} />
+      <StaticViewAndImage imageSource={props.imageSource} />
+    </View>
   );
 }
 
@@ -63,7 +57,7 @@ function StaticViewAndImageWithState(props: Props): React.Node {
   setTimeout(() => setS(!s), 5000);
 
   return (
-    <StaticViewAndImage
+    <StaticViewAndImageComparison
       style={s ? [props.style] : null}
       testID={props.testID}
     />
@@ -94,6 +88,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-around',
   },
+  verticalContainer: {
+    justifyContent: 'space-around',
+  },
 });
 
 exports.title = 'Filter';
@@ -107,7 +104,7 @@ exports.examples = [
     name: 'brightness',
     render(): React.Node {
       return (
-        <StaticViewAndImage
+        <StaticViewAndImageComparison
           style={{filter: [{brightness: 1.5}]}}
           testID="filter-test-brightness"
         />
@@ -119,7 +116,9 @@ exports.examples = [
     description: 'opacity(0.5)',
     name: 'opacity',
     render(): React.Node {
-      return <StaticViewAndImage style={{filter: [{opacity: 0.5}]}} />;
+      return (
+        <StaticViewAndImageComparison style={{filter: [{opacity: 0.5}]}} />
+      );
     },
   },
   {
@@ -128,7 +127,9 @@ exports.examples = [
     name: 'contrast',
     platform: 'android',
     render(): React.Node {
-      return <StaticViewAndImage style={{filter: [{contrast: 0.5}]}} />;
+      return (
+        <StaticViewAndImageComparison style={{filter: [{contrast: 0.5}]}} />
+      );
     },
   },
   {
@@ -137,7 +138,7 @@ exports.examples = [
     name: 'sepia',
     platform: 'android',
     render(): React.Node {
-      return <StaticViewAndImage style={{filter: [{sepia: 0.5}]}} />;
+      return <StaticViewAndImageComparison style={{filter: [{sepia: 0.5}]}} />;
     },
   },
   {
@@ -146,7 +147,9 @@ exports.examples = [
     name: 'grayscale',
     platform: 'android',
     render(): React.Node {
-      return <StaticViewAndImage style={{filter: [{grayscale: 0.5}]}} />;
+      return (
+        <StaticViewAndImageComparison style={{filter: [{grayscale: 0.5}]}} />
+      );
     },
   },
   {
@@ -155,7 +158,7 @@ exports.examples = [
     name: 'saturate',
     platform: 'android',
     render(): React.Node {
-      return <StaticViewAndImage style={{filter: [{saturate: 4}]}} />;
+      return <StaticViewAndImageComparison style={{filter: [{saturate: 4}]}} />;
     },
   },
   {
@@ -164,7 +167,11 @@ exports.examples = [
     name: 'hueRotate',
     platform: 'android',
     render(): React.Node {
-      return <StaticViewAndImage style={{filter: [{hueRotate: '-90deg'}]}} />;
+      return (
+        <StaticViewAndImageComparison
+          style={{filter: [{hueRotate: '-90deg'}]}}
+        />
+      );
     },
   },
   {
@@ -173,7 +180,7 @@ exports.examples = [
     name: 'invert',
     platform: 'android',
     render(): React.Node {
-      return <StaticViewAndImage style={{filter: [{invert: 0.7}]}} />;
+      return <StaticViewAndImageComparison style={{filter: [{invert: 0.7}]}} />;
     },
   },
   {
@@ -183,7 +190,7 @@ exports.examples = [
     platform: 'android',
     render(): React.Node {
       return (
-        <StaticViewAndImage
+        <StaticViewAndImageComparison
           style={{filter: [{blur: 10}]}}
           testID="filter-test-blur"
         />
@@ -197,7 +204,7 @@ exports.examples = [
     platform: 'android',
     render(): React.Node {
       return (
-        <StaticViewAndImage
+        <StaticViewAndImageComparison
           style={{
             filter: [{dropShadow: '30px 10px 4px #4444dd'}],
           }}
@@ -213,7 +220,7 @@ exports.examples = [
     name: 'chained-filters',
     render(): React.Node {
       return (
-        <StaticViewAndImageWithState
+        <StaticViewAndImageComparison
           style={{filter: [{brightness: 1.5}, {opacity: 0.5}]}}
           testID="filter-test-chain"
         />
@@ -229,4 +236,18 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Filters with transforms',
+    description: 'Scaling transform with filter',
+    name: 'scaling-transforms',
+    render(): React.Node {
+      return (
+        <StaticViewAndImage
+          style={{transform: [{scale: 1.2}], filter: [{brightness: 1.5}]}}
+          testID="filter-test-transforms"
+          imageSource={alphaHotdog}
+        />
+      );
+    },
+  },
 ] as Array<RNTesterModuleExample>;
diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js
@@ -493,6 +493,16 @@ function BoxShadowExample(): React.Node {
             boxShadow: '5px 5px 5px 0px rgba(0, 0, 0, 0)',
           }}
         />
+        <View
+          style={[
+            defaultStyleSize,
+            {
+              backgroundColor: 'brown',
+              boxShadow: '5px 5px 5px 0px rgba(0, 0, 255, 1) inset',
+              transform: [{scale: 1.2}],
+            },
+          ]}
+        />
       </View>
     </View>
   );