style-directive: tests

test/parser/samples/attribute-class-directive.solo/input.svelte

@@ -0,0 +1 @@
+<div class:foo={isFoo}></div>

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": []
+			}
+		]
+	}
+}

test/parser/samples/attribute-style.solo/input.svelte

@@ -0,0 +1 @@
+<div style="color: red;">red</div>

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"
+					}
+				]
+			}
+		]
+	}
+}

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>

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} />
+<p style:color={myColor} />

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');
+	}
+};

test/runtime/samples/inline-style.solo/main.svelte

@@ -0,0 +1 @@
+<div style="color: red;"></div>