Fix text-align handling for <li> content layout (#1578)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: daohoangson <239336+daohoangson@users.noreply.github.com>

Author: Copilot

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

@@ -107,6 +107,7 @@ class TagLi {
 
     return HtmlListItem(
       marker: marker,
+      textAlign: resolved.get<TextAlign>(),
       textDirection: resolved.directionOrLtr,
       child: child,
     );

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

@@ -5,6 +5,9 @@ const _kGapVsMarker = 5.0;
 
 /// A list item widget.
 class HtmlListItem extends MultiChildRenderObjectWidget {
+  /// The alignment of the item contents.
+  final TextAlign? textAlign;
+
   /// The directionality of the item.
   final TextDirection textDirection;
 
@@ -13,6 +16,7 @@ class HtmlListItem extends MultiChildRenderObjectWidget {
     Widget? child,
     super.key,
     Widget? marker,
+    this.textAlign,
     required this.textDirection,
   }) : super(
           children: child != null
@@ -25,17 +29,24 @@ class HtmlListItem extends MultiChildRenderObjectWidget {
 
   @override
   RenderObject createRenderObject(BuildContext context) =>
-      _ListItemRenderObject(textDirection: textDirection);
+      _ListItemRenderObject(
+        textAlign: textAlign,
+        textDirection: textDirection,
+      );
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
+    properties.add(EnumProperty('textAlign', textAlign, defaultValue: null));
     properties.add(DiagnosticsProperty('textDirection', textDirection));
   }
 
   @override
-  void updateRenderObject(BuildContext context, RenderObject renderObject) =>
-      (renderObject as _ListItemRenderObject).textDirection = textDirection;
+  void updateRenderObject(BuildContext context, RenderObject renderObject) {
+    renderObject as _ListItemRenderObject
+      ..textAlign = textAlign
+      ..textDirection = textDirection;
+  }
 }
 
 class _ListItemData extends ContainerBoxParentData<RenderBox> {}
@@ -45,8 +56,21 @@ class _ListItemRenderObject extends RenderBox
         ContainerRenderObjectMixin<RenderBox, _ListItemData>,
         RenderBoxContainerDefaultsMixin<RenderBox, _ListItemData> {
   _ListItemRenderObject({
+    TextAlign? textAlign,
     required TextDirection textDirection,
-  }) : _textDirection = textDirection;
+  })  : _textAlign = textAlign,
+        _textDirection = textDirection;
+
+  TextAlign? get textAlign => _textAlign;
+  TextAlign? _textAlign;
+  set textAlign(TextAlign? value) {
+    if (_textAlign == value) {
+      return;
+    }
+
+    _textAlign = value;
+    markNeedsLayout();
+  }
 
   TextDirection get textDirection => _textDirection;
   TextDirection _textDirection;
@@ -112,28 +136,35 @@ class _ListItemRenderObject extends RenderBox
     }
 
     final childData = child.parentData! as _ListItemData;
-    final childSize = fn(child, bc);
+    final childConstraints = bc.maxWidth.isFinite && textAlign != null
+        ? bc.tighten(width: bc.maxWidth)
+        : bc;
+    final childSize = fn(child, childConstraints);
     final marker = childData.nextSibling;
     final markerSize = marker != null ? fn(marker, bc.loosen()) : Size.zero;
     final height = childSize.height > 0 ? childSize.height : markerSize.height;
     final size = bc.constrain(Size(childSize.width, height));
 
-    if (identical(fn, ChildLayoutHelper.layoutChild) && marker != null) {
-      const baseline = TextBaseline.alphabetic;
-      final markerDistance =
-          marker.getDistanceToBaseline(baseline, onlyReal: true) ??
-              markerSize.height;
-      final childDistance =
-          child.getDistanceToBaseline(baseline, onlyReal: true) ??
-              markerDistance;
-
-      final markerData = marker.parentData! as _ListItemData;
-      markerData.offset = Offset(
-        textDirection == TextDirection.ltr
-            ? -markerSize.width - _kGapVsMarker
-            : childSize.width + _kGapVsMarker,
-        childDistance - markerDistance,
-      );
+    if (identical(fn, ChildLayoutHelper.layoutChild)) {
+      childData.offset = Offset.zero;
+
+      if (marker != null) {
+        const baseline = TextBaseline.alphabetic;
+        final markerDistance =
+            marker.getDistanceToBaseline(baseline, onlyReal: true) ??
+                markerSize.height;
+        final childDistance =
+            child.getDistanceToBaseline(baseline, onlyReal: true) ??
+                markerDistance;
+
+        final markerData = marker.parentData! as _ListItemData;
+        markerData.offset = Offset(
+          textDirection == TextDirection.ltr
+              ? -markerSize.width - _kGapVsMarker
+              : childSize.width + _kGapVsMarker,
+          childDistance - markerDistance,
+        );
+      }
     }
 
     return size;

packages/core/test/tag_li_test.dart

@@ -1,6 +1,7 @@
 import 'dart:io';
 
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
 import 'package:golden_toolkit/golden_toolkit.dart';
@@ -71,6 +72,30 @@ Future<void> main() async {
     );
   });
 
+  testWidgets('renders centered text within list item', (tester) async {
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(
+          body: SizedBox(
+            width: 200,
+            child: HtmlWidget(
+              '<ol><li style="text-align: center">data 1</li></ol>',
+            ),
+          ),
+        ),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    final itemRect = tester.getRect(find.byType(HtmlListItem));
+    final paragraph = tester.renderObject<RenderParagraph>(findText('data 1'));
+    final textRect = tester.getRect(findText('data 1'));
+
+    expect(itemRect.width, greaterThan(100));
+    expect(paragraph.textAlign, equals(TextAlign.center));
+    expect(textRect.center.dx, closeTo(itemRect.center.dx, .1));
+  });
+
   testWidgets('renders nested list', (WidgetTester tester) async {
     const html = '''
 <ul>
@@ -876,6 +901,31 @@ Future<void> main() async {
       );
     });
 
+    testWidgets('computeDryLayout with textAlign', (tester) async {
+      final key = GlobalKey();
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(
+            body: SizedBox(
+              width: 100,
+              child: HtmlListItem(
+                key: key,
+                textAlign: TextAlign.center,
+                textDirection: TextDirection.ltr,
+                child: const SizedBox(width: 50, height: 5),
+              ),
+            ),
+          ),
+        ),
+      );
+      await tester.pumpAndSettle();
+
+      expect(
+        key.renderBox.getDryLayout(const BoxConstraints(maxWidth: 100)),
+        equals(const Size(100, 5)),
+      );
+    });
+
     testWidgets('computeDryLayout with no op marker', (tester) async {
       final key = GlobalKey();
       await tester.pumpWidget(