microsoft
diff --git a/‎change/react-native-windows-262555bf-8b8f-4511-b814-9ed70a0cb8b4.json
Copy file name to clipboard
+7Lines changed: 7 additions & 0 deletions b/‎change/react-native-windows-262555bf-8b8f-4511-b814-9ed70a0cb8b4.json
Copy file name to clipboard
+7Lines changed: 7 additions & 0 deletions
diff --git a/‎packages/@react-native-windows/tester/src/js/examples/Text/TextExample.windows.js
Copy file name to clipboard
+70Lines changed: 70 additions & 0 deletions b/‎packages/@react-native-windows/tester/src/js/examples/Text/TextExample.windows.js
Copy file name to clipboard
+70Lines changed: 70 additions & 0 deletions
diff --git a/‎packages/e2e-test-app-fabric/test/TextComponentTest.test.ts
Copy file name to clipboard
+65Lines changed: 65 additions & 0 deletions b/‎packages/e2e-test-app-fabric/test/TextComponentTest.test.ts
Copy file name to clipboard
+65Lines changed: 65 additions & 0 deletions
diff --git a/‎packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap
Copy file name to clipboard
+192Lines changed: 192 additions & 0 deletions b/‎packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap
Copy file name to clipboard
+192Lines changed: 192 additions & 0 deletions
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implementation of adjustFontSizeToFit for Text in Fabric",
+  "packageName": "react-native-windows",
+  "email": "kvineeth@microsoft.com",
+  "dependentChangeType": "patch"
+}
@@ -1926,6 +1926,76 @@ const examples = [
       );
     },
   },
+  {
+    title: 'AdjustFontSize according to the Width, Height and LinesCount',
+    name: 'adjustFontSizeToFit',
+    render: function (): React.Node {
+      return (
+        <View>
+          <RNTesterText
+            style={{
+              width: 500,
+              height: 100,
+              fontSize: 20,
+              backgroundColor: 'lightcoral',
+              padding: 10,
+              marginBottom: 10,
+            }}
+            testID="text-adjustfontsizetofit-default-a">
+            {`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20`}
+          </RNTesterText>
+          <RNTesterText
+            adjustsFontSizeToFit
+            style={{
+              width: 500,
+              height: 100,
+              fontSize: 20,
+              backgroundColor: 'lightcoral',
+              padding: 10,
+              marginBottom: 10,
+            }}
+            testID="text-adjustfontsizetofit-default-b">
+            {`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20`}
+          </RNTesterText>
+          {[
+            {width: 500, height: 80, lineCount: 3},
+            {width: 475, height: 120, lineCount: 5},
+            {width: 450, height: 160, lineCount: 0},
+          ].map((item, index) => (
+            <React.Fragment key={index}>
+              <RNTesterText
+                testID={`text-adjustfontsizetofit-${index}-a`}
+                numberOfLines={item.lineCount}
+                adjustsFontSizeToFit
+                style={{
+                  width: item.width,
+                  height: item.height,
+                  fontSize: 40,
+                  backgroundColor: '#A0C782',
+                  padding: 10,
+                  marginBottom: 10,
+                }}>
+                {`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:${item.height},width:${item.width},lineCount:${item.lineCount},fontSize:40`}
+              </RNTesterText>
+              <RNTesterText
+                testID={`text-adjustfontsizetofit-${index}-b`}
+                numberOfLines={item.lineCount}
+                style={{
+                  width: item.width,
+                  height: item.height,
+                  fontSize: 40,
+                  backgroundColor: 'lightblue',
+                  padding: 10,
+                  marginBottom: 10,
+                }}>
+                {`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:${item.height},width:${item.width},lineCount:${item.lineCount},fontSize:40`}
+              </RNTesterText>
+            </React.Fragment>
+          ))}
+        </View>
+      );
+    },
+  },
 ];
 
 const styles = StyleSheet.create({
 
@@ -129,6 +129,71 @@ describe('Text Tests', () => {
     const dump = await dumpVisualTree('text-view-images-clipped');
     expect(dump).toMatchSnapshot();
   });
+  test('Text can adjust its fontsize according to its limitations, default a', async () => {
+    const component = await app.findElementByTestID(
+      'text-adjustfontsizetofit-default-a',
+    );
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('text-adjustfontsizetofit-default-a');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Text can adjust its fontsize according to its limitations, default b', async () => {
+    const component = await app.findElementByTestID(
+      'text-adjustfontsizetofit-default-b',
+    );
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('text-adjustfontsizetofit-default-b');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Text can adjust its fontsize according to its limitations, case 0 a', async () => {
+    const component = await app.findElementByTestID(
+      'text-adjustfontsizetofit-0-a',
+    );
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('text-adjustfontsizetofit-0-a');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Text can adjust its fontsize according to its limitations, case 0 b', async () => {
+    const component = await app.findElementByTestID(
+      'text-adjustfontsizetofit-0-b',
+    );
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('text-adjustfontsizetofit-0-b');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Text can adjust its fontsize according to its limitations, case 1 a', async () => {
+    const component = await app.findElementByTestID(
+      'text-adjustfontsizetofit-1-a',
+    );
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('text-adjustfontsizetofit-1-a');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Text can adjust its fontsize according to its limitations, case 1 b', async () => {
+    const component = await app.findElementByTestID(
+      'text-adjustfontsizetofit-1-b',
+    );
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('text-adjustfontsizetofit-1-b');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Text can adjust its fontsize according to its limitations, case 2 a', async () => {
+    const component = await app.findElementByTestID(
+      'text-adjustfontsizetofit-2-a',
+    );
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('text-adjustfontsizetofit-2-a');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Text can adjust its fontsize according to its limitations, case 2 b', async () => {
+    const component = await app.findElementByTestID(
+      'text-adjustfontsizetofit-2-b',
+    );
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('text-adjustfontsizetofit-2-b');
+    expect(dump).toMatchSnapshot();
+  });
+
   /* For some reason WebDriver can't find this view even though accessible={true}
   test('Texts can align inline View/Images', async () => {
     const component = await app.findElementByTestID(
 
@@ -24,6 +24,198 @@ exports[`Text Tests Padding can be added to Text 1`] = `
 }
 `;
 
+exports[`Text Tests Text can adjust its fontsize according to its limitations, case 0 a 1`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "text-adjustfontsizetofit-0-a",
+    "ControlType": 50020,
+    "LocalizedControlType": "text",
+    "Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:80,width:500,lineCount:3,fontSize:40",
+    "TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:80,width:500,lineCount:3,fontSize:40",
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+    "_Props": {
+      "TestId": "text-adjustfontsizetofit-0-a",
+    },
+  },
+  "Visual Tree": {
+    "Comment": "text-adjustfontsizetofit-0-a",
+    "Offset": "0, 0, 0",
+    "Size": "500, 80",
+    "Visual Type": "SpriteVisual",
+  },
+}
+`;
+
+exports[`Text Tests Text can adjust its fontsize according to its limitations, case 0 b 1`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "text-adjustfontsizetofit-0-b",
+    "ControlType": 50020,
+    "LocalizedControlType": "text",
+    "Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:80,width:500,lineCount:3,fontSize:40",
+    "TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:80,width:500,lineCount:3,fontSize:40",
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+    "_Props": {
+      "TestId": "text-adjustfontsizetofit-0-b",
+    },
+  },
+  "Visual Tree": {
+    "Comment": "text-adjustfontsizetofit-0-b",
+    "Offset": "0, 0, 0",
+    "Size": "500, 80",
+    "Visual Type": "SpriteVisual",
+  },
+}
+`;
+
+exports[`Text Tests Text can adjust its fontsize according to its limitations, case 1 a 1`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "text-adjustfontsizetofit-1-a",
+    "ControlType": 50020,
+    "LocalizedControlType": "text",
+    "Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:120,width:475,lineCount:5,fontSize:40",
+    "TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:120,width:475,lineCount:5,fontSize:40",
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+    "_Props": {
+      "TestId": "text-adjustfontsizetofit-1-a",
+    },
+  },
+  "Visual Tree": {
+    "Comment": "text-adjustfontsizetofit-1-a",
+    "Offset": "0, 0, 0",
+    "Size": "475, 120",
+    "Visual Type": "SpriteVisual",
+  },
+}
+`;
+
+exports[`Text Tests Text can adjust its fontsize according to its limitations, case 1 b 1`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "text-adjustfontsizetofit-1-b",
+    "ControlType": 50020,
+    "LocalizedControlType": "text",
+    "Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:120,width:475,lineCount:5,fontSize:40",
+    "TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:120,width:475,lineCount:5,fontSize:40",
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+    "_Props": {
+      "TestId": "text-adjustfontsizetofit-1-b",
+    },
+  },
+  "Visual Tree": {
+    "Comment": "text-adjustfontsizetofit-1-b",
+    "Offset": "0, 0, 0",
+    "Size": "475, 120",
+    "Visual Type": "SpriteVisual",
+  },
+}
+`;
+
+exports[`Text Tests Text can adjust its fontsize according to its limitations, case 2 a 1`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "text-adjustfontsizetofit-2-a",
+    "ControlType": 50020,
+    "LocalizedControlType": "text",
+    "Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:160,width:450,lineCount:0,fontSize:40",
+    "TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:160,width:450,lineCount:0,fontSize:40",
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+    "_Props": {
+      "TestId": "text-adjustfontsizetofit-2-a",
+    },
+  },
+  "Visual Tree": {
+    "Comment": "text-adjustfontsizetofit-2-a",
+    "Offset": "0, 0, 0",
+    "Size": "450, 160",
+    "Visual Type": "SpriteVisual",
+  },
+}
+`;
+
+exports[`Text Tests Text can adjust its fontsize according to its limitations, case 2 b 1`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "text-adjustfontsizetofit-2-b",
+    "ControlType": 50020,
+    "LocalizedControlType": "text",
+    "Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:160,width:450,lineCount:0,fontSize:40",
+    "TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:160,width:450,lineCount:0,fontSize:40",
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+    "_Props": {
+      "TestId": "text-adjustfontsizetofit-2-b",
+    },
+  },
+  "Visual Tree": {
+    "Comment": "text-adjustfontsizetofit-2-b",
+    "Offset": "0, 0, 0",
+    "Size": "450, 160",
+    "Visual Type": "SpriteVisual",
+  },
+}
+`;
+
+exports[`Text Tests Text can adjust its fontsize according to its limitations, default a 1`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "text-adjustfontsizetofit-default-a",
+    "ControlType": 50020,
+    "LocalizedControlType": "text",
+    "Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20",
+    "TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20",
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+    "_Props": {
+      "TestId": "text-adjustfontsizetofit-default-a",
+    },
+  },
+  "Visual Tree": {
+    "Comment": "text-adjustfontsizetofit-default-a",
+    "Offset": "0, 0, 0",
+    "Size": "500, 100",
+    "Visual Type": "SpriteVisual",
+  },
+}
+`;
+
+exports[`Text Tests Text can adjust its fontsize according to its limitations, default b 1`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "text-adjustfontsizetofit-default-b",
+    "ControlType": 50020,
+    "LocalizedControlType": "text",
+    "Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20",
+    "TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20",
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+    "_Props": {
+      "TestId": "text-adjustfontsizetofit-default-b",
+    },
+  },
+  "Visual Tree": {
+    "Comment": "text-adjustfontsizetofit-default-b",
+    "Offset": "0, 0, 0",
+    "Size": "500, 100",
+    "Visual Type": "SpriteVisual",
+  },
+}
+`;
+
 exports[`Text Tests Text can be restricted to one line 1`] = `
 {
   "Automation Tree": {