diff --git a/change/@office-iss-react-native-win32-153ff284-0e4b-42da-8d03-d6585a865cf4.json b/change/@office-iss-react-native-win32-153ff284-0e4b-42da-8d03-d6585a865cf4.json new file mode 100644 index 00000000000..2cc826d515d --- /dev/null +++ b/change/@office-iss-react-native-win32-153ff284-0e4b-42da-8d03-d6585a865cf4.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix(TextInput/isFocused): correctly handle null focused input", + "packageName": "@office-iss/react-native-win32", + "email": "nate@bracy.dev", + "dependentChangeType": "none" +} diff --git a/change/@react-native-windows-automation-commands-8efb4ec6-5444-4510-9e8a-2f6e003f55fb.json b/change/@react-native-windows-automation-commands-8efb4ec6-5444-4510-9e8a-2f6e003f55fb.json new file mode 100644 index 00000000000..8a3cadddfe8 --- /dev/null +++ b/change/@react-native-windows-automation-commands-8efb4ec6-5444-4510-9e8a-2f6e003f55fb.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Process snapshots so that ImageSource Uri's are consistent", + "packageName": "@react-native-windows/automation-commands", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/react-native-windows-4d35cfde-27d7-409c-903e-1e2bec97cb74.json b/change/react-native-windows-4d35cfde-27d7-409c-903e-1e2bec97cb74.json new file mode 100644 index 00000000000..9666b11b506 --- /dev/null +++ b/change/react-native-windows-4d35cfde-27d7-409c-903e-1e2bec97cb74.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Preventing crash when passing null children to view with no-hide-descendents", + "packageName": "react-native-windows", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/react-native-windows-8440b9f1-4e20-4d1a-a29a-f586164bb919.json b/change/react-native-windows-8440b9f1-4e20-4d1a-a29a-f586164bb919.json new file mode 100644 index 00000000000..456caca1342 --- /dev/null +++ b/change/react-native-windows-8440b9f1-4e20-4d1a-a29a-f586164bb919.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Expose ImageProps from ImageComponentView's and add ImageSource type", + "packageName": "react-native-windows", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/react-native-windows-b579c25f-abaa-486e-920f-64f3216eaba7.json b/change/react-native-windows-b579c25f-abaa-486e-920f-64f3216eaba7.json new file mode 100644 index 00000000000..d494865e6b2 --- /dev/null +++ b/change/react-native-windows-b579c25f-abaa-486e-920f-64f3216eaba7.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "ViewComponentView should be activatable from rn-win32.dll", + "packageName": "react-native-windows", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/react-native-windows-f51acce3-f93a-49cb-955a-38ff1bef4726.json b/change/react-native-windows-f51acce3-f93a-49cb-955a-38ff1bef4726.json new file mode 100644 index 00000000000..72f92dd6aee --- /dev/null +++ b/change/react-native-windows-f51acce3-f93a-49cb-955a-38ff1bef4726.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix(TextInput/isFocused): correctly handle null focused input", + "packageName": "react-native-windows", + "email": "nate@bracy.dev", + "dependentChangeType": "none" +} diff --git a/package.json b/package.json index 05362eae42b..08f2c966e41 100644 --- a/package.json +++ b/package.json @@ -65,5 +65,6 @@ }, "resolutions.justification": { "z-schema": "CVE-2021-3765 in validator. z-schema is used by rush which is a dependency of lage so should not be executed in this repo" - } -} \ No newline at end of file + }, + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" +} diff --git a/packages/@office-iss/react-native-win32/src-win/Libraries/Components/TextInput/TextInput.win32.js b/packages/@office-iss/react-native-win32/src-win/Libraries/Components/TextInput/TextInput.win32.js index 79d228826c6..1850d3f1d00 100644 --- a/packages/@office-iss/react-native-win32/src-win/Libraries/Components/TextInput/TextInput.win32.js +++ b/packages/@office-iss/react-native-win32/src-win/Libraries/Components/TextInput/TextInput.win32.js @@ -1314,9 +1314,13 @@ function InternalTextInput(props: Props): React.Node { ); } }, - // TODO: Fix this returning true on null === null, when no input is focused isFocused(): boolean { - return TextInputState.currentlyFocusedInput() === inputRef.current; + const currentlyFocusedInput = + TextInputState.currentlyFocusedInput(); + return ( + currentlyFocusedInput !== null && + currentlyFocusedInput === inputRef.current + ); }, getNativeRef(): ?React.ElementRef> { return inputRef.current; diff --git a/packages/@react-native-windows/automation-commands/src/dumpVisualTree.ts b/packages/@react-native-windows/automation-commands/src/dumpVisualTree.ts index 2335a2b5b67..08a3067aaca 100644 --- a/packages/@react-native-windows/automation-commands/src/dumpVisualTree.ts +++ b/packages/@react-native-windows/automation-commands/src/dumpVisualTree.ts @@ -33,6 +33,36 @@ export type UIElement = { [index: string]: unknown; }; +export type AutomationNode = { + AutomationId?: string; + ControlType?: number; + LocalizedControlType?: string; + __Children?: [AutomationNode]; +}; + +export type ComponentNode = { + Type: string; + _Props?: { + TestId?: string; + Sources?: [{Uri?: string}]; + }; + __Children?: [ComponentNode]; +}; + +export type VisualNode = { + Comment?: string; + Offset?: `${number} ${number} ${number}`; + Size?: `${number} ${number}`; + 'Visual Type'?: string; + __Children?: [VisualNode]; +}; + +export type VisualTree = { + 'Automation Tree': AutomationNode; + 'Component Tree': ComponentNode; + 'Visual Tree': VisualNode; +}; + declare global { const automationClient: AutomationClient | undefined; } @@ -46,9 +76,10 @@ export default async function dumpVisualTree( pruneCollapsed?: boolean; deterministicOnly?: boolean; removeDefaultProps?: boolean; + removeGuidsFromImageSources?: boolean; additionalProperties?: string[]; }, -): Promise { +): Promise { if (!automationClient) { throw new Error('RPC client is not enabled'); } @@ -62,23 +93,87 @@ export default async function dumpVisualTree( throw new Error(dumpResponse.message); } - const element = dumpResponse.result; + const element: UIElement | VisualTree = dumpResponse.result; - if (opts?.pruneCollapsed !== false) { + if ('XamlType' in element && opts?.pruneCollapsed !== false) { pruneCollapsedElements(element); } - if (opts?.deterministicOnly !== false) { + if ('XamlType' in element && opts?.deterministicOnly !== false) { removeNonDeterministicProps(element); } - if (opts?.removeDefaultProps !== false) { + if ('XamlType' in element && opts?.removeDefaultProps !== false) { removeDefaultProps(element); } + if (!('XamlType' in element) && opts?.removeGuidsFromImageSources !== false) { + removeGuidsFromImageSources(element); + } + return element; } +function removeGuidsFromImageSourcesHelper(node: ComponentNode) { + if (node._Props && node._Props.Sources) { + node._Props.Sources.forEach((source: any) => { + if (source.Uri) { + if (source.Uri.startsWith('blob:')) { + source.Uri = source.Uri.replace( + /blob:[a-f0-9]+-[a-f0-9]+-[a-f0-9]+-[a-f0-9]+-[a-f0-9]+/, + 'blob:', + ); + } else if ( + source.Uri.startsWith('https://www.facebook.com/favicon.ico?r=1&t=') + ) { + source.Uri = + 'https://www.facebook.com/favicon.ico?r=1&t='; + } else if ( + source.Uri.startsWith( + 'https://www.facebook.com/ads/pics/successstories.png?hash=', + ) + ) { + source.Uri = + 'https://www.facebook.com/ads/pics/successstories.png?hash='; + } else { + // When getting files from a prebuilt bundle the uri is going to include a local path, which would make snapshots inconsistent, + // This logic replaces the local path so that we get consistent results. + // file://E:\\repos\\react-native-windows\\packages\\e2e-test-app-fabric\\windows\\RNTesterApp-Fabric.Package\\bin\\x64\\Release\\AppX\\RNTesterApp-Fabric\\Bundle\\@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png + // becomes + // @react-native-windows/tester/js/assets/uie_thumb_normal@2x.png + const packagesPath = require('path') + .resolve(__dirname, '../../..') + .replace(/\\/g, '\\\\'); + source.Uri = source.Uri.replace( + new RegExp(`file://${packagesPath}.*\\\\Bundle\\\\assets/_+`), + '', + ); + + // When loading the bundle from metro local paths will be replaced with paths to localhost, which will not align with snapshots made with prebuilt bundles. + // This logic replaces the localhost uri, with the same uri that we would have gotten from a prebuild bundle. This makes it easier to debug without breaking snapshots + // http://localhost:8081/assets/@@/@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png?platform=windows&hash=c6f5aec4d9e0aa47c0887e4266796224 + // becomes + // "@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png" + source.Uri = source.Uri.replace( + /http:\/\/localhost:8081\/assets\/(@@\/)+/, + '', + ); + source.Uri = source.Uri.replace(/\?platform=windows&hash=[^=]$/, ''); + } + } + }); + } + if (node.__Children) { + node.__Children.forEach((child: any) => + removeGuidsFromImageSourcesHelper(child), + ); + } +} + +function removeGuidsFromImageSources(visualTree: VisualTree) { + removeGuidsFromImageSourcesHelper(visualTree['Component Tree']); +} + /** * Removes trees of XAML that are not visible. */ diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/ButtonComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/ButtonComponentTest.test.ts.snap index 9b796f53668..ce9f64fb6ce 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/ButtonComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/ButtonComponentTest.test.ts.snap @@ -4,45 +4,61 @@ exports[`Button Tests Buttons can be disabled 1`] = ` { "Automation Tree": { "AutomationId": "disabled_button", - "Children": [ + "ControlType": 50000, + "IsEnabled": false, + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "Press to submit your application!", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", "IsEnabled": false, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Submit Application", }, ], - "ControlType": 50000, - "HelpText": "", - "IsEnabled": false, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "Press to submit your application!", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Press to submit your application!", + "TestId": "disabled_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "disabled_button", + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "0, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -50,16 +66,8 @@ exports[`Button Tests Buttons can be disabled 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 1, - ], + "Offset": "4, 0, 0", + "Size": "908, 1", "Visual Type": "SpriteVisual", }, { @@ -67,16 +75,8 @@ exports[`Button Tests Buttons can be disabled 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "-4, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -84,16 +84,8 @@ exports[`Button Tests Buttons can be disabled 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "-1, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { @@ -101,16 +93,8 @@ exports[`Button Tests Buttons can be disabled 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "-4, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -118,16 +102,8 @@ exports[`Button Tests Buttons can be disabled 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - -2, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 2, - ], + "Offset": "4, -2, 0", + "Size": "908, 2", "Visual Type": "SpriteVisual", }, { @@ -135,16 +111,8 @@ exports[`Button Tests Buttons can be disabled 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "0, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -152,111 +120,37 @@ exports[`Button Tests Buttons can be disabled 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "0, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "9, 9, 0", + "Size": "898, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], + "Offset": "0, 0, 0", + "Size": "898, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 9, - 9, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "disabled_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -265,49 +159,63 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` { "Automation Tree": { "AutomationId": "accessibilityLabel_button", - "Children": [ + "ControlType": 50000, + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "Press to submit your application!", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Submit Application", }, ], - "ControlType": 50000, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "Press to submit your application!", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Press to submit your application!", + "TestId": "accessibilityLabel_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "accessibilityLabel_button", + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 122, 255, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "0, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -315,16 +223,8 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 1, - ], + "Offset": "4, 0, 0", + "Size": "908, 1", "Visual Type": "SpriteVisual", }, { @@ -332,16 +232,8 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "-4, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -349,16 +241,8 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "-1, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { @@ -366,16 +250,8 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "-4, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -383,16 +259,8 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - -2, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 2, - ], + "Offset": "4, -2, 0", + "Size": "908, 2", "Visual Type": "SpriteVisual", }, { @@ -400,16 +268,8 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "0, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -417,111 +277,37 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "0, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "9, 9, 0", + "Size": "898, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], + "Offset": "0, 0, 0", + "Size": "898, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 9, - 9, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "accessibilityLabel_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -530,41 +316,46 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` { "Automation Tree": { "AutomationId": "accessibility_props", - "Children": [ + "ControlType": 50000, + "HelpText": "Submit Button", + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "Press to submit your application!", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Submit Application", }, ], - "ControlType": 50000, - "HelpText": "Submit Button", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "Press to submit your application!", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Press to submit your application!", + "TestId": "accessibility_props", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "accessibility_props", + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "0, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -572,16 +363,8 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 1, - ], + "Offset": "4, 0, 0", + "Size": "908, 1", "Visual Type": "SpriteVisual", }, { @@ -589,16 +372,8 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "-4, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -606,16 +381,8 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "-1, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { @@ -623,16 +390,8 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "-4, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -640,16 +399,8 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - -2, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 2, - ], + "Offset": "4, -2, 0", + "Size": "908, 2", "Visual Type": "SpriteVisual", }, { @@ -657,16 +408,8 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "0, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -674,72 +417,28 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "0, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "9, 9, 0", + "Size": "898, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], + "Offset": "0, 0, 0", + "Size": "898, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 9, - 9, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "accessibility_props", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -748,45 +447,61 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` { "Automation Tree": { "AutomationId": "accessibilityState_button", - "Children": [ + "ControlType": 50000, + "IsEnabled": false, + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "Press to submit your application!", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", "IsEnabled": false, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Submit Application", }, ], - "ControlType": 50000, - "HelpText": "", - "IsEnabled": false, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "Press to submit your application!", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Press to submit your application!", + "TestId": "accessibilityState_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "accessibilityState_button", + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "0, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -794,16 +509,8 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 1, - ], + "Offset": "4, 0, 0", + "Size": "908, 1", "Visual Type": "SpriteVisual", }, { @@ -811,16 +518,8 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "-4, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -828,16 +527,8 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "-1, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { @@ -845,16 +536,8 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "-4, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -862,16 +545,8 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - -2, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 2, - ], + "Offset": "4, -2, 0", + "Size": "908, 2", "Visual Type": "SpriteVisual", }, { @@ -879,16 +554,8 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "0, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -896,111 +563,37 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "0, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "9, 9, 0", + "Size": "898, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], + "Offset": "0, 0, 0", + "Size": "898, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 9, - 9, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "accessibilityState_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1009,49 +602,63 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` { "Automation Tree": { "AutomationId": "cancel_button", - "Children": [ + "ControlType": 50000, + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "Press to cancel your application!", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Cancel Application", }, ], - "ControlType": 50000, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "Press to cancel your application!", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Press to cancel your application!", + "TestId": "cancel_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "cancel_button", + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 59, 48, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "0, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -1059,16 +666,8 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 1, - ], + "Offset": "4, 0, 0", + "Size": "908, 1", "Visual Type": "SpriteVisual", }, { @@ -1076,16 +675,8 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "-4, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -1093,16 +684,8 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "-1, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { @@ -1110,16 +693,8 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "-4, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -1127,16 +702,8 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - -2, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 2, - ], + "Offset": "4, -2, 0", + "Size": "908, 2", "Visual Type": "SpriteVisual", }, { @@ -1144,16 +711,8 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "0, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -1161,111 +720,37 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "0, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "9, 9, 0", + "Size": "898, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], + "Offset": "0, 0, 0", + "Size": "898, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 9, - 9, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "cancel_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1273,23 +758,32 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` exports[`Button Tests Buttons can have custom focusable and accessible props 1`] = ` { "Automation Tree": {}, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Press to submit your application!", + "TestId": "accessible_false_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, "Visual Tree": { - "Children": [ + "Comment": "accessible_false_button", + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "0, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -1297,16 +791,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 1, - ], + "Offset": "4, 0, 0", + "Size": "908, 1", "Visual Type": "SpriteVisual", }, { @@ -1314,16 +800,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "-4, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -1331,16 +809,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "-1, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { @@ -1348,16 +818,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "-4, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -1365,16 +827,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - -2, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 2, - ], + "Offset": "4, -2, 0", + "Size": "908, 2", "Visual Type": "SpriteVisual", }, { @@ -1382,16 +836,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "0, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -1399,72 +845,28 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "0, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "9, 9, 0", + "Size": "898, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], + "Offset": "0, 0, 0", + "Size": "898, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 9, - 9, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "accessible_false_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1473,41 +875,45 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] { "Automation Tree": { "AutomationId": "focusable_false_button", - "Children": [ + "ControlType": 50000, + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "Press to submit your application!", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Button with focusable=false", }, ], - "ControlType": 50000, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "Press to submit your application!", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Press to submit your application!", + "TestId": "focusable_false_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "focusable_false_button", + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "0, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -1515,16 +921,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 1, - ], + "Offset": "4, 0, 0", + "Size": "908, 1", "Visual Type": "SpriteVisual", }, { @@ -1532,16 +930,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "-4, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -1549,16 +939,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "-1, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { @@ -1566,16 +948,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "-4, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -1583,16 +957,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - -2, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 2, - ], + "Offset": "4, -2, 0", + "Size": "908, 2", "Visual Type": "SpriteVisual", }, { @@ -1600,16 +966,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "0, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -1617,72 +975,28 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "0, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "9, 9, 0", + "Size": "898, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], + "Offset": "0, 0, 0", + "Size": "898, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 9, - 9, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "focusable_false_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1690,23 +1004,32 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] exports[`Button Tests Buttons can have custom focusable and accessible props 3`] = ` { "Automation Tree": {}, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Press to submit your application!", + "TestId": "accessible_focusable_false_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, "Visual Tree": { - "Children": [ + "Comment": "accessible_focusable_false_button", + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "0, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -1714,16 +1037,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 1, - ], + "Offset": "4, 0, 0", + "Size": "908, 1", "Visual Type": "SpriteVisual", }, { @@ -1731,16 +1046,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "-4, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -1748,16 +1055,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "-1, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { @@ -1765,16 +1064,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "-4, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -1782,16 +1073,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - -2, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 2, - ], + "Offset": "4, -2, 0", + "Size": "908, 2", "Visual Type": "SpriteVisual", }, { @@ -1799,16 +1082,8 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "0, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -1816,72 +1091,28 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "0, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "9, 9, 0", + "Size": "898, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], + "Offset": "0, 0, 0", + "Size": "898, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 9, - 9, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "accessible_focusable_false_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1890,84 +1121,121 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` { "Automation Tree": { "AutomationId": "two_button_container", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "two_cancel_button", - "Children": [ + "ControlType": 50000, + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "Press to cancel your application!", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Cancel", }, ], - "ControlType": 50000, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "Press to cancel your application!", }, { "AutomationId": "two_submit_button", - "Children": [ + "ControlType": 50000, + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "Press to submit your application!", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Submit", }, ], - "ControlType": 50000, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "Press to submit your application!", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "two_button_container", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Press to cancel your application!", + "TestId": "two_cancel_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Press to submit your application!", + "TestId": "two_submit_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "two_button_container", + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "59, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Comment": "two_cancel_button", + "Offset": "0, 0, 0", + "Size": "59, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "59, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 59, 48, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "59, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "0, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -1975,16 +1243,8 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 51, - 1, - ], + "Offset": "4, 0, 0", + "Size": "51, 1", "Visual Type": "SpriteVisual", }, { @@ -1992,16 +1252,8 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "-4, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -2009,16 +1261,8 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "-1, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { @@ -2026,16 +1270,8 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "-4, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -2043,16 +1279,8 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - -2, - 0, - ], - "Opacity": 1, - "Size": [ - 51, - 2, - ], + "Offset": "4, -2, 0", + "Size": "51, 2", "Visual Type": "SpriteVisual", }, { @@ -2060,16 +1288,8 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "0, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -2077,165 +1297,77 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "0, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 59, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 59, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "9, 9, 0", + "Size": "41, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 41, - 20, - ], + "Offset": "0, 0, 0", + "Size": "41, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 9, - 9, - 0, - ], - "Opacity": 1, - "Size": [ - 41, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "two_cancel_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 59, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 59, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "854, 0, 0", + "Size": "62, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Comment": "two_submit_button", + "Offset": "0, 0, 0", + "Size": "62, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "62, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(52, 199, 89, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "62, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "0, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -2243,16 +1375,8 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 54, - 1, - ], + "Offset": "4, 0, 0", + "Size": "54, 1", "Visual Type": "SpriteVisual", }, { @@ -2260,16 +1384,8 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "-4, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -2277,16 +1393,8 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "-1, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { @@ -2294,16 +1402,8 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "-4, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -2311,16 +1411,8 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - -2, - 0, - ], - "Opacity": 1, - "Size": [ - 54, - 2, - ], + "Offset": "4, -2, 0", + "Size": "54, 2", "Visual Type": "SpriteVisual", }, { @@ -2328,16 +1420,8 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "0, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -2345,151 +1429,46 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "0, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 62, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 62, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "9, 9, 0", + "Size": "44, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 44, - 20, - ], + "Offset": "0, 0, 0", + "Size": "44, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 9, - 9, - 0, - ], - "Opacity": 1, - "Size": [ - 44, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "two_submit_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 62, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 854, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 62, - 37, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "two_button_container", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2498,104 +1477,153 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = { "Automation Tree": { "AutomationId": "three_button_container", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "three_cancel_button", - "Children": [ + "ControlType": 50000, + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "Press to cancel your application!", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Cancel", }, ], - "ControlType": 50000, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "Press to cancel your application!", }, { "AutomationId": "three_save_button", - "Children": [ + "ControlType": 50000, + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "Press to save your application!", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Save For Later", }, ], - "ControlType": 50000, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "Press to save your application!", }, { "AutomationId": "three_submit_button", - "Children": [ + "ControlType": 50000, + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "Press to submit your application!", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Submit", }, ], - "ControlType": 50000, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "Press to submit your application!", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "three_button_container", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Press to cancel your application!", + "TestId": "three_cancel_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Press to save your application!", + "TestId": "three_save_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Press to submit your application!", + "TestId": "three_submit_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "three_button_container", + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "59, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Comment": "three_cancel_button", + "Offset": "0, 0, 0", + "Size": "59, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "59, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 59, 48, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "59, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "0, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -2603,16 +1631,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 51, - 1, - ], + "Offset": "4, 0, 0", + "Size": "51, 1", "Visual Type": "SpriteVisual", }, { @@ -2620,16 +1640,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "-4, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -2637,16 +1649,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "-1, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { @@ -2654,16 +1658,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "-4, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -2671,16 +1667,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - -2, - 0, - ], - "Opacity": 1, - "Size": [ - 51, - 2, - ], + "Offset": "4, -2, 0", + "Size": "51, 2", "Visual Type": "SpriteVisual", }, { @@ -2688,16 +1676,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "0, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -2705,165 +1685,77 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "0, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 59, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 59, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "9, 9, 0", + "Size": "41, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 41, - 20, - ], + "Offset": "0, 0, 0", + "Size": "41, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 9, - 9, - 0, - ], - "Opacity": 1, - "Size": [ - 41, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "three_cancel_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 59, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 59, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "404, 0, 0", + "Size": "105, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Comment": "three_save_button", + "Offset": "0, 0, 0", + "Size": "105, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "105, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 122, 255, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "105, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "0, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -2871,16 +1763,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 97, - 1, - ], + "Offset": "4, 0, 0", + "Size": "97, 1", "Visual Type": "SpriteVisual", }, { @@ -2888,16 +1772,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "-4, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -2905,16 +1781,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "-1, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { @@ -2922,16 +1790,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "-4, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -2939,16 +1799,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - -2, - 0, - ], - "Opacity": 1, - "Size": [ - 97, - 2, - ], + "Offset": "4, -2, 0", + "Size": "97, 2", "Visual Type": "SpriteVisual", }, { @@ -2956,16 +1808,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "0, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -2973,165 +1817,77 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "0, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 105, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 105, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "9, 9, 0", + "Size": "87, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 87, - 20, - ], + "Offset": "0, 0, 0", + "Size": "87, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 9, - 9, - 0, - ], - "Opacity": 1, - "Size": [ - 87, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "three_save_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 105, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 404, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 105, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "854, 0, 0", + "Size": "62, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Comment": "three_submit_button", + "Offset": "0, 0, 0", + "Size": "62, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "62, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(52, 199, 89, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "62, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "0, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -3139,16 +1895,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 54, - 1, - ], + "Offset": "4, 0, 0", + "Size": "54, 1", "Visual Type": "SpriteVisual", }, { @@ -3156,16 +1904,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "-4, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -3173,16 +1913,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "-1, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { @@ -3190,16 +1922,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "-4, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -3207,16 +1931,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - -2, - 0, - ], - "Opacity": 1, - "Size": [ - 54, - 2, - ], + "Offset": "4, -2, 0", + "Size": "54, 2", "Visual Type": "SpriteVisual", }, { @@ -3224,16 +1940,8 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "0, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -3241,151 +1949,46 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "0, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 62, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 62, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "9, 9, 0", + "Size": "44, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 44, - 20, - ], + "Offset": "0, 0, 0", + "Size": "44, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 9, - 9, - 0, - ], - "Opacity": 1, - "Size": [ - 44, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "three_submit_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 62, - 37, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 854, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 62, - 37, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "three_button_container", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -3394,41 +1997,45 @@ exports[`Button Tests Buttons have default styling 1`] = ` { "Automation Tree": { "AutomationId": "button_default_styling", - "Children": [ + "ControlType": 50000, + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "Press to submit your application!", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Submit Application", }, ], - "ControlType": 50000, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "Press to submit your application!", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Press to submit your application!", + "TestId": "button_default_styling", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "button_default_styling", + "Offset": "0, 0, 0", + "Size": "916, 37", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "0, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -3436,16 +2043,8 @@ exports[`Button Tests Buttons have default styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 1, - ], + "Offset": "4, 0, 0", + "Size": "908, 1", "Visual Type": "SpriteVisual", }, { @@ -3453,16 +2052,8 @@ exports[`Button Tests Buttons have default styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 4, - ], + "Offset": "-4, 0, 0", + "Size": "4, 4", "Visual Type": "SpriteVisual", }, { @@ -3470,16 +2061,8 @@ exports[`Button Tests Buttons have default styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "-1, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { @@ -3487,16 +2070,8 @@ exports[`Button Tests Buttons have default styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -4, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "-4, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -3504,16 +2079,8 @@ exports[`Button Tests Buttons have default styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 4, - -2, - 0, - ], - "Opacity": 1, - "Size": [ - 908, - 2, - ], + "Offset": "4, -2, 0", + "Size": "908, 2", "Visual Type": "SpriteVisual", }, { @@ -3521,16 +2088,8 @@ exports[`Button Tests Buttons have default styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 4, - 5, - ], + "Offset": "0, -5, 0", + "Size": "4, 5", "Visual Type": "SpriteVisual", }, { @@ -3538,72 +2097,28 @@ exports[`Button Tests Buttons have default styling 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 4, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 28, - ], + "Offset": "0, 4, 0", + "Size": "1, 28", "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "9, 9, 0", + "Size": "898, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], + "Offset": "0, 0, 0", + "Size": "898, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 9, - 9, - 0, - ], - "Opacity": 1, - "Size": [ - 898, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "button_default_styling", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 37, - ], - "Visual Type": "SpriteVisual", }, } `; diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap index 128d78d9d8b..883c9172cac 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap @@ -4,168 +4,112 @@ exports[`Home UIA Tree Dump APIs Tab 1`] = ` { "Automation Tree": { "AutomationId": "apis-tab", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "APIs", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "apis-tab", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ImageComponentView", + "_Props": { + "Sources": [ + { + "Size": "111, 72", + "Type": "Local", + "Uri": "@react-native-windows/tester/js/assets/bottom-nav-apis-icon-inactive.png", + }, + ], + }, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(243, 248, 255, 255)", }, - "Children": [ + "Comment": "apis-tab", + "Offset": "0, 0, 0", + "Size": "499, 65", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "499, 65", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "499, 65", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "235, 13, 0", + "Size": "30, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 20, - ], + "Offset": "0, 0, 0", + "Size": "30, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 235, - 13, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "236, 33, 0", + "Size": "27, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 27, - 19, - ], + "Offset": "0, 0, 0", + "Size": "27, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 236, - 33, - 0, - ], - "Opacity": 1, - "Size": [ - 27, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 499, - 65, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 499, - 65, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "apis-tab", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 499, - 65, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -174,284 +118,168 @@ exports[`Home UIA Tree Dump Accessibility 1`] = ` { "Automation Tree": { "AutomationId": "Accessibility", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Accessibility Examples of using Accessibility APIs.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Accessibility", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Examples of using Accessibility APIs.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Other", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Accessibility Examples of using Accessibility APIs.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Accessibility Examples of using Accessibility APIs.", + "TestId": "Accessibility", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Accessibility", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "107, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 107, - 28, - ], + "Offset": "0, 0, 0", + "Size": "107, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 107, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Accessibility", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -460,284 +288,168 @@ exports[`Home UIA Tree Dump Accessibility Windows 1`] = ` { "Automation Tree": { "AutomationId": "Accessibility Windows", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Accessibility Windows Usage of accessibility properties.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Accessibility Windows", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Usage of accessibility properties.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Accessibility Windows Usage of accessibility properties.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Accessibility Windows Usage of accessibility properties.", + "TestId": "Accessibility Windows", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Accessibility Windows", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "194, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 194, - 27, - ], + "Offset": "0, 0, 0", + "Size": "194, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 194, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Accessibility Windows", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -746,284 +458,168 @@ exports[`Home UIA Tree Dump AccessibilityInfo 1`] = ` { "Automation Tree": { "AutomationId": "AccessibilityInfo", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "AccessibilityInfo Examples of using AccessibilityInfo APIs.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "AccessibilityInfo", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Examples of using AccessibilityInfo APIs.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "AccessibilityInfo Examples of using AccessibilityInfo APIs.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "AccessibilityInfo Examples of using AccessibilityInfo APIs.", + "TestId": "AccessibilityInfo", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "AccessibilityInfo", + "Offset": "0, 0, 0", + "Size": "968, 100", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "142, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 142, - 27, - ], + "Offset": "0, 0, 0", + "Size": "142, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 142, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "AccessibilityInfo", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 100, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1032,284 +628,168 @@ exports[`Home UIA Tree Dump ActivityIndicator 1`] = ` { "Automation Tree": { "AutomationId": "ActivityIndicator", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "ActivityIndicator Animated loading indicators.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "ActivityIndicator", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Animated loading indicators.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "ActivityIndicator Animated loading indicators.", }, - "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 255, 255)", + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "ActivityIndicator Animated loading indicators.", + "TestId": "ActivityIndicator", }, - "Children": [ + "__Children": [ { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 143, - 28, - ], + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + "Visual Tree": { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 255)", + }, + "Comment": "ActivityIndicator", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "15, 12, 0", + "Size": "143, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "143, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 143, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "ActivityIndicator", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1318,284 +798,168 @@ exports[`Home UIA Tree Dump Alerts 1`] = ` { "Automation Tree": { "AutomationId": "Alerts", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Alerts Alerts display a concise and informative message and prompt the user to make a decision.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Alerts", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Alerts display a concise and informative message and prompt the user to make a decision.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Alerts Alerts display a concise and informative message and prompt the user to make a decision.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Alerts Alerts display a concise and informative message and prompt the user to make a decision.", + "TestId": "Alerts", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Alerts", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "51, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 51, - 28, - ], + "Offset": "0, 0, 0", + "Size": "51, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 51, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Alerts", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1604,284 +968,168 @@ exports[`Home UIA Tree Dump Animated - Gratuitous App 1`] = ` { "Automation Tree": { "AutomationId": "Animated - Gratuitous App", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Animated - Gratuitous App Bunch of Animations - tap a circle to open a view with more animations, or longPress and drag to reorder circles.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Animated - Gratuitous App", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Bunch of Animations - tap a circle to open a view with more animations, or longPress and drag to reorder circles.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Other", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Animated - Gratuitous App Bunch of Animations - tap a circle to open a view with more animations, or longPress and drag to reorder circles.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Animated - Gratuitous App Bunch of Animations - tap a circle to open a view with more animations, or longPress and drag to reorder circles.", + "TestId": "Animated - Gratuitous App", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Animated - Gratuitous App", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "239, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 239, - 28, - ], + "Offset": "0, 0, 0", + "Size": "239, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 239, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Animated - Gratuitous App", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1890,284 +1138,168 @@ exports[`Home UIA Tree Dump Animated 1`] = ` { "Automation Tree": { "AutomationId": "Animated", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Animated Library designed to make animations fluid, powerful, and painless to build and maintain.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Animated", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Library designed to make animations fluid, powerful, and painless to build and maintain.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Animated Library designed to make animations fluid, powerful, and painless to build and maintain.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Animated Library designed to make animations fluid, powerful, and painless to build and maintain.", + "TestId": "Animated", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Animated", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "86, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 86, - 28, - ], + "Offset": "0, 0, 0", + "Size": "86, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 86, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Animated", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2176,284 +1308,168 @@ exports[`Home UIA Tree Dump AppState 1`] = ` { "Automation Tree": { "AutomationId": "AppState", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "AppState app background status", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "AppState", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "app background status", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "AppState app background status", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "AppState app background status", + "TestId": "AppState", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "AppState", + "Offset": "0, 0, 0", + "Size": "968, 100", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "81, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 81, - 28, - ], + "Offset": "0, 0, 0", + "Size": "81, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 81, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "AppState", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 100, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2462,284 +1478,168 @@ exports[`Home UIA Tree Dump Appearance 1`] = ` { "Automation Tree": { "AutomationId": "Appearance", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Appearance Light and dark user interface examples.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Appearance", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Light and dark user interface examples.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Appearance Light and dark user interface examples.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Appearance Light and dark user interface examples.", + "TestId": "Appearance", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Appearance", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "106, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 106, - 27, - ], + "Offset": "0, 0, 0", + "Size": "106, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 106, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Appearance", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2748,284 +1648,168 @@ exports[`Home UIA Tree Dump Border 1`] = ` { "Automation Tree": { "AutomationId": "Border", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Border Demonstrates some of the border styles available to Views.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Border", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Demonstrates some of the border styles available to Views.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Border Demonstrates some of the border styles available to Views.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Border Demonstrates some of the border styles available to Views.", + "TestId": "Border", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Border", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "60, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 28, - ], + "Offset": "0, 0, 0", + "Size": "60, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Border", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -3034,284 +1818,168 @@ exports[`Home UIA Tree Dump Button 1`] = ` { "Automation Tree": { "AutomationId": "Button", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Button Simple React Native button component.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Button", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Simple React Native button component.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Button Simple React Native button component.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Button Simple React Native button component.", + "TestId": "Button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Button", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "60, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 27, - ], + "Offset": "0, 0, 0", + "Size": "60, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -3320,272 +1988,152 @@ exports[`Home UIA Tree Dump Components Tab 1`] = ` { "Automation Tree": { "AutomationId": "components-tab", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Components", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "components-tab", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ImageComponentView", + "_Props": { + "Sources": [ + { + "Size": "66, 72", + "Type": "Local", + "Uri": "@react-native-windows/tester/js/assets/bottom-nav-components-icon-active.png", + }, + ], + }, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(243, 248, 255, 255)", }, - "Children": [ + "Comment": "components-tab", + "Offset": "0, 0, 0", + "Size": "499, 65", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "499, 65", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "499, 65", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 2, - ], + "Offset": "0, 0, 0", + "Size": "0, 2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -0, - 2, - ], + "Offset": "0, 0, 0", + "Size": "-0, 2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 2, - ], + "Offset": "-0, 0, 0", + "Size": "0, 2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -0, - 2, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - -2, - ], + "Offset": "-0, 2, 0", + "Size": "0, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -0, - -0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "-0, -0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -0, - 0, - ], - "Opacity": 1, - "Size": [ - -0, - 0, - ], + "Offset": "0, -0, 0", + "Size": "-0, 0", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, -0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 2, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - -2, - ], + "Offset": "0, 2, 0", + "Size": "0, -2", "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "240, 14, 0", + "Size": "20, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 20, - 20, - ], + "Offset": "0, 0, 0", + "Size": "20, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 240, - 14, - 0, - ], - "Opacity": 1, - "Size": [ - 20, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "209, 34, 0", + "Size": "81, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 81, - 19, - ], + "Offset": "0, 0, 0", + "Size": "81, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 209, - 34, - 0, - ], - "Opacity": 1, - "Size": [ - 81, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 499, - 65, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 499, - 65, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "components-tab", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 499, - 65, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -3594,284 +2142,168 @@ exports[`Home UIA Tree Dump Composition Bugs Example 1`] = ` { "Automation Tree": { "AutomationId": "Composition Bugs Example", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Composition Bugs Example See bugs in UI.Composition driven native animations", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Composition Bugs Example", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "See bugs in UI.Composition driven native animations", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Composition Bugs Example See bugs in UI.Composition driven native animations", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Composition Bugs Example See bugs in UI.Composition driven native animations", + "TestId": "Composition Bugs Example", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Composition Bugs Example", + "Offset": "0, 0, 0", + "Size": "968, 100", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "241, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 241, - 27, - ], + "Offset": "0, 0, 0", + "Size": "241, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 241, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Composition Bugs Example", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 100, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -3880,284 +2312,168 @@ exports[`Home UIA Tree Dump Crash 1`] = ` { "Automation Tree": { "AutomationId": "Crash", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Crash Crash examples.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Crash", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Crash examples.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Crash Crash examples.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Crash Crash examples.", + "TestId": "Crash", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Crash", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "50, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 28, - ], + "Offset": "0, 0, 0", + "Size": "50, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Crash", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4166,284 +2482,168 @@ exports[`Home UIA Tree Dump Cxx TurboModule 1`] = ` { "Automation Tree": { "AutomationId": "Cxx TurboModule", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Cxx TurboModule Usage of Cxx TurboModule", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Cxx TurboModule", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Usage of Cxx TurboModule", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Cxx TurboModule Usage of Cxx TurboModule", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Cxx TurboModule Usage of Cxx TurboModule", + "TestId": "Cxx TurboModule", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Cxx TurboModule", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "157, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 157, - 28, - ], + "Offset": "0, 0, 0", + "Size": "157, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 157, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Cxx TurboModule", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4452,284 +2652,168 @@ exports[`Home UIA Tree Dump DevSettings 1`] = ` { "Automation Tree": { "AutomationId": "DevSettings", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "DevSettings Customize the development settings", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "DevSettings", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Customize the development settings", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "DevSettings Customize the development settings", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "DevSettings Customize the development settings", + "TestId": "DevSettings", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "DevSettings", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "106, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 106, - 27, - ], + "Offset": "0, 0, 0", + "Size": "106, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 106, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "DevSettings", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4738,284 +2822,168 @@ exports[`Home UIA Tree Dump Dimensions 1`] = ` { "Automation Tree": { "AutomationId": "Dimensions", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Dimensions Dimensions of the viewport", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Dimensions", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Dimensions of the viewport", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Dimensions Dimensions of the viewport", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Dimensions Dimensions of the viewport", + "TestId": "Dimensions", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Dimensions", + "Offset": "0, 0, 0", + "Size": "968, 100", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "103, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 27, - ], + "Offset": "0, 0, 0", + "Size": "103, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Dimensions", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 100, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -5024,284 +2992,168 @@ exports[`Home UIA Tree Dump Display:none Style 1`] = ` { "Automation Tree": { "AutomationId": "Display:none Style", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Display:none Style Style prop which will collapse the element in XAML tree.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Display:none Style", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Style prop which will collapse the element in XAML tree.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Other", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Display:none Style Style prop which will collapse the element in XAML tree.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Display:none Style Style prop which will collapse the element in XAML tree.", + "TestId": "Display:none Style", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Display:none Style", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "161, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 161, - 28, - ], + "Offset": "0, 0, 0", + "Size": "161, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 161, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Display:none Style", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -5310,284 +3162,168 @@ exports[`Home UIA Tree Dump Fabric Native Component 1`] = ` { "Automation Tree": { "AutomationId": "Fabric Native Component", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Fabric Native Component Sample Fabric Native Component that sizes based on max desired size of native XAML contained within", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Fabric Native Component", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Sample Fabric Native Component that sizes based on max desired size of native XAML contained within", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { - "AutomationId": "", - "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "text", - "Name": "Android", + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Android", + }, + ], + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Fabric Native Component Sample Fabric Native Component that sizes based on max desired size of native XAML contained within", + "TestId": "Fabric Native Component", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Fabric Native Component Sample Fabric Native Component that sizes based on max desired size of native XAML contained within", }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Fabric Native Component", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "225, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 225, - 28, - ], + "Offset": "0, 0, 0", + "Size": "225, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 225, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Fabric Native Component", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -5596,284 +3332,168 @@ exports[`Home UIA Tree Dump Fabric Native Component Yoga 1`] = ` { "Automation Tree": { "AutomationId": "Fabric Native Component Yoga", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Fabric Native Component Yoga Sample Fabric Native Component that places native XAML inside a container sized by yoga", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Fabric Native Component Yoga", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Sample Fabric Native Component that places native XAML inside a container sized by yoga", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Fabric Native Component Yoga Sample Fabric Native Component that places native XAML inside a container sized by yoga", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Fabric Native Component Yoga Sample Fabric Native Component that places native XAML inside a container sized by yoga", + "TestId": "Fabric Native Component Yoga", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Fabric Native Component Yoga", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "273, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 273, - 28, - ], + "Offset": "0, 0, 0", + "Size": "273, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 273, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Fabric Native Component Yoga", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -5882,284 +3502,168 @@ exports[`Home UIA Tree Dump Fast Path Texts 1`] = ` { "Automation Tree": { "AutomationId": "Fast Path Texts", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Fast Path Texts Examples of performant fast path texts, turn on IsTextPerformanceVisualizationEnabled to visualize examples", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Fast Path Texts", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Examples of performant fast path texts, turn on IsTextPerformanceVisualizationEnabled to visualize examples", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Fast Path Texts Examples of performant fast path texts, turn on IsTextPerformanceVisualizationEnabled to visualize examples", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Fast Path Texts Examples of performant fast path texts, turn on IsTextPerformanceVisualizationEnabled to visualize examples", + "TestId": "Fast Path Texts", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Fast Path Texts", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "128, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 128, - 28, - ], + "Offset": "0, 0, 0", + "Size": "128, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 128, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Fast Path Texts", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -6168,284 +3672,168 @@ exports[`Home UIA Tree Dump FlatList 1`] = ` { "Automation Tree": { "AutomationId": "FlatList", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "FlatList Performant, scrollable list of data.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "FlatList", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Performant, scrollable list of data.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "ListView", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "FlatList Performant, scrollable list of data.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "FlatList Performant, scrollable list of data.", + "TestId": "FlatList", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "FlatList", + "Offset": "0, 0, 0", + "Size": "968, 100", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "62, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 62, - 27, - ], + "Offset": "0, 0, 0", + "Size": "62, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 62, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "FlatList", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 100, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -6454,284 +3842,168 @@ exports[`Home UIA Tree Dump Flyout 1`] = ` { "Automation Tree": { "AutomationId": "Flyout", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Flyout Displays content on top of existing content, within the bounds of the application window.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Flyout", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Displays content on top of existing content, within the bounds of the application window.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Flyout Displays content on top of existing content, within the bounds of the application window.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Flyout Displays content on top of existing content, within the bounds of the application window.", + "TestId": "Flyout", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Flyout", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "55, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 55, - 27, - ], + "Offset": "0, 0, 0", + "Size": "55, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 55, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Flyout", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -6740,284 +4012,168 @@ exports[`Home UIA Tree Dump Glyph UWP 1`] = ` { "Automation Tree": { "AutomationId": "Glyph UWP", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Glyph UWP Usage of Glyph control.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Glyph UWP", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Usage of Glyph control.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Glyph UWP Usage of Glyph control.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Glyph UWP Usage of Glyph control.", + "TestId": "Glyph UWP", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Glyph UWP", + "Offset": "0, 0, 0", + "Size": "968, 100", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "101, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 101, - 28, - ], + "Offset": "0, 0, 0", + "Size": "101, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 101, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Glyph UWP", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 100, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -7026,284 +4182,168 @@ exports[`Home UIA Tree Dump Image 1`] = ` { "Automation Tree": { "AutomationId": "Image", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Image Base component for displaying different types of images.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Image", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Base component for displaying different types of images.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Image Base component for displaying different types of images.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Image Base component for displaying different types of images.", + "TestId": "Image", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Image", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "55, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 55, - 28, - ], + "Offset": "0, 0, 0", + "Size": "55, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 55, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Image", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -7312,284 +4352,168 @@ exports[`Home UIA Tree Dump Keyboard 1`] = ` { "Automation Tree": { "AutomationId": "Keyboard", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Keyboard Demonstrates usage of the "Keyboard" static API", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Keyboard", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Demonstrates usage of the "Keyboard" static API", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Keyboard Demonstrates usage of the "Keyboard" static API", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Keyboard Demonstrates usage of the "Keyboard" static API", + "TestId": "Keyboard", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Keyboard", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "84, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 84, - 28, - ], + "Offset": "0, 0, 0", + "Size": "84, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 84, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Keyboard", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -7598,284 +4522,168 @@ exports[`Home UIA Tree Dump Keyboard 2`] = ` { "Automation Tree": { "AutomationId": "Keyboard", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Keyboard Demonstrates usage of the "Keyboard" static API", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Keyboard", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Demonstrates usage of the "Keyboard" static API", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Keyboard Demonstrates usage of the "Keyboard" static API", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Keyboard Demonstrates usage of the "Keyboard" static API", + "TestId": "Keyboard", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Keyboard", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "84, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 84, - 28, - ], + "Offset": "0, 0, 0", + "Size": "84, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 84, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Keyboard", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -7884,284 +4692,168 @@ exports[`Home UIA Tree Dump Keyboard Focus Example 1`] = ` { "Automation Tree": { "AutomationId": "Keyboard Focus Example", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Keyboard Focus Example Demo of keyboard focus.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Keyboard Focus Example", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Demo of keyboard focus.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Keyboard Focus Example Demo of keyboard focus.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Keyboard Focus Example Demo of keyboard focus.", + "TestId": "Keyboard Focus Example", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Keyboard Focus Example", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "220, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 220, - 28, - ], + "Offset": "0, 0, 0", + "Size": "220, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 220, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Keyboard Focus Example", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -8170,284 +4862,168 @@ exports[`Home UIA Tree Dump Keyboard extension Example 1`] = ` { "Automation Tree": { "AutomationId": "Keyboard extension Example", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Keyboard extension Example Demo of keyboard properties.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Keyboard extension Example", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Demo of keyboard properties.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Keyboard extension Example Demo of keyboard properties.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Keyboard extension Example Demo of keyboard properties.", + "TestId": "Keyboard extension Example", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Keyboard extension Example", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "254, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 254, - 28, - ], + "Offset": "0, 0, 0", + "Size": "254, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 254, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Keyboard extension Example", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -8456,284 +5032,168 @@ exports[`Home UIA Tree Dump Layout - Flexbox 1`] = ` { "Automation Tree": { "AutomationId": "Layout - Flexbox", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Layout - Flexbox Examples of using the flexbox API to layout views.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Layout - Flexbox", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Examples of using the flexbox API to layout views.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Layout - Flexbox Examples of using the flexbox API to layout views.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Layout - Flexbox Examples of using the flexbox API to layout views.", + "TestId": "Layout - Flexbox", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Layout - Flexbox", + "Offset": "0, 0, 0", + "Size": "968, 100", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "145, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 145, - 28, - ], + "Offset": "0, 0, 0", + "Size": "145, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 145, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Layout - Flexbox", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 100, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -8742,284 +5202,168 @@ exports[`Home UIA Tree Dump Layout Events 1`] = ` { "Automation Tree": { "AutomationId": "Layout Events", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Layout Events Examples that show how Layout events can be used to measure view size and position.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Layout Events", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Examples that show how Layout events can be used to measure view size and position.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Layout Events Examples that show how Layout events can be used to measure view size and position.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Layout Events Examples that show how Layout events can be used to measure view size and position.", + "TestId": "Layout Events", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Layout Events", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "122, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 122, - 28, - ], + "Offset": "0, 0, 0", + "Size": "122, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 122, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Layout Events", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -9028,284 +5372,168 @@ exports[`Home UIA Tree Dump Legacy Native Module 1`] = ` { "Automation Tree": { "AutomationId": "Legacy Native Module", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Legacy Native Module Usage of legacy Native Module", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Legacy Native Module", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Usage of legacy Native Module", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Legacy Native Module Usage of legacy Native Module", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Legacy Native Module Usage of legacy Native Module", + "TestId": "Legacy Native Module", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Legacy Native Module", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "197, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 197, - 28, - ], + "Offset": "0, 0, 0", + "Size": "197, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 197, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Legacy Native Module", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -9314,284 +5542,168 @@ exports[`Home UIA Tree Dump LegacyControlStyleTest 1`] = ` { "Automation Tree": { "AutomationId": "LegacyControlStyleTest", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "LegacyControlStyleTest Legacy e2e test for Control Styles", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "LegacyControlStyleTest", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Legacy e2e test for Control Styles", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Other", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "LegacyControlStyleTest Legacy e2e test for Control Styles", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "LegacyControlStyleTest Legacy e2e test for Control Styles", + "TestId": "LegacyControlStyleTest", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "LegacyControlStyleTest", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "203, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 203, - 27, - ], + "Offset": "0, 0, 0", + "Size": "203, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 203, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "LegacyControlStyleTest", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -9600,284 +5712,168 @@ exports[`Home UIA Tree Dump LegacyImageTest 1`] = ` { "Automation Tree": { "AutomationId": "LegacyImageTest", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "LegacyImageTest Legacy e2e test for Image", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "LegacyImageTest", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Legacy e2e test for Image", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Other", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "LegacyImageTest Legacy e2e test for Image", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "LegacyImageTest Legacy e2e test for Image", + "TestId": "LegacyImageTest", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "LegacyImageTest", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "150, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 150, - 28, - ], + "Offset": "0, 0, 0", + "Size": "150, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 150, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "LegacyImageTest", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -9886,284 +5882,168 @@ exports[`Home UIA Tree Dump LegacyLoginTest 1`] = ` { "Automation Tree": { "AutomationId": "LegacyLoginTest", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "LegacyLoginTest Legacy e2e test for TextInput with password", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "LegacyLoginTest", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Legacy e2e test for TextInput with password", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Other", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "LegacyLoginTest Legacy e2e test for TextInput with password", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "LegacyLoginTest Legacy e2e test for TextInput with password", + "TestId": "LegacyLoginTest", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "LegacyLoginTest", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "145, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 145, - 28, - ], + "Offset": "0, 0, 0", + "Size": "145, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 145, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "LegacyLoginTest", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -10172,284 +6052,168 @@ exports[`Home UIA Tree Dump LegacySelectableTextTest 1`] = ` { "Automation Tree": { "AutomationId": "LegacySelectableTextTest", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "LegacySelectableTextTest Legacy e2e test for selectable Text hit testing", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "LegacySelectableTextTest", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Legacy e2e test for selectable Text hit testing", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Other", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "LegacySelectableTextTest Legacy e2e test for selectable Text hit testing", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "LegacySelectableTextTest Legacy e2e test for selectable Text hit testing", + "TestId": "LegacySelectableTextTest", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "LegacySelectableTextTest", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "220, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 220, - 28, - ], + "Offset": "0, 0, 0", + "Size": "220, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 220, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "LegacySelectableTextTest", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -10458,284 +6222,168 @@ exports[`Home UIA Tree Dump LegacyTextHitTestTest 1`] = ` { "Automation Tree": { "AutomationId": "LegacyTextHitTestTest", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "LegacyTextHitTestTest Legacy e2e test for Text hit testing", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "LegacyTextHitTestTest", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Legacy e2e test for Text hit testing", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Other", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "LegacyTextHitTestTest Legacy e2e test for Text hit testing", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "LegacyTextHitTestTest Legacy e2e test for Text hit testing", + "TestId": "LegacyTextHitTestTest", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "LegacyTextHitTestTest", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "190, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 190, - 27, - ], + "Offset": "0, 0, 0", + "Size": "190, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 190, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "LegacyTextHitTestTest", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -10744,284 +6392,168 @@ exports[`Home UIA Tree Dump LegacyTextInputTest 1`] = ` { "Automation Tree": { "AutomationId": "LegacyTextInputTest", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "LegacyTextInputTest Legacy e2e test for TextInput", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "LegacyTextInputTest", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Legacy e2e test for TextInput", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Other", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { - "AutomationId": "", - "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "text", - "Name": "Android", + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Android", + }, + ], + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "LegacyTextInputTest Legacy e2e test for TextInput", + "TestId": "LegacyTextInputTest", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "LegacyTextInputTest Legacy e2e test for TextInput", }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "LegacyTextInputTest", + "Offset": "0, 0, 0", + "Size": "968, 100", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "177, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 177, - 27, - ], + "Offset": "0, 0, 0", + "Size": "177, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 177, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "LegacyTextInputTest", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 100, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -11030,284 +6562,168 @@ exports[`Home UIA Tree Dump Linking 1`] = ` { "Automation Tree": { "AutomationId": "Linking", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Linking Shows how to use Linking to open URLs.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Linking", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Shows how to use Linking to open URLs.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Linking Shows how to use Linking to open URLs.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Linking Shows how to use Linking to open URLs.", + "TestId": "Linking", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Linking", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "64, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 64, - 27, - ], + "Offset": "0, 0, 0", + "Size": "64, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 64, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Linking", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -11316,284 +6732,168 @@ exports[`Home UIA Tree Dump Mouse Click Events 1`] = ` { "Automation Tree": { "AutomationId": "Mouse Click Events", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Mouse Click Events Tests that mouse click events work on intended components", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Mouse Click Events", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Tests that mouse click events work on intended components", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Mouse Click Events Tests that mouse click events work on intended components", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Mouse Click Events Tests that mouse click events work on intended components", + "TestId": "Mouse Click Events", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Mouse Click Events", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "169, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 169, - 28, - ], + "Offset": "0, 0, 0", + "Size": "169, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 169, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Mouse Click Events", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -11602,284 +6902,168 @@ exports[`Home UIA Tree Dump Mouse Events 1`] = ` { "Automation Tree": { "AutomationId": "Mouse Events", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Mouse Events Tests that mouse events can be observed", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Mouse Events", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Tests that mouse events can be observed", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Mouse Events Tests that mouse events can be observed", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Mouse Events Tests that mouse events can be observed", + "TestId": "Mouse Events", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Mouse Events", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "123, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 123, - 28, - ], + "Offset": "0, 0, 0", + "Size": "123, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 123, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Mouse Events", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -11888,284 +7072,168 @@ exports[`Home UIA Tree Dump Native Animated Example 1`] = ` { "Automation Tree": { "AutomationId": "Native Animated Example", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Native Animated Example Test out Native Animations", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Native Animated Example", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Test out Native Animations", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Native Animated Example Test out Native Animations", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Native Animated Example Test out Native Animations", + "TestId": "Native Animated Example", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Native Animated Example", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "227, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 227, - 27, - ], + "Offset": "0, 0, 0", + "Size": "227, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 227, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Native Animated Example", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -12174,284 +7242,168 @@ exports[`Home UIA Tree Dump New App Screen 1`] = ` { "Automation Tree": { "AutomationId": "New App Screen", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "New App Screen Displays the content of the new app screen", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "New App Screen", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Displays the content of the new app screen", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Other", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "New App Screen Displays the content of the new app screen", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "New App Screen Displays the content of the new app screen", + "TestId": "New App Screen", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "New App Screen", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "147, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 147, - 27, - ], + "Offset": "0, 0, 0", + "Size": "147, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 147, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "New App Screen", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -12460,284 +7412,168 @@ exports[`Home UIA Tree Dump PanResponder Sample 1`] = ` { "Automation Tree": { "AutomationId": "PanResponder Sample", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "PanResponder Sample Shows the Use of PanResponder to provide basic gesture handling", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "PanResponder Sample", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Shows the Use of PanResponder to provide basic gesture handling", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "PanResponder Sample Shows the Use of PanResponder to provide basic gesture handling", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "PanResponder Sample Shows the Use of PanResponder to provide basic gesture handling", + "TestId": "PanResponder Sample", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "PanResponder Sample", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "197, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 197, - 28, - ], + "Offset": "0, 0, 0", + "Size": "197, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 197, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "PanResponder Sample", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -12746,284 +7582,168 @@ exports[`Home UIA Tree Dump Performance API Examples 1`] = ` { "Automation Tree": { "AutomationId": "Performance API Examples", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Performance API Examples Shows the performance API provided in React Native", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Performance API Examples", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Shows the performance API provided in React Native", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Performance API Examples Shows the performance API provided in React Native", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Performance API Examples Shows the performance API provided in React Native", + "TestId": "Performance API Examples", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Performance API Examples", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "234, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 234, - 28, - ], + "Offset": "0, 0, 0", + "Size": "234, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 234, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Performance API Examples", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -13032,284 +7752,168 @@ exports[`Home UIA Tree Dump Performance Comparison Examples 1`] = ` { "Automation Tree": { "AutomationId": "Performance Comparison Examples", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Performance Comparison Examples Compare performance with bad and good examples. Use React DevTools to highlight re-renders is recommended.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Performance Comparison Examples", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Compare performance with bad and good examples. Use React DevTools to highlight re-renders is recommended.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Performance Comparison Examples Compare performance with bad and good examples. Use React DevTools to highlight re-renders is recommended.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Performance Comparison Examples Compare performance with bad and good examples. Use React DevTools to highlight re-renders is recommended.", + "TestId": "Performance Comparison Examples", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Performance Comparison Examples", + "Offset": "0, 0, 0", + "Size": "968, 100", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "312, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 312, - 28, - ], + "Offset": "0, 0, 0", + "Size": "312, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 312, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Performance Comparison Examples", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 100, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -13318,284 +7922,168 @@ exports[`Home UIA Tree Dump PlatformColor 1`] = ` { "Automation Tree": { "AutomationId": "PlatformColor", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "PlatformColor Examples that show how PlatformColors may be used in an app.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "PlatformColor", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Examples that show how PlatformColors may be used in an app.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "PlatformColor Examples that show how PlatformColors may be used in an app.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "PlatformColor Examples that show how PlatformColors may be used in an app.", + "TestId": "PlatformColor", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "PlatformColor", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "123, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 123, - 28, - ], + "Offset": "0, 0, 0", + "Size": "123, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 123, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "PlatformColor", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -13604,284 +8092,168 @@ exports[`Home UIA Tree Dump Pointer Events 1`] = ` { "Automation Tree": { "AutomationId": "Pointer Events", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Pointer Events Demonstrates the use of the pointerEvents prop of a View to control how touches should be handled.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pointer Events", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Demonstrates the use of the pointerEvents prop of a View to control how touches should be handled.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Pointer Events Demonstrates the use of the pointerEvents prop of a View to control how touches should be handled.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Pointer Events Demonstrates the use of the pointerEvents prop of a View to control how touches should be handled.", + "TestId": "Pointer Events", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Pointer Events", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "125, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 125, - 28, - ], + "Offset": "0, 0, 0", + "Size": "125, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 125, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Pointer Events", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -13890,284 +8262,168 @@ exports[`Home UIA Tree Dump Popup 1`] = ` { "Automation Tree": { "AutomationId": "Popup", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Popup Displays content on top of existing content, within the bounds of the application window.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Popup", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Displays content on top of existing content, within the bounds of the application window.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Popup Displays content on top of existing content, within the bounds of the application window.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Popup Displays content on top of existing content, within the bounds of the application window.", + "TestId": "Popup", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Popup", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "58, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 58, - 28, - ], + "Offset": "0, 0, 0", + "Size": "58, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 58, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Popup", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -14176,284 +8432,168 @@ exports[`Home UIA Tree Dump Pressable 1`] = ` { "Automation Tree": { "AutomationId": "Pressable", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Pressable Component for making views pressable.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressable", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Component for making views pressable.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Pressable Component for making views pressable.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Pressable Component for making views pressable.", + "TestId": "Pressable", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Pressable", + "Offset": "0, 0, 0", + "Size": "968, 100", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "83, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 83, - 27, - ], + "Offset": "0, 0, 0", + "Size": "83, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 83, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Pressable", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 100, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -14462,284 +8602,168 @@ exports[`Home UIA Tree Dump RTLExample 1`] = ` { "Automation Tree": { "AutomationId": "RTLExample", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "RTLExample Examples to show how to apply components to RTL layout.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "RTLExample", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Examples to show how to apply components to RTL layout.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "RTLExample Examples to show how to apply components to RTL layout.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "RTLExample Examples to show how to apply components to RTL layout.", + "TestId": "RTLExample", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "RTLExample", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "105, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 105, - 27, - ], + "Offset": "0, 0, 0", + "Size": "105, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 105, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "RTLExample", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -14748,284 +8772,168 @@ exports[`Home UIA Tree Dump ScrollView 1`] = ` { "Automation Tree": { "AutomationId": "ScrollView", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "ScrollView Component that enables scrolling through child components", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "ScrollView", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Component that enables scrolling through child components", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "ScrollView Component that enables scrolling through child components", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "ScrollView Component that enables scrolling through child components", + "TestId": "ScrollView", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "ScrollView", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "91, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 91, - 28, - ], + "Offset": "0, 0, 0", + "Size": "91, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 91, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "ScrollView", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -15034,284 +8942,168 @@ exports[`Home UIA Tree Dump ScrollViewAnimated 1`] = ` { "Automation Tree": { "AutomationId": "ScrollViewAnimated", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "ScrollViewAnimated Component that is animated when ScrollView is offset.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "ScrollViewAnimated", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Component that is animated when ScrollView is offset.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "ScrollViewAnimated Component that is animated when ScrollView is offset.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "ScrollViewAnimated Component that is animated when ScrollView is offset.", + "TestId": "ScrollViewAnimated", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "ScrollViewAnimated", + "Offset": "0, 0, 0", + "Size": "968, 100", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "176, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 176, - 28, - ], + "Offset": "0, 0, 0", + "Size": "176, 28", "Visual Type": "SpriteVisual", }, - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + { + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 176, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "ScrollViewAnimated", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 100, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -15320,284 +9112,168 @@ exports[`Home UIA Tree Dump ScrollViewSimpleExample 1`] = ` { "Automation Tree": { "AutomationId": "ScrollViewSimpleExample", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "ScrollViewSimpleExample Component that enables scrolling through child components.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "ScrollViewSimpleExample", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Component that enables scrolling through child components.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "ScrollViewSimpleExample Component that enables scrolling through child components.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "ScrollViewSimpleExample Component that enables scrolling through child components.", + "TestId": "ScrollViewSimpleExample", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "ScrollViewSimpleExample", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "224, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 224, - 27, - ], + "Offset": "0, 0, 0", + "Size": "224, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 224, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "ScrollViewSimpleExample", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -15608,28 +9284,29 @@ exports[`Home UIA Tree Dump Search Bar 1`] = ` "AutomationId": "explorer_search", "ControlType": 50004, "HelpText": "Search...", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "Search...", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "explorer_search", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "explorer_search", + "Offset": "0, 0, 0", + "Size": "938, 35", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(60, 60, 67, 45)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 7, - 7, - ], + "Offset": "0, 0, 0", + "Size": "7, 7", "Visual Type": "SpriteVisual", }, { @@ -15637,16 +9314,8 @@ exports[`Home UIA Tree Dump Search Bar 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(60, 60, 67, 45)", }, - "Offset": [ - 7, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 924, - 1, - ], + "Offset": "7, 0, 0", + "Size": "924, 1", "Visual Type": "SpriteVisual", }, { @@ -15654,16 +9323,8 @@ exports[`Home UIA Tree Dump Search Bar 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(60, 60, 67, 45)", }, - "Offset": [ - -7, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 7, - 7, - ], + "Offset": "-7, 0, 0", + "Size": "7, 7", "Visual Type": "SpriteVisual", }, { @@ -15671,16 +9332,8 @@ exports[`Home UIA Tree Dump Search Bar 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(60, 60, 67, 45)", }, - "Offset": [ - -1, - 7, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 21, - ], + "Offset": "-1, 7, 0", + "Size": "1, 21", "Visual Type": "SpriteVisual", }, { @@ -15688,16 +9341,8 @@ exports[`Home UIA Tree Dump Search Bar 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(60, 60, 67, 45)", }, - "Offset": [ - -7, - -7, - 0, - ], - "Opacity": 1, - "Size": [ - 7, - 7, - ], + "Offset": "-7, -7, 0", + "Size": "7, 7", "Visual Type": "SpriteVisual", }, { @@ -15705,16 +9350,8 @@ exports[`Home UIA Tree Dump Search Bar 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(60, 60, 67, 45)", }, - "Offset": [ - 7, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 924, - 1, - ], + "Offset": "7, -1, 0", + "Size": "924, 1", "Visual Type": "SpriteVisual", }, { @@ -15722,16 +9359,8 @@ exports[`Home UIA Tree Dump Search Bar 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(60, 60, 67, 45)", }, - "Offset": [ - 0, - -7, - 0, - ], - "Opacity": 1, - "Size": [ - 7, - 7, - ], + "Offset": "0, -7, 0", + "Size": "7, 7", "Visual Type": "SpriteVisual", }, { @@ -15739,16 +9368,8 @@ exports[`Home UIA Tree Dump Search Bar 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(60, 60, 67, 45)", }, - "Offset": [ - 0, - 7, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 21, - ], + "Offset": "0, 7, 0", + "Size": "1, 21", "Visual Type": "SpriteVisual", }, { @@ -15756,31 +9377,12 @@ exports[`Home UIA Tree Dump Search Bar 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "explorer_search", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 35, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -15789,284 +9391,168 @@ exports[`Home UIA Tree Dump SectionList 1`] = ` { "Automation Tree": { "AutomationId": "SectionList", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "SectionList Performant, scrollable list of data.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "SectionList", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Performant, scrollable list of data.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "ListView", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "SectionList Performant, scrollable list of data.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "SectionList Performant, scrollable list of data.", + "TestId": "SectionList", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "SectionList", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "95, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 95, - 28, - ], + "Offset": "0, 0, 0", + "Size": "95, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 95, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "SectionList", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -16075,284 +9561,168 @@ exports[`Home UIA Tree Dump Share 1`] = ` { "Automation Tree": { "AutomationId": "Share", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Share Share data with other Apps.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Share", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Share data with other Apps.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Other", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Share Share data with other Apps.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Share Share data with other Apps.", + "TestId": "Share", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Share", + "Offset": "0, 0, 0", + "Size": "968, 100", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "50, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 28, - ], + "Offset": "0, 0, 0", + "Size": "50, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Share", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 100, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -16361,284 +9731,168 @@ exports[`Home UIA Tree Dump SwipeableCard 1`] = ` { "Automation Tree": { "AutomationId": "SwipeableCard", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "SwipeableCard Example of a swipeable card with scrollable content to test PanResponder and JSResponderHandler interaction.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "SwipeableCard", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Example of a swipeable card with scrollable content to test PanResponder and JSResponderHandler interaction.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "SwipeableCard Example of a swipeable card with scrollable content to test PanResponder and JSResponderHandler interaction.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "SwipeableCard Example of a swipeable card with scrollable content to test PanResponder and JSResponderHandler interaction.", + "TestId": "SwipeableCard", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "SwipeableCard", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "131, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 131, - 28, - ], + "Offset": "0, 0, 0", + "Size": "131, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 131, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "SwipeableCard", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -16647,284 +9901,168 @@ exports[`Home UIA Tree Dump Switch 1`] = ` { "Automation Tree": { "AutomationId": "Switch", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Switch Native boolean input", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Switch", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Native boolean input", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Switch Native boolean input", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Switch Native boolean input", + "TestId": "Switch", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Switch", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "57, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 57, - 27, - ], + "Offset": "0, 0, 0", + "Size": "57, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 57, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Switch", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -16933,284 +10071,168 @@ exports[`Home UIA Tree Dump Text 1`] = ` { "Automation Tree": { "AutomationId": "Text", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Text Base component for rendering styled text.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Text", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Base component for rendering styled text.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Text Base component for rendering styled text.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Text Base component for rendering styled text.", + "TestId": "Text", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Text", + "Offset": "0, 0, 0", + "Size": "968, 100", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "35, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 35, - 27, - ], + "Offset": "0, 0, 0", + "Size": "35, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 35, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Text", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 100, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -17219,284 +10241,168 @@ exports[`Home UIA Tree Dump TextInput 1`] = ` { "Automation Tree": { "AutomationId": "TextInput", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "TextInput Single and multi-line text inputs.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "TextInput", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Single and multi-line text inputs.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "TextInput Single and multi-line text inputs.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "TextInput Single and multi-line text inputs.", + "TestId": "TextInput", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "TextInput", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "82, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 82, - 28, - ], + "Offset": "0, 0, 0", + "Size": "82, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 82, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "TextInput", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -17505,284 +10411,168 @@ exports[`Home UIA Tree Dump TextInputs with key prop 1`] = ` { "Automation Tree": { "AutomationId": "TextInputs with key prop", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "TextInputs with key prop Periodically render large number of TextInputs with key prop without a Runtime Error", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "TextInputs with key prop", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Periodically render large number of TextInputs with key prop without a Runtime Error", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Other", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "TextInputs with key prop Periodically render large number of TextInputs with key prop without a Runtime Error", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "TextInputs with key prop Periodically render large number of TextInputs with key prop without a Runtime Error", + "TestId": "TextInputs with key prop", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "TextInputs with key prop", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "217, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 217, - 28, - ], + "Offset": "0, 0, 0", + "Size": "217, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 217, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "TextInputs with key prop", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -17791,284 +10581,168 @@ exports[`Home UIA Tree Dump Timers 1`] = ` { "Automation Tree": { "AutomationId": "Timers", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Timers A demonstration of Timers in React Native.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Timers", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "A demonstration of Timers in React Native.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Timers A demonstration of Timers in React Native.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Timers A demonstration of Timers in React Native.", + "TestId": "Timers", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Timers", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "59, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 59, - 28, - ], + "Offset": "0, 0, 0", + "Size": "59, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 59, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Timers", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -18077,284 +10751,168 @@ exports[`Home UIA Tree Dump Touchable* and onPress 1`] = ` { "Automation Tree": { "AutomationId": "Touchable* and onPress", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Touchable* and onPress Touchable and onPress examples.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Touchable* and onPress", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Touchable and onPress examples.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Touchable* and onPress Touchable and onPress examples.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Touchable* and onPress Touchable and onPress examples.", + "TestId": "Touchable* and onPress", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Touchable* and onPress", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "211, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 211, - 28, - ], + "Offset": "0, 0, 0", + "Size": "211, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 211, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Touchable* and onPress", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -18363,284 +10921,168 @@ exports[`Home UIA Tree Dump TransferProperties 1`] = ` { "Automation Tree": { "AutomationId": "TransferProperties", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "TransferProperties Some tests that change the backing XAML element to see if transfer properties is working.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "TransferProperties", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Some tests that change the backing XAML element to see if transfer properties is working.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "TransferProperties Some tests that change the backing XAML element to see if transfer properties is working.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "TransferProperties Some tests that change the backing XAML element to see if transfer properties is working.", + "TestId": "TransferProperties", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "TransferProperties", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "159, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 159, - 27, - ], + "Offset": "0, 0, 0", + "Size": "159, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 159, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "TransferProperties", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -18649,284 +11091,168 @@ exports[`Home UIA Tree Dump Transforms 1`] = ` { "Automation Tree": { "AutomationId": "Transforms", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "Transforms View transforms", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Transforms", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "View transforms", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "Transforms View transforms", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Transforms View transforms", + "TestId": "Transforms", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "Transforms", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "97, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 97, - 28, - ], + "Offset": "0, 0, 0", + "Size": "97, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 97, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "Transforms", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -18935,284 +11261,168 @@ exports[`Home UIA Tree Dump TransparentHitTestExample 1`] = ` { "Automation Tree": { "AutomationId": "TransparentHitTestExample", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "TransparentHitTestExample Transparent view receiving touch events", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "TransparentHitTestExample", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Transparent view receiving touch events", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "TransparentHitTestExample Transparent view receiving touch events", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "TransparentHitTestExample Transparent view receiving touch events", + "TestId": "TransparentHitTestExample", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "TransparentHitTestExample", + "Offset": "0, 0, 0", + "Size": "968, 100", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "237, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 237, - 28, - ], + "Offset": "0, 0, 0", + "Size": "237, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 237, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "TransparentHitTestExample", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 100, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -19221,284 +11431,168 @@ exports[`Home UIA Tree Dump TurboModule 1`] = ` { "Automation Tree": { "AutomationId": "TurboModule", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "TurboModule Usage of TurboModule", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "TurboModule", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Usage of TurboModule", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "TurboModule Usage of TurboModule", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "TurboModule Usage of TurboModule", + "TestId": "TurboModule", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "TurboModule", + "Offset": "0, 0, 0", + "Size": "968, 100", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "121, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 121, - 27, - ], + "Offset": "0, 0, 0", + "Size": "121, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 121, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "TurboModule", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 100, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -19507,284 +11601,168 @@ exports[`Home UIA Tree Dump View 1`] = ` { "Automation Tree": { "AutomationId": "View", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "View Basic building block of all UI, examples that demonstrate some of the many styles available.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "View", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic building block of all UI, examples that demonstrate some of the many styles available.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { - "AutomationId": "", - "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "text", - "Name": "Android", + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Android", + }, + ], + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "View Basic building block of all UI, examples that demonstrate some of the many styles available.", + "TestId": "View", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "View Basic building block of all UI, examples that demonstrate some of the many styles available.", }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "View", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "43, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 43, - 28, - ], + "Offset": "0, 0, 0", + "Size": "43, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 43, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "View", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -19793,284 +11771,168 @@ exports[`Home UIA Tree Dump WebSocket 1`] = ` { "Automation Tree": { "AutomationId": "WebSocket", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "WebSocket WebSocket API", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "WebSocket", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "WebSocket API", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "WebSocket WebSocket API", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "WebSocket WebSocket API", + "TestId": "WebSocket", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "WebSocket", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "99, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 99, - 27, - ], + "Offset": "0, 0, 0", + "Size": "99, 27", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 99, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "WebSocket", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -20079,284 +11941,168 @@ exports[`Home UIA Tree Dump XAML 1`] = ` { "Automation Tree": { "AutomationId": "XAML", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "XAML Usage of react-native-xaml controls", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "XAML", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Usage of react-native-xaml controls", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "UI", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "XAML Usage of react-native-xaml controls", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "XAML Usage of react-native-xaml controls", + "TestId": "XAML", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "XAML", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "53, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 53, - 28, - ], + "Offset": "0, 0, 0", + "Size": "53, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 53, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], + "Offset": "0, 0, 0", + "Size": "65, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], + "Offset": "0, 0, 0", + "Size": "22, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], + "Offset": "0, 0, 0", + "Size": "52, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "XAML", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -20365,284 +12111,168 @@ exports[`Home UIA Tree Dump XMLHttpRequest 1`] = ` { "Automation Tree": { "AutomationId": "XMLHttpRequest", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "Name": "XMLHttpRequest Example that demonstrates upload and download requests using XMLHttpRequest.", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "XMLHttpRequest", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Example that demonstrates upload and download requests using XMLHttpRequest.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Basic", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "iOS", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Android", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "XMLHttpRequest Example that demonstrates upload and download requests using XMLHttpRequest.", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "XMLHttpRequest Example that demonstrates upload and download requests using XMLHttpRequest.", + "TestId": "XMLHttpRequest", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "XMLHttpRequest", + "Offset": "0, 0, 0", + "Size": "968, 99", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "15, 12, 0", + "Size": "150, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 150, - 28, - ], + "Offset": "0, 0, 0", + "Size": "150, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 12, - 0, - ], - "Opacity": 1, - "Size": [ - 150, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 43, 0", + "Size": "938, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], + "Offset": "0, 0, 0", + "Size": "938, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 43, - 0, - ], - "Opacity": 1, - "Size": [ - 938, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 69, 0", + "Size": "65, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], + "Offset": "0, 0, 0", + "Size": "65, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 65, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "853, 69, 0", + "Size": "22, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], + "Offset": "0, 0, 0", + "Size": "22, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 853, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 22, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "901, 69, 0", + "Size": "52, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], + "Offset": "0, 0, 0", + "Size": "52, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 901, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 52, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "XMLHttpRequest", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 968, - 99, - ], - "Visual Type": "SpriteVisual", }, } `; diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyControlStyleTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyControlStyleTest.test.ts.snap index 0f6329291d4..48b9f5a5711 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyControlStyleTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyControlStyleTest.test.ts.snap @@ -3,18 +3,16 @@ exports[`LegacyControlStyleTest ControlStyleTestWithRegularBorder #2 1`] = ` { "Automation Tree": {}, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "control-style-switch-view", + }, + }, "Visual Tree": { "Comment": "control-style-switch-view", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 998, - 180, - ], + "Offset": "0, 0, 0", + "Size": "998, 180", "Visual Type": "SpriteVisual", }, } @@ -23,18 +21,16 @@ exports[`LegacyControlStyleTest ControlStyleTestWithRegularBorder #2 1`] = ` exports[`LegacyControlStyleTest ControlStyleTestWithRegularBorder 1`] = ` { "Automation Tree": {}, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "control-style-switch-view", + }, + }, "Visual Tree": { "Comment": "control-style-switch-view", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 998, - 180, - ], + "Offset": "0, 0, 0", + "Size": "998, 180", "Visual Type": "SpriteVisual", }, } @@ -43,18 +39,16 @@ exports[`LegacyControlStyleTest ControlStyleTestWithRegularBorder 1`] = ` exports[`LegacyControlStyleTest ControlStyleTestWithRoundBorder 1`] = ` { "Automation Tree": {}, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "control-style-switch-view", + }, + }, "Visual Tree": { "Comment": "control-style-switch-view", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 998, - 180, - ], + "Offset": "0, 0, 0", + "Size": "998, 180", "Visual Type": "SpriteVisual", }, } diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyImageTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyImageTest.test.ts.snap index 92588202e12..6ddb67b2c6a 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyImageTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyImageTest.test.ts.snap @@ -3,129 +3,63 @@ exports[`LegacyImageTest ImageRTLTest 1`] = ` { "Automation Tree": {}, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "image-container", + }, + }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 0, 255)", }, - "Children": [ + "Comment": "image-container", + "Offset": "0, 0, 0", + "Size": "500, 300", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 20, - 20, - ], + "Offset": "0, 0, 0", + "Size": "20, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 20, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 460, - 10, - ], + "Offset": "20, 0, 0", + "Size": "460, 10", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -20, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 20, - 20, - ], + "Offset": "-20, 0, 0", + "Size": "20, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -10, - 20, - 0, - ], - "Opacity": 1, - "Size": [ - 10, - 260, - ], + "Offset": "-10, 20, 0", + "Size": "10, 260", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -20, - -20, - 0, - ], - "Opacity": 1, - "Size": [ - 20, - 20, - ], + "Offset": "-20, -20, 0", + "Size": "20, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 20, - -10, - 0, - ], - "Opacity": 1, - "Size": [ - 460, - 10, - ], + "Offset": "20, -10, 0", + "Size": "460, 10", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -20, - 0, - ], - "Opacity": 1, - "Size": [ - 20, - 20, - ], + "Offset": "0, -20, 0", + "Size": "20, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 20, - 0, - ], - "Opacity": 1, - "Size": [ - 10, - 260, - ], + "Offset": "0, 20, 0", + "Size": "10, 260", "Visual Type": "SpriteVisual", }, ], - "Comment": "image-container", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 500, - 300, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -133,27 +67,29 @@ exports[`LegacyImageTest ImageRTLTest 1`] = ` exports[`LegacyImageTest ImageWithBorderTest 1`] = ` { "Automation Tree": {}, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "image-container", + }, + }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 0, 255)", }, - "Children": [ + "Comment": "image-container", + "Offset": "0, 0, 0", + "Size": "500, 300", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 255, 0, 85)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 20, - 20, - ], + "Offset": "0, 0, 0", + "Size": "20, 20", "Visual Type": "SpriteVisual", }, { @@ -161,16 +97,8 @@ exports[`LegacyImageTest ImageWithBorderTest 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 255, 0, 85)", }, - "Offset": [ - 20, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 460, - 10, - ], + "Offset": "20, 0, 0", + "Size": "460, 10", "Visual Type": "SpriteVisual", }, { @@ -178,16 +106,8 @@ exports[`LegacyImageTest ImageWithBorderTest 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 255, 0, 85)", }, - "Offset": [ - -20, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 20, - 20, - ], + "Offset": "-20, 0, 0", + "Size": "20, 20", "Visual Type": "SpriteVisual", }, { @@ -195,16 +115,8 @@ exports[`LegacyImageTest ImageWithBorderTest 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 255, 0, 85)", }, - "Offset": [ - -10, - 20, - 0, - ], - "Opacity": 1, - "Size": [ - 10, - 260, - ], + "Offset": "-10, 20, 0", + "Size": "10, 260", "Visual Type": "SpriteVisual", }, { @@ -212,16 +124,8 @@ exports[`LegacyImageTest ImageWithBorderTest 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 255, 0, 85)", }, - "Offset": [ - -20, - -20, - 0, - ], - "Opacity": 1, - "Size": [ - 20, - 20, - ], + "Offset": "-20, -20, 0", + "Size": "20, 20", "Visual Type": "SpriteVisual", }, { @@ -229,16 +133,8 @@ exports[`LegacyImageTest ImageWithBorderTest 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 255, 0, 85)", }, - "Offset": [ - 20, - -10, - 0, - ], - "Opacity": 1, - "Size": [ - 460, - 10, - ], + "Offset": "20, -10, 0", + "Size": "460, 10", "Visual Type": "SpriteVisual", }, { @@ -246,16 +142,8 @@ exports[`LegacyImageTest ImageWithBorderTest 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 255, 0, 85)", }, - "Offset": [ - 0, - -20, - 0, - ], - "Opacity": 1, - "Size": [ - 20, - 20, - ], + "Offset": "0, -20, 0", + "Size": "20, 20", "Visual Type": "SpriteVisual", }, { @@ -263,31 +151,11 @@ exports[`LegacyImageTest ImageWithBorderTest 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 255, 0, 85)", }, - "Offset": [ - 0, - 20, - 0, - ], - "Opacity": 1, - "Size": [ - 10, - 260, - ], + "Offset": "0, 20, 0", + "Size": "10, 260", "Visual Type": "SpriteVisual", }, ], - "Comment": "image-container", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 500, - 300, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -295,22 +163,20 @@ exports[`LegacyImageTest ImageWithBorderTest 1`] = ` exports[`LegacyImageTest ImageWithoutBorderTest 1`] = ` { "Automation Tree": {}, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "image-container", + }, + }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 0, 255)", }, "Comment": "image-container", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 500, - 300, - ], + "Offset": "0, 0, 0", + "Size": "500, 300", "Visual Type": "SpriteVisual", }, } @@ -319,129 +185,63 @@ exports[`LegacyImageTest ImageWithoutBorderTest 1`] = ` exports[`LegacyImageTest ImageWithoutBorderTestOneMoreClick 1`] = ` { "Automation Tree": {}, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "image-container", + }, + }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 0, 255)", }, - "Children": [ + "Comment": "image-container", + "Offset": "0, 0, 0", + "Size": "500, 300", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 20, - 20, - ], + "Offset": "0, 0, 0", + "Size": "20, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 20, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 460, - 10, - ], + "Offset": "20, 0, 0", + "Size": "460, 10", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -20, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 20, - 20, - ], + "Offset": "-20, 0, 0", + "Size": "20, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -10, - 20, - 0, - ], - "Opacity": 1, - "Size": [ - 10, - 260, - ], + "Offset": "-10, 20, 0", + "Size": "10, 260", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -20, - -20, - 0, - ], - "Opacity": 1, - "Size": [ - 20, - 20, - ], + "Offset": "-20, -20, 0", + "Size": "20, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 20, - -10, - 0, - ], - "Opacity": 1, - "Size": [ - 460, - 10, - ], + "Offset": "20, -10, 0", + "Size": "460, 10", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -20, - 0, - ], - "Opacity": 1, - "Size": [ - 20, - 20, - ], + "Offset": "0, -20, 0", + "Size": "20, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 20, - 0, - ], - "Opacity": 1, - "Size": [ - 10, - 260, - ], + "Offset": "0, 20, 0", + "Size": "10, 260", "Visual Type": "SpriteVisual", }, ], - "Comment": "image-container", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 500, - 300, - ], - "Visual Type": "SpriteVisual", }, } `; diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/LegacySelectableTextTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/LegacySelectableTextTest.test.ts.snap index 81f2a155556..ce6e3103926 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/LegacySelectableTextTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/LegacySelectableTextTest.test.ts.snap @@ -5,24 +5,19 @@ exports[`LegacySelectableTextTest DoubleClickWhenNotSelectable 1`] = ` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 2 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } @@ -33,24 +28,19 @@ exports[`LegacySelectableTextTest DoubleClickWhenSelectable 1`] = ` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 2 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } @@ -61,24 +51,19 @@ exports[`LegacySelectableTextTest PressableWhenNotSelectable 1`] = ` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 1 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } @@ -89,24 +74,19 @@ exports[`LegacySelectableTextTest PressableWhenSelectable 1`] = ` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 1 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextHitTestTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextHitTestTest.test.ts.snap index 271e71282d5..7e960e55cf3 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextHitTestTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextHitTestTest.test.ts.snap @@ -5,24 +5,19 @@ exports[`LegacyTextHitTestTest BidirectionalTextPressable 1`] = ` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 2 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } @@ -33,24 +28,19 @@ exports[`LegacyTextHitTestTest BidirectionalTextPressableEdgeCaseNotPressable 1` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 1 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } @@ -61,24 +51,19 @@ exports[`LegacyTextHitTestTest BidirectionalTextSeparateRunsEdgeCasePressable 1` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 1 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } @@ -89,24 +74,19 @@ exports[`LegacyTextHitTestTest BidirectionalTextSeparateRunsPressable 1`] = ` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 2 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } @@ -117,24 +97,19 @@ exports[`LegacyTextHitTestTest InsertedVirtualTextPressable 1`] = ` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 1 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } @@ -145,24 +120,19 @@ exports[`LegacyTextHitTestTest LTRTextInRTLFlowPressable 1`] = ` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 1 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } @@ -173,24 +143,19 @@ exports[`LegacyTextHitTestTest MultilineRTLTextEdgeCaseNotPressable 1`] = ` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 1 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } @@ -201,24 +166,19 @@ exports[`LegacyTextHitTestTest MultilineRTLTextPressable 1`] = ` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 2 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } @@ -229,24 +189,19 @@ exports[`LegacyTextHitTestTest MultilineTextPressable 1`] = ` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 1 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } @@ -257,24 +212,19 @@ exports[`LegacyTextHitTestTest RTLTextInRTLFlowPressable 1`] = ` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 1 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } @@ -285,24 +235,19 @@ exports[`LegacyTextHitTestTest RTLTextPressable 1`] = ` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 1 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } @@ -313,24 +258,19 @@ exports[`LegacyTextHitTestTest TextPressableWithVirtualText 1`] = ` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 1 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } @@ -341,24 +281,19 @@ exports[`LegacyTextHitTestTest ToggleVirtualTextPressable 1`] = ` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 1 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } @@ -369,24 +304,19 @@ exports[`LegacyTextHitTestTest VirtualTextPressable 1`] = ` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 1 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } @@ -397,24 +327,19 @@ exports[`LegacyTextHitTestTest WrappedLTRInRTLFlowEdgeCaseNotPressable 1`] = ` "Automation Tree": { "AutomationId": "pressed-state", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressed: 1 times.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressed-state", + }, + }, "Visual Tree": { "Comment": "pressed-state", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 103, - 20, - ], + "Offset": "0, 0, 0", + "Size": "103, 20", "Visual Type": "SpriteVisual", }, } diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextInputTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextInputTest.test.ts.snap index 74bd9c140f5..a31c7c77e12 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextInputTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextInputTest.test.ts.snap @@ -5,25 +5,20 @@ exports[`LegacyTextInputTest Click on TextInput to focus 1`] = ` "Automation Tree": { "AutomationId": "textinput-log", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "onFocus ", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "textinput-log", + }, + }, "Visual Tree": { "Comment": "textinput-log", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 998, - 38, - ], + "Offset": "0, 0, 0", + "Size": "998, 38", "Visual Type": "SpriteVisual", }, } @@ -34,26 +29,21 @@ exports[`LegacyTextInputTest Click on multiline TextInput to move focus away fro "Automation Tree": { "AutomationId": "textinput-log", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "onBlur onFocus ", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "textinput-log", + }, + }, "Visual Tree": { "Comment": "textinput-log", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 998, - 57, - ], + "Offset": "0, 0, 0", + "Size": "998, 57", "Visual Type": "SpriteVisual", }, } @@ -64,9 +54,6 @@ exports[`LegacyTextInputTest TextInput onChange before onSelectionChange 1`] = ` "Automation Tree": { "AutomationId": "textinput-log", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "onChange text: a onSelectionChange range: 1,1 @@ -115,18 +102,16 @@ onBlur onFocus ", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "textinput-log", + }, + }, "Visual Tree": { "Comment": "textinput-log", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 998, - 858, - ], + "Offset": "0, 0, 0", + "Size": "998, 858", "Visual Type": "SpriteVisual", }, } @@ -137,9 +122,6 @@ exports[`LegacyTextInputTest Type abc on TextInput 1`] = ` "Automation Tree": { "AutomationId": "textinput-log", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "onChange text: abc onSelectionChange range: 3,3 @@ -158,18 +140,16 @@ onBlur onFocus ", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "textinput-log", + }, + }, "Visual Tree": { "Comment": "textinput-log", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 998, - 299, - ], + "Offset": "0, 0, 0", + "Size": "998, 299", "Visual Type": "SpriteVisual", }, } @@ -180,9 +160,6 @@ exports[`LegacyTextInputTest Type abc on multiline TextInput then press Enter ke "Automation Tree": { "AutomationId": "textinput-log", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "onSubmitEditing text: abc onChange text: abc @@ -224,18 +201,16 @@ onBlur onFocus ", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "textinput-log", + }, + }, "Visual Tree": { "Comment": "textinput-log", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 998, - 727, - ], + "Offset": "0, 0, 0", + "Size": "998, 727", "Visual Type": "SpriteVisual", }, } diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap index f0b8b25a0dd..163c8dea536 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap @@ -4,80 +4,54 @@ exports[`Pressable Tests Pressables can be disabled, disabled = {false} 1`] = ` { "Automation Tree": { "AutomationId": "pressable_disabled_false", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Enabled Pressable", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "pressable_disabled_false", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "pressable_disabled_false", + "Offset": "0, 0, 0", + "Size": "916, 39", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "402, 10, 0", + "Size": "112, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 112, - 19, - ], + "Offset": "0, 0, 0", + "Size": "112, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 402, - 10, - 0, - ], - "Opacity": 1, - "Size": [ - 112, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "pressable_disabled_false", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 39, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -86,80 +60,58 @@ exports[`Pressable Tests Pressables can be disabled, disabled = {true} 1`] = ` { "Automation Tree": { "AutomationId": "pressable_disabled_true", - "Children": [ + "ControlType": 50026, + "IsEnabled": false, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Disabled Pressable", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": false, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "pressable_disabled_true", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "Opacity": 0.5, + }, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "pressable_disabled_true", + "Offset": "0, 0, 0", + "Size": "916, 38", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "400, 10, 0", + "Size": "116, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0.5, - "Size": [ - 116, - 20, - ], + "Size": "116, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 400, - 10, - 0, - ], - "Opacity": 1, - "Size": [ - 116, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "pressable_disabled_true", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 38, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -168,84 +120,58 @@ exports[`Pressable Tests Pressables can change style when pressed 1`] = ` { "Automation Tree": { "AutomationId": "style-change-pressable", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Press Me", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "style-change-pressable", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 255, 255, 255)", }, - "Children": [ + "Comment": "style-change-pressable", + "Offset": "0, 0, 0", + "Size": "76, 34", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "6, 6, 0", + "Size": "64, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 64, - 22, - ], + "Offset": "0, 0, 0", + "Size": "64, 22", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 6, - 6, - 0, - ], - "Opacity": 1, - "Size": [ - 64, - 22, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "style-change-pressable", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 76, - 34, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -255,24 +181,19 @@ exports[`Pressable Tests Pressables can change text on press/rest, state rest 1` "Automation Tree": { "AutomationId": "one_press_me_button", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Press Me", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "one_press_me_button", + }, + }, "Visual Tree": { "Comment": "one_press_me_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 64, - 22, - ], + "Offset": "0, 0, 0", + "Size": "64, 22", "Visual Type": "SpriteVisual", }, } @@ -283,24 +204,19 @@ exports[`Pressable Tests Pressables can change text on press/rest, state rest 2` "Automation Tree": { "AutomationId": "pressable_press_console", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "onPress", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "pressable_press_console", + }, + }, "Visual Tree": { "Comment": "pressable_press_console", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 854, - 20, - ], + "Offset": "0, 0, 0", + "Size": "854, 20", "Visual Type": "SpriteVisual", }, } @@ -310,84 +226,58 @@ exports[`Pressable Tests Pressables can have advanced borders 1`] = ` { "Automation Tree": { "AutomationId": "pressable_hit_slop_button", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Press Outside This View", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "pressable_hit_slop_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 0, 0, 255)", }, - "Children": [ + "Comment": "pressable_hit_slop_button", + "Offset": "0, 0, 0", + "Size": "146, 18", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "146, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 146, - 20, - ], + "Offset": "0, 0, 0", + "Size": "146, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 146, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "pressable_hit_slop_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 146, - 18, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -396,80 +286,54 @@ exports[`Pressable Tests Pressables can have delayed event handlers 1`] = ` { "Automation Tree": { "AutomationId": "pressable_delay_events_button", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Press Me", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "pressable_delay_events_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "pressable_delay_events_button", + "Offset": "0, 0, 0", + "Size": "56, 18", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "56, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 56, - 20, - ], + "Offset": "0, 0, 0", + "Size": "56, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 56, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "pressable_delay_events_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 56, - 18, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -478,238 +342,124 @@ exports[`Pressable Tests Pressables can have delayed event handlers 2`] = ` { "Automation Tree": { "AutomationId": "pressable_delay_events_console", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "pressOut", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "pressIn", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "pressable_delay_events_console", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(249, 249, 249, 255)", }, - "Children": [ + "Comment": "pressable_delay_events_console", + "Offset": "0, 0, 0", + "Size": "896, 120", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "11, 11, 0", + "Size": "874, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 874, - 19, - ], + "Offset": "0, 0, 0", + "Size": "874, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 11, - 11, - 0, - ], - "Opacity": 1, - "Size": [ - 874, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "11, 29, 0", + "Size": "874, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 874, - 20, - ], + "Offset": "0, 0, 0", + "Size": "874, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 11, - 29, - 0, - ], - "Opacity": 1, - "Size": [ - 874, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "pressable_delay_events_console", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 896, - 120, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -718,80 +468,56 @@ exports[`Pressable Tests Pressables can have event handlers 1`] = ` { "Automation Tree": { "AutomationId": "pressable_feedback_events_button", - "Children": [ + "ControlType": 50000, + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "pressable feedback events", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Press Me", }, ], - "ControlType": 50000, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "pressable feedback events", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "pressable feedback events", + "TestId": "pressable_feedback_events_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "pressable_feedback_events_button", + "Offset": "0, 0, 0", + "Size": "56, 18", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "56, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 56, - 20, - ], + "Offset": "0, 0, 0", + "Size": "56, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 56, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "pressable_feedback_events_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 56, - 18, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -800,338 +526,178 @@ exports[`Pressable Tests Pressables can have event handlers 2`] = ` { "Automation Tree": { "AutomationId": "pressable_feedback_events_console", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "pressOut", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "press", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "pressIn", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "hover in", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "pressable_feedback_events_console", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(249, 249, 249, 255)", }, - "Children": [ + "Comment": "pressable_feedback_events_console", + "Offset": "0, 0, 0", + "Size": "896, 120", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "11, 11, 0", + "Size": "874, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 874, - 19, - ], + "Offset": "0, 0, 0", + "Size": "874, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 11, - 11, - 0, - ], - "Opacity": 1, - "Size": [ - 874, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "11, 29, 0", + "Size": "874, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 874, - 20, - ], + "Offset": "0, 0, 0", + "Size": "874, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 11, - 29, - 0, - ], - "Opacity": 1, - "Size": [ - 874, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "11, 48, 0", + "Size": "874, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 874, - 20, - ], + "Offset": "0, 0, 0", + "Size": "874, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 11, - 48, - 0, - ], - "Opacity": 1, - "Size": [ - 874, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "11, 66, 0", + "Size": "874, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 874, - 19, - ], + "Offset": "0, 0, 0", + "Size": "874, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 11, - 66, - 0, - ], - "Opacity": 1, - "Size": [ - 874, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "pressable_feedback_events_console", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 896, - 120, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1140,84 +706,58 @@ exports[`Pressable Tests Pressables can have hit slop functionality 1`] = ` { "Automation Tree": { "AutomationId": "pressable_hit_slop_button", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Press Outside This View", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "pressable_hit_slop_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 0, 0, 255)", }, - "Children": [ + "Comment": "pressable_hit_slop_button", + "Offset": "0, 0, 0", + "Size": "146, 18", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "146, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 146, - 20, - ], + "Offset": "0, 0, 0", + "Size": "146, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 146, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "pressable_hit_slop_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 146, - 18, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1226,624 +766,397 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` { "Automation Tree": { "AutomationId": "opacity_pressable", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "group", - "Name": "", }, { "AutomationId": "", "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "group", - "Name": "", }, { "AutomationId": "", "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "group", - "Name": "", }, { "AutomationId": "", "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "group", - "Name": "", }, { "AutomationId": "", "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "group", - "Name": "", }, { "AutomationId": "", "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "group", - "Name": "", }, { "AutomationId": "", "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "group", - "Name": "", }, { "AutomationId": "", "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "group", - "Name": "", }, { "AutomationId": "", "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "group", - "Name": "", }, { "AutomationId": "", "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "group", - "Name": "", }, { "AutomationId": "", "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "group", - "Name": "", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "opacity_pressable", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "Opacity": 0, + }, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "Opacity": 0.10000000149011612, + }, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "Opacity": 0.20000000298023224, + }, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "Opacity": 0.30000001192092896, + }, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "Opacity": 0.4000000059604645, + }, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "Opacity": 0.5, + }, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "Opacity": 0.6000000238418579, + }, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "Opacity": 0.699999988079071, + }, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "Opacity": 0.800000011920929, + }, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "Opacity": 0.8999999761581421, + }, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "opacity_pressable", + "Offset": "0, 0, 0", + "Size": "916, 550", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 50, - 50, - ], + "Size": "50, 50", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 50, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0.10000000149011612, - "Size": [ - 50, - 50, - ], + "Size": "50, 50", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 50, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 100, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0.20000000298023224, - "Size": [ - 50, - 50, - ], + "Size": "50, 50", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 100, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 150, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0.30000001192092896, - "Size": [ - 50, - 50, - ], + "Size": "50, 50", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 150, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 200, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0.4000000059604645, - "Size": [ - 50, - 50, - ], + "Size": "50, 50", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 200, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 250, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0.5, - "Size": [ - 50, - 50, - ], + "Size": "50, 50", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 250, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 300, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0.6000000238418579, - "Size": [ - 50, - 50, - ], + "Size": "50, 50", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 300, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 350, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0.699999988079071, - "Size": [ - 50, - 50, - ], + "Size": "50, 50", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 350, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 400, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0.800000011920929, - "Size": [ - 50, - 50, - ], + "Size": "50, 50", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 400, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 450, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0.8999999761581421, - "Size": [ - 50, - 50, - ], + "Size": "50, 50", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 450, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 500, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], + "Offset": "0, 0, 0", + "Size": "50, 50", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 500, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "opacity_pressable", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 550, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1852,424 +1165,249 @@ exports[`Pressable Tests Pressables can have their accessibility and keyboard fo { "Automation Tree": { "AutomationId": "accessible_pressable", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressable with accessible=true and focusable=true", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressable with accessible=false", }, { "AutomationId": "", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressable with focusable=false", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressable with accessible=false and focusable=false", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "accessible_pressable", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "accessible_pressable", + "Offset": "0, 0, 0", + "Size": "916, 180", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], + "Offset": "0, 0, 0", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 50, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], + "Offset": "0, 0, 0", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 50, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 100, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], + "Offset": "0, 0, 0", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 100, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 150, 0", + "Size": "916, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], + "Offset": "0, 0, 0", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 30, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 150, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 30, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "accessible_pressable", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 180, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2278,80 +1416,54 @@ exports[`Pressable Tests Pressables can have tooltips 1`] = ` { "Automation Tree": { "AutomationId": "tooltip_pressable", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Pressable with ToolTip "Pressable"", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "tooltip_pressable", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "tooltip_pressable", + "Offset": "0, 0, 0", + "Size": "916, 18", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], + "Offset": "0, 0, 0", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "tooltip_pressable", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 18, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2360,562 +1472,336 @@ exports[`Pressable Tests Pressables can hide their backface 1`] = ` { "Automation Tree": { "AutomationId": "backface_pressable", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "View #1, front is visible, back is hidden.", }, { "AutomationId": "", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Front", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", }, { "AutomationId": "", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Back (You should not see this)", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "View #2, front is hidden, back is visible.", }, { "AutomationId": "", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Front (You should not see this)", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", }, { "AutomationId": "", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Back", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "", }, - "Visual Tree": { - "Children": [ + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "backface_pressable", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, { - "Children": [ + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 30, - ], - "Visual Type": "SpriteVisual", + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], - "Visual Type": "SpriteVisual", + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, }, ], - "Offset": [ - 0, - 0, - 0, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, ], - "Opacity": 1, - "Size": [ - 916, - 30, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, ], + }, + ], + }, + "Visual Tree": { + "Comment": "backface_pressable", + "Offset": "0, 0, 0", + "Size": "916, 468", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 30", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, { - "Children": [ + "Offset": "358, 29, 0", + "Size": "200, 200", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 255, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "200, 200", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "83, 90, 0", + "Size": "34, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 34, - 20, - ], + "Offset": "0, 0, 0", + "Size": "34, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 83, - 90, - 0, - ], - "Opacity": 1, - "Size": [ - 34, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 200, - 200, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 358, - 29, - 0, - ], - "Opacity": 1, - "Size": [ - 200, - 200, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "358, 29, 0", + "Size": "200, 200", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 0, 0, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "200, 200", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "8, 90, 0", + "Size": "184, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 184, - 20, - ], + "Offset": "0, 0, 0", + "Size": "184, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 8, - 90, - 0, - ], - "Opacity": 1, - "Size": [ - 184, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 200, - 200, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 358, - 29, - 0, - ], - "Opacity": 1, - "Size": [ - 200, - 200, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 228, 0", + "Size": "916, 39", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 39, - ], + "Offset": "0, 0, 0", + "Size": "916, 39", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 228, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 39, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "358, 267, 0", + "Size": "200, 200", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 255, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "200, 200", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "6, 90, 0", + "Size": "188, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 188, - 19, - ], + "Offset": "0, 0, 0", + "Size": "188, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 6, - 90, - 0, - ], - "Opacity": 1, - "Size": [ - 188, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 200, - 200, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 358, - 267, - 0, - ], - "Opacity": 1, - "Size": [ - 200, - 200, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "358, 267, 0", + "Size": "200, 200", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 0, 0, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "200, 200", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "85, 90, 0", + "Size": "30, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 19, - ], + "Offset": "0, 0, 0", + "Size": "30, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 85, - 90, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 200, - 200, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 358, - 267, - 0, - ], - "Opacity": 1, - "Size": [ - 200, - 200, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "backface_pressable", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 468, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2925,24 +1811,19 @@ exports[`Pressable Tests Text can have pressable behavior 1`] = ` "Automation Tree": { "AutomationId": "tappable_text", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Text has built-in onPress handling", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "tappable_text", + }, + }, "Visual Tree": { "Comment": "tappable_text", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], + "Offset": "0, 0, 0", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, } @@ -2953,24 +1834,19 @@ exports[`Pressable Tests Text can have pressable behavior 2`] = ` "Automation Tree": { "AutomationId": "tappable_text_console", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "2x text onPress", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "tappable_text_console", + }, + }, "Visual Tree": { "Comment": "tappable_text_console", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 854, - 19, - ], + "Offset": "0, 0, 0", + "Size": "854, 19", "Visual Type": "SpriteVisual", }, } diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/ScrollViewComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/ScrollViewComponentTest.test.ts.snap index 9a5abe030f3..9bc349666aa 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/ScrollViewComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/ScrollViewComponentTest.test.ts.snap @@ -4,84 +4,58 @@ exports[`ScrollView Tests ScrollView has scrollTo method, scroll to bottom butto { "Automation Tree": { "AutomationId": "scroll_to_bottom_button", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Scroll to bottom", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "scroll_to_bottom_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(204, 204, 204, 255)", }, - "Children": [ + "Comment": "scroll_to_bottom_button", + "Offset": "0, 0, 0", + "Size": "906, 29", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "402, 5, 0", + "Size": "102, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 102, - 19, - ], + "Offset": "0, 0, 0", + "Size": "102, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 402, - 5, - 0, - ], - "Opacity": 1, - "Size": [ - 102, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "scroll_to_bottom_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 906, - 29, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -90,84 +64,58 @@ exports[`ScrollView Tests ScrollView has scrollTo method, scroll to end button 1 { "Automation Tree": { "AutomationId": "scroll_to_end_button", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Scroll to end", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "scroll_to_end_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(204, 204, 204, 255)", }, - "Children": [ + "Comment": "scroll_to_end_button", + "Offset": "0, 0, 0", + "Size": "906, 29", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "414, 5, 0", + "Size": "78, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 78, - 19, - ], + "Offset": "0, 0, 0", + "Size": "78, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 414, - 5, - 0, - ], - "Opacity": 1, - "Size": [ - 78, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "scroll_to_end_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 906, - 29, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -176,84 +124,58 @@ exports[`ScrollView Tests ScrollView has scrollTo method, scroll to start button { "Automation Tree": { "AutomationId": "scroll_to_start_button", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Scroll to start", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "scroll_to_start_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(204, 204, 204, 255)", }, - "Children": [ + "Comment": "scroll_to_start_button", + "Offset": "0, 0, 0", + "Size": "906, 29", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "412, 5, 0", + "Size": "82, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 82, - 20, - ], + "Offset": "0, 0, 0", + "Size": "82, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 412, - 5, - 0, - ], - "Opacity": 1, - "Size": [ - 82, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "scroll_to_start_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 906, - 29, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -262,84 +184,58 @@ exports[`ScrollView Tests ScrollView has scrollTo method, scroll to top button 1 { "Automation Tree": { "AutomationId": "scroll_to_top_button", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Scroll to top", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "scroll_to_top_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(204, 204, 204, 255)", }, - "Children": [ + "Comment": "scroll_to_top_button", + "Offset": "0, 0, 0", + "Size": "906, 29", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "415, 5, 0", + "Size": "76, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 76, - 20, - ], + "Offset": "0, 0, 0", + "Size": "76, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 415, - 5, - 0, - ], - "Opacity": 1, - "Size": [ - 76, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "scroll_to_top_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 906, - 29, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -348,84 +244,58 @@ exports[`ScrollView Tests ScrollViews has flash scroll indicators 1`] = ` { "Automation Tree": { "AutomationId": "flash_scroll_indicators_button", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Flash scroll indicators", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "flash_scroll_indicators_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(204, 204, 204, 255)", }, - "Children": [ + "Comment": "flash_scroll_indicators_button", + "Offset": "0, 0, 0", + "Size": "906, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "387, 5, 0", + "Size": "132, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 132, - 20, - ], + "Offset": "0, 0, 0", + "Size": "132, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 387, - 5, - 0, - ], - "Opacity": 1, - "Size": [ - 132, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "flash_scroll_indicators_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 906, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; 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 3ccd7840f51..a4705382ab9 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 @@ -5,24 +5,19 @@ exports[`Text Tests Padding can be added to Text 1`] = ` "Automation Tree": { "AutomationId": "text-padding", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "This text is indented by 10px padding on all sides.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-padding", + }, + }, "Visual Tree": { "Comment": "text-padding", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 834, - 39, - ], + "Offset": "0, 0, 0", + "Size": "834, 39", "Visual Type": "SpriteVisual", }, } @@ -33,24 +28,19 @@ exports[`Text Tests Text can be restricted to one line 1`] = ` "Automation Tree": { "AutomationId": "text-one-line", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Maximum of one line no matter now much I write here. If I keep writing it'll just truncate after one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus felis eget augue condimentum suscipit. Suspendisse hendrerit, libero aliquet malesuada tempor, urna nibh consectetur tellus, vitae efficitur quam erat non mi. Maecenas vitae eros sit amet quam vestibulum porta sed sit amet tellus. Fusce quis lectus congue, fringilla arcu id, luctus urna. Cras sagittis ornare mauris sit amet dictum. Vestibulum feugiat laoreet fringilla. Vivamus ac diam vehicula felis venenatis sagittis vitae ultrices elit. Curabitur libero augue, laoreet quis orci vitae, congue euismod massa. Aenean nec odio sed urna vehicula fermentum non a magna. Quisque ut commodo neque, eget eleifend odio. Sed sit amet lacinia sem. Suspendisse in metus in purus scelerisque vestibulum. Nam metus dui, efficitur nec metus non, tincidunt pharetra sapien. Praesent id convallis metus, ut malesuada arcu. Quisque quam libero, pharetra eu tellus ac, aliquam fringilla erat. Quisque tempus in lorem ac suscipit.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-one-line", + }, + }, "Visual Tree": { "Comment": "text-one-line", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 834, - 19, - ], + "Offset": "0, 0, 0", + "Size": "834, 19", "Visual Type": "SpriteVisual", }, } @@ -61,24 +51,19 @@ exports[`Text Tests Text can be selectable 1`] = ` "Automation Tree": { "AutomationId": "text-selectable", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "This text is selectable if you click-and-hold, and will offer the native Android selection menus.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-selectable", + }, + }, "Visual Tree": { "Comment": "text-selectable", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 834, - 20, - ], + "Offset": "0, 0, 0", + "Size": "834, 20", "Visual Type": "SpriteVisual", }, } @@ -89,24 +74,19 @@ exports[`Text Tests Text can have a color 1`] = ` "Automation Tree": { "AutomationId": "text-color", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Red color", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-color", + }, + }, "Visual Tree": { "Comment": "text-color", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 834, - 20, - ], + "Offset": "0, 0, 0", + "Size": "834, 20", "Visual Type": "SpriteVisual", }, } @@ -117,24 +97,19 @@ exports[`Text Tests Text can have a customized selection color 1`] = ` "Automation Tree": { "AutomationId": "text-selection-color", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "This text will have a orange highlight on selection.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-selection-color", + }, + }, "Visual Tree": { "Comment": "text-selection-color", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 834, - 19, - ], + "Offset": "0, 0, 0", + "Size": "834, 19", "Visual Type": "SpriteVisual", }, } @@ -145,24 +120,19 @@ exports[`Text Tests Text can have a size 1`] = ` "Automation Tree": { "AutomationId": "text-size", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Size 23", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-size", + }, + }, "Visual Tree": { "Comment": "text-size", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 834, - 32, - ], + "Offset": "0, 0, 0", + "Size": "834, 32", "Visual Type": "SpriteVisual", }, } @@ -173,24 +143,19 @@ exports[`Text Tests Text can have an outer color 1`] = ` "Automation Tree": { "AutomationId": "text-outer-color", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "(Normal text,(R)red(G)green(B)blue(C)cyan(M)magenta(Y)yellow(K)black(and bold(and tiny bold italic blue(and tiny normal blue))))", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-outer-color", + }, + }, "Visual Tree": { "Comment": "text-outer-color", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 834, - 20, - ], + "Offset": "0, 0, 0", + "Size": "834, 20", "Visual Type": "SpriteVisual", }, } @@ -201,24 +166,19 @@ exports[`Text Tests Text can have decoration lines: Solid Line Through 1`] = ` "Automation Tree": { "AutomationId": "text-decoration-solid-linethru", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Solid line-through", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-decoration-solid-linethru", + }, + }, "Visual Tree": { "Comment": "text-decoration-solid-linethru", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 834, - 20, - ], + "Offset": "0, 0, 0", + "Size": "834, 20", "Visual Type": "SpriteVisual", }, } @@ -229,24 +189,19 @@ exports[`Text Tests Text can have decoration lines: Underline 1`] = ` "Automation Tree": { "AutomationId": "text-decoration-underline", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Solid underline", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-decoration-underline", + }, + }, "Visual Tree": { "Comment": "text-decoration-underline", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 834, - 20, - ], + "Offset": "0, 0, 0", + "Size": "834, 20", "Visual Type": "SpriteVisual", }, } @@ -257,24 +212,19 @@ exports[`Text Tests Text can have shadows 1`] = ` "Automation Tree": { "AutomationId": "text-shadow", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Demo text shadow", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-shadow", + }, + }, "Visual Tree": { "Comment": "text-shadow", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 834, - 27, - ], + "Offset": "0, 0, 0", + "Size": "834, 27", "Visual Type": "SpriteVisual", }, } @@ -285,24 +235,19 @@ exports[`Text Tests Text can wrap 1`] = ` "Automation Tree": { "AutomationId": "text-wrap", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "The text should wrap if it goes on multiple lines. See, this is going to the next line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus felis eget augue condimentum suscipit. Suspendisse hendrerit, libero aliquet malesuada tempor, urna nibh consectetur tellus, vitae efficitur quam erat non mi. Maecenas vitae eros sit amet quam vestibulum porta sed sit amet tellus. Fusce quis lectus congue, fringilla arcu id, luctus urna. Cras sagittis ornare mauris sit amet dictum. Vestibulum feugiat laoreet fringilla. Vivamus ac diam vehicula felis venenatis sagittis vitae ultrices elit. Curabitur libero augue, laoreet quis orci vitae, congue euismod massa. Aenean nec odio sed urna vehicula fermentum non a magna. Quisque ut commodo neque, eget eleifend odio. Sed sit amet lacinia sem. Suspendisse in metus in purus scelerisque vestibulum. Nam metus dui, efficitur nec metus non, tincidunt pharetra sapien. Praesent id convallis metus, ut malesuada arcu. Quisque quam libero, pharetra eu tellus ac, aliquam fringilla erat. Quisque tempus in lorem ac suscipit.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-wrap", + }, + }, "Visual Tree": { "Comment": "text-wrap", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 834, - 169, - ], + "Offset": "0, 0, 0", + "Size": "834, 169", "Visual Type": "SpriteVisual", }, } diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap index 1179a922e86..85cbfdbf6aa 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap @@ -5,116 +5,59 @@ exports[`TextInput Tests Multi-line TextInputs can enable text selection (Impera "Automation Tree": { "AutomationId": "multilineImperative-text-input", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "multilineImperative-text-input", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "multilineImperative-text-input", + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -122,31 +65,12 @@ exports[`TextInput Tests Multi-line TextInputs can enable text selection (Impera "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "multilineImperative-text-input", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -156,116 +80,59 @@ exports[`TextInput Tests Multi-line TextInputs can enable text selection 1`] = ` "Automation Tree": { "AutomationId": "multiline-text-input", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "multiline-text-input", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "multiline-text-input", + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -273,31 +140,12 @@ exports[`TextInput Tests Multi-line TextInputs can enable text selection 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "multiline-text-input", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -307,116 +155,59 @@ exports[`TextInput Tests Single-line TextInputs can enable text selection (Imper "Automation Tree": { "AutomationId": "singlelineImperative-text-input", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "singlelineImperative-text-input", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "singlelineImperative-text-input", + "Offset": "0, 0, 0", + "Size": "916, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -424,31 +215,12 @@ exports[`TextInput Tests Single-line TextInputs can enable text selection (Imper "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "singlelineImperative-text-input", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -458,116 +230,59 @@ exports[`TextInput Tests Single-line TextInputs can enable text selection 1`] = "Automation Tree": { "AutomationId": "singleline-text-input", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "singleline-text-input", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "singleline-text-input", + "Offset": "0, 0, 0", + "Size": "916, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -575,31 +290,12 @@ exports[`TextInput Tests Single-line TextInputs can enable text selection 1`] = "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "singleline-text-input", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -610,43 +306,33 @@ exports[`TextInput Tests Text have cursorColor 1`] = ` "AutomationId": "textinput-cursorColor", "ControlType": 50004, "HelpText": "cursorColor={"green"}", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "cursorColor={"green"}", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-cursorColor", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-cursorColor", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 128, 0, 255)", }, - "Offset": [ - 78, - 0, - 0, - ], + "Offset": "78, 0, 0", "Opacity": 0, - "Size": [ - 1, - 19, - ], + "Size": "1, 19", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-cursorColor", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -656,116 +342,59 @@ exports[`TextInput Tests TextInputs can autocapitalize: Autocapitalize Character "Automation Tree": { "AutomationId": "capitalize-characters", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "capitalize-characters", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "capitalize-characters", + "Offset": "0, 0, 0", + "Size": "791, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -773,31 +402,12 @@ exports[`TextInput Tests TextInputs can autocapitalize: Autocapitalize Character "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "capitalize-characters", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 791, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -807,116 +417,59 @@ exports[`TextInput Tests TextInputs can autocapitalize: Autocapitalize Sentences "Automation Tree": { "AutomationId": "capitalize-sentences", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "capitalize-sentences", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "capitalize-sentences", + "Offset": "0, 0, 0", + "Size": "791, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -924,31 +477,12 @@ exports[`TextInput Tests TextInputs can autocapitalize: Autocapitalize Sentences "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "capitalize-sentences", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 791, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -958,116 +492,59 @@ exports[`TextInput Tests TextInputs can autocapitalize: Autocapitalize Turned Of "Automation Tree": { "AutomationId": "capitalize-none", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "capitalize-none", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "capitalize-none", + "Offset": "0, 0, 0", + "Size": "791, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -1075,31 +552,12 @@ exports[`TextInput Tests TextInputs can autocapitalize: Autocapitalize Turned Of "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "capitalize-none", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 791, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1109,116 +567,59 @@ exports[`TextInput Tests TextInputs can autocapitalize: Autocapitalize Words 1`] "Automation Tree": { "AutomationId": "capitalize-words", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "capitalize-words", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "capitalize-words", + "Offset": "0, 0, 0", + "Size": "791, 29", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -1226,31 +627,12 @@ exports[`TextInput Tests TextInputs can autocapitalize: Autocapitalize Words 1`] "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "capitalize-words", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 791, - 29, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1261,115 +643,60 @@ exports[`TextInput Tests TextInputs can autocomplete, address country 1`] = ` "AutomationId": "textinput-autocomplete-address-country", "ControlType": 50004, "HelpText": "postal-address-country", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "postal-address-country", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-autocomplete-address-country", + }, + }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "textinput-autocomplete-address-country", + "Offset": "0, 0, 0", + "Size": "916, 29", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -1377,31 +704,12 @@ exports[`TextInput Tests TextInputs can autocomplete, address country 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-autocomplete-address-country", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 29, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1412,115 +720,60 @@ exports[`TextInput Tests TextInputs can autocomplete, country 1`] = ` "AutomationId": "textinput-autocomplete-country", "ControlType": 50004, "HelpText": "country", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "country", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-autocomplete-country", + }, + }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "textinput-autocomplete-country", + "Offset": "0, 0, 0", + "Size": "916, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -1528,31 +781,12 @@ exports[`TextInput Tests TextInputs can autocomplete, country 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-autocomplete-country", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1563,115 +797,60 @@ exports[`TextInput Tests TextInputs can autocomplete, one-time-code 1`] = ` "AutomationId": "textinput-autocomplete-one-time-code", "ControlType": 50004, "HelpText": "one-time-code", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "one-time-code", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-autocomplete-one-time-code", + }, + }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "textinput-autocomplete-one-time-code", + "Offset": "0, 0, 0", + "Size": "916, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -1679,31 +858,12 @@ exports[`TextInput Tests TextInputs can autocomplete, one-time-code 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-autocomplete-one-time-code", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1714,115 +874,60 @@ exports[`TextInput Tests TextInputs can autocomplete, sms-otp 1`] = ` "AutomationId": "textinput-autocomplete-sms-otp", "ControlType": 50004, "HelpText": "sms-otp", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "sms-otp", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-autocomplete-sms-otp", + }, + }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "textinput-autocomplete-sms-otp", + "Offset": "0, 0, 0", + "Size": "916, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -1830,31 +935,12 @@ exports[`TextInput Tests TextInputs can autocomplete, sms-otp 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-autocomplete-sms-otp", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1864,44 +950,32 @@ exports[`TextInput Tests TextInputs can autogrow 1`] = ` "Automation Tree": { "AutomationId": "textinput-autogrow", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-autogrow", + }, }, "Visual Tree": { - "Children": [ + "Comment": "textinput-autogrow", + "Offset": "0, 0, 0", + "Size": "916, 41", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-autogrow", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 41, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1912,115 +986,60 @@ exports[`TextInput Tests TextInputs can be editable 1`] = ` "AutomationId": "textinput-editable", "ControlType": 50004, "HelpText": "editable text input using editable prop", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "editable text input using editable prop", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-editable", + }, + }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "textinput-editable", + "Offset": "0, 0, 0", + "Size": "916, 29", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -2028,31 +1047,12 @@ exports[`TextInput Tests TextInputs can be editable 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-editable", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 29, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2062,44 +1062,32 @@ exports[`TextInput Tests TextInputs can be multiline, bottomright alignment 1`] "Automation Tree": { "AutomationId": "textinput-multiline-bottomright", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-multiline-bottomright", + }, }, "Visual Tree": { - "Children": [ + "Comment": "textinput-multiline-bottomright", + "Offset": "0, 0, 0", + "Size": "916, 60", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 255, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-multiline-bottomright", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 60, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2110,43 +1098,33 @@ exports[`TextInput Tests TextInputs can be multiline, center alignment 1`] = ` "AutomationId": "textinput-multiline-center", "ControlType": 50004, "HelpText": "multiline, aligned center", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "multiline, aligned center", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-multiline-center", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-multiline-center", + "Offset": "0, 0, 0", + "Size": "916, 60", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-multiline-center", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 60, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2157,43 +1135,33 @@ exports[`TextInput Tests TextInputs can be multiline, topleft alignment 1`] = ` "AutomationId": "textinput-multiline-topleft", "ControlType": 50004, "HelpText": "multiline, aligned top-left", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "multiline, aligned top-left", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-multiline-topleft", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-multiline-topleft", + "Offset": "0, 0, 0", + "Size": "916, 60", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-multiline-topleft", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 60, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2203,44 +1171,32 @@ exports[`TextInput Tests TextInputs can be set to not editable 1`] = ` "Automation Tree": { "AutomationId": "textinput-not-editable", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-not-editable", + }, }, "Visual Tree": { - "Children": [ + "Comment": "textinput-not-editable", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-not-editable", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2251,115 +1207,60 @@ exports[`TextInput Tests TextInputs can be set to not editable 2 1`] = ` "AutomationId": "textinput-not-editable2", "ControlType": 50004, "HelpText": "uneditable text input using editable prop", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "uneditable text input using editable prop", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-not-editable2", + }, + }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "textinput-not-editable2", + "Offset": "0, 0, 0", + "Size": "916, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -2367,31 +1268,12 @@ exports[`TextInput Tests TextInputs can be set to not editable 2 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-not-editable2", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2401,44 +1283,32 @@ exports[`TextInput Tests TextInputs can clear on submit 1`] = ` "Automation Tree": { "AutomationId": "textinput-clear-on-submit", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-clear-on-submit", + }, }, "Visual Tree": { - "Children": [ + "Comment": "textinput-clear-on-submit", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 1, - 19, - ], + "Size": "1, 19", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-clear-on-submit", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2448,44 +1318,32 @@ exports[`TextInput Tests TextInputs can clear on submit with custom submit key e "Automation Tree": { "AutomationId": "textinput-clear-on-submit-3", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-clear-on-submit-3", + }, }, "Visual Tree": { - "Children": [ + "Comment": "textinput-clear-on-submit-3", + "Offset": "0, 0, 0", + "Size": "916, 60", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", - }, - ], - "Comment": "textinput-clear-on-submit-3", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 60, + }, ], - "Visual Type": "SpriteVisual", }, } `; @@ -2495,44 +1353,32 @@ exports[`TextInput Tests TextInputs can clear on submit with custom submit key e "Automation Tree": { "AutomationId": "textinput-clear-on-submit-2", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-clear-on-submit-2", + }, }, "Visual Tree": { - "Children": [ + "Comment": "textinput-clear-on-submit-2", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-clear-on-submit-2", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2542,44 +1388,32 @@ exports[`TextInput Tests TextInputs can customize its padding 1`] = ` "Automation Tree": { "AutomationId": "textinput-padding", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-padding", + }, }, "Visual Tree": { - "Children": [ + "Comment": "textinput-padding", + "Offset": "0, 0, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-padding", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2590,43 +1424,33 @@ exports[`TextInput Tests TextInputs can enable spellcheck 1`] = ` "AutomationId": "textinput-spellcheck", "ControlType": 50004, "HelpText": "Type text to test spell check functionality.", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "Type text to test spell check functionality.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-spellcheck", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-spellcheck", + "Offset": "0, 0, 0", + "Size": "916, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-spellcheck", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 30, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2636,116 +1460,59 @@ exports[`TextInput Tests TextInputs can have a background color 1`] = ` "Automation Tree": { "AutomationId": "style-backgroundColor", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "style-backgroundColor", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "style-backgroundColor", + "Offset": "0, 0, 0", + "Size": "791, 29", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -2753,31 +1520,12 @@ exports[`TextInput Tests TextInputs can have a background color 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "style-backgroundColor", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 791, - 29, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2787,116 +1535,59 @@ exports[`TextInput Tests TextInputs can have a color 1`] = ` "Automation Tree": { "AutomationId": "style-color", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "style-color", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "style-color", + "Offset": "0, 0, 0", + "Size": "791, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -2904,31 +1595,12 @@ exports[`TextInput Tests TextInputs can have a color 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "style-color", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 791, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2938,116 +1610,59 @@ exports[`TextInput Tests TextInputs can have a font family 1`] = ` "Automation Tree": { "AutomationId": "style-fontFamily", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "style-fontFamily", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "style-fontFamily", + "Offset": "0, 0, 0", + "Size": "791, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -3055,31 +1670,12 @@ exports[`TextInput Tests TextInputs can have a font family 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "style-fontFamily", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 791, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -3089,116 +1685,59 @@ exports[`TextInput Tests TextInputs can have a font size 1`] = ` "Automation Tree": { "AutomationId": "style-fontSize", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "style-fontSize", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "style-fontSize", + "Offset": "0, 0, 0", + "Size": "791, 35", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -3206,31 +1745,12 @@ exports[`TextInput Tests TextInputs can have a font size 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "style-fontSize", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 791, - 35, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -3240,116 +1760,59 @@ exports[`TextInput Tests TextInputs can have a font style 1`] = ` "Automation Tree": { "AutomationId": "style-fontStyle", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "style-fontStyle", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "style-fontStyle", + "Offset": "0, 0, 0", + "Size": "791, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -3357,31 +1820,12 @@ exports[`TextInput Tests TextInputs can have a font style 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "style-fontStyle", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 791, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -3391,116 +1835,59 @@ exports[`TextInput Tests TextInputs can have a font weight 1`] = ` "Automation Tree": { "AutomationId": "style-fontWeight", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "style-fontWeight", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "style-fontWeight", + "Offset": "0, 0, 0", + "Size": "791, 29", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -3508,31 +1895,12 @@ exports[`TextInput Tests TextInputs can have a font weight 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "style-fontWeight", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 791, - 29, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -3542,116 +1910,59 @@ exports[`TextInput Tests TextInputs can have attributed text 1`] = ` "Automation Tree": { "AutomationId": "text-input", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "text-input", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "text-input", + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -3659,31 +1970,12 @@ exports[`TextInput Tests TextInputs can have attributed text 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "text-input", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -3694,43 +1986,33 @@ exports[`TextInput Tests TextInputs can have caretHidden 1`] = ` "AutomationId": "textinput-carethidden", "ControlType": 50004, "HelpText": "caretHidden={true}", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "caretHidden={true}", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-carethidden", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-carethidden", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 78, - 128, - 0, - ], + "Offset": "78, 128, 0", "Opacity": 0, - "Size": [ - 1, - 19, - ], + "Size": "1, 19", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-carethidden", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -3741,43 +2023,33 @@ exports[`TextInput Tests TextInputs can have custom return key label, Compile 1` "AutomationId": "textinput-return-Compile", "ControlType": 50004, "HelpText": "returnKeyLabel: Compile", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "returnKeyLabel: Compile", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-return-Compile", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-return-Compile", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-return-Compile", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -3788,43 +2060,33 @@ exports[`TextInput Tests TextInputs can have custom return key label, React Nati "AutomationId": "textinput-return-React Native", "ControlType": 50004, "HelpText": "returnKeyLabel: React Native", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "returnKeyLabel: React Native", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-return-React Native", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-return-React Native", + "Offset": "0, 0, 0", + "Size": "916, 23", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-return-React Native", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 23, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -3835,43 +2097,33 @@ exports[`TextInput Tests TextInputs can have custom return key type, done 1`] = "AutomationId": "textinput-return-done", "ControlType": 50004, "HelpText": "returnKeyType: done", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "returnKeyType: done", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-return-done", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-return-done", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-return-done", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -3882,43 +2134,33 @@ exports[`TextInput Tests TextInputs can have custom return key type, go 1`] = ` "AutomationId": "textinput-return-go", "ControlType": 50004, "HelpText": "returnKeyType: go", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "returnKeyType: go", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-return-go", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-return-go", + "Offset": "0, 0, 0", + "Size": "916, 23", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-return-go", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 23, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -3929,43 +2171,33 @@ exports[`TextInput Tests TextInputs can have custom return key type, next 1`] = "AutomationId": "textinput-return-next", "ControlType": 50004, "HelpText": "returnKeyType: next", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "returnKeyType: next", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-return-next", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-return-next", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-return-next", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -3976,43 +2208,33 @@ exports[`TextInput Tests TextInputs can have custom return key type, none 1`] = "AutomationId": "textinput-return-none", "ControlType": 50004, "HelpText": "returnKeyType: none", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "returnKeyType: none", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-return-none", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-return-none", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-return-none", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4023,43 +2245,33 @@ exports[`TextInput Tests TextInputs can have custom return key type, previous 1` "AutomationId": "textinput-return-previous", "ControlType": 50004, "HelpText": "returnKeyType: previous", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "returnKeyType: previous", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-return-previous", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-return-previous", + "Offset": "0, 0, 0", + "Size": "916, 23", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-return-previous", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 23, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4070,43 +2282,33 @@ exports[`TextInput Tests TextInputs can have custom return key type, search 1`] "AutomationId": "textinput-return-search", "ControlType": 50004, "HelpText": "returnKeyType: search", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "returnKeyType: search", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-return-search", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-return-search", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-return-search", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4117,43 +2319,33 @@ exports[`TextInput Tests TextInputs can have custom return key type, send 1`] = "AutomationId": "textinput-return-send", "ControlType": 50004, "HelpText": "returnKeyType: send", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "returnKeyType: send", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-return-send", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-return-send", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-return-send", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4164,43 +2356,33 @@ exports[`TextInput Tests TextInputs can have customer letter spacing, spacing=-1 "AutomationId": "textinput-letterspacing--1", "ControlType": 50004, "HelpText": "letterSpacing = -1", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "letterSpacing = -1", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-letterspacing--1", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-letterspacing--1", + "Offset": "0, 0, 0", + "Size": "916, 23", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-letterspacing--1", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 23, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4211,43 +2393,33 @@ exports[`TextInput Tests TextInputs can have customer letter spacing, spacing=0 "AutomationId": "textinput-letterspacing-0", "ControlType": 50004, "HelpText": "letterSpacing = 0", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "letterSpacing = 0", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-letterspacing-0", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-letterspacing-0", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-letterspacing-0", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4258,43 +2430,33 @@ exports[`TextInput Tests TextInputs can have customer letter spacing, spacing=2 "AutomationId": "textinput-letterspacing-2", "ControlType": 50004, "HelpText": "letterSpacing = 2", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "letterSpacing = 2", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-letterspacing-2", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-letterspacing-2", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-letterspacing-2", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4305,43 +2467,33 @@ exports[`TextInput Tests TextInputs can have customer letter spacing, spacing=9 "AutomationId": "textinput-letterspacing-9", "ControlType": 50004, "HelpText": "letterSpacing = 9", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "letterSpacing = 9", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-letterspacing-9", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-letterspacing-9", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-letterspacing-9", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4349,6 +2501,7 @@ exports[`TextInput Tests TextInputs can have customer letter spacing, spacing=9 exports[`TextInput Tests TextInputs can have customized font weight, 100 1`] = ` { "Automation Tree": {}, + "Component Tree": {}, "Visual Tree": {}, } `; @@ -4356,6 +2509,7 @@ exports[`TextInput Tests TextInputs can have customized font weight, 100 1`] = ` exports[`TextInput Tests TextInputs can have customized font weight, 200 1`] = ` { "Automation Tree": {}, + "Component Tree": {}, "Visual Tree": {}, } `; @@ -4363,6 +2517,7 @@ exports[`TextInput Tests TextInputs can have customized font weight, 200 1`] = ` exports[`TextInput Tests TextInputs can have customized font weight, 300 1`] = ` { "Automation Tree": {}, + "Component Tree": {}, "Visual Tree": {}, } `; @@ -4370,6 +2525,7 @@ exports[`TextInput Tests TextInputs can have customized font weight, 300 1`] = ` exports[`TextInput Tests TextInputs can have customized font weight, 400 1`] = ` { "Automation Tree": {}, + "Component Tree": {}, "Visual Tree": {}, } `; @@ -4377,6 +2533,7 @@ exports[`TextInput Tests TextInputs can have customized font weight, 400 1`] = ` exports[`TextInput Tests TextInputs can have customized font weight, 500 1`] = ` { "Automation Tree": {}, + "Component Tree": {}, "Visual Tree": {}, } `; @@ -4384,6 +2541,7 @@ exports[`TextInput Tests TextInputs can have customized font weight, 500 1`] = ` exports[`TextInput Tests TextInputs can have customized font weight, 600 1`] = ` { "Automation Tree": {}, + "Component Tree": {}, "Visual Tree": {}, } `; @@ -4391,6 +2549,7 @@ exports[`TextInput Tests TextInputs can have customized font weight, 600 1`] = ` exports[`TextInput Tests TextInputs can have customized font weight, 700 1`] = ` { "Automation Tree": {}, + "Component Tree": {}, "Visual Tree": {}, } `; @@ -4398,6 +2557,7 @@ exports[`TextInput Tests TextInputs can have customized font weight, 700 1`] = ` exports[`TextInput Tests TextInputs can have customized font weight, 800 1`] = ` { "Automation Tree": {}, + "Component Tree": {}, "Visual Tree": {}, } `; @@ -4405,6 +2565,7 @@ exports[`TextInput Tests TextInputs can have customized font weight, 800 1`] = ` exports[`TextInput Tests TextInputs can have customized font weight, 900 1`] = ` { "Automation Tree": {}, + "Component Tree": {}, "Visual Tree": {}, } `; @@ -4412,6 +2573,7 @@ exports[`TextInput Tests TextInputs can have customized font weight, 900 1`] = ` exports[`TextInput Tests TextInputs can have customized font weight, bold 1`] = ` { "Automation Tree": {}, + "Component Tree": {}, "Visual Tree": {}, } `; @@ -4419,6 +2581,7 @@ exports[`TextInput Tests TextInputs can have customized font weight, bold 1`] = exports[`TextInput Tests TextInputs can have customized font weight, default 1`] = ` { "Automation Tree": {}, + "Component Tree": {}, "Visual Tree": {}, } `; @@ -4426,6 +2589,7 @@ exports[`TextInput Tests TextInputs can have customized font weight, default 1`] exports[`TextInput Tests TextInputs can have customized font weight, normal 1`] = ` { "Automation Tree": {}, + "Component Tree": {}, "Visual Tree": {}, } `; @@ -4435,116 +2599,59 @@ exports[`TextInput Tests TextInputs can have customized letter spacing 1`] = ` "Automation Tree": { "AutomationId": "style-letterSpacing", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "style-letterSpacing", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "style-letterSpacing", + "Offset": "0, 0, 0", + "Size": "791, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -4552,31 +2659,12 @@ exports[`TextInput Tests TextInputs can have customized letter spacing 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "style-letterSpacing", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 791, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4586,116 +2674,59 @@ exports[`TextInput Tests TextInputs can have customized line height 1`] = ` "Automation Tree": { "AutomationId": "style-lineHeight", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "style-lineHeight", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "style-lineHeight", + "Offset": "0, 0, 0", + "Size": "791, 26", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -4703,31 +2734,12 @@ exports[`TextInput Tests TextInputs can have customized line height 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "style-lineHeight", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 791, - 26, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4738,43 +2750,33 @@ exports[`TextInput Tests TextInputs can have inline images 1`] = ` "AutomationId": "textinput-inline-images", "ControlType": 50004, "HelpText": "This has drawableLeft set", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "This has drawableLeft set", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-inline-images", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-inline-images", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-inline-images", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4785,43 +2787,33 @@ exports[`TextInput Tests TextInputs can have inline images, drawable props not s "AutomationId": "textinput-inline-images-3", "ControlType": 50004, "HelpText": "This does not have drawable props set", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "This does not have drawable props set", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-inline-images-3", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-inline-images-3", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-inline-images-3", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4832,43 +2824,33 @@ exports[`TextInput Tests TextInputs can have inline images, drawableLeft and dra "AutomationId": "textinput-inline-images-2", "ControlType": 50004, "HelpText": "This has drawableLeft and drawablePadding set", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "This has drawableLeft and drawablePadding set", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-inline-images-2", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-inline-images-2", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-inline-images-2", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4879,43 +2861,33 @@ exports[`TextInput Tests TextInputs can have shadows 1`] = ` "AutomationId": "textinput-shadow", "ControlType": 50004, "HelpText": "shadowColor: purple", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "shadowColor: purple", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-shadow", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-shadow", + "Offset": "0, 0, 0", + "Size": "916, 23", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-shadow", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 23, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4925,116 +2897,59 @@ exports[`TextInput Tests TextInputs can have text decoration lines 1`] = ` "Automation Tree": { "AutomationId": "style-textDecorationLine", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "style-textDecorationLine", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "style-textDecorationLine", + "Offset": "0, 0, 0", + "Size": "791, 29", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -5042,31 +2957,12 @@ exports[`TextInput Tests TextInputs can have text decoration lines 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "style-textDecorationLine", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 791, - 29, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -5076,116 +2972,59 @@ exports[`TextInput Tests TextInputs can have text shadows 1`] = ` "Automation Tree": { "AutomationId": "style-textShadow", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "style-textShadow", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "style-textShadow", + "Offset": "0, 0, 0", + "Size": "791, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -5193,31 +3032,12 @@ exports[`TextInput Tests TextInputs can have text shadows 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "style-textShadow", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 791, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -5228,43 +3048,33 @@ exports[`TextInput Tests TextInputs can propagate events 1`] = ` "AutomationId": "textinput-propagation", "ControlType": 50004, "HelpText": "Click inside the box to observe events being fired.", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "Click inside the box to observe events being fired.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-propagation", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-propagation", + "Offset": "0, 0, 0", + "Size": "916, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-propagation", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 30, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -5275,162 +3085,95 @@ exports[`TextInput Tests TextInputs can register press events 1`] = ` "AutomationId": "textinput-press", "ControlType": 50004, "HelpText": "Click inside the box to observe events being fired.", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "Click inside the box to observe events being fired.", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-press", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-press", + "Offset": "0, 0, 0", + "Size": "916, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], + }, +} +`; + +exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with Clear 1`] = ` +{ + "Automation Tree": { + "AutomationId": "rewrite_clear_input", + "ControlType": 50004, + "IsKeyboardFocusable": true, + "LocalizedControlType": "edit", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "rewrite_clear_input", + }, + }, + "Visual Tree": { + "Comment": "rewrite_clear_input", + "Offset": "0, 0, 0", + "Size": "867, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, - ], - "Comment": "textinput-press", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 30, - ], - "Visual Type": "SpriteVisual", - }, -} -`; - -exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with Clear 1`] = ` -{ - "Automation Tree": { - "AutomationId": "rewrite_clear_input", - "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "edit", - "Name": "", - }, - "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -5438,31 +3181,12 @@ exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with C "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "rewrite_clear_input", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 867, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -5472,116 +3196,59 @@ exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with N "Automation Tree": { "AutomationId": "rewrite_no_sp_input", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "rewrite_no_sp_input", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "rewrite_no_sp_input", + "Offset": "0, 0, 0", + "Size": "916, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -5589,31 +3256,12 @@ exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with N "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "rewrite_no_sp_input", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -5623,116 +3271,59 @@ exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with U "Automation Tree": { "AutomationId": "rewrite_sp_underscore_input", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "rewrite_sp_underscore_input", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "rewrite_sp_underscore_input", + "Offset": "0, 0, 0", + "Size": "892, 29", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -5740,31 +3331,12 @@ exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with U "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "rewrite_sp_underscore_input", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 892, - 29, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -5775,115 +3347,60 @@ exports[`TextInput Tests TextInputs can set their readOnly prop to false 1`] = ` "AutomationId": "textinput-readonly-false", "ControlType": 50004, "HelpText": "editable text input using readOnly prop", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "editable text input using readOnly prop", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-readonly-false", + }, + }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "textinput-readonly-false", + "Offset": "0, 0, 0", + "Size": "916, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -5891,31 +3408,12 @@ exports[`TextInput Tests TextInputs can set their readOnly prop to false 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-readonly-false", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -5926,115 +3424,60 @@ exports[`TextInput Tests TextInputs can set their readOnly prop to true 1`] = ` "AutomationId": "textinput-readyonly", "ControlType": 50004, "HelpText": "uneditable text input using readOnly prop", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "uneditable text input using readOnly prop", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-readyonly", + }, + }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "textinput-readyonly", + "Offset": "0, 0, 0", + "Size": "916, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -6042,31 +3485,12 @@ exports[`TextInput Tests TextInputs can set their readOnly prop to true 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-readyonly", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -6076,44 +3500,32 @@ exports[`TextInput Tests TextInputs can submit with custom key, multilined and s "Automation Tree": { "AutomationId": "textinput-clear-on-submit-4", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-clear-on-submit-4", + }, }, "Visual Tree": { - "Children": [ + "Comment": "textinput-clear-on-submit-4", + "Offset": "0, 0, 0", + "Size": "916, 60", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 1, - 19, - ], + "Size": "1, 19", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-clear-on-submit-4", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 60, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -6123,44 +3535,32 @@ exports[`TextInput Tests TextInputs have a custom background color 1`] = ` "Automation Tree": { "AutomationId": "textinput-custom-background-color", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-custom-background-color", + }, }, "Visual Tree": { - "Children": [ + "Comment": "textinput-custom-background-color", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-custom-background-color", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -6170,44 +3570,32 @@ exports[`TextInput Tests TextInputs have a custom highlight color 1`] = ` "Automation Tree": { "AutomationId": "textinput-custom-highlight-color", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-custom-highlight-color", + }, }, "Visual Tree": { - "Children": [ + "Comment": "textinput-custom-highlight-color", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-custom-highlight-color", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -6218,43 +3606,33 @@ exports[`TextInput Tests TextInputs have a custom placeholder text color 1`] = ` "AutomationId": "textinput-custom-placeholder-color", "ControlType": 50004, "HelpText": "Red placeholder text color", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "Red placeholder text color", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-custom-placeholder-color", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-custom-placeholder-color", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-custom-placeholder-color", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -6264,44 +3642,32 @@ exports[`TextInput Tests TextInputs have a custom text color 1`] = ` "Automation Tree": { "AutomationId": "textinput-custom-color", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-custom-color", + }, }, "Visual Tree": { - "Children": [ + "Comment": "textinput-custom-color", + "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, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-custom-color", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -6312,43 +3678,33 @@ exports[`TextInput Tests TextInputs have a custom underline color 1`] = ` "AutomationId": "textinput-custom-underline-color", "ControlType": 50004, "HelpText": "Blue underline color", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "Blue underline color", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-custom-underline-color", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-custom-underline-color", + "Offset": "0, 0, 0", + "Size": "916, 23", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-custom-underline-color", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 23, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -6359,43 +3715,33 @@ exports[`TextInput Tests TextInputs have a default placeholder text color 1`] = "AutomationId": "textinput-default-placeholder-color", "ControlType": 50004, "HelpText": "Default placeholder text color", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "Default placeholder text color", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-default-placeholder-color", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-default-placeholder-color", + "Offset": "0, 0, 0", + "Size": "916, 23", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-default-placeholder-color", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 23, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -6405,44 +3751,32 @@ exports[`TextInput Tests TextInputs have a default text color 1`] = ` "Automation Tree": { "AutomationId": "textinput-default-color", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-default-color", + }, }, "Visual Tree": { - "Children": [ + "Comment": "textinput-default-color", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-default-color", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -6453,43 +3787,33 @@ exports[`TextInput Tests TextInputs have a default underline color 1`] = ` "AutomationId": "textinput-default-underline-color", "ControlType": 50004, "HelpText": "Default underline color", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "Default underline color", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-default-underline-color", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-default-underline-color", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-default-underline-color", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -6499,44 +3823,32 @@ exports[`TextInput Tests TextInputs support secure entry 1`] = ` "Automation Tree": { "AutomationId": "textinput-password", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-password", + }, }, "Visual Tree": { - "Children": [ + "Comment": "textinput-password", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-password", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -6547,43 +3859,33 @@ exports[`TextInput Tests TextInputs support secure entry, with placeholder text "AutomationId": "textinput-password-placeholder", "ControlType": 50004, "HelpText": "color is supported too", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "color is supported too", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-password-placeholder", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-password-placeholder", + "Offset": "0, 0, 0", + "Size": "916, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-password-placeholder", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 22, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -6594,43 +3896,33 @@ exports[`TextInput Tests TextInputs with set height and padding from theme 1`] = "AutomationId": "textinput-theme-padding", "ControlType": 50004, "HelpText": "If you set height, beware of padding set from themes", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", "Name": "If you set height, beware of padding set from themes", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "textinput-theme-padding", + }, + }, "Visual Tree": { - "Children": [ + "Comment": "textinput-theme-padding", + "Offset": "0, 0, 0", + "Size": "916, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "textinput-theme-padding", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 30, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -6640,116 +3932,59 @@ exports[`TextInput Tests Uncontrolled TextInput 1`] = ` "Automation Tree": { "AutomationId": "uncontrolled-textinput", "ControlType": 50004, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "edit", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView", + "_Props": { + "TestId": "uncontrolled-textinput", + }, }, "Visual Tree": { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Comment": "uncontrolled-textinput", + "Offset": "0, 0, 0", + "Size": "916, 28", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 0, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-1, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "1, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -1, 0", + "Size": "1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -6757,31 +3992,12 @@ exports[`TextInput Tests Uncontrolled TextInput 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 228)", }, - "Offset": [ - 0, - 0, - 0, - ], + "Offset": "0, 0, 0", "Opacity": 0, - "Size": [ - 0, - 0, - ], + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Comment": "uncontrolled-textinput", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 28, - ], - "Visual Type": "SpriteVisual", }, } `; diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/TouchableComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/TouchableComponentTest.test.ts.snap index 9be9ffb8363..b16dcf03069 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/TouchableComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/TouchableComponentTest.test.ts.snap @@ -5,24 +5,19 @@ exports[`Touchable Tests Text components can be tappable 1`] = ` "Automation Tree": { "AutomationId": "tappable_text", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Text has built-in onPress handling", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "tappable_text", + }, + }, "Visual Tree": { "Comment": "tappable_text", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], + "Offset": "0, 0, 0", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, } @@ -32,80 +27,54 @@ exports[`Touchable Tests TouchableWithoutFeedback components should not give vis { "Automation Tree": { "AutomationId": "touchable_without_feedback_button", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Tap Here For No Feedback!", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "touchable_without_feedback_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "touchable_without_feedback_button", + "Offset": "0, 0, 0", + "Size": "916, 33", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "6, 6, 0", + "Size": "904, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 904, - 22, - ], + "Offset": "0, 0, 0", + "Size": "904, 22", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 6, - 6, - 0, - ], - "Opacity": 1, - "Size": [ - 904, - 22, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "touchable_without_feedback_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 33, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -114,80 +83,54 @@ exports[`Touchable Tests Touchables can contain a Text component 1`] = ` { "Automation Tree": { "AutomationId": "touchable_highlight_text_button", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Tap Here For Custom Highlight!", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "touchable_highlight_text_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "touchable_highlight_text_button", + "Offset": "0, 0, 0", + "Size": "234, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "6, 6, 0", + "Size": "224, 22", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 224, - 22, - ], + "Offset": "0, 0, 0", + "Size": "224, 22", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 6, - 6, - 0, - ], - "Opacity": 1, - "Size": [ - 224, - 22, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "touchable_highlight_text_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 234, - 50, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -197,68 +140,52 @@ exports[`Touchable Tests Touchables can contain an Image component 1`] = ` "Automation Tree": { "AutomationId": "touchable_highlight_image_button", "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, "IsKeyboardFocusable": true, "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "touchable_highlight_image_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ImageComponentView", + "_Props": { + "Sources": [ + { + "Type": "Remote", + "Uri": "https://www.facebook.com/favicon.ico", + }, + ], + }, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "touchable_highlight_image_button", + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], + "Offset": "0, 0, 0", + "Size": "50, 50", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "touchable_highlight_image_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -267,80 +194,54 @@ exports[`Touchable Tests Touchables can delay events 1`] = ` { "Automation Tree": { "AutomationId": "touchable_delay_events_button", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Press Me", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "touchable_delay_events_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "touchable_delay_events_button", + "Offset": "0, 0, 0", + "Size": "56, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "56, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 56, - 19, - ], + "Offset": "0, 0, 0", + "Size": "56, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 56, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "touchable_delay_events_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 56, - 19, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -349,84 +250,58 @@ exports[`Touchable Tests Touchables can enable a hit slop region 1`] = ` { "Automation Tree": { "AutomationId": "touchable_hit_slop_button", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Press Outside This View", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "touchable_hit_slop_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 0, 0, 255)", }, - "Children": [ + "Comment": "touchable_hit_slop_button", + "Offset": "0, 0, 0", + "Size": "146, 18", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "146, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 146, - 20, - ], + "Offset": "0, 0, 0", + "Size": "146, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 146, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "touchable_hit_slop_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 146, - 18, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -435,80 +310,56 @@ exports[`Touchable Tests Touchables can register feedback events 1`] = ` { "Automation Tree": { "AutomationId": "touchable_feedback_events_button", - "Children": [ + "ControlType": 50000, + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "touchable feedback events", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Press Me", }, ], - "ControlType": 50000, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "touchable feedback events", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "touchable feedback events", + "TestId": "touchable_feedback_events_button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "touchable_feedback_events_button", + "Offset": "0, 0, 0", + "Size": "56, 18", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "56, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 56, - 20, - ], + "Offset": "0, 0, 0", + "Size": "56, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 56, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "touchable_feedback_events_button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 56, - 18, - ], - "Visual Type": "SpriteVisual", }, } `; diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/ViewComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/ViewComponentTest.test.ts.snap index c34e1b860df..0aa16423775 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/ViewComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/ViewComponentTest.test.ts.snap @@ -5,28 +5,24 @@ exports[`View Tests Views can have a hitslop region 1`] = ` "Automation Tree": { "AutomationId": "hitslop", "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "group", "Name": "HitSlop Example", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "HitSlop Example", + "TestId": "hitslop", + }, + }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(128, 128, 128, 255)", }, "Comment": "hitslop", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 200, - 200, - ], + "Offset": "0, 0, 0", + "Size": "200, 200", "Visual Type": "SpriteVisual", }, } @@ -36,80 +32,55 @@ exports[`View Tests Views can have a nativeid 1`] = ` { "Automation Tree": { "AutomationId": "nativeid", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "NativeID Example", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "A View with a nativeID "native-id-view"", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "NativeID Example", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "NativeID Example", + "TestId": "nativeid", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "nativeid", + "Offset": "0, 0, 0", + "Size": "916, 18", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], + "Offset": "0, 0, 0", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "nativeid", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 18, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -118,468 +89,278 @@ exports[`View Tests Views can have a z-index 1`] = ` { "Automation Tree": { "AutomationId": "z-index-button", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "ZIndex -1", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Tap to flip sorting order", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "ZIndex 0", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "ZIndex 1", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "ZIndex 2", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "z-index-button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "z-index-button", + "Offset": "0, 0, 0", + "Size": "916, 198", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "150, 149, 0", + "Size": "100, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(100, 181, 246, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "100, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 15, 0", + "Size": "100, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 20, - ], + "Offset": "0, 0, 0", + "Size": "100, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 15, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 150, - 149, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 30, - ], + "Offset": "0, 0, 0", + "Size": "916, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 30, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "100, 109, 0", + "Size": "100, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(129, 199, 132, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "100, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 15, 0", + "Size": "100, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 20, - ], + "Offset": "0, 0, 0", + "Size": "100, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 15, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 100, - 109, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "50, 69, 0", + "Size": "100, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 241, 118, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "100, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 15, 0", + "Size": "100, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 20, - ], + "Offset": "0, 0, 0", + "Size": "100, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 15, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 50, - 69, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 29, 0", + "Size": "100, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(229, 115, 115, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "100, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 15, 0", + "Size": "100, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 20, - ], + "Offset": "0, 0, 0", + "Size": "100, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 15, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 29, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 50, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "z-index-button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 198, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -588,84 +369,59 @@ exports[`View Tests Views can have aria-labels 1`] = ` { "Automation Tree": { "AutomationId": "view-test-aria-label", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "Blue background View with Text", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Blue background", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "Blue background View with Text", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Blue background View with Text", + "TestId": "view-test-aria-label", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(82, 127, 228, 255)", }, - "Children": [ + "Comment": "view-test-aria-label", + "Offset": "0, 0, 0", + "Size": "916, 24", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "5, 5, 0", + "Size": "906, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 906, - 16, - ], + "Offset": "0, 0, 0", + "Size": "906, 16", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 5, - 5, - 0, - ], - "Opacity": 1, - "Size": [ - 906, - 16, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "view-test-aria-label", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 24, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -674,512 +430,294 @@ exports[`View Tests Views can have backface visibility 1`] = ` { "Automation Tree": { "AutomationId": "view-test-backface-visibility", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "Backface Visibility Example", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "View #1, front is visible, back is hidden.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Front", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Back (You should not see this)", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "View #2, front is hidden, back is visible.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Front (You should not see this)", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Back", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "Backface Visibility Example", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Backface Visibility Example", + "TestId": "view-test-backface-visibility", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "view-test-backface-visibility", + "Offset": "0, 0, 0", + "Size": "916, 367", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 29", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 29, - ], + "Offset": "0, 0, 0", + "Size": "916, 29", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 29, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "383, 29, 0", + "Size": "150, 150", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 255, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 150, - 150, - ], + "Offset": "0, 0, 0", + "Size": "150, 150", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 383, - 29, - 0, - ], - "Opacity": 1, - "Size": [ - 150, - 150, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "441, 94, 0", + "Size": "34, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 34, - 20, - ], + "Offset": "0, 0, 0", + "Size": "34, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 441, - 94, - 0, - ], - "Opacity": 1, - "Size": [ - 34, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "383, 29, 0", + "Size": "150, 150", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 0, 0, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "150, 150", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "10, 56, 0", + "Size": "130, 38", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 130, - 38, - ], + "Offset": "0, 0, 0", + "Size": "130, 38", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 10, - 56, - 0, - ], - "Opacity": 1, - "Size": [ - 130, - 38, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 150, - 150, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 383, - 29, - 0, - ], - "Opacity": 1, - "Size": [ - 150, - 150, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 178, 0", + "Size": "916, 40", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 40, - ], + "Offset": "0, 0, 0", + "Size": "916, 40", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 178, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 40, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "383, 217, 0", + "Size": "150, 150", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 255, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 150, - 150, - ], + "Offset": "0, 0, 0", + "Size": "150, 150", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 383, - 217, - 0, - ], - "Opacity": 1, - "Size": [ - 150, - 150, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "391, 273, 0", + "Size": "134, 38", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 134, - 38, - ], + "Offset": "0, 0, 0", + "Size": "134, 38", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 391, - 273, - 0, - ], - "Opacity": 1, - "Size": [ - 134, - 38, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "383, 217, 0", + "Size": "150, 150", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 150, - 150, - ], + "Offset": "0, 0, 0", + "Size": "150, 150", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 383, - 217, - 0, - ], - "Opacity": 1, - "Size": [ - 150, - 150, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "443, 282, 0", + "Size": "30, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 19, - ], + "Offset": "0, 0, 0", + "Size": "30, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 443, - 282, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "view-test-backface-visibility", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 367, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1188,84 +726,59 @@ exports[`View Tests Views can have background color 1`] = ` { "Automation Tree": { "AutomationId": "view-test-background-color", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "Background Color Example", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Blue background", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "Background Color Example", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Background Color Example", + "TestId": "view-test-background-color", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(82, 127, 228, 255)", }, - "Children": [ + "Comment": "view-test-background-color", + "Offset": "0, 0, 0", + "Size": "916, 24", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "5, 5, 0", + "Size": "906, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 906, - 16, - ], + "Offset": "0, 0, 0", + "Size": "906, 16", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 5, - 5, - 0, - ], - "Opacity": 1, - "Size": [ - 906, - 16, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "view-test-background-color", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 24, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1274,424 +787,207 @@ exports[`View Tests Views can have border styles 1`] = ` { "Automation Tree": { "AutomationId": "border-style-button", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Dashed border style", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Dotted border style", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "border-style-button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "border-style-button", + "Offset": "0, 0, 0", + "Size": "916, 58", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 26", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 26", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 26, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 26, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "6, 6, 0", + "Size": "904, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 904, - 16, - ], + "Offset": "0, 0, 0", + "Size": "904, 16", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 6, - 6, - 0, - ], - "Opacity": 1, - "Size": [ - 904, - 16, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 32, 0", + "Size": "916, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 6, - ], + "Offset": "0, 0, 0", + "Size": "6, 6", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 6, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -12, - 1, - ], + "Offset": "6, 0, 0", + "Size": "-12, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -6, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 6, - ], + "Offset": "-6, 0, 0", + "Size": "6, 6", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 6, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -12, - ], + "Offset": "-1, 6, 0", + "Size": "1, -12", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -6, - -6, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 6, - ], + "Offset": "-6, -6, 0", + "Size": "6, 6", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 6, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -12, - 1, - ], + "Offset": "6, -1, 0", + "Size": "-12, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -6, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 6, - ], + "Offset": "0, -6, 0", + "Size": "6, 6", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 6, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -12, - ], + "Offset": "0, 6, 0", + "Size": "1, -12", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 32, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "6, 38, 0", + "Size": "904, 15", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 904, - 15, - ], + "Offset": "0, 0, 0", + "Size": "904, 15", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 6, - 38, - 0, - ], - "Opacity": 1, - "Size": [ - 904, - 15, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "border-style-button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 58, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1700,184 +996,95 @@ exports[`View Tests Views can have borders 1`] = ` { "Automation Tree": { "AutomationId": "view-test-border", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "Border Example", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "5px blue border", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "Border Example", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Border Example", + "TestId": "view-test-border", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "view-test-border", + "Offset": "0, 0, 0", + "Size": "916, 44", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - 5, - ], + "Offset": "0, 0, 0", + "Size": "5, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 5, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -10, - 5, - ], + "Offset": "5, 0, 0", + "Size": "-10, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -5, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - 5, - ], + "Offset": "-5, 0, 0", + "Size": "5, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -5, - 5, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - -10, - ], + "Offset": "-5, 5, 0", + "Size": "5, -10", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -5, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - 5, - ], + "Offset": "-5, -5, 0", + "Size": "5, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 5, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - -10, - 5, - ], + "Offset": "5, -5, 0", + "Size": "-10, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - 5, - ], + "Offset": "0, -5, 0", + "Size": "5, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 5, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - -10, - ], + "Offset": "0, 5, 0", + "Size": "5, -10", "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "15, 15, 0", + "Size": "886, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 886, - 16, - ], + "Offset": "0, 0, 0", + "Size": "886, 16", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 15, - 15, - 0, - ], - "Opacity": 1, - "Size": [ - 886, - 16, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "view-test-border", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 44, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -1886,171 +1093,105 @@ exports[`View Tests Views can have customized accessibility 1`] = ` { "Automation Tree": { "AutomationId": "accessibility", - "Children": [ + "ControlType": 50000, + "HelpText": "Accessibility Hint", + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "A View with accessibility values", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "A View with accessibility values.", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Current Number of Accessibility Taps: 0", }, ], - "ControlType": 50000, - "HelpText": "Accessibility Hint", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "A View with accessibility values", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "A View with accessibility values", + "TestId": "accessibility", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "accessibility", + "Offset": "0, 0, 0", + "Size": "916, 55", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], + "Offset": "0, 0, 0", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 18, 0", + "Size": "916, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 19, - ], + "Offset": "0, 0, 0", + "Size": "916, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 18, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 37, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], + "Offset": "0, 0, 0", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 37, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "accessibility", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 55, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2059,638 +1200,385 @@ exports[`View Tests Views can have customized opacity 1`] = ` { "Automation Tree": { "AutomationId": "view-test-opacity", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "Opacity Example", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Opacity 0", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Opacity 0.1", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Opacity 0.3", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Opacity 0.5", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Opacity 0.7", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Opacity 0.9", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Opacity 1", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "Opacity Example", }, - "Visual Tree": { - "Children": [ + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Opacity Example", + "TestId": "view-test-opacity", + }, + "__Children": [ { - "Children": [ + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "Opacity": 0, + }, + "__Children": [ { - "Children": [ - { - "Children": [ - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], - "Visual Type": "SpriteVisual", - }, - { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], - "Visual Type": "SpriteVisual", - }, - ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], - "Visual Type": "SpriteVisual", - }, - ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 0, - "Size": [ - 916, - 18, - ], - "Visual Type": "SpriteVisual", + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "Opacity": 0.10000000149011612, + }, + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], - "Visual Type": "SpriteVisual", + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 18, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "Opacity": 0.30000001192092896, + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "Opacity": 0.5, + }, + "__Children": [ { - "Children": [ + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "Opacity": 0.699999988079071, + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "Opacity": 0.8999999761581421, + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + "Visual Tree": { + "Comment": "view-test-opacity", + "Offset": "0, 0, 0", + "Size": "916, 130", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 18", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Opacity": 0, + "Size": "916, 18", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 19, - ], + "Offset": "0, 0, 0", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 0.10000000149011612, - "Size": [ - 916, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 19, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 19, 0", + "Size": "916, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Opacity": 0.10000000149011612, + "Size": "916, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], + "Offset": "0, 0, 0", + "Size": "916, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 0.30000001192092896, - "Size": [ - 916, - 18, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 37, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 18, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 37, 0", + "Size": "916, 18", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Opacity": 0.30000001192092896, + "Size": "916, 18", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], + "Offset": "0, 0, 0", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 0.5, - "Size": [ - 916, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 56, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 56, 0", + "Size": "916, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Opacity": 0.5, + "Size": "916, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 19, - ], + "Offset": "0, 0, 0", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 0.699999988079071, - "Size": [ - 916, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 74, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 74, 0", + "Size": "916, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Opacity": 0.699999988079071, + "Size": "916, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], + "Offset": "0, 0, 0", + "Size": "916, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 0.8999999761581421, - "Size": [ - 916, - 18, - ], + }, + { + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, + ], + }, + { + "Offset": "0, 93, 0", + "Size": "916, 18", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, + "Offset": "0, 0, 0", + "Opacity": 0.8999999761581421, + "Size": "916, 18", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 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", + }, + ], + }, ], + }, + { + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 93, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 18, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 112, 0", + "Size": "916, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 19, - ], + "Offset": "0, 0, 0", + "Size": "916, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 112, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 19, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "view-test-opacity", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 130, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -2699,787 +1587,377 @@ exports[`View Tests Views can have customized pasdding and margins 1`] = ` { "Automation Tree": { "AutomationId": "view-test-padding-margin", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "Padding/Margin Example", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "5px padding", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "5px margin", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "5px margin and padding,", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "widthAutonomous=true", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "Padding/Margin Example", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Padding/Margin Example", + "TestId": "view-test-padding-margin", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "view-test-padding-margin", + "Offset": "0, 0, 0", + "Size": "916, 105", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "1, 1, 0", + "Size": "915, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(82, 127, 228, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "915, 27", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 915, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 915, - 27, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "7, 7, 0", + "Size": "903, 15", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 903, - 15, - ], + "Offset": "0, 0, 0", + "Size": "903, 15", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 7, - 7, - 0, - ], - "Opacity": 1, - "Size": [ - 903, - 15, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "6, 32, 0", + "Size": "905, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(82, 127, 228, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "905, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 905, - 16, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 6, - 32, - 0, - ], - "Opacity": 1, - "Size": [ - 905, - 16, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "7, 33, 0", + "Size": "903, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 903, - 16, - ], + "Offset": "0, 0, 0", + "Size": "903, 16", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 7, - 33, - 0, - ], - "Opacity": 1, - "Size": [ - 903, - 16, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "6, 59, 0", + "Size": "133, 42", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(82, 127, 228, 255)", }, - "Children": [ + "Offset": "0, 0, 0", + "Size": "133, 42", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 133, - 42, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 6, - 59, - 0, - ], - "Opacity": 1, - "Size": [ - 133, - 42, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "12, 65, 0", + "Size": "123, 15", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 123, - 15, - ], + "Offset": "0, 0, 0", + "Size": "123, 15", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 12, - 65, - 0, - ], - "Opacity": 1, - "Size": [ - 123, - 15, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "12, 79, 0", + "Size": "123, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 123, - 16, - ], + "Offset": "0, 0, 0", + "Size": "123, 16", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 12, - 79, - 0, - ], - "Opacity": 1, - "Size": [ - 123, - 16, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "view-test-padding-margin", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 105, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -3488,709 +1966,397 @@ exports[`View Tests Views can have display: none 1`] = ` { "Automation Tree": { "AutomationId": "display-none-button", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Press to toggle \`display: none\`", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "display-none-button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "display-none-button", + "Offset": "0, 0, 0", + "Size": "916, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 30, - ], + "Offset": "0, 0, 0", + "Size": "916, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 30, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "display-none-button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 28, - ], - "Visual Type": "SpriteVisual", - }, -} -`; - -exports[`View Tests Views can have flexgap 1`] = ` -{ - "Automation Tree": { - "AutomationId": "view-test-flexgap", - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "Flex Gap Example", + }, +} +`; + +exports[`View Tests Views can have flexgap 1`] = ` +{ + "Automation Tree": { + "AutomationId": "view-test-flexgap", + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "Flex Gap Example", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Flex Gap Example", + "TestId": "view-test-flexgap", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "view-test-flexgap", + "Offset": "0, 0, 0", + "Size": "916, 32", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "1, 1, 0", + "Size": "30, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], + "Offset": "0, 0, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "61, 1, 0", + "Size": "30, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], + "Offset": "0, 0, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 61, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "121, 1, 0", + "Size": "30, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 192, 203, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], + "Offset": "0, 0, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 121, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "181, 1, 0", + "Size": "30, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], + "Offset": "0, 0, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 181, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "241, 1, 0", + "Size": "30, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], + "Offset": "0, 0, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 241, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "301, 1, 0", + "Size": "30, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], + "Offset": "0, 0, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 301, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "361, 1, 0", + "Size": "30, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], + "Offset": "0, 0, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 361, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "421, 1, 0", + "Size": "30, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 192, 203, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], + "Offset": "0, 0, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 421, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "481, 1, 0", + "Size": "30, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 192, 203, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], + "Offset": "0, 0, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 481, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "541, 1, 0", + "Size": "30, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 192, 203, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], + "Offset": "0, 0, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 541, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "601, 1, 0", + "Size": "30, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 192, 203, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], + "Offset": "0, 0, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 601, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 30, - 30, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "view-test-flexgap", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 32, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -4199,1724 +2365,831 @@ exports[`View Tests Views can have insets 1`] = ` { "Automation Tree": { "AutomationId": "view-test-insets", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "inset 10", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "insetBlock 5", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "insetBlockEnd 5", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "insetBlockStart 5", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "insetInline 5", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "insetInlineEnd 5", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "insetInlineStart 5", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "view-test-insets", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "view-test-insets", + "Offset": "0, 0, 0", + "Size": "916, 410", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "11, 11, 0", + "Size": "894, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(82, 127, 228, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 894, - 28, - ], + "Offset": "0, 0, 0", + "Size": "894, 28", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 11, - 11, - 0, - ], - "Opacity": 1, - "Size": [ - 894, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "16, 16, 0", + "Size": "884, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 884, - 16, - ], + "Offset": "0, 0, 0", + "Size": "884, 16", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 16, - 16, - 0, - ], - "Opacity": 1, - "Size": [ - 884, - 16, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 60, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 60, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "1, 66, 0", + "Size": "68, 38", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(82, 127, 228, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 68, - 38, - ], + "Offset": "0, 0, 0", + "Size": "68, 38", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 1, - 66, - 0, - ], - "Opacity": 1, - "Size": [ - 68, - 38, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "6, 71, 0", + "Size": "58, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 58, - 16, - ], + "Offset": "0, 0, 0", + "Size": "58, 16", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 6, - 71, - 0, - ], - "Opacity": 1, - "Size": [ - 58, - 16, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 120, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 120, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "1, 139, 0", + "Size": "86, 25", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(82, 127, 228, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 86, - 25, - ], + "Offset": "0, 0, 0", + "Size": "86, 25", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 1, - 139, - 0, - ], - "Opacity": 1, - "Size": [ - 86, - 25, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "6, 144, 0", + "Size": "77, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 77, - 16, - ], + "Offset": "0, 0, 0", + "Size": "77, 16", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 6, - 144, - 0, - ], - "Opacity": 1, - "Size": [ - 77, - 16, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 180, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 180, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "1, 186, 0", + "Size": "90, 24", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(82, 127, 228, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 90, - 24, - ], + "Offset": "0, 0, 0", + "Size": "90, 24", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 1, - 186, - 0, - ], - "Opacity": 1, - "Size": [ - 90, - 24, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "6, 191, 0", + "Size": "81, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 81, - 16, - ], + "Offset": "0, 0, 0", + "Size": "81, 16", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 6, - 191, - 0, - ], - "Opacity": 1, - "Size": [ - 81, - 16, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 240, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 240, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "6, 241, 0", + "Size": "904, 24", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(82, 127, 228, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 904, - 24, - ], + "Offset": "0, 0, 0", + "Size": "904, 24", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 6, - 241, - 0, - ], - "Opacity": 1, - "Size": [ - 904, - 24, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "11, 246, 0", + "Size": "894, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 894, - 16, - ], + "Offset": "0, 0, 0", + "Size": "894, 16", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 11, - 246, - 0, - ], - "Opacity": 1, - "Size": [ - 894, - 16, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 300, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 300, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "823, 301, 0", + "Size": "87, 24", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(82, 127, 228, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 87, - 24, - ], + "Offset": "0, 0, 0", + "Size": "87, 24", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 823, - 301, - 0, - ], - "Opacity": 1, - "Size": [ - 87, - 24, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "828, 306, 0", + "Size": "77, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 77, - 16, - ], + "Offset": "0, 0, 0", + "Size": "77, 16", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 828, - 306, - 0, - ], - "Opacity": 1, - "Size": [ - 77, - 16, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 360, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 360, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "6, 361, 0", + "Size": "91, 24", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(82, 127, 228, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 91, - 24, - ], + "Offset": "0, 0, 0", + "Size": "91, 24", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 6, - 361, - 0, - ], - "Opacity": 1, - "Size": [ - 91, - 24, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "11, 366, 0", + "Size": "81, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 81, - 16, - ], + "Offset": "0, 0, 0", + "Size": "81, 16", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 11, - 366, - 0, - ], - "Opacity": 1, - "Size": [ - 81, - 16, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "view-test-insets", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 410, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -5925,450 +3198,259 @@ exports[`View Tests Views can have layout conformance 1`] = ` { "Automation Tree": { "AutomationId": "view-test-layout-conformance", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "Layout Conformance Example", + "__Children": [ + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Unset", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Classic", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Strict", + }, + ], + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Layout Conformance Example", + "TestId": "view-test-layout-conformance", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, { - "AutomationId": "", - "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "text", - "Name": "Unset", + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, }, { - "AutomationId": "", - "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "text", - "Name": "Classic", + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, }, { - "AutomationId": "", - "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "text", - "Name": "Strict", + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "Layout Conformance Example", }, "Visual Tree": { - "Children": [ + "Comment": "view-test-layout-conformance", + "Offset": "0, 0, 0", + "Size": "916, 79", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "60, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 19, - ], + "Offset": "0, 0, 0", + "Size": "60, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 19, 0", + "Size": "60, 60", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 255, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 60, - ], + "Offset": "0, 0, 0", + "Size": "60, 60", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 19, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 60, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 34, 0", + "Size": "60, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 30, - ], + "Offset": "0, 0, 0", + "Size": "60, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 34, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 30, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "70, 0, 0", + "Size": "60, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 19, - ], + "Offset": "0, 0, 0", + "Size": "60, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 70, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "70, 19, 0", + "Size": "60, 60", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 255, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 60, - ], + "Offset": "0, 0, 0", + "Size": "60, 60", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 70, - 19, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 60, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "70, 34, 0", + "Size": "60, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 30, - ], + "Offset": "0, 0, 0", + "Size": "60, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 70, - 34, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 30, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "140, 0, 0", + "Size": "60, 19", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 19, - ], + "Offset": "0, 0, 0", + "Size": "60, 19", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 140, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 19, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "140, 19, 0", + "Size": "60, 60", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 255, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 60, - ], + "Offset": "0, 0, 0", + "Size": "60, 60", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 140, - 19, - 0, - ], - "Opacity": 1, - "Size": [ - 60, - 60, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "140, 34, 0", + "Size": "0, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 30, - ], + "Offset": "0, 0, 0", + "Size": "0, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 140, - 34, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 30, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "view-test-layout-conformance", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 79, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -6377,768 +3459,361 @@ exports[`View Tests Views can have logical border colors 1`] = ` { "Automation Tree": { "AutomationId": "view-test-logical-border-color", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "Logical Border Color Example", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "borderBlockColor orange", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "borderBlockStartColor purple", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "borderBlockEndColor green", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "Logical Border Color Example", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Logical Border Color Example", + "TestId": "view-test-logical-border-color", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "view-test-logical-border-color", + "Offset": "0, 0, 0", + "Size": "916, 125", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "11, 11, 0", + "Size": "894, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "894, 28", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - 5, - ], + "Offset": "0, 0, 0", + "Size": "5, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 5, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -10, - 5, - ], + "Offset": "5, 0, 0", + "Size": "-10, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -5, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - 5, - ], + "Offset": "-5, 0, 0", + "Size": "5, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -5, - 5, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - -10, - ], + "Offset": "-5, 5, 0", + "Size": "5, -10", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -5, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - 5, - ], + "Offset": "-5, -5, 0", + "Size": "5, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 5, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - -10, - 5, - ], + "Offset": "5, -5, 0", + "Size": "-10, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - 5, - ], + "Offset": "0, -5, 0", + "Size": "5, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 5, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - -10, - ], + "Offset": "0, 5, 0", + "Size": "5, -10", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 894, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 11, - 11, - 0, - ], - "Opacity": 1, - "Size": [ - 894, - 28, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "16, 16, 0", + "Size": "884, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 884, - 16, - ], + "Offset": "0, 0, 0", + "Size": "884, 16", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 16, - 16, - 0, - ], - "Opacity": 1, - "Size": [ - 884, - 16, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 60, 0", + "Size": "916, 65", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 65", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 65, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 60, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 65, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "11, 71, 0", + "Size": "894, 43", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "894, 43", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - 5, - ], + "Offset": "0, 0, 0", + "Size": "5, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 5, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -10, - 5, - ], + "Offset": "5, 0, 0", + "Size": "-10, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -5, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - 5, - ], + "Offset": "-5, 0, 0", + "Size": "5, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -5, - 5, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - -10, - ], + "Offset": "-5, 5, 0", + "Size": "5, -10", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -5, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - 5, - ], + "Offset": "-5, -5, 0", + "Size": "5, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 5, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - -10, - 5, - ], + "Offset": "5, -5, 0", + "Size": "-10, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -5, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - 5, - ], + "Offset": "0, -5, 0", + "Size": "5, 5", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 5, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - -10, - ], + "Offset": "0, 5, 0", + "Size": "5, -10", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 894, - 43, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 11, - 71, - 0, - ], - "Opacity": 1, - "Size": [ - 894, - 43, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "16, 76, 0", + "Size": "884, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 884, - 16, - ], + "Offset": "0, 0, 0", + "Size": "884, 16", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 16, - 76, - 0, - ], - "Opacity": 1, - "Size": [ - 884, - 16, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "16, 90, 0", + "Size": "884, 15", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 884, - 15, - ], + "Offset": "0, 0, 0", + "Size": "884, 15", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 16, - 90, - 0, - ], - "Opacity": 1, - "Size": [ - 884, - 15, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "view-test-logical-border-color", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 125, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -7147,403 +3822,236 @@ exports[`View Tests Views can have offscreen alpha compositing 1`] = ` { "Automation Tree": { "AutomationId": "offscreen-alpha-compositing-button", - "Children": [ + "ControlType": 50026, + "IsKeyboardFocusable": true, + "LocalizedControlType": "group", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Blobs", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Same blobs, but their shared container have 0.5 opacity", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "Tap to deactivate needsOffscreenAlphaCompositing", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": true, - "LocalizedControlType": "group", - "Name": "", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "offscreen-alpha-compositing-button", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "Opacity": 0.800000011920929, + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + ], + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "offscreen-alpha-compositing-button", + "Offset": "0, 0, 0", + "Size": "916, 215", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 30, - ], + "Offset": "0, 0, 0", + "Size": "916, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 30, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 29, 0", + "Size": "100, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 111, 89, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 50, - ], + "Offset": "0, 0, 0", + "Size": "100, 50", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 29, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "50, 29, 0", + "Size": "100, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(247, 203, 21, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 50, - ], + "Offset": "0, 0, 0", + "Size": "100, 50", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 50, - 29, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 108, 0", + "Size": "916, 29", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 29, - ], + "Offset": "0, 0, 0", + "Size": "916, 29", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 108, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 29, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 137, 0", + "Size": "916, 30", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 30, - ], + "Offset": "0, 0, 0", + "Size": "916, 30", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 137, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 30, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 166, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Opacity": 0.800000011920929, + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "100, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(255, 111, 89, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 50, - ], + "Offset": "0, 0, 0", + "Size": "100, 50", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "50, 0, 0", + "Size": "100, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(247, 203, 21, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 50, - ], + "Offset": "0, 0, 0", + "Size": "100, 50", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 50, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 100, - 50, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 0.800000011920929, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 166, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "offscreen-alpha-compositing-button", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 215, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -7552,700 +4060,399 @@ exports[`View Tests Views can have overflow 1`] = ` { "Automation Tree": { "AutomationId": "view-test-overflow", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "Rounded Borders Example", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "undefined", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "hidden", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "visible", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "Rounded Borders Example", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Rounded Borders Example", + "TestId": "view-test-overflow", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "view-test-overflow", + "Offset": "0, 0, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "95, 12", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "95, 12", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 95, - 12, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 95, - 12, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "1, 1, 0", + "Size": "200, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 200, - 20, - ], + "Offset": "0, 0, 0", + "Size": "200, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 200, - 20, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "111, 0, 0", + "Size": "95, 12", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "95, 12", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 95, - 12, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 111, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 95, - 12, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "112, 1, 0", + "Size": "93, 10", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "93, 10", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "200, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 200, - 20, - ], + "Offset": "0, 0, 0", + "Size": "200, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 200, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 93, - 10, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 112, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 93, - 10, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "222, 0, 0", + "Size": "95, 12", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "95, 12", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": [ - -1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 1, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 1, - ], + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 95, - 12, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 222, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 95, - 12, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "223, 1, 0", + "Size": "200, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 200, - 20, - ], + "Offset": "0, 0, 0", + "Size": "200, 20", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 223, - 1, - 0, - ], - "Opacity": 1, - "Size": [ - 200, - 20, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "view-test-overflow", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 20, + }, +} +`; + +exports[`View Tests Views can have rounded borders 1`] = ` +{ + "Automation Tree": { + "AutomationId": "view-test-rounded-borders", + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "Rounded Borders Example", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Rounded Borders Example", + "TestId": "view-test-rounded-borders", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, ], - "Visual Type": "SpriteVisual", - }, -} -`; - -exports[`View Tests Views can have rounded borders 1`] = ` -{ - "Automation Tree": { - "AutomationId": "view-test-rounded-borders", - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "Rounded Borders Example", }, "Visual Tree": { - "Children": [ + "Comment": "view-test-rounded-borders", + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "0, 0, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -8253,16 +4460,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 26, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "26, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { @@ -8270,16 +4469,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -26, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "-26, 0, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -8287,16 +4478,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 26, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 26, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -8304,16 +4487,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -26, - -26, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "-26, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -8321,16 +4496,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 26, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "26, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { @@ -8338,16 +4505,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -26, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "0, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -8355,76 +4514,36 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 26, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 26, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "60, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 35, - 35, - ], + "Offset": "0, 0, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { @@ -8432,16 +4551,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 35, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -20, - 10, - ], + "Offset": "35, 0, 0", + "Size": "-20, 10", "Visual Type": "SpriteVisual", }, { @@ -8449,16 +4560,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -35, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 35, - 35, - ], + "Offset": "-35, 0, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { @@ -8466,16 +4569,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -10, - 35, - 0, - ], - "Opacity": 1, - "Size": [ - 10, - -20, - ], + "Offset": "-10, 35, 0", + "Size": "10, -20", "Visual Type": "SpriteVisual", }, { @@ -8483,16 +4578,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -35, - -35, - 0, - ], - "Opacity": 1, - "Size": [ - 35, - 35, - ], + "Offset": "-35, -35, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { @@ -8500,16 +4587,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 35, - -10, - 0, - ], - "Opacity": 1, - "Size": [ - -20, - 10, - ], + "Offset": "35, -10, 0", + "Size": "-20, 10", "Visual Type": "SpriteVisual", }, { @@ -8517,16 +4596,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -35, - 0, - ], - "Opacity": 1, - "Size": [ - 35, - 35, - ], + "Offset": "0, -35, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { @@ -8534,76 +4605,36 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 35, - 0, - ], - "Opacity": 1, - "Size": [ - 10, - -20, - ], + "Offset": "0, 35, 0", + "Size": "10, -20", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 60, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "120, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - 5, - ], + "Offset": "0, 0, 0", + "Size": "5, 5", "Visual Type": "SpriteVisual", }, { @@ -8611,16 +4642,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 5, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 34, - 1, - ], + "Offset": "5, 0, 0", + "Size": "34, 1", "Visual Type": "SpriteVisual", }, { @@ -8628,16 +4651,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -11, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 11, - 11, - ], + "Offset": "-11, 0, 0", + "Size": "11, 11", "Visual Type": "SpriteVisual", }, { @@ -8645,16 +4660,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 11, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 22, - ], + "Offset": "-1, 11, 0", + "Size": "1, 22", "Visual Type": "SpriteVisual", }, { @@ -8662,16 +4669,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -17, - -17, - 0, - ], - "Opacity": 1, - "Size": [ - 17, - 17, - ], + "Offset": "-17, -17, 0", + "Size": "17, 17", "Visual Type": "SpriteVisual", }, { @@ -8679,16 +4678,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 34, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -1, - 1, - ], + "Offset": "34, -1, 0", + "Size": "-1, 1", "Visual Type": "SpriteVisual", }, { @@ -8696,16 +4687,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -34, - 0, - ], - "Opacity": 1, - "Size": [ - 34, - 34, - ], + "Offset": "0, -34, 0", + "Size": "34, 34", "Visual Type": "SpriteVisual", }, { @@ -8713,76 +4696,36 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 5, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 11, - ], + "Offset": "0, 5, 0", + "Size": "1, 11", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 120, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "180, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 14, - 14, - ], + "Offset": "0, 0, 0", + "Size": "14, 14", "Visual Type": "SpriteVisual", }, { @@ -8790,16 +4733,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 14, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 16, - 10, - ], + "Offset": "14, 0, 0", + "Size": "16, 10", "Visual Type": "SpriteVisual", }, { @@ -8807,16 +4742,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -20, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 20, - 20, - ], + "Offset": "-20, 0, 0", + "Size": "20, 20", "Visual Type": "SpriteVisual", }, { @@ -8824,16 +4751,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -10, - 20, - 0, - ], - "Opacity": 1, - "Size": [ - 10, - 4, - ], + "Offset": "-10, 20, 0", + "Size": "10, 4", "Visual Type": "SpriteVisual", }, { @@ -8841,16 +4760,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -26, - -26, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "-26, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -8858,16 +4769,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 43, - -10, - 0, - ], - "Opacity": 1, - "Size": [ - -19, - 10, - ], + "Offset": "43, -10, 0", + "Size": "-19, 10", "Visual Type": "SpriteVisual", }, { @@ -8875,16 +4778,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -43, - 0, - ], - "Opacity": 1, - "Size": [ - 43, - 43, - ], + "Offset": "0, -43, 0", + "Size": "43, 43", "Visual Type": "SpriteVisual", }, { @@ -8892,76 +4787,36 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 14, - 0, - ], - "Opacity": 1, - "Size": [ - 10, - -7, - ], + "Offset": "0, 14, 0", + "Size": "10, -7", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 180, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "240, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "0, 0, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -8969,16 +4824,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 26, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 24, - 6, - ], + "Offset": "26, 0, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { @@ -8986,16 +4833,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 6, - ], + "Offset": "-0, 0, 0", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { @@ -9003,16 +4842,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -0, - 6, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 44, - ], + "Offset": "-0, 6, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, { @@ -9020,16 +4851,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -0, - -0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "-0, -0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { @@ -9037,16 +4860,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 6, - -0, - 0, - ], - "Opacity": 1, - "Size": [ - 44, - 0, - ], + "Offset": "6, -0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { @@ -9054,16 +4869,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -0, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 0, - ], + "Offset": "0, -0, 0", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { @@ -9071,76 +4878,36 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 26, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 24, - ], + "Offset": "0, 26, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 240, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "290, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 6, - ], + "Offset": "0, 0, 0", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { @@ -9148,16 +4915,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 24, - 6, - ], + "Offset": "0, 0, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { @@ -9165,16 +4924,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -26, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "-26, 0, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -9182,16 +4933,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -6, - 26, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 24, - ], + "Offset": "-6, 26, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, { @@ -9199,16 +4942,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -6, - -0, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 0, - ], + "Offset": "-6, -0, 0", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { @@ -9216,16 +4951,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -0, - 0, - ], - "Opacity": 1, - "Size": [ - 44, - 0, - ], + "Offset": "0, -0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { @@ -9233,16 +4960,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, -0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { @@ -9250,76 +4969,36 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 6, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 44, - ], + "Offset": "0, 6, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 290, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "340, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 0, - ], + "Offset": "0, 0, 0", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { @@ -9327,16 +5006,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 6, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 44, - 0, - ], + "Offset": "6, 0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { @@ -9344,16 +5015,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "-0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { @@ -9361,16 +5024,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 44, - ], + "Offset": "-0, 0, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, { @@ -9378,16 +5033,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -0, - -6, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 6, - ], + "Offset": "-0, -6, 0", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { @@ -9395,16 +5042,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 26, - -6, - 0, - ], - "Opacity": 1, - "Size": [ - 24, - 6, - ], + "Offset": "26, -6, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { @@ -9412,16 +5051,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -26, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "0, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -9429,76 +5060,36 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 24, - ], + "Offset": "0, 0, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 340, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "390, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { @@ -9506,16 +5097,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 44, - 0, - ], + "Offset": "0, 0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { @@ -9523,16 +5106,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -6, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 0, - ], + "Offset": "-6, 0, 0", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { @@ -9540,16 +5115,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -6, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 24, - ], + "Offset": "-6, 0, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, { @@ -9557,16 +5124,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -26, - -26, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "-26, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -9574,16 +5133,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -6, - 0, - ], - "Opacity": 1, - "Size": [ - 24, - 6, - ], + "Offset": "0, -6, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { @@ -9591,16 +5142,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -6, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 6, - ], + "Offset": "0, -6, 0", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { @@ -9608,70 +5151,20 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 44, - ], + "Offset": "0, 0, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 390, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "view-test-rounded-borders", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -9681,50 +5174,82 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Automation Tree": { "AutomationId": "view-test-rounded-borders", "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "group", "Name": "Rounded Borders Example", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Rounded Borders Example", + "TestId": "view-test-rounded-borders", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + ], + }, "Visual Tree": { - "Children": [ + "Comment": "view-test-rounded-borders", + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "0, 0, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": [ - 26, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + }, + "Offset": "26, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { @@ -9732,16 +5257,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -26, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "-26, 0, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -9749,16 +5266,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 26, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "-1, 26, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -9766,16 +5275,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -26, - -26, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "-26, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -9783,16 +5284,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 26, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -2, - 1, - ], + "Offset": "26, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { @@ -9800,16 +5293,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -26, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "0, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -9817,76 +5302,36 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 26, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - -2, - ], + "Offset": "0, 26, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "60, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 35, - 35, - ], + "Offset": "0, 0, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { @@ -9894,16 +5339,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 35, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - -20, - 10, - ], + "Offset": "35, 0, 0", + "Size": "-20, 10", "Visual Type": "SpriteVisual", }, { @@ -9911,16 +5348,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -35, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 35, - 35, - ], + "Offset": "-35, 0, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { @@ -9928,16 +5357,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -10, - 35, - 0, - ], - "Opacity": 1, - "Size": [ - 10, - -20, - ], + "Offset": "-10, 35, 0", + "Size": "10, -20", "Visual Type": "SpriteVisual", }, { @@ -9945,16 +5366,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -35, - -35, - 0, - ], - "Opacity": 1, - "Size": [ - 35, - 35, - ], + "Offset": "-35, -35, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { @@ -9962,16 +5375,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 35, - -10, - 0, - ], - "Opacity": 1, - "Size": [ - -20, - 10, - ], + "Offset": "35, -10, 0", + "Size": "-20, 10", "Visual Type": "SpriteVisual", }, { @@ -9979,16 +5384,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -35, - 0, - ], - "Opacity": 1, - "Size": [ - 35, - 35, - ], + "Offset": "0, -35, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { @@ -9996,76 +5393,36 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 35, - 0, - ], - "Opacity": 1, - "Size": [ - 10, - -20, - ], + "Offset": "0, 35, 0", + "Size": "10, -20", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 60, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "120, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 5, - 5, - ], + "Offset": "0, 0, 0", + "Size": "5, 5", "Visual Type": "SpriteVisual", }, { @@ -10073,16 +5430,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 5, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 34, - 1, - ], + "Offset": "5, 0, 0", + "Size": "34, 1", "Visual Type": "SpriteVisual", }, { @@ -10090,16 +5439,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -11, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 11, - 11, - ], + "Offset": "-11, 0, 0", + "Size": "11, 11", "Visual Type": "SpriteVisual", }, { @@ -10107,16 +5448,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -1, - 11, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 22, - ], + "Offset": "-1, 11, 0", + "Size": "1, 22", "Visual Type": "SpriteVisual", }, { @@ -10124,16 +5457,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -17, - -17, - 0, - ], - "Opacity": 1, - "Size": [ - 17, - 17, - ], + "Offset": "-17, -17, 0", + "Size": "17, 17", "Visual Type": "SpriteVisual", }, { @@ -10141,16 +5466,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 34, - -1, - 0, - ], - "Opacity": 1, - "Size": [ - -1, - 1, - ], + "Offset": "34, -1, 0", + "Size": "-1, 1", "Visual Type": "SpriteVisual", }, { @@ -10158,16 +5475,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -34, - 0, - ], - "Opacity": 1, - "Size": [ - 34, - 34, - ], + "Offset": "0, -34, 0", + "Size": "34, 34", "Visual Type": "SpriteVisual", }, { @@ -10175,76 +5484,36 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 5, - 0, - ], - "Opacity": 1, - "Size": [ - 1, - 11, - ], + "Offset": "0, 5, 0", + "Size": "1, 11", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 120, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "180, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 14, - 14, - ], + "Offset": "0, 0, 0", + "Size": "14, 14", "Visual Type": "SpriteVisual", }, { @@ -10252,16 +5521,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 14, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 16, - 10, - ], + "Offset": "14, 0, 0", + "Size": "16, 10", "Visual Type": "SpriteVisual", }, { @@ -10269,16 +5530,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -20, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 20, - 20, - ], + "Offset": "-20, 0, 0", + "Size": "20, 20", "Visual Type": "SpriteVisual", }, { @@ -10286,16 +5539,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -10, - 20, - 0, - ], - "Opacity": 1, - "Size": [ - 10, - 4, - ], + "Offset": "-10, 20, 0", + "Size": "10, 4", "Visual Type": "SpriteVisual", }, { @@ -10303,16 +5548,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -26, - -26, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "-26, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -10320,16 +5557,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 43, - -10, - 0, - ], - "Opacity": 1, - "Size": [ - -19, - 10, - ], + "Offset": "43, -10, 0", + "Size": "-19, 10", "Visual Type": "SpriteVisual", }, { @@ -10337,16 +5566,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -43, - 0, - ], - "Opacity": 1, - "Size": [ - 43, - 43, - ], + "Offset": "0, -43, 0", + "Size": "43, 43", "Visual Type": "SpriteVisual", }, { @@ -10354,76 +5575,36 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 14, - 0, - ], - "Opacity": 1, - "Size": [ - 10, - -7, - ], + "Offset": "0, 14, 0", + "Size": "10, -7", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 180, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "240, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "0, 0, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -10431,16 +5612,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 26, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 24, - 6, - ], + "Offset": "26, 0, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { @@ -10448,16 +5621,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 6, - ], + "Offset": "-0, 0, 0", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { @@ -10465,16 +5630,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -0, - 6, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 44, - ], + "Offset": "-0, 6, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, { @@ -10482,16 +5639,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -0, - -0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "-0, -0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { @@ -10499,16 +5648,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 6, - -0, - 0, - ], - "Opacity": 1, - "Size": [ - 44, - 0, - ], + "Offset": "6, -0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { @@ -10516,16 +5657,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -0, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 0, - ], + "Offset": "0, -0, 0", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { @@ -10533,76 +5666,36 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 26, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 24, - ], + "Offset": "0, 26, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 240, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "290, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 6, - ], + "Offset": "0, 0, 0", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { @@ -10610,16 +5703,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 24, - 6, - ], + "Offset": "0, 0, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { @@ -10627,16 +5712,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -26, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "-26, 0, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -10644,16 +5721,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -6, - 26, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 24, - ], + "Offset": "-6, 26, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, { @@ -10661,16 +5730,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -6, - -0, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 0, - ], + "Offset": "-6, -0, 0", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { @@ -10678,16 +5739,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -0, - 0, - ], - "Opacity": 1, - "Size": [ - 44, - 0, - ], + "Offset": "0, -0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { @@ -10695,16 +5748,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, -0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { @@ -10712,76 +5757,36 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 6, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 44, - ], + "Offset": "0, 6, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 290, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "340, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 0, - ], + "Offset": "0, 0, 0", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { @@ -10789,16 +5794,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 6, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 44, - 0, - ], + "Offset": "6, 0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { @@ -10806,16 +5803,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "-0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { @@ -10823,16 +5812,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 44, - ], + "Offset": "-0, 0, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, { @@ -10840,16 +5821,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -0, - -6, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 6, - ], + "Offset": "-0, -6, 0", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { @@ -10857,16 +5830,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 26, - -6, - 0, - ], - "Opacity": 1, - "Size": [ - 24, - 6, - ], + "Offset": "26, -6, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { @@ -10874,16 +5839,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -26, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "0, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -10891,76 +5848,36 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 24, - ], + "Offset": "0, 0, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 340, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "390, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ { "Brush": { "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { @@ -10968,16 +5885,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 44, - 0, - ], + "Offset": "0, 0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { @@ -10985,16 +5894,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -6, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 0, - ], + "Offset": "-6, 0, 0", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { @@ -11002,16 +5903,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -6, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 6, - 24, - ], + "Offset": "-6, 0, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, { @@ -11019,16 +5912,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - -26, - -26, - 0, - ], - "Opacity": 1, - "Size": [ - 26, - 26, - ], + "Offset": "-26, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -11036,16 +5921,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -6, - 0, - ], - "Opacity": 1, - "Size": [ - 24, - 6, - ], + "Offset": "0, -6, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { @@ -11053,16 +5930,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - -6, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 6, - ], + "Offset": "0, -6, 0", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { @@ -11070,70 +5939,20 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 44, - ], + "Offset": "0, 0, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 390, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "view-test-rounded-borders", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 50, - ], - "Visual Type": "SpriteVisual", }, } `; @@ -11143,24 +5962,20 @@ exports[`View Tests Views can have shadows 1`] = ` "Automation Tree": { "AutomationId": "shadow", "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "group", "Name": "Shadow Example", }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Shadow Example", + "TestId": "shadow", + }, + }, "Visual Tree": { "Comment": "shadow", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 50, - 50, - ], + "Offset": "0, 0, 0", + "Size": "50, 50", "Visual Type": "SpriteVisual", }, } @@ -11170,180 +5985,109 @@ exports[`View Tests Views can have tooltips 1`] = ` { "Automation Tree": { "AutomationId": "tool-tip", - "Children": [ + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "Tooltip Example", + "__Children": [ { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "This Parent View has tooltip "Parent View"", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "This view has tooltip "Child View 1"", }, { "AutomationId": "", "ControlType": 50020, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, "LocalizedControlType": "text", "Name": "This view has tooltip "Child View 2"", }, ], - "ControlType": 50026, - "HelpText": "", - "IsEnabled": true, - "IsKeyboardFocusable": false, - "LocalizedControlType": "group", - "Name": "Tooltip Example", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Tooltip Example", + "TestId": "tool-tip", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, "Visual Tree": { - "Children": [ + "Comment": "tool-tip", + "Offset": "0, 0, 0", + "Size": "916, 43", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Children": [ + "Offset": "0, 0, 0", + "Size": "916, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 16, - ], + "Offset": "0, 0, 0", + "Size": "916, 16", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 16, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 15, 0", + "Size": "916, 15", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 15, - ], + "Offset": "0, 0, 0", + "Size": "916, 15", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 15, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 15, - ], - "Visual Type": "SpriteVisual", }, { - "Children": [ + "Offset": "0, 29, 0", + "Size": "916, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 16, - ], + "Offset": "0, 0, 0", + "Size": "916, 16", "Visual Type": "SpriteVisual", }, { - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 0, - 0, - ], + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, ], - "Offset": [ - 0, - 29, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 16, - ], - "Visual Type": "SpriteVisual", }, ], - "Comment": "tool-tip", - "Offset": [ - 0, - 0, - 0, - ], - "Opacity": 1, - "Size": [ - 916, - 43, - ], - "Visual Type": "SpriteVisual", }, } `; diff --git a/packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/RNTesterApp-Fabric.cpp b/packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/RNTesterApp-Fabric.cpp index 6f2413bd8c1..f19cb8455d0 100644 --- a/packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/RNTesterApp-Fabric.cpp +++ b/packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/RNTesterApp-Fabric.cpp @@ -29,6 +29,7 @@ std::vector g_Errors; std::vector g_Warnings; HWND global_hwnd; winrt::Microsoft::ReactNative::CompositionRootView *global_rootView{nullptr}; +winrt::Microsoft::ReactNative::IReactContext global_reactContext{nullptr}; // Forward declarations of functions included in this code module: winrt::Windows::Data::Json::JsonObject ListErrors(winrt::Windows::Data::Json::JsonValue payload); @@ -86,6 +87,11 @@ winrt::Microsoft::ReactNative::ReactNativeHost CreateReactNativeHost( host.InstanceSettings().UseDeveloperSupport(false); #endif + host.InstanceSettings().InstanceLoaded( + [](auto sender, const winrt::Microsoft::ReactNative::InstanceLoadedEventArgs &args) { + global_reactContext = args.Context(); + }); + // Test App hooks into JS console.log implementation to record errors/warnings host.InstanceSettings().NativeLogger([](winrt::Microsoft::ReactNative::LogLevel level, winrt::hstring message) { if (level == winrt::Microsoft::ReactNative::LogLevel::Error || @@ -197,6 +203,59 @@ _Use_decl_annotations_ int CALLBACK WinMain(HINSTANCE instance, HINSTANCE, PSTR compositor = nullptr; } +void InsertStringValueIfNotEmpty( + const winrt::Windows::Data::Json::JsonObject &obj, + winrt::hstring name, + winrt::hstring value) { + if (!value.empty()) { + obj.Insert(name, winrt::Windows::Data::Json::JsonValue::CreateStringValue(value)); + } +} + +void InsertNumberValueIfNotDefault( + const winrt::Windows::Data::Json::JsonObject &obj, + winrt::hstring name, + float value, + float defaultValue = 0.0f) { + if (value != defaultValue) { + obj.Insert(name, winrt::Windows::Data::Json::JsonValue::CreateNumberValue(value)); + } +} + +void InsertBooleanValueIfNotDefault( + const winrt::Windows::Data::Json::JsonObject &obj, + winrt::hstring name, + bool value, + bool defaultValue = false) { + if (value != defaultValue) { + obj.Insert(name, winrt::Windows::Data::Json::JsonValue::CreateBooleanValue(value)); + } +} + +void InsertSizeValue( + const winrt::Windows::Data::Json::JsonObject &obj, + winrt::hstring name, + winrt::Windows::Foundation::Size value) { + auto str = winrt::to_hstring(value.Width) + L", " + winrt::to_hstring(value.Height); + obj.Insert(name, winrt::Windows::Data::Json::JsonValue::CreateStringValue(str)); +} + +void InsertFloat2Value( + const winrt::Windows::Data::Json::JsonObject &obj, + winrt::hstring name, + winrt::Windows::Foundation::Numerics::float2 value) { + auto str = winrt::to_hstring(value.x) + L", " + winrt::to_hstring(value.y); + obj.Insert(name, winrt::Windows::Data::Json::JsonValue::CreateStringValue(str)); +} + +void InsertFloat3Value( + const winrt::Windows::Data::Json::JsonObject &obj, + winrt::hstring name, + winrt::Windows::Foundation::Numerics::float3 value) { + auto str = winrt::to_hstring(value.x) + L", " + winrt::to_hstring(value.y) + L", " + winrt::to_hstring(value.z); + obj.Insert(name, winrt::Windows::Data::Json::JsonValue::CreateStringValue(str)); +} + winrt::Windows::Data::Json::JsonObject ListErrors(winrt::Windows::Data::Json::JsonValue payload) { winrt::Windows::Data::Json::JsonObject result; winrt::Windows::Data::Json::JsonArray jsonErrors; @@ -238,12 +297,12 @@ winrt::Windows::Data::Json::JsonObject DumpUIATreeRecurse( pTarget->get_CurrentName(&name); result.Insert(L"AutomationId", winrt::Windows::Data::Json::JsonValue::CreateStringValue(automationId)); result.Insert(L"ControlType", winrt::Windows::Data::Json::JsonValue::CreateNumberValue(controlType)); - result.Insert(L"HelpText", winrt::Windows::Data::Json::JsonValue::CreateStringValue(helpText)); - result.Insert(L"IsEnabled", winrt::Windows::Data::Json::JsonValue::CreateBooleanValue(isEnabled)); - result.Insert(L"IsKeyboardFocusable", winrt::Windows::Data::Json::JsonValue::CreateBooleanValue(isKeyboardFocusable)); + InsertStringValueIfNotEmpty(result, L"HelpText", helpText); + InsertBooleanValueIfNotDefault(result, L"IsEnabled", isEnabled, true); + InsertBooleanValueIfNotDefault(result, L"IsKeyboardFocusable", isKeyboardFocusable); result.Insert( L"LocalizedControlType", winrt::Windows::Data::Json::JsonValue::CreateStringValue(localizedControlType)); - result.Insert(L"Name", winrt::Windows::Data::Json::JsonValue::CreateStringValue(name)); + InsertStringValueIfNotEmpty(result, L"Name", name); IUIAutomationElement *pChild; IUIAutomationElement *pSibling; @@ -256,7 +315,7 @@ winrt::Windows::Data::Json::JsonObject DumpUIATreeRecurse( pSibling = nullptr; } if (children.Size() > 0) { - result.Insert(L"Children", children); + result.Insert(L"__Children", children); } return result; } @@ -299,19 +358,10 @@ winrt::Windows::Data::Json::JsonObject DumpUIATreeHelper(winrt::Windows::Data::J winrt::Windows::Data::Json::JsonObject PrintVisualTree(winrt::Microsoft::UI::Composition::Visual node) { winrt::Windows::Data::Json::JsonObject result; - if (!node.Comment().empty()) { - result.Insert(L"Comment", winrt::Windows::Data::Json::JsonValue::CreateStringValue(node.Comment())); - } - winrt::Windows::Data::Json::JsonArray visualSize; - visualSize.Append(winrt::Windows::Data::Json::JsonValue::CreateNumberValue(node.Size().x)); - visualSize.Append(winrt::Windows::Data::Json::JsonValue::CreateNumberValue(node.Size().y)); - result.Insert(L"Size", visualSize); - winrt::Windows::Data::Json::JsonArray visualOffset; - visualOffset.Append(winrt::Windows::Data::Json::JsonValue::CreateNumberValue(node.Offset().x)); - visualOffset.Append(winrt::Windows::Data::Json::JsonValue::CreateNumberValue(node.Offset().y)); - visualOffset.Append(winrt::Windows::Data::Json::JsonValue::CreateNumberValue(node.Offset().z)); - result.Insert(L"Offset", visualOffset); - result.Insert(L"Opacity", winrt::Windows::Data::Json::JsonValue::CreateNumberValue(node.Opacity())); + InsertStringValueIfNotEmpty(result, L"Comment", node.Comment()); + InsertFloat2Value(result, L"Size", node.Size()); + InsertFloat3Value(result, L"Offset", node.Offset()); + InsertNumberValueIfNotDefault(result, L"Opacity", node.Opacity(), 1.0f); auto spriteVisual = node.try_as(); if (spriteVisual) { result.Insert(L"Visual Type", winrt::Windows::Data::Json::JsonValue::CreateStringValue(L"SpriteVisual")); @@ -339,7 +389,6 @@ winrt::Windows::Data::Json::JsonObject DumpVisualTreeRecurse( winrt::hstring accessibilityId, boolean targetNodeHit) { winrt::Windows::Data::Json::JsonObject result; - boolean targetNodeFound = false; if (targetNodeHit) { result = PrintVisualTree(node); } @@ -352,7 +401,6 @@ winrt::Windows::Data::Json::JsonObject DumpVisualTreeRecurse( winrt::Windows::Data::Json::JsonArray children; for (auto childVisual : nodeChildren) { if (!targetNodeHit && childVisual.Comment() == accessibilityId) { - targetNodeFound = true; result = DumpVisualTreeRecurse(childVisual, accessibilityId, true); break; } else if (targetNodeHit) { @@ -366,7 +414,85 @@ winrt::Windows::Data::Json::JsonObject DumpVisualTreeRecurse( } } if (targetNodeHit && children.Size() > 0) { - result.Insert(L"Children", children); + result.Insert(L"__Children", children); + } + return result; +} + +winrt::Windows::Data::Json::JsonObject PrintNativeComponentTree(winrt::Microsoft::ReactNative::ComponentView node) { + winrt::Windows::Data::Json::JsonObject result; + + result.Insert(L"Type", winrt::Windows::Data::Json::JsonValue::CreateStringValue(winrt::get_class_name(node))); + + if (auto viewComponent = node.try_as()) { + winrt::Windows::Data::Json::JsonObject props; + + auto viewProps = viewComponent.ViewProps(); + InsertNumberValueIfNotDefault(props, L"Opacity", viewProps.Opacity(), 1.0f); + InsertStringValueIfNotEmpty(props, L"TestId", viewProps.TestId()); + InsertStringValueIfNotEmpty(props, L"AccessibilityLabel", viewProps.AccessibilityLabel()); + if (auto imageComponent = node.try_as()) { + winrt::Windows::Data::Json::JsonArray sources; + auto imageProps = viewProps.as(); + if (imageProps.Sources().Size() != 0) { + for (auto imageSource : imageProps.Sources()) { + winrt::Windows::Data::Json::JsonObject source; + InsertStringValueIfNotEmpty(source, L"Uri", imageSource.Uri()); + if (imageSource.Size().Width || imageSource.Size().Height) { + InsertSizeValue(source, L"Size", imageSource.Size()); + } + InsertNumberValueIfNotDefault(source, L"Scale", imageSource.Scale(), 1.0f); + InsertStringValueIfNotEmpty(source, L"Bundle", imageSource.Bundle()); + switch (imageSource.Type()) { + case winrt::Microsoft::ReactNative::ImageSourceType::Invalid: + source.Insert(L"Type", winrt::Windows::Data::Json::JsonValue::CreateStringValue(L"Invalid")); + break; + case winrt::Microsoft::ReactNative::ImageSourceType::Local: + source.Insert(L"Type", winrt::Windows::Data::Json::JsonValue::CreateStringValue(L"Local")); + break; + case winrt::Microsoft::ReactNative::ImageSourceType::Remote: + source.Insert(L"Type", winrt::Windows::Data::Json::JsonValue::CreateStringValue(L"Remote")); + break; + } + sources.Append(source); + } + props.Insert(L"Sources", sources); + } + } + result.Insert(L"_Props", props); + } + return result; +} + +winrt::Windows::Data::Json::JsonObject DumpNativeComponentTreeRecurse( + winrt::Microsoft::ReactNative::ComponentView node, + winrt::hstring accessibilityId, + boolean targetNodeHit) { + winrt::Windows::Data::Json::JsonObject result; + if (targetNodeHit) { + result = PrintNativeComponentTree(node); + } + + auto nodeChildren = node.Children(); + winrt::Windows::Data::Json::JsonArray children; + for (auto childNode : nodeChildren) { + auto childNodeAsViewComponent = childNode.try_as(); + if (!targetNodeHit && childNodeAsViewComponent && + childNodeAsViewComponent.ViewProps().TestId() == accessibilityId) { + result = DumpNativeComponentTreeRecurse(childNode, accessibilityId, true); + break; + } else if (targetNodeHit) { + children.Append(DumpNativeComponentTreeRecurse(childNode, accessibilityId, targetNodeHit)); + } else if (!targetNodeHit) { + auto subtree = DumpNativeComponentTreeRecurse(childNode, accessibilityId, targetNodeHit); + if (subtree.Size() > 0) { + result = subtree; + break; + } + } + } + if (targetNodeHit && children.Size() > 0) { + result.Insert(L"__Children", children); } return result; } @@ -379,11 +505,24 @@ winrt::Windows::Data::Json::JsonObject DumpVisualTreeHelper(winrt::Windows::Data return visualTree; } +winrt::Windows::Data::Json::JsonObject DumpNativeComponentTreeHelper( + winrt::Windows::Data::Json::JsonObject payloadObj) { + auto accessibilityId = payloadObj.GetNamedString(L"accessibilityId"); + winrt::Windows::Data::Json::JsonObject visualTree; + auto rootTag = global_rootView->RootTag(); + if (auto root = winrt::Microsoft::ReactNative::Composition::CompositionUIService::ComponentFromReactTag( + global_reactContext, rootTag)) { + visualTree = DumpNativeComponentTreeRecurse(root, accessibilityId, false); + } + return visualTree; +} + winrt::Windows::Data::Json::JsonObject DumpVisualTree(winrt::Windows::Data::Json::JsonValue payload) { winrt::Windows::Data::Json::JsonObject payloadObj = payload.GetObject(); winrt::Windows::Data::Json::JsonObject result; result.Insert(L"Automation Tree", DumpUIATreeHelper(payloadObj)); result.Insert(L"Visual Tree", DumpVisualTreeHelper(payloadObj)); + result.Insert(L"Component Tree", DumpNativeComponentTreeHelper(payloadObj)); return result; } diff --git a/packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/RNTesterApp-Fabric.vcxproj b/packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/RNTesterApp-Fabric.vcxproj index f91d230bc06..ed95f16b95d 100644 --- a/packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/RNTesterApp-Fabric.vcxproj +++ b/packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/RNTesterApp-Fabric.vcxproj @@ -95,7 +95,6 @@ USE_FABRIC;%(PreprocessorDefinitions) - stdcpp17 diff --git a/vnext/Desktop/module.g.cpp b/vnext/Desktop/module.g.cpp index 1c37550b495..b5eef16b644 100644 --- a/vnext/Desktop/module.g.cpp +++ b/vnext/Desktop/module.g.cpp @@ -12,6 +12,7 @@ void *winrt_make_Microsoft_ReactNative_Composition_Experimental_MicrosoftComposi #endif void *winrt_make_Microsoft_ReactNative_Composition_Experimental_SystemCompositionContextHelper(); void *winrt_make_Microsoft_ReactNative_Composition_CompositionUIService(); +void* winrt_make_Microsoft_ReactNative_Composition_ViewComponentView(); void* winrt_make_Microsoft_ReactNative_JsiRuntime(); void* winrt_make_Microsoft_ReactNative_ReactCoreInjection(); void* winrt_make_Microsoft_ReactNative_ReactDispatcherHelper(); @@ -25,6 +26,12 @@ void* winrt_make_Microsoft_ReactNative_QuirkSettings(); void* winrt_make_facebook_react_NativeLogEventSource(); void* winrt_make_facebook_react_NativeTraceEventSource(); +#ifndef USE_FABRIC +void* winrt_make_Microsoft_ReactNative_Composition_ViewComponentView() { + winrt::throw_hresult(E_NOTIMPL); +} +#endif + bool __stdcall winrt_can_unload_now() noexcept { if (winrt::get_module_lock()) @@ -61,6 +68,9 @@ void* __stdcall winrt_get_activation_factory([[maybe_unused]] std::wstring_view if (requal(name, L"Microsoft.ReactNative.Composition.CompositionUIService")) { return winrt_make_Microsoft_ReactNative_Composition_CompositionUIService(); } + if (requal(name, L"Microsoft.ReactNative.Composition.ViewComponentView")) { + return winrt_make_Microsoft_ReactNative_Composition_ViewComponentView(); + } if (requal(name, L"Microsoft.ReactNative.JsiRuntime")) { return winrt_make_Microsoft_ReactNative_JsiRuntime(); diff --git a/vnext/Microsoft.ReactNative.Cxx/JSValueComposition.h b/vnext/Microsoft.ReactNative.Cxx/JSValueComposition.h index 3a12d4da533..ff611bda46d 100644 --- a/vnext/Microsoft.ReactNative.Cxx/JSValueComposition.h +++ b/vnext/Microsoft.ReactNative.Cxx/JSValueComposition.h @@ -17,6 +17,10 @@ inline void WriteValue(IJSValueWriter const &writer, const Color &value) noexcep winrt::Microsoft::ReactNative::Color::WriteValue(writer, value); } +inline void ReadValue(IJSValueReader const &reader, ImageSource &value) noexcept { + value = winrt::Microsoft::ReactNative::ImageSource::ReadValue(reader); +} + } // namespace winrt::Microsoft::ReactNative #endif // MICROSOFT_REACTNATIVE_JSVALUECOMPOSITION diff --git a/vnext/Microsoft.ReactNative/CompositionComponentView.idl b/vnext/Microsoft.ReactNative/CompositionComponentView.idl index 608875eadd6..2cd29187d2c 100644 --- a/vnext/Microsoft.ReactNative/CompositionComponentView.idl +++ b/vnext/Microsoft.ReactNative/CompositionComponentView.idl @@ -81,7 +81,7 @@ namespace Microsoft.ReactNative.Composition [experimental] [webhosthidden] [default_interface] - unsealed runtimeclass SwitchComponentView : ComponentView { + unsealed runtimeclass SwitchComponentView : ViewComponentView { }; [experimental] @@ -99,31 +99,32 @@ namespace Microsoft.ReactNative.Composition [experimental] [webhosthidden] [default_interface] - unsealed runtimeclass ActivityIndicatorComponentView : ComponentView { + unsealed runtimeclass ActivityIndicatorComponentView : ViewComponentView { }; [experimental] [webhosthidden] [default_interface] - unsealed runtimeclass WindowsModalHostComponentView : ComponentView { + unsealed runtimeclass WindowsModalHostComponentView : ViewComponentView { }; [experimental] [webhosthidden] [default_interface] - unsealed runtimeclass ImageComponentView : ComponentView { + unsealed runtimeclass ImageComponentView : ViewComponentView { + Microsoft.ReactNative.ImageProps ViewProps { get; }; }; [experimental] [webhosthidden] [default_interface] - unsealed runtimeclass ParagraphComponentView : ComponentView { + unsealed runtimeclass ParagraphComponentView : ViewComponentView { }; [experimental] [webhosthidden] [default_interface] - unsealed runtimeclass ScrollViewComponentView : ComponentView { + unsealed runtimeclass ScrollViewComponentView : ViewComponentView { }; [experimental] @@ -135,7 +136,7 @@ namespace Microsoft.ReactNative.Composition [experimental] [webhosthidden] [default_interface] - unsealed runtimeclass WindowsTextInputComponentView : ComponentView { + unsealed runtimeclass WindowsTextInputComponentView : ViewComponentView { }; } // namespace Microsoft.ReactNative diff --git a/vnext/Microsoft.ReactNative/CompositionRootView.idl b/vnext/Microsoft.ReactNative/CompositionRootView.idl index 9090942282a..3bc4cffd8ed 100644 --- a/vnext/Microsoft.ReactNative/CompositionRootView.idl +++ b/vnext/Microsoft.ReactNative/CompositionRootView.idl @@ -99,6 +99,7 @@ namespace Microsoft.ReactNative Microsoft.ReactNative.Composition.ICustomResourceLoader Resources; Microsoft.ReactNative.Composition.Theme Theme { get; }; + Int64 RootTag { get; }; #ifdef USE_WINUI3 Microsoft.UI.Content.ContentIsland Island { get; }; diff --git a/vnext/Microsoft.ReactNative/CompositionUIService.idl b/vnext/Microsoft.ReactNative/CompositionUIService.idl index b97f180e322..701db0ac1de 100644 --- a/vnext/Microsoft.ReactNative/CompositionUIService.idl +++ b/vnext/Microsoft.ReactNative/CompositionUIService.idl @@ -2,6 +2,7 @@ // Licensed under the MIT License. import "ReactInstanceSettings.idl"; +import "ComponentView.idl"; #include "DocString.h" @@ -22,5 +23,8 @@ namespace Microsoft.ReactNative.Composition "Gets the Compositor used by this ReactNative instance.") static Microsoft.UI.Composition.Compositor GetCompositor(Microsoft.ReactNative.IReactPropertyBag properties); + DOC_STRING("Gets the ComponentView from a react tag.") + static Microsoft.ReactNative.ComponentView ComponentFromReactTag(Microsoft.ReactNative.IReactContext context, Int64 reactTag); + } } // namespace Microsoft.ReactNative.Composition diff --git a/vnext/Microsoft.ReactNative/Fabric/AbiViewComponentDescriptor.cpp b/vnext/Microsoft.ReactNative/Fabric/AbiViewComponentDescriptor.cpp index 9c0d579224a..1c8ffc99762 100644 --- a/vnext/Microsoft.ReactNative/Fabric/AbiViewComponentDescriptor.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/AbiViewComponentDescriptor.cpp @@ -99,7 +99,8 @@ facebook::react::Props::Shared AbiViewComponentDescriptor::cloneProps( // auto shadowNodeProps = std::make_shared(context, rawProps, props); auto shadowNodeProps = std::make_shared( context, props ? static_cast(*props) : *ShadowNodeT::defaultSharedProps(), rawProps); - auto viewProps = winrt::make(shadowNodeProps); + auto viewProps = + winrt::make(shadowNodeProps, false /*holdRef*/); auto userProps = winrt::get_self(m_builder) ->CreateProps(viewProps); diff --git a/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp b/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp index 96e9fb26ca5..d89b520b357 100644 --- a/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp @@ -7,10 +7,12 @@ #include #include +#include +#include +#include -#if __has_include("Color.g.cpp") #include "Color.g.cpp" -#endif +#include "ImageSource.g.cpp" namespace Microsoft::ReactNative { @@ -21,24 +23,24 @@ AbiViewProps::AbiViewProps( : facebook::react::ViewProps(context, sourceProps, rawProps) {} AbiViewProps::~AbiViewProps() { - if (m_userProps) { - winrt::get_self(m_userProps)->Disconnect(); + if (m_innerProps) { + winrt::get_self(m_innerProps)->Disconnect(); } } void AbiViewProps::SetUserProps( - winrt::Microsoft::ReactNative::IComponentProps componentProps, - winrt::Microsoft::ReactNative::ViewProps userProps) noexcept { - m_componentProps = componentProps; + winrt::Microsoft::ReactNative::IComponentProps userProps, + winrt::Microsoft::ReactNative::ViewProps innerProps) noexcept { m_userProps = userProps; + m_innerProps = innerProps; } winrt::Microsoft::ReactNative::IComponentProps AbiViewProps::UserProps() const noexcept { - return m_componentProps; + return m_userProps; } winrt::Microsoft::ReactNative::ViewProps AbiViewProps::ViewProps() const noexcept { - return m_userProps; + return m_innerProps; } } // namespace Microsoft::ReactNative @@ -124,29 +126,114 @@ winrt::Microsoft::ReactNative::Color Color::White() noexcept { return winrt::make(facebook::react::whiteColor()); } -UserViewProps::UserViewProps(std::shared_ptr<::Microsoft::ReactNative::AbiViewProps const> viewProps) noexcept - : m_viewProps(viewProps.get()) {} +ImageSource::ImageSource(const facebook::react::ImageSource &imageSource) : m_imageSource(imageSource) {} + +ImageSourceType ImageSource::Type() noexcept { + static_assert( + winrt::Microsoft::ReactNative::ImageSourceType::Invalid == + static_cast(facebook::react::ImageSource::Type::Invalid)); + static_assert( + winrt::Microsoft::ReactNative::ImageSourceType::Remote == + static_cast(facebook::react::ImageSource::Type::Remote)); + static_assert( + winrt::Microsoft::ReactNative::ImageSourceType::Local == + static_cast(facebook::react::ImageSource::Type::Local)); + return static_cast(m_imageSource.type); +} + +winrt::hstring ImageSource::Uri() noexcept { + return winrt::to_hstring(m_imageSource.uri); +} -void UserViewProps::Disconnect() noexcept { +winrt::hstring ImageSource::Bundle() noexcept { + return winrt::to_hstring(m_imageSource.bundle); +} + +float ImageSource::Scale() noexcept { + return m_imageSource.scale; +} + +winrt::Windows::Foundation::Size ImageSource::Size() noexcept { + return {m_imageSource.size.width, m_imageSource.size.height}; +} + +winrt::Microsoft::ReactNative::ImageSource ImageSource::ReadValue( + const winrt::Microsoft::ReactNative::IJSValueReader &reader) noexcept { + facebook::react::ImageSource imageSource; + switch (reader.ValueType()) { + case JSValueType::String: { + imageSource.type = facebook::react::ImageSource::Type::Remote; + imageSource.uri = winrt::to_string(reader.GetString()); + break; + } + case JSValueType::Object: { + imageSource.type = facebook::react::ImageSource::Type::Remote; + + winrt::hstring propertyName; + while (reader.GetNextObjectProperty(/*out*/ propertyName)) { + if (propertyName == L"__packager_asset") { + imageSource.type = facebook::react::ImageSource::Type::Local; + } else if (propertyName == L"width") { + imageSource.size.width = static_cast(reader.GetDouble()); + } else if (propertyName == L"height") { + imageSource.size.height = static_cast(reader.GetDouble()); + } else if (propertyName == L"scale") { + imageSource.scale = static_cast(reader.GetDouble()); + } else if (propertyName == L"uri") { + imageSource.uri = winrt::to_string(reader.GetString()); + } else if (propertyName == L"url") { + imageSource.uri = winrt::to_string(reader.GetString()); + } else if (propertyName == L"bundle") { + imageSource.bundle = winrt::to_string(reader.GetString()); + imageSource.type = facebook::react::ImageSource::Type::Local; + } + } + break; + } + default: { + imageSource.type = facebook::react::ImageSource::Type::Invalid; + break; + } + } + return winrt::make(imageSource); +} + +ViewProps::ViewProps(facebook::react::SharedViewProps props, bool holdRef) noexcept + : m_props(holdRef ? props : nullptr), m_viewProps(static_cast(props.get())) {} + +void ViewProps::Disconnect() noexcept { m_viewProps = nullptr; } -float UserViewProps::Opacity() noexcept { +float ViewProps::Opacity() noexcept { return m_viewProps ? m_viewProps->opacity : 1.0f; } -winrt::Microsoft::ReactNative::Color UserViewProps::BackgroundColor() noexcept { +winrt::Microsoft::ReactNative::Color ViewProps::BackgroundColor() noexcept { return winrt::make(m_viewProps ? m_viewProps->backgroundColor : facebook::react::clearColor()); } -ViewProps::ViewProps(facebook::react::SharedViewProps props) noexcept : m_props(props) {} +winrt::hstring ViewProps::TestId() noexcept { + return m_viewProps ? winrt::to_hstring(m_viewProps->testId) : winrt::hstring{}; +} -float ViewProps::Opacity() noexcept { - return m_props->opacity; +winrt::hstring ViewProps::AccessibilityLabel() noexcept { + return m_viewProps ? winrt::to_hstring(m_viewProps->accessibilityLabel) : winrt::hstring{}; } -winrt::Microsoft::ReactNative::Color ViewProps::BackgroundColor() noexcept { - return winrt::make(m_props->backgroundColor); +ImageProps::ImageProps(facebook::react::SharedViewProps props) noexcept : Super(props) {} + +winrt::Windows::Foundation::Collections::IVectorView +ImageProps::Sources() noexcept { + winrt::Windows::Foundation::Collections::IVector sources{ + winrt::single_threaded_vector()}; + const auto imageProps = std::static_pointer_cast(m_props); + + for (const auto &source : imageProps->sources) { + sources.Append(winrt::make(source)); + } + + return sources.GetView(); } } // namespace winrt::Microsoft::ReactNative::implementation diff --git a/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.h b/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.h index 2f4a24cfb3d..6269e7f118c 100644 --- a/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.h +++ b/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.h @@ -4,9 +4,12 @@ #pragma once #include "Color.g.h" +#include "ImageProps.g.h" +#include "ImageSource.g.h" #include "ViewProps.g.h" #include +#include #include "winrt/Microsoft.ReactNative.Composition.Experimental.h" #include "winrt/Microsoft.ReactNative.h" @@ -22,14 +25,14 @@ class AbiViewProps final : public facebook::react::ViewProps { ~AbiViewProps(); void SetUserProps( - winrt::Microsoft::ReactNative::IComponentProps componentProps, - winrt::Microsoft::ReactNative::ViewProps userProps) noexcept; + winrt::Microsoft::ReactNative::IComponentProps userProps, + winrt::Microsoft::ReactNative::ViewProps innerProps) noexcept; winrt::Microsoft::ReactNative::IComponentProps UserProps() const noexcept; winrt::Microsoft::ReactNative::ViewProps ViewProps() const noexcept; private: - winrt::Microsoft::ReactNative::IComponentProps m_componentProps{nullptr}; - winrt::Microsoft::ReactNative::ViewProps m_userProps{nullptr}; + winrt::Microsoft::ReactNative::IComponentProps m_userProps{nullptr}; + winrt::Microsoft::ReactNative::ViewProps m_innerProps{nullptr}; }; } // namespace Microsoft::ReactNative @@ -60,27 +63,55 @@ struct Color : ColorT { facebook::react::SharedColor m_color; }; -struct UserViewProps : ViewPropsT { - UserViewProps(std::shared_ptr<::Microsoft::ReactNative::AbiViewProps const> viewProps) noexcept; +struct ImageSource : ImageSourceT { + ImageSource(const facebook::react::ImageSource &imageSource); - float Opacity() noexcept; - winrt::Microsoft::ReactNative::Color BackgroundColor() noexcept; + ImageSourceType Type() noexcept; + winrt::hstring Uri() noexcept; + winrt::hstring Bundle() noexcept; + float Scale() noexcept; + winrt::Windows::Foundation::Size Size() noexcept; - void Disconnect() noexcept; + static winrt::Microsoft::ReactNative::ImageSource ReadValue( + const winrt::Microsoft::ReactNative::IJSValueReader &reader) noexcept; + + static void WriteValue( + const winrt::Microsoft::ReactNative::IJSValueWriter &writer, + const winrt::Microsoft::ReactNative::ImageSource &value) noexcept; private: - // Use a raw pointer here to avoid a ref cycle with AbiViewProps. ~AbiViewProps will clear this pointer - ::Microsoft::ReactNative::AbiViewProps const *m_viewProps{nullptr}; + const facebook::react::ImageSource m_imageSource; }; +/** + * When providing a external ViewProps object on a normal ComponentView, ViewProps will hold a reference to the internal + * facebook::react::ViewProps object since the ComponentView could release the object at any time. However, when + * providing a ViewProps object on a custom ComponentView that has a custom app provided props, the AbiViewProps object + * will already be holding a reference to this object, so we only hold onto a weak reference. + */ struct ViewProps : ViewPropsT { - ViewProps(facebook::react::SharedViewProps props) noexcept; + ViewProps(facebook::react::SharedViewProps props, bool holdRef = true) noexcept; + + // Notification when the owning AbiViewProps is going away. + void Disconnect() noexcept; float Opacity() noexcept; winrt::Microsoft::ReactNative::Color BackgroundColor() noexcept; + winrt::hstring TestId() noexcept; + winrt::hstring AccessibilityLabel() noexcept; - private: + protected: facebook::react::SharedViewProps m_props; + + // Use a raw pointer here to avoid a ref cycle with AbiViewProps. ~AbiViewProps will clear this pointer + facebook::react::ViewProps const *m_viewProps{nullptr}; +}; + +struct ImageProps : ImagePropsT { + using Super = ImagePropsT; + ImageProps(facebook::react::SharedViewProps props) noexcept; + + winrt::Windows::Foundation::Collections::IVectorView Sources() noexcept; }; } // namespace winrt::Microsoft::ReactNative::implementation @@ -88,5 +119,6 @@ struct ViewProps : ViewPropsT { namespace winrt::Microsoft::ReactNative::factory_implementation { struct Color : ColorT {}; +struct ImageSource : ImageSourceT {}; } // namespace winrt::Microsoft::ReactNative::factory_implementation diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ActivityIndicatorComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ActivityIndicatorComponentView.cpp index f07671e5197..dc5da5c276a 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ActivityIndicatorComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ActivityIndicatorComponentView.cpp @@ -24,9 +24,13 @@ ActivityIndicatorComponentView::ActivityIndicatorComponentView( const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext, facebook::react::Tag tag, winrt::Microsoft::ReactNative::ReactContext const &reactContext) - : Super(compContext, tag, reactContext, ComponentViewFeatures::Default, false) { - m_props = std::make_shared(); -} + : Super( + ActivityIndicatorComponentView::defaultProps(), + compContext, + tag, + reactContext, + ComponentViewFeatures::Default, + false) {} void ActivityIndicatorComponentView::MountChildComponentView( const winrt::Microsoft::ReactNative::ComponentView &childComponentView, @@ -53,14 +57,11 @@ void ActivityIndicatorComponentView::updateProgressColor(const facebook::react:: void ActivityIndicatorComponentView::updateProps( facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept { - const auto oldViewProps = std::static_pointer_cast(m_props); + const auto oldViewProps = + std::static_pointer_cast(oldProps ? oldProps : viewProps()); const auto newViewProps = std::static_pointer_cast(props); - ensureVisual(); - - if (newViewProps->testId != oldViewProps->testId) { - m_visual.Comment(winrt::to_hstring(newViewProps->testId)); - } + Super::updateProps(props, oldProps); // update color if needed if (!oldProps || newViewProps->color != oldViewProps->color) { @@ -70,10 +71,6 @@ void ActivityIndicatorComponentView::updateProps( if (newViewProps->animating != oldViewProps->animating) { m_ActivityIndicatorVisual.IsVisible(newViewProps->animating); } - - Super::updateProps(props, oldProps); - - m_props = std::static_pointer_cast(props); } void ActivityIndicatorComponentView::FinalizeUpdates( @@ -81,8 +78,7 @@ void ActivityIndicatorComponentView::FinalizeUpdates( static constexpr float radiusSmall = 10.0f; static constexpr float radiusLarge = 18.0f; - if (std::static_pointer_cast(m_props)->size == - facebook::react::ActivityIndicatorViewSize::Small) { + if (activityIndicatorViewProps().size == facebook::react::ActivityIndicatorViewSize::Small) { m_ActivityIndicatorVisual.Size(radiusSmall * m_layoutMetrics.pointScaleFactor); } else { m_ActivityIndicatorVisual.Size(radiusLarge * m_layoutMetrics.pointScaleFactor); @@ -96,67 +92,35 @@ void ActivityIndicatorComponentView::updateState( void ActivityIndicatorComponentView::updateLayoutMetrics( facebook::react::LayoutMetrics const &layoutMetrics, facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept { - // Set Position & Size Properties - ensureVisual(); - - if ((layoutMetrics.displayType != m_layoutMetrics.displayType)) { - OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None); - } - Super::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics); - m_visual.Size( - {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor, - layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor}); } -void ActivityIndicatorComponentView::prepareForRecycle() noexcept {} +winrt::Microsoft::ReactNative::Composition::Experimental::IVisual +ActivityIndicatorComponentView::createVisual() noexcept { + auto visual = m_compContext.CreateSpriteVisual(); + m_ActivityIndicatorVisual = m_compContext.CreateActivityVisual(); -facebook::react::SharedViewProps ActivityIndicatorComponentView::viewProps() noexcept { - return m_props; -} - -void ActivityIndicatorComponentView::ensureVisual() noexcept { - if (!m_visual) { - m_visual = m_compContext.CreateSpriteVisual(); - m_ActivityIndicatorVisual = m_compContext.CreateActivityVisual(); - - OuterVisual().InsertAt(m_ActivityIndicatorVisual, 0); - OuterVisual().InsertAt(m_visual, 0); - } -} - -facebook::react::Tag ActivityIndicatorComponentView::hitTest( - facebook::react::Point pt, - facebook::react::Point &localPt, - bool ignorePointerEvents) const noexcept { - facebook::react::Point ptLocal{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y}; - - if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto || - m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) && - ptLocal.x >= 0 && ptLocal.x <= m_layoutMetrics.frame.size.width && ptLocal.y >= 0 && - ptLocal.y <= m_layoutMetrics.frame.size.height) { - localPt = ptLocal; - return Tag(); - } - return -1; -} - -winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ActivityIndicatorComponentView::Visual() - const noexcept { - return m_visual; + OuterVisual().InsertAt(m_ActivityIndicatorVisual, 0); + return visual; } void ActivityIndicatorComponentView::onThemeChanged() noexcept { - updateProgressColor(std::static_pointer_cast(m_props)->color); + updateProgressColor(activityIndicatorViewProps().color); Super::onThemeChanged(); } -bool ActivityIndicatorComponentView::focusable() const noexcept { - return false; -} - std::string ActivityIndicatorComponentView::DefaultControlType() const noexcept { return "progressbar"; } +facebook::react::SharedViewProps ActivityIndicatorComponentView::defaultProps() noexcept { + static auto const defaultProps = std::make_shared(); + return defaultProps; +} + +const facebook::react::ActivityIndicatorViewProps &ActivityIndicatorComponentView::activityIndicatorViewProps() + const noexcept { + return *std::static_pointer_cast(viewProps()); +} + } // namespace winrt::Microsoft::ReactNative::Composition::implementation diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ActivityIndicatorComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/ActivityIndicatorComponentView.h index f239ee3ecdb..0baf2899715 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ActivityIndicatorComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ActivityIndicatorComponentView.h @@ -13,8 +13,9 @@ namespace winrt::Microsoft::ReactNative::Composition::implementation { -struct ActivityIndicatorComponentView : ActivityIndicatorComponentViewT { - using Super = ActivityIndicatorComponentViewT; +struct ActivityIndicatorComponentView + : ActivityIndicatorComponentViewT { + using Super = ActivityIndicatorComponentViewT; [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create( const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext, @@ -35,14 +36,8 @@ struct ActivityIndicatorComponentView : ActivityIndicatorComponentViewT #include #include @@ -39,4 +40,15 @@ Experimental::ICompositionContext CompositionUIService::GetCompositionContext( return ReactPropertyBag(properties).Get(CompositionContextPropertyId()); } +winrt::Microsoft::ReactNative::ComponentView CompositionUIService::ComponentFromReactTag( + const winrt::Microsoft::ReactNative::IReactContext &context, + int64_t reactTag) noexcept { + if (std::shared_ptr<::Microsoft::ReactNative::FabricUIManager> fabricuiManager = + ::Microsoft::ReactNative::FabricUIManager::FromProperties(ReactPropertyBag(context.Properties()))) { + return fabricuiManager->GetViewRegistry().findComponentViewWithTag(static_cast(reactTag)); + } + + return nullptr; +} + } // namespace winrt::Microsoft::ReactNative::Composition::implementation diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionUIService.h b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionUIService.h index 32d5d0d8fb4..8217f7f64a9 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionUIService.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionUIService.h @@ -16,6 +16,10 @@ struct CompositionUIService : CompositionUIServiceT { static winrt::Microsoft::UI::Composition::Compositor GetCompositor(const IReactPropertyBag &properties) noexcept; static Experimental::ICompositionContext GetCompositionContext(const IReactPropertyBag &properties) noexcept; + + static winrt::Microsoft::ReactNative::ComponentView ComponentFromReactTag( + const winrt::Microsoft::ReactNative::IReactContext &context, + int64_t reactTag) noexcept; }; } // namespace winrt::Microsoft::ReactNative::Composition::implementation diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionUIService_emptyimpl.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionUIService_emptyimpl.cpp index 6b9c0cc3ce4..828239854b8 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionUIService_emptyimpl.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionUIService_emptyimpl.cpp @@ -18,4 +18,10 @@ winrt::Microsoft::UI::Composition::Compositor CompositionUIService::GetComposito return nullptr; } +winrt::Microsoft::ReactNative::ComponentView CompositionUIService::ComponentFromReactTag( + const winrt::Microsoft::ReactNative::IReactContext &, + int64_t) noexcept { + return nullptr; +} + } // namespace winrt::Microsoft::ReactNative::Composition::implementation diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp index 53f9537b38b..1ca3cf654e3 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp @@ -134,7 +134,8 @@ winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext Co void ComponentView::updateProps( facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept { - const auto &oldViewProps = *viewProps(); + const auto &oldViewProps = + oldProps ? (*std::static_pointer_cast(oldProps)) : (*viewProps()); const auto &newViewProps = *std::static_pointer_cast(props); if ((m_flags & ComponentViewFeatures::Background) == ComponentViewFeatures::Background) { @@ -1455,6 +1456,7 @@ std::string ComponentView::DefaultHelpText() const noexcept { ViewComponentView::ViewComponentView( const winrt::Microsoft::ReactNative::Composition::CreateCompositionComponentViewArgs &args) : ViewComponentView( + ViewComponentView::defaultProps(), winrt::get_self< winrt::Microsoft::ReactNative::Composition::implementation::CreateCompositionComponentViewArgs>(args) ->CompositionContext(), @@ -1463,16 +1465,20 @@ ViewComponentView::ViewComponentView( args.Features(), true) {} +facebook::react::SharedViewProps ViewComponentView::defaultProps() noexcept { + static auto const defaultViewProps = std::make_shared(); + return defaultViewProps; +} + ViewComponentView::ViewComponentView( + const facebook::react::SharedViewProps &defaultProps, const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext, facebook::react::Tag tag, winrt::Microsoft::ReactNative::ReactContext const &reactContext, ComponentViewFeatures flags, bool customComponent) - : base_type(compContext, tag, reactContext, flags, customComponent) { - static auto const defaultProps = std::make_shared(); - m_props = defaultProps; -} + : base_type(compContext, tag, reactContext, flags, customComponent), + m_props(defaultProps ? defaultProps : ViewComponentView::defaultProps()) {} winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ViewComponentView::createVisual() noexcept { return m_compContext.CreateSpriteVisual(); @@ -1507,7 +1513,8 @@ winrt::Microsoft::ReactNative::ComponentView ViewComponentView::Create( const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext, facebook::react::Tag tag, winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept { - return winrt::make(compContext, tag, reactContext, ComponentViewFeatures::Default, false); + return winrt::make( + ViewComponentView::defaultProps(), compContext, tag, reactContext, ComponentViewFeatures::Default, false); } void ViewComponentView::MountChildComponentView( @@ -1521,7 +1528,7 @@ void ViewComponentView::MountChildComponentView( // TODO if we get mixed children of composition and non-composition ComponentViews the indexes will get mixed up // We could offset the index based on non-composition children in m_children if (auto compositionChild = childComponentView.try_as()) { - m_visual.InsertAt(compositionChild->OuterVisual(), index); + Visual().InsertAt(compositionChild->OuterVisual(), index); } } @@ -1532,27 +1539,27 @@ void ViewComponentView::UnmountChildComponentView( indexOffsetForBorder(index); if (auto compositionChild = childComponentView.try_as()) { - m_visual.Remove(compositionChild->OuterVisual()); + Visual().Remove(compositionChild->OuterVisual()); } } void ViewComponentView::updateProps( facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept { - const auto &oldViewProps = *std::static_pointer_cast(m_props); + const auto &oldViewProps = *std::static_pointer_cast(oldProps ? oldProps : m_props); const auto &newViewProps = *std::static_pointer_cast(props); ensureVisual(); if (oldViewProps.opacity != newViewProps.opacity) { - m_visual.Opacity(newViewProps.opacity); + Visual().Opacity(newViewProps.opacity); } if (oldViewProps.testId != newViewProps.testId) { - m_visual.Comment(winrt::to_hstring(newViewProps.testId)); + Visual().Comment(winrt::to_hstring(newViewProps.testId)); } // update BaseComponentView props updateAccessibilityProps(oldViewProps, newViewProps); - updateTransformProps(oldViewProps, newViewProps, m_visual); + updateTransformProps(oldViewProps, newViewProps, Visual()); base_type::updateProps(props, oldProps); m_props = std::static_pointer_cast(props); @@ -1571,7 +1578,7 @@ facebook::react::Tag ViewComponentView::hitTest( bool ignorePointerEvents) const noexcept { facebook::react::Point ptLocal{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y}; - facebook::react::Tag targetTag; + facebook::react::Tag targetTag = -1; if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto || m_props->pointerEvents == facebook::react::PointerEventsMode::BoxNone) && @@ -1637,7 +1644,7 @@ void ViewComponentView::OnKeyDown( (source.GetKeyState(winrt::Windows::System::VirtualKey::RightWindows) != winrt::Windows::UI::Core::CoreVirtualKeyStates::None); - if (args.OriginalSource() == Tag()) { + if (args.OriginalSource() == Tag() && !args.Handled()) { facebook::react::KeyEvent event; event.shiftKey = fShift; event.ctrlKey = fCtrl; @@ -1712,16 +1719,20 @@ void ViewComponentView::updateLayoutMetrics( } void ViewComponentView::UpdateLayoutMetrics(const LayoutMetrics &metrics, const LayoutMetrics &oldMetrics) noexcept { - m_visual.Size({metrics.Frame.Width * metrics.PointScaleFactor, metrics.Frame.Height * metrics.PointScaleFactor}); + Visual().Size({metrics.Frame.Width * metrics.PointScaleFactor, metrics.Frame.Height * metrics.PointScaleFactor}); } void ViewComponentView::prepareForRecycle() noexcept {} -facebook::react::SharedViewProps ViewComponentView::viewProps() noexcept { +const facebook::react::SharedViewProps &ViewComponentView::viewProps() const noexcept { return m_props; } winrt::Microsoft::ReactNative::ViewProps ViewComponentView::ViewProps() noexcept { + return ViewPropsInner(); +} + +winrt::Microsoft::ReactNative::ViewProps ViewComponentView::ViewPropsInner() noexcept { // If we have AbiViewProps, then we dont need to new up a props wrapper if (m_customComponent) { const auto &abiViewProps = *std::static_pointer_cast(m_props); diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h index 068088f9862..f6ed39ca49b 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h @@ -64,8 +64,10 @@ struct ComponentView void HandleCommand(winrt::hstring commandName, const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept override; facebook::react::Props::Shared props() noexcept override; - virtual facebook::react::SharedViewProps viewProps() noexcept { - return nullptr; + virtual const facebook::react::SharedViewProps &viewProps() const noexcept { + static facebook::react::SharedViewProps emptyProps; + assert(false); + return emptyProps; }; void Theme(const winrt::Microsoft::ReactNative::Composition::Theme &theme) noexcept; winrt::Microsoft::ReactNative::Composition::Theme Theme() const noexcept; @@ -196,7 +198,7 @@ struct ViewComponentView : public ViewComponentViewT #include +#include #include #include #include @@ -48,19 +49,22 @@ void ImageComponentView::WindowsImageResponseObserver::didReceiveFailure() const m_image->didReceiveFailureFromObserver(); } +facebook::react::SharedViewProps ImageComponentView::defaultProps() noexcept { + static auto const defaultProps = std::make_shared(); + return defaultProps; +} + ImageComponentView::ImageComponentView( const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext, facebook::react::Tag tag, winrt::Microsoft::ReactNative::ReactContext const &reactContext) : Super( + ImageComponentView::defaultProps(), compContext, tag, reactContext, ComponentViewFeatures::Default & ~ComponentViewFeatures::Background, - false) { - static auto const defaultProps = std::make_shared(); - m_props = defaultProps; -} + false) {} void ImageComponentView::MountChildComponentView( const winrt::Microsoft::ReactNative::ComponentView &childComponentView, @@ -111,32 +115,24 @@ void ImageComponentView::didReceiveFailureFromObserver() noexcept { } } +const facebook::react::ImageProps &ImageComponentView::imageProps() const noexcept { + return *std::static_pointer_cast(viewProps()); +} + void ImageComponentView::updateProps( facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept { - const auto &oldImageProps = *std::static_pointer_cast(m_props); + const auto &oldImageProps = + *std::static_pointer_cast(oldProps ? oldProps : viewProps()); const auto &newImageProps = *std::static_pointer_cast(props); - ensureVisual(); - - // update BaseComponentView props - updateTransformProps(oldImageProps, newImageProps, m_visual); - Super::updateProps(props, oldProps); - if (oldImageProps.backgroundColor != newImageProps.backgroundColor || oldImageProps.blurRadius != newImageProps.blurRadius || oldImageProps.tintColor != newImageProps.tintColor || oldImageProps.resizeMode != newImageProps.resizeMode) { m_drawingSurface = nullptr; // TODO don't need to recreate the surface just to redraw... } - if (oldImageProps.opacity != newImageProps.opacity) { - m_visual.Opacity(newImageProps.opacity); - } - if (oldImageProps.testId != newImageProps.testId) { - m_visual.Comment(winrt::to_hstring(newImageProps.testId)); - } - - m_props = std::static_pointer_cast(props); + Super::updateProps(props, oldProps); } void ImageComponentView::updateState( @@ -182,19 +178,22 @@ void ImageComponentView::setStateAndResubscribeImageResponseObserver( } } -void ImageComponentView::updateLayoutMetrics( - facebook::react::LayoutMetrics const &layoutMetrics, - facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept { - // Set Position & Size Properties +winrt::Microsoft::ReactNative::ImageProps ImageComponentView::ImageProps() noexcept { + // We do not currently support custom ImageComponentView's + // If we did we would need to create a AbiImageProps and possibly return them here + assert(!m_customComponent); + return winrt::make(viewProps()); +} - if ((layoutMetrics.displayType != m_layoutMetrics.displayType)) { - OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None); - } +winrt::Microsoft::ReactNative::ImageProps ImageComponentView::ViewProps() noexcept { + return ViewPropsInner().as(); +} - Super::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics); - m_visual.Size( - {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor, - layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor}); +winrt::Microsoft::ReactNative::ViewProps ImageComponentView::ViewPropsInner() noexcept { + // We do not currently support custom ImageComponentView's + // If we did we would need to create a AbiImageProps and possibly return them here + assert(!m_customComponent); + return winrt::make(viewProps()); } void ImageComponentView::OnRenderingDeviceLost() noexcept { @@ -203,7 +202,7 @@ void ImageComponentView::OnRenderingDeviceLost() noexcept { } bool ImageComponentView::themeEffectsImage() const noexcept { - return m_props->backgroundColor || isColorMeaningful(m_props->tintColor); + return viewProps()->backgroundColor || isColorMeaningful(imageProps().tintColor); } void ImageComponentView::onThemeChanged() noexcept { @@ -218,7 +217,7 @@ void ImageComponentView::ensureDrawingSurface() noexcept { assert(m_reactContext.UIDispatcher().HasThreadAccess()); if (!m_imageResponseImage) { - m_visual.Brush(nullptr); + Visual().as().Brush(nullptr); return; } @@ -230,18 +229,18 @@ void ImageComponentView::ensureDrawingSurface() noexcept { if (!m_drawingSurface && m_imageResponseImage->m_wicbmp) { winrt::Windows::Foundation::Size drawingSurfaceSize{static_cast(width), static_cast(height)}; - const auto imageProps = std::static_pointer_cast(m_props); + const auto &imgProps = imageProps(); const auto frame{m_layoutMetrics.getContentFrame().size}; - if (imageProps->resizeMode == facebook::react::ImageResizeMode::Repeat) { + if (imgProps.resizeMode == facebook::react::ImageResizeMode::Repeat) { drawingSurfaceSize = { frame.width * m_layoutMetrics.pointScaleFactor, frame.height * m_layoutMetrics.pointScaleFactor}; - } else if (imageProps->blurRadius > 0) { + } else if (imgProps.blurRadius > 0) { // https://learn.microsoft.com/en-us/windows/win32/direct2d/gaussian-blur#output-bitmap // The following equation that can be used to compute the output bitmap: // Output bitmap growth (X and Y) = (StandardDeviation(DIPs)*3 + StandardDeviation(DIPs)*3)*((User DPI)/96) // Where StandardDeviation(DIPs)*3 is equivalent to the blur radius. - const auto bmpGrowth{imageProps->blurRadius * 2 * m_layoutMetrics.pointScaleFactor}; + const auto bmpGrowth{imgProps.blurRadius * 2 * m_layoutMetrics.pointScaleFactor}; drawingSurfaceSize = {drawingSurfaceSize.Width + bmpGrowth, drawingSurfaceSize.Height + bmpGrowth}; } @@ -252,7 +251,7 @@ void ImageComponentView::ensureDrawingSurface() noexcept { DrawImage(); - switch (imageProps->resizeMode) { + switch (imgProps.resizeMode) { case facebook::react::ImageResizeMode::Stretch: m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::Fill); break; @@ -281,9 +280,10 @@ void ImageComponentView::ensureDrawingSurface() noexcept { assert(false); } - m_visual.Brush(m_drawingSurface); + Visual().as().Brush(m_drawingSurface); } else if (m_imageResponseImage->m_brushFactory) { - m_visual.Brush(m_imageResponseImage->m_brushFactory(m_reactContext.Handle(), m_compContext)); + Visual().as().Brush( + m_imageResponseImage->m_brushFactory(m_reactContext.Handle(), m_compContext)); } } @@ -310,15 +310,15 @@ void ImageComponentView::DrawImage() noexcept { d2dDeviceContext->CreateBitmapFromWicBitmap(m_imageResponseImage->m_wicbmp.get(), nullptr, bitmap.put())); d2dDeviceContext->Clear(D2D1::ColorF(D2D1::ColorF::Black, 0.0f)); - if (m_props->backgroundColor) { - d2dDeviceContext->Clear(theme()->D2DColor(*m_props->backgroundColor)); + if (viewProps()->backgroundColor) { + d2dDeviceContext->Clear(theme()->D2DColor(*viewProps()->backgroundColor)); } - const auto imageProps = std::static_pointer_cast(m_props); + const auto &imgProps = imageProps(); bool useEffects{ - imageProps->blurRadius > 0 || isColorMeaningful(imageProps->tintColor) || - imageProps->resizeMode == facebook::react::ImageResizeMode::Repeat}; + imgProps.blurRadius > 0 || isColorMeaningful(imgProps.tintColor) || + imgProps.resizeMode == facebook::react::ImageResizeMode::Repeat}; if (useEffects) { winrt::com_ptr bitmapEffects; @@ -326,23 +326,22 @@ void ImageComponentView::DrawImage() noexcept { winrt::check_hresult( bitmapEffects->SetValue(D2D1_BITMAPSOURCE_PROP_WIC_BITMAP_SOURCE, m_imageResponseImage->m_wicbmp.get())); - if (imageProps->blurRadius > 0) { + if (imgProps.blurRadius > 0) { winrt::com_ptr gaussianBlurEffect; winrt::check_hresult(d2dDeviceContext->CreateEffect(CLSID_D2D1GaussianBlur, gaussianBlurEffect.put())); // https://learn.microsoft.com/en-us/windows/win32/direct2d/gaussian-blur#effect-properties // You can compute the blur radius of the kernel by multiplying the standard deviation by 3 (radius multiplier). constexpr float radiusMultiplier = 3; winrt::check_hresult(gaussianBlurEffect->SetValue( - D2D1_GAUSSIANBLUR_PROP_STANDARD_DEVIATION, (imageProps->blurRadius) / radiusMultiplier)); + D2D1_GAUSSIANBLUR_PROP_STANDARD_DEVIATION, (imgProps.blurRadius) / radiusMultiplier)); gaussianBlurEffect->SetInputEffect(0, bitmapEffects.get()); bitmapEffects.copy_from(gaussianBlurEffect.get()); } - if (isColorMeaningful(imageProps->tintColor)) { + if (isColorMeaningful(imgProps.tintColor)) { winrt::com_ptr tintColorEffect; winrt::check_hresult(d2dDeviceContext->CreateEffect(CLSID_D2D1Flood, tintColorEffect.put())); - winrt::check_hresult( - tintColorEffect->SetValue(D2D1_FLOOD_PROP_COLOR, theme()->D2DColor(*imageProps->tintColor))); + winrt::check_hresult(tintColorEffect->SetValue(D2D1_FLOOD_PROP_COLOR, theme()->D2DColor(*imgProps.tintColor))); winrt::com_ptr compositeEffect; winrt::check_hresult(d2dDeviceContext->CreateEffect(CLSID_D2D1Composite, compositeEffect.put())); @@ -353,7 +352,7 @@ void ImageComponentView::DrawImage() noexcept { bitmapEffects.copy_from(compositeEffect.get()); } - if (imageProps->resizeMode == facebook::react::ImageResizeMode::Repeat) { + if (imgProps.resizeMode == facebook::react::ImageResizeMode::Repeat) { winrt::com_ptr borderEffect; winrt::check_hresult(d2dDeviceContext->CreateEffect(CLSID_D2D1Border, borderEffect.put())); winrt::check_hresult(borderEffect->SetValue(D2D1_BORDER_PROP_EDGE_MODE_X, D2D1_BORDER_EDGE_MODE_WRAP)); @@ -386,51 +385,6 @@ void ImageComponentView::DrawImage() noexcept { } } -void ImageComponentView::prepareForRecycle() noexcept {} - -facebook::react::SharedViewProps ImageComponentView::viewProps() noexcept { - return m_props; -} - -facebook::react::Tag ImageComponentView::hitTest( - facebook::react::Point pt, - facebook::react::Point &localPt, - bool ignorePointerEvents) const noexcept { - facebook::react::Point ptLocal{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y}; - - facebook::react::Tag targetTag; - - if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto || - m_props->pointerEvents == facebook::react::PointerEventsMode::BoxNone) && - anyHitTestHelper(targetTag, ptLocal, localPt)) - return targetTag; - - if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto || - m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) && - ptLocal.x >= 0 && ptLocal.x <= m_layoutMetrics.frame.size.width && ptLocal.y >= 0 && - ptLocal.y <= m_layoutMetrics.frame.size.height) { - localPt = ptLocal; - return Tag(); - } - - return -1; -} - -void ImageComponentView::ensureVisual() noexcept { - if (!m_visual) { - m_visual = m_compContext.CreateSpriteVisual(); - OuterVisual().InsertAt(m_visual, 0); - } -} - -winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ImageComponentView::Visual() const noexcept { - return m_visual; -} - -bool ImageComponentView::focusable() const noexcept { - return m_props->focusable; -} - std::string ImageComponentView::DefaultControlType() const noexcept { return "image"; } diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.h index c7467533379..d3936a8dafb 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.h @@ -29,8 +29,8 @@ namespace winrt::Microsoft::ReactNative::Composition::implementation { struct WindowsImageResponseObserver; -struct ImageComponentView : ImageComponentViewT { - using Super = ImageComponentViewT; +struct ImageComponentView : ImageComponentViewT { + using Super = ImageComponentViewT; [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create( const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext, @@ -47,25 +47,25 @@ struct ImageComponentView : ImageComponentViewT m_image; }; - void ensureVisual() noexcept; void ensureDrawingSurface() noexcept; void DrawImage() noexcept; @@ -90,9 +89,6 @@ struct ImageComponentView : ImageComponentViewT m_props; - - winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_visual{nullptr}; winrt::Microsoft::ReactNative::Composition::Experimental::IDrawingSurfaceBrush m_drawingSurface; std::shared_ptr m_imageResponseImage; std::shared_ptr m_imageResponseObserver; diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp index f25c08feb48..d4fa0493b79 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp @@ -23,14 +23,13 @@ WindowsModalHostComponentView::WindowsModalHostComponentView( facebook::react::Tag tag, winrt::Microsoft::ReactNative::ReactContext const &reactContext) : Super( + WindowsModalHostComponentView::defaultProps(), compContext, tag, reactContext, ComponentViewFeatures::Default & ~ComponentViewFeatures::Background, false) { - m_props = std::make_shared(); m_context = reactContext; // save context - m_visual = compContext.CreateSpriteVisual(); } winrt::Microsoft::ReactNative::ComponentView WindowsModalHostComponentView::Create( @@ -201,7 +200,8 @@ void WindowsModalHostComponentView::HandleCommand( void WindowsModalHostComponentView::updateProps( facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept { - const auto &oldModalProps = *std::static_pointer_cast(m_props); + const auto &oldModalProps = + *std::static_pointer_cast(oldProps ? oldProps : viewProps()); const auto &newModalProps = *std::static_pointer_cast(props); // currently Modal only gets Destroyed by closing the window @@ -210,20 +210,15 @@ void WindowsModalHostComponentView::updateProps( ShowOnUIThread(); } - // update BaseComponentView props - updateTransformProps(oldModalProps, newModalProps, m_visual); - Super::updateProps(props, oldProps); - m_props = std::static_pointer_cast(props); + base_type::updateProps(props, oldProps); } void WindowsModalHostComponentView::updateLayoutMetrics( facebook::react::LayoutMetrics const &layoutMetrics, facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept { - if ((layoutMetrics.displayType != m_layoutMetrics.displayType)) { - OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None); - } + Super::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics); - // Temparary placeholder for Modal, draws on main hwnd + // Temporary placeholder for Modal, draws on main hwnd if (m_layoutMetrics.frame.size != layoutMetrics.frame.size || m_layoutMetrics.pointScaleFactor != layoutMetrics.pointScaleFactor || m_layoutMetrics.frame.size.width == 0) { // Always make visual a min size, so that even if its laid out at zero size, its clear an unimplemented view was @@ -241,9 +236,9 @@ void WindowsModalHostComponentView::updateLayoutMetrics( drawingSurface.HorizontalAlignmentRatio(0.f); drawingSurface.VerticalAlignmentRatio(0.f); drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::None); - m_visual.Brush(drawingSurface); - m_visual.Size(surfaceSize); - m_visual.Offset({ + Visual().as().Brush(drawingSurface); + Visual().Size(surfaceSize); + Visual().Offset({ layoutMetrics.frame.origin.x * layoutMetrics.pointScaleFactor, layoutMetrics.frame.origin.y * layoutMetrics.pointScaleFactor, 0.0f, @@ -290,28 +285,18 @@ void WindowsModalHostComponentView::updateLayoutMetrics( } } } - - Super::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics); } void WindowsModalHostComponentView::updateState( facebook::react::State::Shared const &state, facebook::react::State::Shared const &oldState) noexcept {} -void WindowsModalHostComponentView::prepareForRecycle() noexcept {} - -facebook::react::SharedViewProps WindowsModalHostComponentView::viewProps() noexcept { - return m_props; -} - -winrt::Microsoft::ReactNative::Composition::Experimental::IVisual WindowsModalHostComponentView::Visual() - const noexcept { - return m_visual; +facebook::react::SharedViewProps WindowsModalHostComponentView::defaultProps() noexcept { + static auto const defaultProps = std::make_shared(); + return defaultProps; } - -winrt::Microsoft::ReactNative::Composition::Experimental::IVisual WindowsModalHostComponentView::OuterVisual() - const noexcept { - return m_visual; +const facebook::react::ModalHostViewProps &WindowsModalHostComponentView::modalHostViewProps() const noexcept { + return *std::static_pointer_cast(viewProps()); } facebook::react::Tag WindowsModalHostComponentView::hitTest( @@ -320,8 +305,8 @@ facebook::react::Tag WindowsModalHostComponentView::hitTest( bool ignorePointerEvents) const noexcept { facebook::react::Point ptLocal{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y}; - if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto || - m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) && + if ((ignorePointerEvents || viewProps()->pointerEvents == facebook::react::PointerEventsMode::Auto || + viewProps()->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) && ptLocal.x >= 0 && ptLocal.x <= m_layoutMetrics.frame.size.width && ptLocal.y >= 0 && ptLocal.y <= m_layoutMetrics.frame.size.height) { localPt = ptLocal; diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.h index 3f857fbe02a..6bf56707180 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.h @@ -13,8 +13,9 @@ namespace winrt::Microsoft::ReactNative::Composition::implementation { -struct WindowsModalHostComponentView : WindowsModalHostComponentViewT { - using Super = WindowsModalHostComponentViewT; +struct WindowsModalHostComponentView + : WindowsModalHostComponentViewT { + using Super = WindowsModalHostComponentViewT; [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create( const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext, @@ -37,13 +38,11 @@ struct WindowsModalHostComponentView : WindowsModalHostComponentViewT m_props; - winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_visual{nullptr}; HWND m_hwnd{nullptr}; winrt::Microsoft::ReactNative::ReactContext m_context; }; diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp index 2f23851cdff..8f171e637ee 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp @@ -23,14 +23,12 @@ ParagraphComponentView::ParagraphComponentView( facebook::react::Tag tag, winrt::Microsoft::ReactNative::ReactContext const &reactContext) : Super( + ParagraphComponentView::defaultProps(), compContext, tag, reactContext, ComponentViewFeatures::Default & ~ComponentViewFeatures::Background, - false) { - static auto const defaultProps = std::make_shared(); - m_props = defaultProps; -} + false) {} void ParagraphComponentView::MountChildComponentView( const winrt::Microsoft::ReactNative::ComponentView &childComponentView, @@ -49,7 +47,8 @@ void ParagraphComponentView::UnmountChildComponentView( void ParagraphComponentView::updateProps( facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept { - const auto &oldViewProps = *std::static_pointer_cast(m_props); + const auto &oldViewProps = + *std::static_pointer_cast(oldProps ? oldProps : viewProps()); const auto &newViewProps = *std::static_pointer_cast(props); ensureVisual(); @@ -57,23 +56,16 @@ void ParagraphComponentView::updateProps( if (oldViewProps.textAttributes.foregroundColor != newViewProps.textAttributes.foregroundColor) { m_requireRedraw = true; } + if (oldViewProps.textAttributes.opacity != newViewProps.textAttributes.opacity) { m_requireRedraw = true; } - if (oldViewProps.testId != newViewProps.testId) { - m_visual.Comment(winrt::to_hstring(newViewProps.testId)); - } if (oldViewProps.textAttributes.alignment != newViewProps.textAttributes.alignment) { updateTextAlignment(newViewProps.textAttributes.alignment); } - // update BaseComponentView props - updateAccessibilityProps(oldViewProps, newViewProps); - updateTransformProps(oldViewProps, newViewProps, m_visual); Super::updateProps(props, oldProps); - - m_props = std::static_pointer_cast(props); } void ParagraphComponentView::updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept { @@ -90,60 +82,13 @@ void ParagraphComponentView::updateState( m_textLayout = nullptr; } -void ParagraphComponentView::updateLayoutMetrics( - facebook::react::LayoutMetrics const &layoutMetrics, - facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept { - // Set Position & Size Properties - - if ((layoutMetrics.displayType != m_layoutMetrics.displayType)) { - OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None); - } - Super::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics); - m_visual.Size( - {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor, - layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor}); -} void ParagraphComponentView::FinalizeUpdates( winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept { ensureVisual(); updateVisualBrush(); Super::FinalizeUpdates(updateMask); } -void ParagraphComponentView::prepareForRecycle() noexcept {} - -facebook::react::SharedViewProps ParagraphComponentView::viewProps() noexcept { - return m_props; -} - -facebook::react::Tag ParagraphComponentView::hitTest( - facebook::react::Point pt, - facebook::react::Point &localPt, - bool ignorePointerEvents) const noexcept { - facebook::react::Point ptLocal{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y}; - - facebook::react::Tag targetTag; - - /* - if ((m_props.pointerEvents == facebook::react::PointerEventsMode::Auto || - m_props.pointerEvents == facebook::react::PointerEventsMode::BoxNone) && std::any_of(m_children.rbegin(), - m_children.rend(), [&targetTag, &ptLocal, &localPt](auto child) { targetTag = static_cast(child)->hitTest(ptLocal, localPt); return targetTag != -1; - })) - return targetTag; - */ - - if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto || - m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) && - ptLocal.x >= 0 && ptLocal.x <= m_layoutMetrics.frame.size.width && ptLocal.y >= 0 && - ptLocal.y <= m_layoutMetrics.frame.size.height) { - localPt = ptLocal; - return Tag(); - } - - return -1; -} facebook::react::SharedViewEventEmitter ParagraphComponentView::eventEmitterAtPoint( facebook::react::Point pt) noexcept { @@ -168,13 +113,6 @@ facebook::react::SharedViewEventEmitter ParagraphComponentView::eventEmitterAtPo return m_eventEmitter; } -void ParagraphComponentView::ensureVisual() noexcept { - if (!m_visual) { - m_visual = m_compContext.CreateSpriteVisual(); - OuterVisual().InsertAt(m_visual, 0); - } -} - void ParagraphComponentView::updateTextAlignment( const std::optional &fbAlignment) noexcept { m_textLayout = nullptr; @@ -255,11 +193,11 @@ void ParagraphComponentView::updateVisualBrush() noexcept { // The surfaceBrush's size is based on the size the text takes up, which maybe smaller than the total visual // So we need to align the brush within the visual to match the text alignment. - const auto ¶graphProps = *std::static_pointer_cast(m_props); float horizAlignment{0.f}; /* - if (paragraphProps.textAttributes.alignment) { - switch (*paragraphProps.textAttributes.alignment) { + const auto &props = paragraphProps() + if (props.textAttributes.alignment) { + switch (*props.textAttributes.alignment) { case facebook::react::TextAlignment::Center: horizAlignment = 0.5f; break; @@ -287,7 +225,7 @@ void ParagraphComponentView::updateVisualBrush() noexcept { m_drawingSurface.VerticalAlignmentRatio(0.f); m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::None); } - m_visual.Brush(m_drawingSurface); + Visual().as().Brush(m_drawingSurface); } if (m_requireRedraw) { @@ -295,6 +233,15 @@ void ParagraphComponentView::updateVisualBrush() noexcept { } } +facebook::react::SharedViewProps ParagraphComponentView::defaultProps() noexcept { + static auto const defaultProps = std::make_shared(); + return defaultProps; +} + +const facebook::react::ParagraphProps &ParagraphComponentView::paragraphProps() const noexcept { + return *std::static_pointer_cast(viewProps()); +} + void ParagraphComponentView::onThemeChanged() noexcept { DrawText(); Super::onThemeChanged(); @@ -316,23 +263,23 @@ void ParagraphComponentView::DrawText() noexcept { m_drawingSurface, m_layoutMetrics.pointScaleFactor, &offset); if (auto d2dDeviceContext = autoDraw.GetRenderTarget()) { d2dDeviceContext->Clear( - m_props->backgroundColor ? theme()->D2DColor(*m_props->backgroundColor) - : D2D1::ColorF(D2D1::ColorF::Black, 0.0f)); + viewProps()->backgroundColor ? theme()->D2DColor(*viewProps()->backgroundColor) + : D2D1::ColorF(D2D1::ColorF::Black, 0.0f)); - const auto ¶graphProps = *std::static_pointer_cast(m_props); + const auto &props = paragraphProps(); RenderText( *d2dDeviceContext, *m_textLayout, m_attributedStringBox.getValue(), - paragraphProps.textAttributes, + props.textAttributes, {static_cast(offset.x) + m_layoutMetrics.contentInsets.left, static_cast(offset.y) + m_layoutMetrics.contentInsets.top}, m_layoutMetrics.pointScaleFactor, *theme()); - if (!isnan(paragraphProps.opacity)) { - m_visual.Opacity(paragraphProps.opacity); + if (!isnan(props.opacity)) { + Visual().Opacity(props.opacity); } } m_requireRedraw = false; @@ -347,10 +294,6 @@ std::string ParagraphComponentView::DefaultAccessibleName() const noexcept { return m_attributedStringBox.getValue().getString(); } -winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ParagraphComponentView::Visual() const noexcept { - return m_visual; -} - winrt::Microsoft::ReactNative::ComponentView ParagraphComponentView::Create( const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext, facebook::react::Tag tag, diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.h index 0875e8b22cb..6277704a3fb 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.h @@ -17,8 +17,8 @@ namespace winrt::Microsoft::ReactNative::Composition::implementation { -struct ParagraphComponentView : ParagraphComponentViewT { - using Super = ParagraphComponentViewT; +struct ParagraphComponentView : ParagraphComponentViewT { + using Super = ParagraphComponentViewT; [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create( const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext, @@ -36,21 +36,15 @@ struct ParagraphComponentView : ParagraphComponentViewT &fbAlignment) noexcept; - std::shared_ptr m_props; - winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_visual{nullptr}; winrt::com_ptr<::IDWriteTextLayout> m_textLayout; facebook::react::AttributedStringBox m_attributedStringBox; facebook::react::ParagraphAttributes m_paragraphAttributes; diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/RootComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/RootComponentView.cpp index af068327371..d84b8645c80 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/RootComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/RootComponentView.cpp @@ -18,6 +18,7 @@ RootComponentView::RootComponentView( facebook::react::Tag tag, winrt::Microsoft::ReactNative::ReactContext const &reactContext) : base_type( + {}, // default viewProps compContext, tag, reactContext, diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp index 84089f1892c..51f365fa697 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp @@ -578,19 +578,22 @@ winrt::Microsoft::ReactNative::ComponentView ScrollViewComponentView::Create( return winrt::make(compContext, tag, reactContext); } +facebook::react::SharedViewProps ScrollViewComponentView::defaultProps() noexcept { + static auto const defaultViewProps = std::make_shared(); + return defaultViewProps; +} + ScrollViewComponentView::ScrollViewComponentView( const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext, facebook::react::Tag tag, winrt::Microsoft::ReactNative::ReactContext const &reactContext) : Super( + ScrollViewComponentView::defaultProps(), compContext, tag, reactContext, ComponentViewFeatures::Default & ~ComponentViewFeatures::Background, false) { - static auto const defaultProps = std::make_shared(); - m_props = defaultProps; - // m_element.Content(m_contentPanel); /* @@ -683,7 +686,8 @@ ScrollViewComponentView::ScrollViewComponentView( void ScrollViewComponentView::MountChildComponentView( const winrt::Microsoft::ReactNative::ComponentView &childComponentView, uint32_t index) noexcept { - base_type::MountChildComponentView(childComponentView, index); + // Call ComponentView::UnmountChildComponentView instead of base to handle out own Visual hosting + ComponentView::MountChildComponentView(childComponentView, index); ensureVisual(); m_scrollVisual.InsertAt( @@ -694,7 +698,8 @@ void ScrollViewComponentView::MountChildComponentView( void ScrollViewComponentView::UnmountChildComponentView( const winrt::Microsoft::ReactNative::ComponentView &childComponentView, uint32_t index) noexcept { - base_type::UnmountChildComponentView(childComponentView, index); + // Call ComponentView::UnmountChildComponentView instead of base to handle out own Visual hosting + ComponentView::UnmountChildComponentView(childComponentView, index); m_scrollVisual.Remove(childComponentView.as()->OuterVisual()); } @@ -710,22 +715,17 @@ void ScrollViewComponentView::updateProps( facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept { const auto &newViewProps = *std::static_pointer_cast(props); - const auto &oldViewProps = *std::static_pointer_cast(m_props); + const auto &oldViewProps = + *std::static_pointer_cast(oldProps ? oldProps : viewProps()); ensureVisual(); if (!oldProps || oldViewProps.backgroundColor != newViewProps.backgroundColor) { updateBackgroundColor(newViewProps.backgroundColor); } - if (oldViewProps.testId != newViewProps.testId) { - m_visual.Comment(winrt::to_hstring(newViewProps.testId)); - } // update BaseComponentView props - updateTransformProps(oldViewProps, newViewProps, m_visual); - Super::updateProps(props, oldProps); - - m_props = std::static_pointer_cast(props); + base_type::updateProps(props, oldProps); } void ScrollViewComponentView::updateState( @@ -758,16 +758,9 @@ void ScrollViewComponentView::updateLayoutMetrics( // Set Position & Size Properties ensureVisual(); - if ((layoutMetrics.displayType != m_layoutMetrics.displayType)) { - OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None); - } - m_verticalScrollbarComponent->updateLayoutMetrics(layoutMetrics); m_horizontalScrollbarComponent->updateLayoutMetrics(layoutMetrics); - Super::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics); - m_visual.Size( - {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor, - layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor}); + base_type::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics); m_scrollVisual.Size( {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor, layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor}); @@ -785,10 +778,6 @@ void ScrollViewComponentView::updateContentVisualSize() noexcept { void ScrollViewComponentView::prepareForRecycle() noexcept {} -facebook::react::SharedViewProps ScrollViewComponentView::viewProps() noexcept { - return m_props; -} - /* ScrollViewComponentView::ScrollInteractionTrackerOwner::ScrollInteractionTrackerOwner( ScrollViewComponentView *outer) @@ -835,7 +824,7 @@ void ScrollViewComponentView::OnPointerDown(const winrt::Windows::UI::Input::Poi */ void ScrollViewComponentView::onThemeChanged() noexcept { - updateBackgroundColor(std::static_pointer_cast(m_props)->backgroundColor); + updateBackgroundColor(std::static_pointer_cast(viewProps())->backgroundColor); m_verticalScrollbarComponent->OnThemeChanged(); m_horizontalScrollbarComponent->OnThemeChanged(); Super::onThemeChanged(); @@ -925,6 +914,8 @@ void ScrollViewComponentView::OnKeyDown( args.Handled(lineRight(true)); break; } + + base_type::OnKeyDown(source, args); } bool ScrollViewComponentView::scrollToEnd(bool animate) noexcept { @@ -1131,37 +1122,35 @@ void ScrollViewComponentView::StartBringIntoView( } } -void ScrollViewComponentView::ensureVisual() noexcept { - if (!m_visual) { - m_visual = m_compContext.CreateSpriteVisual(); - m_scrollVisual = m_compContext.CreateScrollerVisual(); - m_verticalScrollbarComponent = std::make_shared(*this, m_compContext, m_reactContext, true); - m_horizontalScrollbarComponent = std::make_shared(*this, m_compContext, m_reactContext, false); - m_visual.InsertAt(m_scrollVisual, 0); - m_visual.InsertAt(m_verticalScrollbarComponent->Visual(), 1); - m_visual.InsertAt(m_horizontalScrollbarComponent->Visual(), 2); - m_scrollPositionChangedRevoker = m_scrollVisual.ScrollPositionChanged( - winrt::auto_revoke, - [this]( - winrt::IInspectable const & /*sender*/, - winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs const &args) { - updateStateWithContentOffset(); - auto eventEmitter = GetEventEmitter(); - if (eventEmitter) { - facebook::react::ScrollViewMetrics scrollMetrics; - scrollMetrics.containerSize.height = m_layoutMetrics.frame.size.height; - scrollMetrics.containerSize.width = m_layoutMetrics.frame.size.width; - scrollMetrics.contentOffset.x = args.Position().x / m_layoutMetrics.pointScaleFactor; - scrollMetrics.contentOffset.y = args.Position().y / m_layoutMetrics.pointScaleFactor; - scrollMetrics.zoomScale = 1.0; - scrollMetrics.contentSize.height = std::max(m_contentSize.height, m_layoutMetrics.frame.size.height); - scrollMetrics.contentSize.width = std::max(m_contentSize.width, m_layoutMetrics.frame.size.width); - std::static_pointer_cast(eventEmitter) - ->onScroll(scrollMetrics); - } - }); - OuterVisual().InsertAt(m_visual, 0); - } +winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComponentView::createVisual() noexcept { + auto visual = m_compContext.CreateSpriteVisual(); + m_scrollVisual = m_compContext.CreateScrollerVisual(); + m_verticalScrollbarComponent = std::make_shared(*this, m_compContext, m_reactContext, true); + m_horizontalScrollbarComponent = std::make_shared(*this, m_compContext, m_reactContext, false); + visual.InsertAt(m_scrollVisual, 0); + visual.InsertAt(m_verticalScrollbarComponent->Visual(), 1); + visual.InsertAt(m_horizontalScrollbarComponent->Visual(), 2); + m_scrollPositionChangedRevoker = m_scrollVisual.ScrollPositionChanged( + winrt::auto_revoke, + [this]( + winrt::IInspectable const & /*sender*/, + winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs const &args) { + updateStateWithContentOffset(); + auto eventEmitter = GetEventEmitter(); + if (eventEmitter) { + facebook::react::ScrollViewMetrics scrollMetrics; + scrollMetrics.containerSize.height = m_layoutMetrics.frame.size.height; + scrollMetrics.containerSize.width = m_layoutMetrics.frame.size.width; + scrollMetrics.contentOffset.x = args.Position().x / m_layoutMetrics.pointScaleFactor; + scrollMetrics.contentOffset.y = args.Position().y / m_layoutMetrics.pointScaleFactor; + scrollMetrics.zoomScale = 1.0; + scrollMetrics.contentSize.height = std::max(m_contentSize.height, m_layoutMetrics.frame.size.height); + scrollMetrics.contentSize.width = std::max(m_contentSize.width, m_layoutMetrics.frame.size.width); + std::static_pointer_cast(eventEmitter) + ->onScroll(scrollMetrics); + } + }); + return visual; } facebook::react::Tag ScrollViewComponentView::hitTest( @@ -1174,19 +1163,19 @@ facebook::react::Tag ScrollViewComponentView::hitTest( ptViewport.x + m_scrollVisual.ScrollPosition().x / m_layoutMetrics.pointScaleFactor, ptViewport.y + m_scrollVisual.ScrollPosition().y / m_layoutMetrics.pointScaleFactor}; - facebook::react::Tag targetTag; + facebook::react::Tag targetTag = -1; - if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto || - m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) && + if ((ignorePointerEvents || viewProps()->pointerEvents == facebook::react::PointerEventsMode::Auto || + viewProps()->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) && ptViewport.x >= 0 && ptViewport.x <= m_layoutMetrics.frame.size.width && ptViewport.y >= 0 && ptViewport.y <= m_layoutMetrics.frame.size.height) { - if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto || - m_props->pointerEvents == facebook::react::PointerEventsMode::BoxNone) && + if ((ignorePointerEvents || viewProps()->pointerEvents == facebook::react::PointerEventsMode::Auto || + viewProps()->pointerEvents == facebook::react::PointerEventsMode::BoxNone) && anyHitTestHelper(targetTag, ptContent, localPt)) return targetTag; - if (ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto || - m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) { + if (ignorePointerEvents || viewProps()->pointerEvents == facebook::react::PointerEventsMode::Auto || + viewProps()->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) { return this->Tag(); } } @@ -1208,10 +1197,6 @@ facebook::react::Point ScrollViewComponentView::getClientOffset() const noexcept parentOffset.y}; } -winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComponentView::Visual() const noexcept { - return m_visual; -} - std::string ScrollViewComponentView::DefaultControlType() const noexcept { return "scrollbar"; } diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h index d1cd12d56a1..15039a970dc 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h @@ -20,7 +20,7 @@ namespace winrt::Microsoft::ReactNative::Composition::implementation { struct ScrollBarComponent; -struct ScrollViewComponentView : ScrollViewComponentViewT { +struct ScrollViewComponentView : ScrollViewComponentViewT { /* struct ScrollInteractionTrackerOwner : public winrt::implements< ScrollInteractionTrackerOwner, @@ -51,7 +51,7 @@ struct ScrollInteractionTrackerOwner : public winrt::implements< }; */ - using Super = ScrollViewComponentViewT; + using Super = ScrollViewComponentViewT; [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create( const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext, @@ -72,7 +72,6 @@ struct ScrollInteractionTrackerOwner : public winrt::implements< facebook::react::LayoutMetrics const &layoutMetrics, facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override; void prepareForRecycle() noexcept override; - facebook::react::SharedViewProps viewProps() noexcept override; void OnKeyDown( const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source, const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept override; @@ -82,7 +81,6 @@ struct ScrollInteractionTrackerOwner : public winrt::implements< facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt, bool ignorePointerEvents) const noexcept override; facebook::react::Point getClientOffset() const noexcept override; - winrt::Microsoft::ReactNative::Composition::Experimental::IVisual Visual() const noexcept override; void onThemeChanged() noexcept override; void OnPointerReleased( @@ -100,6 +98,8 @@ struct ScrollInteractionTrackerOwner : public winrt::implements< void scrollTo(winrt::Windows::Foundation::Numerics::float3 offset, bool animate) noexcept; + static facebook::react::SharedViewProps defaultProps() noexcept; + ScrollViewComponentView( const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext, facebook::react::Tag tag, @@ -111,9 +111,9 @@ struct ScrollInteractionTrackerOwner : public winrt::implements< bool lineDown(bool animate) noexcept; bool lineLeft(bool animate) noexcept; bool lineRight(bool animate) noexcept; + winrt::Microsoft::ReactNative::Composition::Experimental::IVisual createVisual() noexcept override; private: - void ensureVisual() noexcept; void updateContentVisualSize() noexcept; bool scrollToEnd(bool animate) noexcept; bool scrollToStart(bool animate) noexcept; @@ -125,14 +125,12 @@ struct ScrollInteractionTrackerOwner : public winrt::implements< void updateStateWithContentOffset() noexcept; facebook::react::Size m_contentSize; - winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_visual{nullptr}; winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual m_scrollVisual{nullptr}; std::shared_ptr m_horizontalScrollbarComponent{nullptr}; std::shared_ptr m_verticalScrollbarComponent{nullptr}; winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual::ScrollPositionChanged_revoker m_scrollPositionChangedRevoker{}; - facebook::react::SharedViewProps m_props; float m_zoomFactor{1.0f}; bool m_isScrollingFromInertia = false; bool m_isScrolling = false; diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp index cf9992bc5aa..50498d641e4 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp @@ -29,13 +29,12 @@ SwitchComponentView::SwitchComponentView( facebook::react::Tag tag, winrt::Microsoft::ReactNative::ReactContext const &reactContext) : base_type( + SwitchComponentView::defaultProps(), compContext, tag, reactContext, ComponentViewFeatures::Default & ~ComponentViewFeatures::Background, - false) { - m_props = std::make_shared(); -} + false) {} winrt::Microsoft::ReactNative::ComponentView SwitchComponentView::Create( const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext, @@ -72,24 +71,17 @@ void SwitchComponentView::HandleCommand( void SwitchComponentView::updateProps( facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept { - const auto &oldViewProps = *std::static_pointer_cast(m_props); + const auto &oldViewProps = + *std::static_pointer_cast(oldProps ? oldProps : viewProps()); const auto &newViewProps = *std::static_pointer_cast(props); - ensureVisual(); - if (oldViewProps.backgroundColor != newViewProps.backgroundColor || oldViewProps.thumbTintColor != newViewProps.thumbTintColor || oldViewProps.value != newViewProps.value || oldViewProps.disabled != newViewProps.disabled) { m_visualUpdateRequired = true; } - if (oldViewProps.testId != newViewProps.testId) { - m_visual.Comment(winrt::to_hstring(newViewProps.testId)); - } - // update BaseComponentView props - updateTransformProps(oldViewProps, newViewProps, m_visual); Super::updateProps(props, oldProps); - m_props = std::static_pointer_cast(props); } void SwitchComponentView::updateState( @@ -99,17 +91,7 @@ void SwitchComponentView::updateState( void SwitchComponentView::updateLayoutMetrics( facebook::react::LayoutMetrics const &layoutMetrics, facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept { - // Set Position & Size Properties - ensureVisual(); - - if ((layoutMetrics.displayType != m_layoutMetrics.displayType)) { - OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None); - } - Super::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics); - m_visual.Size( - {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor, - layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor}); if (oldLayoutMetrics.pointScaleFactor != layoutMetrics.pointScaleFactor) { handleScaleChange(); @@ -135,7 +117,7 @@ void SwitchComponentView::handleScaleChange() noexcept { } void SwitchComponentView::updateVisuals() noexcept { - const auto switchProps = std::static_pointer_cast(m_props); + const auto &props = switchProps(); auto &theme = *this->theme(); winrt::Microsoft::ReactNative::Composition::Experimental::IBrush defaultColor; winrt::Microsoft::ReactNative::Composition::Experimental::IBrush fillColor; @@ -144,8 +126,8 @@ void SwitchComponentView::updateVisuals() noexcept { auto thumbWidth = SwitchConstants::thumbWidth; auto thumbHeight = SwitchConstants::thumbWidth; - if (switchProps->value) { - if (switchProps->disabled) { + if (props.value) { + if (props.disabled) { defaultColor = theme.PlatformBrush("ToggleSwitchStrokeOnDisabled"); fillColor = theme.PlatformBrush("ToggleSwitchFillOnDisabled"); thumbFill = theme.PlatformBrush("ToggleSwitchKnobFillOnDisabled"); @@ -163,7 +145,7 @@ void SwitchComponentView::updateVisuals() noexcept { thumbFill = theme.PlatformBrush("ToggleSwitchKnobFillOn"); } } else { - if (switchProps->disabled) { + if (props.disabled) { defaultColor = theme.PlatformBrush("ToggleSwitchStrokeOffDisabled"); fillColor = theme.PlatformBrush("ToggleSwitchFillOffDisabled"); thumbFill = theme.PlatformBrush("ToggleSwitchKnobFillOffDisabled"); @@ -182,7 +164,7 @@ void SwitchComponentView::updateVisuals() noexcept { } } - if (switchProps->disabled) { + if (props.disabled) { thumbWidth = SwitchConstants::thumbWidth; } else if (m_pressed) { thumbWidth = SwitchConstants::thumbWidthPressed; @@ -194,18 +176,18 @@ void SwitchComponentView::updateVisuals() noexcept { thumbWidth = SwitchConstants::thumbWidth; } - if (!switchProps->disabled && switchProps->thumbTintColor) { - thumbFill = theme.Brush(*switchProps->thumbTintColor); + if (!props.disabled && props.thumbTintColor) { + thumbFill = theme.Brush(*props.thumbTintColor); } - if (!switchProps->disabled && switchProps->onTintColor && switchProps->value) { - fillColor = theme.Brush(*switchProps->onTintColor); - } else if (!switchProps->disabled && switchProps->tintColor && !switchProps->value) { - fillColor = theme.Brush(*switchProps->tintColor); + if (!props.disabled && props.onTintColor && props.value) { + fillColor = theme.Brush(*props.onTintColor); + } else if (!props.disabled && props.tintColor && !props.value) { + fillColor = theme.Brush(*props.tintColor); } // switch track - outline - if ((!switchProps->onTintColor && switchProps->value) || (!switchProps->tintColor && !switchProps->value)) { + if ((!props.onTintColor && props.value) || (!props.tintColor && !props.value)) { m_trackVisual.StrokeThickness(std::round(SwitchConstants::trackStrokeThickness * m_layoutMetrics.pointScaleFactor)); m_trackVisual.StrokeBrush(defaultColor); } else { @@ -220,7 +202,7 @@ void SwitchComponentView::updateVisuals() noexcept { m_thumbVisual.AnimationClass(winrt::Microsoft::ReactNative::Composition::Experimental::AnimationClass::None); } - if (switchProps->value) { + if (props.value) { m_thumbVisual.Offset( {(SwitchConstants::trackWidth - (SwitchConstants::thumbMargin + thumbWidth)) * m_layoutMetrics.pointScaleFactor, offsetY, @@ -249,47 +231,18 @@ void SwitchComponentView::FinalizeUpdates(winrt::Microsoft::ReactNative::Compone base_type::FinalizeUpdates(updateMask); } -void SwitchComponentView::prepareForRecycle() noexcept {} - -facebook::react::SharedViewProps SwitchComponentView::viewProps() noexcept { - return m_props; -} - -void SwitchComponentView::ensureVisual() noexcept { - if (!m_visual) { - m_visual = m_compContext.CreateSpriteVisual(); - OuterVisual().InsertAt(m_visual, 0); - - m_trackVisual = m_compContext.CreateRoundedRectangleVisual(); - m_visual.InsertAt(m_trackVisual, 0); - - m_thumbVisual = m_compContext.CreateRoundedRectangleVisual(); - m_thumbVisual.AnimationClass(winrt::Microsoft::ReactNative::Composition::Experimental::AnimationClass::SwitchThumb); - m_trackVisual.InsertAt(m_thumbVisual, 0); - - handleScaleChange(); - } -} +winrt::Microsoft::ReactNative::Composition::Experimental::IVisual SwitchComponentView::createVisual() noexcept { + auto visual = m_compContext.CreateSpriteVisual(); -facebook::react::Tag SwitchComponentView::hitTest( - facebook::react::Point pt, - facebook::react::Point &localPt, - bool ignorePointerEvents) const noexcept { - facebook::react::Point ptLocal{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y}; - - if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto || - m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) && - ptLocal.x >= 0 && ptLocal.x <= m_layoutMetrics.frame.size.width && ptLocal.y >= 0 && - ptLocal.y <= m_layoutMetrics.frame.size.height) { - localPt = ptLocal; - return Tag(); - } + m_trackVisual = m_compContext.CreateRoundedRectangleVisual(); + visual.InsertAt(m_trackVisual, 0); - return -1; -} + m_thumbVisual = m_compContext.CreateRoundedRectangleVisual(); + m_thumbVisual.AnimationClass(winrt::Microsoft::ReactNative::Composition::Experimental::AnimationClass::SwitchThumb); + m_trackVisual.InsertAt(m_thumbVisual, 0); -winrt::Microsoft::ReactNative::Composition::Experimental::IVisual SwitchComponentView::Visual() const noexcept { - return m_visual; + handleScaleChange(); + return visual; } void SwitchComponentView::onThemeChanged() noexcept { @@ -304,9 +257,7 @@ void SwitchComponentView::OnPointerPressed( return; } - const auto switchProps = std::static_pointer_cast(m_props); - - if (!switchProps->disabled) { + if (!switchProps().disabled) { m_pressed = true; m_supressAnimationForNextFrame = true; @@ -364,27 +315,30 @@ void SwitchComponentView::OnKeyUp( } bool SwitchComponentView::toggle() noexcept { - const auto switchProps = std::static_pointer_cast(m_props); - - if (switchProps->disabled || !m_eventEmitter) + if (switchProps().disabled || !m_eventEmitter) return false; auto switchEventEmitter = std::static_pointer_cast(m_eventEmitter); facebook::react::SwitchEventEmitter::OnChange args; - args.value = !(switchProps->value); + args.value = !(switchProps().value); args.target = Tag(); switchEventEmitter->onChange(args); return true; } -bool SwitchComponentView::focusable() const noexcept { - return m_props->focusable; -} - std::string SwitchComponentView::DefaultControlType() const noexcept { return "switch"; } +facebook::react::SharedViewProps SwitchComponentView::defaultProps() noexcept { + static auto const defaultProps = std::make_shared(); + return defaultProps; +} + +const facebook::react::SwitchProps &SwitchComponentView::switchProps() const noexcept { + return *std::static_pointer_cast(viewProps()); +} + } // namespace winrt::Microsoft::ReactNative::Composition::implementation diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.h index 3a40a248f79..c5918626513 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.h @@ -13,8 +13,8 @@ namespace winrt::Microsoft::ReactNative::Composition::implementation { -struct SwitchComponentView : SwitchComponentViewT { - using Super = SwitchComponentViewT; +struct SwitchComponentView : SwitchComponentViewT { + using Super = SwitchComponentViewT; [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create( const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext, @@ -37,9 +37,6 @@ struct SwitchComponentView : SwitchComponentViewT { //@cmember Show the caret BOOL TxShowCaret(BOOL fShow) override { - m_outer->ShowCaret(m_outer->m_props->caretHidden ? false : fShow); + m_outer->ShowCaret(m_outer->windowsTextInputProps().caretHidden ? false : fShow); return true; } @@ -304,14 +304,14 @@ struct CompTextHost : public winrt::implements { switch (nIndex) { case COLOR_WINDOWTEXT: - if (m_outer->m_props->textAttributes.foregroundColor) - return (*m_outer->m_props->textAttributes.foregroundColor).AsColorRefNoAlpha(); + if (m_outer->windowsTextInputProps().textAttributes.foregroundColor) + return (*m_outer->windowsTextInputProps().textAttributes.foregroundColor).AsColorRefNoAlpha(); // cr = 0x000000FF; break; case COLOR_WINDOW: - if (m_outer->m_props->backgroundColor) - return (*m_outer->m_props->backgroundColor).AsColorRefNoAlpha(); + if (m_outer->viewProps()->backgroundColor) + return (*m_outer->viewProps()->backgroundColor).AsColorRefNoAlpha(); break; // case COLOR_HIGHLIGHT: // cr = RGB(0, 0, 255); @@ -356,8 +356,8 @@ struct CompTextHost : public winrt::implements { //@cmember Get the maximum length for the text HRESULT TxGetMaxLength(DWORD *plength) override { - auto length = m_outer->m_props->maxLength; - if (length > static_castm_props->maxLength)>(std::numeric_limits::max())) { + auto length = m_outer->windowsTextInputProps().maxLength; + if (length > static_castwindowsTextInputProps().maxLength)>(std::numeric_limits::max())) { length = std::numeric_limits::max(); } *plength = static_cast(length); @@ -454,7 +454,7 @@ facebook::react::AttributedString WindowsTextInputComponentView::getAttributedSt auto childTextAttributes = facebook::react::TextAttributes::defaultTextAttributes(); - childTextAttributes.apply(m_props->textAttributes); + childTextAttributes.apply(windowsTextInputProps().textAttributes); auto attributedString = facebook::react::AttributedString{}; // auto attachments = facebook::react::BaseTextShadowNode::Attachments{}; @@ -465,7 +465,7 @@ facebook::react::AttributedString WindowsTextInputComponentView::getAttributedSt // if (!m_props->text.empty()) { if (!text.empty()) { auto textAttributes = facebook::react::TextAttributes::defaultTextAttributes(); - textAttributes.apply(m_props->textAttributes); + textAttributes.apply(windowsTextInputProps().textAttributes); auto fragment = facebook::react::AttributedString::Fragment{}; fragment.string = text; // fragment.string = m_props->text; @@ -486,14 +486,12 @@ WindowsTextInputComponentView::WindowsTextInputComponentView( facebook::react::Tag tag, winrt::Microsoft::ReactNative::ReactContext const &reactContext) : Super( + WindowsTextInputComponentView::defaultProps(), compContext, tag, reactContext, ComponentViewFeatures::Default & ~ComponentViewFeatures::Background, false) { - static auto const defaultProps = std::make_shared(); - m_props = defaultProps; - /* m_textChangedRevoker = m_element.TextChanged(winrt::auto_revoke, [this](auto sender, xaml::Controls::TextChangedEventArgs args) { @@ -950,20 +948,16 @@ void WindowsTextInputComponentView::onFocusGained() noexcept { } } -bool WindowsTextInputComponentView::focusable() const noexcept { - return m_props->focusable; -} - std::string WindowsTextInputComponentView::DefaultControlType() const noexcept { return "textinput"; } std::string WindowsTextInputComponentView::DefaultAccessibleName() const noexcept { - return m_props->placeholder; + return windowsTextInputProps().placeholder; } std::string WindowsTextInputComponentView::DefaultHelpText() const noexcept { - return m_props->placeholder; + return windowsTextInputProps().placeholder; } void WindowsTextInputComponentView::updateCursorColor( @@ -981,19 +975,13 @@ void WindowsTextInputComponentView::updateCursorColor( void WindowsTextInputComponentView::updateProps( facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept { - const auto &oldTextInputProps = *std::static_pointer_cast(m_props); + const auto &oldTextInputProps = + *std::static_pointer_cast(oldProps ? oldProps : viewProps()); const auto &newTextInputProps = *std::static_pointer_cast(props); DWORD propBitsMask = 0; DWORD propBits = 0; - ensureVisual(); - - if (oldTextInputProps.testId != newTextInputProps.testId) { - m_visual.Comment(winrt::to_hstring(newTextInputProps.testId)); - } - // update BaseComponentView props - updateTransformProps(oldTextInputProps, newTextInputProps, m_visual); Super::updateProps(props, oldProps); if (!facebook::react::floatEquality( @@ -1105,8 +1093,6 @@ void WindowsTextInputComponentView::updateProps( } */ - m_props = std::static_pointer_cast(props); - if (propBitsMask != 0) { DrawBlock db(*this); winrt::check_hresult(m_textServices->OnTxPropertyBitsChange(propBitsMask, propBits)); @@ -1177,10 +1163,6 @@ void WindowsTextInputComponentView::updateLayoutMetrics( facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept { // Set Position & Size Properties - if ((layoutMetrics.displayType != m_layoutMetrics.displayType)) { - OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None); - } - if ((layoutMetrics.pointScaleFactor != m_layoutMetrics.pointScaleFactor)) { LRESULT res; winrt::check_hresult(m_textServices->TxSendMessage( @@ -1202,10 +1184,6 @@ void WindowsTextInputComponentView::updateLayoutMetrics( m_imgWidth = newWidth; m_imgHeight = newHeight; - - m_visual.Size( - {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor, - layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor}); } // When we are notified by RichEdit that the text changed, we need to notify JS @@ -1282,13 +1260,16 @@ void WindowsTextInputComponentView::setAcccessiblityValue(std::string &&value) n } bool WindowsTextInputComponentView::getAcccessiblityIsReadOnly() noexcept { - return !m_props->editable; + return !windowsTextInputProps().editable; } -void WindowsTextInputComponentView::prepareForRecycle() noexcept {} +facebook::react::SharedViewProps WindowsTextInputComponentView::defaultProps() noexcept { + static auto const defaultProps = std::make_shared(); + return defaultProps; +} -facebook::react::SharedViewProps WindowsTextInputComponentView::viewProps() noexcept { - return m_props; +const facebook::react::WindowsTextInputProps &WindowsTextInputComponentView::windowsTextInputProps() const noexcept { + return *std::static_pointer_cast(viewProps()); } void WindowsTextInputComponentView::UpdateCharFormat() noexcept { @@ -1311,17 +1292,18 @@ void WindowsTextInputComponentView::UpdateCharFormat() noexcept { // cfNew.bPitchAndFamily = FF_DONTCARE; // set font size -- 15 to convert twips to pt - float fontSize = m_props->textAttributes.fontSize; + const auto &props = windowsTextInputProps(); + float fontSize = props.textAttributes.fontSize; if (std::isnan(fontSize)) fontSize = facebook::react::TextAttributes::defaultTextAttributes().fontSize; - // TODO get fontSize from m_props->textAttributes, or defaultTextAttributes, or fragment? + // TODO get fontSize from props.textAttributes, or defaultTextAttributes, or fragment? cfNew.dwMask |= CFM_SIZE; cfNew.yHeight = static_cast(fontSize * 15); // set bold cfNew.dwMask |= CFM_WEIGHT; - cfNew.wWeight = m_props->textAttributes.fontWeight ? static_cast(*m_props->textAttributes.fontWeight) - : DWRITE_FONT_WEIGHT_NORMAL; + cfNew.wWeight = + props.textAttributes.fontWeight ? static_cast(*props.textAttributes.fontWeight) : DWRITE_FONT_WEIGHT_NORMAL; // set font style // cfNew.dwMask |= (CFM_ITALIC | CFM_STRIKEOUT | CFM_UNDERLINE); @@ -1392,7 +1374,7 @@ void WindowsTextInputComponentView::ensureDrawingSurface() noexcept { m_drawingSurface.HorizontalAlignmentRatio(0.f); m_drawingSurface.VerticalAlignmentRatio(0.f); m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::None); - m_visual.Brush(m_drawingSurface); + Visual().as().Brush(m_drawingSurface); } } @@ -1406,11 +1388,12 @@ winrt::com_ptr<::IDWriteTextLayout> WindowsTextInputComponentView::CreatePlaceho winrt::com_ptr<::IDWriteTextLayout> textLayout = nullptr; facebook::react::AttributedString attributedString; facebook::react::AttributedString::Fragment fragment1; - facebook::react::TextAttributes textAttributes = m_props->textAttributes; - if (std::isnan(m_props->textAttributes.fontSize)) { + const auto &props = windowsTextInputProps(); + facebook::react::TextAttributes textAttributes = props.textAttributes; + if (std::isnan(props.textAttributes.fontSize)) { textAttributes.fontSize = 12.0f; } - fragment1.string = m_props->placeholder; + fragment1.string = props.placeholder; fragment1.textAttributes = textAttributes; attributedString.appendFragment(fragment1); @@ -1461,8 +1444,9 @@ void WindowsTextInputComponentView::DrawText() noexcept { winrt::check_hresult(m_textServices->OnTxInPlaceActivate(&rcClient)); - if (facebook::react::isColorMeaningful(m_props->backgroundColor)) { - auto backgroundColor = theme()->D2DColor(*m_props->backgroundColor); + const auto &props = windowsTextInputProps(); + if (facebook::react::isColorMeaningful(props.backgroundColor)) { + auto backgroundColor = theme()->D2DColor(*props.backgroundColor); winrt::com_ptr backgroundBrush; winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(backgroundColor, backgroundBrush.put())); const D2D1_RECT_F fillRect = { @@ -1478,11 +1462,11 @@ void WindowsTextInputComponentView::DrawText() noexcept { winrt::check_hresult(hrDraw); // draw placeholder text if needed - if (!m_props->placeholder.empty() && GetTextFromRichEdit().empty()) { + if (!props.placeholder.empty() && GetTextFromRichEdit().empty()) { // set brush color winrt::com_ptr brush; - if (m_props->placeholderTextColor) { - auto color = theme()->D2DColor(*m_props->placeholderTextColor); + if (props.placeholderTextColor) { + auto color = theme()->D2DColor(*props.placeholderTextColor); winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(color, brush.put())); } else { winrt::check_hresult( @@ -1507,65 +1491,29 @@ void WindowsTextInputComponentView::DrawText() noexcept { m_needsRedraw = false; } -facebook::react::Tag WindowsTextInputComponentView::hitTest( - facebook::react::Point pt, - facebook::react::Point &localPt, - bool ignorePointerEvents) const noexcept { - facebook::react::Point ptLocal{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y}; - - facebook::react::Tag targetTag; - - /* - if ((m_props.pointerEvents == facebook::react::PointerEventsMode::Auto || - m_props.pointerEvents == facebook::react::PointerEventsMode::BoxNone) && std::any_of(m_children.rbegin(), - m_children.rend(), [&targetTag, &ptLocal, &localPt](auto child) { targetTag = static_cast(child)->hitTest(ptLocal, localPt); return targetTag != -1; - })) - return targetTag; - */ - - if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto || - m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) && - ptLocal.x >= 0 && ptLocal.x <= m_layoutMetrics.frame.size.width && ptLocal.y >= 0 && - ptLocal.y <= m_layoutMetrics.frame.size.height) { - localPt = ptLocal; - return Tag(); - } - - return -1; -} - -void WindowsTextInputComponentView::ensureVisual() noexcept { - if (!m_visual) { - HrEnsureRichEd20Loaded(); - m_visual = m_compContext.CreateSpriteVisual(); - m_textHost = winrt::make(this); - winrt::com_ptr<::IUnknown> spUnk; - winrt::check_hresult(g_pfnCreateTextServices(nullptr, m_textHost.get(), spUnk.put())); - spUnk.as(m_textServices); - OuterVisual().InsertAt(m_visual, 0); - } +winrt::Microsoft::ReactNative::Composition::Experimental::IVisual +WindowsTextInputComponentView::createVisual() noexcept { + HrEnsureRichEd20Loaded(); + auto visual = m_compContext.CreateSpriteVisual(); + m_textHost = winrt::make(this); + winrt::com_ptr<::IUnknown> spUnk; + winrt::check_hresult(g_pfnCreateTextServices(nullptr, m_textHost.get(), spUnk.put())); + spUnk.as(m_textServices); + + m_caretVisual = m_compContext.CreateCaretVisual(); + visual.InsertAt(m_caretVisual.InnerVisual(), 0); + m_caretVisual.IsVisible(false); - if (!m_caretVisual) { - m_caretVisual = m_compContext.CreateCaretVisual(); - m_visual.InsertAt(m_caretVisual.InnerVisual(), 0); - m_caretVisual.IsVisible(false); - } + return visual; } void WindowsTextInputComponentView::onThemeChanged() noexcept { - auto props = std::static_pointer_cast(m_props); - updateCursorColor(props->cursorColor, props->textAttributes.foregroundColor); + const auto &props = windowsTextInputProps(); + updateCursorColor(props.cursorColor, props.textAttributes.foregroundColor); DrawText(); base_type::onThemeChanged(); } -winrt::Microsoft::ReactNative::Composition::Experimental::IVisual WindowsTextInputComponentView::Visual() - const noexcept { - return m_visual; -} - winrt::Microsoft::ReactNative::ComponentView WindowsTextInputComponentView::Create( const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext, facebook::react::Tag tag, diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.h index 954c9f8af27..4b8bd88ee9c 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.h @@ -20,10 +20,11 @@ namespace winrt::Microsoft::ReactNative::Composition::implementation { struct CompTextHost; -struct WindowsTextInputComponentView : WindowsTextInputComponentViewT { +struct WindowsTextInputComponentView + : WindowsTextInputComponentViewT { friend CompTextHost; - using Super = WindowsTextInputComponentViewT; + using Super = WindowsTextInputComponentViewT; [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create( const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext, facebook::react::Tag tag, @@ -43,19 +44,13 @@ struct WindowsTextInputComponentView : WindowsTextInputComponentViewT m_textHost; winrt::com_ptr m_textServices; unsigned int m_imgWidth{0}, m_imgHeight{0}; - std::shared_ptr m_props; std::shared_ptr m_state; RECT m_rcClient; int64_t m_mostRecentEventCount{0}; diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/UnimplementedNativeViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/UnimplementedNativeViewComponentView.cpp index b078103ec86..254810b964c 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/UnimplementedNativeViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/UnimplementedNativeViewComponentView.cpp @@ -18,6 +18,7 @@ UnimplementedNativeViewComponentView::UnimplementedNativeViewComponentView( facebook::react::Tag tag, winrt::Microsoft::ReactNative::ReactContext const &reactContext) : base_type( + {}, // default ViewProps compContext, tag, reactContext, diff --git a/vnext/Microsoft.ReactNative/ViewProps.idl b/vnext/Microsoft.ReactNative/ViewProps.idl index 71dbb93ded4..01cedda350d 100644 --- a/vnext/Microsoft.ReactNative/ViewProps.idl +++ b/vnext/Microsoft.ReactNative/ViewProps.idl @@ -45,13 +45,47 @@ namespace Microsoft.ReactNative { [webhosthidden] [experimental] DOC_STRING("Provides access to the properties on standard ViewProps.") - runtimeclass ViewProps + unsealed runtimeclass ViewProps { Single Opacity { get; }; - Color BackgroundColor { get; }; - + String TestId { get; }; + String AccessibilityLabel { get; }; + // TODO add accessors to all the properties on ViewProps }; + [webhosthidden] + [experimental] + enum ImageSourceType + { + Invalid = 0, + Remote = 1, + Local = 2, + }; + + [default_interface] + [webhosthidden] + [experimental] + runtimeclass ImageSource + { + ImageSourceType Type { get; }; + String Uri { get; }; + String Bundle { get; }; + Single Scale { get; }; + Windows.Foundation.Size Size { get; }; + + static ImageSource ReadValue(IJSValueReader reader); + } + + [default_interface] + [webhosthidden] + [experimental] + runtimeclass ImageProps : ViewProps + { + Windows.Foundation.Collections.IVectorView Sources { get; }; + // TODO add accessors to all the properties on ImageProps + } + + } // namespace Microsoft. ReactNative diff --git a/vnext/src-win/Libraries/Components/TextInput/TextInput.windows.js b/vnext/src-win/Libraries/Components/TextInput/TextInput.windows.js index 8ecb2ea5edb..0e71b868ecc 100644 --- a/vnext/src-win/Libraries/Components/TextInput/TextInput.windows.js +++ b/vnext/src-win/Libraries/Components/TextInput/TextInput.windows.js @@ -1346,9 +1346,13 @@ function InternalTextInput(props: Props): React.Node { ); } }, - // TODO: Fix this returning true on null === null, when no input is focused isFocused(): boolean { - return TextInputState.currentlyFocusedInput() === inputRef.current; + const currentlyFocusedInput = + TextInputState.currentlyFocusedInput(); + return ( + currentlyFocusedInput !== null && + currentlyFocusedInput === inputRef.current + ); }, getNativeRef(): ?React.ElementRef> { return inputRef.current; diff --git a/vnext/src-win/Libraries/Components/View/View.windows.js b/vnext/src-win/Libraries/Components/View/View.windows.js index 4d6d3cc58ac..51c4df0329a 100644 --- a/vnext/src-win/Libraries/Components/View/View.windows.js +++ b/vnext/src-win/Libraries/Components/View/View.windows.js @@ -175,6 +175,9 @@ const View: React.AbstractComponent< // [Windows // $FlowFixMe - children typing const childrenWithImportantForAccessibility = children => { + if (children == null) { + return children; + } const updatedChildren = React.Children.map(children, child => { if (React.isValidElement(child)) { // $FlowFixMe[incompatible-use]