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 closing 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 implementing clipping logic in CompositionViewComponentView.cpp in two key locations:

1. In updateProps method - Handles overflow property changes when the property value changes dynamically
2. In updateLayoutMetrics method - Applies clipping when layout changes occur

The implementation checks if the overflow property is set to hidden using the yoga style overflow value. When overflow is hidden, it creates an InsetClip with zero insets on all sides to clip content to the visual bounds. For visible or scroll overflow values, it clears the clip by setting it to nullptr. This matches the existing Paper implementation approach which uses RectangleGeometry for clipping in XAML.

Screenshots

##paper overflow

##fabric without overflow

##fabric with overflow

Testing

Tested with RNTester View overflow examples by navigating to View component and scrolling to the Overflow section. Verified that the middle box labeled hidden with overflow hidden property now properly clips overflowing child content, matching Paper behavior exactly. The boxes with overflow undefined and 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.

Microsoft Reviewers: Open in CodeFlow

[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
#14527

[Nitin-100]

/azp run

[azure-pipelines]

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.

[acoates-ms]

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