Overflow implementation in Fabric as per Parity to Paper

[Nitin-100]

Description

Type of Change

• New feature (non-breaking change which adds functionality)

Why

The overflow CSS property was not implemented in the Fabric Composition architecture. Paper XAML architecture has supported overflow, but Fabric was missing this functionality entirely. This PR closes the feature gap between the two architectures where views with overflow: hidden do not clip their children in Fabric apps, while they work correctly in Paper apps. This change brings Fabric to parity with Paper by implementing the missing overflow property support.

What

Added overflow clipping support to the Fabric architecture by introducing a dedicated m_contentVisual for mounting children and applying clipping in CompositionViewComponentView.cpp:

1. Created m_contentVisual - A separate visual layer that is a child of m_visual, used specifically for mounting child components. This allows clipping to be applied independently of the border/background visual.

2. Updated ensureVisual() - Creates m_contentVisual as a child of m_visual when the visual is initialized.

3. Updated VisualToMountChildrenInto() - Returns m_contentVisual so all children are mounted into the clippable content visual.

4. Updated updateLayoutMetrics() - Sizes and offsets m_contentVisual to match the content area (excluding borders), and applies overflow clipping using SetClippingPath with a path geometry that accounts for border radii.

The implementation:

• Uses BorderPrimitive::resolveAndAlignBorderMetrics() to get accurate border widths
• Calculates inner border radii by subtracting border widths from outer radii
• Uses BorderPrimitive::GenerateRoundedRectPathGeometry() to create the clip path
• Applies clipping via SetClippingPath on m_contentVisual when getClipsContentToBounds() returns true
• Clears the clip by passing nullptr when overflow is not hidden

This approach properly handles:

• Rectangular clipping (no border radius)
• Rounded corner clipping with border radius
• Border thickness offset for accurate content area clipping

Screenshots

Paper overflow

Fabric with overflow (before)

https://github.com/user-attachments/assets/1986fb93-0380-4c75-9d2f-90f267dd23b6

Testing

overflowTest.tsx

Tested with RNTester View overflow examples and custom overflowTest.tsx by navigating to View component and scrolling to the Overflow section. Verified that:

• Views with overflow: hidden now properly clip overflowing child content
• Rectangular clipping works correctly (no border radius)
• Rounded corner clipping works correctly (with border radius)
• Text overflow clipping works correctly
• Boxes with overflow: visible correctly allow content to extend beyond their bounds

Ran both playground.sln (Paper) and playground-composition.sln (Fabric) to verify identical behavior between the two architectures.

Changelog

Should this change be included in the release notes: yes

Implemented overflow property support for Fabric architecture. Views with overflow: hidden now properly clip their children to the container bounds, achieving parity with Paper architecture. Added m_contentVisual to properly separate content clipping from border rendering.

[HariniMalothu17]

@Nitin-100 Based on the screenshot u shared there is no visual indication here that the 'overflow' prop is actually implemented Please check the screenshot section in this link https://github.com/microsoft/react-native-windows/pull/14527#:~:text=implementation%20of%20View.-,Screenshots,-Recording.2025%2D04

[Nitin-100]

/azp run

[azure-pipelines[bot]]

Azure Pipelines successfully started running 2 pipeline(s).

[acoates-ms]

We already use a clip for rounded corners to clip the background: ComponentView::updateClippingPath.

Really we need to stop doing that for rounded corners, which means fixing our background logic for rounded corners so that that clip is not required. Then we can do this change.

[anupriya13]

Looks like the prop is not working as expected as per the screenshots attached. Please add E2ETestApp unit tests as well and more examples in playground.

[Nitin-100]

Looks like the prop is not working as expected as per the screenshots attached. Please add E2ETestApp unit tests as well and more examples in playground.

Changes are not added yet, I'm busy with release work.

[anupriya13]

Looks like the prop is not working as expected as per the screenshots attached. Please add E2ETestApp unit tests as well and more examples in playground.

Changes are not added yet, I'm busy with release work.

Sure, please convert this PR to draft while you work on it.

[Nitin-100]

Need to work out how to not conflict with the existing clip.

@acoates-ms Please re review it as I have handled all scenarios now.