mirror of https://github.com/sveltejs/svelte
fix: style directive not updating when style attribute is present and style directive is updated via an object prop. fixes #9185 (#9187)
fixes #9185. I narrowed down the issue to the bug surfacing when we use object properties to update style attributes and directives. This fix removes the size check (because a single object will be of size 1 but can affect n attributes/directives via its properties). In addition, the order of the OR is switched as the earlier condition has some reactive assignments which are not run in the current order when style_changed_var is truthy.pull/9121/head
parent
115ea1ff4a
commit
d5a1822428
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: update style directive when style attribute is present and is updated via an object prop
|
@ -0,0 +1,20 @@
|
||||
export default {
|
||||
html: `
|
||||
<p style="background-color: green; font-size: 12px;"></p>
|
||||
`,
|
||||
|
||||
test({ assert, target, window, component }) {
|
||||
const p = target.querySelector('p');
|
||||
const styles = window.getComputedStyle(p);
|
||||
assert.equal(styles.backgroundColor, 'green');
|
||||
assert.equal(styles.fontSize, '12px');
|
||||
|
||||
{
|
||||
component.modify = true;
|
||||
const p = target.querySelector('p');
|
||||
const styles = window.getComputedStyle(p);
|
||||
assert.equal(styles.backgroundColor, 'green');
|
||||
assert.equal(styles.fontSize, '50px');
|
||||
}
|
||||
}
|
||||
};
|
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
let settings = {
|
||||
fontSize: 12,
|
||||
bg: 'green'
|
||||
};
|
||||
export let modify = false;
|
||||
$: if (modify) {
|
||||
settings.fontSize = 50;
|
||||
}
|
||||
</script>
|
||||
|
||||
<p style:font-size="{settings.fontSize}px" style="background-color: {settings.bg}" />
|
Loading…
Reference in new issue