Skip to content

Commit

Permalink
fix(CornerRadius): [Android]Remove twice drawn border, adjust Backgro…
Browse files Browse the repository at this point in the history 
…und that was underneath the border and properly calculate inner corner radius for common cases
  • Loading branch information
Agnès Zitte committed Sep 1, 2021
1 parent d97a9b6 commit 4d0976a
Show file tree
Hide file tree
Showing 8 changed files with 310 additions and 171 deletions.
30 changes: 22 additions & 8 deletions src/SamplesApp/SamplesApp.UITests/Windows_UI_Xaml_Controls/BorderTests/Border_Tests.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,20 +57,32 @@ public void Check_CornerRadius_Border()
[AutoRetry]
public void Border_CornerRadius_BorderThickness()
{
const string red = "#FF0000";
const string blue = "#0000FF";
// White Background color underneath
const string white = "#FFFFFF";

//Colors with 50% Opacity
const string red50 = "#80FF0000";
const string blue50 = "#800000FF";

//Same colors but with the addition of a White background color underneath
const string lightPink = "#FF7F7F";
const string lightBlue = "#7F7FFF";

var expectedColors = new[]
{
new ExpectedColor { Thicknesses = new [] { 10, 10, 10, 10 }, Colors = new [] { red, red, red, red } },
new ExpectedColor { Thicknesses = new [] { 10, 0, 10, 10 }, Colors = new [] { red, blue, red, red } },
new ExpectedColor { Thicknesses = new [] { 10, 0, 0, 10 }, Colors = new [] { red, blue, blue, red } },
new ExpectedColor { Thicknesses = new [] { 10, 0, 0, 0 }, Colors = new [] { red, blue, blue, blue } },
new ExpectedColor { Thicknesses = new [] { 0, 0, 0, 0 }, Colors = new [] { blue, blue, blue, blue } },
new ExpectedColor { Thicknesses = new [] { 10, 10, 10, 10 }, Colors = new [] { lightPink, lightPink, lightPink, lightPink } },
new ExpectedColor { Thicknesses = new [] { 10, 0, 10, 10 }, Colors = new [] { lightPink, lightBlue, lightPink, lightPink } },
new ExpectedColor { Thicknesses = new [] { 10, 0, 0, 10 }, Colors = new [] { lightPink, lightBlue, lightBlue, lightPink } },
new ExpectedColor { Thicknesses = new [] { 10, 0, 0, 0 }, Colors = new [] { lightPink, lightBlue, lightBlue, lightBlue } },
new ExpectedColor { Thicknesses = new [] { 0, 0, 0, 0 }, Colors = new [] { lightBlue, lightBlue, lightBlue, lightBlue } },
};

Run("UITests.Windows_UI_Xaml_Controls.BorderTests.Border_CornerRadius_BorderThickness");

_app.WaitForElement("MyBackgroundUnderneath");

SetBorderProperty("MyBackgroundUnderneath", "Background", white);

_app.WaitForElement("MyBorder");

var leftTarget = _app.GetPhysicalRect("LeftTarget");
Expand All @@ -80,6 +92,8 @@ public void Border_CornerRadius_BorderThickness()
var centerTarget = _app.GetPhysicalRect("CenterTarget");

SetBorderProperty("MyBorder", "CornerRadius", "10");
SetBorderProperty("MyBorder", "BorderBrush", red50);
SetBorderProperty("MyBorder", "Background", blue50);

foreach (var expected in expectedColors)
{
Expand Down Expand Up @@ -108,7 +122,7 @@ public void Border_CornerRadius_BorderThickness()
ExpectedPixels
.At($"center-{expected}", centerTarget.CenterX, centerTarget.CenterY)
.WithPixelTolerance(1, 1)
.Pixel(blue)
.Pixel(lightBlue)
);
}
}
Expand Down
7 changes: 7 additions & 0 deletions src/SamplesApp/UITests.Shared/UITests.Shared.projitems
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1005,6 +1005,10 @@
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\BorderTests\Border_BorderThickness.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\BorderTests\Border_Clipped_Change_Property.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
Expand Down Expand Up @@ -4947,6 +4951,9 @@
<Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\BitmapIconTests\BitmapIcon_Sizing.xaml.cs">
<DependentUpon>BitmapIcon_Sizing.xaml</DependentUpon>
</Compile>
<Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\BorderTests\Border_BorderThickness.xaml.cs">
<DependentUpon>Border_BorderThickness.xaml</DependentUpon>
</Compile>
<Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\BorderTests\Border_Clipped_Change_Property.xaml.cs">
<DependentUpon>Border_Clipped_Change_Property.xaml</DependentUpon>
</Compile>
Expand Down
37 changes: 37 additions & 0 deletions ...amplesApp/UITests.Shared/Windows_UI_Xaml_Controls/BorderTests/Border_BorderThickness.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<Page x:Class="Uno.UI.Samples.UITests.BorderTestsControl.Border_BorderThickness"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UITests.Windows_UI_Xaml_Controls.BorderTests"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Uno.UI.Samples.Controls"
mc:Ignorable="d">

<StackPanel>
<!-- With BorderBrush and BorderThickness -->
<TextBlock Text="With BorderBrush and BorderThickness" />
<Border Width="100"
Height="50"
Background="Red"
BorderBrush="#66121212"
BorderThickness="15">
</Border>

<!-- With BorderBrush but no BorderThickness -->
<TextBlock Margin="0,30,0,0"
Text="With BorderBrush but no BorderThickness" />
<Border Width="100"
Height="50"
Background="Red"
BorderBrush="#66121212">
</Border>

<!-- With BorderThickness but no BorderBrush -->
<TextBlock Margin="0,30,0,0"
Text="With BorderThickness but no BorderBrush" />
<Border Width="100"
Height="50"
Background="Red"
BorderThickness="15" />
</StackPanel>
</Page>
27 changes: 27 additions & 0 deletions ...lesApp/UITests.Shared/Windows_UI_Xaml_Controls/BorderTests/Border_BorderThickness.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Uno.UI.Samples.Controls;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace Uno.UI.Samples.UITests.BorderTestsControl
{
[Sample("Border")]
public sealed partial class Border_BorderThickness : Page
{
public Border_BorderThickness()
{
this.InitializeComponent();
}
}
}
100 changes: 58 additions & 42 deletions src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/BorderTests/Border_CornerRadius.xaml
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,67 @@
<Page x:Class="Uno.UI.Samples.UITests.BorderTestsControl.Border_CornerRadius"
xmlns:controls="using:Uno.UI.Samples.Controls"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Uno.UI.Samples.UITests.BorderTestsControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ios="http://uno.ui/ios"
xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:android="http://uno.ui/android"
mc:Ignorable="d ios android">
xmlns:controls="using:Uno.UI.Samples.Controls"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Uno.UI.Samples.UITests.BorderTestsControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ios="http://uno.ui/ios"
xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:android="http://uno.ui/android"
mc:Ignorable="d ios android">

<ScrollViewer>
<StackPanel>
<Border Width="100"
Height="50"
CornerRadius="4"
BorderThickness="1"
BorderBrush="Black" />

<controls:SampleControl SampleDescription="Border_Simple">
<controls:SampleControl.SampleContent>
<DataTemplate>
<StackPanel>
<Border Height="30" />
<Border Background="Red"
Width="100"
Height="100"
CornerRadius="24,50,50,12" />

<Border Width="100"
Height="50"
CornerRadius="4"
BorderThickness="1"
BorderBrush="Black" />

<Border Height="30" />
<Border Background="Red"
Width="100"
Height="100"
CornerRadius="24,50,50,12" />
<Border Height="30" />
<Border Background="Red"
Width="100"
Height="50"
CornerRadius="24,50,50,12" />

<Border Height="30" />
<Border Background="Black">
<Border Background="Red"
Width="150"
Height="50"
BorderBrush="Aqua"
BorderThickness="5"
CornerRadius="75" />
</Border>

<Border Height="30" />
<Border Background="Red"
Width="100"
Height="50"
CornerRadius="24,50,50,12" />
<Border Height="30" />
<Border Width="100"
Height="50"
Background="Red"
CornerRadius="12"
BorderBrush="#66121212"
BorderThickness="1" />

<Border Height="30" />
<Border Background="Black">
<Border Background="Red"
Width="150"
Height="50"
BorderBrush="Aqua"
BorderThickness="5"
CornerRadius="75" />
</Border>
</StackPanel>
<Border Height="30" />
<Border Width="100"
Height="50"
Background="Red"
CornerRadius="12"
BorderBrush="#66121212"
BorderThickness="5" />

</DataTemplate>
</controls:SampleControl.SampleContent>
</controls:SampleControl>
<Border Height="30" />
<Border Width="100"
Height="50"
Background="Red"
CornerRadius="15" />
</StackPanel>
</ScrollViewer>
</Page>
Loading

0 comments on commit 4d0976a

Please sign in to comment.