Skip to content

Commit ffafe51

Browse files
authored
updateStyle(): use setProperty() when css vars and dashed-properties, fixes #2989 (#2991)
1 parent f3977b3 commit ffafe51

File tree

3 files changed

+84
-9
lines changed

3 files changed

+84
-9
lines changed

render/render.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -794,7 +794,7 @@ module.exports = function() {
794794
for (var key in style) {
795795
var value = style[key]
796796
if (value != null) {
797-
if (key[0] === "-" && key[1] === "-") element.style.setProperty(key, String(value))
797+
if (key.includes("-")) element.style.setProperty(key, String(value))
798798
else element.style[key] = String(value)
799799
}
800800
}
@@ -804,14 +804,14 @@ module.exports = function() {
804804
for (var key in style) {
805805
var value = style[key]
806806
if (value != null && (value = String(value)) !== String(old[key])) {
807-
if (key[0] === "-" && key[1] === "-") element.style.setProperty(key, value)
807+
if (key.includes("-")) element.style.setProperty(key, value)
808808
else element.style[key] = value
809809
}
810810
}
811811
// Remove style properties that no longer exist
812812
for (var key in old) {
813813
if (old[key] != null && style[key] == null) {
814-
if (key[0] === "-" && key[1] === "-") element.style.removeProperty(key)
814+
if (key.includes("-")) element.style.removeProperty(key)
815815
else element.style[key] = ""
816816
}
817817
}

render/tests/test-updateElement.js

+69
Original file line numberDiff line numberDiff line change
@@ -257,6 +257,75 @@ o.spec("updateElement", function() {
257257

258258
}
259259
})
260+
o("use style property setter only when cameCase keys", function() {
261+
var spySetProperty = o.spy()
262+
var spyRemoveProperty = o.spy()
263+
var spyDashed1 = o.spy()
264+
var spyDashed2 = o.spy()
265+
var spyDashed3 = o.spy()
266+
var spyCamelCase1 = o.spy()
267+
var spyCamelCase2 = o.spy()
268+
269+
render(root, m("a"))
270+
var el = root.firstChild
271+
272+
el.style.setProperty = spySetProperty
273+
el.style.removeProperty = spyRemoveProperty
274+
Object.defineProperties(el.style, {
275+
/* eslint-disable accessor-pairs */
276+
"background-color": {set: spyDashed1},
277+
"-webkit-border-radius": {set: spyDashed2},
278+
"--foo": {set: spyDashed3},
279+
backgroundColor: {set: spyCamelCase1},
280+
color: {set: spyCamelCase2}
281+
/* eslint-enable accessor-pairs */
282+
})
283+
284+
// sets dashed properties
285+
render(root, m("a", {
286+
style: {
287+
"background-color": "red",
288+
"-webkit-border-radius": "10px",
289+
"--foo": "bar"
290+
}
291+
}))
292+
o(spySetProperty.callCount).equals(3)
293+
o(spySetProperty.calls[0].args).deepEquals(["background-color", "red"])
294+
o(spySetProperty.calls[1].args).deepEquals(["-webkit-border-radius", "10px"])
295+
o(spySetProperty.calls[2].args).deepEquals(["--foo", "bar"])
296+
297+
// sets camelCase properties and removes dashed properties
298+
render(root, m("a", {
299+
style: {
300+
backgroundColor: "green",
301+
color: "red",
302+
}
303+
}))
304+
o(spyCamelCase1.callCount).equals(1)
305+
o(spyCamelCase2.callCount).equals(1)
306+
o(spyCamelCase1.calls[0].args).deepEquals(["green"])
307+
o(spyCamelCase2.calls[0].args).deepEquals(["red"])
308+
o(spyRemoveProperty.callCount).equals(3)
309+
o(spyRemoveProperty.calls[0].args).deepEquals(["background-color"])
310+
o(spyRemoveProperty.calls[1].args).deepEquals(["-webkit-border-radius"])
311+
o(spyRemoveProperty.calls[2].args).deepEquals(["--foo"])
312+
313+
// updates "color" and removes "backgroundColor"
314+
render(root, m("a", {style: {color: "blue"}}))
315+
o(spyCamelCase1.callCount).equals(2) // set and remove
316+
o(spyCamelCase2.callCount).equals(2) // set and update
317+
o(spyCamelCase1.calls[1].args).deepEquals([""])
318+
o(spyCamelCase2.calls[1].args).deepEquals(["blue"])
319+
320+
// unchanged by camelCase properties
321+
o(spySetProperty.callCount).equals(3)
322+
o(spyRemoveProperty.callCount).equals(3)
323+
324+
// never calls dashed property setter
325+
o(spyDashed1.callCount).equals(0)
326+
o(spyDashed2.callCount).equals(0)
327+
o(spyDashed3.callCount).equals(0)
328+
})
260329
o("replaces el", function() {
261330
var vnode = m("a")
262331
var updated = m("b")

test-utils/domMock.js

+12-6
Original file line numberDiff line numberDiff line change
@@ -284,12 +284,18 @@ module.exports = function(options) {
284284
getPropertyValue: {value: function(key){
285285
return style[key]
286286
}},
287-
removeProperty: {value: function(key){
288-
style[key] = style[camelCase(key)] = ""
289-
}},
290-
setProperty: {value: function(key, value){
291-
style[key] = style[camelCase(key)] = value
292-
}}
287+
removeProperty: {
288+
writable: true,
289+
value: function(key){
290+
style[key] = style[camelCase(key)] = ""
291+
}
292+
},
293+
setProperty: {
294+
writable: true,
295+
value: function(key, value){
296+
style[key] = style[camelCase(key)] = value
297+
}
298+
}
293299
})
294300
var events = {}
295301
var element = {

0 commit comments

Comments
 (0)