From 3c5ba4694af2fa78cdd4ec8c8acb8782e825ac2e Mon Sep 17 00:00:00 2001 From: Andrew Coates <30809111+acoates-ms@users.noreply.github.com> Date: Tue, 5 May 2026 10:26:36 -0700 Subject: [PATCH 1/8] Text rendering perf improvement (#16083) * Minor text rendering perf improvement * Change files --- ...ive-windows-636c3119-029d-4fee-9c71-1116858423a5.json | 7 +++++++ .../Fabric/Composition/ParagraphComponentView.cpp | 4 +++- .../textlayoutmanager/WindowsTextLayoutManager.cpp | 9 ++------- 3 files changed, 12 insertions(+), 8 deletions(-) create mode 100644 change/react-native-windows-636c3119-029d-4fee-9c71-1116858423a5.json diff --git a/change/react-native-windows-636c3119-029d-4fee-9c71-1116858423a5.json b/change/react-native-windows-636c3119-029d-4fee-9c71-1116858423a5.json new file mode 100644 index 00000000000..f698a8f575c --- /dev/null +++ b/change/react-native-windows-636c3119-029d-4fee-9c71-1116858423a5.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Minor text rendering perf improvement", + "packageName": "react-native-windows", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp index e20ff718107..8016850246a 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp @@ -334,7 +334,9 @@ void ParagraphComponentView::updateVisualBrush() noexcept { break; } } - winrt::check_hresult(m_textLayout->SetTextAlignment(alignment)); + + if (alignment != m_textLayout->GetTextAlignment()) + winrt::check_hresult(m_textLayout->SetTextAlignment(alignment)); } requireNewBrush = true; diff --git a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp index c9fd6c8e9f8..1a9afbf97d8 100644 --- a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp @@ -196,12 +196,7 @@ void WindowsTextLayoutManager::GetTextLayout( )); // Apply max width constraint and ellipsis trimming to ensure consistency with rendering - DWRITE_TEXT_METRICS metrics; - winrt::check_hresult(spTextLayout->GetMetrics(&metrics)); - - if (metrics.width > size.width) { - spTextLayout->SetMaxWidth(size.width); - } + spTextLayout->SetMaxWidth(size.width); // Apply DWRITE_TRIMMING for ellipsizeMode DWRITE_TRIMMING trimming = {}; @@ -396,7 +391,7 @@ void WindowsTextLayoutManager::GetTextLayoutByAdjustingFontSizeToFit( } } -// measure entire text (inluding attachments) +// measure entire text (including attachments) TextMeasurement TextLayoutManager::measure( const AttributedStringBox &attributedStringBox, const ParagraphAttributes ¶graphAttributes, From 444b673b092b4ad1cfd0e8dc0697f0d641020c19 Mon Sep 17 00:00:00 2001 From: Gordon MacMaster <31481849+gmacmaster@users.noreply.github.com> Date: Tue, 5 May 2026 13:27:19 -0400 Subject: [PATCH 2/8] fix: map Windows touch pointer IDs to small JS-safe identifiers in CompositionEventHandler (#16081) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: map Windows touch pointer IDs to small JS-safe identifiers in CompositionEventHandler (#1) * fix: map Windows touch pointer IDs to small JS-safe identifiers in CompositionEventHandler Windows touch input can assign arbitrarily large pointer IDs (e.g. 2233). The Fabric CompositionEventHandler was forwarding these directly as React Native touch identifiers via `activeTouch.touch.identifier = pointerId`. React Native's JS touch handler uses identifiers as direct array indices and hard-caps them at 20 — large values caused the JS layer to back-fill a 2000+ element sparse array, corrupting touch tracking state. The symptom: after scrolling a ScrollView/FlatList on a touch screen, Pressables and TouchableOpacities would remain stuck in a pressed state. Taps would fire at the coordinates where the scroll began rather than where the finger lifted. Fix: add `AllocateTouchIdentifier()` which cycles through identifiers [0, 19], skipping any slot already claimed by a live touch in `m_activeTouches`. This mirrors the approach iOS uses (cycling modulo RCTMaxTouches = 11 in RCTTouchHandler.m). The existing but unused `m_touchId` field is repurposed as the cycling base. Updated all dependent lookups that previously relied on `touch.identifier == pointerId` (which only worked accidentally) to use the `m_activeTouches` map key directly. Fixes: https://github.com/microsoft/react-native-windows/issues/16047 * fix: prevent unbounded m_touchId growth in CompositionEventHandler fallback path When all 20 touch slots are occupied, the fallback return in AllocateTouchIdentifier used post-increment (`m_touchId++ % kMaxTouchIdentifier`), which stored the raw incremented value back into m_touchId without a modulo wrap. Repeated hits would grow m_touchId past 19, breaking the cycling logic and eventually causing signed-integer overflow (UB). Fix by computing the wrapped return value first, then storing the next wrapped value back: captures fallback = m_touchId % kMaxTouchIdentifier, then m_touchId = (m_touchId + 1) % kMaxTouchIdentifier. * Create react-native-windows-2c040593-f202-44fc-a55c-5d523c493705.json * Reserve 1 for mouse * yarn format --- ...-2c040593-f202-44fc-a55c-5d523c493705.json | 7 +++ .../Composition/CompositionEventHandler.cpp | 44 +++++++++++++++++-- .../Composition/CompositionEventHandler.h | 7 ++- 3 files changed, 54 insertions(+), 4 deletions(-) create mode 100644 change/react-native-windows-2c040593-f202-44fc-a55c-5d523c493705.json diff --git a/change/react-native-windows-2c040593-f202-44fc-a55c-5d523c493705.json b/change/react-native-windows-2c040593-f202-44fc-a55c-5d523c493705.json new file mode 100644 index 00000000000..5aaecb26a45 --- /dev/null +++ b/change/react-native-windows-2c040593-f202-44fc-a55c-5d523c493705.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix: map Windows touch pointer IDs to small JS-safe identifiers in CompositionEventHandler", + "packageName": "react-native-windows", + "email": "gordomacmaster@gmail.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp index ae6e0672403..e481fd9a923 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp @@ -1220,6 +1220,37 @@ void CompositionEventHandler::onPointerExited( } } +// Windows touch pointer IDs can be arbitrarily large (e.g. 2233). React Native's JS +// touch handler uses identifiers as array indices and warns/misbehaves for values > 20. +// This function maps each live Windows pointer to a small identifier in [0, 19] by +// scanning m_activeTouches for in-use slots and cycling from the last assigned index. +// Identifier MOUSE_POINTER_ID (1) is permanently reserved for mouse and never returned here. +int CompositionEventHandler::AllocateTouchIdentifier() noexcept { + constexpr int kMaxTouchIdentifier = 20; + for (int i = 0; i < kMaxTouchIdentifier; i++) { + int candidate = (m_touchId + i) % kMaxTouchIdentifier; + if (candidate == static_cast(MOUSE_POINTER_ID)) { + continue; // reserved for mouse + } + bool inUse = std::any_of(m_activeTouches.begin(), m_activeTouches.end(), [candidate](const auto &pair) { + return pair.second.touch.identifier == candidate; + }); + if (!inUse) { + m_touchId = (candidate + 1) % kMaxTouchIdentifier; + return candidate; + } + } + // All non-mouse slots occupied (> 19 simultaneous touch/pen points) — wrap anyway, + // skipping the mouse-reserved slot. + int fallback = m_touchId; + m_touchId = (m_touchId + 1) % kMaxTouchIdentifier; + if (fallback == static_cast(MOUSE_POINTER_ID)) { + fallback = m_touchId; + m_touchId = (m_touchId + 1) % kMaxTouchIdentifier; + } + return fallback; +} + void CompositionEventHandler::onPointerPressed( const winrt::Microsoft::ReactNative::Composition::Input::PointerPoint &pointerPoint, winrt::Windows::System::VirtualKeyModifiers keyModifiers) noexcept { @@ -1328,11 +1359,18 @@ void CompositionEventHandler::onPointerPressed( UpdateActiveTouch(activeTouch, ptScaled, ptLocal); activeTouch.isPrimary = pointerId == 1; - activeTouch.touch.identifier = pointerId; + // Map the Windows pointer ID to a small identifier (0–19) safe for use as a JS array index. + // Windows touch IDs can be arbitrarily large (e.g. 2233), which causes React Native to warn + // and corrupts touch state, leaving Pressables stuck after a scroll. + // Mouse pointer ID is always 1 (MOUSE_POINTER_ID), which is already within the safe range — + // use it directly to preserve stable, predictable identifier assignment for mouse input. + activeTouch.touch.identifier = (pointerPoint.PointerDeviceType() == Composition::Input::PointerDeviceType::Mouse) + ? static_cast(MOUSE_POINTER_ID) + : AllocateTouchIdentifier(); // If the pointer has not been marked as hovering over views before the touch started, we register // that the activeTouch should not maintain its hovered state once the pointer has been lifted. - auto currentlyHoveredTags = m_currentlyHoveredViewsPerPointer.find(activeTouch.touch.identifier); + auto currentlyHoveredTags = m_currentlyHoveredViewsPerPointer.find(pointerId); if (currentlyHoveredTags == m_currentlyHoveredViewsPerPointer.end() || currentlyHoveredTags->second.empty()) { activeTouch.shouldLeaveWhenReleased = true; } @@ -1647,7 +1685,7 @@ void CompositionEventHandler::DispatchTouchEvent( continue; } - if (activeTouch.touch.identifier == pointerId) { + if (pair.first == pointerId) { event.changedTouches.insert(activeTouch.touch); } uniqueEventEmitters.insert(activeTouch.eventEmitter); diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.h b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.h index 8d8949a9900..c3e27979958 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.h @@ -162,8 +162,13 @@ class CompositionEventHandler : public std::enable_shared_from_this m_activeTouches; // iOS is map of touch event args to ActiveTouch..? - PointerId m_touchId = 0; + int m_touchId = 0; // cycling base used by AllocateTouchIdentifier std::map> m_currentlyHoveredViewsPerPointer; winrt::weak_ref m_wkRootView; From ecf1159551d8a6eeed390c56ce582fa3aac5d7ba Mon Sep 17 00:00:00 2001 From: Andrew Coates <30809111+acoates-ms@users.noreply.github.com> Date: Tue, 5 May 2026 13:25:20 -0700 Subject: [PATCH 3/8] Implement outline properties on view (#16074) * Implement outline properties on view * Change files * hostPlatformColorIsColorMeaningful impl * update snapshots * fix background clip * default black borders should still be rendered. * fix border sometimes being created behind the background * snapshots --- ...-202bc094-b9c7-41dc-9154-c7e8236c58c6.json | 7 + .../AccessibilityTest.test.ts.snap | 136 +- .../ButtonComponentTest.test.ts.snap | 182 +- .../CustomAccessibilityTest.test.ts.snap | 15 +- .../FlatListComponentTest.test.ts.snap | 1336 ++++-- .../LegacyImageTest.test.ts.snap | 54 +- .../PointerButtonComponentTest.test.ts.snap | 30 +- .../PressableComponentTest.test.ts.snap | 325 +- .../ScrollViewComponentTest.test.ts.snap | 245 +- .../TextComponentTest.test.ts.snap | 60 +- .../TouchableComponentTest.test.ts.snap | 21 +- .../ViewComponentTest.test.ts.snap | 4053 +++++++++++++---- .../Fabric/Composition/BorderPrimitive.cpp | 51 +- .../Fabric/Composition/BorderPrimitive.h | 5 +- .../CompositionViewComponentView.cpp | 153 +- .../CompositionViewComponentView.h | 10 + .../Fabric/Composition/ImageComponentView.cpp | 5 + .../Fabric/Composition/ImageComponentView.h | 2 + .../renderer/graphics/HostPlatformColor.h | 3 + 19 files changed, 4987 insertions(+), 1706 deletions(-) create mode 100644 change/react-native-windows-202bc094-b9c7-41dc-9154-c7e8236c58c6.json diff --git a/change/react-native-windows-202bc094-b9c7-41dc-9154-c7e8236c58c6.json b/change/react-native-windows-202bc094-b9c7-41dc-9154-c7e8236c58c6.json new file mode 100644 index 00000000000..19b09733082 --- /dev/null +++ b/change/react-native-windows-202bc094-b9c7-41dc-9154-c7e8236c58c6.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Implement outline properties on view", + "packageName": "react-native-windows", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/AccessibilityTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/AccessibilityTest.test.ts.snap index 716310f2e5e..458f747c91e 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/AccessibilityTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/AccessibilityTest.test.ts.snap @@ -18,14 +18,21 @@ exports[`Accessibility Tests Accessibility data for Label and Level 1`] = ` }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Comment": "accessibility-base-view-2", "Offset": "0, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, } `; @@ -56,14 +63,21 @@ exports[`Accessibility Tests Accessibility data for Label,Level and Hint 1`] = ` }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 255, 255)", - }, "Comment": "accessibility-base-view-1", "Offset": "0, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, } `; @@ -87,14 +101,21 @@ exports[`Accessibility Tests Accessibility data for Role, Setsize etc. 1`] = ` }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Comment": "accessibility-base-view-3", "Offset": "0, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, } `; @@ -133,15 +154,20 @@ exports[`Accessibility Tests Components can store range data by setting the min, ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 128, 128, 255)", - }, "Comment": "accessibilityValue-number", "Offset": "0, 0, 0", "Size": "916, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 128, 128, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "916, 19", @@ -190,15 +216,20 @@ exports[`Accessibility Tests Components can store value data by setting the text ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 128, 128, 255)", - }, "Comment": "accessibilityValue-text", "Offset": "0, 0, 0", "Size": "916, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 128, 128, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "916, 20", @@ -248,15 +279,20 @@ exports[`Accessibility Tests Elements can set accessibilityState:selected to fal ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(135, 206, 250, 255)", - }, "Comment": "Selectable item 1", "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(135, 206, 250, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "100, 20", @@ -307,15 +343,20 @@ exports[`Accessibility Tests Elements can set accessibilityState:selected to tru ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 128, 128, 255)", - }, "Comment": "Selectable item 1", "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 128, 128, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "100, 20", @@ -513,15 +554,20 @@ exports[`Accessibility Tests Selectable items must have a Selection Container. E "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(135, 206, 250, 255)", - }, "Comment": "Selectable item 1", "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(135, 206, 250, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "100, 20", @@ -544,15 +590,20 @@ exports[`Accessibility Tests Selectable items must have a Selection Container. E "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(135, 206, 250, 255)", - }, "Comment": "Selectable item 2", "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(135, 206, 250, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "100, 20", @@ -575,15 +626,20 @@ exports[`Accessibility Tests Selectable items must have a Selection Container. E "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(135, 206, 250, 255)", - }, "Comment": "Selectable item 3", "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(135, 206, 250, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "100, 20", 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 5db45cd5269..96cb5c4d881 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 @@ -48,14 +48,19 @@ exports[`Button Tests Buttons can be disabled 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(249, 249, 249, 77)", - }, "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(249, 249, 249, 77)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -196,14 +201,19 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 122, 255, 255)", - }, "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 122, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -330,15 +340,20 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 255, 179)", - }, "Comment": "accessibility_props", "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 179)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -476,14 +491,19 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(249, 249, 249, 77)", - }, "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(249, 249, 249, 77)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -624,14 +644,19 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 59, 48, 255)", - }, "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 59, 48, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -742,15 +767,20 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 255, 179)", - }, "Comment": "accessible_false_button", "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 179)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -872,15 +902,20 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 255, 179)", - }, "Comment": "focusable_false_button", "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 179)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -987,15 +1022,20 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 255, 179)", - }, "Comment": "accessible_focusable_false_button", "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 179)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -1191,14 +1231,19 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 59, 48, 255)", - }, "Offset": "0, 0, 0", "Size": "59, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 59, 48, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -1308,14 +1353,19 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(52, 199, 89, 255)", - }, "Offset": "0, 0, 0", "Size": "62, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(52, 199, 89, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -1552,14 +1602,19 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 59, 48, 255)", - }, "Offset": "0, 0, 0", "Size": "59, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 59, 48, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -1669,14 +1724,19 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 122, 255, 255)", - }, "Offset": "0, 0, 0", "Size": "105, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 122, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -1786,14 +1846,19 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(52, 199, 89, 255)", - }, "Offset": "0, 0, 0", "Size": "62, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(52, 199, 89, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -1923,15 +1988,20 @@ exports[`Button Tests Buttons have default styling 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 255, 179)", - }, "Comment": "button_default_styling", "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 179)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/CustomAccessibilityTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/CustomAccessibilityTest.test.ts.snap index 136049c1614..755364d76b3 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/CustomAccessibilityTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/CustomAccessibilityTest.test.ts.snap @@ -67,14 +67,21 @@ exports[`Custom Accessibility Tests Verify custom native component has UIA label "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", - }, "Comment": "custom-accessibility-1", "Offset": "0, 0, 0", "Size": "500, 500", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/FlatListComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/FlatListComponentTest.test.ts.snap index a7c8b2dfcc8..0950ced3af8 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/FlatListComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/FlatListComponentTest.test.ts.snap @@ -128,14 +128,19 @@ exports[`FlatList Tests A FlatList can be filtered by a key word 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 255, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 422", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "998, 100", @@ -261,13 +266,20 @@ exports[`FlatList Tests A FlatList can be filtered by a key word 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 255, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -842,15 +854,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Pizza", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -873,15 +890,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Burger", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -904,15 +926,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Risotto", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -935,15 +962,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "French Fries", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -966,15 +998,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Onion Rings", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -997,15 +1034,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Fried Shrimps", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1028,15 +1070,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Water", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1059,15 +1106,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Coke", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1090,15 +1142,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Beer", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1121,15 +1178,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Cheesecake", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1152,15 +1214,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Brownie", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1610,15 +1677,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Pizza", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1641,15 +1713,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Burger", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1672,15 +1749,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Risotto", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1703,15 +1785,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "French Fries", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1734,15 +1821,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Onion Rings", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1765,15 +1857,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Fried Shrimps", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1796,15 +1893,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Water", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1827,15 +1929,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Coke", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1858,15 +1965,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Beer", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1889,15 +2001,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Cheesecake", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1920,15 +2037,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Brownie", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -2548,15 +2670,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Pizza", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -2579,13 +2706,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2608,15 +2742,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Burger", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -2639,13 +2778,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2668,15 +2814,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Risotto", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -2699,13 +2850,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2728,15 +2886,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "French Fries", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -2759,13 +2922,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2788,15 +2958,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Onion Rings", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -2819,13 +2994,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2848,20 +3030,25 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Fried Shrimps", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ { - "Offset": "20, 19, 0", - "Size": "958, 32", - "Visual Type": "SpriteVisual", - "__Children": [ + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "20, 19, 0", + "Size": "958, 32", + "Visual Type": "SpriteVisual", + "__Children": [ { "Offset": "0, 0, 0", "Size": "958, 32", @@ -2879,13 +3066,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2908,15 +3102,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Water", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -2939,13 +3138,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2968,15 +3174,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Coke", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -2999,13 +3210,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3028,15 +3246,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Beer", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -3059,13 +3282,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3088,15 +3318,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Cheesecake", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -3119,13 +3354,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3148,15 +3390,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Brownie", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -3492,13 +3739,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3520,13 +3774,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3548,13 +3809,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3576,13 +3844,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 71", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3604,13 +3879,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3632,13 +3914,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3660,13 +3949,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3688,13 +3984,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3726,13 +4029,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3768,13 +4078,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3810,13 +4127,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -4288,13 +4612,20 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(240, 128, 128, 255)", - }, "Offset": "0, 0, 0", "Size": "996, 40", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(240, 128, 128, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -4316,13 +4647,20 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "478, 460", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -4332,14 +4670,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4402,14 +4745,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4472,14 +4820,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4542,14 +4895,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4612,14 +4970,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4682,13 +5045,20 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "478, 460", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -4698,14 +5068,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4768,14 +5143,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4838,14 +5218,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4908,14 +5293,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4978,14 +5368,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -5048,13 +5443,20 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(173, 216, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "996, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(173, 216, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -5102,14 +5504,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "144, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -5172,14 +5579,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "144, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -5242,14 +5654,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "144, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -5312,14 +5729,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "144, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -5382,14 +5804,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "144, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -5524,13 +5951,20 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(173, 216, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "996, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(173, 216, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -5967,15 +6401,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Pizza", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -5998,15 +6437,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Burger", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6029,15 +6473,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Risotto", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6060,15 +6509,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "French Fries", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6091,15 +6545,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Onion Rings", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6122,15 +6581,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Fried Shrimps", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6153,15 +6617,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Water", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6184,15 +6653,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Coke", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6215,15 +6689,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Beer", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6246,15 +6725,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Cheesecake", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6277,15 +6761,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Brownie", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6735,15 +7224,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Pizza", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6766,15 +7260,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Burger", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6797,15 +7296,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Risotto", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6828,15 +7332,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "French Fries", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6859,15 +7368,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Onion Rings", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6890,15 +7404,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Fried Shrimps", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6921,15 +7440,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Water", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6952,15 +7476,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Coke", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6983,15 +7512,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Beer", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -7014,15 +7548,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Cheesecake", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -7045,15 +7584,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Brownie", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", 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 6ddb67b2c6a..7388b16b156 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 @@ -10,15 +10,20 @@ exports[`LegacyImageTest ImageRTLTest 1`] = ` }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 0, 255)", - }, "Comment": "image-container", "Offset": "0, 0, 0", "Size": "500, 300", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "20, 20", @@ -74,15 +79,20 @@ exports[`LegacyImageTest ImageWithBorderTest 1`] = ` }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 0, 255)", - }, "Comment": "image-container", "Offset": "0, 0, 0", "Size": "500, 300", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -170,14 +180,21 @@ exports[`LegacyImageTest ImageWithoutBorderTest 1`] = ` }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 0, 255)", - }, "Comment": "image-container", "Offset": "0, 0, 0", "Size": "500, 300", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, } `; @@ -192,15 +209,20 @@ exports[`LegacyImageTest ImageWithoutBorderTestOneMoreClick 1`] = ` }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 0, 255)", - }, "Comment": "image-container", "Offset": "0, 0, 0", "Size": "500, 300", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "20, 20", diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/PointerButtonComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/PointerButtonComponentTest.test.ts.snap index 9ea6e8adb43..48dc769b6c2 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/PointerButtonComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/PointerButtonComponentTest.test.ts.snap @@ -14,14 +14,21 @@ exports[`Pointer Button Tests onPointerDown reports correct button property on l }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 255, 255)", - }, "Comment": "pointer-button-target", "Offset": "0, 0, 0", "Size": "200, 200", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, } `; @@ -40,14 +47,21 @@ exports[`Pointer Button Tests onPointerUp reports correct button property on lef }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 255, 255)", - }, "Comment": "pointer-up-button-target", "Offset": "0, 0, 0", "Size": "200, 200", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "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 5124f964cad..2addc38c47c 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 @@ -327,15 +327,20 @@ exports[`Pressable Tests Pressables can change style when pressed 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 255, 255)", - }, "Comment": "style-change-pressable", "Offset": "0, 0, 0", "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "426, 6, 0", "Size": "64, 22", @@ -431,15 +436,20 @@ exports[`Pressable Tests Pressables can have advanced borders 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Comment": "pressable_hit_slop_button", "Offset": "0, 0, 0", "Size": "146, 19", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "146, 19", @@ -549,15 +559,20 @@ exports[`Pressable Tests Pressables can have delayed event handlers 2`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(249, 249, 249, 255)", - }, "Comment": "pressable_delay_events_console", "Offset": "0, 0, 0", "Size": "896, 120", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(249, 249, 249, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -593,11 +608,6 @@ exports[`Pressable Tests Pressables can have delayed event handlers 2`] = ` "Size": "1, 1", "Visual Type": "SpriteVisual", }, - { - "Offset": "0, 1, 0", - "Size": "1, -2", - "Visual Type": "SpriteVisual", - }, { "Offset": "11, 11, 0", "Size": "874, 19", @@ -622,6 +632,11 @@ exports[`Pressable Tests Pressables can have delayed event handlers 2`] = ` }, ], }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, ], }, } @@ -711,15 +726,20 @@ exports[`Pressable Tests Pressables can have event handlers, hover 2`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(249, 249, 249, 255)", - }, "Comment": "pressable_feedback_events_console", "Offset": "0, 0, 0", "Size": "896, 120", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(249, 249, 249, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -755,11 +775,6 @@ exports[`Pressable Tests Pressables can have event handlers, hover 2`] = ` "Size": "1, 1", "Visual Type": "SpriteVisual", }, - { - "Offset": "0, 1, 0", - "Size": "1, -2", - "Visual Type": "SpriteVisual", - }, { "Offset": "11, 11, 0", "Size": "874, 19", @@ -772,6 +787,11 @@ exports[`Pressable Tests Pressables can have event handlers, hover 2`] = ` }, ], }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, ], }, } @@ -905,15 +925,20 @@ exports[`Pressable Tests Pressables can have event handlers, hover and click 2`] ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(249, 249, 249, 255)", - }, "Comment": "pressable_feedback_events_console", "Offset": "0, 0, 0", "Size": "896, 120", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(249, 249, 249, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -949,11 +974,6 @@ exports[`Pressable Tests Pressables can have event handlers, hover and click 2`] "Size": "1, 1", "Visual Type": "SpriteVisual", }, - { - "Offset": "0, 1, 0", - "Size": "1, -2", - "Visual Type": "SpriteVisual", - }, { "Offset": "11, 11, 0", "Size": "874, 19", @@ -1014,6 +1034,11 @@ exports[`Pressable Tests Pressables can have event handlers, hover and click 2`] }, ], }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, ], }, } @@ -1049,15 +1074,20 @@ exports[`Pressable Tests Pressables can have hit slop functionality 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Comment": "pressable_hit_slop_button", "Offset": "0, 0, 0", "Size": "146, 19", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "146, 19", @@ -1234,14 +1264,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1251,14 +1288,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.10000000149011612, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1268,14 +1312,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.20000000298023224, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1285,14 +1336,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.30000001192092896, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1302,14 +1360,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.4000000059604645, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1319,14 +1384,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.5, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1336,14 +1408,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.6000000238418579, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1353,14 +1432,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.699999988079071, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1370,14 +1456,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.800000011920929, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1387,14 +1480,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.8999999761581421, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1404,13 +1504,20 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "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", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1849,14 +1956,19 @@ exports[`Pressable Tests Pressables can hide their backface 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 255, 255)", - }, "Offset": "0, 0, 0", "Size": "200, 200", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "83, 90, 0", "Size": "34, 19", @@ -1879,14 +1991,19 @@ exports[`Pressable Tests Pressables can hide their backface 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "200, 200", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "8, 90, 0", "Size": "184, 19", @@ -1921,14 +2038,19 @@ exports[`Pressable Tests Pressables can hide their backface 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 255, 255)", - }, "Offset": "0, 0, 0", "Size": "200, 200", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "6, 90, 0", "Size": "188, 20", @@ -1951,14 +2073,19 @@ exports[`Pressable Tests Pressables can hide their backface 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "200, 200", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "85, 90, 0", "Size": "30, 20", 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 efb33774859..875163ac0e7 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 @@ -30,15 +30,20 @@ exports[`ScrollView Tests ScrollView has scrollTo method, scroll to bottom butto ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Comment": "scroll_to_bottom_button", "Offset": "0, 0, 0", "Size": "906, 29", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "402, 5, 0", "Size": "102, 19", @@ -86,15 +91,20 @@ exports[`ScrollView Tests ScrollView has scrollTo method, scroll to end button 1 ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Comment": "scroll_to_end_button", "Offset": "0, 0, 0", "Size": "906, 29", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "414, 5, 0", "Size": "78, 19", @@ -142,15 +152,20 @@ exports[`ScrollView Tests ScrollView has scrollTo method, scroll to start button ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Comment": "scroll_to_start_button", "Offset": "0, 0, 0", "Size": "906, 29", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "412, 5, 0", "Size": "82, 20", @@ -198,15 +213,20 @@ exports[`ScrollView Tests ScrollView has scrollTo method, scroll to top button 1 ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Comment": "scroll_to_top_button", "Offset": "0, 0, 0", "Size": "906, 29", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "415, 5, 0", "Size": "76, 20", @@ -468,13 +488,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -496,13 +523,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -524,13 +558,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -552,13 +593,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -580,13 +628,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -608,13 +663,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -636,13 +698,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -664,13 +733,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -692,13 +768,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -720,13 +803,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -748,13 +838,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -776,13 +873,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -901,15 +1005,20 @@ exports[`ScrollView Tests ScrollViews has flash scroll indicators 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Comment": "flash_scroll_indicators_button", "Offset": "0, 0, 0", "Size": "906, 28", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "387, 5, 0", "Size": "132, 20", 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 36fbe0766a2..2f2c39afc35 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 @@ -962,13 +962,20 @@ exports[`Text Tests Text can have inline views/images 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(70, 130, 180, 255)", - }, "Offset": "0, 0, 0", "Size": "0, 0", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(70, 130, 180, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1075,13 +1082,20 @@ exports[`Text Tests Text can have nested views 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "0, 0", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1266,13 +1280,20 @@ exports[`Text Tests Texts can clip inline View/Images 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "0, 0", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1282,13 +1303,20 @@ exports[`Text Tests Texts can clip inline View/Images 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(70, 130, 180, 255)", - }, "Offset": "0, 0, 0", "Size": "0, 0", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(70, 130, 180, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "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 e5670892632..e4ff8caf305 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 @@ -268,10 +268,6 @@ exports[`Touchable Tests Touchables can be disabled 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 0)", - }, "Comment": "disabled_touchable", "Offset": "0, 0, 0", "Size": "916, 38", @@ -327,10 +323,6 @@ exports[`Touchable Tests Touchables can be disabled 2`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 0)", - }, "Comment": "disabled_touchable", "Offset": "0, 0, 0", "Size": "916, 38", @@ -545,15 +537,20 @@ exports[`Touchable Tests Touchables can enable a hit slop region 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Comment": "touchable_hit_slop_button", "Offset": "0, 0, 0", "Size": "146, 19", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "146, 20", 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 5afa7c5481a..0f0f05d0b3c 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 @@ -1,5 +1,267 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`View Tests View box sizing 1`] = ` +{ + "Automation Tree": { + "AutomationId": "view-test-box-sizing", + "ControlType": 50026, + "LocalizedControlType": "group", + "__Children": [ + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Content box 50x25", + "TextRangePattern.GetText": "Content box 50x25", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Border box 50x25", + "TextRangePattern.GetText": "Border box 50x25", + }, + ], + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "view-test-box-sizing", + }, + "__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.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + ], + }, + "Visual Tree": { + "Comment": "view-test-box-sizing", + "Offset": "0, 0, 0", + "Size": "916, 147", + "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": "10, 29, 0", + "Size": "70, 45", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "70, 45", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 0, 0", + "Size": "5, 5", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "5, 0, 0", + "Size": "-10, 5", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-5, 0, 0", + "Size": "5, 5", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-5, 5, 0", + "Size": "5, -10", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-5, -5, 0", + "Size": "5, 5", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "5, -5, 0", + "Size": "-10, 5", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -5, 0", + "Size": "5, 5", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 5, 0", + "Size": "5, -10", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + { + "Offset": "20, 39, 0", + "Size": "50, 25", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "50, 25", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + { + "Offset": "0, 83, 0", + "Size": "916, 19", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 19", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "10, 112, 0", + "Size": "50, 25", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "50, 25", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 0, 0", + "Size": "5, 5", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "5, 0, 0", + "Size": "-10, 5", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-5, 0, 0", + "Size": "5, 5", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-5, 5, 0", + "Size": "5, -10", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-5, -5, 0", + "Size": "5, 5", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "5, -5, 0", + "Size": "-10, 5", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -5, 0", + "Size": "5, 5", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 5, 0", + "Size": "5, -10", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + { + "Offset": "20, 122, 0", + "Size": "30, 5", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "30, 5", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + ], + }, +} +`; + exports[`View Tests Views can have a hitslop region 1`] = ` { "Automation Tree": { @@ -16,14 +278,21 @@ exports[`View Tests Views can have a hitslop region 1`] = ` }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 128, 128, 255)", - }, "Comment": "hitslop", "Offset": "0, 0, 0", "Size": "200, 200", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 128, 128, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, } `; @@ -190,14 +459,19 @@ exports[`View Tests Views can have a z-index 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(100, 181, 246, 255)", - }, "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(100, 181, 246, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 15, 0", "Size": "100, 20", @@ -232,19 +506,24 @@ exports[`View Tests Views can have a z-index 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(129, 199, 132, 255)", - }, "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", "__Children": [ { - "Offset": "0, 15, 0", - "Size": "100, 20", - "Visual Type": "SpriteVisual", - "__Children": [ + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(129, 199, 132, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 15, 0", + "Size": "100, 20", + "Visual Type": "SpriteVisual", + "__Children": [ { "Offset": "0, 0, 0", "Size": "100, 20", @@ -262,14 +541,19 @@ exports[`View Tests Views can have a z-index 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 241, 118, 255)", - }, "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 241, 118, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 15, 0", "Size": "100, 20", @@ -292,14 +576,19 @@ exports[`View Tests Views can have a z-index 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(229, 115, 115, 255)", - }, "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(229, 115, 115, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 15, 0", "Size": "100, 20", @@ -352,15 +641,20 @@ exports[`View Tests Views can have aria-labels 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Comment": "view-test-aria-label", "Offset": "0, 0, 0", "Size": "916, 24", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "5, 5, 0", "Size": "906, 16", @@ -505,13 +799,20 @@ exports[`View Tests Views can have backface visibility 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 255, 255)", - }, "Offset": "0, 0, 0", "Size": "150, 150", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -533,14 +834,19 @@ exports[`View Tests Views can have backface visibility 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "150, 150", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "10, 56, 0", "Size": "130, 38", @@ -575,13 +881,20 @@ exports[`View Tests Views can have backface visibility 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 255, 255)", - }, "Offset": "0, 0, 0", "Size": "150, 150", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -603,13 +916,20 @@ exports[`View Tests Views can have backface visibility 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "150, 150", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -661,15 +981,20 @@ exports[`View Tests Views can have background color 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Comment": "view-test-background-color", "Offset": "0, 0, 0", "Size": "916, 24", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "5, 5, 0", "Size": "906, 16", @@ -1597,14 +1922,19 @@ exports[`View Tests Views can have customized pasdding and margins 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "915, 27", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -1667,14 +1997,19 @@ exports[`View Tests Views can have customized pasdding and margins 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "905, 16", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -1737,14 +2072,19 @@ exports[`View Tests Views can have customized pasdding and margins 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "133, 42", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -1983,13 +2323,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1999,13 +2346,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2015,13 +2369,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2031,13 +2392,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2047,13 +2415,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2063,13 +2438,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2079,13 +2461,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2095,13 +2484,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2111,13 +2507,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2127,13 +2530,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2143,13 +2553,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2374,13 +2791,20 @@ exports[`View Tests Views can have insets 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "904, 28", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2456,13 +2880,20 @@ exports[`View Tests Views can have insets 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "68, 28", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2538,13 +2969,20 @@ exports[`View Tests Views can have insets 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "86, 25", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2620,21 +3058,28 @@ exports[`View Tests Views can have insets 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "90, 24", "Visual Type": "SpriteVisual", - }, - ], - }, - { - "Offset": "6, 146, 0", - "Size": "81, 16", - "Visual Type": "SpriteVisual", - "__Children": [ + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + { + "Offset": "6, 146, 0", + "Size": "81, 16", + "Visual Type": "SpriteVisual", + "__Children": [ { "Offset": "0, 0, 0", "Size": "81, 16", @@ -2702,13 +3147,20 @@ exports[`View Tests Views can have insets 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "904, 24", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2784,13 +3236,20 @@ exports[`View Tests Views can have insets 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "87, 24", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2866,13 +3325,20 @@ exports[`View Tests Views can have insets 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "91, 24", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3323,13 +3789,20 @@ exports[`View Tests Views can have offscreen alpha compositing 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 111, 89, 255)", - }, "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", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3339,13 +3812,20 @@ exports[`View Tests Views can have offscreen alpha compositing 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(247, 203, 21, 255)", - }, "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(247, 203, 21, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3390,13 +3870,20 @@ exports[`View Tests Views can have offscreen alpha compositing 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 111, 89, 255)", - }, "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", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3406,13 +3893,20 @@ exports[`View Tests Views can have offscreen alpha compositing 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(247, 203, 21, 255)", - }, "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(247, 203, 21, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3425,50 +3919,37 @@ exports[`View Tests Views can have offscreen alpha compositing 1`] = ` } `; -exports[`View Tests Views can have overflow 1`] = ` +exports[`View Tests Views can have outlines 1`] = ` { "Automation Tree": { - "AutomationId": "view-test-overflow", + "AutomationId": "view-test-outline", "ControlType": 50026, "LocalizedControlType": "group", - "Name": "Rounded Borders Example", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "view-test-outline", + }, "__Children": [ { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "undefined", - "TextRangePattern.GetText": "undefined", + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, }, { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "hidden", - "TextRangePattern.GetText": "hidden", + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, }, { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "visible", - "TextRangePattern.GetText": "visible", + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, }, - ], - }, - "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", + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", "_Props": {}, }, { @@ -3478,175 +3959,447 @@ exports[`View Tests Views can have overflow 1`] = ` { "Type": "Microsoft.ReactNative.Composition.ViewComponentView", "_Props": {}, - "__Children": [ - { - "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", - "_Props": {}, - }, - ], }, { "Type": "Microsoft.ReactNative.Composition.ViewComponentView", "_Props": {}, }, { - "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", "_Props": {}, }, ], }, "Visual Tree": { - "Comment": "view-test-overflow", + "Comment": "view-test-outline", "Offset": "0, 0, 0", - "Size": "916, 20", + "Size": "896, 70", "Visual Type": "SpriteVisual", "__Children": [ { - "Offset": "0, 0, 0", - "Size": "95, 12", + "Offset": "10, 10, 0", + "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "95, 12", + "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "1, 1", + "Size": "8, 8", "Visual Type": "SpriteVisual", }, { - "Offset": "1, 0, 0", - "Size": "-2, 1", + "Offset": "8, 0, 0", + "Size": "-16, 8", "Visual Type": "SpriteVisual", }, { - "Offset": "-1, 0, 0", - "Size": "1, 1", + "Offset": "-8, 0, 0", + "Size": "8, 8", "Visual Type": "SpriteVisual", }, { - "Offset": "-1, 1, 0", - "Size": "1, -2", + "Offset": "-8, 8, 0", + "Size": "8, -16", "Visual Type": "SpriteVisual", }, { - "Offset": "-1, -1, 0", - "Size": "1, 1", + "Offset": "-8, -8, 0", + "Size": "8, 8", "Visual Type": "SpriteVisual", }, { - "Offset": "1, -1, 0", - "Size": "-2, 1", + "Offset": "8, -8, 0", + "Size": "-16, 8", "Visual Type": "SpriteVisual", }, { - "Offset": "0, -1, 0", - "Size": "1, 1", + "Offset": "0, -8, 0", + "Size": "8, 8", "Visual Type": "SpriteVisual", }, { - "Offset": "0, 1, 0", - "Size": "1, -2", + "Offset": "0, 8, 0", + "Size": "8, -16", "Visual Type": "SpriteVisual", }, + { + "Offset": "-8, -8, 0", + "Size": "16, 16", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "8, 0, 0", + "Size": "-16, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-8, 0, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-8, 8, 0", + "Size": "8, -16", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-8, -8, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "8, -8, 0", + "Size": "-16, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -8, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 8, 0", + "Size": "8, -16", + "Visual Type": "SpriteVisual", + }, + ], + }, ], }, ], }, { - "Offset": "1, 1, 0", - "Size": "200, 20", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "200, 20", - "Visual Type": "SpriteVisual", - }, - ], - }, - { - "Offset": "111, 0, 0", - "Size": "95, 12", + "Offset": "80, 10, 0", + "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "95, 12", + "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, "Offset": "0, 0, 0", - "Size": "1, 1", + "Size": "28, 28", "Visual Type": "SpriteVisual", }, { - "Offset": "1, 0, 0", - "Size": "-2, 1", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "28, 0, 0", + "Size": "-6, 8", "Visual Type": "SpriteVisual", }, { - "Offset": "-1, 0, 0", - "Size": "1, 1", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "-28, 0, 0", + "Size": "28, 28", "Visual Type": "SpriteVisual", }, { - "Offset": "-1, 1, 0", - "Size": "1, -2", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "-8, 28, 0", + "Size": "8, -6", "Visual Type": "SpriteVisual", }, { - "Offset": "-1, -1, 0", - "Size": "1, 1", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "-28, -28, 0", + "Size": "28, 28", "Visual Type": "SpriteVisual", }, { - "Offset": "1, -1, 0", - "Size": "-2, 1", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "28, -8, 0", + "Size": "-6, 8", "Visual Type": "SpriteVisual", }, { - "Offset": "0, -1, 0", - "Size": "1, 1", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, -28, 0", + "Size": "28, 28", "Visual Type": "SpriteVisual", }, { - "Offset": "0, 1, 0", - "Size": "1, -2", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 28, 0", + "Size": "8, -6", "Visual Type": "SpriteVisual", }, - ], - }, - ], - }, - { - "Offset": "112, 1, 0", - "Size": "93, 10", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "93, 10", - "Visual Type": "SpriteVisual", - "__Children": [ { + "Offset": "-8, -8, 0", + "Size": "16, 16", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 0, 128, 255)", + }, + "Offset": "0, 0, 0", + "Size": "36, 36", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 0, 128, 255)", + }, + "Offset": "36, 0, 0", + "Size": "-6, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 0, 128, 255)", + }, + "Offset": "-36, 0, 0", + "Size": "36, 36", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 0, 128, 255)", + }, + "Offset": "-8, 36, 0", + "Size": "8, -6", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 0, 128, 255)", + }, + "Offset": "-36, -36, 0", + "Size": "36, 36", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 0, 128, 255)", + }, + "Offset": "36, -8, 0", + "Size": "-6, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 0, 128, 255)", + }, + "Offset": "0, -36, 0", + "Size": "36, 36", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 0, 128, 255)", + }, + "Offset": "0, 36, 0", + "Size": "8, -6", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + ], + }, + { + "Offset": "150, 10, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, "Offset": "0, 0, 0", - "Size": "0, 0", + "Size": "28, 28", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "28, 0, 0", + "Size": "14, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "-8, 0, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "-8, 8, 0", + "Size": "8, 14", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "-28, -28, 0", + "Size": "28, 28", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "8, -8, 0", + "Size": "14, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, -8, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 28, 0", + "Size": "8, 14", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-8, -8, 0", + "Size": "16, 16", "Visual Type": "SpriteVisual", "__Children": [ { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 0, 128, 255)", + }, "Offset": "0, 0, 0", - "Size": "200, 20", + "Size": "36, 36", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 0, 128, 255)", + }, + "Offset": "36, 0, 0", + "Size": "22, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 0, 128, 255)", + }, + "Offset": "-8, 0, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 0, 128, 255)", + }, + "Offset": "-8, 8, 0", + "Size": "8, 22", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 0, 128, 255)", + }, + "Offset": "-36, -36, 0", + "Size": "36, 36", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 0, 128, 255)", + }, + "Offset": "8, -8, 0", + "Size": "22, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 0, 128, 255)", + }, + "Offset": "0, -8, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 0, 128, 255)", + }, + "Offset": "0, 36, 0", + "Size": "8, 22", "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "200, 20", - "Visual Type": "SpriteVisual", - }, - ], }, ], }, @@ -3655,53 +4408,1483 @@ exports[`View Tests Views can have overflow 1`] = ` ], }, { - "Offset": "222, 0, 0", - "Size": "95, 12", + "Offset": "225, 10, 0", + "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "95, 12", + "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "1, 1", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "8, 0, 0", + "Size": "-16, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-8, 0, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-8, 8, 0", + "Size": "8, -16", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-8, -8, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "8, -8, 0", + "Size": "-16, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -8, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 8, 0", + "Size": "8, -16", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-13, -13, 0", + "Size": "26, 26", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "8, 0, 0", + "Size": "-16, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-8, 0, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-8, 8, 0", + "Size": "8, -16", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-8, -8, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "8, -8, 0", + "Size": "-16, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -8, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 8, 0", + "Size": "8, -16", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + ], + }, + { + "Offset": "295, 10, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "28, 28", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "28, 0, 0", + "Size": "-6, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "-28, 0, 0", + "Size": "28, 28", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "-8, 28, 0", + "Size": "8, -6", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "-28, -28, 0", + "Size": "28, 28", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "28, -8, 0", + "Size": "-6, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "0, -28, 0", + "Size": "28, 28", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "0, 28, 0", + "Size": "8, -6", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-8, -8, 0", + "Size": "16, 16", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "36, 36", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "36, 0, 0", + "Size": "-72, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-36, 0, 0", + "Size": "36, 36", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-8, 36, 0", + "Size": "8, -72", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-36, -36, 0", + "Size": "36, 36", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "36, -8, 0", + "Size": "-72, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -36, 0", + "Size": "36, 36", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 36, 0", + "Size": "8, -72", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + ], + }, + { + "Offset": "365, 10, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "28, 28", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "28, 0, 0", + "Size": "14, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "-8, 0, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "-8, 8, 0", + "Size": "8, 14", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "-28, -28, 0", + "Size": "28, 28", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "8, -8, 0", + "Size": "14, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "0, -8, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "0, 28, 0", + "Size": "8, 14", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-8, -8, 0", + "Size": "16, 16", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "36, 36", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "36, 0, 0", + "Size": "-44, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-8, 0, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-8, 8, 0", + "Size": "8, -44", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-36, -36, 0", + "Size": "36, 36", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "8, -8, 0", + "Size": "-44, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -8, 0", + "Size": "8, 8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 36, 0", + "Size": "8, -44", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + ], + }, + { + "Offset": "435, 10, 0", + "Size": "100, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "100, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "58, 33", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "58, 0, 0", + "Size": "-16, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "-58, 0, 0", + "Size": "58, 33", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "-8, 33, 0", + "Size": "8, -16", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "-58, -33, 0", + "Size": "58, 33", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "58, -8, 0", + "Size": "-16, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "0, -33, 0", + "Size": "58, 33", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "0, 33, 0", + "Size": "8, -16", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-8, -8, 0", + "Size": "16, 16", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 165, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "66, 41", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 165, 0, 255)", + }, + "Offset": "66, 0, 0", + "Size": "-16, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 165, 0, 255)", + }, + "Offset": "-66, 0, 0", + "Size": "66, 41", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 165, 0, 255)", + }, + "Offset": "-8, 41, 0", + "Size": "8, -16", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 165, 0, 255)", + }, + "Offset": "-66, -41, 0", + "Size": "66, 41", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 165, 0, 255)", + }, + "Offset": "66, -8, 0", + "Size": "-16, 8", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 165, 0, 255)", + }, + "Offset": "0, -41, 0", + "Size": "66, 41", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 165, 0, 255)", + }, + "Offset": "0, 41, 0", + "Size": "8, -16", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + ], + }, + { + "Offset": "555, 10, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "12, 12", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "12, 0, 0", + "Size": "-24, 12", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-12, 0, 0", + "Size": "12, 12", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-12, 12, 0", + "Size": "12, -24", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-12, -12, 0", + "Size": "12, 12", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "12, -12, 0", + "Size": "-24, 12", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -12, 0", + "Size": "12, 12", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 12, 0", + "Size": "12, -24", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "4, 4, 0", + "Size": "-8, -8", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "4, 4", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "4, 0, 0", + "Size": "-8, 4", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-4, 0, 0", + "Size": "4, 4", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-4, 4, 0", + "Size": "4, -8", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-4, -4, 0", + "Size": "4, 4", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "4, -4, 0", + "Size": "-8, 4", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -4, 0", + "Size": "4, 4", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 4, 0", + "Size": "4, -8", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + ], + }, + { + "Offset": "625, 10, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "-9, -9, 0", + "Size": "18, 18", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "9, 9", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "9, 0, 0", + "Size": "-18, 9", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-9, 0, 0", + "Size": "9, 9", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-9, 9, 0", + "Size": "9, -18", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-9, -9, 0", + "Size": "9, 9", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "9, -9, 0", + "Size": "-18, 9", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -9, 0", + "Size": "9, 9", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, 9, 0", + "Size": "9, -18", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + ], + }, + ], + }, +} +`; + +exports[`View Tests Views can have overflow 1`] = ` +{ + "Automation Tree": { + "AutomationId": "view-test-overflow", + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "Rounded Borders Example", + "__Children": [ + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "undefined", + "TextRangePattern.GetText": "undefined", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "hidden", + "TextRangePattern.GetText": "hidden", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "visible", + "TextRangePattern.GetText": "visible", + }, + ], + }, + "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": { + "Comment": "view-test-overflow", + "Offset": "0, 0, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "95, 12", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "95, 12", + "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", + }, + ], + }, + ], + }, + { + "Offset": "1, 1, 0", + "Size": "200, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "200, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "111, 0, 0", + "Size": "95, 12", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "95, 12", + "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", + }, + ], + }, + ], + }, + { + "Offset": "112, 1, 0", + "Size": "93, 10", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "93, 10", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "200, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "200, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + ], + }, + ], + }, + { + "Offset": "222, 0, 0", + "Size": "95, 12", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "95, 12", + "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", + }, + ], + }, + ], + }, + { + "Offset": "223, 1, 0", + "Size": "200, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "200, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, +} +`; + +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 Tree": { + "Comment": "view-test-rounded-borders", + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__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", + "Size": "26, 26", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "26, 0, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-26, 0, 0", + "Size": "26, 26", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-1, 26, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-26, -26, 0", + "Size": "26, 26", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "26, -1, 0", + "Size": "-2, 1", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, -26, 0", + "Size": "26, 26", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 26, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + { + "Offset": "60, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__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", + "Size": "35, 35", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "35, 0, 0", + "Size": "-20, 10", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-35, 0, 0", + "Size": "35, 35", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-10, 35, 0", + "Size": "10, -20", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-35, -35, 0", + "Size": "35, 35", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "35, -10, 0", + "Size": "-20, 10", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, -35, 0", + "Size": "35, 35", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 35, 0", + "Size": "10, -20", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + { + "Offset": "120, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__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", + "Size": "5, 5", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "5, 0, 0", + "Size": "34, 1", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-11, 0, 0", + "Size": "11, 11", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-1, 11, 0", + "Size": "1, 22", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-17, -17, 0", + "Size": "17, 17", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "34, -1, 0", + "Size": "-1, 1", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, -34, 0", + "Size": "34, 34", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 5, 0", + "Size": "1, 11", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + { + "Offset": "180, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__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", + "Size": "14, 14", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "14, 0, 0", + "Size": "16, 10", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-20, 0, 0", + "Size": "20, 20", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-10, 20, 0", + "Size": "10, 4", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-26, -26, 0", + "Size": "26, 26", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "43, -10, 0", + "Size": "-19, 10", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, -43, 0", + "Size": "43, 43", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 14, 0", + "Size": "10, -7", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + { + "Offset": "240, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__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", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { - "Offset": "1, 0, 0", - "Size": "-2, 1", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "26, 0, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { - "Offset": "-1, 0, 0", - "Size": "1, 1", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-0, 0, 0", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { - "Offset": "-1, 1, 0", - "Size": "1, -2", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-0, 6, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, { - "Offset": "-1, -1, 0", - "Size": "1, 1", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-0, -0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { - "Offset": "1, -1, 0", - "Size": "-2, 1", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "6, -0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { - "Offset": "0, -1, 0", - "Size": "1, 1", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, -0, 0", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { - "Offset": "0, 1, 0", - "Size": "1, -2", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 26, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, ], @@ -3709,79 +5892,7 @@ exports[`View Tests Views can have overflow 1`] = ` ], }, { - "Offset": "223, 1, 0", - "Size": "200, 20", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "200, 20", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, -} -`; - -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 Tree": { - "Comment": "view-test-rounded-borders", - "Offset": "0, 0, 0", - "Size": "916, 50", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", + "Offset": "290, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -3796,7 +5907,7 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "26, 26", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { @@ -3804,8 +5915,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "26, 0, 0", - "Size": "-2, 1", + "Offset": "0, 0, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { @@ -3822,8 +5933,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-1, 26, 0", - "Size": "1, -2", + "Offset": "-6, 26, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, { @@ -3831,8 +5942,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-26, -26, 0", - "Size": "26, 26", + "Offset": "-6, -0, 0", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { @@ -3840,8 +5951,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "26, -1, 0", - "Size": "-2, 1", + "Offset": "0, -0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { @@ -3849,8 +5960,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -26, 0", - "Size": "26, 26", + "Offset": "0, -0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { @@ -3858,8 +5969,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 26, 0", - "Size": "1, -2", + "Offset": "0, 6, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, ], @@ -3867,7 +5978,7 @@ exports[`View Tests Views can have rounded borders 1`] = ` ], }, { - "Offset": "60, 0, 0", + "Offset": "340, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -3882,7 +5993,7 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "35, 35", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { @@ -3890,8 +6001,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "35, 0, 0", - "Size": "-20, 10", + "Offset": "6, 0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { @@ -3899,8 +6010,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-35, 0, 0", - "Size": "35, 35", + "Offset": "-0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { @@ -3908,8 +6019,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-10, 35, 0", - "Size": "10, -20", + "Offset": "-0, 0, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, { @@ -3917,8 +6028,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-35, -35, 0", - "Size": "35, 35", + "Offset": "-0, -6, 0", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { @@ -3926,8 +6037,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "35, -10, 0", - "Size": "-20, 10", + "Offset": "26, -6, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { @@ -3935,8 +6046,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -35, 0", - "Size": "35, 35", + "Offset": "0, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -3944,8 +6055,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 35, 0", - "Size": "10, -20", + "Offset": "0, 0, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, ], @@ -3953,7 +6064,7 @@ exports[`View Tests Views can have rounded borders 1`] = ` ], }, { - "Offset": "120, 0, 0", + "Offset": "390, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -3968,7 +6079,7 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "5, 5", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { @@ -3976,8 +6087,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "5, 0, 0", - "Size": "34, 1", + "Offset": "0, 0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { @@ -3985,8 +6096,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-11, 0, 0", - "Size": "11, 11", + "Offset": "-6, 0, 0", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { @@ -3994,8 +6105,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-1, 11, 0", - "Size": "1, 22", + "Offset": "-6, 0, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, { @@ -4003,8 +6114,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-17, -17, 0", - "Size": "17, 17", + "Offset": "-26, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -4012,8 +6123,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "34, -1, 0", - "Size": "-1, 1", + "Offset": "0, -6, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { @@ -4021,8 +6132,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -34, 0", - "Size": "34, 34", + "Offset": "0, -6, 0", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { @@ -4030,16 +6141,76 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 5, 0", - "Size": "1, 11", + "Offset": "0, 0, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, ], }, ], }, + ], + }, +} +`; + +exports[`View Tests Views can have rounded borders 2`] = ` +{ + "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": {}, + }, { - "Offset": "180, 0, 0", + "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": { + "Comment": "view-test-rounded-borders", + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -4054,7 +6225,7 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "14, 14", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -4062,8 +6233,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "14, 0, 0", - "Size": "16, 10", + "Offset": "26, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { @@ -4071,8 +6242,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-20, 0, 0", - "Size": "20, 20", + "Offset": "-26, 0, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -4080,8 +6251,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-10, 20, 0", - "Size": "10, 4", + "Offset": "-1, 26, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -4098,8 +6269,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "43, -10, 0", - "Size": "-19, 10", + "Offset": "26, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { @@ -4107,8 +6278,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -43, 0", - "Size": "43, 43", + "Offset": "0, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -4116,8 +6287,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 14, 0", - "Size": "10, -7", + "Offset": "0, 26, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], @@ -4125,7 +6296,7 @@ exports[`View Tests Views can have rounded borders 1`] = ` ], }, { - "Offset": "240, 0, 0", + "Offset": "60, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -4140,7 +6311,7 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "26, 26", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { @@ -4148,8 +6319,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "26, 0, 0", - "Size": "24, 6", + "Offset": "35, 0, 0", + "Size": "-20, 10", "Visual Type": "SpriteVisual", }, { @@ -4157,8 +6328,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-0, 0, 0", - "Size": "0, 6", + "Offset": "-35, 0, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { @@ -4166,8 +6337,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-0, 6, 0", - "Size": "0, 44", + "Offset": "-10, 35, 0", + "Size": "10, -20", "Visual Type": "SpriteVisual", }, { @@ -4175,8 +6346,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-0, -0, 0", - "Size": "0, 0", + "Offset": "-35, -35, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { @@ -4184,8 +6355,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "6, -0, 0", - "Size": "44, 0", + "Offset": "35, -10, 0", + "Size": "-20, 10", "Visual Type": "SpriteVisual", }, { @@ -4193,8 +6364,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -0, 0", - "Size": "6, 0", + "Offset": "0, -35, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { @@ -4202,8 +6373,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 26, 0", - "Size": "6, 24", + "Offset": "0, 35, 0", + "Size": "10, -20", "Visual Type": "SpriteVisual", }, ], @@ -4211,7 +6382,7 @@ exports[`View Tests Views can have rounded borders 1`] = ` ], }, { - "Offset": "290, 0, 0", + "Offset": "120, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -4226,7 +6397,7 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "0, 6", + "Size": "5, 5", "Visual Type": "SpriteVisual", }, { @@ -4234,8 +6405,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 0, 0", - "Size": "24, 6", + "Offset": "5, 0, 0", + "Size": "34, 1", "Visual Type": "SpriteVisual", }, { @@ -4243,8 +6414,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-26, 0, 0", - "Size": "26, 26", + "Offset": "-11, 0, 0", + "Size": "11, 11", "Visual Type": "SpriteVisual", }, { @@ -4252,8 +6423,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-6, 26, 0", - "Size": "6, 24", + "Offset": "-1, 11, 0", + "Size": "1, 22", "Visual Type": "SpriteVisual", }, { @@ -4261,8 +6432,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-6, -0, 0", - "Size": "6, 0", + "Offset": "-17, -17, 0", + "Size": "17, 17", "Visual Type": "SpriteVisual", }, { @@ -4270,8 +6441,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -0, 0", - "Size": "44, 0", + "Offset": "34, -1, 0", + "Size": "-1, 1", "Visual Type": "SpriteVisual", }, { @@ -4279,8 +6450,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -0, 0", - "Size": "0, 0", + "Offset": "0, -34, 0", + "Size": "34, 34", "Visual Type": "SpriteVisual", }, { @@ -4288,8 +6459,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 6, 0", - "Size": "0, 44", + "Offset": "0, 5, 0", + "Size": "1, 11", "Visual Type": "SpriteVisual", }, ], @@ -4297,7 +6468,7 @@ exports[`View Tests Views can have rounded borders 1`] = ` ], }, { - "Offset": "340, 0, 0", + "Offset": "180, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -4312,7 +6483,7 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "6, 0", + "Size": "14, 14", "Visual Type": "SpriteVisual", }, { @@ -4320,8 +6491,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "6, 0, 0", - "Size": "44, 0", + "Offset": "14, 0, 0", + "Size": "16, 10", "Visual Type": "SpriteVisual", }, { @@ -4329,8 +6500,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-0, 0, 0", - "Size": "0, 0", + "Offset": "-20, 0, 0", + "Size": "20, 20", "Visual Type": "SpriteVisual", }, { @@ -4338,8 +6509,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-0, 0, 0", - "Size": "0, 44", + "Offset": "-10, 20, 0", + "Size": "10, 4", "Visual Type": "SpriteVisual", }, { @@ -4347,8 +6518,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-0, -6, 0", - "Size": "0, 6", + "Offset": "-26, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -4356,8 +6527,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "26, -6, 0", - "Size": "24, 6", + "Offset": "43, -10, 0", + "Size": "-19, 10", "Visual Type": "SpriteVisual", }, { @@ -4365,8 +6536,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -26, 0", - "Size": "26, 26", + "Offset": "0, -43, 0", + "Size": "43, 43", "Visual Type": "SpriteVisual", }, { @@ -4374,8 +6545,8 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 0, 0", - "Size": "6, 24", + "Offset": "0, 14, 0", + "Size": "10, -7", "Visual Type": "SpriteVisual", }, ], @@ -4383,7 +6554,7 @@ exports[`View Tests Views can have rounded borders 1`] = ` ], }, { - "Offset": "390, 0, 0", + "Offset": "240, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -4398,42 +6569,6 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "0, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 0, 0", - "Size": "44, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-6, 0, 0", - "Size": "6, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-6, 0, 0", - "Size": "6, 24", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-26, -26, 0", "Size": "26, 26", "Visual Type": "SpriteVisual", }, @@ -4442,7 +6577,7 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -6, 0", + "Offset": "26, 0, 0", "Size": "24, 6", "Visual Type": "SpriteVisual", }, @@ -4451,85 +6586,61 @@ exports[`View Tests Views can have rounded borders 1`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -6, 0", + "Offset": "-0, 0, 0", "Size": "0, 6", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 0, 0", - "Size": "0, 44", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, - ], - }, -} -`; - -exports[`View Tests Views can have rounded borders 2`] = ` -{ - "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", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-0, 6, 0", + "Size": "0, 44", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-0, -0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "6, -0, 0", + "Size": "44, 0", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, -0, 0", + "Size": "6, 0", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 26, 0", + "Size": "6, 24", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], }, - ], - }, - "Visual Tree": { - "Comment": "view-test-rounded-borders", - "Offset": "0, 0, 0", - "Size": "916, 50", - "Visual Type": "SpriteVisual", - "__Children": [ { - "Offset": "0, 0, 0", + "Offset": "290, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -4544,7 +6655,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "26, 26", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { @@ -4552,8 +6663,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "26, 0, 0", - "Size": "-2, 1", + "Offset": "0, 0, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { @@ -4570,8 +6681,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-1, 26, 0", - "Size": "1, -2", + "Offset": "-6, 26, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, { @@ -4579,8 +6690,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-26, -26, 0", - "Size": "26, 26", + "Offset": "-6, -0, 0", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { @@ -4588,8 +6699,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "26, -1, 0", - "Size": "-2, 1", + "Offset": "0, -0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { @@ -4597,8 +6708,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -26, 0", - "Size": "26, 26", + "Offset": "0, -0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { @@ -4606,8 +6717,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 26, 0", - "Size": "1, -2", + "Offset": "0, 6, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, ], @@ -4615,7 +6726,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` ], }, { - "Offset": "60, 0, 0", + "Offset": "340, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -4630,7 +6741,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "35, 35", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { @@ -4638,8 +6749,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "35, 0, 0", - "Size": "-20, 10", + "Offset": "6, 0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { @@ -4647,8 +6758,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-35, 0, 0", - "Size": "35, 35", + "Offset": "-0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { @@ -4656,8 +6767,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-10, 35, 0", - "Size": "10, -20", + "Offset": "-0, 0, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, { @@ -4665,8 +6776,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-35, -35, 0", - "Size": "35, 35", + "Offset": "-0, -6, 0", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { @@ -4674,8 +6785,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "35, -10, 0", - "Size": "-20, 10", + "Offset": "26, -6, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { @@ -4683,8 +6794,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -35, 0", - "Size": "35, 35", + "Offset": "0, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -4692,8 +6803,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 35, 0", - "Size": "10, -20", + "Offset": "0, 0, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, ], @@ -4701,7 +6812,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` ], }, { - "Offset": "120, 0, 0", + "Offset": "390, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -4716,7 +6827,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "5, 5", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { @@ -4724,8 +6835,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "5, 0, 0", - "Size": "34, 1", + "Offset": "0, 0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { @@ -4733,8 +6844,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-11, 0, 0", - "Size": "11, 11", + "Offset": "-6, 0, 0", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { @@ -4742,8 +6853,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-1, 11, 0", - "Size": "1, 22", + "Offset": "-6, 0, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, { @@ -4751,8 +6862,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-17, -17, 0", - "Size": "17, 17", + "Offset": "-26, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -4760,8 +6871,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "34, -1, 0", - "Size": "-1, 1", + "Offset": "0, -6, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { @@ -4769,8 +6880,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -34, 0", - "Size": "34, 34", + "Offset": "0, -6, 0", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { @@ -4778,188 +6889,249 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 5, 0", - "Size": "1, 11", + "Offset": "0, 0, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, ], }, ], }, + ], + }, +} +`; + +exports[`View Tests Views can have shadows 1`] = ` +{ + "Automation Tree": { + "AutomationId": "shadow", + "ControlType": 50026, + "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", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`View Tests Views can have tooltips 1`] = ` +{ + "Automation Tree": { + "AutomationId": "tool-tip", + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "Tooltip Example", + "__Children": [ + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "This Parent View has tooltip "Parent View"", + "TextRangePattern.GetText": "This Parent View has tooltip "Parent View"", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "This view has tooltip "Child View 1"", + "TextRangePattern.GetText": "This view has tooltip "Child View 1"", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "This view has tooltip "Child View 2"", + "TextRangePattern.GetText": "This view has tooltip "Child View 2"", + }, + ], + }, + "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.ViewComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + ], + }, + "Visual Tree": { + "Comment": "tool-tip", + "Offset": "0, 0, 0", + "Size": "916, 43", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 16", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 16", + "Visual Type": "SpriteVisual", + }, + ], + }, { - "Offset": "180, 0, 0", - "Size": "50, 50", + "Offset": "0, 15, 0", + "Size": "916, 15", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "50, 50", + "Size": "916, 15", "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", - "Size": "14, 14", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "14, 0, 0", - "Size": "16, 10", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-20, 0, 0", - "Size": "20, 20", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-10, 20, 0", - "Size": "10, 4", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-26, -26, 0", - "Size": "26, 26", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "43, -10, 0", - "Size": "-19, 10", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, -43, 0", - "Size": "43, 43", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 14, 0", - "Size": "10, -7", + "Size": "916, 15", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 15", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, ], }, { - "Offset": "240, 0, 0", - "Size": "50, 50", + "Offset": "0, 29, 0", + "Size": "916, 14", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "50, 50", + "Size": "916, 14", "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", - "Size": "26, 26", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "26, 0, 0", - "Size": "24, 6", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-0, 0, 0", - "Size": "0, 6", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-0, 6, 0", - "Size": "0, 44", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-0, -0, 0", - "Size": "0, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "6, -0, 0", - "Size": "44, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, -0, 0", - "Size": "6, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 26, 0", - "Size": "6, 24", + "Size": "916, 16", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 16", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, ], }, + ], + }, +} +`; + +exports[`View Tests Visual Snapshot of Views with shadows 1`] = ` +{ + "Automation Tree": { + "AutomationId": "view-test-box-shadow", + "ControlType": 50026, + "LocalizedControlType": "group", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "view-test-box-shadow", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, { - "Offset": "290, 0, 0", + "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": { + "Comment": "view-test-box-shadow", + "Offset": "0, 0, 0", + "Size": "916, 90", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "20, 20, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -4971,73 +7143,73 @@ exports[`View Tests Views can have rounded borders 2`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "0, 6", + "Size": "15, 15", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "0, 0, 0", - "Size": "24, 6", + "Offset": "15, 0, 0", + "Size": "20, 5", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "-26, 0, 0", - "Size": "26, 26", + "Offset": "-15, 0, 0", + "Size": "15, 15", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "-6, 26, 0", - "Size": "6, 24", + "Offset": "-5, 15, 0", + "Size": "5, 20", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "-6, -0, 0", - "Size": "6, 0", + "Offset": "-15, -15, 0", + "Size": "15, 15", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "0, -0, 0", - "Size": "44, 0", + "Offset": "15, -5, 0", + "Size": "20, 5", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "0, -0, 0", - "Size": "0, 0", + "Offset": "0, -15, 0", + "Size": "15, 15", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "0, 6, 0", - "Size": "0, 44", + "Offset": "0, 15, 0", + "Size": "5, 20", "Visual Type": "SpriteVisual", }, ], @@ -5045,7 +7217,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` ], }, { - "Offset": "340, 0, 0", + "Offset": "100, 20, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -5057,73 +7229,73 @@ exports[`View Tests Views can have rounded borders 2`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "6, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "6, 0, 0", - "Size": "44, 0", + "Offset": "30, 0, 0", + "Size": "-10, 5", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "-0, 0, 0", - "Size": "0, 0", + "Offset": "-30, 0, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "-0, 0, 0", - "Size": "0, 44", + "Offset": "-5, 30, 0", + "Size": "5, -10", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "-0, -6, 0", - "Size": "0, 6", + "Offset": "-30, -30, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "26, -6, 0", - "Size": "24, 6", + "Offset": "30, -5, 0", + "Size": "-10, 5", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "0, -26, 0", - "Size": "26, 26", + "Offset": "0, -30, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "0, 0, 0", - "Size": "6, 24", + "Offset": "0, 30, 0", + "Size": "5, -10", "Visual Type": "SpriteVisual", }, ], @@ -5131,7 +7303,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` ], }, { - "Offset": "390, 0, 0", + "Offset": "180, 20, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -5143,237 +7315,236 @@ exports[`View Tests Views can have rounded borders 2`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "0, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "0, 0, 0", - "Size": "44, 0", + "Offset": "30, 0, 0", + "Size": "-10, 5", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "-6, 0, 0", - "Size": "6, 0", + "Offset": "-30, 0, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "-6, 0, 0", - "Size": "6, 24", + "Offset": "-5, 30, 0", + "Size": "5, -10", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "-26, -26, 0", - "Size": "26, 26", + "Offset": "-30, -30, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "0, -6, 0", - "Size": "24, 6", + "Offset": "30, -5, 0", + "Size": "-10, 5", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "0, -6, 0", - "Size": "0, 6", + "Offset": "0, -30, 0", + "Size": "30, 30", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", + "Color": "rgba(255, 0, 0, 255)", }, - "Offset": "0, 0, 0", - "Size": "0, 44", + "Offset": "0, 30, 0", + "Size": "5, -10", "Visual Type": "SpriteVisual", }, ], }, ], }, - ], - }, -} -`; - -exports[`View Tests Views can have shadows 1`] = ` -{ - "Automation Tree": { - "AutomationId": "shadow", - "ControlType": 50026, - "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", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - }, -} -`; - -exports[`View Tests Views can have tooltips 1`] = ` -{ - "Automation Tree": { - "AutomationId": "tool-tip", - "ControlType": 50026, - "LocalizedControlType": "group", - "Name": "Tooltip Example", - "__Children": [ - { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "This Parent View has tooltip "Parent View"", - "TextRangePattern.GetText": "This Parent View has tooltip "Parent View"", - }, { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "This view has tooltip "Child View 1"", - "TextRangePattern.GetText": "This view has tooltip "Child View 1"", + "Offset": "260, 20, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + }, + ], }, { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "This view has tooltip "Child View 2"", - "TextRangePattern.GetText": "This view has tooltip "Child View 2"", + "Offset": "260, 20, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], }, - ], - }, - "Component Tree": { - "Type": "Microsoft.ReactNative.Composition.ViewComponentView", - "_Props": { - "AccessibilityLabel": "Tooltip Example", - "TestId": "tool-tip", - }, - "__Children": [ { - "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", - "_Props": {}, + "Offset": "260, 70, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + }, + ], }, { - "Type": "Microsoft.ReactNative.Composition.ViewComponentView", - "_Props": {}, + "Offset": "340, 20, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", "__Children": [ { - "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", - "_Props": {}, + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, { - "Type": "Microsoft.ReactNative.Composition.ViewComponentView", - "_Props": {}, + "Offset": "420, 20, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", "__Children": [ { - "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", - "_Props": {}, + "Offset": "0, 0, 0", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 165, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, - ], - }, - "Visual Tree": { - "Comment": "tool-tip", - "Offset": "0, 0, 0", - "Size": "916, 43", - "Visual Type": "SpriteVisual", - "__Children": [ { - "Offset": "0, 0, 0", - "Size": "916, 16", + "Offset": "500, 20, 0", + "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 16", + "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(165, 42, 42, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, { - "Offset": "0, 15, 0", - "Size": "916, 15", + "Offset": "580, 20, 0", + "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 15", + "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 105, 180, 255)", + }, "Offset": "0, 0, 0", - "Size": "916, 15", + "Size": "0, 0", "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "916, 15", - "Visual Type": "SpriteVisual", - }, - ], }, ], }, ], }, { - "Offset": "0, 29, 0", - "Size": "916, 14", + "Offset": "660, 20, 0", + "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 14", + "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 105, 180, 255)", + }, "Offset": "0, 0, 0", - "Size": "916, 16", + "Size": "0, 0", "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "916, 16", - "Visual Type": "SpriteVisual", - }, - ], }, ], }, diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/BorderPrimitive.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/BorderPrimitive.cpp index fd25ebce122..8c0a7cf2fed 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/BorderPrimitive.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/BorderPrimitive.cpp @@ -9,18 +9,6 @@ namespace winrt::Microsoft::ReactNative::Composition::implementation { -// Ideally isColorMeaningful would be sufficient here. But it appears to detect platformColors as not meaningful -// https://github.com/microsoft/react-native-windows/issues/14006 -bool isColorMeaningful( - const facebook::react::SharedColor &color, - winrt::Microsoft::ReactNative::Composition::implementation::Theme *theme) noexcept { - if (!color) { - return false; - } - - return theme->Color(*color).A > 0; -} - // We don't want half pixel borders, or border radii - they lead to blurry borders // Also apply scale factor to the radii at this point void pixelRoundBorderRadii(facebook::react::BorderRadii &borderRadii, float scaleFactor) noexcept { @@ -40,22 +28,20 @@ void pixelRoundBorderRadii(facebook::react::BorderRadii &borderRadii, float scal }; } +float pixelRoundAndScaleBorderWidth(float width, float scaleFactor) noexcept { + if (width == 0) + return width = 0; + return std::max(1.f, std::round(width * scaleFactor)); +} + void scaleAndPixelRoundBorderWidths( facebook::react::LayoutMetrics const &layoutMetrics, facebook::react::BorderMetrics &borderMetrics, float scaleFactor) noexcept { - borderMetrics.borderWidths.left = (borderMetrics.borderWidths.left == 0) - ? 0.f - : std::max(1.f, std::round(borderMetrics.borderWidths.left * scaleFactor)); - borderMetrics.borderWidths.top = (borderMetrics.borderWidths.top == 0) - ? 0.f - : std::max(1.f, std::round(borderMetrics.borderWidths.top * scaleFactor)); - borderMetrics.borderWidths.right = (borderMetrics.borderWidths.right == 0) - ? 0.f - : std::max(1.f, std::round(borderMetrics.borderWidths.right * scaleFactor)); - borderMetrics.borderWidths.bottom = (borderMetrics.borderWidths.bottom == 0) - ? 0.f - : std::max(1.f, std::round(borderMetrics.borderWidths.bottom * scaleFactor)); + borderMetrics.borderWidths.left = pixelRoundAndScaleBorderWidth(borderMetrics.borderWidths.left, scaleFactor); + borderMetrics.borderWidths.top = pixelRoundAndScaleBorderWidth(borderMetrics.borderWidths.top, scaleFactor); + borderMetrics.borderWidths.right = pixelRoundAndScaleBorderWidth(borderMetrics.borderWidths.right, scaleFactor); + borderMetrics.borderWidths.bottom = pixelRoundAndScaleBorderWidth(borderMetrics.borderWidths.bottom, scaleFactor); // If we rounded both sides of the borderWidths up, we may have made the borderWidths larger than the total if (layoutMetrics.frame.size.width * scaleFactor < @@ -356,7 +342,7 @@ void SetBorderLayerPropertiesCommon( // Clear with transparency pRT->Clear(); - if (!isColorMeaningful(borderColor, theme)) { + if (!facebook::react::isColorMeaningful(borderColor)) { return; } @@ -724,7 +710,7 @@ winrt::com_ptr GetGeometryForRoundedBorder( BorderPrimitive::BorderPrimitive( winrt::Microsoft::ReactNative::Composition::implementation::ComponentView &outer, const winrt::Microsoft::ReactNative::Composition::Experimental::IVisual &rootVisual) - : m_outer(&outer), m_rootVisual(rootVisual) {} + : m_outer(&outer), m_rootVisual(rootVisual), m_ownsRootVisual(false) {} BorderPrimitive::BorderPrimitive(winrt::Microsoft::ReactNative::Composition::implementation::ComponentView &outer) : m_outer(&outer), m_rootVisual(outer.CompositionContext().CreateSpriteVisual()) {} @@ -740,9 +726,9 @@ bool BorderPrimitive::requiresBorder( auto borderStyle = borderMetrics.borderStyles.left; bool hasMeaningfulColor = - !borderMetrics.borderColors.isUniform() || !isColorMeaningful(borderMetrics.borderColors.left, theme); + !borderMetrics.borderColors.isUniform() || facebook::react::isColorMeaningful(borderMetrics.borderColors.left); bool hasMeaningfulWidth = !borderMetrics.borderWidths.isUniform() || (borderMetrics.borderWidths.left != 0); - if (!hasMeaningfulColor && !hasMeaningfulWidth) { + if (!hasMeaningfulColor || !hasMeaningfulWidth) { return false; } return true; @@ -802,8 +788,10 @@ BorderPrimitive::FindSpecialBorderLayers() const noexcept { nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr}; if (m_numBorderVisuals) { + auto borderInsertAtIndex = m_ownsRootVisual ? 0 : m_outer->borderInsertAtIndex(); + for (uint8_t i = 0; i < m_numBorderVisuals; i++) { - auto visual = m_rootVisual.GetAt(i); + auto visual = m_rootVisual.GetAt(i + borderInsertAtIndex); layers[i] = visual.as(); } } @@ -830,7 +818,7 @@ bool BorderPrimitive::TryUpdateSpecialBorderLayers( auto borderStyle = borderMetrics.borderStyles.left; bool hasMeaningfulColor = - !borderMetrics.borderColors.isUniform() || !isColorMeaningful(borderMetrics.borderColors.left, theme); + !borderMetrics.borderColors.isUniform() || !facebook::react::isColorMeaningful(borderMetrics.borderColors.left); bool hasMeaningfulWidth = !borderMetrics.borderWidths.isUniform() || (borderMetrics.borderWidths.left != 0); if (!hasMeaningfulColor && !hasMeaningfulWidth) { return false; @@ -838,9 +826,10 @@ bool BorderPrimitive::TryUpdateSpecialBorderLayers( // Create the special border layers if they don't exist yet if (!spBorderVisuals[0]) { + auto borderInsertAtIndex = m_ownsRootVisual ? 0 : m_outer->borderInsertAtIndex(); for (uint8_t i = 0; i < SpecialBorderLayerCount; i++) { auto visual = m_outer->CompositionContext().CreateSpriteVisual(); - m_rootVisual.InsertAt(visual, i); + m_rootVisual.InsertAt(visual, i + borderInsertAtIndex); spBorderVisuals[i] = std::move(visual); m_numBorderVisuals++; } diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/BorderPrimitive.h b/vnext/Microsoft.ReactNative/Fabric/Composition/BorderPrimitive.h index 6661ee45299..ff262ebe224 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/BorderPrimitive.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/BorderPrimitive.h @@ -14,6 +14,8 @@ namespace winrt::Microsoft::ReactNative::Composition::implementation { struct ComponentView; +float pixelRoundAndScaleBorderWidth(float width, float scaleFactor) noexcept; + // Controls adding/removing appropriate visuals to a parent to render a specific border without requiring struct BorderPrimitive { static constexpr size_t SpecialBorderLayerCount = 8; @@ -74,7 +76,8 @@ struct BorderPrimitive { uint8_t m_numBorderVisuals{0}; winrt::Microsoft::ReactNative::Composition::implementation::ComponentView *m_outer; winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_rootVisual{nullptr}; - bool m_needsUpdate{true}; + bool m_needsUpdate : 1 {true}; + bool m_ownsRootVisual : 1 {false}; }; } // 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 dcaa2ac4ffc..35338ca1f4c 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp @@ -40,9 +40,11 @@ constexpr float FOCUS_VISUAL_RADIUS = 3.0f; // m_outerVisual // | -// ----- m_visual <-- Background / clip - Can be a custom visual depending on Component type +// ----- m_visual - Can be a custom visual depending on Component type // | -// ----- Border Visuals x N (BorderPrimitive attached to m_visual) +// ----- m_backgroundVisual <-- Background / clip (ComponentViewFeatures::Background) +// ----- Border Visuals x N (BorderPrimitive attached to m_visual) (ComponentViewFeatures::NativeBorder) +// ----- Outline Visuals x N(BorderPrimitive) (ComponentViewFeatures::NativeBorder) // ----- (default: directly in m_visual after border visuals) // ----- m_childrenContainer (created on demand when overflow:hidden, children moved here) // ------Focus Visual Container (created when hosting focus visuals) @@ -81,18 +83,16 @@ facebook::react::Props::Shared ComponentView::props() noexcept { } void ComponentView::onThemeChanged() noexcept { - if ((m_flags & ComponentViewFeatures::Background) == ComponentViewFeatures::Background) { - if (viewProps()->backgroundColor) { - Visual().as().Brush(theme()->Brush(*viewProps()->backgroundColor)); - } else { - Visual().as().Brush(nullptr); - } - } + if (m_backgroundVisual) + m_backgroundVisual.Brush(theme()->Brush(*viewProps()->backgroundColor)); if (m_borderPrimitive) { m_borderPrimitive->onThemeChanged( m_layoutMetrics, BorderPrimitive::resolveAndAlignBorderMetrics(m_layoutMetrics, *viewProps())); } + if (m_outlinePrimitive) { + m_outlinePrimitive->onThemeChanged(outlineLayoutMetrics(), outlineBorderMetrics()); + } if (m_componentHostingFocusVisual) { if (m_componentHostingFocusVisual->m_focusPrimitive->m_focusInnerPrimitive) { auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/); @@ -156,10 +156,18 @@ void ComponentView::updateProps( if ((m_flags & ComponentViewFeatures::Background) == ComponentViewFeatures::Background) { if (oldViewProps.backgroundColor != newViewProps.backgroundColor) { - if (newViewProps.backgroundColor) { - Visual().as().Brush(theme()->Brush(*newViewProps.backgroundColor)); + if (facebook::react::isColorMeaningful(newViewProps.backgroundColor)) { + if (!m_backgroundVisual) { + m_backgroundVisual = m_compContext.CreateSpriteVisual(); + m_backgroundVisual.RelativeSizeWithOffset({0, 0}, {1.0f, 1.0f}); + Visual().InsertAt(m_backgroundVisual, 0); + } + m_backgroundVisual.Brush(theme()->Brush(*newViewProps.backgroundColor)); + updateClippingPath(m_layoutMetrics, *viewProps()); } else { - Visual().as().Brush(nullptr); + if (m_backgroundVisual) { + m_backgroundVisual.Brush(nullptr); + } } } } @@ -168,6 +176,16 @@ void ComponentView::updateProps( m_borderPrimitive->updateProps(oldViewProps, newViewProps); } + if (m_outlinePrimitive) { + if (oldViewProps.outlineOffset != newViewProps.outlineOffset || + oldViewProps.outlineWidth != newViewProps.outlineWidth || + oldViewProps.borderRadii != newViewProps.borderRadii || + oldViewProps.outlineColor != newViewProps.outlineColor || + oldViewProps.outlineStyle != newViewProps.outlineStyle) { + m_outlinePrimitive->markNeedsUpdate(); + } + } + if (m_componentHostingFocusVisual) { if (!newViewProps.enableFocusRing) { m_componentHostingFocusVisual->hostFocusVisual(false, get_strong()); @@ -202,8 +220,9 @@ void ComponentView::updateProps( void ComponentView::updateLayoutMetrics( facebook::react::LayoutMetrics const &layoutMetrics, facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept { + updateClippingPath(layoutMetrics, *viewProps()); + if ((m_flags & ComponentViewFeatures::NativeBorder) == ComponentViewFeatures::NativeBorder) { - updateClippingPath(layoutMetrics, *viewProps()); OuterVisual().Size( {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor, layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor}); @@ -220,6 +239,9 @@ void ComponentView::updateLayoutMetrics( if (m_borderPrimitive) { m_borderPrimitive->markNeedsUpdate(); } + if (m_outlinePrimitive) { + m_outlinePrimitive->markNeedsUpdate(); + } if (m_componentHostingFocusVisual) { m_componentHostingFocusVisual->updateFocusLayoutMetrics(); @@ -303,6 +325,23 @@ void ComponentView::FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentView if (m_borderPrimitive) { m_borderPrimitive->finalize(m_layoutMetrics, borderMetrics); } + + auto outlineMetrics = outlineBorderMetrics(); + if (!m_outlinePrimitive && BorderPrimitive::requiresBorder(outlineMetrics, theme())) { + m_outlinePrimitive = std::make_shared(*this); + Visual().InsertAt( + m_outlinePrimitive->RootVisual(), + (m_backgroundVisual ? 1 : 0) + (m_borderPrimitive ? m_borderPrimitive->numberOfVisuals() : 0)); + } + + if (m_outlinePrimitive) { + auto offset = pixelRoundAndScaleBorderWidth(viewProps()->outlineWidth, m_layoutMetrics.pointScaleFactor) + + std::round(viewProps()->outlineOffset * m_layoutMetrics.pointScaleFactor); + m_outlinePrimitive->RootVisual().Offset({-offset, -offset, 0.0f}); + m_outlinePrimitive->RootVisual().RelativeSizeWithOffset({offset * 2, offset * 2}, {1.0f, 1.0f}); + + m_outlinePrimitive->finalize(outlineLayoutMetrics(), outlineMetrics); + } } if (m_componentHostingFocusVisual) { @@ -583,6 +622,67 @@ facebook::react::LayoutMetrics ComponentView::focusLayoutMetrics(bool inner) con return layoutMetrics; } +facebook::react::LayoutMetrics ComponentView::outlineLayoutMetrics() const noexcept { + auto &props = *viewProps(); + auto offset = (pixelRoundAndScaleBorderWidth(viewProps()->outlineWidth, m_layoutMetrics.pointScaleFactor) + + std::round(viewProps()->outlineOffset * m_layoutMetrics.pointScaleFactor)) / + m_layoutMetrics.pointScaleFactor; + facebook::react::LayoutMetrics layoutMetrics = m_layoutMetrics; + layoutMetrics.frame.origin.x -= offset; + layoutMetrics.frame.origin.y -= offset; + layoutMetrics.frame.size.height += offset * 2; + layoutMetrics.frame.size.width += offset * 2; + return layoutMetrics; +} + +facebook::react::BorderMetrics ComponentView::outlineBorderMetrics() const noexcept { + auto &props = *viewProps(); + + facebook::react::BorderMetrics metrics = BorderPrimitive::resolveAndAlignBorderMetrics(m_layoutMetrics, props); + metrics.borderColors.bottom = metrics.borderColors.left = metrics.borderColors.right = metrics.borderColors.top = + props.outlineColor; + + auto offset = pixelRoundAndScaleBorderWidth(viewProps()->outlineWidth, m_layoutMetrics.pointScaleFactor) + + std::round(viewProps()->outlineOffset * m_layoutMetrics.pointScaleFactor); + + if (metrics.borderRadii.bottomLeft.horizontal) + metrics.borderRadii.bottomLeft.horizontal = std::max(0.0f, metrics.borderRadii.bottomLeft.horizontal + offset); + if (metrics.borderRadii.bottomLeft.vertical) + metrics.borderRadii.bottomLeft.vertical = std::max(0.0f, metrics.borderRadii.bottomLeft.vertical + offset); + if (metrics.borderRadii.bottomRight.horizontal) + metrics.borderRadii.bottomRight.horizontal = std::max(0.0f, metrics.borderRadii.bottomRight.horizontal + offset); + if (metrics.borderRadii.bottomRight.vertical) + metrics.borderRadii.bottomRight.vertical = std::max(0.0f, metrics.borderRadii.bottomRight.vertical + offset); + if (metrics.borderRadii.topLeft.horizontal) + metrics.borderRadii.topLeft.horizontal = std::max(0.0f, metrics.borderRadii.topLeft.horizontal + offset); + if (metrics.borderRadii.topLeft.vertical) + metrics.borderRadii.topLeft.vertical = std::max(0.0f, metrics.borderRadii.topLeft.vertical + offset); + if (metrics.borderRadii.topRight.horizontal) + metrics.borderRadii.topRight.horizontal = std::max(0.0f, metrics.borderRadii.topRight.horizontal + offset); + if (metrics.borderRadii.topRight.vertical) + metrics.borderRadii.topRight.vertical = std::max(0.0f, metrics.borderRadii.topRight.vertical + offset); + + static_assert( + facebook::react::BorderStyle::Solid == + static_cast(facebook::react::OutlineStyle::Solid)); + static_assert( + facebook::react::BorderStyle::Dotted == + static_cast(facebook::react::OutlineStyle::Dotted)); + static_assert( + facebook::react::BorderStyle::Dashed == + static_cast(facebook::react::OutlineStyle::Dashed)); + assert( + props.outlineStyle == facebook::react::OutlineStyle::Solid || + props.outlineStyle == facebook::react::OutlineStyle::Dotted || + props.outlineStyle == facebook::react::OutlineStyle::Dashed); + metrics.borderStyles.bottom = metrics.borderStyles.left = metrics.borderStyles.right = metrics.borderStyles.top = + static_cast(props.outlineStyle); + + metrics.borderWidths.bottom = metrics.borderWidths.left = metrics.borderWidths.right = metrics.borderWidths.top = + pixelRoundAndScaleBorderWidth(viewProps()->outlineWidth, m_layoutMetrics.pointScaleFactor); + return metrics; +} + facebook::react::BorderMetrics ComponentView::focusBorderMetrics( bool inner, const facebook::react::LayoutMetrics &layoutMetrics) const noexcept { @@ -656,7 +756,7 @@ void ComponentView::hostFocusVisual(bool show, winrt::com_ptr vie assert( view.get() == this); // When not using lifted comp, focus visuals should always host within their own component - OuterVisual().InsertAt(m_focusPrimitive->m_focusVisual, 1); + OuterVisual().InsertAt(m_focusPrimitive->m_focusVisual, (m_backgroundVisual ? 2 : 1)); } } @@ -900,9 +1000,23 @@ void ComponentView::Toggle() noexcept { // no-op } +// This offset ensures that the m_borderPrimitive inserts its layers above the background +int32_t ComponentView::borderInsertAtIndex() const noexcept { + return m_backgroundVisual ? 1 : 0; +} + +winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ComponentView::VisualToApplyBackgroundClipTo() + const noexcept { + return m_backgroundVisual; +} + void ComponentView::updateClippingPath( facebook::react::LayoutMetrics const &layoutMetrics, const facebook::react::ViewProps &viewProps) noexcept { + auto clipTarget = VisualToApplyBackgroundClipTo(); + if (!clipTarget) + return; + auto borderMetrics = BorderPrimitive::resolveAndAlignBorderMetrics(layoutMetrics, viewProps); bool hasRoundedCorners = borderMetrics.borderRadii.topLeft.horizontal != 0 || @@ -921,10 +1035,10 @@ void ComponentView::updateClippingPath( winrt::com_ptr pathGeometry = BorderPrimitive::GenerateRoundedRectPathGeometry( m_compContext, borderMetrics.borderRadii, {0, 0, 0, 0}, {0, 0, viewWidth, viewHeight}); - Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath( + clipTarget.as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath( pathGeometry.get()); } else { - Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(nullptr); + clipTarget.as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(nullptr); } } @@ -936,6 +1050,9 @@ void ComponentView::indexOffsetForBorder(uint32_t &index) const noexcept { if (m_borderPrimitive) { index += m_borderPrimitive->numberOfVisuals(); } + if (m_outlinePrimitive) { + index += 1; + } } void ComponentView::OnRenderingDeviceLost() noexcept {} @@ -1086,7 +1203,7 @@ void ViewComponentView::ensureVisual() noexcept { } else { m_visual = createVisual(); } - OuterVisual().InsertAt(m_visual, 0); + OuterVisual().InsertAt(m_visual, m_backgroundVisual ? 1 : 0); } } @@ -1384,7 +1501,7 @@ void ViewComponentView::updateChildrenClippingPath( } // Insert m_childrenContainer after border visuals in m_visual - Visual().InsertAt(m_childrenContainer, borderCount); + Visual().InsertAt(m_childrenContainer, (m_backgroundVisual ? 1 : 0) + borderCount); // Use relative sizing so container automatically tracks parent's size m_childrenContainer.RelativeSizeWithOffset({0, 0}, {1, 1}); diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h index 242627ff558..b7fc0d4cb4c 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h @@ -111,6 +111,9 @@ struct ComponentView : public ComponentViewT< bool getAcccessiblityIsReadOnly() noexcept override; ToggleState getToggleState() noexcept override; void Toggle() noexcept override; + + int32_t borderInsertAtIndex() const noexcept; + virtual winrt::Microsoft::ReactNative::implementation::ClipState getClipState() noexcept; virtual std::pair cursor() const noexcept; @@ -130,6 +133,8 @@ struct ComponentView : public ComponentViewT< void ThemeChanged(winrt::event_token const &token) noexcept; protected: + virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual VisualToApplyBackgroundClipTo() + const noexcept; bool anyHitTestHelper( facebook::react::Tag &targetTag, facebook::react::Point &ptContent, @@ -141,6 +146,7 @@ struct ComponentView : public ComponentViewT< winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext m_compContext; comp::CompositionPropertySet m_centerPropSet{nullptr}; facebook::react::SharedViewEventEmitter m_eventEmitter; + winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_backgroundVisual{nullptr}; private: void updateFocusLayoutMetrics() noexcept; @@ -157,6 +163,9 @@ struct ComponentView : public ComponentViewT< facebook::react::BorderMetrics focusBorderMetrics(bool inner, const facebook::react::LayoutMetrics &layoutMetrics) const noexcept; + facebook::react::LayoutMetrics outlineLayoutMetrics() const noexcept; + facebook::react::BorderMetrics outlineBorderMetrics() const noexcept; + virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual visualToHostFocus() noexcept; virtual winrt::com_ptr focusVisualRoot(const facebook::react::Rect &focusRect) noexcept; @@ -168,6 +177,7 @@ struct ComponentView : public ComponentViewT< winrt::com_ptr m_componentHostingFocusVisual; // The component that we are showing our focus visuals within std::shared_ptr m_borderPrimitive; + std::shared_ptr m_outlinePrimitive; std::unique_ptr m_focusPrimitive{nullptr}; winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_outerVisual{nullptr}; winrt::event> m_themeChangedEvent; diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp index bc3e5c8c6cf..1b21d3cf2d3 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp @@ -237,6 +237,11 @@ void ImageComponentView::onThemeChanged() noexcept { Super::onThemeChanged(); } +winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ImageComponentView::VisualToApplyBackgroundClipTo() + const noexcept { + return Visual(); +} + void ImageComponentView::ensureDrawingSurface() noexcept { assert(m_reactContext.UIDispatcher().HasThreadAccess()); diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.h index e4c60e247a0..a63f8bc1443 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.h @@ -53,6 +53,8 @@ struct ImageComponentView : ImageComponentViewT 0; } From d2df7f956eccb5d7d20ac7e89e39e29bbfeede2b Mon Sep 17 00:00:00 2001 From: Gordon MacMaster <31481849+gmacmaster@users.noreply.github.com> Date: Tue, 5 May 2026 19:31:00 -0400 Subject: [PATCH 4/8] fix: cancel active touches in onPointerCaptureLost to prevent zombie touch state (#16086) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: cancel active touches in onPointerCaptureLost to prevent zombie touch state (#2) * fix: cancel active touches in onPointerCaptureLost to prevent zombie touch state When the OS reclaims pointer capture mid-gesture (system back swipe, Alt+Tab, another window coming foreground), onPointerCaptureLost fired but never removed entries from m_activeTouches or dispatched a touchcancel to React Native JS. The result was a zombie active touch — RN JS believed a finger was still down, leaving Pressables and TouchableOpacities stuck in a pressed state until the next touch happened to reuse the same pointer ID and trigger the stale-touch cleanup in onPointerPressed. Fix: for each captured pointer in the lost-capture set, copy and erase the m_activeTouches entry before calling DispatchSynthesizedTouchCancelForActiveTouch, mirroring the pattern already used in onPointerPressed and onPointerReleased. The erase-before-dispatch ordering is required because DispatchSynthesizedTouchCancelForActiveTouch iterates m_activeTouches internally. * match the m_pointerCapturingComponentTag != -1 check already used in CapturePointer * Create react-native-windows-f47bdf2a-0807-483f-b63e-3c2c086bee92.json --- ...ows-f47bdf2a-0807-483f-b63e-3c2c086bee92.json | 7 +++++++ .../Composition/CompositionEventHandler.cpp | 16 +++++++++++++++- 2 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 change/react-native-windows-f47bdf2a-0807-483f-b63e-3c2c086bee92.json diff --git a/change/react-native-windows-f47bdf2a-0807-483f-b63e-3c2c086bee92.json b/change/react-native-windows-f47bdf2a-0807-483f-b63e-3c2c086bee92.json new file mode 100644 index 00000000000..541f74718ee --- /dev/null +++ b/change/react-native-windows-f47bdf2a-0807-483f-b63e-3c2c086bee92.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix: cancel active touches in onPointerCaptureLost to prevent zombie touch state", + "packageName": "react-native-windows", + "email": "gordomacmaster@gmail.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp index e481fd9a923..a5fac96e19d 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp @@ -1098,12 +1098,26 @@ void CompositionEventHandler::onPointerCaptureLost( if (SurfaceId() == -1) return; - if (m_pointerCapturingComponentTag) { + if (m_pointerCapturingComponentTag != -1) { // copy array to avoid iterator being invalidated during deletion std::unordered_set capturedPointers = m_capturedPointers; for (auto pointerId : capturedPointers) { releasePointerCapture(pointerId, m_pointerCapturingComponentTag); + + // Cancel any active touch for this pointer so React Native is notified that + // the touch ended. Without this, m_activeTouches retains a zombie entry and + // RN JS is never told the touch is gone — leaving Pressables stuck in a + // pressed state after a system-interrupted gesture (e.g. system back swipe, + // Alt+Tab, another window coming foreground). + auto activeTouch = m_activeTouches.find(pointerId); + if (activeTouch != m_activeTouches.end()) { + ActiveTouch cancelledTouchCopy = std::move(activeTouch->second); + m_activeTouches.erase(activeTouch); + if (cancelledTouchCopy.eventEmitter) { + DispatchSynthesizedTouchCancelForActiveTouch(cancelledTouchCopy, pointerPoint, keyModifiers); + } + } } m_pointerCapturingComponentTag = -1; From b198bc84a549177993ad73f467a478c8e05512e5 Mon Sep 17 00:00:00 2001 From: Andrew Coates <30809111+acoates-ms@users.noreply.github.com> Date: Wed, 6 May 2026 21:45:49 -0700 Subject: [PATCH 5/8] Add ability to make TurboModules eager init (#16093) * Add ability to register modules as eager init * Change files --- ...-3f20e903-f2ed-45d8-b852-7408a50c36f2.json | 7 +++++++ .../ModuleRegistration.cpp | 10 +++++++-- .../ModuleRegistration.h | 21 +++++++++++++++---- .../Microsoft.ReactNative.Cxx/NativeModules.h | 5 +++++ .../IReactPackageBuilder.idl | 5 +++++ .../ReactHost/ReactInstanceWin.cpp | 9 ++++---- .../ReactPackageBuilder.cpp | 7 +++++++ .../ReactPackageBuilder.h | 1 + .../TurboModulesProvider.cpp | 15 +++++-------- .../TurboModulesProvider.h | 2 ++ 10 files changed, 61 insertions(+), 21 deletions(-) create mode 100644 change/react-native-windows-3f20e903-f2ed-45d8-b852-7408a50c36f2.json diff --git a/change/react-native-windows-3f20e903-f2ed-45d8-b852-7408a50c36f2.json b/change/react-native-windows-3f20e903-f2ed-45d8-b852-7408a50c36f2.json new file mode 100644 index 00000000000..d7a7cb5eee1 --- /dev/null +++ b/change/react-native-windows-3f20e903-f2ed-45d8-b852-7408a50c36f2.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Add ability to register modules as eager init", + "packageName": "react-native-windows", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/vnext/Microsoft.ReactNative.Cxx/ModuleRegistration.cpp b/vnext/Microsoft.ReactNative.Cxx/ModuleRegistration.cpp index 485c38b9c2a..0b895e0749f 100644 --- a/vnext/Microsoft.ReactNative.Cxx/ModuleRegistration.cpp +++ b/vnext/Microsoft.ReactNative.Cxx/ModuleRegistration.cpp @@ -18,7 +18,10 @@ ModuleRegistration::ModuleRegistration(wchar_t const *moduleName) noexcept : m_m void AddAttributedModules(IReactPackageBuilder const &packageBuilder, bool useTurboModules) noexcept { for (auto const *reg = ModuleRegistration::Head(); reg != nullptr; reg = reg->Next()) { if (useTurboModules || reg->ShouldRegisterAsTurboModule()) - packageBuilder.AddTurboModule(reg->ModuleName(), reg->MakeModuleProvider()); + if (reg->IsEagerInit()) + packageBuilder.AddEagerInitTurboModule(reg->ModuleName(), reg->MakeModuleProvider()); + else + packageBuilder.AddTurboModule(reg->ModuleName(), reg->MakeModuleProvider()); else packageBuilder.AddModule(reg->ModuleName(), reg->MakeModuleProvider()); } @@ -31,7 +34,10 @@ bool TryAddAttributedModule( for (auto const *reg = ModuleRegistration::Head(); reg != nullptr; reg = reg->Next()) { if (moduleName == reg->ModuleName()) { if (useTurboModule || reg->ShouldRegisterAsTurboModule()) { - packageBuilder.AddTurboModule(moduleName, reg->MakeModuleProvider()); + if (reg->IsEagerInit()) + packageBuilder.AddEagerInitTurboModule(moduleName, reg->MakeModuleProvider()); + else + packageBuilder.AddTurboModule(moduleName, reg->MakeModuleProvider()); } else { packageBuilder.AddModule(moduleName, reg->MakeModuleProvider()); } diff --git a/vnext/Microsoft.ReactNative.Cxx/ModuleRegistration.h b/vnext/Microsoft.ReactNative.Cxx/ModuleRegistration.h index 16745d8888d..669a3c02135 100644 --- a/vnext/Microsoft.ReactNative.Cxx/ModuleRegistration.h +++ b/vnext/Microsoft.ReactNative.Cxx/ModuleRegistration.h @@ -30,10 +30,11 @@ template struct IsReactTurboModule : std::bool_constant(nullptr))> {}; #define INTERNAL_REACT_MODULE_REGISTRATION_AND_PROVIDER( \ - moduleStruct, moduleName, eventEmitterName, isReactTurboModule) \ + moduleStruct, moduleName, eventEmitterName, isReactTurboModule, isEagerInit) \ struct moduleStruct; \ \ constexpr bool ReactIsReactTurboModuleImpl(moduleStruct *) noexcept { return isReactTurboModule; } \ + constexpr bool ReactIsEagerInitTurboModuleImpl(moduleStruct *) noexcept { return isEagerInit; } \ \ template \ struct moduleStruct##_ModuleRegistration final : winrt::Microsoft::ReactNative::ModuleRegistration { \ @@ -44,6 +45,7 @@ struct IsReactTurboModule : std::bool_constantProperties())) { - registerTurboModule( - L"FabricUIManagerBinding", - winrt::Microsoft::ReactNative::MakeModuleProvider<::Microsoft::ReactNative::FabricUIManager>()); - } + registerTurboModule( + L"FabricUIManagerBinding", + winrt::Microsoft::ReactNative::MakeModuleProvider<::Microsoft::ReactNative::FabricUIManager>()); + turboModulesProvider->AddEagerInit("FabricUIManagerBinding"); #endif #if !defined(CORE_ABI) && !defined(USE_FABRIC) diff --git a/vnext/Microsoft.ReactNative/ReactPackageBuilder.cpp b/vnext/Microsoft.ReactNative/ReactPackageBuilder.cpp index 68ae9158ab2..b8e1206f5f5 100644 --- a/vnext/Microsoft.ReactNative/ReactPackageBuilder.cpp +++ b/vnext/Microsoft.ReactNative/ReactPackageBuilder.cpp @@ -59,6 +59,13 @@ void ReactPackageBuilder::AddTurboModule( m_turboModulesProvider->AddModuleProvider(moduleName, moduleProvider, true); } +void ReactPackageBuilder::AddEagerInitTurboModule( + hstring const &moduleName, + ReactModuleProvider const &moduleProvider) noexcept { + m_turboModulesProvider->AddModuleProvider(moduleName, moduleProvider, true); + m_turboModulesProvider->AddEagerInit(winrt::to_string(moduleName)); +} + #ifdef USE_FABRIC void ReactPackageBuilder::AddViewComponent( winrt::hstring componentName, diff --git a/vnext/Microsoft.ReactNative/ReactPackageBuilder.h b/vnext/Microsoft.ReactNative/ReactPackageBuilder.h index cb69db9d31d..c12e952ab14 100644 --- a/vnext/Microsoft.ReactNative/ReactPackageBuilder.h +++ b/vnext/Microsoft.ReactNative/ReactPackageBuilder.h @@ -43,6 +43,7 @@ struct ReactPackageBuilder : winrt::implements< void AddViewManager(hstring const &viewManagerName, ReactViewManagerProvider const &viewManagerProvider) noexcept; #endif void AddTurboModule(hstring const &moduleName, ReactModuleProvider const &moduleProvider) noexcept; + void AddEagerInitTurboModule(hstring const &moduleName, ReactModuleProvider const &moduleProvider) noexcept; #ifdef USE_FABRIC // IReactPackageBuilderFabric diff --git a/vnext/Microsoft.ReactNative/TurboModulesProvider.cpp b/vnext/Microsoft.ReactNative/TurboModulesProvider.cpp index 4958d057187..28991974022 100644 --- a/vnext/Microsoft.ReactNative/TurboModulesProvider.cpp +++ b/vnext/Microsoft.ReactNative/TurboModulesProvider.cpp @@ -494,16 +494,11 @@ std::shared_ptr TurboModulesProvider::getModule( } std::vector TurboModulesProvider::getEagerInitModuleNames() noexcept { - std::vector eagerModules; - auto it = m_moduleProviders.find("UIManager"); - if (it != m_moduleProviders.end()) { - eagerModules.push_back("UIManager"); - } - it = m_moduleProviders.find("FabricUIManagerBinding"); - if (it != m_moduleProviders.end()) { - eagerModules.push_back("FabricUIManagerBinding"); - } - return eagerModules; + return m_eagerInitModuleNames; +} + +void TurboModulesProvider::AddEagerInit(std::string moduleName) noexcept { + m_eagerInitModuleNames.push_back(moduleName); } void TurboModulesProvider::SetReactContext(const IReactContext &reactContext) noexcept { diff --git a/vnext/Microsoft.ReactNative/TurboModulesProvider.h b/vnext/Microsoft.ReactNative/TurboModulesProvider.h index 99436dd82c4..ebaf6f9cf45 100644 --- a/vnext/Microsoft.ReactNative/TurboModulesProvider.h +++ b/vnext/Microsoft.ReactNative/TurboModulesProvider.h @@ -26,6 +26,7 @@ class TurboModulesProvider final : public facebook::react::TurboModuleRegistry { winrt::hstring const &moduleName, ReactModuleProvider const &moduleProvider, bool overwriteExisting) noexcept; + void AddEagerInit(std::string moduleName) noexcept; std::shared_ptr const &LongLivedObjectCollection() noexcept; private: @@ -33,6 +34,7 @@ class TurboModulesProvider final : public facebook::react::TurboModuleRegistry { std::shared_ptr m_longLivedObjectCollection{ std::make_shared()}; std::unordered_map m_moduleProviders; + std::vector m_eagerInitModuleNames; IReactContext m_reactContext; }; From ded6b17aa9bc831dbda918b1807de65a1b8e9a8d Mon Sep 17 00:00:00 2001 From: Andrew Coates <30809111+acoates-ms@users.noreply.github.com> Date: Wed, 6 May 2026 21:52:11 -0700 Subject: [PATCH 6/8] change files --- ...t-native-windows-202bc094-b9c7-41dc-9154-c7e8236c58c6.json | 4 ++-- ...t-native-windows-2c040593-f202-44fc-a55c-5d523c493705.json | 2 +- ...t-native-windows-3f20e903-f2ed-45d8-b852-7408a50c36f2.json | 4 ++-- ...t-native-windows-636c3119-029d-4fee-9c71-1116858423a5.json | 4 ++-- ...t-native-windows-8a0bc3a0-b03a-43c2-9b0d-9125688cb98d.json | 4 ++-- ...t-native-windows-e83b01b1-0133-47da-8a8a-c88a6c16398b.json | 4 ++-- ...t-native-windows-f47bdf2a-0807-483f-b63e-3c2c086bee92.json | 2 +- 7 files changed, 12 insertions(+), 12 deletions(-) diff --git a/change/react-native-windows-202bc094-b9c7-41dc-9154-c7e8236c58c6.json b/change/react-native-windows-202bc094-b9c7-41dc-9154-c7e8236c58c6.json index 19b09733082..d06fc7e9a78 100644 --- a/change/react-native-windows-202bc094-b9c7-41dc-9154-c7e8236c58c6.json +++ b/change/react-native-windows-202bc094-b9c7-41dc-9154-c7e8236c58c6.json @@ -1,7 +1,7 @@ { - "type": "prerelease", + "type": "patch", "comment": "Implement outline properties on view", "packageName": "react-native-windows", "email": "30809111+acoates-ms@users.noreply.github.com", "dependentChangeType": "patch" -} +} \ No newline at end of file diff --git a/change/react-native-windows-2c040593-f202-44fc-a55c-5d523c493705.json b/change/react-native-windows-2c040593-f202-44fc-a55c-5d523c493705.json index 5aaecb26a45..363eea2e1a2 100644 --- a/change/react-native-windows-2c040593-f202-44fc-a55c-5d523c493705.json +++ b/change/react-native-windows-2c040593-f202-44fc-a55c-5d523c493705.json @@ -1,5 +1,5 @@ { - "type": "prerelease", + "type": "patch", "comment": "fix: map Windows touch pointer IDs to small JS-safe identifiers in CompositionEventHandler", "packageName": "react-native-windows", "email": "gordomacmaster@gmail.com", diff --git a/change/react-native-windows-3f20e903-f2ed-45d8-b852-7408a50c36f2.json b/change/react-native-windows-3f20e903-f2ed-45d8-b852-7408a50c36f2.json index d7a7cb5eee1..7ed5e5fd91a 100644 --- a/change/react-native-windows-3f20e903-f2ed-45d8-b852-7408a50c36f2.json +++ b/change/react-native-windows-3f20e903-f2ed-45d8-b852-7408a50c36f2.json @@ -1,7 +1,7 @@ { - "type": "prerelease", + "type": "patch", "comment": "Add ability to register modules as eager init", "packageName": "react-native-windows", "email": "30809111+acoates-ms@users.noreply.github.com", "dependentChangeType": "patch" -} +} \ No newline at end of file diff --git a/change/react-native-windows-636c3119-029d-4fee-9c71-1116858423a5.json b/change/react-native-windows-636c3119-029d-4fee-9c71-1116858423a5.json index f698a8f575c..10c0df33107 100644 --- a/change/react-native-windows-636c3119-029d-4fee-9c71-1116858423a5.json +++ b/change/react-native-windows-636c3119-029d-4fee-9c71-1116858423a5.json @@ -1,7 +1,7 @@ { - "type": "prerelease", + "type": "patch", "comment": "Minor text rendering perf improvement", "packageName": "react-native-windows", "email": "30809111+acoates-ms@users.noreply.github.com", "dependentChangeType": "patch" -} +} \ No newline at end of file diff --git a/change/react-native-windows-8a0bc3a0-b03a-43c2-9b0d-9125688cb98d.json b/change/react-native-windows-8a0bc3a0-b03a-43c2-9b0d-9125688cb98d.json index 78cd8511932..9ef2aca62f9 100644 --- a/change/react-native-windows-8a0bc3a0-b03a-43c2-9b0d-9125688cb98d.json +++ b/change/react-native-windows-8a0bc3a0-b03a-43c2-9b0d-9125688cb98d.json @@ -1,7 +1,7 @@ { - "type": "prerelease", + "type": "patch", "comment": "Update WinAppSdk to 1.8", "packageName": "react-native-windows", "email": "30809111+acoates-ms@users.noreply.github.com", "dependentChangeType": "patch" -} +} \ No newline at end of file diff --git a/change/react-native-windows-e83b01b1-0133-47da-8a8a-c88a6c16398b.json b/change/react-native-windows-e83b01b1-0133-47da-8a8a-c88a6c16398b.json index 2126bd891be..fd65174653b 100644 --- a/change/react-native-windows-e83b01b1-0133-47da-8a8a-c88a6c16398b.json +++ b/change/react-native-windows-e83b01b1-0133-47da-8a8a-c88a6c16398b.json @@ -1,7 +1,7 @@ { - "type": "prerelease", + "type": "patch", "comment": "Re-introduce Desktop integration tests", "packageName": "react-native-windows", "email": "julio.rocha@microsoft.com", "dependentChangeType": "patch" -} +} \ No newline at end of file diff --git a/change/react-native-windows-f47bdf2a-0807-483f-b63e-3c2c086bee92.json b/change/react-native-windows-f47bdf2a-0807-483f-b63e-3c2c086bee92.json index 541f74718ee..dd885a9e034 100644 --- a/change/react-native-windows-f47bdf2a-0807-483f-b63e-3c2c086bee92.json +++ b/change/react-native-windows-f47bdf2a-0807-483f-b63e-3c2c086bee92.json @@ -1,5 +1,5 @@ { - "type": "prerelease", + "type": "patch", "comment": "fix: cancel active touches in onPointerCaptureLost to prevent zombie touch state", "packageName": "react-native-windows", "email": "gordomacmaster@gmail.com", From 83efa2c170c15a8ea9cd3b3bde64e5fa1af52fdf Mon Sep 17 00:00:00 2001 From: Andrew Coates <30809111+acoates-ms@users.noreply.github.com> Date: Wed, 6 May 2026 21:56:33 -0700 Subject: [PATCH 7/8] Fix for non-fabric --- .../ReactHost/ReactInstanceWin.cpp | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/vnext/Microsoft.ReactNative/ReactHost/ReactInstanceWin.cpp b/vnext/Microsoft.ReactNative/ReactHost/ReactInstanceWin.cpp index a39ebeff2b9..9ba08175cd4 100644 --- a/vnext/Microsoft.ReactNative/ReactHost/ReactInstanceWin.cpp +++ b/vnext/Microsoft.ReactNative/ReactHost/ReactInstanceWin.cpp @@ -345,10 +345,12 @@ void ReactInstanceWin::LoadModules( }; #ifdef USE_FABRIC - registerTurboModule( - L"FabricUIManagerBinding", - winrt::Microsoft::ReactNative::MakeModuleProvider<::Microsoft::ReactNative::FabricUIManager>()); - turboModulesProvider->AddEagerInit("FabricUIManagerBinding"); + if (Microsoft::ReactNative::IsFabricEnabled(m_reactContext->Properties())) { + registerTurboModule( + L"FabricUIManagerBinding", + winrt::Microsoft::ReactNative::MakeModuleProvider<::Microsoft::ReactNative::FabricUIManager>()); + turboModulesProvider->AddEagerInit("FabricUIManagerBinding"); + } #endif #if !defined(CORE_ABI) && !defined(USE_FABRIC) @@ -356,6 +358,7 @@ void ReactInstanceWin::LoadModules( L"UIManager", // TODO: Use MakeTurboModuleProvider after it satisfies ReactNativeSpecs::UIManagerSpec winrt::Microsoft::ReactNative::MakeModuleProvider<::Microsoft::ReactNative::UIManager>()); + turboModulesProvider->AddEagerInit("UIManager"); #endif #ifndef CORE_ABI From 57bd80ceee1ce9cc608b5f428529a69b0ace97d1 Mon Sep 17 00:00:00 2001 From: Andrew Coates <30809111+acoates-ms@users.noreply.github.com> Date: Thu, 7 May 2026 06:49:50 -0700 Subject: [PATCH 8/8] update snapshots --- .../ViewComponentTest.test.ts.snap | 3725 ++++------------- 1 file changed, 893 insertions(+), 2832 deletions(-) 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 0f0f05d0b3c..65f1cd353dd 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 @@ -1,267 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`View Tests View box sizing 1`] = ` -{ - "Automation Tree": { - "AutomationId": "view-test-box-sizing", - "ControlType": 50026, - "LocalizedControlType": "group", - "__Children": [ - { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "Content box 50x25", - "TextRangePattern.GetText": "Content box 50x25", - }, - { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "Border box 50x25", - "TextRangePattern.GetText": "Border box 50x25", - }, - ], - }, - "Component Tree": { - "Type": "Microsoft.ReactNative.Composition.ViewComponentView", - "_Props": { - "TestId": "view-test-box-sizing", - }, - "__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.ViewComponentView", - "_Props": {}, - }, - { - "Type": "Microsoft.ReactNative.Composition.ViewComponentView", - "_Props": {}, - }, - ], - }, - "Visual Tree": { - "Comment": "view-test-box-sizing", - "Offset": "0, 0, 0", - "Size": "916, 147", - "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": "10, 29, 0", - "Size": "70, 45", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "70, 45", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", - }, - "Offset": "0, 0, 0", - "Size": "0, 0", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, 0, 0", - "Size": "5, 5", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "5, 0, 0", - "Size": "-10, 5", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-5, 0, 0", - "Size": "5, 5", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-5, 5, 0", - "Size": "5, -10", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-5, -5, 0", - "Size": "5, 5", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "5, -5, 0", - "Size": "-10, 5", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, -5, 0", - "Size": "5, 5", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, 5, 0", - "Size": "5, -10", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, - { - "Offset": "20, 39, 0", - "Size": "50, 25", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "50, 25", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, - "Offset": "0, 0, 0", - "Size": "0, 0", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, - { - "Offset": "0, 83, 0", - "Size": "916, 19", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "916, 19", - "Visual Type": "SpriteVisual", - }, - ], - }, - { - "Offset": "10, 112, 0", - "Size": "50, 25", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "50, 25", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", - }, - "Offset": "0, 0, 0", - "Size": "0, 0", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, 0, 0", - "Size": "5, 5", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "5, 0, 0", - "Size": "-10, 5", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-5, 0, 0", - "Size": "5, 5", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-5, 5, 0", - "Size": "5, -10", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-5, -5, 0", - "Size": "5, 5", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "5, -5, 0", - "Size": "-10, 5", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, -5, 0", - "Size": "5, 5", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, 5, 0", - "Size": "5, -10", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, - { - "Offset": "20, 122, 0", - "Size": "30, 5", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "30, 5", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, - "Offset": "0, 0, 0", - "Size": "0, 0", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, - ], - }, -} -`; - exports[`View Tests Views can have a hitslop region 1`] = ` { "Automation Tree": { @@ -3919,37 +3657,50 @@ exports[`View Tests Views can have offscreen alpha compositing 1`] = ` } `; -exports[`View Tests Views can have outlines 1`] = ` +exports[`View Tests Views can have overflow 1`] = ` { "Automation Tree": { - "AutomationId": "view-test-outline", + "AutomationId": "view-test-overflow", "ControlType": 50026, "LocalizedControlType": "group", - }, - "Component Tree": { - "Type": "Microsoft.ReactNative.Composition.ViewComponentView", - "_Props": { - "TestId": "view-test-outline", - }, + "Name": "Rounded Borders Example", "__Children": [ { - "Type": "Microsoft.ReactNative.Composition.ViewComponentView", - "_Props": {}, + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "undefined", + "TextRangePattern.GetText": "undefined", }, { - "Type": "Microsoft.ReactNative.Composition.ViewComponentView", - "_Props": {}, - }, + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "hidden", + "TextRangePattern.GetText": "hidden", + }, { - "Type": "Microsoft.ReactNative.Composition.ViewComponentView", - "_Props": {}, + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "visible", + "TextRangePattern.GetText": "visible", }, + ], + }, + "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.ViewComponentView", + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", "_Props": {}, }, { @@ -3959,282 +3710,175 @@ exports[`View Tests Views can have outlines 1`] = ` { "Type": "Microsoft.ReactNative.Composition.ViewComponentView", "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], }, { "Type": "Microsoft.ReactNative.Composition.ViewComponentView", "_Props": {}, }, { - "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", "_Props": {}, }, ], }, "Visual Tree": { - "Comment": "view-test-outline", + "Comment": "view-test-overflow", "Offset": "0, 0, 0", - "Size": "896, 70", + "Size": "916, 20", "Visual Type": "SpriteVisual", "__Children": [ { - "Offset": "10, 10, 0", - "Size": "50, 50", + "Offset": "0, 0, 0", + "Size": "95, 12", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "50, 50", + "Size": "95, 12", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "8, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "8, 0, 0", - "Size": "-16, 8", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": "-8, 0, 0", - "Size": "8, 8", + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": "-8, 8, 0", - "Size": "8, -16", + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": "-8, -8, 0", - "Size": "8, 8", + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": "8, -8, 0", - "Size": "-16, 8", + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": "0, -8, 0", - "Size": "8, 8", + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": "0, 8, 0", - "Size": "8, -16", + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Offset": "-8, -8, 0", - "Size": "16, 16", + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "8, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "8, 0, 0", - "Size": "-16, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-8, 0, 0", - "Size": "8, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-8, 8, 0", - "Size": "8, -16", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-8, -8, 0", - "Size": "8, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "8, -8, 0", - "Size": "-16, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, -8, 0", - "Size": "8, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, 8, 0", - "Size": "8, -16", - "Visual Type": "SpriteVisual", - }, - ], }, ], }, ], }, { - "Offset": "80, 10, 0", - "Size": "50, 50", + "Offset": "1, 1, 0", + "Size": "200, 20", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "50, 50", + "Size": "200, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "111, 0, 0", + "Size": "95, 12", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "95, 12", "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Offset": "0, 0, 0", - "Size": "28, 28", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, - "Offset": "28, 0, 0", - "Size": "-6, 8", + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, - "Offset": "-28, 0, 0", - "Size": "28, 28", + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, - "Offset": "-8, 28, 0", - "Size": "8, -6", + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, - "Offset": "-28, -28, 0", - "Size": "28, 28", + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, - "Offset": "28, -8, 0", - "Size": "-6, 8", + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, - "Offset": "0, -28, 0", - "Size": "28, 28", + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, - "Offset": "0, 28, 0", - "Size": "8, -6", + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, + ], + }, + ], + }, + { + "Offset": "112, 1, 0", + "Size": "93, 10", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "93, 10", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": "-8, -8, 0", - "Size": "16, 16", + "Offset": "0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 0, 128, 255)", - }, "Offset": "0, 0, 0", - "Size": "36, 36", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 0, 128, 255)", - }, - "Offset": "36, 0, 0", - "Size": "-6, 8", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 0, 128, 255)", - }, - "Offset": "-36, 0, 0", - "Size": "36, 36", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 0, 128, 255)", - }, - "Offset": "-8, 36, 0", - "Size": "8, -6", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 0, 128, 255)", - }, - "Offset": "-36, -36, 0", - "Size": "36, 36", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 0, 128, 255)", - }, - "Offset": "36, -8, 0", - "Size": "-6, 8", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 0, 128, 255)", - }, - "Offset": "0, -36, 0", - "Size": "36, 36", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 0, 128, 255)", - }, - "Offset": "0, 36, 0", - "Size": "8, -6", + "Size": "200, 20", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "200, 20", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -4243,172 +3887,133 @@ exports[`View Tests Views can have outlines 1`] = ` ], }, { - "Offset": "150, 10, 0", - "Size": "50, 50", + "Offset": "222, 0, 0", + "Size": "95, 12", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "50, 50", + "Size": "95, 12", "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Offset": "0, 0, 0", - "Size": "28, 28", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, - "Offset": "28, 0, 0", - "Size": "14, 8", + "Offset": "1, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, - "Offset": "-8, 0, 0", - "Size": "8, 8", + "Offset": "-1, 0, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, - "Offset": "-8, 8, 0", - "Size": "8, 14", + "Offset": "-1, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, - "Offset": "-28, -28, 0", - "Size": "28, 28", + "Offset": "-1, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, - "Offset": "8, -8, 0", - "Size": "14, 8", + "Offset": "1, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, - "Offset": "0, -8, 0", - "Size": "8, 8", + "Offset": "0, -1, 0", + "Size": "1, 1", "Visual Type": "SpriteVisual", }, { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, - "Offset": "0, 28, 0", - "Size": "8, 14", + "Offset": "0, 1, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, - { - "Offset": "-8, -8, 0", - "Size": "16, 16", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 0, 128, 255)", - }, - "Offset": "0, 0, 0", - "Size": "36, 36", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 0, 128, 255)", - }, - "Offset": "36, 0, 0", - "Size": "22, 8", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 0, 128, 255)", - }, - "Offset": "-8, 0, 0", - "Size": "8, 8", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 0, 128, 255)", - }, - "Offset": "-8, 8, 0", - "Size": "8, 22", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 0, 128, 255)", - }, - "Offset": "-36, -36, 0", - "Size": "36, 36", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 0, 128, 255)", - }, - "Offset": "8, -8, 0", - "Size": "22, 8", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 0, 128, 255)", - }, - "Offset": "0, -8, 0", - "Size": "8, 8", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 0, 128, 255)", - }, - "Offset": "0, 36, 0", - "Size": "8, 22", - "Visual Type": "SpriteVisual", - }, - ], - }, ], }, ], }, { - "Offset": "225, 10, 0", + "Offset": "223, 1, 0", + "Size": "200, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "200, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, +} +`; + +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 Tree": { + "Comment": "view-test-rounded-borders", + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -4418,98 +4023,83 @@ exports[`View Tests Views can have outlines 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, "Offset": "0, 0, 0", - "Size": "8, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "8, 0, 0", - "Size": "-16, 8", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { - "Offset": "-8, 0, 0", - "Size": "8, 8", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "26, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": "-8, 8, 0", - "Size": "8, -16", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-26, 0, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { - "Offset": "-8, -8, 0", - "Size": "8, 8", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-1, 26, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { - "Offset": "8, -8, 0", - "Size": "-16, 8", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-26, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { - "Offset": "0, -8, 0", - "Size": "8, 8", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "26, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { - "Offset": "0, 8, 0", - "Size": "8, -16", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { - "Offset": "-13, -13, 0", - "Size": "26, 26", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 26, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "8, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "8, 0, 0", - "Size": "-16, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-8, 0, 0", - "Size": "8, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-8, 8, 0", - "Size": "8, -16", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-8, -8, 0", - "Size": "8, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "8, -8, 0", - "Size": "-16, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, -8, 0", - "Size": "8, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, 8, 0", - "Size": "8, -16", - "Visual Type": "SpriteVisual", - }, - ], }, ], }, ], }, { - "Offset": "295, 10, 0", + "Offset": "60, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -4521,128 +4111,81 @@ exports[`View Tests Views can have outlines 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "28, 28", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "28, 0, 0", - "Size": "-6, 8", + "Offset": "35, 0, 0", + "Size": "-20, 10", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-28, 0, 0", - "Size": "28, 28", + "Offset": "-35, 0, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-8, 28, 0", - "Size": "8, -6", + "Offset": "-10, 35, 0", + "Size": "10, -20", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-28, -28, 0", - "Size": "28, 28", + "Offset": "-35, -35, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "28, -8, 0", - "Size": "-6, 8", + "Offset": "35, -10, 0", + "Size": "-20, 10", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -28, 0", - "Size": "28, 28", + "Offset": "0, -35, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 28, 0", - "Size": "8, -6", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-8, -8, 0", - "Size": "16, 16", + "Offset": "0, 35, 0", + "Size": "10, -20", "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "36, 36", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "36, 0, 0", - "Size": "-72, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-36, 0, 0", - "Size": "36, 36", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-8, 36, 0", - "Size": "8, -72", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-36, -36, 0", - "Size": "36, 36", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "36, -8, 0", - "Size": "-72, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, -36, 0", - "Size": "36, 36", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, 36, 0", - "Size": "8, -72", - "Visual Type": "SpriteVisual", - }, - ], }, ], }, ], }, { - "Offset": "365, 10, 0", + "Offset": "120, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -4654,293 +4197,167 @@ exports[`View Tests Views can have outlines 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "28, 28", + "Size": "5, 5", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "28, 0, 0", - "Size": "14, 8", + "Offset": "5, 0, 0", + "Size": "34, 1", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-8, 0, 0", - "Size": "8, 8", + "Offset": "-11, 0, 0", + "Size": "11, 11", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-8, 8, 0", - "Size": "8, 14", + "Offset": "-1, 11, 0", + "Size": "1, 22", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-28, -28, 0", - "Size": "28, 28", + "Offset": "-17, -17, 0", + "Size": "17, 17", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "8, -8, 0", - "Size": "14, 8", + "Offset": "34, -1, 0", + "Size": "-1, 1", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -8, 0", - "Size": "8, 8", + "Offset": "0, -34, 0", + "Size": "34, 34", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 28, 0", - "Size": "8, 14", + "Offset": "0, 5, 0", + "Size": "1, 11", "Visual Type": "SpriteVisual", }, - { - "Offset": "-8, -8, 0", - "Size": "16, 16", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "36, 36", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "36, 0, 0", - "Size": "-44, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-8, 0, 0", - "Size": "8, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-8, 8, 0", - "Size": "8, -44", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-36, -36, 0", - "Size": "36, 36", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "8, -8, 0", - "Size": "-44, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, -8, 0", - "Size": "8, 8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, 36, 0", - "Size": "8, -44", - "Visual Type": "SpriteVisual", - }, - ], - }, ], }, ], }, { - "Offset": "435, 10, 0", - "Size": "100, 50", + "Offset": "180, 0, 0", + "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "100, 50", + "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "58, 33", + "Size": "14, 14", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "58, 0, 0", - "Size": "-16, 8", + "Offset": "14, 0, 0", + "Size": "16, 10", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-58, 0, 0", - "Size": "58, 33", + "Offset": "-20, 0, 0", + "Size": "20, 20", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-8, 33, 0", - "Size": "8, -16", + "Offset": "-10, 20, 0", + "Size": "10, 4", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-58, -33, 0", - "Size": "58, 33", + "Offset": "-26, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "58, -8, 0", - "Size": "-16, 8", + "Offset": "43, -10, 0", + "Size": "-19, 10", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -33, 0", - "Size": "58, 33", + "Offset": "0, -43, 0", + "Size": "43, 43", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 33, 0", - "Size": "8, -16", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-8, -8, 0", - "Size": "16, 16", + "Offset": "0, 14, 0", + "Size": "10, -7", "Visual Type": "SpriteVisual", - "__Children": [ - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 165, 0, 255)", - }, - "Offset": "0, 0, 0", - "Size": "66, 41", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 165, 0, 255)", - }, - "Offset": "66, 0, 0", - "Size": "-16, 8", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 165, 0, 255)", - }, - "Offset": "-66, 0, 0", - "Size": "66, 41", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 165, 0, 255)", - }, - "Offset": "-8, 41, 0", - "Size": "8, -16", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 165, 0, 255)", - }, - "Offset": "-66, -41, 0", - "Size": "66, 41", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 165, 0, 255)", - }, - "Offset": "66, -8, 0", - "Size": "-16, 8", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 165, 0, 255)", - }, - "Offset": "0, -41, 0", - "Size": "66, 41", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 165, 0, 255)", - }, - "Offset": "0, 41, 0", - "Size": "8, -16", - "Visual Type": "SpriteVisual", - }, - ], }, ], }, ], }, { - "Offset": "555, 10, 0", + "Offset": "240, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -4950,98 +4367,83 @@ exports[`View Tests Views can have outlines 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, "Offset": "0, 0, 0", - "Size": "12, 12", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "12, 0, 0", - "Size": "-24, 12", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { - "Offset": "-12, 0, 0", - "Size": "12, 12", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "26, 0, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { - "Offset": "-12, 12, 0", - "Size": "12, -24", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-0, 0, 0", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { - "Offset": "-12, -12, 0", - "Size": "12, 12", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-0, 6, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, { - "Offset": "12, -12, 0", - "Size": "-24, 12", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-0, -0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { - "Offset": "0, -12, 0", - "Size": "12, 12", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "6, -0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { - "Offset": "0, 12, 0", - "Size": "12, -24", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, -0, 0", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { - "Offset": "4, 4, 0", - "Size": "-8, -8", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 26, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "4, 4", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "4, 0, 0", - "Size": "-8, 4", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-4, 0, 0", - "Size": "4, 4", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-4, 4, 0", - "Size": "4, -8", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-4, -4, 0", - "Size": "4, 4", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "4, -4, 0", - "Size": "-8, 4", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, -4, 0", - "Size": "4, 4", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, 4, 0", - "Size": "4, -8", - "Visual Type": "SpriteVisual", - }, - ], }, ], }, ], }, { - "Offset": "625, 10, 0", + "Offset": "290, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -5051,1244 +4453,75 @@ exports[`View Tests Views can have outlines 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Offset": "-9, -9, 0", - "Size": "18, 18", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "9, 9", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "9, 0, 0", - "Size": "-18, 9", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-9, 0, 0", - "Size": "9, 9", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-9, 9, 0", - "Size": "9, -18", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "-9, -9, 0", - "Size": "9, 9", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "9, -9, 0", - "Size": "-18, 9", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, -9, 0", - "Size": "9, 9", - "Visual Type": "SpriteVisual", - }, - { - "Offset": "0, 9, 0", - "Size": "9, -18", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, - ], - }, - ], - }, -} -`; - -exports[`View Tests Views can have overflow 1`] = ` -{ - "Automation Tree": { - "AutomationId": "view-test-overflow", - "ControlType": 50026, - "LocalizedControlType": "group", - "Name": "Rounded Borders Example", - "__Children": [ - { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "undefined", - "TextRangePattern.GetText": "undefined", - }, - { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "hidden", - "TextRangePattern.GetText": "hidden", - }, - { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "visible", - "TextRangePattern.GetText": "visible", - }, - ], - }, - "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": { - "Comment": "view-test-overflow", - "Offset": "0, 0, 0", - "Size": "916, 20", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "95, 12", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "95, 12", - "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", - }, - ], - }, - ], - }, - { - "Offset": "1, 1, 0", - "Size": "200, 20", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "200, 20", - "Visual Type": "SpriteVisual", - }, - ], - }, - { - "Offset": "111, 0, 0", - "Size": "95, 12", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "95, 12", - "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", - }, - ], - }, - ], - }, - { - "Offset": "112, 1, 0", - "Size": "93, 10", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "93, 10", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "0, 0", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "200, 20", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "200, 20", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, - ], - }, - ], - }, - { - "Offset": "222, 0, 0", - "Size": "95, 12", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "95, 12", - "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", - }, - ], - }, - ], - }, - { - "Offset": "223, 1, 0", - "Size": "200, 20", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "200, 20", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, -} -`; - -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 Tree": { - "Comment": "view-test-rounded-borders", - "Offset": "0, 0, 0", - "Size": "916, 50", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - "__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", - "Size": "26, 26", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "26, 0, 0", - "Size": "-2, 1", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-26, 0, 0", - "Size": "26, 26", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-1, 26, 0", - "Size": "1, -2", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-26, -26, 0", - "Size": "26, 26", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "26, -1, 0", - "Size": "-2, 1", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, -26, 0", - "Size": "26, 26", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 26, 0", - "Size": "1, -2", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, - { - "Offset": "60, 0, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - "__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", - "Size": "35, 35", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "35, 0, 0", - "Size": "-20, 10", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-35, 0, 0", - "Size": "35, 35", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-10, 35, 0", - "Size": "10, -20", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-35, -35, 0", - "Size": "35, 35", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "35, -10, 0", - "Size": "-20, 10", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, -35, 0", - "Size": "35, 35", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 35, 0", - "Size": "10, -20", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, - { - "Offset": "120, 0, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - "__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", - "Size": "5, 5", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "5, 0, 0", - "Size": "34, 1", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-11, 0, 0", - "Size": "11, 11", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-1, 11, 0", - "Size": "1, 22", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-17, -17, 0", - "Size": "17, 17", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "34, -1, 0", - "Size": "-1, 1", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, -34, 0", - "Size": "34, 34", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 5, 0", - "Size": "1, 11", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, - { - "Offset": "180, 0, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - "__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", - "Size": "14, 14", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "14, 0, 0", - "Size": "16, 10", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-20, 0, 0", - "Size": "20, 20", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-10, 20, 0", - "Size": "10, 4", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-26, -26, 0", - "Size": "26, 26", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "43, -10, 0", - "Size": "-19, 10", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, -43, 0", - "Size": "43, 43", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 14, 0", - "Size": "10, -7", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, - { - "Offset": "240, 0, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - "__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", - "Size": "26, 26", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "26, 0, 0", - "Size": "24, 6", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-0, 0, 0", - "Size": "0, 6", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-0, 6, 0", - "Size": "0, 44", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-0, -0, 0", - "Size": "0, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "6, -0, 0", - "Size": "44, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, -0, 0", - "Size": "6, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 26, 0", - "Size": "6, 24", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, - { - "Offset": "290, 0, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - "__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", - "Size": "0, 6", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 0, 0", - "Size": "24, 6", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-26, 0, 0", - "Size": "26, 26", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-6, 26, 0", - "Size": "6, 24", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-6, -0, 0", - "Size": "6, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, -0, 0", - "Size": "44, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, -0, 0", - "Size": "0, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 6, 0", - "Size": "0, 44", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, - { - "Offset": "340, 0, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - "__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", - "Size": "6, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "6, 0, 0", - "Size": "44, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-0, 0, 0", - "Size": "0, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-0, 0, 0", - "Size": "0, 44", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-0, -6, 0", - "Size": "0, 6", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "26, -6, 0", - "Size": "24, 6", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, -26, 0", - "Size": "26, 26", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 0, 0", - "Size": "6, 24", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, - { - "Offset": "390, 0, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - "__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", - "Size": "0, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 0, 0", - "Size": "44, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-6, 0, 0", - "Size": "6, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-6, 0, 0", - "Size": "6, 24", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-26, -26, 0", - "Size": "26, 26", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, -6, 0", - "Size": "24, 6", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, -6, 0", - "Size": "0, 6", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 0, 0", - "Size": "0, 44", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, - ], - }, -} -`; - -exports[`View Tests Views can have rounded borders 2`] = ` -{ - "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 Tree": { - "Comment": "view-test-rounded-borders", - "Offset": "0, 0, 0", - "Size": "916, 50", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - "__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", - "Size": "26, 26", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "26, 0, 0", - "Size": "-2, 1", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-26, 0, 0", - "Size": "26, 26", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-1, 26, 0", - "Size": "1, -2", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-26, -26, 0", - "Size": "26, 26", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "26, -1, 0", - "Size": "-2, 1", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, -26, 0", - "Size": "26, 26", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 26, 0", - "Size": "1, -2", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 6", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "24, 6", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-26, 0, 0", + "Size": "26, 26", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-6, 26, 0", + "Size": "6, 24", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-6, -0, 0", + "Size": "6, 0", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, -0, 0", + "Size": "44, 0", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, -0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 6, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, ], @@ -6296,7 +4529,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` ], }, { - "Offset": "60, 0, 0", + "Offset": "340, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -6311,16 +4544,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "35, 35", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "35, 0, 0", - "Size": "-20, 10", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { @@ -6328,8 +4552,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-35, 0, 0", - "Size": "35, 35", + "Offset": "6, 0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { @@ -6337,8 +4561,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-10, 35, 0", - "Size": "10, -20", + "Offset": "-0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { @@ -6346,8 +4570,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-35, -35, 0", - "Size": "35, 35", + "Offset": "-0, 0, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, { @@ -6355,8 +4579,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "35, -10, 0", - "Size": "-20, 10", + "Offset": "-0, -6, 0", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { @@ -6364,8 +4588,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -35, 0", - "Size": "35, 35", + "Offset": "26, -6, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { @@ -6373,94 +4597,17 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 35, 0", - "Size": "10, -20", + "Offset": "0, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, - ], - }, - ], - }, - { - "Offset": "120, 0, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - "__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", - "Size": "5, 5", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "5, 0, 0", - "Size": "34, 1", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-11, 0, 0", - "Size": "11, 11", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-1, 11, 0", - "Size": "1, 22", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-17, -17, 0", - "Size": "17, 17", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "34, -1, 0", - "Size": "-1, 1", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, -34, 0", - "Size": "34, 34", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 5, 0", - "Size": "1, 11", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, ], @@ -6468,7 +4615,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` ], }, { - "Offset": "180, 0, 0", + "Offset": "390, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -6483,7 +4630,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "14, 14", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { @@ -6491,8 +4638,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "14, 0, 0", - "Size": "16, 10", + "Offset": "0, 0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { @@ -6500,8 +4647,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-20, 0, 0", - "Size": "20, 20", + "Offset": "-6, 0, 0", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { @@ -6509,8 +4656,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-10, 20, 0", - "Size": "10, 4", + "Offset": "-6, 0, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, { @@ -6527,57 +4674,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "43, -10, 0", - "Size": "-19, 10", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, -43, 0", - "Size": "43, 43", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 14, 0", - "Size": "10, -7", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], - }, - { - "Offset": "240, 0, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - "__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", - "Size": "26, 26", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "26, 0, 0", + "Offset": "0, -6, 0", "Size": "24, 6", "Visual Type": "SpriteVisual", }, @@ -6586,7 +4683,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-0, 0, 0", + "Offset": "0, -6, 0", "Size": "0, 6", "Visual Type": "SpriteVisual", }, @@ -6595,52 +4692,76 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-0, 6, 0", + "Offset": "0, 0, 0", "Size": "0, 44", "Visual Type": "SpriteVisual", }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "-0, -0, 0", - "Size": "0, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "6, -0, 0", - "Size": "44, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, -0, 0", - "Size": "6, 0", - "Visual Type": "SpriteVisual", - }, - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, - "Offset": "0, 26, 0", - "Size": "6, 24", - "Visual Type": "SpriteVisual", - }, ], }, ], }, + ], + }, +} +`; + +exports[`View Tests Views can have rounded borders 2`] = ` +{ + "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": {}, + }, { - "Offset": "290, 0, 0", + "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": { + "Comment": "view-test-rounded-borders", + "Offset": "0, 0, 0", + "Size": "916, 50", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -6655,7 +4776,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "0, 6", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -6663,8 +4784,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 0, 0", - "Size": "24, 6", + "Offset": "26, 0, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { @@ -6681,8 +4802,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-6, 26, 0", - "Size": "6, 24", + "Offset": "-1, 26, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, { @@ -6690,8 +4811,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-6, -0, 0", - "Size": "6, 0", + "Offset": "-26, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -6699,8 +4820,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -0, 0", - "Size": "44, 0", + "Offset": "26, -1, 0", + "Size": "-2, 1", "Visual Type": "SpriteVisual", }, { @@ -6708,8 +4829,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -0, 0", - "Size": "0, 0", + "Offset": "0, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { @@ -6717,8 +4838,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 6, 0", - "Size": "0, 44", + "Offset": "0, 26, 0", + "Size": "1, -2", "Visual Type": "SpriteVisual", }, ], @@ -6726,7 +4847,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` ], }, { - "Offset": "340, 0, 0", + "Offset": "60, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -6741,7 +4862,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "6, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { @@ -6749,8 +4870,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "6, 0, 0", - "Size": "44, 0", + "Offset": "35, 0, 0", + "Size": "-20, 10", "Visual Type": "SpriteVisual", }, { @@ -6758,8 +4879,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-0, 0, 0", - "Size": "0, 0", + "Offset": "-35, 0, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { @@ -6767,8 +4888,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-0, 0, 0", - "Size": "0, 44", + "Offset": "-10, 35, 0", + "Size": "10, -20", "Visual Type": "SpriteVisual", }, { @@ -6776,8 +4897,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-0, -6, 0", - "Size": "0, 6", + "Offset": "-35, -35, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { @@ -6785,8 +4906,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "26, -6, 0", - "Size": "24, 6", + "Offset": "35, -10, 0", + "Size": "-20, 10", "Visual Type": "SpriteVisual", }, { @@ -6794,8 +4915,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -26, 0", - "Size": "26, 26", + "Offset": "0, -35, 0", + "Size": "35, 35", "Visual Type": "SpriteVisual", }, { @@ -6803,8 +4924,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 0, 0", - "Size": "6, 24", + "Offset": "0, 35, 0", + "Size": "10, -20", "Visual Type": "SpriteVisual", }, ], @@ -6812,7 +4933,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` ], }, { - "Offset": "390, 0, 0", + "Offset": "120, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -6827,7 +4948,7 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "0, 0", + "Size": "5, 5", "Visual Type": "SpriteVisual", }, { @@ -6835,8 +4956,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 0, 0", - "Size": "44, 0", + "Offset": "5, 0, 0", + "Size": "34, 1", "Visual Type": "SpriteVisual", }, { @@ -6844,8 +4965,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-6, 0, 0", - "Size": "6, 0", + "Offset": "-11, 0, 0", + "Size": "11, 11", "Visual Type": "SpriteVisual", }, { @@ -6853,8 +4974,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-6, 0, 0", - "Size": "6, 24", + "Offset": "-1, 11, 0", + "Size": "1, 22", "Visual Type": "SpriteVisual", }, { @@ -6862,8 +4983,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-26, -26, 0", - "Size": "26, 26", + "Offset": "-17, -17, 0", + "Size": "17, 17", "Visual Type": "SpriteVisual", }, { @@ -6871,8 +4992,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -6, 0", - "Size": "24, 6", + "Offset": "34, -1, 0", + "Size": "-1, 1", "Visual Type": "SpriteVisual", }, { @@ -6880,8 +5001,8 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -6, 0", - "Size": "0, 6", + "Offset": "0, -34, 0", + "Size": "34, 34", "Visual Type": "SpriteVisual", }, { @@ -6889,249 +5010,188 @@ exports[`View Tests Views can have rounded borders 2`] = ` "Brush Type": "ColorBrush", "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 0, 0", - "Size": "0, 44", + "Offset": "0, 5, 0", + "Size": "1, 11", "Visual Type": "SpriteVisual", }, ], }, ], }, - ], - }, -} -`; - -exports[`View Tests Views can have shadows 1`] = ` -{ - "Automation Tree": { - "AutomationId": "shadow", - "ControlType": 50026, - "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", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - }, -} -`; - -exports[`View Tests Views can have tooltips 1`] = ` -{ - "Automation Tree": { - "AutomationId": "tool-tip", - "ControlType": 50026, - "LocalizedControlType": "group", - "Name": "Tooltip Example", - "__Children": [ - { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "This Parent View has tooltip "Parent View"", - "TextRangePattern.GetText": "This Parent View has tooltip "Parent View"", - }, - { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "This view has tooltip "Child View 1"", - "TextRangePattern.GetText": "This view has tooltip "Child View 1"", - }, - { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "This view has tooltip "Child View 2"", - "TextRangePattern.GetText": "This view has tooltip "Child View 2"", - }, - ], - }, - "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.ViewComponentView", - "_Props": {}, - "__Children": [ - { - "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", - "_Props": {}, - }, - ], - }, - { - "Type": "Microsoft.ReactNative.Composition.ViewComponentView", - "_Props": {}, - "__Children": [ - { - "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", - "_Props": {}, - }, - ], - }, - ], - }, - "Visual Tree": { - "Comment": "tool-tip", - "Offset": "0, 0, 0", - "Size": "916, 43", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "916, 16", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "916, 16", - "Visual Type": "SpriteVisual", - }, - ], - }, { - "Offset": "0, 15, 0", - "Size": "916, 15", + "Offset": "180, 0, 0", + "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 15", + "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ { - "Offset": "0, 0, 0", - "Size": "916, 15", + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "14, 14", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "14, 0, 0", + "Size": "16, 10", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-20, 0, 0", + "Size": "20, 20", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-10, 20, 0", + "Size": "10, 4", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-26, -26, 0", + "Size": "26, 26", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "43, -10, 0", + "Size": "-19, 10", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, -43, 0", + "Size": "43, 43", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 14, 0", + "Size": "10, -7", "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "916, 15", - "Visual Type": "SpriteVisual", - }, - ], }, ], }, ], }, { - "Offset": "0, 29, 0", - "Size": "916, 14", + "Offset": "240, 0, 0", + "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 14", + "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, "Offset": "0, 0, 0", - "Size": "916, 16", + "Size": "26, 26", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "26, 0, 0", + "Size": "24, 6", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-0, 0, 0", + "Size": "0, 6", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-0, 6, 0", + "Size": "0, 44", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "-0, -0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "6, -0, 0", + "Size": "44, 0", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, -0, 0", + "Size": "6, 0", + "Visual Type": "SpriteVisual", + }, + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 26, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "916, 16", - "Visual Type": "SpriteVisual", - }, - ], }, ], }, ], }, - ], - }, -} -`; - -exports[`View Tests Visual Snapshot of Views with shadows 1`] = ` -{ - "Automation Tree": { - "AutomationId": "view-test-box-shadow", - "ControlType": 50026, - "LocalizedControlType": "group", - }, - "Component Tree": { - "Type": "Microsoft.ReactNative.Composition.ViewComponentView", - "_Props": { - "TestId": "view-test-box-shadow", - }, - "__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": { - "Comment": "view-test-box-shadow", - "Offset": "0, 0, 0", - "Size": "916, 90", - "Visual Type": "SpriteVisual", - "__Children": [ { - "Offset": "20, 20, 0", + "Offset": "290, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -7143,73 +5203,73 @@ exports[`View Tests Visual Snapshot of Views with shadows 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "15, 15", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "15, 0, 0", - "Size": "20, 5", + "Offset": "0, 0, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-15, 0, 0", - "Size": "15, 15", + "Offset": "-26, 0, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-5, 15, 0", - "Size": "5, 20", + "Offset": "-6, 26, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-15, -15, 0", - "Size": "15, 15", + "Offset": "-6, -0, 0", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "15, -5, 0", - "Size": "20, 5", + "Offset": "0, -0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -15, 0", - "Size": "15, 15", + "Offset": "0, -0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 15, 0", - "Size": "5, 20", + "Offset": "0, 6, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, ], @@ -7217,7 +5277,7 @@ exports[`View Tests Visual Snapshot of Views with shadows 1`] = ` ], }, { - "Offset": "100, 20, 0", + "Offset": "340, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -7229,73 +5289,73 @@ exports[`View Tests Visual Snapshot of Views with shadows 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "30, 30", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "30, 0, 0", - "Size": "-10, 5", + "Offset": "6, 0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-30, 0, 0", - "Size": "30, 30", + "Offset": "-0, 0, 0", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-5, 30, 0", - "Size": "5, -10", + "Offset": "-0, 0, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-30, -30, 0", - "Size": "30, 30", + "Offset": "-0, -6, 0", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "30, -5, 0", - "Size": "-10, 5", + "Offset": "26, -6, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -30, 0", - "Size": "30, 30", + "Offset": "0, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 30, 0", - "Size": "5, -10", + "Offset": "0, 0, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, ], @@ -7303,7 +5363,7 @@ exports[`View Tests Visual Snapshot of Views with shadows 1`] = ` ], }, { - "Offset": "180, 20, 0", + "Offset": "390, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", "__Children": [ @@ -7315,236 +5375,237 @@ exports[`View Tests Visual Snapshot of Views with shadows 1`] = ` { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, "Offset": "0, 0, 0", - "Size": "30, 30", + "Size": "0, 0", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "30, 0, 0", - "Size": "-10, 5", + "Offset": "0, 0, 0", + "Size": "44, 0", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-30, 0, 0", - "Size": "30, 30", + "Offset": "-6, 0, 0", + "Size": "6, 0", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-5, 30, 0", - "Size": "5, -10", + "Offset": "-6, 0, 0", + "Size": "6, 24", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "-30, -30, 0", - "Size": "30, 30", + "Offset": "-26, -26, 0", + "Size": "26, 26", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "30, -5, 0", - "Size": "-10, 5", + "Offset": "0, -6, 0", + "Size": "24, 6", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, -30, 0", - "Size": "30, 30", + "Offset": "0, -6, 0", + "Size": "0, 6", "Visual Type": "SpriteVisual", }, { "Brush": { "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", + "Color": "rgba(0, 0, 0, 255)", }, - "Offset": "0, 30, 0", - "Size": "5, -10", + "Offset": "0, 0, 0", + "Size": "0, 44", "Visual Type": "SpriteVisual", }, ], }, ], }, + ], + }, +} +`; + +exports[`View Tests Views can have shadows 1`] = ` +{ + "Automation Tree": { + "AutomationId": "shadow", + "ControlType": 50026, + "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", + "Size": "50, 50", + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`View Tests Views can have tooltips 1`] = ` +{ + "Automation Tree": { + "AutomationId": "tool-tip", + "ControlType": 50026, + "LocalizedControlType": "group", + "Name": "Tooltip Example", + "__Children": [ { - "Offset": "260, 20, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - }, - ], + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "This Parent View has tooltip "Parent View"", + "TextRangePattern.GetText": "This Parent View has tooltip "Parent View"", }, { - "Offset": "260, 20, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, - "Offset": "0, 0, 0", - "Size": "0, 0", - "Visual Type": "SpriteVisual", - }, - ], - }, - ], + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "This view has tooltip "Child View 1"", + "TextRangePattern.GetText": "This view has tooltip "Child View 1"", }, { - "Offset": "260, 70, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - }, - ], + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "This view has tooltip "Child View 2"", + "TextRangePattern.GetText": "This view has tooltip "Child View 2"", }, + ], + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "AccessibilityLabel": "Tooltip Example", + "TestId": "tool-tip", + }, + "__Children": [ { - "Offset": "340, 20, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, "__Children": [ { - "Offset": "0, 0, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", - }, - "Offset": "0, 0, 0", - "Size": "0, 0", - "Visual Type": "SpriteVisual", - }, - ], + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, }, ], }, { - "Offset": "420, 20, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, "__Children": [ { - "Offset": "0, 0, 0", - "Size": "50, 50", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 165, 0, 255)", - }, - "Offset": "0, 0, 0", - "Size": "0, 0", - "Visual Type": "SpriteVisual", - }, - ], + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, }, ], }, + ], + }, + "Visual Tree": { + "Comment": "tool-tip", + "Offset": "0, 0, 0", + "Size": "916, 43", + "Visual Type": "SpriteVisual", + "__Children": [ { - "Offset": "500, 20, 0", - "Size": "50, 50", + "Offset": "0, 0, 0", + "Size": "916, 16", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "50, 50", + "Size": "916, 16", "Visual Type": "SpriteVisual", - "__Children": [ - { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(165, 42, 42, 255)", - }, - "Offset": "0, 0, 0", - "Size": "0, 0", - "Visual Type": "SpriteVisual", - }, - ], }, ], }, { - "Offset": "580, 20, 0", - "Size": "50, 50", + "Offset": "0, 15, 0", + "Size": "916, 15", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "50, 50", + "Size": "916, 15", "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 105, 180, 255)", - }, "Offset": "0, 0, 0", - "Size": "0, 0", + "Size": "916, 15", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 15", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, ], }, { - "Offset": "660, 20, 0", - "Size": "50, 50", + "Offset": "0, 29, 0", + "Size": "916, 14", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "50, 50", + "Size": "916, 14", "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 105, 180, 255)", - }, "Offset": "0, 0, 0", - "Size": "0, 0", + "Size": "916, 16", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 16", + "Visual Type": "SpriteVisual", + }, + ], }, ], },