fix: ensure bind:offsetHeight updates (#8096)

fixes #4233 by calling the callback after the iframe loads, which may be asynchronous

---------

Co-authored-by: Yuichiro Yamashita <[email protected]>

Author: josdejong

src/runtime/internal/dom.ts

@@ -624,6 +624,10 @@ export function add_resize_listener(node: HTMLElement, fn: () => void) {
 		iframe.src = 'about:blank';
 		iframe.onload = () => {
 			unsubscribe = listen(iframe.contentWindow, 'resize', fn);
+
+			// make sure an initial resize event is fired _after_ the iframe is loaded (which is asynchronous)
+			// see https://github.com/sveltejs/svelte/issues/4233
+			fn();
 		};
 	}
 

test/runtime-puppeteer/samples/binding-width-height-initialize/_config.js

@@ -0,0 +1,6 @@
+export default {
+	async test({ assert, component }) {
+		assert.equal(component.toggle, true);
+		assert.equal(component.offsetHeight, 800);
+	}
+};

test/runtime-puppeteer/samples/binding-width-height-initialize/main.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let offsetHeight;
+  export let offsetWidth;
+  export let toggle = false;
+  $: if (offsetWidth) {
+    toggle = true;
+  }
+</script>
+
+<div class:toggle>
+  <div bind:offsetHeight bind:offsetWidth>{offsetHeight}</div>
+</div>
+
+<style>
+  .toggle > div {
+    height: 800px;
+  }
+</style>