From 92fa13c6d3e670c47ea89177a4606fa570f352d3 Mon Sep 17 00:00:00 2001
From: Nayan Gautam <gtmnayan@gmail.com>
Date: Wed, 15 Jun 2022 10:21:58 +0000
Subject: [PATCH] Split off test

---
 .../_config.js                                | 21 +++++++++++++++++++
 .../main.svelte                               |  7 +++++++
 .../_config.js                                |  7 -------
 .../main.svelte                               |  5 ++---
 4 files changed, 30 insertions(+), 10 deletions(-)
 create mode 100644 test/runtime-puppeteer/samples/inline-style-directive-precedence/_config.js
 create mode 100644 test/runtime-puppeteer/samples/inline-style-directive-precedence/main.svelte

diff --git a/test/runtime-puppeteer/samples/inline-style-directive-precedence/_config.js b/test/runtime-puppeteer/samples/inline-style-directive-precedence/_config.js
new file mode 100644
index 0000000000..499c925817
--- /dev/null
+++ b/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");
+		}
+	},
+};
diff --git a/test/runtime-puppeteer/samples/inline-style-directive-precedence/main.svelte b/test/runtime-puppeteer/samples/inline-style-directive-precedence/main.svelte
new file mode 100644
index 0000000000..80a0cfc383
--- /dev/null
+++ b/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} />
diff --git a/test/runtime/samples/inline-style-directive-and-style-attr-merged/_config.js b/test/runtime/samples/inline-style-directive-and-style-attr-merged/_config.js
index 862b3a7e46..18536a94c9 100644
--- a/test/runtime/samples/inline-style-directive-and-style-attr-merged/_config.js
+++ b/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");
-		}
 	},
 };
diff --git a/test/runtime/samples/inline-style-directive-and-style-attr-merged/main.svelte b/test/runtime/samples/inline-style-directive-and-style-attr-merged/main.svelte
index f875175733..6f3e86b9bf 100644
--- a/test/runtime/samples/inline-style-directive-and-style-attr-merged/main.svelte
+++ b/test/runtime/samples/inline-style-directive-and-style-attr-merged/main.svelte
@@ -1,6 +1,5 @@
 <script>
-	export let color1 = 'red';
-	export let color2 = 'blue';
+	export let color = 'red';
 </script>
 
-<p style="height: 40px; color: {color2};" style:color={color1} />
+<p style="height: 40px; color: blue;" style:color={color} />