diff --git a/src/SamplesApp/SamplesApp.UITests/TestFramework/ImageAssert.ExpectedPixels.cs b/src/SamplesApp/SamplesApp.UITests/TestFramework/ImageAssert.ExpectedPixels.cs
index 92492d5c8364..33bf038eb763 100644
--- 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
index 5bb13009f970..c59a77c778da 100644
--- 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
index 23b6749ed047..332b5b7d8ec6 100644
--- a/src/SamplesApp/UITests.Shared/UITests.Shared.projitems
+++ b/src/SamplesApp/UITests.Shared/UITests.Shared.projitems
@@ -1545,6 +1545,10 @@
Designer
MSBuild:Compile
+
+ Designer
+ MSBuild:Compile
+
Designer
MSBuild:Compile
@@ -5078,6 +5082,9 @@
TextBlock_MeasureCache.xaml
+
+ TextBlock_TextTrimming.xaml
+
TextBlock_TextWrapping_PR1954_EdgeCase.xaml
diff --git a/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/TextBlockControl/SimpleText_MaxLines_One.xaml b/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/TextBlockControl/SimpleText_MaxLines_One.xaml
index fac4dd01512a..32b6301b5bbe 100644
--- a/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/TextBlockControl/SimpleText_MaxLines_One.xaml
+++ b/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/TextBlockControl/SimpleText_MaxLines_One.xaml
@@ -19,26 +19,41 @@
-
-
-
-
-
+
+
+
+
+ MaxLines=1
+
+
+
+
+
+ MaxLines=1, TextTrimming=CharacterEllipsis
+
+
+
+
+ TextTrimming=CharacterEllipsis
+
+
+
-
-
-
-
+
+
(WASM ONLY) Cache: Hits=0, Misses=0.
diff --git a/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/TextBlockControl/TextBlock_TextTrimming.xaml b/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/TextBlockControl/TextBlock_TextTrimming.xaml
new file mode 100644
index 000000000000..c65890179e42
--- /dev/null
+++ b/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/TextBlockControl/TextBlock_TextTrimming.xaml
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ TextTrimming=None
+
+
+
+
+ TextTrimming=Clip
+
+
+
+
+ TextTrimming=CharacterEllipsis
+
+
+
+
+ TextTrimming=WordEllipsis
+
+
+
+
+
+
+ (WASM ONLY) Cache: Hits=
+ 0 , Misses=
+ 0 .
+
+
+
diff --git a/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/TextBlockControl/TextBlock_TextTrimming.xaml.cs b/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/TextBlockControl/TextBlock_TextTrimming.xaml.cs
new file mode 100644
index 000000000000..eb3968a3180a
--- /dev/null
+++ b/src/SamplesApp/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
index a995bd059b3d..3ea900f3d95f 100644
--- 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 {