diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
index e6eab33fbd..f44170cda1 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -399,12 +399,21 @@ export default class InlineComponentWrapper extends Wrapper {
return b`${name}.$on("${handler.name}", ${snippet});`;
});
+ const mount_target = has_css_custom_properties ? css_custom_properties_wrapper : (parent_node || '#target');
+ const mount_anchor = has_css_custom_properties ? 'null' : (parent_node ? 'null' : '#anchor');
+ const to_claim = parent_nodes && this.renderer.options.hydratable;
+ let claim_nodes = parent_nodes;
+
if (this.node.name === 'svelte:component') {
const switch_value = block.get_unique_name('switch_value');
const switch_props = block.get_unique_name('switch_props');
const snippet = this.node.expression.manipulate(block);
+ if (has_css_custom_properties) {
+ this.set_css_custom_properties(block, css_custom_properties_wrapper);
+ }
+
block.chunks.init.push(b`
var ${switch_value} = ${snippet};
@@ -427,20 +436,13 @@ export default class InlineComponentWrapper extends Wrapper {
b`if (${name}) @create_component(${name}.$$.fragment);`
);
- if (parent_nodes && this.renderer.options.hydratable) {
- block.chunks.claim.push(
- b`if (${name}) @claim_component(${name}.$$.fragment, ${parent_nodes});`
- );
- }
-
- block.chunks.mount.push(b`
- if (${name}) {
- @mount_component(${name}, ${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'});
- }
- `);
+ if (css_custom_properties_wrapper) this.create_css_custom_properties_wrapper_mount_chunk(block, parent_node, css_custom_properties_wrapper);
+ block.chunks.mount.push(b`if (${name}) @mount_component(${name}, ${mount_target}, ${mount_anchor});`);
- const anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
- const update_mount_node = this.get_update_mount_node(anchor);
+ if (to_claim) {
+ if (css_custom_properties_wrapper) claim_nodes = this.create_css_custom_properties_wrapper_claim_chunk(block, claim_nodes, css_custom_properties_wrapper);
+ block.chunks.claim.push(b`if (${name}) @claim_component(${name}.$$.fragment, ${claim_nodes});`);
+ }
if (updates.length) {
block.chunks.update.push(b`
@@ -448,6 +450,15 @@ export default class InlineComponentWrapper extends Wrapper {
`);
}
+ const tmp_anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
+ const anchor = has_css_custom_properties ? 'null' : tmp_anchor;
+ const update_mount_node = has_css_custom_properties ? css_custom_properties_wrapper : this.get_update_mount_node(tmp_anchor);
+ const update_insert =
+ css_custom_properties_wrapper &&
+ (tmp_anchor.name !== 'null'
+ ? b`@insert(${tmp_anchor}.parentNode, ${css_custom_properties_wrapper}, ${tmp_anchor});`
+ : b`@insert(${parent_node}, ${css_custom_properties_wrapper}, ${tmp_anchor});`);
+
block.chunks.update.push(b`
if (${switch_value} !== (${switch_value} = ${snippet})) {
if (${name}) {
@@ -455,11 +466,13 @@ export default class InlineComponentWrapper extends Wrapper {
const old_component = ${name};
@transition_out(old_component.$$.fragment, 1, 0, () => {
@destroy_component(old_component, 1);
+ ${has_css_custom_properties ? b`@detach(${update_mount_node})` : null}
});
@check_outros();
}
if (${switch_value}) {
+ ${update_insert}
${name} = new ${switch_value}(${switch_props}(#ctx));
${munged_bindings}
@@ -501,62 +514,16 @@ export default class InlineComponentWrapper extends Wrapper {
`);
if (has_css_custom_properties) {
- block.chunks.create.push(b`${css_custom_properties_wrapper} = @element("div");`);
- block.chunks.hydrate.push(b`@set_style(${css_custom_properties_wrapper}, "display", "contents");`);
- this.node.css_custom_properties.forEach(attr => {
- const dependencies = attr.get_dependencies();
- const should_cache = attr.should_cache();
- const last = should_cache && block.get_unique_name(`${attr.name.replace(/[^a-zA-Z_$]/g, '_')}_last`);
- if (should_cache) block.add_variable(last);
- const value = attr.get_value(block);
- const init = should_cache ? x`${last} = ${value}` : value;
-
- block.chunks.hydrate.push(b`@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${init});`);
- if (dependencies.length > 0) {
- let condition = block.renderer.dirty(dependencies);
- if (should_cache) condition = x`${condition} && (${last} !== (${last} = ${value}))`;
-
- block.chunks.update.push(b`
- if (${condition}) {
- @set_style(${css_custom_properties_wrapper}, "${attr.name}", ${should_cache ? last : value});
- }
- `);
- }
- });
+ this.set_css_custom_properties(block, css_custom_properties_wrapper);
}
block.chunks.create.push(b`@create_component(${name}.$$.fragment);`);
- if (parent_nodes && this.renderer.options.hydratable) {
- let nodes = parent_nodes;
- if (has_css_custom_properties) {
- nodes = block.get_unique_name(`${css_custom_properties_wrapper.name}_nodes`);
- block.chunks.claim.push(b`
- ${css_custom_properties_wrapper} = @claim_element(${parent_nodes}, "DIV", { style: true })
- var ${nodes} = @children(${css_custom_properties_wrapper});
- `);
- }
- block.chunks.claim.push(
- b`@claim_component(${name}.$$.fragment, ${nodes});`
- );
- }
+ if (css_custom_properties_wrapper) this.create_css_custom_properties_wrapper_mount_chunk(block, parent_node, css_custom_properties_wrapper);
+ block.chunks.mount.push(b`@mount_component(${name}, ${mount_target}, ${mount_anchor});`);
- if (has_css_custom_properties) {
- if (parent_node) {
- block.chunks.mount.push(b`@append(${parent_node}, ${css_custom_properties_wrapper})`);
- if (is_head(parent_node)) {
- block.chunks.destroy.push(b`@detach(${css_custom_properties_wrapper});`);
- }
- } else {
- block.chunks.mount.push(b`@insert(#target, ${css_custom_properties_wrapper}, #anchor);`);
- // TODO we eventually need to consider what happens to elements
- // that belong to the same outgroup as an outroing element...
- block.chunks.destroy.push(b`if (detaching) @detach(${css_custom_properties_wrapper});`);
- }
- block.chunks.mount.push(b`@mount_component(${name}, ${css_custom_properties_wrapper}, null);`);
- } else {
- block.chunks.mount.push(
- b`@mount_component(${name}, ${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'});`
- );
+ if (to_claim) {
+ if (css_custom_properties_wrapper) claim_nodes = this.create_css_custom_properties_wrapper_claim_chunk(block, claim_nodes, css_custom_properties_wrapper);
+ block.chunks.claim.push(b`@claim_component(${name}.$$.fragment, ${claim_nodes});`);
}
block.chunks.intro.push(b`
@@ -579,4 +546,64 @@ export default class InlineComponentWrapper extends Wrapper {
);
}
}
+
+ private create_css_custom_properties_wrapper_mount_chunk(
+ block: Block,
+ parent_node: Identifier,
+ css_custom_properties_wrapper: Identifier | null
+ ) {
+ if (parent_node) {
+ block.chunks.mount.push(b`@append(${parent_node}, ${css_custom_properties_wrapper})`);
+ if (is_head(parent_node)) {
+ block.chunks.destroy.push(b`@detach(${css_custom_properties_wrapper});`);
+ }
+ } else {
+ block.chunks.mount.push(b`@insert(#target, ${css_custom_properties_wrapper}, #anchor);`);
+ // TODO we eventually need to consider what happens to elements
+ // that belong to the same outgroup as an outroing element...
+ block.chunks.destroy.push(b`if (detaching && ${this.var}) @detach(${css_custom_properties_wrapper});`);
+ }
+ }
+
+ private create_css_custom_properties_wrapper_claim_chunk(
+ block: Block,
+ parent_nodes: Identifier,
+ css_custom_properties_wrapper: Identifier | null
+ ) {
+ const nodes = block.get_unique_name(`${css_custom_properties_wrapper.name}_nodes`);
+ block.chunks.claim.push(b`
+ ${css_custom_properties_wrapper} = @claim_element(${parent_nodes}, "DIV", { style: true })
+ var ${nodes} = @children(${css_custom_properties_wrapper});
+ `);
+ return nodes;
+ }
+
+ private set_css_custom_properties(
+ block: Block,
+ css_custom_properties_wrapper: Identifier
+ ) {
+ block.chunks.create.push(b`${css_custom_properties_wrapper} = @element("div");`);
+ block.chunks.hydrate.push(b`@set_style(${css_custom_properties_wrapper}, "display", "contents");`);
+ this.node.css_custom_properties.forEach((attr) => {
+ const dependencies = attr.get_dependencies();
+ const should_cache = attr.should_cache();
+ const last = should_cache && block.get_unique_name(`${attr.name.replace(/[^a-zA-Z_$]/g, '_')}_last`);
+ if (should_cache) block.add_variable(last);
+ const value = attr.get_value(block);
+ const init = should_cache ? x`${last} = ${value}` : value;
+
+ block.chunks.hydrate.push(
+ b`@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${init});`
+ );
+ if (dependencies.length > 0) {
+ let condition = block.renderer.dirty(dependencies);
+ if (should_cache) condition = x`${condition} && (${last} !== (${last} = ${value}))`;
+ block.chunks.update.push(b`
+ if (${condition}) {
+ @set_style(${css_custom_properties_wrapper}, "${attr.name}", ${should_cache ? last : value});
+ }
+ `);
+ }
+ });
+ }
}
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/Slider.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/Slider.svelte
new file mode 100644
index 0000000000..4863966f85
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/Slider.svelte
@@ -0,0 +1,17 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/_config.js b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/_config.js
new file mode 100644
index 0000000000..96965c223b
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/_config.js
@@ -0,0 +1,41 @@
+export default {
+ props: {
+ railColor1: 'black',
+ trackColor1: 'red',
+ railColor2: 'green',
+ trackColor2: 'blue'
+ },
+ html: `
+
+
+ `,
+ test({ component, assert, target }) {
+ component.railColor1 = 'yellow';
+ component.trackColor2 = 'orange';
+
+ assert.htmlEqual(target.innerHTML, `
+
+
+ `);
+ }
+};
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/main.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/main.svelte
new file mode 100644
index 0000000000..00be45a8a4
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/main.svelte
@@ -0,0 +1,25 @@
+
+
+
+
+
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider1.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider1.svelte
new file mode 100644
index 0000000000..f9c9048fee
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider1.svelte
@@ -0,0 +1,17 @@
+
+
+
+
+
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte
new file mode 100644
index 0000000000..eb5c286464
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte
@@ -0,0 +1,17 @@
+
+
+
+
+
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js
new file mode 100644
index 0000000000..efbf225f25
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js
@@ -0,0 +1,57 @@
+export default {
+ props: {
+ componentName: 'Slider1'
+ },
+ html: `
+
+
+ `,
+ 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();
+ }
+};
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte
new file mode 100644
index 0000000000..2c6d05dc25
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte
@@ -0,0 +1,20 @@
+
+
+
+
+
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider1.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider1.svelte
new file mode 100644
index 0000000000..f9c9048fee
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider1.svelte
@@ -0,0 +1,17 @@
+
+
+
+
+
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider2.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider2.svelte
new file mode 100644
index 0000000000..eb5c286464
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider2.svelte
@@ -0,0 +1,17 @@
+
+
+
+
+
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/_config.js b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/_config.js
new file mode 100644
index 0000000000..5aa30c7aa4
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/_config.js
@@ -0,0 +1,59 @@
+export default {
+ props: {
+ componentName: 'Slider1'
+ },
+ html: `
+
+ `,
+ 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();
+ }
+};
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/main.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/main.svelte
new file mode 100644
index 0000000000..dded9b8f5c
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/main.svelte
@@ -0,0 +1,22 @@
+
+
+
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/Slider.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/Slider.svelte
new file mode 100644
index 0000000000..210e34cbe9
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/Slider.svelte
@@ -0,0 +1,29 @@
+
+
+
+
+{#if count === 0}
+
+{/if}
+
+
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/_config.js b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/_config.js
new file mode 100644
index 0000000000..c7d1369edc
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/_config.js
@@ -0,0 +1,71 @@
+export default {
+ props: {
+ railColor1: 'black',
+ trackColor1: 'red',
+ railColor2: 'green',
+ trackColor2: 'blue',
+ nestRailColor1: 'white',
+ nestTrackColor1: 'gray',
+ nestRailColor2: 'aqua',
+ nestTrackColor2: 'pink'
+ },
+ html: `
+
+
+ `,
+ test({ component, assert, target }) {
+ component.railColor1 = 'yellow';
+ component.trackColor2 = 'orange';
+ component.nestRailColor1 = 'lime';
+ component.nestTrackColor2 = 'gold';
+
+ assert.htmlEqual(target.innerHTML, `
+
+
+ `);
+ }
+};
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/main.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/main.svelte
new file mode 100644
index 0000000000..69c31fff35
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/main.svelte
@@ -0,0 +1,32 @@
+
+
+
+
+
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider1.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider1.svelte
new file mode 100644
index 0000000000..20699ca853
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider1.svelte
@@ -0,0 +1,27 @@
+
+
+
+
+{#if count === 0}
+
+{/if}
+
+
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider2.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider2.svelte
new file mode 100644
index 0000000000..ce799c4dc0
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider2.svelte
@@ -0,0 +1,27 @@
+
+
+
+
+{#if count === 0}
+
+{/if}
+
+
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/_config.js b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/_config.js
new file mode 100644
index 0000000000..f3023db3c4
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/_config.js
@@ -0,0 +1,47 @@
+export default {
+ props: {},
+ html: `
+
+
+ `,
+ test({ target, window, assert }) {
+ const railColor1 = target.querySelector('#component1 p');
+ const trackColor1 = target.querySelector('#component1 span');
+ const railColor2 = target.querySelector('#component2 p');
+ const trackColor2 = target.querySelector('#component2 span');
+ const nestRailColor1 = target.querySelector('#nest-component1 p');
+ const nestTrackColor1 = target.querySelector('#nest-component1 span');
+ const nestRailColor2 = target.querySelector('#nest-component2 p');
+ const nestTrackColor2 = target.querySelector('#nest-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(window.getComputedStyle(nestRailColor1).color, 'rgb(255, 255, 0)');
+ assert.equal(window.getComputedStyle(nestTrackColor1).color, 'rgb(255, 0, 255)');
+ assert.equal(window.getComputedStyle(nestRailColor2).color, 'rgb(0, 255, 255)');
+ assert.equal(window.getComputedStyle(nestTrackColor2).color, 'rgb(255, 255, 255)');
+ assert.equal(railColor1.textContent, 'Slider1');
+ assert.equal(railColor2.textContent, 'Slider2');
+ assert.equal(nestRailColor1.textContent, 'Slider1');
+ assert.equal(nestRailColor2.textContent, 'Slider2');
+ }
+};
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/main.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/main.svelte
new file mode 100644
index 0000000000..1a4ed02959
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/main.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider1.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider1.svelte
new file mode 100644
index 0000000000..20699ca853
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider1.svelte
@@ -0,0 +1,27 @@
+
+
+
+
+{#if count === 0}
+
+{/if}
+
+
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider2.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider2.svelte
new file mode 100644
index 0000000000..ce799c4dc0
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider2.svelte
@@ -0,0 +1,27 @@
+
+
+
+
+{#if count === 0}
+
+{/if}
+
+
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/_config.js b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/_config.js
new file mode 100644
index 0000000000..5efc8f0c70
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/_config.js
@@ -0,0 +1,84 @@
+export default {
+ props: {
+ componentName: 'Slider1'
+ },
+ html: `
+
+
+ `,
+ 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');
+ const nestRailColor1 = target.querySelector('#nest-component1 p');
+ const nestTrackColor1 = target.querySelector('#nest-component1 span');
+ const nestRailColor2 = target.querySelector('#nest-component2 p');
+ const nestTrackColor2 = target.querySelector('#nest-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(window.getComputedStyle(nestRailColor1).color, 'rgb(255, 255, 0)');
+ assert.equal(window.getComputedStyle(nestTrackColor1).color, 'rgb(255, 0, 255)');
+ assert.equal(window.getComputedStyle(nestRailColor2).color, 'rgb(255, 255, 0)');
+ assert.equal(window.getComputedStyle(nestTrackColor2).color, 'rgb(255, 0, 255)');
+ assert.equal(railColor1.textContent, 'Slider1');
+ assert.equal(railColor2.textContent, 'Slider1');
+ assert.equal(nestRailColor1.textContent, 'Slider1');
+ assert.equal(nestRailColor2.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');
+ const nestRailColor1 = target.querySelector('#nest-component1 p');
+ const nestTrackColor1 = target.querySelector('#nest-component1 span');
+ const nestRailColor2 = target.querySelector('#nest-component2 p');
+ const nestTrackColor2 = target.querySelector('#nest-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(window.getComputedStyle(nestRailColor1).color, 'rgb(0, 255, 255)');
+ assert.equal(window.getComputedStyle(nestTrackColor1).color, 'rgb(255, 255, 255)');
+ assert.equal(window.getComputedStyle(nestRailColor2).color, 'rgb(0, 255, 255)');
+ assert.equal(window.getComputedStyle(nestTrackColor2).color, 'rgb(255, 255, 255)');
+ assert.equal(railColor1.textContent, 'Slider2');
+ assert.equal(railColor2.textContent, 'Slider2');
+ assert.equal(nestRailColor1.textContent, 'Slider2');
+ assert.equal(nestRailColor2.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();
+ }
+};
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/main.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/main.svelte
new file mode 100644
index 0000000000..2c6d05dc25
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/main.svelte
@@ -0,0 +1,20 @@
+
+
+
+
+