Fix: fix dart type error when attach flex layout underneath of Flutter ListView

.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 () => {