Fix: fix dart type error when attach flex layout underneath of Flutte…

…r ListView (#650)

```
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following _TypeError was thrown during performLayout():
type 'ParentData' is not a subtype of type 'RenderLayoutParentData' in type cast

The relevant error-causing widget was:
  WebF WebF:file:///Users/user/Desktop/Binance/webf/webf/example/lib/main.dart:214:16

When the exception was thrown, this was the stack:
#0      RenderFlexLayout._needToStretchChildCrossSize (package:webf/src/rendering/flex.dart:2243:69)
#1      RenderFlexLayout._getAutoMinSize (package:webf/src/rendering/flex.dart:491:38)
#2      RenderFlexLayout._getMinMainAxisSize (package:webf/src/rendering/flex.dart:369:28)
```

.github/workflows/integration_test_flutter.yml

@@ -5,7 +5,7 @@ on: [workflow_dispatch, pull_request]
 env:
   nodeVersion: "16"
   cmakeVersion: "3.22.x"
-  flutter: "3.22.2"
+  flutter: "3.24.0"
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:

bridge/polyfill/src/test/index.js

@@ -60,6 +60,7 @@ class JasmineTracker {
     resetDocumentElement();
     webf.methodChannel.clearMethodCallHandler();
     document.___clear_cookies__();
+    __webf_sync_buffer__();
   }
   specStarted(result) {
   }

bridge/test/webf_test_context.cc

@@ -265,6 +265,11 @@ static JSValue parseHTML(JSContext* ctx, JSValueConst this_val, int argc, JSValu
   return JS_NULL;
 }
 
+static JSValue syncThreadBuffer(JSContext* ctx, JSValueConst this_val, int argc, JSValueConst* argv) {
+  auto* context = static_cast<ExecutingContext*>(JS_GetContextOpaque(ctx));
+  context->uiCommandBuffer()->SyncToActive();
+}
+
 static JSValue triggerGlobalError(JSContext* ctx, JSValueConst this_val, int argc, JSValueConst* argv) {
   auto* context = static_cast<ExecutingContext*>(JS_GetContextOpaque(ctx));
 
@@ -357,6 +362,7 @@ WebFTestContext::WebFTestContext(ExecutingContext* context)
       {"__webf_environment__", environment, 0},
       {"__webf_simulate_pointer__", simulatePointer, 3},
       {"__webf_simulate_inputtext__", simulateInputText, 1},
+      {"__webf_sync_buffer__", syncThreadBuffer, 0},
       {"__webf_trigger_global_error__", triggerGlobalError, 0},
       {"__webf_parse_html__", parseHTML, 1},
   };

integration_tests/lib/webf_tester.dart

@@ -68,6 +68,7 @@ class _WebFTesterState extends State<WebFTester> {
       disableViewportWidthAssertion: true,
       disableViewportHeightAssertion: true,
       javaScriptChannel: javaScriptChannel,
+      runningThread: FlutterUIThread(),
       onControllerCreated: onControllerCreated,
       onLoad: onLoad,
       gestureListener: GestureListener(

integration_tests/runtime/global.ts

@@ -315,11 +315,62 @@ async function simulatePointUp(x: number, y: number, pointer: number = 0) {
   });
 }
 
+function onDoubleImageLoad(img1: HTMLImageElement, img2: HTMLImageElement, onLoadCallback: () => Promise<void>) {
+  let count = 0;
+  async function onLoad() {
+    count++;
+    if (count >= 2) {
+      await onLoadCallback();
+    }
+  }
+
+  img1.addEventListener('load', onLoad);
+  img2.addEventListener('load', onLoad);
+}
+
+function onTripleImageLoad(img1: HTMLImageElement, img2: HTMLImageElement, img3: HTMLImageElement, onLoadCallback: () => Promise<void>) {
+  let count = 0;
+  async function onLoad() {
+    count++;
+    if (count >= 3) {
+      await onLoadCallback();
+    }
+  }
+
+  img1.addEventListener('load', onLoad);
+  img2.addEventListener('load', onLoad);
+  img3.addEventListener('load', onLoad);
+}
+
+function onFourfoldImageLoad(img1: HTMLImageElement,
+                             img2: HTMLImageElement,
+                             img3: HTMLImageElement,
+                             img4: HTMLImageElement,
+                             onLoadCallback: () => Promise<void>) {
+  let count = 0;
+  async function onLoad() {
+    count++;
+    if (count >= 4) {
+      await onLoadCallback();
+    }
+  }
+
+  img1.addEventListener('load', onLoad);
+  img2.addEventListener('load', onLoad);
+  img3.addEventListener('load', onLoad);
+  img4.addEventListener('load', onLoad);
+}
+
+function onImageLoad(img: HTMLImageElement, onLoadCallback: () => Promise<void>) {
+  img.addEventListener('load', onLoadCallback);
+}
+
 function append(parent: HTMLElement, child: Node) {
   parent.appendChild(child);
 }
 
 async function snapshot(target?: any, filename?: String, postfix?: boolean | string) {
+  window['__webf_sync_buffer__']();
   return new Promise<void>((resolve, reject) => {
     requestAnimationFrame(async () => {
       try {
@@ -425,4 +476,8 @@ Object.assign(global, {
   cacheSnapshot,
   matchCacheSnapshot,
   getSnapshot,
+  onTripleImageLoad,
+  onImageLoad,
+  onFourfoldImageLoad,
+  onDoubleImageLoad
 });

integration_tests/specs/blob/constructor.ts

@@ -49,6 +49,6 @@ describe('Blob API', () => {
     // @ts-ignore
     const base64 = await blob.base64();
 
-    expect(base64).toEqual('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAAiCAYAAAByUUNrAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAATbSURBVHic7dx/aFZVHMfx9xPSD9uzskyzNoqJQgUWgmAJWuSyZRAaJEG/oLZW/hNKP/6o/iiiEJSIiKIkKqEysPJHZYX2w1US9YfhMimtpik5aqTLTXO3P77fy84Oj9vu2EMn+bzgcLjfc+6553n++D535567EpAhIiLJGQPK0CIiqSkBJ/3XkxARkcqUoEVEEqUELSKSKCVoEZFEKUGLiCRKCVpEJFFK0CIiiVKCFhFJVOEEvQ14f5Qu/hvwDnAwiH0IfD1K41dbLzb/3cPo+wXwSXWnIyInmMIJ+llg0ShdfDOwAEvUuTuBZ0Zp/Grbj81/0zD6PgY8UN3piMgJRkscIiKJUoIWEUnUiBP0i8Bk7B96TAQeB/qC9mPASuBS71MLLAQ6RnCtz4CrfYwScAmwAjji7Ws8tis4Z7fHro3GWufxX/x4F3ArUO9jTwYWAweCczb4ORuA2d7vr0Hm+zxwOf3fzTIGfjciIsMxogR9EFgK3IStF08BHgXWB31eAe7CEt6rwJNAG3AF8E+Ba+0A5gB7gKd83Mv8+k94n4uBdiyR5z7w2EbghyD+HvYjUY895GsE3gXuAVZh6+vPYWvL+X/56/KxrgdqgKeBsceZ7ws+VtnHWQIsBz4q8JlFRHJZVqA0W97KPg1i+zz2SBBrgGxGdO4677fZj1f58Y6gTx1ktwTHrd6nIxqryeM9kPVBNgGyO6L2Ru+zIppX3u91b18djb3M423RPFuifj97/KUgNtWv0RvE2r1f/H2oqKioHK8A2YjuoMvYn/q5c73u9roXWzqYje3QaMfunvd4+74C19qO3SHXRfEmr/diSwk3YHfHAIewrYA3AzcCb3u8w+c1z493ej0nGnuu1z9F8cVDzPVvH/M64OQgfhEwfYhzRURiY6oxaL5+u9xLrgw0AGcXGGsvMKlC/Eyv9/uYjdi6+I/A9942D/uAtwGd2I8EwFVe5z8UtdHYZ0TtuVOGmGuX12dVaJsE/D7E+SIioaok6DxBtQIPYwmwBrvTLWoC8GeF+CGv82Sf39FvAbYCM4DzgGs8vtHbpmMP7gDOCcY6NRg7/0tgfMG51kRzC3VViImIDKYq2+zGYol1O3A+duc8WHI+Fh2HDxGnYEsknVGfrV7Xez0RmIa9NLIGW9rI4zOBtdhbivODMS70On5z8RuvLxhkzqF8/rXYZ43fGDxA/927iMhwVW0f9H3A59gWtrXYroqV2JuCuXzt+k0sCYMlxS3YGvJh4G6PL8ISbBv9uzlaGLibYj7wGraU0BTEFwKrsfXnuUF8AZZQW4C3gK+wnRwPAlMZuM5eyTiv19O/g6QZ+BbbybEJ2yESb/UTERmuQk8Wm7EdE5WeON4fHB+G7CGPh+XKoM8RyGZ5vNVjb0BW9tivHnvZrxmOcztkndEcPva2uij+XXBeT9T2JWTTorFnQbYt6JPv4thZ4XMv9bYGP+7GdonkY5UhWwLZvZDNTODJsIqKyv+jAFnJE3TV9GEP8o5ia76V9g93AafR/xDuKLaOOy7q9wfQgy2fjPbiebePP97nUvRcgNODWC/2uevR65oiUlzJS1UTtIiIFFdCN3ciIslSghYRSZQStIhIopSgRUQSpQQtIpIoJWgRkUQpQYuIJEoJWkQkUSVA76mIiCToX+zyAmIAp2CbAAAAAElFTkSuQmCC');
+    expect(base64).toEqual('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAAiCAYAAAByUUNrAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAS7SURBVHic7d1/aFZVHMfx9xPSD9tWlmnWRjFRqMBCECxBi1y2DEKDJOgX1NbKf0Lpxx/VH0UUghIRUZREJVQGVv7IrNB+uEqi/jBcJqXVNCVHjXS5ae72R58Lh8Pj9tzxPHaSzwsOh/s955577vPHd3fnnmcrARlmZpacUThDm5klpwSc9F9PwszMynOCNjNLlBO0mVminKDNzBLlBG1mlignaDOzRDlBm5klygnazCxRhRP0VmB9lS7+K/AOcCCIfQB8VaXxa21A899VQd/PgY+Pw5zM7MRROEE/Cyyo0sU3AfOUqHN3As9Uafxa26f5b6yg72PAA8dhTmZ24vASh5lZopygzcwSNeIE/SIwUX/QYzzwODAYtB8FlgOXqk8DMB/oHsG1PgWu1hgl4BJgGXBY7asU2xmcs0uxa6Ox1ij+s453ArcCTRp7IrAQ2B+cs07nrANmqt+fQ8z3eeDy4LNZEn02ZmaVGFGCPgAsBm7SevEk4FFgbdDnFeAuJbxXgSeBTuAK4O8C19oOzAJ2A09p3Mt0/SfU52KgS4k8975iG4Dvg/h7+iHRpJd8LcC7wD3ACq2vP6e15fyv/PVqrOuBOuBpYPQx5vuCxqrXOIuApcCHBe7ZzCyXZQVK2795K/skiO1V7JEg1gzZtOjcNeq3SccrdLw96NMI2S3BcYf6dEdjtSreD9kgZOMguyNqb1GfZdG88n6vq31lNPYSxTujebZH/X5S/KUgNlnXGAhiXeoXfx4uLi4uxypANqIn6Hr9qp87V3Wf6gEtHczUDo0uPT3vVvveAtfapifkxijeqnqPlhJu0NMxwEFtBbwZuBF4W/FuzWuOjneonhWNPVv1j1F84TBz/UtjXgecHMQvAqZWcK9mZqFRtRg0X79dqpKrB5qBswuMtQeYUCZ+pup9GrNF6+I/AN+pbY5u8DagRz8kAK5Snf+gaIjGPiNqz50yzFx7VZ9Vpm0C8Nsw55uZhWqSoPME1QE8rARYpyfdosYBf5SJH1SdJ/v8iX4zsAWYBpwHXKP4BrVN1Ys7gHOCsU4Nxs5/ExhbcK510dxCvWViZmZDqck2u9FKrNuA8/XkPFRyPhodhy8RJ2mJpCfqs0V1k+rxwBR9aWSVljby+HRgtb6lODcY40LV8TcXv1Z9QQX3Gs6/Qfcaf2Nwf/D0bmZWqZrtg74P+Exb2FZrV8VyfVMwl69dv6kkjJLiZq0hHwLuVnyBEmxnsJujPdpNMRd4TUsJrUF8PrBS68+zg/g8JdR24C3gS+3keBCYHK2zlzNG9dpgB0kb8I12cmzUDpF4q5+ZWaUKvVls046Jcm8c7w+OD0H2kOJhuTLocxiyGYp3KPYGZPWK/aLYy7pmOM7tkPVEc/hIbY1R/NvgvP6o7QvIpkRjz4Bsa9An38Wxo8x9L1Zbs477tEskH6seskWQ3QvZ9ATeDLu4uPw/CpCVlKBrZlAv8o5ozbfc/uFe4LTgJdwRreOOifr9DvRr+aTai+d9Gn+s5lL0XIDTg9iA7rvJX9c0sxEoqdQ0QZuZWXElP9yZmaXLCdrMLFFO0GZmiXKCNjNLlBO0mVminKDNzBLlBG1mlignaDOzRJWCfxxiZmYJ+Qfs8gJi9ynfLgAAAABJRU5ErkJggg==');
   });
 });

integration_tests/specs/css/css-animations/animation-direction-004-manual.html

@@ -44,11 +44,11 @@
 <script>
   await sleep(0.2);
   const main = document.getElementById('main');
-  expect(main.offsetLeft > 0 && main.offsetLeft < 50).toBe(true);
+  expect(main.offsetLeft > 0 && main.offsetLeft < 80).toBe(true);
   await sleep(1);
-  expect(main.offsetLeft < 100 && main.offsetLeft > 20).toBe(true);
+  expect(main.offsetLeft < 100 && main.offsetLeft > 0).toBe(true);
   await sleep(0.8);
   expect(main.offsetLeft > 100 && main.offsetLeft < 150).toBe(true);
   await sleep(0.5);
-  expect(main.offsetLeft < 50 && main.offsetLeft > 0).toBe(true);
+  expect(main.offsetLeft < 80 && main.offsetLeft > 0).toBe(true);
 </script>

integration_tests/specs/css/css-backgrounds/background-position.ts

@@ -21,7 +21,7 @@ describe('Background-position', () => {
     });
     position.appendChild(position1);
     append(BODY, position);
-    await snapshot(0.1);
+    await snapshot(1);
   });
 
   it('left', async () => {
@@ -46,7 +46,7 @@ describe('Background-position', () => {
     position.appendChild(position2);
 
     append(BODY, position);
-    await snapshot(0.5);
+    await snapshot(1);
   });
 
   it('top', async () => {
@@ -72,7 +72,7 @@ describe('Background-position', () => {
     position.appendChild(position3);
 
     append(BODY, position);
-    await snapshot(0.1);
+    await snapshot(1);
   });
 
   it('right', async () => {
@@ -98,7 +98,7 @@ describe('Background-position', () => {
     position.appendChild(position4);
 
     append(BODY, position);
-    await snapshot(0.1);
+    await snapshot(1);
   });
 
   it('bottom', async () => {
@@ -122,7 +122,7 @@ describe('Background-position', () => {
     });
     position.appendChild(position5);
     append(BODY, position);
-    await snapshot(0.1);
+    await snapshot(1);
   });
 
   it('right center', async () => {
@@ -145,7 +145,7 @@ describe('Background-position', () => {
     });
     append(position, div);
     append(BODY, position);
-    await snapshot(0.1);
+    await snapshot(1);
   });
 
   it('should works with length type', async () => {
@@ -157,7 +157,7 @@ describe('Background-position', () => {
       backgroundPosition: '40px 60px',
     });
     append(BODY, position1);
-    await snapshot(0.1);
+    await snapshot(1);
   });
 
   it('should works with length type and background-repeat of repeat', async () => {
@@ -169,7 +169,7 @@ describe('Background-position', () => {
       backgroundPosition: '40px 60px',
     });
     append(BODY, position1);
-    await snapshot(0.1);
+    await snapshot(1);
   });
 
   it('should works with percentage type', async () => {
@@ -180,7 +180,7 @@ describe('Background-position', () => {
       background: 'url(assets/cat.png) 80% 40% no-repeat yellow',
     });
     append(BODY, position1);
-    await snapshot(0.1);
+    await snapshot(1);
   });
 
   it('should works with mixing type 1', async () => {
@@ -191,7 +191,7 @@ describe('Background-position', () => {
       background: 'url(assets/cat.png) 80% 40px no-repeat yellow',
     });
     append(BODY, position1);
-    await snapshot(0.1);
+    await snapshot(1);
   });
 
   it('should works with mixing type 2', async () => {
@@ -202,7 +202,7 @@ describe('Background-position', () => {
       background: 'url(assets/cat.png) 40px top no-repeat yellow',
     });
     append(BODY, position1);
-    await snapshot(0.1);
+    await snapshot(1);
   });
 
   it('should works with mixing type 3', async () => {
@@ -213,7 +213,7 @@ describe('Background-position', () => {
       background: 'url(assets/cat.png) 30% bottom no-repeat yellow',
     });
     append(BODY, position1);
-    await snapshot(0.1);
+    await snapshot(1);
   });
 
   it('should works when background image size is bigger than container size', async () => {
@@ -224,7 +224,7 @@ describe('Background-position', () => {
       background: 'url(assets/cat.png) 20px bottom no-repeat yellow',
     });
     append(BODY, position1);
-    await snapshot(0.1);
+    await snapshot(1);
   });
 
   it('should works with background-position-x', async () => {
@@ -236,7 +236,7 @@ describe('Background-position', () => {
       backgroundPositionX: '50px',
     });
     append(BODY, position1);
-    await snapshot(0.1);
+    await snapshot(1);
   });
 
   it('should works with background-position-y', async () => {
@@ -248,7 +248,7 @@ describe('Background-position', () => {
       backgroundPositionY: 'bottom',
     });
     append(BODY, position1);
-    await snapshot(0.1);
+    await snapshot(1);
   });
 
   it("computed", async () => {