Skip to content
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ protected override AWebView CreatePlatformView()

blazorAndroidWebView.Settings.JavaScriptEnabled = true;
blazorAndroidWebView.Settings.DomStorageEnabled = true;
blazorAndroidWebView.Settings.MinimumFontSize = 1;
blazorAndroidWebView.Settings.MinimumLogicalFontSize = 1;
}
Comment thread
SubhikshaSf4851 marked this conversation as resolved.

_webViewClient = new WebKitWebViewClient(this);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.WebView.Maui;
Comment on lines +1 to 6
Expand Down Expand Up @@ -43,4 +45,75 @@ await InvokeOnMainThreadAsync(async () =>
});
}
#endif

#if ANDROID
const string SmallFontSpanId = "smallFontSpan";
const string SmallFontCssValue = "4.87761px";

static class SmallFontTestStaticFilesContents
{
public const string SmallFontIndexHtmlContent = @"<!DOCTYPE html>
<html>

<head testhtmlloaded=""true"">
<meta charset=""utf-8"" />
<meta name=""viewport"" content=""width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"" />
<title>Blazor app</title>
<base href=""/"" />
</head>

<body>
<span id=""" + SmallFontSpanId + @""" style=""font-size:" + SmallFontCssValue + @";"">tiny span text</span>
<div id=""app""></div>

<div id=""blazor-error-ui"">
An unhandled error has occurred.
<a href="""" class=""reload"">Reload</a>
<a class=""dismiss"">🗙</a>
</div>
<script src=""_framework/blazor.webview.js"" autostart=""false""></script>

</body>

</html>
";
}

/// <summary>
/// Regression test for https://github.com/dotnet/maui/issues/26924 - verifies that
/// BlazorWebViewHandler.Android.cs sets MinimumFontSize/MinimumLogicalFontSize to 1 so
/// small CSS font sizes (below the Android WebView's default 8px minimum) aren't clamped up.
/// </summary>
[Fact]
public async Task BlazorWebViewDoesNotClampSmallCssFontSizes()
{
EnsureHandlerCreated(additionalCreationActions: appBuilder =>
{
appBuilder.Services.AddMauiBlazorWebView();
});

var bwv = new BlazorWebViewWithCustomFiles
{
HostPage = "wwwroot/index.html",
CustomFiles = new Dictionary<string, string>
{
{ "index.html", SmallFontTestStaticFilesContents.SmallFontIndexHtmlContent },
},
};
bwv.RootComponents.Add(new RootComponent { ComponentType = typeof(NoOpComponent), Selector = "#app", });

await InvokeOnMainThreadAsync(async () =>
{
var bwvHandler = CreateHandler<BlazorWebViewHandler>(bwv);
var platformWebView = bwvHandler.PlatformView;
await WebViewHelpers.WaitForWebViewReady(platformWebView);
var computedFontSizeJson = await WebViewHelpers.ExecuteScriptAsync(
platformWebView,
$"parseFloat(window.getComputedStyle(document.getElementById('{SmallFontSpanId}')).fontSize)");
var computedFontSize = double.Parse(computedFontSizeJson, CultureInfo.InvariantCulture);

Assert.True(computedFontSize < 8, $"Expected computed font size to be under the 8px clamp, but was {computedFontSize}px.");
});
}
#endif
}
69 changes: 69 additions & 0 deletions src/Controls/tests/TestCases.HostApp/Issues/Issue26924.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
namespace Maui.Controls.Sample.Issues
{
[Issue(IssueTracker.Github, 26924, "Font Size of span Element Not Rendering Correctly in Mobile Mode in .NET MAUI Blazor", PlatformAffected.All)]
public class Issue26924 : TestContentPage
{
WebView _webView;
Label _resultLabel;
Button _checkButton;

const string SmallFontSpanId = "smallFontSpan";
internal const string SmallFontCssValue = "4.87761px";
Comment thread
SubhikshaSf4851 marked this conversation as resolved.

protected override void Init()
{
var html = $@"
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>Hii this is Para </p>
Comment thread
SubhikshaSf4851 marked this conversation as resolved.
Outdated
<span id=""{SmallFontSpanId}"" style=""font-size:{SmallFontCssValue};"">tiny span text</span>
</body>
</html>";
Comment on lines +15 to +23

_webView = new WebView
{
Source = new HtmlWebViewSource { Html = html },
HeightRequest = 100,
AutomationId = "SmallFontWebView"
};

_resultLabel = new Label
{
Text = "Not checked yet",
AutomationId = "ComputedFontSizeLabel"
};

_checkButton = new Button
{
Text = "Get computed font size of span",
AutomationId = "CheckFontSizeButton",
Command = new Command(async () => await CheckComputedFontSizeAsync())
};

// Update the result label once the WebView finishes loading the HTML, so the test
// can wait for "WebView loaded" before tapping the button instead of racing navigation.
_webView.Navigated += (_, __) => _resultLabel.Text = "WebView loaded";

Content = new VerticalStackLayout
{
Children =
{
new Label { Text = $"Expected computed font-size to stay close to {SmallFontCssValue} (i.e. under 8px), not be clamped up by the platform WebView's minimum font size." },
_webView,
_checkButton,
_resultLabel
}
};
}

async Task CheckComputedFontSizeAsync()
{
var computedFontSize = await _webView.EvaluateJavaScriptAsync(
$"window.getComputedStyle(document.getElementById('{SmallFontSpanId}')).fontSize");

_resultLabel.Text = computedFontSize?.Trim('"') ?? string.Empty;
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
using System.Globalization;
using NUnit.Framework;
using UITest.Appium;
using UITest.Core;

namespace Microsoft.Maui.TestCases.Tests.Issues;

public class Issue26924 : _IssuesUITest
{
public Issue26924(TestDevice device) : base(device)
{
}

public override string Issue => "Font Size of span Element Not Rendering Correctly in Mobile Mode in .NET MAUI Blazor";

[Test]
[Category(UITestCategories.WebView)]
public void SmallFontSizeSpanIsNotClampedByMinimumFontSize()
{
// The result label is updated to "WebView loaded" once the WebView finishes loading
// the HTML, so wait for that before tapping the button to avoid racing navigation.
App.WaitForTextToBePresentInElement("ComputedFontSizeLabel", "WebView loaded");
App.Tap("CheckFontSizeButton");
var computedFontSizeText = App.WaitForElement("ComputedFontSizeLabel").GetText();
Assert.That(computedFontSizeText, Is.Not.Null);
var computedFontSize = float.Parse(computedFontSizeText!.TrimEnd('p', 'x'), CultureInfo.InvariantCulture);
Assert.That(computedFontSize, Is.LessThan(8f));
Comment thread
SubhikshaSf4851 marked this conversation as resolved.
Outdated
}
}

4 changes: 4 additions & 0 deletions src/Core/src/Platform/Android/WebViewExtensions.cs
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@ public static void UpdateSettings(this AWebView platformWebView, IWebView webVie

platformWebView.Settings.JavaScriptEnabled = javaScriptEnabled;
platformWebView.Settings.DomStorageEnabled = domStorageEnabled;
// Android WebView defaults MinimumFontSize to 8, which silently
// clamps up any CSS font-size below 8px.
platformWebView.Settings.MinimumFontSize = 1;
platformWebView.Settings.MinimumLogicalFontSize = 1;
}

public static void UpdateUserAgent(this AWebView platformWebView, IWebView webView)
Expand Down
Loading