From 9c49ee9550ac4c87a929d4f48687ac08284cf079 Mon Sep 17 00:00:00 2001 From: Andrew <30809111+acoates-ms@users.noreply.github.com> Date: Mon, 15 Jul 2024 14:25:09 -0700 Subject: [PATCH 1/5] [Fabric] Text renders borders twice --- vnext/src-win/Libraries/Text/Text.windows.js | 1 + 1 file changed, 1 insertion(+) diff --git a/vnext/src-win/Libraries/Text/Text.windows.js b/vnext/src-win/Libraries/Text/Text.windows.js index b9e314879c2..af60ce1e7e4 100644 --- a/vnext/src-win/Libraries/Text/Text.windows.js +++ b/vnext/src-win/Libraries/Text/Text.windows.js @@ -294,6 +294,7 @@ const Text: React.AbstractComponent< } else { let styleProps: ViewStyleProp = (restProps.style: any); if ( + global.RN$Bridgeless !== true && // [Windows] Fabric text handles borders, but on paper we need to wrap it in an extra view styleProps && styleProps.borderColor && (styleProps.borderWidth || From d3931c7d55c57a0ca5cfe7acb353de915374c90e Mon Sep 17 00:00:00 2001 From: Andrew <30809111+acoates-ms@users.noreply.github.com> Date: Mon, 15 Jul 2024 14:25:15 -0700 Subject: [PATCH 2/5] Change files --- ...ative-windows-63f67386-8c58-4d24-88c1-84e80443b8d4.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/react-native-windows-63f67386-8c58-4d24-88c1-84e80443b8d4.json 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" +} From 35d625bdc0e030014208e4d97444ac029c848cb6 Mon Sep 17 00:00:00 2001 From: Andrew <30809111+acoates-ms@users.noreply.github.com> Date: Mon, 15 Jul 2024 16:33:33 -0700 Subject: [PATCH 3/5] Add fabric test for text borders --- .../js/examples/Text/TextExample.windows.js | 8 +- .../test/TextComponentTest.test.ts | 12 + .../TextComponentTest.test.ts.snap | 530 ++++++++++++++++++ 3 files changed, 548 insertions(+), 2 deletions(-) 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..eb1d0701fe9 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, 98", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 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(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, 13", + "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, 9", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "0, 38, 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(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, 14", + "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, 10", + "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, 384", + "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, 139", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "716, 139", + "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": { From 961d1492054ea48ef8f47185b143b74b7bd9dae1 Mon Sep 17 00:00:00 2001 From: Andrew <30809111+acoates-ms@users.noreply.github.com> Date: Tue, 16 Jul 2024 09:20:42 -0700 Subject: [PATCH 4/5] snapshot updates --- .../TextComponentTest.test.ts.snap | 22 +- .../TextComponentTest.test.ts.snap | 386 +++++++++++------- 2 files changed, 244 insertions(+), 164 deletions(-) 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 eb1d0701fe9..49003ffbdb9 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 @@ -190,17 +190,17 @@ exports[`Text Tests Text can have advanced borders 1`] = ` "Visual Tree": { "Comment": "advanced-borders", "Offset": "0, 0, 0", - "Size": "916, 98", + "Size": "916, 97", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 39", + "Size": "916, 40", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 39", + "Size": "916, 40", "Visual Type": "SpriteVisual", "__Children": [ { @@ -272,7 +272,7 @@ exports[`Text Tests Text can have advanced borders 1`] = ` "Color": "rgba(255, 0, 0, 255)", }, "Offset": "0, 22, 0", - "Size": "20, 9", + "Size": "20, 10", "Visual Type": "SpriteVisual", }, ], @@ -286,12 +286,12 @@ exports[`Text Tests Text can have advanced borders 1`] = ` }, { "Offset": "0, 38, 0", - "Size": "916, 40", + "Size": "916, 39", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 40", + "Size": "916, 39", "Visual Type": "SpriteVisual", "__Children": [ { @@ -327,7 +327,7 @@ exports[`Text Tests Text can have advanced borders 1`] = ` "Color": "rgba(0, 0, 255, 255)", }, "Offset": "-10, 20, 0", - "Size": "10, 14", + "Size": "10, 13", "Visual Type": "SpriteVisual", }, { @@ -363,7 +363,7 @@ exports[`Text Tests Text can have advanced borders 1`] = ` "Color": "rgba(0, 0, 255, 255)", }, "Offset": "0, 22, 0", - "Size": "20, 10", + "Size": "20, 9", "Visual Type": "SpriteVisual", }, ], @@ -548,7 +548,7 @@ exports[`Text Tests Text can have borders 1`] = ` "Visual Tree": { "Comment": "text-border", "Offset": "0, 0, 0", - "Size": "916, 384", + "Size": "916, 385", "Visual Type": "SpriteVisual", "__Children": [ { @@ -612,12 +612,12 @@ exports[`Text Tests Text can have borders 1`] = ` }, { "Offset": "100, 127, 0", - "Size": "716, 139", + "Size": "716, 138", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "716, 139", + "Size": "716, 138", "Visual Type": "SpriteVisual", "__Children": [ { diff --git a/packages/e2e-test-app/test/__snapshots__/TextComponentTest.test.ts.snap b/packages/e2e-test-app/test/__snapshots__/TextComponentTest.test.ts.snap index c8ba72b7a39..dc51ed00022 100644 --- a/packages/e2e-test-app/test/__snapshots__/TextComponentTest.test.ts.snap +++ b/packages/e2e-test-app/test/__snapshots__/TextComponentTest.test.ts.snap @@ -234,11 +234,12 @@ exports[`TextTest Text border 1`] = ` { "AutomationId": "text-border", "Background": null, - "BorderBrush": "#E4000000", + "BorderBrush": null, "BorderThickness": "0,0,0,0", "Clip": null, "CornerRadius": "0,0,0,0", "FlowDirection": "LeftToRight", + "Foreground": "#FF000000", "Height": 395, "HorizontalAlignment": "Stretch", "Left": 0, @@ -248,16 +249,16 @@ exports[`TextTest Text border 1`] = ` "VerticalAlignment": "Stretch", "Visibility": "Visible", "Width": 718, - "XamlType": "Microsoft.ReactNative.ViewPanel", + "XamlType": "Microsoft.ReactNative.ViewControl", "children": [ { "Background": null, - "BorderBrush": "#FF000000", - "BorderThickness": "2,2,2,2", + "BorderBrush": null, + "BorderThickness": "0,0,0,0", "Clip": null, "CornerRadius": "0,0,0,0", "FlowDirection": "LeftToRight", - "Height": 32, + "Foreground": "#FF000000", "HorizontalAlignment": "Stretch", "Left": 0, "Margin": "0,0,0,0", @@ -265,81 +266,120 @@ exports[`TextTest Text border 1`] = ` "Top": 0, "VerticalAlignment": "Stretch", "Visibility": "Visible", - "Width": 400, - "XamlType": "Microsoft.ReactNative.ViewPanel", + "XamlType": "Windows.UI.Xaml.Controls.ContentPresenter", "children": [ { + "Background": null, + "BorderBrush": "#E4000000", + "BorderThickness": "0,0,0,0", "Clip": null, + "CornerRadius": "0,0,0,0", "FlowDirection": "LeftToRight", - "Foreground": "#FF000000", - "Height": 28, + "Height": 395, "HorizontalAlignment": "Stretch", - "Left": 2, + "Left": 0, "Margin": "0,0,0,0", "Padding": "0,0,0,0", - "Text": "Sample bordered text with default styling.", - "Top": 2, + "Top": 0, "VerticalAlignment": "Stretch", "Visibility": "Visible", - "Width": 400, - "XamlType": "Windows.UI.Xaml.Controls.TextBlock", - }, - ], - }, - { - "Background": null, - "BorderBrush": "#FF008000", - "BorderThickness": "3,3,3,3", - "Clip": null, - "CornerRadius": "0,0,0,0", - "FlowDirection": "LeftToRight", - "Height": 144, - "HorizontalAlignment": "Stretch", - "Left": 100, - "Margin": "0,0,0,0", - "Padding": "0,0,0,0", - "Top": 132, - "VerticalAlignment": "Stretch", - "Visibility": "Visible", - "Width": 518, - "XamlType": "Microsoft.ReactNative.ViewPanel", - "children": [ - { - "Clip": null, - "FlowDirection": "LeftToRight", - "Foreground": "#FF000000", - "Height": 78, - "HorizontalAlignment": "Stretch", - "Left": 33, - "Margin": "0,0,0,0", - "Padding": "0,0,0,0", - "Text": "Some more bordered text + a tad of CSS. + "Width": 718, + "XamlType": "Microsoft.ReactNative.ViewPanel", + "children": [ + { + "Background": null, + "BorderBrush": "#FF000000", + "BorderThickness": "2,2,2,2", + "Clip": null, + "CornerRadius": "0,0,0,0", + "FlowDirection": "LeftToRight", + "Height": 32, + "HorizontalAlignment": "Stretch", + "Left": 0, + "Margin": "0,0,0,0", + "Padding": "0,0,0,0", + "Top": 0, + "VerticalAlignment": "Stretch", + "Visibility": "Visible", + "Width": 400, + "XamlType": "Microsoft.ReactNative.ViewPanel", + "children": [ + { + "Clip": null, + "FlowDirection": "LeftToRight", + "Foreground": "#FF000000", + "Height": 28, + "HorizontalAlignment": "Stretch", + "Left": 2, + "Margin": "0,0,0,0", + "Padding": "0,0,0,0", + "Text": "Sample bordered text with default styling.", + "Top": 2, + "VerticalAlignment": "Stretch", + "Visibility": "Visible", + "Width": 400, + "XamlType": "Windows.UI.Xaml.Controls.TextBlock", + }, + ], + }, + { + "Background": null, + "BorderBrush": "#FF008000", + "BorderThickness": "3,3,3,3", + "Clip": null, + "CornerRadius": "0,0,0,0", + "FlowDirection": "LeftToRight", + "Height": 144, + "HorizontalAlignment": "Stretch", + "Left": 100, + "Margin": "0,0,0,0", + "Padding": "0,0,0,0", + "Top": 132, + "VerticalAlignment": "Stretch", + "Visibility": "Visible", + "Width": 518, + "XamlType": "Microsoft.ReactNative.ViewPanel", + "children": [ + { + "Clip": null, + "FlowDirection": "LeftToRight", + "Foreground": "#FF000000", + "Height": 78, + "HorizontalAlignment": "Stretch", + "Left": 33, + "Margin": "0,0,0,0", + "Padding": "0,0,0,0", + "Text": "Some more bordered text + a tad of CSS. 1st nested - border specifcied but ignored. 2nd Inside text!", - "Top": 33, - "VerticalAlignment": "Stretch", - "Visibility": "Visible", - "Width": 452, - "XamlType": "Windows.UI.Xaml.Controls.TextBlock", + "Top": 33, + "VerticalAlignment": "Stretch", + "Visibility": "Visible", + "Width": 452, + "XamlType": "Windows.UI.Xaml.Controls.TextBlock", + }, + ], + }, + { + "Clip": null, + "FlowDirection": "LeftToRight", + "Foreground": "#FF000000", + "Height": 19, + "HorizontalAlignment": "Stretch", + "Left": 0, + "Margin": "0,0,0,0", + "Padding": "0,0,0,0", + "Text": "This text is outlined and laid out within the normal text run, so will wrap etc as normal text.", + "Top": 376, + "VerticalAlignment": "Stretch", + "Visibility": "Visible", + "Width": 718, + "XamlType": "Windows.UI.Xaml.Controls.TextBlock", + }, + ], }, ], }, - { - "Clip": null, - "FlowDirection": "LeftToRight", - "Foreground": "#FF000000", - "Height": 19, - "HorizontalAlignment": "Stretch", - "Left": 0, - "Margin": "0,0,0,0", - "Padding": "0,0,0,0", - "Text": "This text is outlined and laid out within the normal text run, so will wrap etc as normal text.", - "Top": 376, - "VerticalAlignment": "Stretch", - "Visibility": "Visible", - "Width": 718, - "XamlType": "Windows.UI.Xaml.Controls.TextBlock", - }, ], } `; @@ -348,11 +388,12 @@ exports[`TextTest Text can have advanced borders 1`] = ` { "AutomationId": "advanced-borders", "Background": null, - "BorderBrush": "#E4000000", + "BorderBrush": null, "BorderThickness": "0,0,0,0", "Clip": null, "CornerRadius": "0,0,0,0", "FlowDirection": "LeftToRight", + "Foreground": "#FF000000", "Height": 141, "HorizontalAlignment": "Stretch", "Left": 0, @@ -362,16 +403,16 @@ exports[`TextTest Text can have advanced borders 1`] = ` "VerticalAlignment": "Stretch", "Visibility": "Visible", "Width": 718, - "XamlType": "Microsoft.ReactNative.ViewPanel", + "XamlType": "Microsoft.ReactNative.ViewControl", "children": [ { "Background": null, - "BorderBrush": "#FFFF0000", - "BorderThickness": "20,15,10,5", + "BorderBrush": null, + "BorderThickness": "0,0,0,0", "Clip": null, - "CornerRadius": "7,5,1,3", + "CornerRadius": "0,0,0,0", "FlowDirection": "LeftToRight", - "Height": 59, + "Foreground": "#FF000000", "HorizontalAlignment": "Stretch", "Left": 0, "Margin": "0,0,0,0", @@ -379,96 +420,135 @@ exports[`TextTest Text can have advanced borders 1`] = ` "Top": 0, "VerticalAlignment": "Stretch", "Visibility": "Visible", - "Width": 718, - "XamlType": "Microsoft.ReactNative.ViewPanel", - "children": [ - { - "Clip": null, - "FlowDirection": "LeftToRight", - "Foreground": "#FF000000", - "Height": 39, - "HorizontalAlignment": "Stretch", - "Left": 20, - "Margin": "0,0,0,0", - "Padding": "0,0,0,0", - "Text": "This text has customized borders.", - "Top": 15, - "VerticalAlignment": "Stretch", - "Visibility": "Visible", - "Width": 688, - "XamlType": "Windows.UI.Xaml.Controls.TextBlock", - }, - ], - }, - { - "Background": null, - "BorderBrush": "#FF0000FF", - "BorderThickness": "20,15,10,5", - "Clip": null, - "CornerRadius": "7,5,1,3", - "FlowDirection": "LeftToRight", - "Height": 59, - "HorizontalAlignment": "Stretch", - "Left": 0, - "Margin": "0,0,0,0", - "Padding": "0,0,0,0", - "Top": 59, - "VerticalAlignment": "Stretch", - "Visibility": "Visible", - "Width": 718, - "XamlType": "Microsoft.ReactNative.ViewPanel", - "children": [ - { - "Clip": null, - "FlowDirection": "LeftToRight", - "Foreground": "#FF000000", - "Height": 39, - "HorizontalAlignment": "Stretch", - "Left": 20, - "Margin": "0,0,0,0", - "Padding": "0,0,0,0", - "Text": "This text has customized borders.", - "Top": 15, - "VerticalAlignment": "Stretch", - "Visibility": "Visible", - "Width": 688, - "XamlType": "Windows.UI.Xaml.Controls.TextBlock", - }, - ], - }, - { - "Background": null, - "BorderBrush": "#FF008000", - "BorderThickness": "1,1,1,1", - "Clip": null, - "CornerRadius": "3,3,3,3", - "FlowDirection": "LeftToRight", - "Height": 23, - "HorizontalAlignment": "Stretch", - "Left": 0, - "Margin": "0,0,0,0", - "Padding": "0,0,0,0", - "Top": 118, - "VerticalAlignment": "Stretch", - "Visibility": "Visible", - "Width": 718, - "XamlType": "Microsoft.ReactNative.ViewPanel", + "XamlType": "Windows.UI.Xaml.Controls.ContentPresenter", "children": [ { + "Background": null, + "BorderBrush": "#E4000000", + "BorderThickness": "0,0,0,0", "Clip": null, + "CornerRadius": "0,0,0,0", "FlowDirection": "LeftToRight", - "Foreground": "#FF000000", - "Height": 21, + "Height": 141, "HorizontalAlignment": "Stretch", - "Left": 1, + "Left": 0, "Margin": "0,0,0,0", "Padding": "0,0,0,0", - "Text": "This text has customized borders.", - "Top": 1, + "Top": 0, "VerticalAlignment": "Stretch", "Visibility": "Visible", - "Width": 716, - "XamlType": "Windows.UI.Xaml.Controls.TextBlock", + "Width": 718, + "XamlType": "Microsoft.ReactNative.ViewPanel", + "children": [ + { + "Background": null, + "BorderBrush": "#FFFF0000", + "BorderThickness": "20,15,10,5", + "Clip": null, + "CornerRadius": "7,5,1,3", + "FlowDirection": "LeftToRight", + "Height": 59, + "HorizontalAlignment": "Stretch", + "Left": 0, + "Margin": "0,0,0,0", + "Padding": "0,0,0,0", + "Top": 0, + "VerticalAlignment": "Stretch", + "Visibility": "Visible", + "Width": 718, + "XamlType": "Microsoft.ReactNative.ViewPanel", + "children": [ + { + "Clip": null, + "FlowDirection": "LeftToRight", + "Foreground": "#FF000000", + "Height": 39, + "HorizontalAlignment": "Stretch", + "Left": 20, + "Margin": "0,0,0,0", + "Padding": "0,0,0,0", + "Text": "This text has customized borders.", + "Top": 15, + "VerticalAlignment": "Stretch", + "Visibility": "Visible", + "Width": 688, + "XamlType": "Windows.UI.Xaml.Controls.TextBlock", + }, + ], + }, + { + "Background": null, + "BorderBrush": "#FF0000FF", + "BorderThickness": "20,15,10,5", + "Clip": null, + "CornerRadius": "7,5,1,3", + "FlowDirection": "LeftToRight", + "Height": 59, + "HorizontalAlignment": "Stretch", + "Left": 0, + "Margin": "0,0,0,0", + "Padding": "0,0,0,0", + "Top": 59, + "VerticalAlignment": "Stretch", + "Visibility": "Visible", + "Width": 718, + "XamlType": "Microsoft.ReactNative.ViewPanel", + "children": [ + { + "Clip": null, + "FlowDirection": "LeftToRight", + "Foreground": "#FF000000", + "Height": 39, + "HorizontalAlignment": "Stretch", + "Left": 20, + "Margin": "0,0,0,0", + "Padding": "0,0,0,0", + "Text": "This text has customized borders.", + "Top": 15, + "VerticalAlignment": "Stretch", + "Visibility": "Visible", + "Width": 688, + "XamlType": "Windows.UI.Xaml.Controls.TextBlock", + }, + ], + }, + { + "Background": null, + "BorderBrush": "#FF008000", + "BorderThickness": "1,1,1,1", + "Clip": null, + "CornerRadius": "3,3,3,3", + "FlowDirection": "LeftToRight", + "Height": 23, + "HorizontalAlignment": "Stretch", + "Left": 0, + "Margin": "0,0,0,0", + "Padding": "0,0,0,0", + "Top": 118, + "VerticalAlignment": "Stretch", + "Visibility": "Visible", + "Width": 718, + "XamlType": "Microsoft.ReactNative.ViewPanel", + "children": [ + { + "Clip": null, + "FlowDirection": "LeftToRight", + "Foreground": "#FF000000", + "Height": 21, + "HorizontalAlignment": "Stretch", + "Left": 1, + "Margin": "0,0,0,0", + "Padding": "0,0,0,0", + "Text": "This text has customized borders.", + "Top": 1, + "VerticalAlignment": "Stretch", + "Visibility": "Visible", + "Width": 716, + "XamlType": "Windows.UI.Xaml.Controls.TextBlock", + }, + ], + }, + ], }, ], }, From fee1554dd569e9fc07aca8fc42b43c19b0fb9576 Mon Sep 17 00:00:00 2001 From: Andrew <30809111+acoates-ms@users.noreply.github.com> Date: Tue, 16 Jul 2024 10:27:20 -0700 Subject: [PATCH 5/5] snapshots --- .../test/__snapshots__/TextComponentTest.test.ts.snap | 2 +- .../test/__snapshots__/snapshotPages.test.js.snap | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) 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 49003ffbdb9..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 @@ -236,7 +236,7 @@ exports[`Text Tests Text can have advanced borders 1`] = ` "Color": "rgba(255, 0, 0, 255)", }, "Offset": "-10, 20, 0", - "Size": "10, 13", + "Size": "10, 14", "Visual Type": "SpriteVisual", }, { 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`] = `