diff --git a/test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js
new file mode 100644
index 0000000000..0bd9bfdb98
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js
@@ -0,0 +1,17 @@
+export default {
+	html: `
+		<div style="background-image: url(https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png);"></div>
+	`,
+
+	test({ assert, target, window }) {
+		const div = target.querySelector('div');
+		const styles = window.getComputedStyle(div);
+
+		assert.equal(styles['background-image'], 'url(https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png)');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<div style="background-image: url(https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png);"></div>'
+		);
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte
new file mode 100644
index 0000000000..c9b5fae705
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let url =
+		"https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png";
+</script>
+
+<div style:background-image="url({url})" />