From d21d020648b5ee025fc79b339939319529f28bf3 Mon Sep 17 00:00:00 2001
From: Cris Ward <cris@duodesign.co.uk>
Date: Tue, 28 Jan 2020 13:06:00 +0000
Subject: [PATCH] Added tests for shadoom and css with none

---
 .../samples/shadowdom-closed/main.svelte            |  8 ++++++++
 .../samples/shadowdom-closed/test.js                | 13 +++++++++++++
 .../samples/shadowdom-none-css/main.svelte          | 10 ++++++++++
 .../samples/shadowdom-none-css/test.js              | 10 ++++++++++
 .../samples/shadowdom-none/main.svelte              |  8 ++++++++
 test/custom-elements/samples/shadowdom-none/test.js | 12 ++++++++++++
 6 files changed, 61 insertions(+)
 create mode 100644 test/custom-elements/samples/shadowdom-closed/main.svelte
 create mode 100644 test/custom-elements/samples/shadowdom-closed/test.js
 create mode 100644 test/custom-elements/samples/shadowdom-none-css/main.svelte
 create mode 100644 test/custom-elements/samples/shadowdom-none-css/test.js
 create mode 100644 test/custom-elements/samples/shadowdom-none/main.svelte
 create mode 100644 test/custom-elements/samples/shadowdom-none/test.js

diff --git a/test/custom-elements/samples/shadowdom-closed/main.svelte b/test/custom-elements/samples/shadowdom-closed/main.svelte
new file mode 100644
index 0000000000..43c2300bc0
--- /dev/null
+++ b/test/custom-elements/samples/shadowdom-closed/main.svelte
@@ -0,0 +1,8 @@
+<svelte:options tag="custom-element" shadowdom="closed" />
+
+<script>
+	export let name;
+</script>
+
+<h1>Hello {name}!</h1>
+
diff --git a/test/custom-elements/samples/shadowdom-closed/test.js b/test/custom-elements/samples/shadowdom-closed/test.js
new file mode 100644
index 0000000000..be2b9743e0
--- /dev/null
+++ b/test/custom-elements/samples/shadowdom-closed/test.js
@@ -0,0 +1,13 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default function (target) {
+	target.innerHTML = '<custom-element name="world"></custom-element>';
+	const el = target.querySelector('custom-element');
+
+	assert.equal(el.name, 'world');
+
+	const h1 = el._root.querySelector('h1');
+  assert.equal(h1.textContent, 'Hello world');
+  assert.equal(el.shadowRoot, null);
+}
\ No newline at end of file
diff --git a/test/custom-elements/samples/shadowdom-none-css/main.svelte b/test/custom-elements/samples/shadowdom-none-css/main.svelte
new file mode 100644
index 0000000000..20061da3cb
--- /dev/null
+++ b/test/custom-elements/samples/shadowdom-none-css/main.svelte
@@ -0,0 +1,10 @@
+<svelte:options tag="custom-element" shadowdom="none" />
+
+<style>
+  h1 {
+    color:red; 
+  }
+</style>
+
+<h1>Hello World</h1>
+
diff --git a/test/custom-elements/samples/shadowdom-none-css/test.js b/test/custom-elements/samples/shadowdom-none-css/test.js
new file mode 100644
index 0000000000..9f6ec3c20e
--- /dev/null
+++ b/test/custom-elements/samples/shadowdom-none-css/test.js
@@ -0,0 +1,10 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default function (target) {
+	target.innerHTML = '<custom-element></custom-element>';
+	const el = target.querySelector('custom-element');
+	const h1 = el.querySelector('h1');
+  const colour = getComputedStyle(h1).color;
+  assert.equal(colour,"rgb(255, 0, 0)");
+}
\ No newline at end of file
diff --git a/test/custom-elements/samples/shadowdom-none/main.svelte b/test/custom-elements/samples/shadowdom-none/main.svelte
new file mode 100644
index 0000000000..79a40384ec
--- /dev/null
+++ b/test/custom-elements/samples/shadowdom-none/main.svelte
@@ -0,0 +1,8 @@
+<svelte:options tag="custom-element" shadowdom="none" />
+
+<script>
+	export let name;
+</script>
+
+<h1>Hello {name}!</h1>
+
diff --git a/test/custom-elements/samples/shadowdom-none/test.js b/test/custom-elements/samples/shadowdom-none/test.js
new file mode 100644
index 0000000000..7cd82a30ee
--- /dev/null
+++ b/test/custom-elements/samples/shadowdom-none/test.js
@@ -0,0 +1,12 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default function (target) {
+	target.innerHTML = '<custom-element name="world"></custom-element>';
+	const el = target.querySelector('custom-element');
+
+	assert.equal(el.name, 'world');
+
+	const h1 = el.querySelector('h1');
+	assert.equal(h1.textContent, 'Hello world!');
+}
\ No newline at end of file