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/__image_snapshots__/view-component-test-test-ts-view-tests-view-box-sizing-2-snap.png b/packages/e2e-test-app-fabric/test/__image_snapshots__/view-component-test-test-ts-view-tests-view-box-sizing-2-snap.png index b573d2d449f..37d496e964c 100644 Binary files a/packages/e2e-test-app-fabric/test/__image_snapshots__/view-component-test-test-ts-view-tests-view-box-sizing-2-snap.png and b/packages/e2e-test-app-fabric/test/__image_snapshots__/view-component-test-test-ts-view-tests-view-box-sizing-2-snap.png differ diff --git a/packages/e2e-test-app-fabric/test/__image_snapshots__/view-component-test-test-ts-view-tests-views-can-have-outlines-2-snap.png b/packages/e2e-test-app-fabric/test/__image_snapshots__/view-component-test-test-ts-view-tests-views-can-have-outlines-2-snap.png index 43f3d987dad..2273cc73ba0 100644 Binary files a/packages/e2e-test-app-fabric/test/__image_snapshots__/view-component-test-test-ts-view-tests-views-can-have-outlines-2-snap.png and b/packages/e2e-test-app-fabric/test/__image_snapshots__/view-component-test-test-ts-view-tests-views-can-have-outlines-2-snap.png differ 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 e9242f2f2fd..bfd491bd4f3 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 d924d50cb02..b45a818c2b6 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 9a870819a63..b8ebbbd8f27 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 dacfdc72efa..20c131fbb35 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 72cb791bd75..1d50b76556a 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 @@ -79,14 +79,19 @@ exports[`View Tests View box sizing 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", - }, "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", @@ -137,13 +142,20 @@ exports[`View Tests View box sizing 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "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", + }, + ], }, ], }, @@ -165,14 +177,19 @@ exports[`View Tests View box sizing 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", - }, "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", @@ -223,13 +240,20 @@ exports[`View Tests View box sizing 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "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", + }, + ], }, ], }, @@ -254,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", + }, + ], }, } `; @@ -428,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", @@ -470,14 +506,19 @@ 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": [ + { + "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", @@ -500,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", @@ -530,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", @@ -590,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", @@ -743,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", + }, + ], }, ], }, @@ -771,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", @@ -813,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", + }, + ], }, ], }, @@ -841,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", + }, + ], }, ], }, @@ -899,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", @@ -1835,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", @@ -1905,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", @@ -1975,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", @@ -2221,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", + }, + ], }, ], }, @@ -2237,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", + }, + ], }, ], }, @@ -2253,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", + }, + ], }, ], }, @@ -2269,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", + }, + ], }, ], }, @@ -2285,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", + }, + ], }, ], }, @@ -2301,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", + }, + ], }, ], }, @@ -2317,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", + }, + ], }, ], }, @@ -2333,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", + }, + ], }, ], }, @@ -2349,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", + }, + ], }, ], }, @@ -2365,29 +2530,43 @@ 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", + }, + ], + }, + ], + }, + { "Offset": "601, 1, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "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", + }, + ], }, ], }, @@ -2612,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", + }, + ], }, ], }, @@ -2694,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", + }, + ], }, ], }, @@ -2776,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", + }, + ], }, ], }, @@ -2858,13 +3058,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": "90, 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", + }, + ], }, ], }, @@ -2940,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", + }, + ], }, ], }, @@ -3022,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", + }, + ], }, ], }, @@ -3104,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", + }, + ], }, ], }, @@ -3561,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", + }, + ], }, ], }, @@ -3577,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", + }, + ], }, ], }, @@ -3628,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", + }, + ], }, ], }, @@ -3644,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", + }, + ], }, ], }, @@ -3770,6 +4026,53 @@ exports[`View Tests Views can have outlines 1`] = ` "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", + }, + ], + }, ], }, ], @@ -3856,6 +4159,85 @@ exports[`View Tests Views can have outlines 1`] = ` "Size": "8, -6", "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": "-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", + }, + ], + }, ], }, ], @@ -3942,6 +4324,85 @@ exports[`View Tests Views can have outlines 1`] = ` "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": "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", + }, + ], + }, ], }, ], @@ -3996,6 +4457,53 @@ exports[`View Tests Views can have outlines 1`] = ` "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", + }, + ], + }, ], }, ], @@ -4082,6 +4590,53 @@ exports[`View Tests Views can have outlines 1`] = ` "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", + }, + ], + }, ], }, ], @@ -4168,6 +4723,53 @@ exports[`View Tests Views can have outlines 1`] = ` "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", + }, + ], + }, ], }, ], @@ -4254,6 +4856,85 @@ exports[`View Tests Views can have outlines 1`] = ` "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", + }, + ], + }, ], }, ], @@ -4308,6 +4989,53 @@ exports[`View Tests Views can have outlines 1`] = ` "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", + }, + ], + }, ], }, ], @@ -4321,6 +5049,55 @@ exports[`View Tests Views can have outlines 1`] = ` "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", + }, + ], + }, + ], }, ], }, @@ -5889,13 +6666,20 @@ exports[`View Tests Visual Snapshot of Views with shadows 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "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", + }, + ], }, ], }, @@ -5917,13 +6701,20 @@ exports[`View Tests Visual Snapshot of Views with shadows 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", - }, "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", + }, + ], }, ], }, @@ -5933,13 +6724,20 @@ exports[`View Tests Visual Snapshot of Views with shadows 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 165, 0, 255)", - }, "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", + }, + ], }, ], }, @@ -5949,13 +6747,20 @@ exports[`View Tests Visual Snapshot of Views with shadows 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(165, 42, 42, 255)", - }, "Offset": "0, 0, 0", "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", + }, + ], }, ], }, @@ -5965,13 +6770,20 @@ exports[`View Tests Visual Snapshot of Views with shadows 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 105, 180, 255)", - }, "Offset": "0, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 105, 180, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -5981,13 +6793,20 @@ exports[`View Tests Visual Snapshot of Views with shadows 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 105, 180, 255)", - }, "Offset": "0, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 105, 180, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "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 792dfea6421..727a3cb4fa6 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp @@ -38,9 +38,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) @@ -79,18 +81,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*/); @@ -154,10 +154,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); + } } } } @@ -166,6 +174,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()); @@ -200,8 +218,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}); @@ -218,6 +237,9 @@ void ComponentView::updateLayoutMetrics( if (m_borderPrimitive) { m_borderPrimitive->markNeedsUpdate(); } + if (m_outlinePrimitive) { + m_outlinePrimitive->markNeedsUpdate(); + } if (m_componentHostingFocusVisual) { m_componentHostingFocusVisual->updateFocusLayoutMetrics(); @@ -301,6 +323,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) { @@ -581,6 +620,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 { @@ -654,7 +754,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)); } } @@ -898,9 +998,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 || @@ -919,10 +1033,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); } } @@ -934,6 +1048,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 {} @@ -1084,7 +1201,7 @@ void ViewComponentView::ensureVisual() noexcept { } else { m_visual = createVisual(); } - OuterVisual().InsertAt(m_visual, 0); + OuterVisual().InsertAt(m_visual, m_backgroundVisual ? 1 : 0); } } @@ -1382,7 +1499,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 cfdac7fe3f8..1eef1c4d5a0 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp @@ -236,6 +236,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 1b89d302c36..9a15475c04f 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.h @@ -52,6 +52,8 @@ struct ImageComponentView : ImageComponentViewT 0; }