Merge pull request #6769 from Youssef1313/issues/6751

fix: Fix linear gradient border not working on Wasm

Author: mergify[bot]

src/SamplesApp/SamplesApp.UITests/Windows_UI_Xaml_Controls/BorderTests/Border_Tests.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.Drawing;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
@@ -165,6 +166,24 @@ public void Border_CornerRadius_Clipping()
 			);
 		}
 
+		[Test]
+		[AutoRetry]
+		[ActivePlatforms(Platform.Android, Platform.Browser)] // iOS not working currently. https://github.com/unoplatform/uno/issues/6749
+		public void Border_LinearGradient()
+		{
+			Run("UITests.Windows_UI_Xaml_Controls.BorderTests.Border_LinearGradientBrush");
+
+			var textBoxRect = _app.GetPhysicalRect("MyTextBox");
+
+			using var screenshot = TakeScreenshot("Screenshot");
+
+			// The color near the end is blueish.
+			ImageAssert.HasColorAt(screenshot, (float)(textBoxRect.CenterX + 0.45 * textBoxRect.Width), textBoxRect.Y, Color.FromArgb(31, 0, 224), tolerance: 20);
+
+			// The color near the start is reddish.
+			ImageAssert.HasColorAt(screenshot, (float)(textBoxRect.CenterX - 0.45 * textBoxRect.Width), textBoxRect.Y, Color.Red, tolerance: 20);
+		}
+
 		private void SetBorderProperty(string borderName, string propertyName, string value)
 		{
 			Console.WriteLine($"Setting {borderName}'s {propertyName} to {value}");

src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/BorderTests/Border_LinearGradientBrush.xaml

@@ -9,40 +9,52 @@
     d:DesignHeight="300"
     d:DesignWidth="400">
 
-	<Grid>
-		<Border Margin="3"
-				Width="150"
-				Height="100"
-				CornerRadius="40"
-				BorderThickness="4"
-				BorderBrush="Black">
-			<Border.Background>
-				<LinearGradientBrush StartPoint="0,0"
-									 EndPoint="1,1">
-					<GradientStop Color="Yellow"
-								  Offset="0.0" />
-					<GradientStop Color="Red"
-								  Offset="0.1" />
-					<GradientStop Color="Blue"
-								  Offset="0.2" />
-					<GradientStop Color="LimeGreen"
-								  Offset="0.3" />
-					<GradientStop Color="Blue"
-								  Offset="0.4" />
-					<GradientStop Color="Red"
-								  Offset="0.5" />
-					<GradientStop Color="Yellow"
-								  Offset="0.6" />
-					<GradientStop Color="Red"
-								  Offset="0.7" />
-					<GradientStop Color="Blue"
-								  Offset="0.8" />
-					<GradientStop Color="LimeGreen"
-								  Offset="0.9" />
-					<GradientStop Color="Blue"
-								  Offset="1.0" />
+	<StackPanel>
+	    <TextBox x:Name="MyTextBox">
+	        <TextBox.BorderBrush>
+				<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+					<LinearGradientBrush.GradientStops>
+						<GradientStop Offset="0.33" Color="Red"/>
+						<GradientStop Offset="1.0" Color="Blue"/>
+					</LinearGradientBrush.GradientStops>
 				</LinearGradientBrush>
-			</Border.Background>
-		</Border>
-	</Grid>
+			</TextBox.BorderBrush>
+		</TextBox>
+		<Grid>
+			<Border Margin="3"
+					Width="150"
+					Height="100"
+					CornerRadius="40"
+					BorderThickness="4"
+					BorderBrush="Black">
+				<Border.Background>
+					<LinearGradientBrush StartPoint="0,0"
+										 EndPoint="1,1">
+						<GradientStop Color="Yellow"
+									  Offset="0.0" />
+						<GradientStop Color="Red"
+									  Offset="0.1" />
+						<GradientStop Color="Blue"
+									  Offset="0.2" />
+						<GradientStop Color="LimeGreen"
+									  Offset="0.3" />
+						<GradientStop Color="Blue"
+									  Offset="0.4" />
+						<GradientStop Color="Red"
+									  Offset="0.5" />
+						<GradientStop Color="Yellow"
+									  Offset="0.6" />
+						<GradientStop Color="Red"
+									  Offset="0.7" />
+						<GradientStop Color="Blue"
+									  Offset="0.8" />
+						<GradientStop Color="LimeGreen"
+									  Offset="0.9" />
+						<GradientStop Color="Blue"
+									  Offset="1.0" />
+					</LinearGradientBrush>
+				</Border.Background>
+			</Border>
+		</Grid>
+	</StackPanel>
 </UserControl>

src/Uno.UI/UI/Xaml/Controls/Border/BorderLayerRenderer.wasm.cs

@@ -90,7 +90,8 @@ public static void SetBorder(UIElement element, Thickness thickness, Brush brush
 							("border-style", "solid"),
 							("border-color", ""),
 							("border-image", border),
-							("border-width", borderWidth));
+							("border-width", borderWidth),
+							("border-image-slice", "1"));
 						break;
 					case AcrylicBrush acrylicBrush:
 						var acrylicFallbackColor = acrylicBrush.FallbackColorWithOpacity;