🎨 fix: recycler view with overflow error

integration_tests/specs/css/css-display/sliver.ts

@@ -41,6 +41,33 @@ describe('display sliver', () => {
     await snapshot();
   });
 
+  it('scrollTop', async () => {
+    const container = createSliverBasicCase();
+
+    container.scrollBy(0, 200);
+    expect(container.scrollTop).toEqual(200);
+
+    container.scrollBy(0, -150);
+    expect(container.scrollTop).toEqual(50);
+  });
+
+  it('scrollHeight', async () => {
+    const container = createSliverBasicCase();
+
+    container.scrollBy(0, 200);
+    expect(container.scrollHeight).toEqual(100 * 99);
+  });
+
+  it('child contains Comment and Text', async () => {
+    const container = createSliverBasicCase();
+    const comment = document.createComment('foo');
+    container.appendChild(comment);
+    container.appendChild(document.createTextNode('hello'));
+
+    // No error occurred, pass.
+    await snapshot();
+  });
+
   it('continuous scroll works', async () => {
     const container = createSliverBasicCase();
 
@@ -51,6 +78,27 @@ describe('display sliver', () => {
     await snapshot();
   });
 
+  it('insertBefore with right order', async () => {
+    var d = document.createElement('div');
+
+    for (var i = 0; i < 100; i ++) {
+      var e = document.createElement('div');
+      e.style.background = 'red';
+      e.style.width = e.style.height = '99px';
+      e.appendChild(document.createTextNode(i + ''));
+      d.insertBefore(e, d.firstChild);
+    }
+
+    d.style.display = 'sliver';
+    d.style.width = '100px';
+    d.style.height = '150px';
+
+    document.body.appendChild(d);
+
+    // Order from 99 -> 0
+    await snapshot();
+  });
+
   it('should works with positioned element of no top and left', async () => {
     let div;
     div = createElement(

kraken/lib/src/bridge/to_native.dart

@@ -136,7 +136,7 @@ nativeDynamicLibrary.lookup<NativeFunction<NativeEvaluateScripts>>('evaluateScri
 final DartParseHTML _parseHTML =
 nativeDynamicLibrary.lookup<NativeFunction<NativeParseHTML>>('parseHTML').asFunction();
 
-void evaluateScripts(int contextId, String code, String url, int line) {
+void evaluateScripts(int contextId, String code, String url, [int line = 0]) {
   if(KrakenController.getControllerOfJSContextId(contextId) == null) {
     return;
   }

kraken/lib/src/css/overflow.dart

@@ -48,8 +48,6 @@ CSSOverflowType _getOverflowType(String definition) {
   }
 }
 
-typedef ScrollListener = void Function(double scrollTop, AxisDirection axisDirection);
-
 mixin CSSOverflowStyleMixin on RenderStyleBase {
   CSSOverflowType _overflowX = CSSOverflowType.visible;
   CSSOverflowType get overflowX {
@@ -87,7 +85,8 @@ mixin CSSOverflowMixin on ElementBase {
   // House content which can be scrolled.
   RenderLayoutBox? scrollingContentLayoutBox;
 
-  void updateRenderOverflow(Element element, ScrollListener scrollListener) {
+  void updateRenderOverflow(Element element) {
+    ScrollListener scrollListener = element.elementDelegate.handleScroll;
     CSSStyleDeclaration style = element.style;
     RenderBoxModel renderBoxModel = element.renderBoxModel!;
     RenderStyle renderStyle = renderBoxModel.renderStyle;
@@ -155,6 +154,11 @@ mixin CSSOverflowMixin on ElementBase {
         break;
     }
 
+    // Recycler layout not need repaintBoundary, which handle it self.
+    if (renderBoxModel is RenderRecyclerLayout) {
+      return;
+    }
+
     renderBoxModel.scrollListener = scrollListener;
     renderBoxModel.pointerListener = _pointerListener;
 
@@ -267,7 +271,7 @@ mixin CSSOverflowMixin on ElementBase {
     if (parent is RenderObjectWithChildMixin<RenderBox>) {
       parent.child = null;
     } else if (parent is ContainerRenderObjectMixin) {
-      ContainerBoxParentData parentData = renderObject!.parentData as ContainerBoxParentData<RenderObject>;
+      ContainerParentDataMixin parentData = renderObject!.parentData as ContainerParentDataMixin<RenderObject>;
       RenderObject? previousSibling = parentData.previousSibling;
       parent.remove(renderObject);
       return previousSibling;
@@ -298,31 +302,45 @@ mixin CSSOverflowMixin on ElementBase {
   }
 
   double get scrollTop {
-    if (_scrollableY != null) {
-      return _scrollableY!.position?.pixels ?? 0;
+    KrakenScrollable? scrollableY = _getScrollable(Axis.vertical);
+    if (scrollableY != null) {
+      return scrollableY.position?.pixels ?? 0;
     }
     return 0.0;
   }
+
   set scrollTop(double value) {
     scrollTo(y: value);
   }
 
   double get scrollLeft {
-    if (_scrollableX != null) {
-      return _scrollableX!.position?.pixels ?? 0;
+    KrakenScrollable? scrollableX = _getScrollable(Axis.horizontal);
+    if (scrollableX != null) {
+      return scrollableX.position?.pixels ?? 0;
     }
     return 0.0;
   }
+
   set scrollLeft(double value) {
     scrollTo(x: value);
   }
 
-  get scrollHeight {
+  double get scrollHeight {
+    KrakenScrollable? scrollable = _getScrollable(Axis.vertical);
+    if (scrollable?.position?.maxScrollExtent != null) {
+      // Viewport height + maxScrollExtent
+      return renderBoxModel!.clientHeight + scrollable!.position!.maxScrollExtent!;
+    }
+
     Size scrollContainerSize = renderBoxModel!.scrollableSize;
     return scrollContainerSize.height;
   }
 
-  get scrollWidth {
+  double get scrollWidth {
+    KrakenScrollable? scrollable = _getScrollable(Axis.horizontal);
+    if (scrollable?.position?.maxScrollExtent != null) {
+      return renderBoxModel!.clientWidth + scrollable!.position!.maxScrollExtent!;
+    }
     Size scrollContainerSize = renderBoxModel!.scrollableSize;
     return scrollContainerSize.width;
   }
@@ -349,7 +367,8 @@ mixin CSSOverflowMixin on ElementBase {
   KrakenScrollable? _getScrollable(Axis direction) {
     KrakenScrollable? scrollable;
     if (renderer is RenderRecyclerLayout) {
-      scrollable = (renderer as RenderRecyclerLayout).scrollable;
+      RenderRecyclerLayout recyclerLayout = renderer as RenderRecyclerLayout;
+      scrollable = direction == recyclerLayout.axis ? recyclerLayout.scrollable : null;
     } else {
       if (direction == Axis.horizontal) {
         scrollable = _scrollableX;

kraken/lib/src/css/sliver.dart

@@ -19,13 +19,13 @@ mixin CSSSliverMixin on RenderStyleBase {
 
       if (renderBoxModel is RenderRecyclerLayout) {
         RenderRecyclerLayout recyclerLayout = renderBoxModel as RenderRecyclerLayout;
-
         AxisDirection axisDirection = RenderRecyclerLayout.getAxisDirection(value);
+
         recyclerLayout.scrollable = KrakenScrollable(axisDirection: axisDirection);
-        RenderViewport renderViewport = recyclerLayout.renderViewport!;
-        renderViewport.axisDirection = axisDirection;
-        renderViewport.crossAxisDirection = RenderRecyclerLayout.getCrossAxisDirection(value);
-        renderViewport.offset = recyclerLayout.scrollable!.position!;
+        recyclerLayout.viewport
+          ..axisDirection = axisDirection
+          ..crossAxisDirection = RenderRecyclerLayout.getCrossAxisDirection(value)
+          ..offset = recyclerLayout.scrollable.position!;
 
         recyclerLayout.markNeedsLayout();
       }