Fix % font size transferring to child rather than the font size itself, implement em support relative to parent font size

Author: tneotia

lib/html_parser.dart

@@ -683,7 +683,7 @@ class HtmlParser extends StatelessWidget {
     tree.children?.forEach((child) {
       if ((child.style.fontSize?.size ?? parentFontSize) < 0) {
         child.style.fontSize =
-            FontSize(parentFontSize * -child.style.fontSize.size);
+            FontSize(parentFontSize * -child.style.fontSize.size, "");
       }
 
       _processFontSize(child);

lib/src/css_parser.dart

@@ -74,13 +74,13 @@ class ExpressionMapping {
 
   static FontSize expressionToFontSize(css.Expression value) {
     if (value is css.NumberTerm) {
-      return FontSize(double.tryParse(value.text));
+      return FontSize(double.tryParse(value.text), "");
     } else if (value is css.PercentageTerm) {
-      return FontSize.percent(int.tryParse(value.text.replaceAll(new RegExp(r'[^0-9]'),'')));
+      return FontSize.percent(int.tryParse(value.text));
     } else if (value is css.EmTerm) {
-      return FontSize.em(int.tryParse(value.text.replaceAll(new RegExp(r'[^0-9]'), '')));
+      return FontSize.em(double.tryParse(value.text));
     } else if (value is css.RemTerm) {
-      return FontSize.em(int.tryParse(value.text.replaceAll(new RegExp(r'[^0-9]'), '')));
+      return FontSize.rem(double.tryParse(value.text));
     } else if (value is css.LiteralTerm) {
       switch (value.text) {
         case "xx-small":
@@ -98,7 +98,7 @@ class ExpressionMapping {
         case "xx-large":
           return FontSize.xxLarge;
       }
-      return FontSize(double.tryParse(value.text.replaceAll(new RegExp(r'[^0-9]'), '')));
+      return FontSize(double.tryParse(value.text.replaceAll(new RegExp(r'\s+(\d+\.\d+)\s+'), '')), "");
     }
     return null;
   }

lib/src/styled_element.dart

@@ -196,7 +196,7 @@ StyledElement parseStyledElement(
       break;
     case "h3":
       styledElement.style = Style(
-        fontSize: FontSize(16.38),
+        fontSize: FontSize(16.38, ""),
         fontWeight: FontWeight.bold,
         margin: EdgeInsets.symmetric(vertical: 16.5),
         display: Display.BLOCK,
@@ -212,15 +212,15 @@ StyledElement parseStyledElement(
       break;
     case "h5":
       styledElement.style = Style(
-        fontSize: FontSize(11.62),
+        fontSize: FontSize(11.62, ""),
         fontWeight: FontWeight.bold,
         margin: EdgeInsets.symmetric(vertical: 19.25),
         display: Display.BLOCK,
       );
       break;
     case "h6":
       styledElement.style = Style(
-        fontSize: FontSize(9.38),
+        fontSize: FontSize(9.38, ""),
         fontWeight: FontWeight.bold,
         margin: EdgeInsets.symmetric(vertical: 22),
         display: Display.BLOCK,

lib/style.dart

@@ -291,7 +291,11 @@ class Style {
       direction: child.direction ?? direction,
       fontFamily: child.fontFamily ?? fontFamily,
       fontFeatureSettings: child.fontFeatureSettings ?? fontFeatureSettings,
-      fontSize: child.fontSize ?? fontSize,
+      fontSize: child.fontSize != null ?
+        fontSize != null && child.fontSize?.units == "em" ?
+          FontSize(child.fontSize.size * fontSize.size, "") : child.fontSize
+        : fontSize != null && fontSize.size < 0 ?
+          FontSize.percent(100) : fontSize,
       fontStyle: child.fontStyle ?? fontStyle,
       fontWeight: child.fontWeight ?? fontWeight,
       letterSpacing: child.letterSpacing ?? letterSpacing,
@@ -382,7 +386,7 @@ class Style {
     this.textDecorationThickness = textStyle.decorationThickness;
     this.fontFamily = textStyle.fontFamily;
     this.fontFeatureSettings = textStyle.fontFeatures;
-    this.fontSize = FontSize(textStyle.fontSize);
+    this.fontSize = FontSize(textStyle.fontSize, "");
     this.fontStyle = textStyle.fontStyle;
     this.fontWeight = textStyle.fontWeight;
     this.letterSpacing = textStyle.letterSpacing;
@@ -401,16 +405,22 @@ enum Display {
 
 class FontSize {
   final double size;
+  final String units;
 
-  const FontSize(this.size);
+  const FontSize(this.size, this.units);
 
   /// A percentage of the parent style's font size.
   factory FontSize.percent(int percent) {
-    return FontSize(percent.toDouble() / -100.0);
+    return FontSize(percent.toDouble() / -100.0, "%");
   }
 
-  factory FontSize.em(int em) {
-    return FontSize(em.toDouble() * 16 - 2);
+  factory FontSize.em(double em) {
+    return FontSize(em, "em");
+  }
+
+  factory FontSize.rem(double rem) {
+    print(rem * 16 - 2);
+    return FontSize(rem * 16 - 2, "rem");
   }
   // These values are calculated based off of the default (`medium`)
   // being 14px.
@@ -419,15 +429,15 @@ class FontSize {
   //
   // Negative values are computed during parsing to be a percentage of
   // the parent style's font size.
-  static const xxSmall = FontSize(7.875);
-  static const xSmall = FontSize(8.75);
-  static const small = FontSize(11.375);
-  static const medium = FontSize(14.0);
-  static const large = FontSize(15.75);
-  static const xLarge = FontSize(21.0);
-  static const xxLarge = FontSize(28.0);
-  static const smaller = FontSize(-0.83);
-  static const larger = FontSize(-1.2);
+  static const xxSmall = FontSize(7.875, "");
+  static const xSmall = FontSize(8.75, "");
+  static const small = FontSize(11.375, "");
+  static const medium = FontSize(14.0, "");
+  static const large = FontSize(15.75, "");
+  static const xLarge = FontSize(21.0, "");
+  static const xxLarge = FontSize(28.0, "");
+  static const smaller = FontSize(-0.83, "");
+  static const larger = FontSize(-1.2, "");
 }
 
 enum ListStyleType {