github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/libs/vue-1.0.24/test/unit/specs/directives/internal/style_spec.js (about)

     1  var _ = require('src/util')
     2  var def = require('src/directives/internal/style')
     3  var Vue = require('src')
     4  
     5  function checkPrefixedProp (prop) {
     6    var el = document.createElement('div')
     7    var upper = prop.charAt(0).toUpperCase() + prop.slice(1)
     8    if (!(prop in el.style)) {
     9      var prefixes = ['Webkit', 'Moz', 'ms']
    10      var i = prefixes.length
    11      while (i--) {
    12        if ((prefixes[i] + upper) in el.style) {
    13          prop = prefixes[i] + upper
    14        }
    15      }
    16    }
    17    return prop
    18  }
    19  
    20  describe(':style', function () {
    21    var el, dir
    22    beforeEach(function () {
    23      el = document.createElement('div')
    24      dir = { el: el }
    25      _.extend(dir, def)
    26    })
    27  
    28    it('plain CSS string', function () {
    29      dir.update('color:red;')
    30      expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;')
    31    })
    32  
    33    it('!important', function () {
    34      dir.update({
    35        color: 'red !important;'
    36      })
    37      expect(el.style.getPropertyPriority('color')).toBe('important')
    38    })
    39  
    40    it('camel case', function () {
    41      dir.update({
    42        marginLeft: '30px'
    43      })
    44      expect(el.style.marginLeft).toBe('30px')
    45    })
    46  
    47    it('remove on falsy value', function () {
    48      el.style.color = 'red'
    49      dir.update({
    50        color: null
    51      })
    52      expect(el.style.color).toBe('')
    53    })
    54  
    55    it('ignore unsupported property', function () {
    56      dir.update({
    57        unsupported: 'test'
    58      })
    59      expect(el.style.unsupported).not.toBe('test')
    60    })
    61  
    62    it('auto prefixing', function () {
    63      var prop = checkPrefixedProp('transform')
    64      var val = 'scale(0.5)'
    65      dir.update({
    66        transform: val
    67      })
    68      expect(el.style[prop]).toBe(val)
    69    })
    70  
    71    it('object with multiple fields', function () {
    72      el.style.padding = '10px'
    73  
    74      dir.update({
    75        color: 'red',
    76        marginRight: '30px'
    77      })
    78      expect(el.style.getPropertyValue('color')).toBe('red')
    79      expect(el.style.getPropertyValue('margin-right')).toBe('30px')
    80      expect(el.style.getPropertyValue('padding')).toBe('10px')
    81  
    82      dir.update({
    83        color: 'blue',
    84        padding: null
    85      })
    86      expect(el.style.getPropertyValue('color')).toBe('blue')
    87      expect(el.style.getPropertyValue('margin-right')).toBeFalsy()
    88      expect(el.style.getPropertyValue('padding')).toBeFalsy()
    89  
    90      // handle falsy value
    91      dir.update(null)
    92      expect(el.style.getPropertyValue('color')).toBeFalsy()
    93      expect(el.style.getPropertyValue('margin-right')).toBeFalsy()
    94      expect(el.style.getPropertyValue('padding')).toBeFalsy()
    95    })
    96  
    97    it('array of objects', function () {
    98      el.style.padding = '10px'
    99  
   100      dir.update([{color: 'red'}, {marginRight: '30px'}])
   101      expect(el.style.getPropertyValue('color')).toBe('red')
   102      expect(el.style.getPropertyValue('margin-right')).toBe('30px')
   103      expect(el.style.getPropertyValue('padding')).toBe('10px')
   104  
   105      dir.update([{color: 'blue'}, {padding: null}])
   106      expect(el.style.getPropertyValue('color')).toBe('blue')
   107      expect(el.style.getPropertyValue('margin-right')).toBeFalsy()
   108      expect(el.style.getPropertyValue('padding')).toBeFalsy()
   109    })
   110  
   111    it('updates object deep', function (done) {
   112      el.setAttribute(':style', 'divStyling')
   113      var vm = new Vue({
   114        el: el,
   115        data: {divStyling: { display: 'none' }}
   116      })
   117      expect(el.style.display).toBe('none')
   118      vm.divStyling.display = 'block'
   119      _.nextTick(function () {
   120        expect(el.style.display).toBe('block')
   121        done()
   122      })
   123    })
   124  
   125    // #2654
   126    it('background size with only one value', function () {
   127      dir.update({ backgroundSize: '100%' })
   128      expect(el.style.cssText.replace(/\s/g, '')).toMatch(/background-size:100%(auto)?;/)
   129    })
   130  })