diff --git a/test/runtime/samples/component-yield-placement/Modal.html b/test/runtime/samples/component-yield-placement/Modal.html
new file mode 100644
index 000000000000..0085a3ef7f97
--- /dev/null
+++ b/test/runtime/samples/component-yield-placement/Modal.html
@@ -0,0 +1,6 @@
+<div class='modal-background' on:click='destroy()'></div>
+
+<div class='modal'>
+	{{yield}}
+	<button on:click='destroy()'>close modal</button>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-placement/_config.js b/test/runtime/samples/component-yield-placement/_config.js
new file mode 100644
index 000000000000..6e5a7d4b7355
--- /dev/null
+++ b/test/runtime/samples/component-yield-placement/_config.js
@@ -0,0 +1,25 @@
+export default {
+	data: {
+		showModal: true
+	},
+
+	html: `
+		<div class='modal-background'></div>
+
+		<div class='modal'>
+			<h2>Hello!</h2>
+			<button>close modal</button>
+		</div>
+	`,
+
+	test ( assert, component, target, window ) {
+		const button = target.querySelector( 'button' );
+		const click = new window.MouseEvent( 'click' );
+
+		button.dispatchEvent( click );
+
+		assert.htmlEqual( target.innerHTML, `
+			<button>show modal</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-yield-placement/main.html b/test/runtime/samples/component-yield-placement/main.html
new file mode 100644
index 000000000000..ac8366a9c7a3
--- /dev/null
+++ b/test/runtime/samples/component-yield-placement/main.html
@@ -0,0 +1,15 @@
+{{#if showModal}}
+	<Modal on:destroy='set({ showModal: false })'>
+		<h2>Hello!</h2>
+	</Modal>
+{{else}}
+	<button on:click='set({ showModal: true })'>show modal</button>
+{{/if}}
+
+<script>
+	import Modal from './Modal.html';
+
+	export default {
+		components: { Modal }
+	};
+</script>
\ No newline at end of file