Split off test

test/runtime-puppeteer/samples/inline-style-directive-precedence/_config.js

@@ -0,0 +1,21 @@
+export default {
+	html: `
+		<p style="font-size: 32px; color: red;"></p>
+	`,
+	solo: true,
+
+	test({ assert, target, window, component }) {
+		const p = target.querySelector("p");
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, "rgb(255, 0, 0)");
+		assert.equal(styles.fontSize, "32px");
+
+		component.foo = "font-size: 50px; color: green;"; // Update style attribute
+		{
+			const p = target.querySelector("p");
+			const styles = window.getComputedStyle(p);
+			assert.equal(styles.color, "rgb(255, 0, 0)");
+			assert.equal(styles.fontSize, "32px");
+		}
+	},
+};

test/runtime-puppeteer/samples/inline-style-directive-precedence/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let foo = "font-size: 20px; color: blue;";
+	let bar = "32";
+	let baz = "red";
+</script>
+
+<p style:font-size="{bar}px" style:color={baz} style={foo} />

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

@@ -9,12 +9,5 @@ export default {
 		const styles = window.getComputedStyle(p);
 		assert.equal(styles.color, "red");
 		assert.equal(styles.height, "40px");
-
-		component.color2 = "yellow";
-		{
-			const p = target.querySelector("p");
-			const styles = window.getComputedStyle(p);
-			assert.equal(styles.color, "red");
-		}
 	},
 };

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

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