Merge pull request #5679 from unoplatform/dev/cdb/wasm/text-ellipsis

Fix TextTrimming="CharacterEllipsis" were not working on Wasm
unoplatform · Apr 13, 2021 · da50b8f · da50b8f
2 parents dff1dca + 4b1735d
commit da50b8f
Show file tree

Hide file tree

Showing 7 changed files with 173 additions and 16 deletions.
diff --git a/src/SamplesApp/SamplesApp.UITests/TestFramework/ImageAssert.ExpectedPixels.cs b/src/SamplesApp/SamplesApp.UITests/TestFramework/ImageAssert.ExpectedPixels.cs
@@ -3,6 +3,7 @@
 using System.Linq;
 using System.Runtime.CompilerServices;
 using SamplesApp.UITests._Utils;
+using Uno.UITest;
 
 namespace SamplesApp.UITests.TestFramework
 {
@@ -21,6 +22,26 @@ public static ExpectedPixels At(Point location, [CallerLineNumber] int line = -1
 		public static ExpectedPixels At(string name, Point location)
 			=> new ExpectedPixels(name, location, default, new Color[0, 0]);
 
+		public static ExpectedPixels UniformRect(
+			IAppRect rect,
+			string color,
+			[CallerMemberName] string name = null,
+			[CallerLineNumber] int line = -1)
+		{
+			var c = GetColorFromString(color);
+
+			var colors = new Color[(int)rect.Height, (int)rect.Width];
+
+			for (var py = (int)rect.Height; py < (int)rect.Height; py++)
+			for (var px = (int)rect.Width; px < (int)rect.Width; px++)
+			{
+				colors[py, px] = c;
+			}
+
+			var location = new Point((int)rect.X, (int)rect.Y);
+			return new ExpectedPixels(name, location, location, colors);
+		}
+
 		public ExpectedPixels Named(string name)
 			=> new ExpectedPixels(name, Location, SourceLocation, Values, Tolerance);
 

diff --git a/src/SamplesApp/SamplesApp.UITests/Windows_UI_Xaml_Controls/TextBlockTests/TextBlockTests.cs b/src/SamplesApp/SamplesApp.UITests/Windows_UI_Xaml_Controls/TextBlockTests/TextBlockTests.cs
@@ -431,6 +431,30 @@ public void When_Padding_Is_Changed_Then_Cache_Is_Missed()
 			w3.Should().Be(w1);
 		}
 
+		[Test]
+		[AutoRetry]
+		[ActivePlatforms(Platform.Browser)]
+		public void When_TextTrimming_Is_Set_Then_Ellipsis_Is_Used()
+		{
+			Run("UITests.Windows_UI_Xaml_Controls.TextBlockControl.TextBlock_TextTrimming");
+
+			using var snapshot = this.TakeScreenshot("ellipsisText", ignoreInSnapshotCompare: true);
+
+			var rectOfTextWithEllipsis = _app.GetPhysicalRect("border3");
+			var rectThatShouldBeBlankBecauseOfEllipsis = new AppRect(
+				x: rectOfTextWithEllipsis.Right - 15,
+				y: rectOfTextWithEllipsis.Y,
+				width: 15,
+				height: rectOfTextWithEllipsis.Height * 0.6f);
+
+			var cyan = "#00FFFF";
+
+			ImageAssert.HasPixels(
+				snapshot,
+				ExpectedPixels.UniformRect(rectThatShouldBeBlankBecauseOfEllipsis, cyan)
+					.WithTolerance(PixelTolerance.None));
+		}
+
 		[Test]
 		[AutoRetry]
 		[ActivePlatforms(Platform.Browser | Platform.Android)] // Test timed-out on iOS

diff --git a/src/SamplesApp/UITests.Shared/UITests.Shared.projitems b/src/SamplesApp/UITests.Shared/UITests.Shared.projitems
@@ -1545,6 +1545,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\TextBlockControl\TextBlock_TextTrimming.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\TextBlockControl\TextBlock_TextWrapping_PR1954_EdgeCase.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -5078,6 +5082,9 @@
     <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\TextBlockControl\TextBlock_MeasureCache.xaml.cs">
       <DependentUpon>TextBlock_MeasureCache.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\TextBlockControl\TextBlock_TextTrimming.xaml.cs">
+      <DependentUpon>TextBlock_TextTrimming.xaml</DependentUpon>
+    </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\TextBlockControl\TextBlock_TextWrapping_PR1954_EdgeCase.xaml.cs">
       <DependentUpon>TextBlock_TextWrapping_PR1954_EdgeCase.xaml</DependentUpon>
     </Compile>

diff --git a/...App/UITests.Shared/Windows_UI_Xaml_Controls/TextBlockControl/SimpleText_MaxLines_One.xaml b/...App/UITests.Shared/Windows_UI_Xaml_Controls/TextBlockControl/SimpleText_MaxLines_One.xaml
@@ -19,26 +19,41 @@
 		<Grid.RowDefinitions>
 			<RowDefinition Height="Auto" />
 			<RowDefinition Height="*" />
-			<RowDefinition Height="*" />
 			<RowDefinition Height="Auto" />
 		</Grid.RowDefinitions>
-		<Slider Minimum="10" Maximum="1600" Value="350" x:Name="slider"/>
 
-		<Border Width="{Binding Value, ElementName=slider}" Background="Cyan" Grid.Row="1" x:Name="border1">
-			<TextBlock
-				Text="This is a very very very very long text that should not wrap even though it goes out of the screen"
-				FontSize="20"
-				MaxLines="1"  />
-		</Border>
+		<Slider Minimum="10" Maximum="1600" Value="350" x:Name="slider" Header="Width"/>
+
+		<StackPanel Grid.Row="1" Spacing="5">
+
+			<TextBlock>MaxLines=1</TextBlock>
+
+			<Border Width="{Binding Value, ElementName=slider}" Background="Cyan" x:Name="border1">
+				<TextBlock
+					Text="This is a very very very very long text that should not wrap even though it goes out of the screen"
+					FontSize="20"
+					MaxLines="1"  />
+			</Border>
+
+			<TextBlock>MaxLines=1, TextTrimming=CharacterEllipsis</TextBlock>
+			<Border Width="{Binding Value, ElementName=slider}" Background="Yellow" x:Name="border2">
+				<TextBlock
+					Text="This is a very very very very long text that should not wrap even though it goes out of the screen"
+					FontSize="20"
+					TextTrimming="CharacterEllipsis"
+					MaxLines="1"  />
+			</Border>
+
+			<TextBlock>TextTrimming=CharacterEllipsis</TextBlock>
+			<Border Width="{Binding Value, ElementName=slider}" Background="Cyan" x:Name="border3">
+				<TextBlock
+					Text="This is a very very very very long text that should not wrap even though it goes out of the screen"
+					FontSize="20"
+					TextTrimming="CharacterEllipsis"  />
+			</Border>
 
-		<Border Width="{Binding Value, ElementName=slider}" Background="Yellow" Grid.Row="2" x:Name="border2">
-			<TextBlock
-				Text="This is a very very very very long text that should not wrap even though it goes out of the screen"
-				FontSize="20"
-				TextTrimming="CharacterEllipsis"
-				MaxLines="1"  />
-		</Border>
-		<wasm:TextBlock Grid.Row="3">
+		</StackPanel>
+		<wasm:TextBlock Grid.Row="2">
 			(WASM ONLY) Cache: Hits=<Run x:Name="hits">0</Run>, Misses=<Run x:Name="misses">0</Run>.
 		</wasm:TextBlock>
 	</Grid>

diff --git a/...sApp/UITests.Shared/Windows_UI_Xaml_Controls/TextBlockControl/TextBlock_TextTrimming.xaml b/...sApp/UITests.Shared/Windows_UI_Xaml_Controls/TextBlockControl/TextBlock_TextTrimming.xaml
@@ -0,0 +1,61 @@
+<Page
+	x:Class="UITests.Windows_UI_Xaml_Controls.TextBlockControl.TextBlock_TextTrimming"
+	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+	xmlns:wasm="http://uno.ui/xamarin"
+	mc:Ignorable="d wasm"
+	Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+	<Grid>
+		<Grid.RowDefinitions>
+			<RowDefinition Height="Auto" />
+			<RowDefinition Height="*" />
+			<RowDefinition Height="Auto" />
+		</Grid.RowDefinitions>
+
+		<Slider Minimum="10" Maximum="1600" Value="300" x:Name="slider" Header="Width"/>
+
+		<StackPanel Grid.Row="1" Spacing="5">
+
+			<TextBlock>TextTrimming=None</TextBlock>
+			<Border MaxWidth="{Binding Value, ElementName=slider}" Background="Cyan" x:Name="border1">
+				<TextBlock
+					Text="This is a very very very very long text that should not wrap even though it goes out of the screen"
+					FontSize="20"
+					TextTrimming="None"  />
+			</Border>
+
+			<TextBlock>TextTrimming=Clip</TextBlock>
+			<Border MaxWidth="{Binding Value, ElementName=slider}" Background="Yellow" x:Name="border2">
+				<TextBlock
+					Text="This is a very very very very long text that should not wrap even though it goes out of the screen"
+					FontSize="20"
+					TextTrimming="Clip"  />
+			</Border>
+
+			<TextBlock>TextTrimming=CharacterEllipsis</TextBlock>
+			<Border MaxWidth="{Binding Value, ElementName=slider}" Background="Cyan" x:Name="border3">
+				<TextBlock
+					Text="This is a very very very very long text that should not wrap even though it goes out of the screen"
+					FontSize="20"
+					TextTrimming="CharacterEllipsis"  />
+			</Border>
+
+			<TextBlock>TextTrimming=WordEllipsis</TextBlock>
+			<Border MaxWidth="{Binding Value, ElementName=slider}" Background="Yellow" x:Name="border4">
+				<TextBlock
+					Text="This is a very very very very long text that should not wrap even though it goes out of the screen"
+					FontSize="20"
+					TextTrimming="WordEllipsis"  />
+			</Border>
+
+		</StackPanel>
+		<wasm:TextBlock Grid.Row="2">
+			(WASM ONLY) Cache: Hits=
+			<Run x:Name="hits">0</Run> , Misses=
+			<Run x:Name="misses">0</Run> .
+		</wasm:TextBlock>
+	</Grid>
+</Page>
diff --git a/...p/UITests.Shared/Windows_UI_Xaml_Controls/TextBlockControl/TextBlock_TextTrimming.xaml.cs b/...p/UITests.Shared/Windows_UI_Xaml_Controls/TextBlockControl/TextBlock_TextTrimming.xaml.cs
@@ -0,0 +1,26 @@
+using Windows.UI.Xaml.Controls;
+using Uno.UI;
+using Uno.UI.Samples.Controls;
+
+namespace UITests.Windows_UI_Xaml_Controls.TextBlockControl
+{
+	[Sample]
+	public sealed partial class TextBlock_TextTrimming : Page
+	{
+		public TextBlock_TextTrimming()
+		{
+			this.InitializeComponent();
+
+#if __WASM__
+			var initialHits = UnoMetrics.TextBlock.MeasureCacheHits;
+			var initialMisses = UnoMetrics.TextBlock.MeasureCacheMisses;
+
+			border1.SizeChanged += (sender, e) =>
+			{
+				hits.Text = (UnoMetrics.TextBlock.MeasureCacheHits - initialHits).ToString();
+				misses.Text = (UnoMetrics.TextBlock.MeasureCacheMisses - initialMisses).ToString();
+			};
+#endif
+		}
+	}
+}
diff --git a/src/Uno.UI/WasmCSS/Uno.UI.css b/src/Uno.UI/WasmCSS/Uno.UI.css
@@ -108,6 +108,9 @@ embed.uno-frameworkelement.uno-unarranged {
   -ms-background-clip: text !important;
   -webkit-background-clip: text !important;
   background-clip: text !important;
+
+  /* overflow-x:hidden is required for text-overflow: ellipsis to work correctly */
+  overflow-x: hidden;
 }
 
 .uno-buttonbase {