[web] Set correct defaults for text in canvas (flutter#20067)

Author: mdebbar

lib/web_ui/dev/goldens_lock.yaml

@@ -1,2 +1,2 @@
 repository: https://github.com/flutter/goldens.git
-revision: 043f1bc2752e01400cea46318c78a6f1f015dadc
+revision: 4fb2ce1ea4b3a0bd48b01d7b3724be87244964d6

lib/web_ui/lib/src/engine/dom_renderer.dart

@@ -207,10 +207,10 @@ class DomRenderer {
 
   static const String defaultFontStyle = 'normal';
   static const String defaultFontWeight = 'normal';
-  static const String defaultFontSize = '14px';
+  static const double defaultFontSize = 14;
   static const String defaultFontFamily = 'sans-serif';
   static const String defaultCssFont =
-      '$defaultFontStyle $defaultFontWeight $defaultFontSize $defaultFontFamily';
+      '$defaultFontStyle $defaultFontWeight ${defaultFontSize}px $defaultFontFamily';
 
   void reset() {
     _styleElement?.remove();

lib/web_ui/lib/src/engine/text/paragraph.dart

@@ -5,6 +5,8 @@
 // @dart = 2.10
 part of engine;
 
+const ui.Color _defaultTextColor = ui.Color(0xFFFF0000);
+
 class EngineLineMetrics implements ui.LineMetrics {
   EngineLineMetrics({
     required this.hardBreak,
@@ -1110,15 +1112,15 @@ class EngineParagraphBuilder implements ui.ParagraphBuilder {
   /// paragraph. Plain text is more efficient to lay out and measure than rich
   /// text.
   EngineParagraph? _tryBuildPlainText() {
-    ui.Color? color;
+    ui.Color color = _defaultTextColor;
     ui.TextDecoration? decoration;
     ui.Color? decorationColor;
     ui.TextDecorationStyle? decorationStyle;
     ui.FontWeight? fontWeight = _paragraphStyle._fontWeight;
     ui.FontStyle? fontStyle = _paragraphStyle._fontStyle;
     ui.TextBaseline? textBaseline;
-    String? fontFamily = _paragraphStyle._fontFamily;
-    double? fontSize = _paragraphStyle._fontSize;
+    String fontFamily = _paragraphStyle._fontFamily ?? DomRenderer.defaultFontFamily;
+    double fontSize = _paragraphStyle._fontSize ?? DomRenderer.defaultFontSize;
     final ui.TextAlign textAlign = _paragraphStyle._effectiveTextAlign;
     final ui.TextDirection textDirection = _paragraphStyle._effectiveTextDirection;
     double? letterSpacing;
@@ -1138,7 +1140,7 @@ class EngineParagraphBuilder implements ui.ParagraphBuilder {
     while (i < _ops.length && _ops[i] is EngineTextStyle) {
       final EngineTextStyle style = _ops[i];
       if (style._color != null) {
-        color = style._color;
+        color = style._color!;
       }
       if (style._decoration != null) {
         decoration = style._decoration;
@@ -1160,7 +1162,7 @@ class EngineParagraphBuilder implements ui.ParagraphBuilder {
       }
       fontFamily = style._fontFamily;
       if (style._fontSize != null) {
-        fontSize = style._fontSize;
+        fontSize = style._fontSize!;
       }
       if (style._letterSpacing != null) {
         letterSpacing = style._letterSpacing;
@@ -1210,9 +1212,7 @@ class EngineParagraphBuilder implements ui.ParagraphBuilder {
       paint = foreground;
     } else {
       paint = ui.Paint();
-      if (color != null) {
-        paint.color = color;
-      }
+      paint.color = color;
     }
 
     if (i >= _ops.length) {

lib/web_ui/lib/src/engine/text/ruler.dart

@@ -84,11 +84,10 @@ class ParagraphGeometricStyle {
 
     if (fontSize != null) {
       result.write(fontSize!.floor());
-      result.write('px');
     } else {
       result.write(DomRenderer.defaultFontSize);
     }
-    result.write(' ');
+    result.write('px ');
     result.write(canonicalizeFontFamily(effectiveFontFamily));
 
     return result.toString();