[web] Canoncalize font family on input fields (#22215)

lib/web_ui/lib/src/engine/text_editing/text_editing.dart

@@ -1363,7 +1363,8 @@ class TextEditingChannel {
         throw StateError(
             'Unsupported method call on the flutter/textinput channel: ${call.method}');
     }
-    EnginePlatformDispatcher.instance._replyToPlatformMessage(callback, codec.encodeSuccessEnvelope(true));
+    EnginePlatformDispatcher.instance
+        ._replyToPlatformMessage(callback, codec.encodeSuccessEnvelope(true));
   }
 
   /// Used for submitting the forms attached on the DOM.
@@ -1664,7 +1665,8 @@ class EditableTextStyle {
 
   String? get align => textAlignToCssValue(textAlign, textDirection);
 
-  String get cssFont => '${fontWeight} ${fontSize}px ${fontFamily}';
+  String get cssFont =>
+      '${fontWeight} ${fontSize}px ${canonicalizeFontFamily(fontFamily)}';
 
   void applyToDomElement(html.HtmlElement domElement) {
     domElement.style

lib/web_ui/test/text_editing_test.dart

@@ -1405,6 +1405,28 @@ void testMain() {
         // TODO(nurhan): https://github.com/flutter/flutter/issues/50590
         skip: browserEngine == BrowserEngine.webkit);
 
+    test('Canonicalizes font family', () {
+      showKeyboard();
+
+      final HtmlElement input = textEditing.editingElement.domElement;
+
+      MethodCall setStyle;
+
+      setStyle = configureSetStyleMethodCall(12, 'sans-serif', 4, 4, 1);
+      sendFrameworkMessage(codec.encodeMethodCall(setStyle));
+      expect(input.style.fontFamily, canonicalizeFontFamily('sans-serif'));
+
+      setStyle = configureSetStyleMethodCall(12, '.SF Pro Text', 4, 4, 1);
+      sendFrameworkMessage(codec.encodeMethodCall(setStyle));
+      expect(input.style.fontFamily, canonicalizeFontFamily('.SF Pro Text'));
+
+      setStyle = configureSetStyleMethodCall(12, 'foo bar baz', 4, 4, 1);
+      sendFrameworkMessage(codec.encodeMethodCall(setStyle));
+      expect(input.style.fontFamily, canonicalizeFontFamily('foo bar baz'));
+
+      hideKeyboard();
+    });
+
     test(
         'negative base offset and selection extent values in editing state is handled',
         () {