Fixing box with corner radius doesn't have shadow#15614
Fixing box with corner radius doesn't have shadow#15614protikbiswas100 wants to merge 7 commits into0.82-stablefrom
Conversation
| if ( | ||
| component === 'Flyout' || | ||
| component === 'XAML' || | ||
| component === 'Xaml WinUI3 (Experimental, for Fabric)' || |
There was a problem hiding this comment.
Why this change added?
There was a problem hiding this comment.
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.
Are we doing this even for views that do not have a shadow? Looks expensive.
There was a problem hiding this comment.
No, this is not happening for views without a shadow. The applyShadowProps function is only called from updateShadowProps, which has a guard that checks if any shadow-related properties have changed. So the expensive operation is guarded by two conditions - shadow properties must have changed, and there must be a border radius present.
microsoft-github-policy-service
bot
added
the
Needs: Author Feedback
microsoft-github-policy-service
bot
added
the
no-recent-activity
microsoft-github-policy-service
bot
removed
Needs: Author Feedback
3 participants
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