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..d06fc7e9a78 --- /dev/null +++ b/change/react-native-windows-202bc094-b9c7-41dc-9154-c7e8236c58c6.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Implement outline properties on view", + "packageName": "react-native-windows", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-2c040593-f202-44fc-a55c-5d523c493705.json b/change/react-native-windows-2c040593-f202-44fc-a55c-5d523c493705.json new file mode 100644 index 00000000000..363eea2e1a2 --- /dev/null +++ b/change/react-native-windows-2c040593-f202-44fc-a55c-5d523c493705.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: map Windows touch pointer IDs to small JS-safe identifiers in CompositionEventHandler", + "packageName": "react-native-windows", + "email": "gordomacmaster@gmail.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-3f20e903-f2ed-45d8-b852-7408a50c36f2.json b/change/react-native-windows-3f20e903-f2ed-45d8-b852-7408a50c36f2.json new file mode 100644 index 00000000000..7ed5e5fd91a --- /dev/null +++ b/change/react-native-windows-3f20e903-f2ed-45d8-b852-7408a50c36f2.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Add ability to register modules as eager init", + "packageName": "react-native-windows", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-636c3119-029d-4fee-9c71-1116858423a5.json b/change/react-native-windows-636c3119-029d-4fee-9c71-1116858423a5.json new file mode 100644 index 00000000000..10c0df33107 --- /dev/null +++ b/change/react-native-windows-636c3119-029d-4fee-9c71-1116858423a5.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Minor text rendering perf improvement", + "packageName": "react-native-windows", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-f47bdf2a-0807-483f-b63e-3c2c086bee92.json b/change/react-native-windows-f47bdf2a-0807-483f-b63e-3c2c086bee92.json new file mode 100644 index 00000000000..dd885a9e034 --- /dev/null +++ b/change/react-native-windows-f47bdf2a-0807-483f-b63e-3c2c086bee92.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: cancel active touches in onPointerCaptureLost to prevent zombie touch state", + "packageName": "react-native-windows", + "email": "gordomacmaster@gmail.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/AccessibilityTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/AccessibilityTest.test.ts.snap index 716310f2e5e..458f747c91e 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/AccessibilityTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/AccessibilityTest.test.ts.snap @@ -18,14 +18,21 @@ exports[`Accessibility Tests Accessibility data for Label and Level 1`] = ` }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Comment": "accessibility-base-view-2", "Offset": "0, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, } `; @@ -56,14 +63,21 @@ exports[`Accessibility Tests Accessibility data for Label,Level and Hint 1`] = ` }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 255, 255)", - }, "Comment": "accessibility-base-view-1", "Offset": "0, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, } `; @@ -87,14 +101,21 @@ exports[`Accessibility Tests Accessibility data for Role, Setsize etc. 1`] = ` }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Comment": "accessibility-base-view-3", "Offset": "0, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, } `; @@ -133,15 +154,20 @@ exports[`Accessibility Tests Components can store range data by setting the min, ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 128, 128, 255)", - }, "Comment": "accessibilityValue-number", "Offset": "0, 0, 0", "Size": "916, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 128, 128, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "916, 19", @@ -190,15 +216,20 @@ exports[`Accessibility Tests Components can store value data by setting the text ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 128, 128, 255)", - }, "Comment": "accessibilityValue-text", "Offset": "0, 0, 0", "Size": "916, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 128, 128, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "916, 20", @@ -248,15 +279,20 @@ exports[`Accessibility Tests Elements can set accessibilityState:selected to fal ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(135, 206, 250, 255)", - }, "Comment": "Selectable item 1", "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(135, 206, 250, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "100, 20", @@ -307,15 +343,20 @@ exports[`Accessibility Tests Elements can set accessibilityState:selected to tru ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 128, 128, 255)", - }, "Comment": "Selectable item 1", "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 128, 128, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "100, 20", @@ -513,15 +554,20 @@ exports[`Accessibility Tests Selectable items must have a Selection Container. E "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(135, 206, 250, 255)", - }, "Comment": "Selectable item 1", "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(135, 206, 250, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "100, 20", @@ -544,15 +590,20 @@ exports[`Accessibility Tests Selectable items must have a Selection Container. E "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(135, 206, 250, 255)", - }, "Comment": "Selectable item 2", "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(135, 206, 250, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "100, 20", @@ -575,15 +626,20 @@ exports[`Accessibility Tests Selectable items must have a Selection Container. E "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(135, 206, 250, 255)", - }, "Comment": "Selectable item 3", "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(135, 206, 250, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "100, 20", diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/ButtonComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/ButtonComponentTest.test.ts.snap index 5db45cd5269..96cb5c4d881 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/ButtonComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/ButtonComponentTest.test.ts.snap @@ -48,14 +48,19 @@ exports[`Button Tests Buttons can be disabled 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(249, 249, 249, 77)", - }, "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(249, 249, 249, 77)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -196,14 +201,19 @@ exports[`Button Tests Buttons can have accessibility labels 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 122, 255, 255)", - }, "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 122, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -330,15 +340,20 @@ exports[`Button Tests Buttons can have accessibility props 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 255, 179)", - }, "Comment": "accessibility_props", "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 179)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -476,14 +491,19 @@ exports[`Button Tests Buttons can have accessibility states 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(249, 249, 249, 77)", - }, "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(249, 249, 249, 77)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -624,14 +644,19 @@ exports[`Button Tests Buttons can have custom colors 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 59, 48, 255)", - }, "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 59, 48, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -742,15 +767,20 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 1`] ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 255, 179)", - }, "Comment": "accessible_false_button", "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 179)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -872,15 +902,20 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 2`] ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 255, 179)", - }, "Comment": "focusable_false_button", "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 179)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -987,15 +1022,20 @@ exports[`Button Tests Buttons can have custom focusable and accessible props 3`] ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 255, 179)", - }, "Comment": "accessible_focusable_false_button", "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 179)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -1191,14 +1231,19 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 59, 48, 255)", - }, "Offset": "0, 0, 0", "Size": "59, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 59, 48, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -1308,14 +1353,19 @@ exports[`Button Tests Buttons can have flexbox styling 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(52, 199, 89, 255)", - }, "Offset": "0, 0, 0", "Size": "62, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(52, 199, 89, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -1552,14 +1602,19 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 59, 48, 255)", - }, "Offset": "0, 0, 0", "Size": "59, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 59, 48, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -1669,14 +1724,19 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 122, 255, 255)", - }, "Offset": "0, 0, 0", "Size": "105, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 122, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -1786,14 +1846,19 @@ exports[`Button Tests Buttons can have flexbox styling with three buttons 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(52, 199, 89, 255)", - }, "Offset": "0, 0, 0", "Size": "62, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(52, 199, 89, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -1923,15 +1988,20 @@ exports[`Button Tests Buttons have default styling 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 255, 179)", - }, "Comment": "button_default_styling", "Offset": "0, 0, 0", "Size": "916, 37", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 179)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/CustomAccessibilityTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/CustomAccessibilityTest.test.ts.snap index 136049c1614..755364d76b3 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/CustomAccessibilityTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/CustomAccessibilityTest.test.ts.snap @@ -67,14 +67,21 @@ exports[`Custom Accessibility Tests Verify custom native component has UIA label "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 128, 0, 255)", - }, "Comment": "custom-accessibility-1", "Offset": "0, 0, 0", "Size": "500, 500", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 128, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/FlatListComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/FlatListComponentTest.test.ts.snap index a7c8b2dfcc8..0950ced3af8 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/FlatListComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/FlatListComponentTest.test.ts.snap @@ -128,14 +128,19 @@ exports[`FlatList Tests A FlatList can be filtered by a key word 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 255, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 422", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "998, 100", @@ -261,13 +266,20 @@ exports[`FlatList Tests A FlatList can be filtered by a key word 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 255, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -842,15 +854,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Pizza", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -873,15 +890,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Burger", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -904,15 +926,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Risotto", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -935,15 +962,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "French Fries", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -966,15 +998,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Onion Rings", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -997,15 +1034,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Fried Shrimps", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1028,15 +1070,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Water", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1059,15 +1106,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Coke", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1090,15 +1142,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Beer", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1121,15 +1178,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Cheesecake", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1152,15 +1214,20 @@ exports[`FlatList Tests A FlatList can be inverted 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Brownie", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1610,15 +1677,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Pizza", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1641,15 +1713,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Burger", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1672,15 +1749,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Risotto", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1703,15 +1785,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "French Fries", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1734,15 +1821,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Onion Rings", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1765,15 +1857,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Fried Shrimps", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1796,15 +1893,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Water", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1827,15 +1929,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Coke", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1858,15 +1965,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Beer", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1889,15 +2001,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Cheesecake", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -1920,15 +2037,20 @@ exports[`FlatList Tests A FlatList can have a content inset 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Brownie", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -2548,15 +2670,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Pizza", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -2579,13 +2706,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2608,15 +2742,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Burger", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -2639,13 +2778,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2668,15 +2814,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Risotto", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -2699,13 +2850,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2728,15 +2886,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "French Fries", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -2759,13 +2922,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2788,15 +2958,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Onion Rings", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -2819,13 +2994,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2848,20 +3030,25 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Fried Shrimps", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ { - "Offset": "20, 19, 0", - "Size": "958, 32", - "Visual Type": "SpriteVisual", - "__Children": [ + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "20, 19, 0", + "Size": "958, 32", + "Visual Type": "SpriteVisual", + "__Children": [ { "Offset": "0, 0, 0", "Size": "958, 32", @@ -2879,13 +3066,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2908,15 +3102,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Water", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -2939,13 +3138,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2968,15 +3174,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Coke", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -2999,13 +3210,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3028,15 +3246,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Beer", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -3059,13 +3282,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3088,15 +3318,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Cheesecake", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -3119,13 +3354,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 12", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3148,15 +3390,20 @@ exports[`FlatList Tests A FlatList can have separators 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Brownie", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -3492,13 +3739,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3520,13 +3774,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3548,13 +3809,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3576,13 +3844,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 71", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3604,13 +3879,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3632,13 +3914,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3660,13 +3949,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3688,13 +3984,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3726,13 +4029,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3768,13 +4078,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3810,13 +4127,20 @@ exports[`FlatList Tests A FlatList can have sticky headers 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "998, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -4288,13 +4612,20 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(240, 128, 128, 255)", - }, "Offset": "0, 0, 0", "Size": "996, 40", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(240, 128, 128, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -4316,13 +4647,20 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "478, 460", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -4332,14 +4670,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4402,14 +4745,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4472,14 +4820,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4542,14 +4895,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4612,14 +4970,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4682,13 +5045,20 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(144, 238, 144, 255)", - }, "Offset": "0, 0, 0", "Size": "478, 460", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(144, 238, 144, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -4698,14 +5068,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4768,14 +5143,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4838,14 +5218,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4908,14 +5293,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -4978,14 +5368,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "458, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -5048,13 +5443,20 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(173, 216, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "996, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(173, 216, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -5102,14 +5504,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "144, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -5172,14 +5579,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "144, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -5242,14 +5654,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "144, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -5312,14 +5729,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "144, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -5382,14 +5804,19 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(253, 245, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "144, 72", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(253, 245, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -5524,13 +5951,20 @@ exports[`FlatList Tests A FlatList can nest other Flatlists 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(173, 216, 230, 255)", - }, "Offset": "0, 0, 0", "Size": "996, 72", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(173, 216, 230, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -5967,15 +6401,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Pizza", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -5998,15 +6437,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Burger", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6029,15 +6473,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Risotto", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6060,15 +6509,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "French Fries", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6091,15 +6545,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Onion Rings", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6122,15 +6581,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Fried Shrimps", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6153,15 +6617,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Water", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6184,15 +6653,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Coke", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6215,15 +6689,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Beer", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6246,15 +6725,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Cheesecake", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6277,15 +6761,20 @@ exports[`FlatList Tests A FlatList has an onEndReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Brownie", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6735,15 +7224,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Pizza", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6766,15 +7260,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Burger", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6797,15 +7296,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Risotto", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6828,15 +7332,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "French Fries", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6859,15 +7368,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Onion Rings", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6890,15 +7404,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Fried Shrimps", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6921,15 +7440,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Water", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6952,15 +7476,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Coke", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -6983,15 +7512,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Beer", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -7014,15 +7548,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Cheesecake", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", @@ -7045,15 +7584,20 @@ exports[`FlatList Tests A FlatList has an onStartReached event 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Comment": "Brownie", "Offset": "0, 0, 0", "Size": "998, 70", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "20, 19, 0", "Size": "958, 32", diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyImageTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyImageTest.test.ts.snap index 6ddb67b2c6a..7388b16b156 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyImageTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyImageTest.test.ts.snap @@ -10,15 +10,20 @@ exports[`LegacyImageTest ImageRTLTest 1`] = ` }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 0, 255)", - }, "Comment": "image-container", "Offset": "0, 0, 0", "Size": "500, 300", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "20, 20", @@ -74,15 +79,20 @@ exports[`LegacyImageTest ImageWithBorderTest 1`] = ` }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 0, 255)", - }, "Comment": "image-container", "Offset": "0, 0, 0", "Size": "500, 300", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Brush": { "Brush Type": "ColorBrush", @@ -170,14 +180,21 @@ exports[`LegacyImageTest ImageWithoutBorderTest 1`] = ` }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 0, 255)", - }, "Comment": "image-container", "Offset": "0, 0, 0", "Size": "500, 300", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, } `; @@ -192,15 +209,20 @@ exports[`LegacyImageTest ImageWithoutBorderTestOneMoreClick 1`] = ` }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 0, 255)", - }, "Comment": "image-container", "Offset": "0, 0, 0", "Size": "500, 300", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "20, 20", diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/PointerButtonComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/PointerButtonComponentTest.test.ts.snap index 9ea6e8adb43..48dc769b6c2 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/PointerButtonComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/PointerButtonComponentTest.test.ts.snap @@ -14,14 +14,21 @@ exports[`Pointer Button Tests onPointerDown reports correct button property on l }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 255, 255)", - }, "Comment": "pointer-button-target", "Offset": "0, 0, 0", "Size": "200, 200", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, } `; @@ -40,14 +47,21 @@ exports[`Pointer Button Tests onPointerUp reports correct button property on lef }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 255, 255)", - }, "Comment": "pointer-up-button-target", "Offset": "0, 0, 0", "Size": "200, 200", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, } `; diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap index 5124f964cad..2addc38c47c 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap @@ -327,15 +327,20 @@ exports[`Pressable Tests Pressables can change style when pressed 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 255, 255, 255)", - }, "Comment": "style-change-pressable", "Offset": "0, 0, 0", "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 255, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "426, 6, 0", "Size": "64, 22", @@ -431,15 +436,20 @@ exports[`Pressable Tests Pressables can have advanced borders 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Comment": "pressable_hit_slop_button", "Offset": "0, 0, 0", "Size": "146, 19", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "146, 19", @@ -549,15 +559,20 @@ exports[`Pressable Tests Pressables can have delayed event handlers 2`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(249, 249, 249, 255)", - }, "Comment": "pressable_delay_events_console", "Offset": "0, 0, 0", "Size": "896, 120", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(249, 249, 249, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -593,11 +608,6 @@ exports[`Pressable Tests Pressables can have delayed event handlers 2`] = ` "Size": "1, 1", "Visual Type": "SpriteVisual", }, - { - "Offset": "0, 1, 0", - "Size": "1, -2", - "Visual Type": "SpriteVisual", - }, { "Offset": "11, 11, 0", "Size": "874, 19", @@ -622,6 +632,11 @@ exports[`Pressable Tests Pressables can have delayed event handlers 2`] = ` }, ], }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, ], }, } @@ -711,15 +726,20 @@ exports[`Pressable Tests Pressables can have event handlers, hover 2`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(249, 249, 249, 255)", - }, "Comment": "pressable_feedback_events_console", "Offset": "0, 0, 0", "Size": "896, 120", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(249, 249, 249, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -755,11 +775,6 @@ exports[`Pressable Tests Pressables can have event handlers, hover 2`] = ` "Size": "1, 1", "Visual Type": "SpriteVisual", }, - { - "Offset": "0, 1, 0", - "Size": "1, -2", - "Visual Type": "SpriteVisual", - }, { "Offset": "11, 11, 0", "Size": "874, 19", @@ -772,6 +787,11 @@ exports[`Pressable Tests Pressables can have event handlers, hover 2`] = ` }, ], }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, ], }, } @@ -905,15 +925,20 @@ exports[`Pressable Tests Pressables can have event handlers, hover and click 2`] ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(249, 249, 249, 255)", - }, "Comment": "pressable_feedback_events_console", "Offset": "0, 0, 0", "Size": "896, 120", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(249, 249, 249, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -949,11 +974,6 @@ exports[`Pressable Tests Pressables can have event handlers, hover and click 2`] "Size": "1, 1", "Visual Type": "SpriteVisual", }, - { - "Offset": "0, 1, 0", - "Size": "1, -2", - "Visual Type": "SpriteVisual", - }, { "Offset": "11, 11, 0", "Size": "874, 19", @@ -1014,6 +1034,11 @@ exports[`Pressable Tests Pressables can have event handlers, hover and click 2`] }, ], }, + { + "Offset": "0, 1, 0", + "Size": "1, -2", + "Visual Type": "SpriteVisual", + }, ], }, } @@ -1049,15 +1074,20 @@ exports[`Pressable Tests Pressables can have hit slop functionality 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Comment": "pressable_hit_slop_button", "Offset": "0, 0, 0", "Size": "146, 19", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "146, 19", @@ -1234,14 +1264,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1251,14 +1288,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.10000000149011612, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1268,14 +1312,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.20000000298023224, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1285,14 +1336,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.30000001192092896, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1302,14 +1360,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.4000000059604645, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1319,14 +1384,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.5, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1336,14 +1408,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.6000000238418579, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1353,14 +1432,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.699999988079071, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1370,14 +1456,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.800000011920929, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1387,14 +1480,21 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Opacity": 0.8999999761581421, "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1404,13 +1504,20 @@ exports[`Pressable Tests Pressables can have ranging opacity 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "50, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1849,14 +1956,19 @@ exports[`Pressable Tests Pressables can hide their backface 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 255, 255)", - }, "Offset": "0, 0, 0", "Size": "200, 200", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "83, 90, 0", "Size": "34, 19", @@ -1879,14 +1991,19 @@ exports[`Pressable Tests Pressables can hide their backface 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "200, 200", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "8, 90, 0", "Size": "184, 19", @@ -1921,14 +2038,19 @@ exports[`Pressable Tests Pressables can hide their backface 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 255, 255)", - }, "Offset": "0, 0, 0", "Size": "200, 200", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "6, 90, 0", "Size": "188, 20", @@ -1951,14 +2073,19 @@ exports[`Pressable Tests Pressables can hide their backface 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "200, 200", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "85, 90, 0", "Size": "30, 20", diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/ScrollViewComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/ScrollViewComponentTest.test.ts.snap index efb33774859..875163ac0e7 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/ScrollViewComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/ScrollViewComponentTest.test.ts.snap @@ -30,15 +30,20 @@ exports[`ScrollView Tests ScrollView has scrollTo method, scroll to bottom butto ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Comment": "scroll_to_bottom_button", "Offset": "0, 0, 0", "Size": "906, 29", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "402, 5, 0", "Size": "102, 19", @@ -86,15 +91,20 @@ exports[`ScrollView Tests ScrollView has scrollTo method, scroll to end button 1 ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Comment": "scroll_to_end_button", "Offset": "0, 0, 0", "Size": "906, 29", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "414, 5, 0", "Size": "78, 19", @@ -142,15 +152,20 @@ exports[`ScrollView Tests ScrollView has scrollTo method, scroll to start button ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Comment": "scroll_to_start_button", "Offset": "0, 0, 0", "Size": "906, 29", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "412, 5, 0", "Size": "82, 20", @@ -198,15 +213,20 @@ exports[`ScrollView Tests ScrollView has scrollTo method, scroll to top button 1 ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Comment": "scroll_to_top_button", "Offset": "0, 0, 0", "Size": "906, 29", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "415, 5, 0", "Size": "76, 20", @@ -468,13 +488,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -496,13 +523,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -524,13 +558,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -552,13 +593,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -580,13 +628,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -608,13 +663,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -636,13 +698,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -664,13 +733,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -692,13 +768,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -720,13 +803,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -748,13 +838,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -776,13 +873,20 @@ exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Offset": "0, 0, 0", "Size": "96, 96", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -901,15 +1005,20 @@ exports[`ScrollView Tests ScrollViews has flash scroll indicators 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(204, 204, 204, 255)", - }, "Comment": "flash_scroll_indicators_button", "Offset": "0, 0, 0", "Size": "906, 28", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "387, 5, 0", "Size": "132, 20", diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap index 36fbe0766a2..2f2c39afc35 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap @@ -962,13 +962,20 @@ exports[`Text Tests Text can have inline views/images 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(70, 130, 180, 255)", - }, "Offset": "0, 0, 0", "Size": "0, 0", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(70, 130, 180, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1075,13 +1082,20 @@ exports[`Text Tests Text can have nested views 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "0, 0", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1266,13 +1280,20 @@ exports[`Text Tests Texts can clip inline View/Images 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "0, 0", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1282,13 +1303,20 @@ exports[`Text Tests Texts can clip inline View/Images 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(70, 130, 180, 255)", - }, "Offset": "0, 0, 0", "Size": "0, 0", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(70, 130, 180, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/TouchableComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/TouchableComponentTest.test.ts.snap index e5670892632..e4ff8caf305 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/TouchableComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/TouchableComponentTest.test.ts.snap @@ -268,10 +268,6 @@ exports[`Touchable Tests Touchables can be disabled 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 0)", - }, "Comment": "disabled_touchable", "Offset": "0, 0, 0", "Size": "916, 38", @@ -327,10 +323,6 @@ exports[`Touchable Tests Touchables can be disabled 2`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 0)", - }, "Comment": "disabled_touchable", "Offset": "0, 0, 0", "Size": "916, 38", @@ -545,15 +537,20 @@ exports[`Touchable Tests Touchables can enable a hit slop region 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Comment": "touchable_hit_slop_button", "Offset": "0, 0, 0", "Size": "146, 19", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "146, 20", diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/ViewComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/ViewComponentTest.test.ts.snap index 5afa7c5481a..65f1cd353dd 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/ViewComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/ViewComponentTest.test.ts.snap @@ -16,14 +16,21 @@ exports[`View Tests Views can have a hitslop region 1`] = ` }, }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(128, 128, 128, 255)", - }, "Comment": "hitslop", "Offset": "0, 0, 0", "Size": "200, 200", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(128, 128, 128, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, } `; @@ -190,14 +197,19 @@ exports[`View Tests Views can have a z-index 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(100, 181, 246, 255)", - }, "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(100, 181, 246, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 15, 0", "Size": "100, 20", @@ -232,14 +244,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", @@ -262,14 +279,19 @@ exports[`View Tests Views can have a z-index 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 241, 118, 255)", - }, "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 241, 118, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 15, 0", "Size": "100, 20", @@ -292,14 +314,19 @@ exports[`View Tests Views can have a z-index 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(229, 115, 115, 255)", - }, "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(229, 115, 115, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 15, 0", "Size": "100, 20", @@ -352,15 +379,20 @@ exports[`View Tests Views can have aria-labels 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Comment": "view-test-aria-label", "Offset": "0, 0, 0", "Size": "916, 24", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "5, 5, 0", "Size": "906, 16", @@ -505,13 +537,20 @@ exports[`View Tests Views can have backface visibility 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 255, 255)", - }, "Offset": "0, 0, 0", "Size": "150, 150", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -533,14 +572,19 @@ exports[`View Tests Views can have backface visibility 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "150, 150", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "10, 56, 0", "Size": "130, 38", @@ -575,13 +619,20 @@ exports[`View Tests Views can have backface visibility 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 255, 255)", - }, "Offset": "0, 0, 0", "Size": "150, 150", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 255, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -603,13 +654,20 @@ exports[`View Tests Views can have backface visibility 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "150, 150", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -661,15 +719,20 @@ exports[`View Tests Views can have background color 1`] = ` ], }, "Visual Tree": { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Comment": "view-test-background-color", "Offset": "0, 0, 0", "Size": "916, 24", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "5, 5, 0", "Size": "906, 16", @@ -1597,14 +1660,19 @@ exports[`View Tests Views can have customized pasdding and margins 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "915, 27", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -1667,14 +1735,19 @@ exports[`View Tests Views can have customized pasdding and margins 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "905, 16", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -1737,14 +1810,19 @@ exports[`View Tests Views can have customized pasdding and margins 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "133, 42", "Visual Type": "SpriteVisual", "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, { "Offset": "0, 0, 0", "Size": "1, 1", @@ -1983,13 +2061,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -1999,13 +2084,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2015,13 +2107,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2031,13 +2130,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2047,13 +2153,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2063,13 +2176,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2079,13 +2199,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(0, 0, 0, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2095,13 +2222,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2111,13 +2245,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2127,13 +2268,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2143,13 +2291,20 @@ exports[`View Tests Views can have flexgap 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 192, 203, 255)", - }, "Offset": "0, 0, 0", "Size": "30, 30", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 192, 203, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2374,13 +2529,20 @@ exports[`View Tests Views can have insets 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "904, 28", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2456,13 +2618,20 @@ exports[`View Tests Views can have insets 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "68, 28", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2538,13 +2707,20 @@ exports[`View Tests Views can have insets 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "86, 25", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2620,13 +2796,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", + }, + ], }, ], }, @@ -2702,13 +2885,20 @@ exports[`View Tests Views can have insets 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "904, 24", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2784,13 +2974,20 @@ exports[`View Tests Views can have insets 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "87, 24", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -2866,13 +3063,20 @@ exports[`View Tests Views can have insets 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(82, 127, 228, 255)", - }, "Offset": "0, 0, 0", "Size": "91, 24", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(82, 127, 228, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3323,13 +3527,20 @@ exports[`View Tests Views can have offscreen alpha compositing 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 111, 89, 255)", - }, "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 111, 89, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3339,13 +3550,20 @@ exports[`View Tests Views can have offscreen alpha compositing 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(247, 203, 21, 255)", - }, "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(247, 203, 21, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3390,13 +3608,20 @@ exports[`View Tests Views can have offscreen alpha compositing 1`] = ` "Visual Type": "SpriteVisual", "__Children": [ { - "Brush": { - "Brush Type": "ColorBrush", - "Color": "rgba(255, 111, 89, 255)", - }, "Offset": "0, 0, 0", "Size": "100, 50", "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 111, 89, 255)", + }, + "Offset": "0, 0, 0", + "Size": "0, 0", + "Visual Type": "SpriteVisual", + }, + ], }, ], }, @@ -3406,13 +3631,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", + }, + ], }, ], }, diff --git a/vnext/Microsoft.ReactNative.Cxx/ModuleRegistration.cpp b/vnext/Microsoft.ReactNative.Cxx/ModuleRegistration.cpp index 485c38b9c2a..0b895e0749f 100644 --- a/vnext/Microsoft.ReactNative.Cxx/ModuleRegistration.cpp +++ b/vnext/Microsoft.ReactNative.Cxx/ModuleRegistration.cpp @@ -18,7 +18,10 @@ ModuleRegistration::ModuleRegistration(wchar_t const *moduleName) noexcept : m_m void AddAttributedModules(IReactPackageBuilder const &packageBuilder, bool useTurboModules) noexcept { for (auto const *reg = ModuleRegistration::Head(); reg != nullptr; reg = reg->Next()) { if (useTurboModules || reg->ShouldRegisterAsTurboModule()) - packageBuilder.AddTurboModule(reg->ModuleName(), reg->MakeModuleProvider()); + if (reg->IsEagerInit()) + packageBuilder.AddEagerInitTurboModule(reg->ModuleName(), reg->MakeModuleProvider()); + else + packageBuilder.AddTurboModule(reg->ModuleName(), reg->MakeModuleProvider()); else packageBuilder.AddModule(reg->ModuleName(), reg->MakeModuleProvider()); } @@ -31,7 +34,10 @@ bool TryAddAttributedModule( for (auto const *reg = ModuleRegistration::Head(); reg != nullptr; reg = reg->Next()) { if (moduleName == reg->ModuleName()) { if (useTurboModule || reg->ShouldRegisterAsTurboModule()) { - packageBuilder.AddTurboModule(moduleName, reg->MakeModuleProvider()); + if (reg->IsEagerInit()) + packageBuilder.AddEagerInitTurboModule(moduleName, reg->MakeModuleProvider()); + else + packageBuilder.AddTurboModule(moduleName, reg->MakeModuleProvider()); } else { packageBuilder.AddModule(moduleName, reg->MakeModuleProvider()); } diff --git a/vnext/Microsoft.ReactNative.Cxx/ModuleRegistration.h b/vnext/Microsoft.ReactNative.Cxx/ModuleRegistration.h index 16745d8888d..669a3c02135 100644 --- a/vnext/Microsoft.ReactNative.Cxx/ModuleRegistration.h +++ b/vnext/Microsoft.ReactNative.Cxx/ModuleRegistration.h @@ -30,10 +30,11 @@ template struct IsReactTurboModule : std::bool_constant(nullptr))> {}; #define INTERNAL_REACT_MODULE_REGISTRATION_AND_PROVIDER( \ - moduleStruct, moduleName, eventEmitterName, isReactTurboModule) \ + moduleStruct, moduleName, eventEmitterName, isReactTurboModule, isEagerInit) \ struct moduleStruct; \ \ constexpr bool ReactIsReactTurboModuleImpl(moduleStruct *) noexcept { return isReactTurboModule; } \ + constexpr bool ReactIsEagerInitTurboModuleImpl(moduleStruct *) noexcept { return isEagerInit; } \ \ template \ struct moduleStruct##_ModuleRegistration final : winrt::Microsoft::ReactNative::ModuleRegistration { \ @@ -44,6 +45,7 @@ struct IsReactTurboModule : std::bool_constantColor(*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/CompositionEventHandler.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp index ae6e0672403..a5fac96e19d 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp @@ -1098,12 +1098,26 @@ void CompositionEventHandler::onPointerCaptureLost( if (SurfaceId() == -1) return; - if (m_pointerCapturingComponentTag) { + if (m_pointerCapturingComponentTag != -1) { // copy array to avoid iterator being invalidated during deletion std::unordered_set capturedPointers = m_capturedPointers; for (auto pointerId : capturedPointers) { releasePointerCapture(pointerId, m_pointerCapturingComponentTag); + + // Cancel any active touch for this pointer so React Native is notified that + // the touch ended. Without this, m_activeTouches retains a zombie entry and + // RN JS is never told the touch is gone — leaving Pressables stuck in a + // pressed state after a system-interrupted gesture (e.g. system back swipe, + // Alt+Tab, another window coming foreground). + auto activeTouch = m_activeTouches.find(pointerId); + if (activeTouch != m_activeTouches.end()) { + ActiveTouch cancelledTouchCopy = std::move(activeTouch->second); + m_activeTouches.erase(activeTouch); + if (cancelledTouchCopy.eventEmitter) { + DispatchSynthesizedTouchCancelForActiveTouch(cancelledTouchCopy, pointerPoint, keyModifiers); + } + } } m_pointerCapturingComponentTag = -1; @@ -1220,6 +1234,37 @@ void CompositionEventHandler::onPointerExited( } } +// Windows touch pointer IDs can be arbitrarily large (e.g. 2233). React Native's JS +// touch handler uses identifiers as array indices and warns/misbehaves for values > 20. +// This function maps each live Windows pointer to a small identifier in [0, 19] by +// scanning m_activeTouches for in-use slots and cycling from the last assigned index. +// Identifier MOUSE_POINTER_ID (1) is permanently reserved for mouse and never returned here. +int CompositionEventHandler::AllocateTouchIdentifier() noexcept { + constexpr int kMaxTouchIdentifier = 20; + for (int i = 0; i < kMaxTouchIdentifier; i++) { + int candidate = (m_touchId + i) % kMaxTouchIdentifier; + if (candidate == static_cast(MOUSE_POINTER_ID)) { + continue; // reserved for mouse + } + bool inUse = std::any_of(m_activeTouches.begin(), m_activeTouches.end(), [candidate](const auto &pair) { + return pair.second.touch.identifier == candidate; + }); + if (!inUse) { + m_touchId = (candidate + 1) % kMaxTouchIdentifier; + return candidate; + } + } + // All non-mouse slots occupied (> 19 simultaneous touch/pen points) — wrap anyway, + // skipping the mouse-reserved slot. + int fallback = m_touchId; + m_touchId = (m_touchId + 1) % kMaxTouchIdentifier; + if (fallback == static_cast(MOUSE_POINTER_ID)) { + fallback = m_touchId; + m_touchId = (m_touchId + 1) % kMaxTouchIdentifier; + } + return fallback; +} + void CompositionEventHandler::onPointerPressed( const winrt::Microsoft::ReactNative::Composition::Input::PointerPoint &pointerPoint, winrt::Windows::System::VirtualKeyModifiers keyModifiers) noexcept { @@ -1328,11 +1373,18 @@ void CompositionEventHandler::onPointerPressed( UpdateActiveTouch(activeTouch, ptScaled, ptLocal); activeTouch.isPrimary = pointerId == 1; - activeTouch.touch.identifier = pointerId; + // Map the Windows pointer ID to a small identifier (0–19) safe for use as a JS array index. + // Windows touch IDs can be arbitrarily large (e.g. 2233), which causes React Native to warn + // and corrupts touch state, leaving Pressables stuck after a scroll. + // Mouse pointer ID is always 1 (MOUSE_POINTER_ID), which is already within the safe range — + // use it directly to preserve stable, predictable identifier assignment for mouse input. + activeTouch.touch.identifier = (pointerPoint.PointerDeviceType() == Composition::Input::PointerDeviceType::Mouse) + ? static_cast(MOUSE_POINTER_ID) + : AllocateTouchIdentifier(); // If the pointer has not been marked as hovering over views before the touch started, we register // that the activeTouch should not maintain its hovered state once the pointer has been lifted. - auto currentlyHoveredTags = m_currentlyHoveredViewsPerPointer.find(activeTouch.touch.identifier); + auto currentlyHoveredTags = m_currentlyHoveredViewsPerPointer.find(pointerId); if (currentlyHoveredTags == m_currentlyHoveredViewsPerPointer.end() || currentlyHoveredTags->second.empty()) { activeTouch.shouldLeaveWhenReleased = true; } @@ -1647,7 +1699,7 @@ void CompositionEventHandler::DispatchTouchEvent( continue; } - if (activeTouch.touch.identifier == pointerId) { + if (pair.first == pointerId) { event.changedTouches.insert(activeTouch.touch); } uniqueEventEmitters.insert(activeTouch.eventEmitter); diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.h b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.h index 8d8949a9900..c3e27979958 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.h @@ -162,8 +162,13 @@ class CompositionEventHandler : public std::enable_shared_from_this m_activeTouches; // iOS is map of touch event args to ActiveTouch..? - PointerId m_touchId = 0; + int m_touchId = 0; // cycling base used by AllocateTouchIdentifier std::map> m_currentlyHoveredViewsPerPointer; winrt::weak_ref m_wkRootView; diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp index dcaa2ac4ffc..35338ca1f4c 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp @@ -40,9 +40,11 @@ constexpr float FOCUS_VISUAL_RADIUS = 3.0f; // m_outerVisual // | -// ----- m_visual <-- Background / clip - Can be a custom visual depending on Component type +// ----- m_visual - Can be a custom visual depending on Component type // | -// ----- Border Visuals x N (BorderPrimitive attached to m_visual) +// ----- m_backgroundVisual <-- Background / clip (ComponentViewFeatures::Background) +// ----- Border Visuals x N (BorderPrimitive attached to m_visual) (ComponentViewFeatures::NativeBorder) +// ----- Outline Visuals x N(BorderPrimitive) (ComponentViewFeatures::NativeBorder) // ----- (default: directly in m_visual after border visuals) // ----- m_childrenContainer (created on demand when overflow:hidden, children moved here) // ------Focus Visual Container (created when hosting focus visuals) @@ -81,18 +83,16 @@ facebook::react::Props::Shared ComponentView::props() noexcept { } void ComponentView::onThemeChanged() noexcept { - if ((m_flags & ComponentViewFeatures::Background) == ComponentViewFeatures::Background) { - if (viewProps()->backgroundColor) { - Visual().as().Brush(theme()->Brush(*viewProps()->backgroundColor)); - } else { - Visual().as().Brush(nullptr); - } - } + if (m_backgroundVisual) + m_backgroundVisual.Brush(theme()->Brush(*viewProps()->backgroundColor)); if (m_borderPrimitive) { m_borderPrimitive->onThemeChanged( m_layoutMetrics, BorderPrimitive::resolveAndAlignBorderMetrics(m_layoutMetrics, *viewProps())); } + if (m_outlinePrimitive) { + m_outlinePrimitive->onThemeChanged(outlineLayoutMetrics(), outlineBorderMetrics()); + } if (m_componentHostingFocusVisual) { if (m_componentHostingFocusVisual->m_focusPrimitive->m_focusInnerPrimitive) { auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/); @@ -156,10 +156,18 @@ void ComponentView::updateProps( if ((m_flags & ComponentViewFeatures::Background) == ComponentViewFeatures::Background) { if (oldViewProps.backgroundColor != newViewProps.backgroundColor) { - if (newViewProps.backgroundColor) { - Visual().as().Brush(theme()->Brush(*newViewProps.backgroundColor)); + if (facebook::react::isColorMeaningful(newViewProps.backgroundColor)) { + if (!m_backgroundVisual) { + m_backgroundVisual = m_compContext.CreateSpriteVisual(); + m_backgroundVisual.RelativeSizeWithOffset({0, 0}, {1.0f, 1.0f}); + Visual().InsertAt(m_backgroundVisual, 0); + } + m_backgroundVisual.Brush(theme()->Brush(*newViewProps.backgroundColor)); + updateClippingPath(m_layoutMetrics, *viewProps()); } else { - Visual().as().Brush(nullptr); + if (m_backgroundVisual) { + m_backgroundVisual.Brush(nullptr); + } } } } @@ -168,6 +176,16 @@ void ComponentView::updateProps( m_borderPrimitive->updateProps(oldViewProps, newViewProps); } + if (m_outlinePrimitive) { + if (oldViewProps.outlineOffset != newViewProps.outlineOffset || + oldViewProps.outlineWidth != newViewProps.outlineWidth || + oldViewProps.borderRadii != newViewProps.borderRadii || + oldViewProps.outlineColor != newViewProps.outlineColor || + oldViewProps.outlineStyle != newViewProps.outlineStyle) { + m_outlinePrimitive->markNeedsUpdate(); + } + } + if (m_componentHostingFocusVisual) { if (!newViewProps.enableFocusRing) { m_componentHostingFocusVisual->hostFocusVisual(false, get_strong()); @@ -202,8 +220,9 @@ void ComponentView::updateProps( void ComponentView::updateLayoutMetrics( facebook::react::LayoutMetrics const &layoutMetrics, facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept { + updateClippingPath(layoutMetrics, *viewProps()); + if ((m_flags & ComponentViewFeatures::NativeBorder) == ComponentViewFeatures::NativeBorder) { - updateClippingPath(layoutMetrics, *viewProps()); OuterVisual().Size( {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor, layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor}); @@ -220,6 +239,9 @@ void ComponentView::updateLayoutMetrics( if (m_borderPrimitive) { m_borderPrimitive->markNeedsUpdate(); } + if (m_outlinePrimitive) { + m_outlinePrimitive->markNeedsUpdate(); + } if (m_componentHostingFocusVisual) { m_componentHostingFocusVisual->updateFocusLayoutMetrics(); @@ -303,6 +325,23 @@ void ComponentView::FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentView if (m_borderPrimitive) { m_borderPrimitive->finalize(m_layoutMetrics, borderMetrics); } + + auto outlineMetrics = outlineBorderMetrics(); + if (!m_outlinePrimitive && BorderPrimitive::requiresBorder(outlineMetrics, theme())) { + m_outlinePrimitive = std::make_shared(*this); + Visual().InsertAt( + m_outlinePrimitive->RootVisual(), + (m_backgroundVisual ? 1 : 0) + (m_borderPrimitive ? m_borderPrimitive->numberOfVisuals() : 0)); + } + + if (m_outlinePrimitive) { + auto offset = pixelRoundAndScaleBorderWidth(viewProps()->outlineWidth, m_layoutMetrics.pointScaleFactor) + + std::round(viewProps()->outlineOffset * m_layoutMetrics.pointScaleFactor); + m_outlinePrimitive->RootVisual().Offset({-offset, -offset, 0.0f}); + m_outlinePrimitive->RootVisual().RelativeSizeWithOffset({offset * 2, offset * 2}, {1.0f, 1.0f}); + + m_outlinePrimitive->finalize(outlineLayoutMetrics(), outlineMetrics); + } } if (m_componentHostingFocusVisual) { @@ -583,6 +622,67 @@ facebook::react::LayoutMetrics ComponentView::focusLayoutMetrics(bool inner) con return layoutMetrics; } +facebook::react::LayoutMetrics ComponentView::outlineLayoutMetrics() const noexcept { + auto &props = *viewProps(); + auto offset = (pixelRoundAndScaleBorderWidth(viewProps()->outlineWidth, m_layoutMetrics.pointScaleFactor) + + std::round(viewProps()->outlineOffset * m_layoutMetrics.pointScaleFactor)) / + m_layoutMetrics.pointScaleFactor; + facebook::react::LayoutMetrics layoutMetrics = m_layoutMetrics; + layoutMetrics.frame.origin.x -= offset; + layoutMetrics.frame.origin.y -= offset; + layoutMetrics.frame.size.height += offset * 2; + layoutMetrics.frame.size.width += offset * 2; + return layoutMetrics; +} + +facebook::react::BorderMetrics ComponentView::outlineBorderMetrics() const noexcept { + auto &props = *viewProps(); + + facebook::react::BorderMetrics metrics = BorderPrimitive::resolveAndAlignBorderMetrics(m_layoutMetrics, props); + metrics.borderColors.bottom = metrics.borderColors.left = metrics.borderColors.right = metrics.borderColors.top = + props.outlineColor; + + auto offset = pixelRoundAndScaleBorderWidth(viewProps()->outlineWidth, m_layoutMetrics.pointScaleFactor) + + std::round(viewProps()->outlineOffset * m_layoutMetrics.pointScaleFactor); + + if (metrics.borderRadii.bottomLeft.horizontal) + metrics.borderRadii.bottomLeft.horizontal = std::max(0.0f, metrics.borderRadii.bottomLeft.horizontal + offset); + if (metrics.borderRadii.bottomLeft.vertical) + metrics.borderRadii.bottomLeft.vertical = std::max(0.0f, metrics.borderRadii.bottomLeft.vertical + offset); + if (metrics.borderRadii.bottomRight.horizontal) + metrics.borderRadii.bottomRight.horizontal = std::max(0.0f, metrics.borderRadii.bottomRight.horizontal + offset); + if (metrics.borderRadii.bottomRight.vertical) + metrics.borderRadii.bottomRight.vertical = std::max(0.0f, metrics.borderRadii.bottomRight.vertical + offset); + if (metrics.borderRadii.topLeft.horizontal) + metrics.borderRadii.topLeft.horizontal = std::max(0.0f, metrics.borderRadii.topLeft.horizontal + offset); + if (metrics.borderRadii.topLeft.vertical) + metrics.borderRadii.topLeft.vertical = std::max(0.0f, metrics.borderRadii.topLeft.vertical + offset); + if (metrics.borderRadii.topRight.horizontal) + metrics.borderRadii.topRight.horizontal = std::max(0.0f, metrics.borderRadii.topRight.horizontal + offset); + if (metrics.borderRadii.topRight.vertical) + metrics.borderRadii.topRight.vertical = std::max(0.0f, metrics.borderRadii.topRight.vertical + offset); + + static_assert( + facebook::react::BorderStyle::Solid == + static_cast(facebook::react::OutlineStyle::Solid)); + static_assert( + facebook::react::BorderStyle::Dotted == + static_cast(facebook::react::OutlineStyle::Dotted)); + static_assert( + facebook::react::BorderStyle::Dashed == + static_cast(facebook::react::OutlineStyle::Dashed)); + assert( + props.outlineStyle == facebook::react::OutlineStyle::Solid || + props.outlineStyle == facebook::react::OutlineStyle::Dotted || + props.outlineStyle == facebook::react::OutlineStyle::Dashed); + metrics.borderStyles.bottom = metrics.borderStyles.left = metrics.borderStyles.right = metrics.borderStyles.top = + static_cast(props.outlineStyle); + + metrics.borderWidths.bottom = metrics.borderWidths.left = metrics.borderWidths.right = metrics.borderWidths.top = + pixelRoundAndScaleBorderWidth(viewProps()->outlineWidth, m_layoutMetrics.pointScaleFactor); + return metrics; +} + facebook::react::BorderMetrics ComponentView::focusBorderMetrics( bool inner, const facebook::react::LayoutMetrics &layoutMetrics) const noexcept { @@ -656,7 +756,7 @@ void ComponentView::hostFocusVisual(bool show, winrt::com_ptr vie assert( view.get() == this); // When not using lifted comp, focus visuals should always host within their own component - OuterVisual().InsertAt(m_focusPrimitive->m_focusVisual, 1); + OuterVisual().InsertAt(m_focusPrimitive->m_focusVisual, (m_backgroundVisual ? 2 : 1)); } } @@ -900,9 +1000,23 @@ void ComponentView::Toggle() noexcept { // no-op } +// This offset ensures that the m_borderPrimitive inserts its layers above the background +int32_t ComponentView::borderInsertAtIndex() const noexcept { + return m_backgroundVisual ? 1 : 0; +} + +winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ComponentView::VisualToApplyBackgroundClipTo() + const noexcept { + return m_backgroundVisual; +} + void ComponentView::updateClippingPath( facebook::react::LayoutMetrics const &layoutMetrics, const facebook::react::ViewProps &viewProps) noexcept { + auto clipTarget = VisualToApplyBackgroundClipTo(); + if (!clipTarget) + return; + auto borderMetrics = BorderPrimitive::resolveAndAlignBorderMetrics(layoutMetrics, viewProps); bool hasRoundedCorners = borderMetrics.borderRadii.topLeft.horizontal != 0 || @@ -921,10 +1035,10 @@ void ComponentView::updateClippingPath( winrt::com_ptr pathGeometry = BorderPrimitive::GenerateRoundedRectPathGeometry( m_compContext, borderMetrics.borderRadii, {0, 0, 0, 0}, {0, 0, viewWidth, viewHeight}); - Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath( + clipTarget.as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath( pathGeometry.get()); } else { - Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(nullptr); + clipTarget.as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(nullptr); } } @@ -936,6 +1050,9 @@ void ComponentView::indexOffsetForBorder(uint32_t &index) const noexcept { if (m_borderPrimitive) { index += m_borderPrimitive->numberOfVisuals(); } + if (m_outlinePrimitive) { + index += 1; + } } void ComponentView::OnRenderingDeviceLost() noexcept {} @@ -1086,7 +1203,7 @@ void ViewComponentView::ensureVisual() noexcept { } else { m_visual = createVisual(); } - OuterVisual().InsertAt(m_visual, 0); + OuterVisual().InsertAt(m_visual, m_backgroundVisual ? 1 : 0); } } @@ -1384,7 +1501,7 @@ void ViewComponentView::updateChildrenClippingPath( } // Insert m_childrenContainer after border visuals in m_visual - Visual().InsertAt(m_childrenContainer, borderCount); + Visual().InsertAt(m_childrenContainer, (m_backgroundVisual ? 1 : 0) + borderCount); // Use relative sizing so container automatically tracks parent's size m_childrenContainer.RelativeSizeWithOffset({0, 0}, {1, 1}); diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h index 242627ff558..b7fc0d4cb4c 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h @@ -111,6 +111,9 @@ struct ComponentView : public ComponentViewT< bool getAcccessiblityIsReadOnly() noexcept override; ToggleState getToggleState() noexcept override; void Toggle() noexcept override; + + int32_t borderInsertAtIndex() const noexcept; + virtual winrt::Microsoft::ReactNative::implementation::ClipState getClipState() noexcept; virtual std::pair cursor() const noexcept; @@ -130,6 +133,8 @@ struct ComponentView : public ComponentViewT< void ThemeChanged(winrt::event_token const &token) noexcept; protected: + virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual VisualToApplyBackgroundClipTo() + const noexcept; bool anyHitTestHelper( facebook::react::Tag &targetTag, facebook::react::Point &ptContent, @@ -141,6 +146,7 @@ struct ComponentView : public ComponentViewT< winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext m_compContext; comp::CompositionPropertySet m_centerPropSet{nullptr}; facebook::react::SharedViewEventEmitter m_eventEmitter; + winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_backgroundVisual{nullptr}; private: void updateFocusLayoutMetrics() noexcept; @@ -157,6 +163,9 @@ struct ComponentView : public ComponentViewT< facebook::react::BorderMetrics focusBorderMetrics(bool inner, const facebook::react::LayoutMetrics &layoutMetrics) const noexcept; + facebook::react::LayoutMetrics outlineLayoutMetrics() const noexcept; + facebook::react::BorderMetrics outlineBorderMetrics() const noexcept; + virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual visualToHostFocus() noexcept; virtual winrt::com_ptr focusVisualRoot(const facebook::react::Rect &focusRect) noexcept; @@ -168,6 +177,7 @@ struct ComponentView : public ComponentViewT< winrt::com_ptr m_componentHostingFocusVisual; // The component that we are showing our focus visuals within std::shared_ptr m_borderPrimitive; + std::shared_ptr m_outlinePrimitive; std::unique_ptr m_focusPrimitive{nullptr}; winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_outerVisual{nullptr}; winrt::event> m_themeChangedEvent; diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp index bc3e5c8c6cf..1b21d3cf2d3 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp @@ -237,6 +237,11 @@ void ImageComponentView::onThemeChanged() noexcept { Super::onThemeChanged(); } +winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ImageComponentView::VisualToApplyBackgroundClipTo() + const noexcept { + return Visual(); +} + void ImageComponentView::ensureDrawingSurface() noexcept { assert(m_reactContext.UIDispatcher().HasThreadAccess()); diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.h index e4c60e247a0..a63f8bc1443 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.h @@ -53,6 +53,8 @@ struct ImageComponentView : ImageComponentViewTSetTextAlignment(alignment)); + + if (alignment != m_textLayout->GetTextAlignment()) + winrt::check_hresult(m_textLayout->SetTextAlignment(alignment)); } requireNewBrush = true; diff --git a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/HostPlatformColor.h b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/HostPlatformColor.h index 4fa717b94e6..163b0573258 100644 --- a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/HostPlatformColor.h +++ b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/HostPlatformColor.h @@ -99,6 +99,9 @@ inline ColorComponents colorComponentsFromHostPlatformColor(Color color) { // windows inline bool hostPlatformColorIsColorMeaningful(Color color) noexcept { + if (color.m_platformColor.size()) + return true; + auto windowsColor = color.AsWindowsColor(); return windowsColor.A > 0; } diff --git a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp index c9fd6c8e9f8..1a9afbf97d8 100644 --- a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp @@ -196,12 +196,7 @@ void WindowsTextLayoutManager::GetTextLayout( )); // Apply max width constraint and ellipsis trimming to ensure consistency with rendering - DWRITE_TEXT_METRICS metrics; - winrt::check_hresult(spTextLayout->GetMetrics(&metrics)); - - if (metrics.width > size.width) { - spTextLayout->SetMaxWidth(size.width); - } + spTextLayout->SetMaxWidth(size.width); // Apply DWRITE_TRIMMING for ellipsizeMode DWRITE_TRIMMING trimming = {}; @@ -396,7 +391,7 @@ void WindowsTextLayoutManager::GetTextLayoutByAdjustingFontSizeToFit( } } -// measure entire text (inluding attachments) +// measure entire text (including attachments) TextMeasurement TextLayoutManager::measure( const AttributedStringBox &attributedStringBox, const ParagraphAttributes ¶graphAttributes, diff --git a/vnext/Microsoft.ReactNative/IReactPackageBuilder.idl b/vnext/Microsoft.ReactNative/IReactPackageBuilder.idl index 4a9675ab5f3..866150c9c02 100644 --- a/vnext/Microsoft.ReactNative/IReactPackageBuilder.idl +++ b/vnext/Microsoft.ReactNative/IReactPackageBuilder.idl @@ -32,6 +32,11 @@ namespace Microsoft.ReactNative "NOTE: TurboModules using JSI directly will not run correctly while using @ReactInstanceSettings.UseWebDebugger") void AddTurboModule(String moduleName, ReactModuleProvider moduleProvider); + DOC_STRING("Adds a custom native module. See @ReactModuleProvider. This will register the" + "module as a TurboModule. This module will be created and have init called as soon as the" + "instance is created, event before the module is accessed from JavaScript.") + void AddEagerInitTurboModule(String moduleName, ReactModuleProvider moduleProvider); + #if !defined(CORE_ABI) && !defined(USE_FABRIC) DOC_STRING("Adds a custom view manager. See @ReactViewManagerProvider.") void AddViewManager(String viewManagerName, ReactViewManagerProvider viewManagerProvider); diff --git a/vnext/Microsoft.ReactNative/ReactHost/ReactInstanceWin.cpp b/vnext/Microsoft.ReactNative/ReactHost/ReactInstanceWin.cpp index 2bb37e363d9..9ba08175cd4 100644 --- a/vnext/Microsoft.ReactNative/ReactHost/ReactInstanceWin.cpp +++ b/vnext/Microsoft.ReactNative/ReactHost/ReactInstanceWin.cpp @@ -349,6 +349,7 @@ void ReactInstanceWin::LoadModules( registerTurboModule( L"FabricUIManagerBinding", winrt::Microsoft::ReactNative::MakeModuleProvider<::Microsoft::ReactNative::FabricUIManager>()); + turboModulesProvider->AddEagerInit("FabricUIManagerBinding"); } #endif @@ -357,6 +358,7 @@ void ReactInstanceWin::LoadModules( L"UIManager", // TODO: Use MakeTurboModuleProvider after it satisfies ReactNativeSpecs::UIManagerSpec winrt::Microsoft::ReactNative::MakeModuleProvider<::Microsoft::ReactNative::UIManager>()); + turboModulesProvider->AddEagerInit("UIManager"); #endif #ifndef CORE_ABI diff --git a/vnext/Microsoft.ReactNative/ReactPackageBuilder.cpp b/vnext/Microsoft.ReactNative/ReactPackageBuilder.cpp index 68ae9158ab2..b8e1206f5f5 100644 --- a/vnext/Microsoft.ReactNative/ReactPackageBuilder.cpp +++ b/vnext/Microsoft.ReactNative/ReactPackageBuilder.cpp @@ -59,6 +59,13 @@ void ReactPackageBuilder::AddTurboModule( m_turboModulesProvider->AddModuleProvider(moduleName, moduleProvider, true); } +void ReactPackageBuilder::AddEagerInitTurboModule( + hstring const &moduleName, + ReactModuleProvider const &moduleProvider) noexcept { + m_turboModulesProvider->AddModuleProvider(moduleName, moduleProvider, true); + m_turboModulesProvider->AddEagerInit(winrt::to_string(moduleName)); +} + #ifdef USE_FABRIC void ReactPackageBuilder::AddViewComponent( winrt::hstring componentName, diff --git a/vnext/Microsoft.ReactNative/ReactPackageBuilder.h b/vnext/Microsoft.ReactNative/ReactPackageBuilder.h index cb69db9d31d..c12e952ab14 100644 --- a/vnext/Microsoft.ReactNative/ReactPackageBuilder.h +++ b/vnext/Microsoft.ReactNative/ReactPackageBuilder.h @@ -43,6 +43,7 @@ struct ReactPackageBuilder : winrt::implements< void AddViewManager(hstring const &viewManagerName, ReactViewManagerProvider const &viewManagerProvider) noexcept; #endif void AddTurboModule(hstring const &moduleName, ReactModuleProvider const &moduleProvider) noexcept; + void AddEagerInitTurboModule(hstring const &moduleName, ReactModuleProvider const &moduleProvider) noexcept; #ifdef USE_FABRIC // IReactPackageBuilderFabric diff --git a/vnext/Microsoft.ReactNative/TurboModulesProvider.cpp b/vnext/Microsoft.ReactNative/TurboModulesProvider.cpp index 4958d057187..28991974022 100644 --- a/vnext/Microsoft.ReactNative/TurboModulesProvider.cpp +++ b/vnext/Microsoft.ReactNative/TurboModulesProvider.cpp @@ -494,16 +494,11 @@ std::shared_ptr TurboModulesProvider::getModule( } std::vector TurboModulesProvider::getEagerInitModuleNames() noexcept { - std::vector eagerModules; - auto it = m_moduleProviders.find("UIManager"); - if (it != m_moduleProviders.end()) { - eagerModules.push_back("UIManager"); - } - it = m_moduleProviders.find("FabricUIManagerBinding"); - if (it != m_moduleProviders.end()) { - eagerModules.push_back("FabricUIManagerBinding"); - } - return eagerModules; + return m_eagerInitModuleNames; +} + +void TurboModulesProvider::AddEagerInit(std::string moduleName) noexcept { + m_eagerInitModuleNames.push_back(moduleName); } void TurboModulesProvider::SetReactContext(const IReactContext &reactContext) noexcept { diff --git a/vnext/Microsoft.ReactNative/TurboModulesProvider.h b/vnext/Microsoft.ReactNative/TurboModulesProvider.h index 99436dd82c4..ebaf6f9cf45 100644 --- a/vnext/Microsoft.ReactNative/TurboModulesProvider.h +++ b/vnext/Microsoft.ReactNative/TurboModulesProvider.h @@ -26,6 +26,7 @@ class TurboModulesProvider final : public facebook::react::TurboModuleRegistry { winrt::hstring const &moduleName, ReactModuleProvider const &moduleProvider, bool overwriteExisting) noexcept; + void AddEagerInit(std::string moduleName) noexcept; std::shared_ptr const &LongLivedObjectCollection() noexcept; private: @@ -33,6 +34,7 @@ class TurboModulesProvider final : public facebook::react::TurboModuleRegistry { std::shared_ptr m_longLivedObjectCollection{ std::make_shared()}; std::unordered_map m_moduleProviders; + std::vector m_eagerInitModuleNames; IReactContext m_reactContext; };