Adjust text-decoration-line cascading logic (#843)

Related to #842

Author: daohoangson

demo_app/pubspec.lock

@@ -216,7 +216,7 @@ packages:
       path: "../packages/core"
       relative: true
     source: path
-    version: "0.9.0+1"
+    version: "0.9.0+2"
   frontend_server_client:
     dependency: transitive
     description:

demo_app/test/goldens.json

@@ -202,7 +202,6 @@
   "inline/text-align/start/rtl": "<div dir=\"rtl\"><div style=\"text-align: start\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non elementum quam. Suspendisse odio diam, maximus pellentesque nunc a, pulvinar facilisis erat. Vivamus a viverra sem. Vivamus vehicula nibh mi, quis ornare orci laoreet vitae. Maecenas sagittis rutrum nisl nec dignissim. Suspendisse cursus est ut ultrices volutpat. Cras vel vestibulum arcu. Curabitur eget molestie nunc. Quisque fringilla quam vitae rhoncus lacinia. Vivamus id laoreet metus. Etiam sed mollis tellus. Vivamus facilisis faucibus libero eu interdum. Pellentesque laoreet magna porta viverra faucibus.</div></div>",
   "inline/text-decoration/color": "<span style=\"text-decoration: red underline\">foo</span>",
   "inline/text-decoration/line-through": "<span style=\"text-decoration: line-through\">line</span>",
-  "inline/text-decoration/none": "<span style=\"text-decoration: line-through overline underline\">foo <span style=\"text-decoration: none\">bar</span></span>",
   "inline/text-decoration/overline": "<span style=\"text-decoration: overline\">over</span>",
   "inline/text-decoration/style/dotted": "<span style=\"text-decoration: underline dotted\">foo</span>",
   "inline/text-decoration/style/dashed": "<span style=\"text-decoration: underline dashed\">foo</span>",

demo_app/test/goldens/inline/text-decoration/none.png

@@ -67,25 +67,39 @@ TextStyleHtml textDecorationColor(TextStyleHtml p, Color v) =>
     p.copyWith(style: p.style.copyWith(decorationColor: v));
 
 TextStyleHtml textDecorationLine(TextStyleHtml p, TextDecorationLine v) {
-  final pd = p.style.decoration;
-  final lineThough = pd?.contains(TextDecoration.lineThrough) == true;
-  final overline = pd?.contains(TextDecoration.overline) == true;
-  final underline = pd?.contains(TextDecoration.underline) == true;
+  final parent = p.parent?.style.decoration;
+  final parentOverline = parent?.contains(TextDecoration.overline) == true;
+  final parentLineThrough =
+      parent?.contains(TextDecoration.lineThrough) == true;
+  final parentUnderline = parent?.contains(TextDecoration.underline) == true;
+
+  final current = p.style.decoration;
+  final currentOverline = current?.contains(TextDecoration.overline) == true;
+  final currentLineThrough =
+      current?.contains(TextDecoration.lineThrough) == true;
+  final currentUnderline = current?.contains(TextDecoration.underline) == true;
 
   final list = <TextDecoration>[];
-  if (v.over == true || (overline && v.over != false)) {
+  if (parentOverline || (v.over ?? currentOverline)) {
+    // 1. Honor parent's styling if the line decoration is turned on
+    // 2. Then apply incoing value (if set)
+    // 3. Finally fallback to the current styling
+    //
+    // According to https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
+    // > Text decorations are drawn across descendant text elements.
+    // > This means that if an element specifies a text decoration,
+    // > then a child element can't remove the decoration.
     list.add(TextDecoration.overline);
   }
-  if (v.strike == true || (lineThough && v.strike != false)) {
+  if (parentLineThrough || (v.strike ?? currentLineThrough)) {
     list.add(TextDecoration.lineThrough);
   }
-  if (v.under == true || (underline && v.under != false)) {
+  if (parentUnderline || (v.under ?? currentUnderline)) {
     list.add(TextDecoration.underline);
   }
 
-  return p.copyWith(
-    style: p.style.copyWith(decoration: TextDecoration.combine(list)),
-  );
+  final combined = TextDecoration.combine(list);
+  return p.copyWith(style: p.style.copyWith(decoration: combined));
 }
 
 TextStyleHtml textDecorationStyle(TextStyleHtml p, TextDecorationStyle v) =>

packages/core/lib/src/internal/ops/style_text_decoration.dart

@@ -41,7 +41,6 @@ Future<void> main() async {
     <span style="text-decoration: overline">
       <span style="text-decoration: underline">
         All   decorations...
-        <span style="text-decoration: none">and none</span>
       </span>
     </span>
   </span>
@@ -56,8 +55,7 @@ Future<void> main() async {
       str,
       equals(
         '[Column:children='
-        '[CssBlock:child=[RichText:(:(+l+o+u:All decorations... )'
-        '(:and none))]],'
+        '[CssBlock:child=[RichText:(+l+o+u:All decorations...)]],'
         '[CssBlock:child=[RichText:(:I​Like​Playing​football​​game)]],'
         '[CssBlock:child=[RichText:(:\u00A0)]]'
         ']',

packages/core/test/core_test.dart

@@ -141,12 +141,41 @@ foo</span></span></span>
       expect(explained, equals('[RichText:(+l+o+u:foo)]'));
     });
 
-    testWidgets('renders none', (WidgetTester tester) async {
+    testWidgets('renders all (child with none)', (WidgetTester tester) async {
       const html =
           '<span style="text-decoration: line-through overline underline">foo '
           '<span style="text-decoration-line: none">bar</span></span>';
       final explained = await explain(tester, html);
-      expect(explained, equals('[RichText:(:(+l+o+u:foo )(:bar))]'));
+      expect(explained, equals('[RichText:(:(+l+o+u:foo )(+l+o+u:bar))]'));
+    });
+
+    testWidgets('renders none after line-through', (WidgetTester tester) async {
+      const html = '<span style="text-decoration-line: line-through; '
+          'text-decoration-line: none">foo</span>';
+      final explained = await explain(tester, html);
+      expect(explained, equals('[RichText:(:foo)]'));
+    });
+
+    testWidgets('renders none after overline', (WidgetTester tester) async {
+      const html = '<span style="text-decoration-line: overline; '
+          'text-decoration-line: none">foo</span>';
+      final explained = await explain(tester, html);
+      expect(explained, equals('[RichText:(:foo)]'));
+    });
+
+    testWidgets('renders none after underline', (WidgetTester tester) async {
+      const html = '<span style="text-decoration-line: underline; '
+          'text-decoration-line: none">foo</span>';
+      final explained = await explain(tester, html);
+      expect(explained, equals('[RichText:(:foo)]'));
+    });
+
+    testWidgets('renders none after all', (WidgetTester tester) async {
+      const html =
+          '<span style="text-decoration-line: line-through overline underline; '
+          'text-decoration-line: none">foo</span>';
+      final explained = await explain(tester, html);
+      expect(explained, equals('[RichText:(:foo)]'));
     });
   });