diff --git a/change/react-native-windows-63f67386-8c58-4d24-88c1-84e80443b8d4.json b/change/react-native-windows-63f67386-8c58-4d24-88c1-84e80443b8d4.json new file mode 100644 index 00000000000..3edfe5db7e3 --- /dev/null +++ b/change/react-native-windows-63f67386-8c58-4d24-88c1-84e80443b8d4.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "[Fabric] Text renders borders twice", + "packageName": "react-native-windows", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/@react-native-windows/tester/src/js/examples/Text/TextExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/Text/TextExample.windows.js index 1aa69d364ff..f0def348da5 100644 --- a/packages/@react-native-windows/tester/src/js/examples/Text/TextExample.windows.js +++ b/packages/@react-native-windows/tester/src/js/examples/Text/TextExample.windows.js @@ -979,7 +979,9 @@ function TextBaseLineLayoutExample(props: {}): React.Node { function TextBorderExample(props: {}): React.Node { return ( - + Sample bordered text with default styling. @@ -1009,7 +1011,9 @@ function TextBorderExample(props: {}): React.Node { function AdvancedBordersExample(props: {}): React.Node { return ( - + { const dump = await dumpVisualTree('text-shadow'); expect(dump).toMatchSnapshot(); }); + test('Text can have borders', async () => { + const component = await app.findElementByTestID('text-border'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('text-border'); + expect(dump).toMatchSnapshot(); + }); + test('Text can have advanced borders', async () => { + const component = await app.findElementByTestID('advanced-borders'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('advanced-borders'); + expect(dump).toMatchSnapshot(); + }); }); diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap index e3229196d1d..efec6141aeb 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap @@ -138,6 +138,339 @@ exports[`Text Tests Text can have a size 1`] = ` } `; +exports[`Text Tests Text can have advanced borders 1`] = ` +{ + "Automation Tree": { + "AutomationId": "advanced-borders", + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "Advanced Border Example", + "__Children": [ + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "This text has customized borders.", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "This text has customized borders.", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "This text has customized borders.", + }, + ], + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Advanced Border Example", + "TestId": "advanced-borders", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + "Visual Tree": { + "Comment": "advanced-borders", + "Offset": "0, 0, 0", + "Size": "916, 97", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 40", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 40", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "27, 22", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "27, 0, 0", + "Size": "874, 15", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "-15, 0, 0", + "Size": "15, 20", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "-10, 20, 0", + "Size": "10, 14", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "-11, -6, 0", + "Size": "11, 6", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "23, -5, 0", + "Size": "882, 5", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, -8, 0", + "Size": "23, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 22, 0", + "Size": "20, 10", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "0, 38, 0", + "Size": "916, 39", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 39", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "27, 22", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "27, 0, 0", + "Size": "874, 15", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "-15, 0, 0", + "Size": "15, 20", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "-10, 20, 0", + "Size": "10, 13", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "-11, -6, 0", + "Size": "11, 6", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "23, -5, 0", + "Size": "882, 5", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "0, -8, 0", + "Size": "23, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "0, 22, 0", + "Size": "20, 9", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "0, 77, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "4, 4", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "4, 0, 0", + "Size": "908, 1", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "-4, 0, 0", + "Size": "4, 4", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "-1, 4, 0", + "Size": "1, 14", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "-4, -4, 0", + "Size": "4, 4", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "4, -1, 0", + "Size": "908, 1", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "0, -4, 0", + "Size": "4, 4", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "0, 4, 0", + "Size": "1, 14", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, +} +`; + exports[`Text Tests Text can have an outer color 1`] = ` { "Automation Tree": { @@ -161,6 +494,203 @@ exports[`Text Tests Text can have an outer color 1`] = ` } `; +exports[`Text Tests Text can have borders 1`] = ` +{ + "Automation Tree": { + "AutomationId": "text-border", + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "Border Example", + "__Children": [ + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Sample bordered text with default styling.", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Some more bordered text + a tad of CSS. +1st nested - border specifcied but ignored. +2nd Inside text!", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "This text is outlined and laid out within the normal text run, so will wrap etc as normal text.", + }, + ], + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Border Example", + "TestId": "text-border", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + "Visual Tree": { + "Comment": "text-border", + "Offset": "0, 0, 0", + "Size": "916, 385", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "400, 29", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "400, 29", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "2, 2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "2, 0, 0", + "Size": "-4, 2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-2, 0, 0", + "Size": "2, 2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-2, 2, 0", + "Size": "2, -4", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-2, -2, 0", + "Size": "2, 2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "2, -2, 0", + "Size": "-4, 2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -2, 0", + "Size": "2, 2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 2, 0", + "Size": "2, -4", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "100, 127, 0", + "Size": "716, 138", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "716, 138", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "3, 3", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "3, 0, 0", + "Size": "-6, 3", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-3, 0, 0", + "Size": "3, 3", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-3, 3, 0", + "Size": "3, -6", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-3, -3, 0", + "Size": "3, 3", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "3, -3, 0", + "Size": "-6, 3", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -3, 0", + "Size": "3, 3", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 3, 0", + "Size": "3, -6", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "0, 365, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, +} +`; + exports[`Text Tests Text can have decoration lines: Solid Line Through 1`] = ` { "Automation Tree": { diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap b/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap index b2977451760..1fa47b25e1e 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap @@ -74302,6 +74302,8 @@ exports[`snapshotAllPages Text 40`] = ` exports[`snapshotAllPages Text 41`] = `