This repository has been archived by the owner on Sep 7, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 87
/
style.js
78 lines (69 loc) · 2.45 KB
/
style.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import test from 'tape'
import mk from './test-utils/mk'
test('simple style string sets the property', function (t) {
var el = mk().node()
el.setAttribute('style', 'color:red')
t.plan(1)
t.equal(el.style.color, 'red')
})
test('setting a complex style string', function (t) {
var el = mk().node()
el.setAttribute('style', 'color: red; height: 300px; width: 200px; text-align: left')
t.plan(4)
t.equal(el.style.color, 'red')
t.equal(el.style.height, '300px')
t.equal(el.style.width, '200px')
t.equal(el.style.textAlign, 'left')
})
test('setting a property appears in React', function (t) {
var el = mk().node()
el.style.backgroundColor = 'red'
var r = el.toReact()
t.plan(1)
t.equal(r.props.style.backgroundColor, 'red')
})
test('style object methods do not leak through', function (t) {
var el = mk().node()
el.style.backgroundColor = 'red'
var r = el.toReact()
t.plan(3)
t.equal(typeof r.props.style.setProperty, 'undefined')
t.equal(typeof r.props.style.getProperty, 'undefined')
t.equal(typeof r.props.style.removeProperty, 'undefined')
})
test('when using a key the style object is still cleaned', function (t) {
var el = mk().node()
el.setAttribute('key', 'test')
el.style.backgroundColor = 'red'
var r = el.toReact()
t.plan(3)
t.equal(typeof r.props.style.setProperty, 'undefined')
t.equal(typeof r.props.style.getProperty, 'undefined')
t.equal(typeof r.props.style.removeProperty, 'undefined')
})
test('vendor prefixed styles are correctly camel-cased', function (t) {
var el = mk().node()
el.setAttribute('style', '-webkit-transition: opacity 100ms ease')
t.plan(1)
t.equal(el.style.WebkitTransition, 'opacity 100ms ease')
})
test('pascal-cased, vendor prefixed styles are not camel-cased', function (t) {
var el = mk().node()
el.setAttribute('style', 'WebkitTransition: opacity 100ms ease')
t.plan(1)
t.equal(el.style.WebkitTransition, 'opacity 100ms ease')
})
test('-ms- and ms* vendor prefixed styles are supported', function (t) {
t.plan(2)
var el = mk().node()
el.setAttribute('style', 'msTransform: opacity 100ms ease; -ms-animation: 1s ease popIn')
t.equal(el.style.msTransform, 'opacity 100ms ease')
t.equal(el.style.msAnimation, '1s ease popIn')
})
test('getPropertyValue is the same as getProperty', function (t) {
t.plan(2)
var el = mk().node()
el.setAttribute('style', 'width: 10px;')
t.equal(el.style.getProperty('width'), '10px')
t.equal(el.style.getPropertyValue('width'), '10px')
})