From f0bc96dff4512df26b095fb3ec838f91a2ca1214 Mon Sep 17 00:00:00 2001
From: tanhauhau <lhtan93@gmail.com>
Date: Sun, 28 Nov 2021 01:00:42 +0800
Subject: [PATCH] add test for css variables

---
 .../samples/inline-style-directive-css-vars/_config.js   | 9 +++++++++
 .../samples/inline-style-directive-css-vars/main.svelte  | 5 +++++
 2 files changed, 14 insertions(+)
 create mode 100644 test/runtime/samples/inline-style-directive-css-vars/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-css-vars/main.svelte

diff --git a/test/runtime/samples/inline-style-directive-css-vars/_config.js b/test/runtime/samples/inline-style-directive-css-vars/_config.js
new file mode 100644
index 0000000000..99762eeb9c
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-css-vars/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: '<p style="--border-color: red;"></p>',
+
+	test({ assert, component, target, window }) {
+		component.myColor = 'blue';
+
+		assert.htmlEqual(target.innerHTML, '<p style="--border-color: blue;"></p>');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-css-vars/main.svelte b/test/runtime/samples/inline-style-directive-css-vars/main.svelte
new file mode 100644
index 0000000000..689a2333f5
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-css-vars/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let myColor = "red";
+</script>
+
+<p style:--border-color={myColor} />