Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Add tests for margin style output.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jodator
jodator committed Sep 27, 2019
1 parent a78136c commit 28a6440
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 53 deletions.
102 changes: 52 additions & 50 deletions src/view/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,10 @@ export default class Styles {
return this._styles;
} // TODO: clone

if ( has( this._styles, name.replace( '-', '.' ) ) ) {
return get( this._styles, name.replace( '-', '.' ) );
const path = name.replace( '-', '.' );

if ( has( this._styles, path ) ) {
return get( this._styles, path );
} else {
return this._styles[ name ];
}
Expand Down Expand Up @@ -236,6 +238,52 @@ function addStyle( styleObject, name, value ) {
}
}

function printSingleValues( { top, right, bottom, left }, prefix ) {
const ret = [];

if ( top ) {
ret.push( prefix + '-top:' + top );
}

if ( right ) {
ret.push( prefix + '-right:' + right );
}

if ( bottom ) {
ret.push( prefix + '-bottom:' + bottom );
}

if ( left ) {
ret.push( prefix + '-left:' + left );
}

return ret.join( ';' );
}

function outputShorthandableValue( styleObject, strict, styleShorthand ) {
const { top, right, bottom, left } = styleObject;

if ( top === left && left === bottom && bottom === right ) {
return ( strict ? '' : styleShorthand + ':' ) + top;
} else if ( ![ top, right, left, bottom ].every( value => !!value ) ) {
return printSingleValues( { top, right, bottom, left }, 'margin' );
} else {
const out = [];

if ( left !== right ) {
out.push( top, right, bottom, left );
} else if ( bottom !== top ) {
out.push( top, right, bottom );
} else if ( right != top ) {
out.push( top, right );
} else {
out.push( top );
}

return `${ strict ? '' : styleShorthand + ':' }${ out.join( ' ' ) }`;
}
}

function toInlineStyle( styleName, styleObjectOrString, strict = false ) {
if ( styleName === 'border' ) {
const top = toInlineBorder( styleObjectOrString.top );
Expand All @@ -246,26 +294,7 @@ function toInlineStyle( styleName, styleObjectOrString, strict = false ) {
if ( top === right && right === bottom && bottom === left ) {
return ( strict ? '' : 'border:' ) + top;
} else if ( !strict ) {
const ret = [];

// TODO not so nice:
if ( top ) {
ret.push( 'border-top:' + top );
}

if ( right ) {
ret.push( 'border-right:' + right );
}

if ( bottom ) {
ret.push( 'border-bottom:' + bottom );
}

if ( left ) {
ret.push( 'border-left:' + left );
}

return ret.join( ';' );
return printSingleValues( { top, right, bottom, left }, 'border' );
}

return;
Expand All @@ -276,34 +305,7 @@ function toInlineStyle( styleName, styleObjectOrString, strict = false ) {
}

if ( styleName === 'margin' ) {
const { top, right, bottom, left } = styleObjectOrString;

if ( top === left && left === bottom && bottom === right ) {
return ( strict ? 'margin' : '' ) + top;
} else if ( ![ top, right, left, bottom ].every( value => !!value ) ) {
const ret = [];

// TODO not so nice:
if ( top ) {
ret.push( 'margin-top:' + top );
}

if ( right ) {
ret.push( 'margin-right:' + right );
}

if ( bottom ) {
ret.push( 'margin-bottom:' + bottom );
}

if ( left ) {
ret.push( 'margin-left:' + left );
}

return ret.join( ';' );
} else {
return 'margin...';
}
return outputShorthandableValue( styleObjectOrString, strict, 'margin' );
}

return ( strict ? '' : styleName + ':' ) + styleObjectOrString;
Expand Down
76 changes: 73 additions & 3 deletions tests/view/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,13 +283,78 @@ describe( 'Styles', () => {
} );
} );

it( 'should output inline style (1 value defined)', () => {
styleProxy.setStyle( 'margin:1px;' );

expect( styleProxy.getInlineStyle() ).to.equal( 'margin:1px;' );
expect( styleProxy.getInlineRule( 'margin' ) ).to.equal( '1px' );
expect( styleProxy.getInlineRule( 'margin-top' ) ).to.equal( '1px' );
expect( styleProxy.getInlineRule( 'margin-right' ) ).to.equal( '1px' );
expect( styleProxy.getInlineRule( 'margin-bottom' ) ).to.equal( '1px' );
expect( styleProxy.getInlineRule( 'margin-left' ) ).to.equal( '1px' );
} );

it( 'should output inline style (2 values defined)', () => {
styleProxy.setStyle( 'margin:1px .34cm;' );

expect( styleProxy.getInlineStyle() ).to.equal( 'margin:1px .34cm;' );
expect( styleProxy.getInlineRule( 'margin' ) ).to.equal( '1px .34cm' );
expect( styleProxy.getInlineRule( 'margin-top' ) ).to.equal( '1px' );
expect( styleProxy.getInlineRule( 'margin-right' ) ).to.equal( '.34cm' );
expect( styleProxy.getInlineRule( 'margin-bottom' ) ).to.equal( '1px' );
expect( styleProxy.getInlineRule( 'margin-left' ) ).to.equal( '.34cm' );
} );

it( 'should output inline style (3 values defined)', () => {
styleProxy.setStyle( 'margin:1px .34cm 90.1rem;' );

expect( styleProxy.getInlineStyle() ).to.equal( 'margin:1px .34cm 90.1rem;' );
expect( styleProxy.getInlineRule( 'margin' ) ).to.equal( '1px .34cm 90.1rem' );
expect( styleProxy.getInlineRule( 'margin-top' ) ).to.equal( '1px' );
expect( styleProxy.getInlineRule( 'margin-right' ) ).to.equal( '.34cm' );
expect( styleProxy.getInlineRule( 'margin-bottom' ) ).to.equal( '90.1rem' );
expect( styleProxy.getInlineRule( 'margin-left' ) ).to.equal( '.34cm' );
} );

it( 'should output inline style (3 values defined, only last different)', () => {
styleProxy.setStyle( 'margin:1px 1px 90.1rem;' );

expect( styleProxy.getInlineStyle() ).to.equal( 'margin:1px 1px 90.1rem;' );
expect( styleProxy.getInlineRule( 'margin' ) ).to.equal( '1px 1px 90.1rem' );
expect( styleProxy.getInlineRule( 'margin-top' ) ).to.equal( '1px' );
expect( styleProxy.getInlineRule( 'margin-right' ) ).to.equal( '1px' );
expect( styleProxy.getInlineRule( 'margin-bottom' ) ).to.equal( '90.1rem' );
expect( styleProxy.getInlineRule( 'margin-left' ) ).to.equal( '1px' );
} );

it( 'should output inline style (4 values defined)', () => {
styleProxy.setStyle( 'margin:1px .34cm 90.1rem thick;' );

expect( styleProxy.getInlineStyle() ).to.equal( 'margin:1px .34cm 90.1rem thick;' );
expect( styleProxy.getInlineRule( 'margin' ) ).to.equal( '1px .34cm 90.1rem thick' );
expect( styleProxy.getInlineRule( 'margin-top' ) ).to.equal( '1px' );
expect( styleProxy.getInlineRule( 'margin-right' ) ).to.equal( '.34cm' );
expect( styleProxy.getInlineRule( 'margin-bottom' ) ).to.equal( '90.1rem' );
expect( styleProxy.getInlineRule( 'margin-left' ) ).to.equal( 'thick' );
} );

it( 'should output inline style (4 values defined, only last different)', () => {
styleProxy.setStyle( 'margin:1px 1px 1px thick;' );

expect( styleProxy.getInlineStyle() ).to.equal( 'margin:1px 1px 1px thick;' );
expect( styleProxy.getInlineRule( 'margin' ) ).to.equal( '1px 1px 1px thick' );
expect( styleProxy.getInlineRule( 'margin-top' ) ).to.equal( '1px' );
expect( styleProxy.getInlineRule( 'margin-right' ) ).to.equal( '1px' );
expect( styleProxy.getInlineRule( 'margin-bottom' ) ).to.equal( '1px' );
expect( styleProxy.getInlineRule( 'margin-left' ) ).to.equal( 'thick' );
} );

describe( 'margin-*', () => {
it( 'should set proper margin', () => {
styleProxy.setStyle( 'margin-top:1px;' );

expect( styleProxy.getModel( 'margin' ) ).to.deep.equal( {
top: '1px'
} );
expect( styleProxy.getModel( 'margin' ) ).to.deep.equal( { top: '1px' } );
expect( styleProxy.getModel( 'margin-top' ) ).to.equal( '1px' );
} );

it( 'should set proper margin with margin shorthand', () => {
Expand All @@ -301,6 +366,10 @@ describe( 'Styles', () => {
bottom: '2em',
left: '2em'
} );
expect( styleProxy.getModel( 'margin-top' ) ).to.equal( '1px' );
expect( styleProxy.getModel( 'margin-right' ) ).to.equal( '2em' );
expect( styleProxy.getModel( 'margin-bottom' ) ).to.equal( '2em' );
expect( styleProxy.getModel( 'margin-left' ) ).to.equal( '2em' );
} );
} );
} );
Expand Down Expand Up @@ -349,6 +418,7 @@ describe( 'Styles', () => {
left: 'thick'
} );
} );

describe( 'padding-*', () => {
it( 'should set proper padding', () => {
styleProxy.setStyle( 'padding-top:1px;' );
Expand Down

0 comments on commit 28a6440

Please sign in to comment.