Fix border 0 is still being rendered. (#1045)

Also:

* [core] v0.10.6
* [enhanced] v0.10.6

Author: daohoangson

packages/core/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.10.6
+
+- Fix border 0 is still being rendered (#1045)
+
 ## 0.10.5
 
 - Replace the deprecated `DecoderCallback` in tests (#1014)

packages/core/README.md

@@ -20,7 +20,7 @@ Add this to your app's `pubspec.yaml` file:
 
 ```yaml
 dependencies:
-  flutter_widget_from_html_core: ^0.10.5
+  flutter_widget_from_html_core: ^0.10.6
 ```
 
 ## Usage

packages/core/lib/src/data/css.dart

@@ -42,13 +42,13 @@ class CssBorder {
 
   /// Returns `true` if all sides are unset, all radius are zero.
   bool get isNoOp =>
-      (_all == null || _all == CssBorderSide.none) &&
-      (_bottom == null || _bottom == CssBorderSide.none) &&
-      (_inlineEnd == null || _inlineEnd == CssBorderSide.none) &&
-      (_inlineStart == null || _inlineStart == CssBorderSide.none) &&
-      (_left == null || _left == CssBorderSide.none) &&
-      (_right == null || _right == CssBorderSide.none) &&
-      (_top == null || _top == CssBorderSide.none) &&
+      (_all?.isNoOp != false) &&
+      (_bottom?.isNoOp != false) &&
+      (_inlineEnd?.isNoOp != false) &&
+      (_inlineStart?.isNoOp != false) &&
+      (_left?.isNoOp != false) &&
+      (_right?.isNoOp != false) &&
+      (_top?.isNoOp != false) &&
       radiusBottomLeft == CssRadius.zero &&
       radiusBottomRight == CssRadius.zero &&
       radiusTopLeft == CssRadius.zero &&
@@ -189,27 +189,51 @@ class CssBorderSide {
   /// A border that is not rendered.
   static const none = CssBorderSide();
 
-  BorderSide? _getValue(TextStyleHtml tsh) => identical(this, none)
-      ? null
-      : BorderSide(
-          color: color ?? tsh.style.color ?? const BorderSide().color,
-          // TODO: add proper support for other border styles
-          style: style != null ? BorderStyle.solid : BorderStyle.none,
-          // TODO: look for official document regarding this default value
-          // WebKit & Blink seem to follow the same (hidden?) specs
-          width: width?.getValue(tsh) ?? 1.0,
-        );
+  /// Returns `true` if either [style] or [width] is invalid.
+  ///
+  /// Border will use the default text color so [color] is not required.
+  bool get isNoOp => style == null || width?.isPositive != true;
+
+  BorderSide? _getValue(TextStyleHtml tsh) {
+    if (identical(this, none)) {
+      return null;
+    }
 
-  static CssBorderSide? _copyWith(CssBorderSide? base, CssBorderSide? value) =>
-      base == null || value == none
-          ? value
-          : value == null
-              ? base
-              : CssBorderSide(
-                  color: value.color ?? base.color,
-                  style: value.style ?? base.style,
-                  width: value.width ?? base.width,
-                );
+    final scopedColor = color ?? tsh.style.color;
+    if (scopedColor == null) {
+      return null;
+    }
+
+    final scopedWidth = width?.getValue(tsh);
+    if (scopedWidth == null) {
+      return null;
+    }
+
+    return BorderSide(
+      color: scopedColor,
+      // TODO: add proper support for other border styles
+      style: style != null ? BorderStyle.solid : BorderStyle.none,
+      width: scopedWidth,
+    );
+  }
+
+  static CssBorderSide? _copyWith(CssBorderSide? base, CssBorderSide? value) {
+    final copied = base == null || value == none
+        ? value
+        : value == null
+            ? base
+            : CssBorderSide(
+                color: value.color ?? base.color,
+                style: value.style ?? base.style,
+                width: value.width ?? base.width,
+              );
+
+    if (copied?.isNoOp == true) {
+      return none;
+    }
+
+    return copied;
+  }
 }
 
 /// A length measurement.

packages/core/lib/src/internal/parser/border.dart

@@ -2,6 +2,7 @@ part of '../core_parser.dart';
 
 const kCssBorder = 'border';
 const kCssBorderInherit = 'inherit';
+const kCssBorderNone = 'none';
 
 const kCssBorderRadius = 'border-radius';
 const kCssBorderRadiusSuffix = 'radius';
@@ -42,9 +43,20 @@ CssBorder _tryParseBorderSide(CssBorder border, css.Declaration style) {
   }
 
   TextDecorationStyle? borderStyle;
-  CssLength? width;
   Color? color;
+  // TODO: look for official document regarding this default value
+  // WebKit & Blink seem to follow the same (hidden?) specs
+  var width = const CssLength(1);
   for (final expression in style.values) {
+    final value =
+        expression is css.LiteralTerm ? expression.valueAsString : null;
+    if (value == kCssBorderNone) {
+      borderStyle = null;
+      color = null;
+      width = CssLength.zero;
+      break;
+    }
+
     final parsedStyle = tryParseTextDecorationStyle(expression);
     if (parsedStyle != null) {
       borderStyle = parsedStyle;
@@ -64,13 +76,11 @@ CssBorder _tryParseBorderSide(CssBorder border, css.Declaration style) {
     }
   }
 
-  final borderSide = borderStyle == null
-      ? CssBorderSide.none
-      : CssBorderSide(
-          color: color,
-          style: borderStyle,
-          width: width,
-        );
+  final borderSide = CssBorderSide(
+    color: color,
+    style: borderStyle,
+    width: width,
+  );
 
   if (suffix.isEmpty) {
     return border.copyWith(all: borderSide);

packages/core/pubspec.yaml

@@ -1,5 +1,5 @@
 name: flutter_widget_from_html_core
-version: 0.10.5
+version: 0.10.6
 description: Flutter package to render html as widgets that focuses on correctness and extensibility.
 homepage: https://github.com/daohoangson/flutter_widget_from_html/tree/master/packages/core
 

packages/core/test/style_border_test.dart

@@ -1238,6 +1238,12 @@ void main() {
       expect(explained, equals('[RichText:(:Foo)]'));
     });
 
+    testWidgets('#1044: border zero', (WidgetTester tester) async {
+      const html = '<span style="border: 0 solid red">Foo</span>';
+      final explained = await explain(tester, html);
+      expect(explained, equals('[RichText:(:Foo)]'));
+    });
+
     testWidgets('negative value', (WidgetTester tester) async {
       const html = '<span style="border: -1px">Foo</span>';
       final explained = await explain(tester, html);

packages/enhanced/CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.10.6
+
+- Fix border 0 is still being rendered (#1045)
+
 ## 0.10.5+3
 
 - Add support for fullscreen webview in Android (#1022)

packages/enhanced/README.md

@@ -27,7 +27,7 @@ Add this to your app's `pubspec.yaml` file:
 
 ```yaml
 dependencies:
-  flutter_widget_from_html: ^0.10.5
+  flutter_widget_from_html: ^0.10.6
 ```
 
 ### Platform specific configuration

packages/enhanced/pubspec.yaml

@@ -1,5 +1,5 @@
 name: flutter_widget_from_html
-version: 0.10.5+3
+version: 0.10.6
 description: Flutter package to render html as widgets that supports hyperlink, image, audio, video, iframe and many other tags.
 homepage: https://github.com/daohoangson/flutter_widget_from_html
 
@@ -10,7 +10,7 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
-  flutter_widget_from_html_core: ^0.10.5
+  flutter_widget_from_html_core: ^0.10.6
   fwfh_cached_network_image: ^0.7.0+7
   fwfh_chewie: ^0.7.1+4
   fwfh_just_audio: ^0.9.0+3