From 8f4faf450e8b6eb67ff7cb834f1ebfba6a47e940 Mon Sep 17 00:00:00 2001
From: pmurray73 <pmurray73@bloomberg.net>
Date: Sat, 16 Jan 2021 15:02:24 -0500
Subject: [PATCH] style-directive: tests

---
 .../input.svelte                              |  1 +
 .../output.json                               | 41 +++++++++++++++++++
 .../samples/attribute-style.solo/input.svelte |  1 +
 .../samples/attribute-style.solo/output.json  | 41 +++++++++++++++++++
 .../main.svelte                               |  5 +++
 .../inline-style-directive.solo/main.svelte   |  4 +-
 .../samples/inline-style.solo/_config.js      | 12 ++++++
 .../samples/inline-style.solo/main.svelte     |  1 +
 8 files changed, 104 insertions(+), 2 deletions(-)
 create mode 100644 test/parser/samples/attribute-class-directive.solo/input.svelte
 create mode 100644 test/parser/samples/attribute-class-directive.solo/output.json
 create mode 100644 test/parser/samples/attribute-style.solo/input.svelte
 create mode 100644 test/parser/samples/attribute-style.solo/output.json
 create mode 100644 test/runtime/samples/inline-style-directive-and-style-attr/main.svelte
 create mode 100644 test/runtime/samples/inline-style.solo/_config.js
 create mode 100644 test/runtime/samples/inline-style.solo/main.svelte

diff --git a/test/parser/samples/attribute-class-directive.solo/input.svelte b/test/parser/samples/attribute-class-directive.solo/input.svelte
new file mode 100644
index 0000000000..629df2e29f
--- /dev/null
+++ b/test/parser/samples/attribute-class-directive.solo/input.svelte
@@ -0,0 +1 @@
+<div class:foo={isFoo}></div>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-class-directive.solo/output.json b/test/parser/samples/attribute-class-directive.solo/output.json
new file mode 100644
index 0000000000..abb2e0c0be
--- /dev/null
+++ b/test/parser/samples/attribute-class-directive.solo/output.json
@@ -0,0 +1,41 @@
+{
+	"html": {
+		"start": 0,
+		"end": 29,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 29,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 22,
+						"type": "Class",
+						"name": "foo",
+						"modifiers": [],
+						"expression": {
+							"type": "Identifier",
+							"start": 16,
+							"end": 21,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 16
+								},
+								"end": {
+									"line": 1,
+									"column": 21
+								}
+							},
+							"name": "isFoo"
+						}
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-style.solo/input.svelte b/test/parser/samples/attribute-style.solo/input.svelte
new file mode 100644
index 0000000000..12872605ad
--- /dev/null
+++ b/test/parser/samples/attribute-style.solo/input.svelte
@@ -0,0 +1 @@
+<div style="color: red;">red</div>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-style.solo/output.json b/test/parser/samples/attribute-style.solo/output.json
new file mode 100644
index 0000000000..95c0c8a7a4
--- /dev/null
+++ b/test/parser/samples/attribute-style.solo/output.json
@@ -0,0 +1,41 @@
+{
+	"html": {
+		"start": 0,
+		"end": 34,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 34,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 24,
+						"type": "Attribute",
+						"name": "style",
+						"value": [
+							{
+								"start": 12,
+								"end": 23,
+								"type": "Text",
+								"raw": "color: red;",
+								"data": "color: red;"
+							}
+						]
+					}
+				],
+				"children": [
+					{
+						"start": 25,
+						"end": 28,
+						"type": "Text",
+						"raw": "red",
+						"data": "red"
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/runtime/samples/inline-style-directive-and-style-attr/main.svelte b/test/runtime/samples/inline-style-directive-and-style-attr/main.svelte
new file mode 100644
index 0000000000..fdcdc9e66e
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-and-style-attr/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let color = 'red';
+</script>
+
+<p style="height: 40px;" style:color={color}>{color}</p>
diff --git a/test/runtime/samples/inline-style-directive.solo/main.svelte b/test/runtime/samples/inline-style-directive.solo/main.svelte
index 2360d64351..1d60aefa6f 100644
--- a/test/runtime/samples/inline-style-directive.solo/main.svelte
+++ b/test/runtime/samples/inline-style-directive.solo/main.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let myColor = 'red';
+	export let myColor = "red";
 </script>
 
-<p style:color={myColor} />
\ No newline at end of file
+<p style:color={myColor} />
diff --git a/test/runtime/samples/inline-style.solo/_config.js b/test/runtime/samples/inline-style.solo/_config.js
new file mode 100644
index 0000000000..3e984d4c69
--- /dev/null
+++ b/test/runtime/samples/inline-style.solo/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<div style="color: red;"></div>
+	`,
+
+	test({ assert, component, target, window }) {
+		const p = target.querySelector('div');
+
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'red');
+	}
+};
diff --git a/test/runtime/samples/inline-style.solo/main.svelte b/test/runtime/samples/inline-style.solo/main.svelte
new file mode 100644
index 0000000000..0f37a04c99
--- /dev/null
+++ b/test/runtime/samples/inline-style.solo/main.svelte
@@ -0,0 +1 @@
+<div style="color: red;"></div>
\ No newline at end of file