fix: reposition children when position changed

integration_tests/specs/css/css-position/nonstatic-to-static.ts

@@ -66,4 +66,57 @@ describe('Position non-static', () => {
 
     await snapshot();
   });
+
+  it('children should reposition when parent position changed from relative to static', async (done) => {
+    let div;
+    let item1;
+    let item2;
+    div = createElement(
+      'div',
+      {
+        style: {
+          position: 'relative',
+          width: '200px',
+          height: '100px',
+          display: 'flex',
+          flexDirection: 'row',
+          backgroundColor: 'green',
+        },
+      },
+      [
+        (item1 = createElement('div', {
+          style: {
+            position: 'relative',
+            margin: '30px',
+            width: '100px',
+            height: '50px',
+            backgroundColor: 'yellow',
+          }
+        }, [
+          createElement('div', {
+              style: {} 
+          }, [
+            (item2 = createElement('div', {
+              style: {
+                  position: 'absolute',
+                  top: 0, 
+                  left: 0,
+                  width: '30px',
+                  height: '30px',
+                  backgroundColor: 'red'
+              }
+            })),
+          ])
+        ])),
+      ]
+    );
+
+    BODY.appendChild(div);
+
+    requestAnimationFrame(async () => {
+      item1.style.position = 'static';
+      await snapshot();
+      done();
+    });
+  });
 });

integration_tests/specs/css/css-position/static-to-nostatic.ts

@@ -59,4 +59,56 @@ describe('Position static', () => {
 
     await snapshot();
   });
+
+  it('children should reposition when parent position changed from static to relative', async (done) => {
+    let div;
+    let item1;
+    let item2;
+    div = createElement(
+      'div',
+      {
+        style: {
+          position: 'relative',
+          width: '200px',
+          height: '100px',
+          display: 'flex',
+          flexDirection: 'row',
+          backgroundColor: 'green',
+        },
+      },
+      [
+        (item1 = createElement('div', {
+          style: {
+            margin: '30px',
+            width: '100px',
+            height: '50px',
+            backgroundColor: 'yellow',
+          }
+        }, [
+          createElement('div', {
+              style: {} 
+          }, [
+            (item2 = createElement('div', {
+              style: {
+                  position: 'absolute',
+                  top: 0, 
+                  left: 0,
+                  width: '30px',
+                  height: '30px',
+                  backgroundColor: 'red'
+              }
+            })),
+          ])
+        ])),
+      ]
+    );
+
+    BODY.appendChild(div);
+
+    requestAnimationFrame(async () => {
+      item1.style.position = 'relative';
+      await snapshot();
+      done();
+    });
+  });
 });

kraken/lib/src/css/style_declaration.dart

@@ -436,6 +436,10 @@ class CSSStyleDeclaration {
     for (String propertyName in propertyNames) {
       String? prevValue = prevValues[propertyName];
       String currentValue = pendingProperties[propertyName]!;
+
+      // Return if value has not changed.
+      if (currentValue == prevValue) return;
+
       _emitPropertyChanged(propertyName, prevValue, currentValue);
     }
   }