add more test

test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider1.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div {id}>
-  <p>Slider</p>
+  <p>Slider1</p>
   <span>Track</span>
 </div>
 
@@ -14,4 +14,4 @@
   span {
     color: var(--track-color);
   }
-</style>
+</style>

test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider2</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>

test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js

@@ -1,27 +1,57 @@
 export default {
+	props: {
+		componentName: 'Slider1'
+	},
 	html: `
 		<div style="display: contents; --rail-color:rgb(0, 0, 0); --track-color:rgb(255, 0, 0);">
-			<div id="slider-1">
+			<div id="component1">
-				<p class="svelte-17ay6rc">Slider</p>
+				<p class="svelte-17ay6rc">Slider1</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
 		</div>
 		<div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);">
-			<div id="slider-2">
+			<div id="component2">
-				<p class="svelte-17ay6rc">Slider</p>
+				<p class="svelte-17ay6rc">Slider1</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
 		</div>
 	`,
-	test({ target, window, assert }) {
+	test({ target, window, assert, component }) {
-		const railColor1 = target.querySelector('#slider-1 p');
-		const trackColor1 = target.querySelector('#slider-1 span');
-		const railColor2 = target.querySelector('#slider-2 p');
-		const trackColor2 = target.querySelector('#slider-2 span');
 
-		assert.htmlEqual(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+		function assert_slider_1() {
-		assert.htmlEqual(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			const railColor1 = target.querySelector('#component1 p');
-		assert.htmlEqual(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			const trackColor1 = target.querySelector('#component1 span');
-		assert.htmlEqual(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider1');
+			assert.equal(railColor2.textContent, 'Slider1');
+		}
+
+		function assert_slider_2() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider2');
+			assert.equal(railColor2.textContent, 'Slider2');
+		}
+
+		assert_slider_1();
+		component.componentName = 'Slider2';
+		assert_slider_2();
+		component.componentName = undefined;
+		assert.equal(window.document.querySelector('div'), null);
+		component.componentName = 'Slider1';
+		assert_slider_1();
 	}
 };

test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte

@@ -1,17 +1,20 @@
 <script>
-	import Slider from './Slider.svelte';
+	import Slider1 from './Slider1.svelte';
+	import Slider2 from './Slider2.svelte';
+	export let componentName = 'Slider1';
+	$: slider = componentName === 'Slider1' ? Slider1 : componentName === 'Slider2' ? Slider2 : undefined;
 </script>
 
 <svelte:component
-	this={Slider}
+	this={slider}
-	id="slider-1"
+	id="component1"
 	--rail-color="rgb(0, 0, 0)"
 	--track-color="rgb(255, 0, 0)"
 />
 
 <svelte:component
-	this={Slider}
+	this={slider}
-	id="slider-2"
+	id="component2"
 	--rail-color="rgb(0, 255, 0)"
 	--track-color="rgb(0, 0, 255)"
 />

test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider1.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider1</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>

test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider2.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider2</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>

test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/_config.js

@@ -0,0 +1,59 @@
+export default {
+	props: {
+		componentName: 'Slider1'
+	},
+	html: `
+		<section>
+			<div style="display: contents; --rail-color:rgb(0, 0, 0); --track-color:rgb(255, 0, 0);">
+				<div id="component1">
+					<p class="svelte-17ay6rc">Slider1</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+			<div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);">
+				<div id="component2">
+					<p class="svelte-17ay6rc">Slider1</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+		</section>
+	`,
+	test({ target, window, assert, component }) {
+
+		function assert_slider_1() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider1');
+			assert.equal(railColor2.textContent, 'Slider1');
+		}
+
+		function assert_slider_2() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider2');
+			assert.equal(railColor2.textContent, 'Slider2');
+		}
+
+		assert_slider_1();
+		component.componentName = 'Slider2';
+		assert_slider_2();
+		component.componentName = undefined;
+		assert.equal(window.document.querySelector('div'), null);
+		component.componentName = 'Slider1';
+		assert_slider_1();
+	}
+};

test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/main.svelte

@@ -0,0 +1,22 @@
+<script>
+	import Slider1 from './Slider1.svelte';
+	import Slider2 from './Slider2.svelte';
+	export let componentName = 'Slider1';
+	$: slider = componentName === 'Slider1' ? Slider1 : componentName === 'Slider2' ? Slider2 : undefined;
+</script>
+
+<section>
+	<svelte:component
+		this={slider}
+		id="component1"
+		--rail-color="rgb(0, 0, 0)"
+		--track-color="rgb(255, 0, 0)"
+	/>
+
+	<svelte:component
+		this={slider}
+		id="component2"
+		--rail-color="rgb(0, 255, 0)"
+		--track-color="rgb(0, 0, 255)"
+	/>
+</section>