From 5c2458c89aef802a53494b4765def23f83c7a58e Mon Sep 17 00:00:00 2001 From: Youssef1313 Date: Sun, 25 Sep 2022 13:24:55 +0200 Subject: [PATCH 1/2] fix(Wasm): Fix BorderRadius not rendering properly when it's greater than half of width or height --- src/Uno.UI/UI/Xaml/Controls/Border/BorderLayerRenderer.wasm.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Uno.UI/UI/Xaml/Controls/Border/BorderLayerRenderer.wasm.cs b/src/Uno.UI/UI/Xaml/Controls/Border/BorderLayerRenderer.wasm.cs index 3b503172bf96..f69eaf7dc946 100644 --- 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. From b540a3aa516d9b21200d3e8e7a0665864e27ebec Mon Sep 17 00:00:00 2001 From: Youssef1313 Date: Sun, 25 Sep 2022 17:56:36 +0200 Subject: [PATCH 2/2] test: Add test for CornerRadius --- .../BorderTests/Border_Tests.cs | 25 +++++++++++++++++++ .../BorderTests/Border_CornerRadius.xaml | 8 ++++++ 2 files changed, 33 insertions(+) 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 index 4a569321aabd..2ddc9148ce20 100644 --- 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 index 740b43035606..355b2c7d4105 100644 --- 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" /> + + + +