fix(css): defer inset-inline-* mapping until direction resolves

   - Avoid eagerly mapping insetInlineStart/End to left/right during style flush; store logical insets and resolve in getters so RTL/LTR changes don’t require HMR.
   - Treat insetInlineStart/End like left/right for percentage resolution.
   - Add regression test for remapping on direction change.

Author: andycall

webf/lib/src/css/position.dart

@@ -4,6 +4,8 @@
  * Licensed under GNU GPL with Enterprise exception.
  */
 
+import 'dart:ui';
+
 import 'package:webf/css.dart';
 import 'package:webf/dom.dart';
 
@@ -53,8 +55,6 @@ mixin CSSPositionMixin on RenderStyle {
     _markContainingBlockNeedsLayout();
   }
 
-  @override
-  CSSLengthValue get left => _left ?? CSSLengthValue.auto;
   CSSLengthValue? _left;
   set left(CSSLengthValue? value) {
     if (_left == value) {
@@ -65,7 +65,25 @@ mixin CSSPositionMixin on RenderStyle {
   }
 
   @override
-  CSSLengthValue get right => _right ?? CSSLengthValue.auto;
+  CSSLengthValue get left {
+    final CSSLengthValue physical = _left ?? CSSLengthValue.auto;
+    // Keep logical values so they can remap when `direction` changes. When a
+    // physical side is explicitly specified, it should override the logical
+    // fallback (matches paddingInlineStart/end behavior).
+    final CSSLengthValue? logical =
+        (direction == TextDirection.rtl) ? _insetInlineEnd : _insetInlineStart;
+    if (_left != null) return physical;
+    return logical ?? physical;
+  }
+
+  @override
+  CSSLengthValue get right {
+    final CSSLengthValue physical = _right ?? CSSLengthValue.auto;
+    final CSSLengthValue? logical =
+        (direction == TextDirection.rtl) ? _insetInlineStart : _insetInlineEnd;
+    if (_right != null) return physical;
+    return logical ?? physical;
+  }
   CSSLengthValue? _right;
   set right(CSSLengthValue? value) {
     if (_right == value) {
@@ -75,6 +93,20 @@ mixin CSSPositionMixin on RenderStyle {
     _markContainingBlockNeedsLayout();
   }
 
+  CSSLengthValue? _insetInlineStart;
+  set insetInlineStart(CSSLengthValue? value) {
+    if (_insetInlineStart == value) return;
+    _insetInlineStart = value;
+    _markContainingBlockNeedsLayout();
+  }
+
+  CSSLengthValue? _insetInlineEnd;
+  set insetInlineEnd(CSSLengthValue? value) {
+    if (_insetInlineEnd == value) return;
+    _insetInlineEnd = value;
+    _markContainingBlockNeedsLayout();
+  }
+
   // The z-index property specifies the stack order of an element.
   // Only works on positioned elements(position: absolute/relative/fixed).
   int? _zIndex;

webf/lib/src/css/render_style.dart

@@ -1689,7 +1689,7 @@ class CSSRenderStyle extends RenderStyle
 
     // Map logical properties to physical properties based on current direction.
     //
-    // Note: Do NOT eagerly map padding-inline-start/end to physical paddings here.
+    // Note: Do NOT eagerly map padding-inline-start/end or inset-inline-start/end to physical sides here.
     // `direction` is inherited and may change after the property is applied (e.g., when
     // an ancestor sets `direction` later in the same style flush). Eager mapping can
     // leave stale padding on the wrong side (LTR->RTL), shrinking the content box.
@@ -1705,8 +1705,6 @@ class CSSRenderStyle extends RenderStyle
       propertyName = isRTL ? BORDER_RIGHT_STYLE : BORDER_LEFT_STYLE;
     } else if (name == BORDER_INLINE_START_COLOR) {
       propertyName = isRTL ? BORDER_RIGHT_COLOR : BORDER_LEFT_COLOR;
-    } else if (name == INSET_INLINE_START) {
-      propertyName = isRTL ? RIGHT : LEFT;
     }
     // Handle inline-end properties (maps to right in LTR, left in RTL)
     else if (name == BORDER_INLINE_END) {
@@ -1717,8 +1715,6 @@ class CSSRenderStyle extends RenderStyle
       propertyName = isRTL ? BORDER_LEFT_STYLE : BORDER_RIGHT_STYLE;
     } else if (name == BORDER_INLINE_END_COLOR) {
       propertyName = isRTL ? BORDER_LEFT_COLOR : BORDER_RIGHT_COLOR;
-    } else if (name == INSET_INLINE_END) {
-      propertyName = isRTL ? LEFT : RIGHT;
     }
     // Handle block-start properties (maps to top)
     else if (name == MARGIN_BLOCK_START) {
@@ -1784,12 +1780,18 @@ class CSSRenderStyle extends RenderStyle
       case TOP:
         top = value;
         break;
+      case INSET_INLINE_START:
+        insetInlineStart = value;
+        break;
       case LEFT:
         left = value;
         break;
       case BOTTOM:
         bottom = value;
         break;
+      case INSET_INLINE_END:
+        insetInlineEnd = value;
+        break;
       case RIGHT:
         right = value;
         break;
@@ -2202,7 +2204,7 @@ class CSSRenderStyle extends RenderStyle
 
     // Map logical properties to physical properties based on current direction.
     //
-    // Note: Do NOT eagerly map padding-inline-start/end to physical paddings here.
+    // Note: Do NOT eagerly map padding-inline-start/end or inset-inline-start/end to physical sides here.
     // See [setProperty] above for rationale.
     String mappedPropertyName = propertyName;
     final bool isRTL = direction == TextDirection.rtl;
@@ -2216,8 +2218,6 @@ class CSSRenderStyle extends RenderStyle
       mappedPropertyName = isRTL ? BORDER_RIGHT_STYLE : BORDER_LEFT_STYLE;
     } else if (propertyName == BORDER_INLINE_START_COLOR) {
       mappedPropertyName = isRTL ? BORDER_RIGHT_COLOR : BORDER_LEFT_COLOR;
-    } else if (propertyName == INSET_INLINE_START) {
-      mappedPropertyName = isRTL ? RIGHT : LEFT;
     }
     // Handle inline-end properties (maps to right in LTR, left in RTL)
     else if (propertyName == BORDER_INLINE_END) {
@@ -2228,8 +2228,6 @@ class CSSRenderStyle extends RenderStyle
       mappedPropertyName = isRTL ? BORDER_LEFT_STYLE : BORDER_RIGHT_STYLE;
     } else if (propertyName == BORDER_INLINE_END_COLOR) {
       mappedPropertyName = isRTL ? BORDER_LEFT_COLOR : BORDER_RIGHT_COLOR;
-    } else if (propertyName == INSET_INLINE_END) {
-      mappedPropertyName = isRTL ? LEFT : RIGHT;
     }
     // Handle block-start properties (maps to top)
     else if (propertyName == MARGIN_BLOCK_START) {
@@ -2310,6 +2308,8 @@ class CSSRenderStyle extends RenderStyle
       case LEFT:
       case BOTTOM:
       case RIGHT:
+      case INSET_INLINE_START:
+      case INSET_INLINE_END:
       case FLEX_BASIS:
       case WIDTH:
       case MIN_WIDTH:

webf/lib/src/css/values/length.dart

@@ -761,6 +761,8 @@ class CSSLengthValue {
             break;
           case LEFT:
           case RIGHT:
+          case INSET_INLINE_START:
+          case INSET_INLINE_END:
             // Offset of positioned element starts from the edge of padding box of containing block.
             if (parentPaddingBoxWidth != null) {
               _computedValue = value! * parentPaddingBoxWidth;
@@ -1004,6 +1006,8 @@ class CSSLengthValue {
       case BOTTOM:
       case LEFT:
       case RIGHT:
+      case INSET_INLINE_START:
+      case INSET_INLINE_END:
         if (computedValue == double.infinity) {
           return true;
         }

webf/test/src/css/logical_inset_direction_test.dart

@@ -0,0 +1,82 @@
+/*
+ * Copyright (C) 2022-present The WebF authors. All rights reserved.
+ */
+
+import 'package:flutter_test/flutter_test.dart';
+import 'package:webf/dom.dart' as dom;
+import 'package:webf/webf.dart';
+
+import '../../setup.dart';
+import '../widget/test_utils.dart';
+
+void main() {
+  setUpAll(() {
+    setupTest();
+  });
+
+  setUp(() {
+    WebFControllerManager.instance.initialize(
+      WebFControllerManagerConfig(
+        maxAliveInstances: 5,
+        maxAttachedInstances: 5,
+        enableDevTools: false,
+      ),
+    );
+  });
+
+  tearDown(() async {
+    WebFControllerManager.instance.disposeAll();
+    await Future.delayed(const Duration(milliseconds: 100));
+  });
+
+  group('logical inset with direction inheritance', () {
+    testWidgets('insetInlineStart remaps when direction changes to RTL', (WidgetTester tester) async {
+      final prepared = await WebFWidgetTestUtils.prepareWidgetTest(
+        tester: tester,
+        controllerName: 'logical-inset-rtl-${DateTime.now().millisecondsSinceEpoch}',
+        html: '''
+          <html>
+            <head>
+              <style>
+                body { margin: 0; padding: 0; }
+                #cb { position: relative; width: 200px; height: 100px; }
+                #abs { background: blue; }
+              </style>
+            </head>
+            <body>
+              <div id="cb">
+                <div id="abs"></div>
+              </div>
+            </body>
+          </html>
+        ''',
+      );
+
+      final dom.Element cb = prepared.getElementById('cb');
+      final dom.Element abs = prepared.getElementById('abs');
+
+      abs.style.setProperty('position', 'absolute');
+      abs.style.setProperty('width', '20px');
+      abs.style.setProperty('height', '10px');
+      abs.style.setProperty('top', '0px');
+      abs.style.setProperty('insetInlineStart', '10%');
+      abs.style.flushPendingProperties();
+
+      await tester.pump(const Duration(milliseconds: 50));
+
+      final cbRect = cb.getBoundingClientRect();
+      final absRectLtr = abs.getBoundingClientRect();
+      final expectedLtr = cbRect.left + cbRect.width * 0.1;
+      expect(absRectLtr.left, closeTo(expectedLtr, 0.5));
+
+      cb.style.setProperty('direction', 'rtl');
+      cb.style.flushPendingProperties();
+
+      await tester.pump(const Duration(milliseconds: 50));
+
+      final absRectRtl = abs.getBoundingClientRect();
+      final expectedLeftRtl = cbRect.left + cbRect.width - cbRect.width * 0.1 - absRectRtl.width;
+      expect(absRectRtl.left, closeTo(expectedLeftRtl, 0.5));
+    });
+  });
+}