Fix the sliver with positioned element usage problem.

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

@@ -200,15 +200,15 @@ describe('display sliver', () => {
       done();
     });
   });
-  
+
   it('sliver child is text or comment', async () => {
     var comment = document.createComment('HelloWorld');
     var text = document.createTextNode('HelloWorld');
     // Empty text node has different logic in backend.
     var emptyText = document.createTextNode('');
 
     var container = createSliverBasicCase();
-    
+
     container.insertBefore(emptyText, container.firstChild);
     container.insertBefore(text, container.firstChild);
     container.insertBefore(comment, container.firstChild);
@@ -219,7 +219,7 @@ describe('display sliver', () => {
 
   it('sliver child is display none', async () => {
     var container = createSliverBasicCase();
-    
+
     container.children[2].style.display = 'none';
     await snapshot(); // Not throws error is ok.
   });
@@ -252,12 +252,29 @@ describe('display sliver', () => {
     var container = createSliverBasicCase();
     var firstChild = container.firstChild; // should be element.
     firstChild.style.position = 'relative';
-    
+
     var innerChild = document.createElement('div');
     innerChild.appendChild(document.createTextNode('helloworld'));
     innerChild.style.position = 'relative';
     innerChild.style.top = innerChild.style.left = '15px';
     firstChild?.appendChild(innerChild);
     await snapshot();
   });
+
+  it('sliver item absolute', async () => {
+    var container = createSliverBasicCase();
+    document.body.appendChild(container);
+
+    var absoluted = document.createElement('div');
+    Object.assign(absoluted.style, {
+      width: '10px',
+      height: '10px',
+      position: 'absolute',
+      background: 'green',
+      top: 0,
+      right: 0,
+    });
+    container.childNodes[1].appendChild(absoluted);
+    await snapshot();
+  });
 });

integration_tests/specs/css/css-transitions/transition-events.ts

@@ -2,7 +2,9 @@ describe('Transition events', () => {
   it('basic transitionrun', (done) => {
     const container1 = document.createElement('div');
     document.body.appendChild(container1);
-    container1.addEventListener('transitionrun', async () => {
+    container1.addEventListener('transitionrun', function self() {
+      container1.removeEventListener('transitionstart', self);
+      document.body.removeChild(container1);
       done();
     });
     setElementStyle(container1, {
@@ -24,7 +26,9 @@ describe('Transition events', () => {
   it('basic transitionstart', (done) => {
     const container1 = document.createElement('div');
     document.body.appendChild(container1);
-    container1.addEventListener('transitionstart', async () => {
+    container1.addEventListener('transitionstart', function self() {
+      container1.removeEventListener('transitionstart', self);
+      document.body.removeChild(container1);
       done();
     });
 
@@ -37,7 +41,7 @@ describe('Transition events', () => {
       transition: 'transform 1s linear',
     });
 
-    requestAnimationFrame(async () => {
+    requestAnimationFrame(() => {
       setElementStyle(container1, {
         transform: 'translate(10px,20px)',
       });
@@ -63,7 +67,6 @@ describe('Transition events', () => {
       done();
     });
     requestAnimationFrame(async () => {
-
       await snapshot();
       setElementStyle(container1, {
         transform: 'translate(10px,20px)',

integration_tests/specs/css/css-transitions/transition-property.ts

@@ -6,7 +6,7 @@ describe('Transition property', () => {
       position: 'absolute',
       padding: '30px',
       transition: 'all 1s linear',
-    }); 
+    });
     container1.appendChild(document.createTextNode('DIV'));
     await snapshot();
 

integration_tests/specs/css/css-values/vmin-vmax.ts

@@ -26,6 +26,7 @@ describe('vmin-vmax', () => {
 
     div.addEventListener('transitionend', async () => {
       await snapshot();
+      BODY.removeChild(div);
       done();
     });
 

integration_tests/specs/css/css-values/vw-vh.ts

@@ -27,6 +27,7 @@ describe('vw-vh', () => {
 
     div.addEventListener('transitionend', async () => {
       await snapshot();
+      BODY.removeChild(div);
       done();
     });
 

kraken/lib/src/css/animation.dart

@@ -94,16 +94,16 @@ class AnimationTimeline {
         _ticker.stop();
       }
     } else {
-      for (int i = 0; i < _animations.length; i++) {
-        _animations[i]._tick(_currentTime);
+      for (Animation animation in [..._animations]) {
+        animation._tick(_currentTime);
       }
     }
   }
 
   List<Animation> _getActiveAnimations() {
     List<Animation> activeAnimations = [];
 
-    for (Animation animation in _animations) {
+    for (Animation animation in [..._animations]) {
       AnimationPlayState playState = animation.playState;
       if (playState != AnimationPlayState.finished && playState != AnimationPlayState.idle) {
         activeAnimations.add(animation);
@@ -121,6 +121,14 @@ class AnimationTimeline {
       _ticker.start();
     }
   }
+
+  void _removeAnimation(Animation animation) {
+    _animations.remove(animation);
+
+    if (_animations.isEmpty) {
+      _ticker.stop();
+    }
+  }
 }
 
 class Animation {
@@ -295,6 +303,7 @@ class Animation {
     _currentTime = 0;
     _startTime = null;
     _effect!._calculateTiming(null);
+    timeline?._removeAnimation(this);
 
     if (oncancel != null) {
       var event = AnimationPlaybackEvent(EVENT_CANCEL);
@@ -359,6 +368,15 @@ class Animation {
     timeline!._addAnimation(this);
   }
 
+  void dispose() {
+    onstart = null;
+    onfinish = null;
+    onremove = null;
+    oncancel = null;
+    cancel();
+    timeline?._removeAnimation(this);
+  }
+
   void _rewind() {
     if (_playbackRate >= 0) {
       _currentTime = 0;
@@ -386,6 +404,7 @@ class Animation {
         event.currentTime = currentTime;
         event.timelineTime = timelineTime;
         if (onfinish != null) onfinish!(event);
+        timeline?._removeAnimation(this);
         _finishedFlag = true;
       }
     } else {

kraken/lib/src/css/transition.dart

@@ -365,8 +365,8 @@ mixin CSSTransitionMixin on RenderStyle {
 
   void cancelRunningTransition() {
     if (_propertyRunningTransition.isNotEmpty) {
-      for (String property in _propertyRunningTransition.keys) {
-        _propertyRunningTransition[property]!.cancel();
+      for (Animation animation in _propertyRunningTransition.values) {
+        animation.cancel();
       }
       _propertyRunningTransition.clear();
     }

kraken/lib/src/dom/bounding_client_rect.dart

@@ -7,6 +7,8 @@ import 'package:ffi/ffi.dart';
 import 'package:kraken/bridge.dart';
 
 class BoundingClientRect {
+  static const BoundingClientRect zero = BoundingClientRect(0, 0, 0, 0, 0, 0, 0, 0);
+
   final double x;
   final double y;
   final double width;
@@ -16,7 +18,7 @@ class BoundingClientRect {
   final double bottom;
   final double left;
 
-  BoundingClientRect(this.x, this.y, this.width, this.height, this.top, this.right, this.bottom, this.left);
+  const BoundingClientRect(this.x, this.y, this.width, this.height, this.top, this.right, this.bottom, this.left);
 
   Pointer<NativeBoundingClientRect> toNative() {
     Pointer<NativeBoundingClientRect> nativeBoundingClientRect = malloc.allocate<NativeBoundingClientRect>(sizeOf<NativeBoundingClientRect>());
@@ -31,7 +33,7 @@ class BoundingClientRect {
     return nativeBoundingClientRect;
   }
 
-  Map<String, dynamic> toJSON() {
+  Map<String, double> toJSON() {
     return {
       'x': x,
       'y': y,