From 9a9db1c70fa5a058107984ddb8580c8e8106f8e5 Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Thu, 8 Dec 2022 16:23:39 +0100
Subject: [PATCH 1/3] fix: #4233 `bind:offsetHeight` doesn't always fire

---
 src/runtime/internal/dom.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index ca76b11ab3e9..52f1198833c6 100644
--- a/src/runtime/internal/dom.ts
+++ b/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();
 		};
 	}
 

From 2a5a4aadfa5f231f4ede3895bf83f0906cdcc86f Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Thu, 8 Dec 2022 16:40:25 +0100
Subject: [PATCH 2/3] chore: write a unit test for offsetWidth/offsetHeight
 (WIP)

---
 .../_config.js                                |  5 +++++
 .../main.svelte                               | 22 +++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 test/runtime/samples/binding-width-height-initialize/_config.js
 create mode 100644 test/runtime/samples/binding-width-height-initialize/main.svelte

diff --git a/test/runtime/samples/binding-width-height-initialize/_config.js b/test/runtime/samples/binding-width-height-initialize/_config.js
new file mode 100644
index 000000000000..ed6ac0097ac7
--- /dev/null
+++ b/test/runtime/samples/binding-width-height-initialize/_config.js
@@ -0,0 +1,5 @@
+export default {
+	async test({ assert, target }) {
+		assert.htmlEqual(target.querySelector('.description').innerHTML, 'width:200, height:100');
+	}
+};
diff --git a/test/runtime/samples/binding-width-height-initialize/main.svelte b/test/runtime/samples/binding-width-height-initialize/main.svelte
new file mode 100644
index 000000000000..95a04ebb479b
--- /dev/null
+++ b/test/runtime/samples/binding-width-height-initialize/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	let offsetWidth = 0;
+	let offsetHeight = 0;
+</script>
+
+<div class="wrapper">
+	<div class="inner" bind:offsetHeight bind:offsetWidth>
+		<div class="description">width:{offsetWidth}, height:{offsetHeight}</div>
+	</div>
+</div>
+
+<style>
+	.wrapper {
+		width: 200px;
+		height: 100px;
+	}
+
+	.inner {
+		width: 100%;
+		height: 100%
+	}
+</style>

From 02e434277b645e80ac087f11471d1cdc1bab9301 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Thu, 23 Feb 2023 19:25:23 +0900
Subject: [PATCH 3/3] add test

---
 .../_config.js                                |  6 +++++
 .../main.svelte                               | 18 +++++++++++++++
 .../_config.js                                |  5 -----
 .../main.svelte                               | 22 -------------------
 4 files changed, 24 insertions(+), 27 deletions(-)
 create mode 100644 test/runtime-puppeteer/samples/binding-width-height-initialize/_config.js
 create mode 100644 test/runtime-puppeteer/samples/binding-width-height-initialize/main.svelte
 delete mode 100644 test/runtime/samples/binding-width-height-initialize/_config.js
 delete mode 100644 test/runtime/samples/binding-width-height-initialize/main.svelte

diff --git a/test/runtime-puppeteer/samples/binding-width-height-initialize/_config.js b/test/runtime-puppeteer/samples/binding-width-height-initialize/_config.js
new file mode 100644
index 000000000000..d67299ad5654
--- /dev/null
+++ b/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);
+	}
+};
diff --git a/test/runtime-puppeteer/samples/binding-width-height-initialize/main.svelte b/test/runtime-puppeteer/samples/binding-width-height-initialize/main.svelte
new file mode 100644
index 000000000000..6136365a1d09
--- /dev/null
+++ b/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>
diff --git a/test/runtime/samples/binding-width-height-initialize/_config.js b/test/runtime/samples/binding-width-height-initialize/_config.js
deleted file mode 100644
index ed6ac0097ac7..000000000000
--- a/test/runtime/samples/binding-width-height-initialize/_config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-	async test({ assert, target }) {
-		assert.htmlEqual(target.querySelector('.description').innerHTML, 'width:200, height:100');
-	}
-};
diff --git a/test/runtime/samples/binding-width-height-initialize/main.svelte b/test/runtime/samples/binding-width-height-initialize/main.svelte
deleted file mode 100644
index 95a04ebb479b..000000000000
--- a/test/runtime/samples/binding-width-height-initialize/main.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-	let offsetWidth = 0;
-	let offsetHeight = 0;
-</script>
-
-<div class="wrapper">
-	<div class="inner" bind:offsetHeight bind:offsetWidth>
-		<div class="description">width:{offsetWidth}, height:{offsetHeight}</div>
-	</div>
-</div>
-
-<style>
-	.wrapper {
-		width: 200px;
-		height: 100px;
-	}
-
-	.inner {
-		width: 100%;
-		height: 100%
-	}
-</style>