Merge pull request #9958 from Youssef1313/issues/5440-wasm

fix(Wasm): Fix BorderRadius not rendering properly when it's greater than half of width or height
unoplatform · Sep 29, 2022 · 7fd50ce · 7fd50ce
2 parents e8e4fca + b540a3a
commit 7fd50ce
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git a/src/SamplesApp/SamplesApp.UITests/Windows_UI_Xaml_Controls/BorderTests/Border_Tests.cs b/src/SamplesApp/SamplesApp.UITests/Windows_UI_Xaml_Controls/BorderTests/Border_Tests.cs
@@ -55,6 +55,31 @@ public void Check_CornerRadius_Border_Basic()
 				ExpectedPixels.At(sample.Right - eighth, sample.Bottom - eighth).Named("bottom right corner").Pixel(white),
 				ExpectedPixels.At(sample.X + eighth, sample.Bottom - eighth).Named("bottom left corner").Pixel(white)
 			);
+
+#if __WASM__
+			// See https://github.com/unoplatform/uno/issues/5440 for the scenario being tested.
+			var sample2 = _app.GetPhysicalRect("Sample2");
+
+			var top = sample2.Y + 1;
+			ImageAssert.HasColorAt(result, sample2.CenterX, top, Color.Red, tolerance: 20);
+			ImageAssert.HasColorAt(result, sample2.CenterX + 25, top, Color.White);
+			ImageAssert.HasColorAt(result, sample2.CenterX - 25, top, Color.White);
+
+			var bottom = sample2.Bottom - 1;
+			ImageAssert.HasColorAt(result, sample2.CenterX, bottom, Color.Red, tolerance: 20);
+			ImageAssert.HasColorAt(result, sample2.CenterX + 20, bottom, Color.White);
+			ImageAssert.HasColorAt(result, sample2.CenterX - 20, bottom, Color.White);
+
+			var right = sample2.Right - 1;
+			ImageAssert.HasColorAt(result, right, sample2.CenterY, Color.Red, tolerance: 20);
+			ImageAssert.HasColorAt(result, right, sample2.CenterY - 10, Color.White);
+			ImageAssert.HasColorAt(result, right, sample2.CenterY + 10, Color.White);
+
+			var left = sample2.X + 2;
+			ImageAssert.HasColorAt(result, left, sample2.CenterY, Color.Red, tolerance: 20);
+			ImageAssert.HasColorAt(result, left, sample2.CenterY - 10, Color.White);
+			ImageAssert.HasColorAt(result, left, sample2.CenterY + 10, Color.White);
+#endif
 		}
 
 		[Test]

diff --git a/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/BorderTests/Border_CornerRadius.xaml b/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/BorderTests/Border_CornerRadius.xaml
@@ -18,6 +18,14 @@
 					Height="100"
 					CornerRadius="50" />
 
+			<!-- Sample for https://github.com/unoplatform/uno/issues/5440 -->
+			<Border Height="30" />
+			<Border x:Name="Sample2"
+					Width="128"
+					Height="64"
+					Background="Red"
+					CornerRadius="128" />
+
 			<Border Height="30" />
 			<Border Width="100"
 					Height="50"

diff --git a/src/Uno.UI/UI/Xaml/Controls/Border/BorderLayerRenderer.wasm.cs b/src/Uno.UI/UI/Xaml/Controls/Border/BorderLayerRenderer.wasm.cs
@@ -55,7 +55,7 @@ public static void SetCornerRadius(UIElement element, CornerRadius cornerRadius)
 			}
 			else
 			{
-				var borderRadiusCssString = $"{cornerRadius.TopLeft.ToStringInvariant()}px {cornerRadius.TopRight.ToStringInvariant()}px {cornerRadius.BottomRight.ToStringInvariant()}px {cornerRadius.BottomLeft.ToStringInvariant()}px";
+				var borderRadiusCssString = $"min(50%,{cornerRadius.TopLeft.ToStringInvariant()}px) min(50%,{cornerRadius.TopRight.ToStringInvariant()}px) min(50%,{cornerRadius.BottomRight.ToStringInvariant()}px) min(50%,{cornerRadius.BottomLeft.ToStringInvariant()}px)";
 				element.SetStyle(
 					("border-radius", borderRadiusCssString),
 					("overflow", "hidden")); // overflow: hidden is required here because the clipping can't do its job when it's non-rectangular.