Fix and verify shadow / shape / clip

src/Controls/tests/TestCases.HostApp/Issues/Issue18204.xaml → src/Controls/tests/TestCases.HostApp/Issues/BorderAndShadowDrawingVerifications.xaml

@@ -1,37 +1,54 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             x:Class="Maui.Controls.Sample.Issues.Issue18204"
-             Title="Issue18204">
+             x:Class="Maui.Controls.Sample.Issues.BorderAndShadowDrawingVerifications"
+             Title="BorderAndShadowDrawingVerifications">
     <ContentPage.Resources>
       <Color x:Key="TealFadeStart">#1B836D</Color>
       <Color x:Key="TealFadeEnd">#015b66</Color>
       <Color x:Key="TealFadeStartHover">#2aab88</Color>
       <Color x:Key="TealFadeEndHover">#026875</Color>
     </ContentPage.Resources>
-    <VerticalStackLayout Padding="24" Spacing="30">
-      <Button AutomationId="ChangeSize"
-              Clicked="ChangeSizeClicked"
-              Text="Change Size"
-              BackgroundColor="WhiteSmoke"
-              WidthRequest="200" />
-      <Button AutomationId="ShowHide"
-              Clicked="ShowHideClicked"
-              Text="Show/Hide"
-              BackgroundColor="WhiteSmoke"
-              WidthRequest="200" />
+    <VerticalStackLayout Padding="16" Spacing="8">
+      <Grid HorizontalOptions="Center" RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,Auto,Auto" ColumnSpacing="8" RowSpacing="8">
+        <Button AutomationId="ChangeSize"
+                Grid.Row="0"
+                Grid.Column="0"
+                Clicked="ChangeSizeClicked"
+                Text="Change Size" />
+        <Button AutomationId="ShowHide"
+                Grid.Row="0"
+                Grid.Column="1"
+                Clicked="ShowHideClicked"
+                Text="Show/Hide" />
+        <Button AutomationId="ChangeClip"
+                Grid.Row="0"
+                Grid.Column="2"
+                Clicked="ChangeClipClicked"
+                Text="Change Clip" />
+        <Button AutomationId="ChangeShadow"
+                Grid.Row="1"
+                Grid.Column="0"
+                Clicked="ChangeShadowClicked"
+                Text="Change Shadow" />
+        <Button AutomationId="ChangeShape"
+                Grid.Row="1"
+                Grid.Column="1"
+                Clicked="ChangeShapeClicked"
+                Text="Change Shape" />
+      </Grid>
       <Border
         HorizontalOptions="Center"
         BackgroundColor="LightBlue"
-        Shadow="{Shadow Brush=Black, Offset='0,2', Radius=24, Opacity=0.2}"
+        Shadow="{Shadow Brush=Black, Offset='0,2', Radius=16, Opacity=0.6}"
         StrokeShape="{RoundRectangle CornerRadius=20}">
         <Button x:Name="TheButton" BackgroundColor="LightGreen" WidthRequest="200" HeightRequest="400" />
       </Border>
       <Border x:Name="TheOtherButton"
               BackgroundColor="Transparent"
               StrokeShape="{RoundRectangle CornerRadius=20}"
               StrokeThickness="0"
-              Shadow="{Shadow Brush=Black, Offset='0,2', Radius=24, Opacity=0.5}"
+              Shadow="{Shadow Brush=Black, Offset='0,2', Radius=32, Opacity=0.8}"
               IsVisible="False"
               Stroke="Transparent">
         <Border.Background>

src/Controls/tests/TestCases.HostApp/Issues/BorderAndShadowDrawingVerifications.xaml.cs

@@ -0,0 +1,50 @@
+using System;
+using Microsoft.Maui;
+using Microsoft.Maui.Controls;
+using Microsoft.Maui.Controls.Shapes;
+using Microsoft.Maui.Controls.Xaml;
+
+namespace Maui.Controls.Sample.Issues;
+
+[XamlCompilation(XamlCompilationOptions.Compile)]
+[Issue(IssueTracker.None, 0, "Border and shadow drawing verifications", PlatformAffected.All)]
+
+public partial class BorderAndShadowDrawingVerifications : ContentPage
+{
+	public BorderAndShadowDrawingVerifications()
+	{
+		InitializeComponent();
+	}
+
+	private void ChangeSizeClicked(object sender, EventArgs e)
+	{
+		var button = TheButton;
+		button.CancelAnimations();
+		var targetHeight = button.HeightRequest == 200.0 ? 400.0 : 200.0;
+		button.Animate("Height", new Animation(v => button.HeightRequest = v, button.Height, targetHeight, Easing.Linear));
+	}
+
+	private void ChangeShadowClicked(object sender, EventArgs e)
+	{
+		var border = (Border)TheButton.Parent;
+		border.Shadow.Radius += 16;
+	}
+
+	private void ChangeShapeClicked(object sender, EventArgs e)
+	{
+		var border = (Border)TheButton.Parent;
+		border.StrokeShape = new Ellipse();
+	}
+
+	private void ChangeClipClicked(object sender, EventArgs e)
+	{
+		var border = (Border)TheButton.Parent;
+		border.Clip = new RoundRectangleGeometry(40, new Rect(0, 0, 80, 80));
+	}
+
+	private void ShowHideClicked(object sender, EventArgs e)
+	{
+		var button = TheOtherButton;
+		button.IsVisible = !button.IsVisible;
+	}
+}

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/BorderAndShadowDrawingVerifications.cs

@@ -0,0 +1,43 @@
+using NUnit.Framework;
+using UITest.Appium;
+using UITest.Core;
+
+namespace Microsoft.Maui.TestCases.Tests.Issues
+{
+	public class BorderAndShadowDrawingVerifications : _IssuesUITest
+	{
+		public BorderAndShadowDrawingVerifications(TestDevice device) : base(device) { }
+
+		public override string Issue => "Border and shadow drawing verifications";
+
+		[Test]
+		[Category(UITestCategories.Border)]
+		public async Task BorderAndShadowShouldRenderAndChangeProperly()
+		{
+			// Initial screenshot
+			App.WaitForElement("ChangeSize");
+			VerifyScreenshot("BorderShadowInitialSize");
+
+			// Change size of the border, animation should not lag, this can only be verified manually
+			App.Click("ChangeSize");
+			await Task.Delay(250);
+			VerifyScreenshot("BorderShadowResized");
+
+			// Change shadow radius
+			App.Click("ChangeShadow");
+			VerifyScreenshot("BorderShadowRadiusChanged");
+
+			// Display a border for the first time (initially IsVisible=false)
+			App.Click("ShowHide");
+			VerifyScreenshot("BorderShadowShownForTheFirstTime");
+
+			// Change shape of the border
+			App.Click("ChangeShape");
+			VerifyScreenshot("BorderShadowShapeChanged");
+
+			// Change clip of the border
+			App.Click("ChangeClip");
+			VerifyScreenshot("BorderShadowClipChanged");
+		}
+	}
+}

src/Core/AndroidNative/maui/src/main/java/com/microsoft/maui/PlatformContentViewGroup.java

@@ -28,13 +28,12 @@ public PlatformContentViewGroup(Context context, AttributeSet attrs, int defStyl
 
     /**
      * Set by C#, determining if we need to call getClipPath()
+     * Intentionally invalidates the view in case clip changed
      * @param hasClip
      */
     protected final void setHasClip(boolean hasClip) {
-        if (this.hasClip != hasClip) {
-            this.hasClip = hasClip;
-            postInvalidate();
-        }
+        this.hasClip = hasClip;
+        invalidate();
     }
 
     @Override

src/Core/AndroidNative/maui/src/main/java/com/microsoft/maui/PlatformWrapperView.java

@@ -20,13 +20,12 @@ public PlatformWrapperView(Context context) {
 
     /**
      * Set by C#, determining if we need to call drawShadow()
+     * Intentionally invalidates the view in case shadow definition changed
      * @param hasShadow
      */
     protected final void setHasShadow(boolean hasShadow) {
-        if (this.hasShadow != hasShadow) {
-            this.hasShadow = hasShadow;
-            postInvalidate();
-        }
+        this.hasShadow = hasShadow;
+        invalidate();
     }
 
     @Override