diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index a055bee446..cacd5e4bea 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -430,7 +430,11 @@ export function set_input_type(input, type) { } export function set_style(node, key, value, important) { - node.style.setProperty(key, value, important ? 'important' : ''); + if (value === null) { + node.style.removeProperty(key); + } else { + node.style.setProperty(key, value, important ? 'important' : ''); + } } export function select_option(select, value) { diff --git a/test/runtime/samples/inline-style-directive-multiple/_config.js b/test/runtime/samples/inline-style-directive-multiple/_config.js new file mode 100644 index 0000000000..2aa46ba609 --- /dev/null +++ b/test/runtime/samples/inline-style-directive-multiple/_config.js @@ -0,0 +1,16 @@ +export default { + html: ` +
+ `, + + test({ assert, component, target, window }) { + const p = target.querySelector('p'); + + const styles = window.getComputedStyle(p); + assert.equal(styles.color, 'red'); + }, + + skip_if_ssr: true + // SSR renders "null" string for null values: + // +}; diff --git a/test/runtime/samples/inline-style-directive-multiple/main.svelte b/test/runtime/samples/inline-style-directive-multiple/main.svelte new file mode 100644 index 0000000000..06f03206d5 --- /dev/null +++ b/test/runtime/samples/inline-style-directive-multiple/main.svelte @@ -0,0 +1,13 @@ + + +