-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Fixing box with corner radius doesn't have shadow #15614
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: 0.82-stable
Are you sure you want to change the base?
Conversation
| if ( | ||
| component === 'Flyout' || | ||
| component === 'XAML' || | ||
| component === 'Xaml WinUI3 (Experimental, for Fabric)' || |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why this change added?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The visitAllPages.test.ts E2E test iterates through all component examples in RNTester and visits each page. Some components are skipped because they have known issues with E2E automation (Flyout, XAML, SwipeableCard).
Please see the pipeline error in 0.82 I was getting without this change https://dev.azure.com/ms/react-native-windows/_build/results?buildId=628033&view=logs&s=843cf892-394e-5a95-58a2-f157705529be&j=91433fce-a6a7-5848-fbf7-7248349c63dd
| Visual()); | ||
| if (innerVisual) { | ||
| // Create a VisualSurface that captures the visual (with its clip applied) | ||
| auto visualSurface = msCompositor.CreateVisualSurface(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are we doing this even for views that do not have a shadow? Looks expensive.
Description
The
boxShadowstyle property does not render whenborderRadiusis also set on a View. Only one attribute works at a time - the shadow is ignored if both are presentType of Change
Why
In composition, when a geometric clip is applied to a visual for
borderRadius, the clip affects both the visual content AND itsDropShadowSince shadows extend outside the visual bounds, the shadow gets clipped and becomes invisible.What
CompositionSwitcher.idl: Added Mask() and SourcePolicy() methods to IDropShadow interface
CompositionContextHelper.cpp: Implemented Mask() and SourcePolicy() in CompDropShadow, added CompositionDropShadowSourcePolicy type mappings
CompositionViewComponentView.cpp: Updated applyShadowProps() to conditionally use the mask approach when borderRadius is present
Screenshots
Before
After

Testing
If you added tests that prove your changes are effective or that your feature works, add a few sentences here detailing the added test scenarios.
Changelog
Should this change be included in the release notes: yes
Fixed issue where box with corner radius doesn't have shadow
Microsoft Reviewers: Open in CodeFlow
Microsoft Reviewers: Open in CodeFlow
Microsoft Reviewers: Open in CodeFlow