diff --git a/render/render.js b/render/render.js index 6bebd212..40eca443 100644 --- a/render/render.js +++ b/render/render.js @@ -552,6 +552,18 @@ module.exports = function($window) { //style function updateStyle(element, old, style) { + if (old != null && style != null && typeof old === "object" && typeof style === "object" && style !== old) { + // Both old & new are (different) objects. + // Update style properties that have changed + for (var key in style) { + if (style[key] !== old[key]) element.style[key] = style[key] + } + // Remove style properties that no longer exist + for (var key in old) { + if (!(key in style)) element.style[key] = "" + } + return + } if (old === style) element.style.cssText = "", old = null if (style == null) element.style.cssText = "" else if (typeof style === "string") element.style.cssText = style diff --git a/render/tests/test-updateElement.js b/render/tests/test-updateElement.js index 313fe1a9..a2ae0fcb 100644 --- a/render/tests/test-updateElement.js +++ b/render/tests/test-updateElement.js @@ -192,6 +192,19 @@ o.spec("updateElement", function() { o(updated.dom.style.backgroundColor).equals("") o(updated.dom.style.color).equals("gold") }) + o("does not re-render element styles for equivalent style objects", function() { + var style = {color: "gold"} + var vnode = {tag: "a", attrs: {style: style}} + + render(root, [vnode]) + + root.firstChild.style.color = "red" + style = {color: "gold"} + var updated = {tag: "a", attrs: {style: style}} + render(root, [updated]) + + o(updated.dom.style.color).equals("red") + }) o("replaces el", function() { var vnode = {tag: "a"} var updated = {tag: "b"}