More accurate style object diffs
This commit is contained in:
parent
c29e269c2c
commit
1e56f7763e
2 changed files with 25 additions and 0 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue