test

test/runtime/samples/inline-style-directive-and-style-attr-merged/_config.js

@@ -3,11 +3,15 @@ export default {
 		<p style="height: 40px; color: red;"></p>
 	`,
 
-	test({ assert, target, window }) {
+	test({ assert, target, window, component }) {
-		const p = target.querySelector('p');
+		const p = target.querySelector("p");
 
 		const styles = window.getComputedStyle(p);
-		assert.equal(styles.color, 'red');
+		assert.equal(styles.color, "red");
-		assert.equal(styles.height, '40px');
+		assert.equal(styles.height, "40px");
-	}
+
+		component.color2 = "yellow";
+		const updated_styles = window.getComputedStyle(p);
+		assert.equal(updated_styles.color, "red");
+	},
 };

test/runtime/samples/inline-style-directive-and-style-attr-merged/main.svelte

@@ -1,5 +1,6 @@
 <script>
-	export let color = 'red';
+	export let color1 = 'red';
+	export let color2 = 'blue';
 </script>
 
-<p style="height: 40px; color: blue;" style:color={color} />
+<p style="height: 40px; color: {color2};" style:color={color1} />