@@ -257,6 +257,75 @@ o.spec("updateElement", function() {
257
257
258
258
}
259
259
} )
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
+ } )
260
329
o ( "replaces el" , function ( ) {
261
330
var vnode = m ( "a" )
262
331
var updated = m ( "b" )
0 commit comments