diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts index 4bbec2901..ea89c55df 100644 --- a/packages/runtime-dom/__tests__/patchStyle.spec.ts +++ b/packages/runtime-dom/__tests__/patchStyle.spec.ts @@ -79,13 +79,13 @@ describe(`runtime-dom: style patching`, () => { expect(el.style.width).toBe('0px') }) - it('multiple patch with falsy style value', () => { + it('multiple patch with boolean style value', () => { const el = document.createElement('div') const styleA = { left: 0, - right: false, + right: true, top: 0, - bottom: false, + bottom: true, } patchProp(el as any, 'style', null, styleA) expect(el.style.left).toBe('0px') @@ -93,9 +93,9 @@ describe(`runtime-dom: style patching`, () => { expect(el.style.top).toBe('0px') expect(el.style.bottom).toBe('') const styleB = { - left: false, + left: true, right: 0, - top: false, + top: true, bottom: 0, } patchProp(el as any, 'style', styleA, styleB) diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts index ee8542725..034738116 100644 --- a/packages/runtime-dom/src/modules/style.ts +++ b/packages/runtime-dom/src/modules/style.ts @@ -19,14 +19,14 @@ export function patchStyle(el: Element, prev: Style, next: Style): void { if (prev) { if (!isString(prev)) { for (const key in prev) { - if (!next[key]) { + if (next[key] == null) { setStyle(style, key, '') } } } else { for (const prevStyle of prev.split(';')) { const key = prevStyle.slice(0, prevStyle.indexOf(':')).trim() - if (!next[key]) { + if (next[key] == null) { setStyle(style, key, '') } } @@ -75,7 +75,7 @@ function setStyle( if (isArray(val)) { val.forEach(v => setStyle(style, name, v)) } else { - if (val == null) val = '' + if (typeof val === 'boolean' || val == null) val = '' if (__DEV__) { if (semicolonRE.test(val)) { warn(