137 lines
3.3 KiB
Plaintext
137 lines
3.3 KiB
Plaintext
|
import transformCss from '..'
|
||
|
|
||
|
it('transforms margin, padding with 1 value', () => {
|
||
|
expect(transformCss([['margin', '1px']])).toEqual({
|
||
|
marginTop: 1,
|
||
|
marginRight: 1,
|
||
|
marginBottom: 1,
|
||
|
marginLeft: 1,
|
||
|
})
|
||
|
expect(transformCss([['padding', '1px']])).toEqual({
|
||
|
paddingTop: 1,
|
||
|
paddingRight: 1,
|
||
|
paddingBottom: 1,
|
||
|
paddingLeft: 1,
|
||
|
})
|
||
|
})
|
||
|
|
||
|
it('transforms margin, padding with 2 values', () => {
|
||
|
expect(transformCss([['margin', '1px 2px']])).toEqual({
|
||
|
marginTop: 1,
|
||
|
marginRight: 2,
|
||
|
marginBottom: 1,
|
||
|
marginLeft: 2,
|
||
|
})
|
||
|
expect(transformCss([['padding', '1px 2px']])).toEqual({
|
||
|
paddingTop: 1,
|
||
|
paddingRight: 2,
|
||
|
paddingBottom: 1,
|
||
|
paddingLeft: 2,
|
||
|
})
|
||
|
})
|
||
|
|
||
|
it('transforms margin, padding with 3 values', () => {
|
||
|
expect(transformCss([['margin', '1px 2px 3px']])).toEqual({
|
||
|
marginTop: 1,
|
||
|
marginRight: 2,
|
||
|
marginBottom: 3,
|
||
|
marginLeft: 2,
|
||
|
})
|
||
|
expect(transformCss([['padding', '1px 2px 3px']])).toEqual({
|
||
|
paddingTop: 1,
|
||
|
paddingRight: 2,
|
||
|
paddingBottom: 3,
|
||
|
paddingLeft: 2,
|
||
|
})
|
||
|
})
|
||
|
|
||
|
it('transforms margin, padding with 4 values', () => {
|
||
|
expect(transformCss([['margin', '1px 2px 3px 4px']])).toEqual({
|
||
|
marginTop: 1,
|
||
|
marginRight: 2,
|
||
|
marginBottom: 3,
|
||
|
marginLeft: 4,
|
||
|
})
|
||
|
expect(transformCss([['padding', '1px 2px 3px 4px']])).toEqual({
|
||
|
paddingTop: 1,
|
||
|
paddingRight: 2,
|
||
|
paddingBottom: 3,
|
||
|
paddingLeft: 4,
|
||
|
})
|
||
|
})
|
||
|
|
||
|
it('transforms margin, allowing unitless zero, percentages', () => {
|
||
|
expect(transformCss([['margin', '0 0% 10% 100%']])).toEqual({
|
||
|
marginTop: 0,
|
||
|
marginRight: '0%',
|
||
|
marginBottom: '10%',
|
||
|
marginLeft: '100%',
|
||
|
})
|
||
|
expect(transformCss([['padding', '0 0% 10% 100%']])).toEqual({
|
||
|
paddingTop: 0,
|
||
|
paddingRight: '0%',
|
||
|
paddingBottom: '10%',
|
||
|
paddingLeft: '100%',
|
||
|
})
|
||
|
})
|
||
|
|
||
|
it('transforms shorthand and overrides previous values', () => {
|
||
|
expect(transformCss([['margin-top', '2px'], ['margin', '1px']])).toEqual({
|
||
|
marginTop: 1,
|
||
|
marginRight: 1,
|
||
|
marginBottom: 1,
|
||
|
marginLeft: 1,
|
||
|
})
|
||
|
})
|
||
|
|
||
|
it('transforms margin shorthand with auto', () => {
|
||
|
expect(transformCss([['margin', 'auto']])).toEqual({
|
||
|
marginTop: 'auto',
|
||
|
marginRight: 'auto',
|
||
|
marginBottom: 'auto',
|
||
|
marginLeft: 'auto',
|
||
|
})
|
||
|
expect(transformCss([['margin', '0 auto']])).toEqual({
|
||
|
marginTop: 0,
|
||
|
marginRight: 'auto',
|
||
|
marginBottom: 0,
|
||
|
marginLeft: 'auto',
|
||
|
})
|
||
|
expect(transformCss([['margin', 'auto 0']])).toEqual({
|
||
|
marginTop: 'auto',
|
||
|
marginRight: 0,
|
||
|
marginBottom: 'auto',
|
||
|
marginLeft: 0,
|
||
|
})
|
||
|
expect(transformCss([['margin', '2px 3px auto']])).toEqual({
|
||
|
marginTop: 2,
|
||
|
marginRight: 3,
|
||
|
marginBottom: 'auto',
|
||
|
marginLeft: 3,
|
||
|
})
|
||
|
expect(transformCss([['margin', '10px auto 4px']])).toEqual({
|
||
|
marginTop: 10,
|
||
|
marginRight: 'auto',
|
||
|
marginBottom: 4,
|
||
|
marginLeft: 'auto',
|
||
|
})
|
||
|
})
|
||
|
|
||
|
it('transforms border width', () => {
|
||
|
expect(transformCss([['border-width', '1px 2px 3px 4px']])).toEqual({
|
||
|
borderTopWidth: 1,
|
||
|
borderRightWidth: 2,
|
||
|
borderBottomWidth: 3,
|
||
|
borderLeftWidth: 4,
|
||
|
})
|
||
|
})
|
||
|
|
||
|
it('transforms border radius', () => {
|
||
|
expect(transformCss([['border-radius', '1px 2px 3px 4px']])).toEqual({
|
||
|
borderTopLeftRadius: 1,
|
||
|
borderTopRightRadius: 2,
|
||
|
borderBottomRightRadius: 3,
|
||
|
borderBottomLeftRadius: 4,
|
||
|
})
|
||
|
})
|