[0.64] Fix Text.Color not working with backgroundColor (#7794)

* Fix Text.BackgroundColor overwriting foreground. (#7707) * Change files * reconcile treedump library calls * Update snapshot. Co-authored-by: Igor Klemenski <igklemen@microsoft.com>
microsoft · May 26, 2021 · 440f694 · 440f694
1 parent 8e8fc55
commit 440f694
Show file tree

Hide file tree

Showing 9 changed files with 328 additions and 30 deletions.
diff --git a/change/react-native-windows-e7751624-0752-4e22-9095-937978ff2335.json b/change/react-native-windows-e7751624-0752-4e22-9095-937978ff2335.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix Text.BackgroundColor overwriting foreground. (#7707)",
+  "packageName": "react-native-windows",
+  "email": "igklemen@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/...act-native-windows/tester/src/js/examples-win/LegacyTests/TextBackgroundColorTestPage.tsx b/...act-native-windows/tester/src/js/examples-win/LegacyTests/TextBackgroundColorTestPage.tsx
@@ -17,6 +17,40 @@ export function TextBackgroundColorTestPage() {
   return (
     <View>
       <View testID={'TextColorBackgroundView'}>
+<Text style={{color: 'pink'}}>Outer pink</Text>
+         <Text style={{}}>
+           Outer <Text style={{color: 'red'}}>red nested</Text>
+         </Text>
+         <Text style={{}}>
+           Outer{' '}
+           <Text style={{backgroundColor: 'blue', color: 'white'}}>
+             nested white on blue
+           </Text>
+         </Text>
+         <Text style={{color: 'pink'}}>
+           Outer pink <Text style={{color: 'red'}}>nested red</Text>
+         </Text>
+         <Text style={{backgroundColor: 'green'}}>
+           Outer on green{' '}
+           <Text style={{color: 'white'}}>nested white on inherit green</Text>
+         </Text>
+         <Text style={{backgroundColor: 'green', color: 'orange'}}>
+           Outer orange on green{' '}
+           <Text style={{backgroundColor: 'blue', color: 'white'}}>
+             nested white on blue
+           </Text>
+         </Text>
+         <Text style={{color: 'orange'}}>
+           Outer orange{' '}
+           <Text style={{backgroundColor: 'blue', color: 'white'}}>
+             nested white on blue
+           </Text>
+         </Text>
+         <Text style={{color: 'orange'}}>
+           <Text style={{backgroundColor: 'blue'}}>
+             nested orange inherit on blue
+           </Text>
+         </Text>
         <Text>
           Outer no_color{' '}
           <Text style={{ backgroundColor: 'green' }}>
@@ -86,4 +120,4 @@ export const examples = [
       return <TextBackgroundColorTestPage />;
     },
   },
-];
+];
diff --git a/packages/@react-native-windows/tester/src/js/examples-win/Text/TextExample.windows.tsx b/packages/@react-native-windows/tester/src/js/examples-win/Text/TextExample.windows.tsx
@@ -76,11 +76,48 @@ export class BackgroundColorDemo extends React.Component<{}> {
   public render() {
     return (
       <View>
+        <Text style={{color: 'pink'}}>Outer pink</Text>
+        <Text style={{}}>
+          Outer <Text style={{color: 'red'}}>red nested</Text>
+        </Text>
+        <Text style={{}}>
+          Outer{' '}
+          <Text style={{backgroundColor: 'blue', color: 'white'}}>
+            nested white on blue
+          </Text>
+        </Text>
+        <Text style={{color: 'pink'}}>
+          Outer pink <Text style={{color: 'red'}}>nested red</Text>
+        </Text>
+        <Text style={{backgroundColor: 'green'}}>
+          Outer on green{' '}
+          <Text style={{color: 'white'}}>nested white on inherit green</Text>
+        </Text>
+        <Text style={{backgroundColor: 'green', color: 'orange'}}>
+          Outer orange on green{' '}
+          <Text style={{backgroundColor: 'blue', color: 'white'}}>
+            nested white on blue
+          </Text>
+        </Text>
+        <Text style={{color: 'orange'}}>
+          Outer orange{' '}
+          <Text style={{backgroundColor: 'blue', color: 'white'}}>
+            nested white on blue
+          </Text>
+        </Text>
+        <Text style={{color: 'orange'}}>
+          <Text style={{backgroundColor: 'blue'}}>
+            nested orange inherit on blue
+          </Text>
+        </Text>
+
         <Text>
           Outer no_color{' '}
-          <Text style={{backgroundColor: 'green'}}>
+          <Text style={{backgroundColor: 'green', color: 'white'}}>
             START_NESTED green{' '}
-            <Text style={{backgroundColor: 'blue'}}>DEEPER_NESTED blue</Text>{' '}
+            <Text style={{backgroundColor: 'blue', color: 'magenta'}}>
+              DEEPER_NESTED magenta on blue
+            </Text>{' '}
             END_NESTED
           </Text>{' '}
           attributes.