Fix 100% width TD in recursive TABLEs (#952)

Author: daohoangson

demo_app/test/table/width_in_percent_100_nested.png

@@ -206,6 +206,7 @@ class HtmlTableCell extends ParentDataWidget<_TableCellData> {
     properties.add(IntProperty('columnStart', columnStart));
     properties.add(IntProperty('rowSpan', rowSpan, defaultValue: 1));
     properties.add(IntProperty('rowStart', rowStart));
+    properties.add(DiagnosticsProperty('width', width, defaultValue: null));
   }
 
   @override
@@ -542,7 +543,7 @@ class _TableRenderLayouter {
   ) {
     final effectiveMinValues = List.filled(values.length, .0);
     for (var i = 0; i < values.length; i++) {
-      if (calculatedMinValues[i] > 0 && calculatedMinValues[i] >= values[i]) {
+      if (calculatedMinValues[i] > .0 && calculatedMinValues[i] >= values[i]) {
         // min value is smaller than in-calculation width
         // let's keep the current value as long as possible
         // we want the column to grow to its dry size naturally
@@ -551,20 +552,29 @@ class _TableRenderLayouter {
     }
 
     final remaining = max(.0, available - effectiveMinValues.sum);
+    var valuesCount = 0;
     var valuesSum = .0;
     for (var i = 0; i < values.length; i++) {
-      if (effectiveMinValues[i] == 0) {
+      if (effectiveMinValues[i] == .0) {
+        valuesCount++;
         valuesSum += values[i];
       }
     }
 
     final result = effectiveMinValues.toList(growable: false);
-    if (valuesSum > .0) {
+    if (valuesCount > 0) {
       for (var i = 0; i < values.length; i++) {
-        if (result[i] == 0) {
+        if (result[i] != .0) {
+          continue;
+        }
+
+        if (valuesSum.isFinite) {
           // calculate widths using weighted distribution
           // e.g. if a column has huge dry width, it will have bigger width
           result[i] = values[i] / valuesSum * remaining;
+        } else {
+          // split the remaining width equally if SUM(values) is not usable
+          result[i] = remaining / valuesCount;
         }
       }
     }

packages/core/lib/src/widgets/html_table.dart

@@ -380,6 +380,57 @@ Future<void> main() async {
     });
   });
 
+  group('width', () {
+    testWidgets('renders without width', (WidgetTester tester) async {
+      const html = '<table><tr><td>Foo</td></tr></table>';
+      final e = await explain(tester, html, useExplainer: false);
+      expect(e, contains('└HtmlTableCell(columnStart: 0, rowStart: 0)'));
+    });
+
+    testWidgets('renders width: 50px', (WidgetTester tester) async {
+      const html = '<table><tr><td style="width: 50px">Foo</td></tr></table>';
+      final explained = await explain(tester, html, useExplainer: false);
+      expect(
+        explained,
+        isNot(contains('└HtmlTableCell(columnStart: 0, rowStart: 0)')),
+      );
+      expect(
+        explained,
+        contains('└HtmlTableCell(columnStart: 0, rowStart: 0, width: 50.0)'),
+      );
+    });
+
+    testWidgets('renders width: 100%', (WidgetTester tester) async {
+      const html = '<table><tr><td style="width: 100%">Foo</td></tr></table>';
+      final explained = await explain(tester, html, useExplainer: false);
+      expect(
+        explained,
+        isNot(contains('└HtmlTableCell(columnStart: 0, rowStart: 0)')),
+      );
+      expect(
+        explained,
+        contains('└HtmlTableCell(columnStart: 0, rowStart: 0, width: 100.0%)'),
+      );
+    });
+
+    testWidgets('renders width: 100% within TABLE', (tester) async {
+      const html = '<table><tr><td>'
+          '<table><tr><td style="width: 100%">'
+          'Foo'
+          '</td></tr></table>'
+          '</td></tr></table>';
+      final explained = await explain(tester, html, useExplainer: false);
+      expect(
+        explained,
+        contains('└HtmlTableCell(columnStart: 0, rowStart: 0)'),
+      );
+      expect(
+        explained,
+        contains('└HtmlTableCell(columnStart: 0, rowStart: 0, width: 100.0%)'),
+      );
+    });
+  });
+
   group('error handling', () {
     testWidgets('missing header', (WidgetTester tester) async {
       const html = '<table><tbody>'
@@ -857,6 +908,18 @@ Future<void> main() async {
     <td style="background: red; width: 30%">Foo</td>
     <td style="background: green; width: 70%">Bar</td>
   </tr>
+</table>''',
+              'width_in_percent_100_nested': '''
+<table border="1">
+  <tr>
+    <td>
+      <table border="1">
+        <tr>
+          <td style="width: 100%">Foo</td>
+        </tr>
+      </table>
+    </td>
+  </tr>
 </table>''',
               'width_in_px': '''
 <table border="1">