| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226 |
- /**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
- import StyleProxy from '../../src/view/styles';
- describe( 'Styles', () => {
- let styleProxy;
- beforeEach( () => {
- styleProxy = new StyleProxy();
- } );
- describe( 'styles rules', () => {
- describe( 'border', () => {
- it( 'should parse border shorthand', () => {
- styleProxy.setStyle( 'border:1px solid blue;' );
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
- bottom: {
- color: 'blue',
- style: 'solid',
- width: '1px'
- },
- left: {
- color: 'blue',
- style: 'solid',
- width: '1px'
- },
- right: {
- color: 'blue',
- style: 'solid',
- width: '1px'
- },
- top: {
- color: 'blue',
- style: 'solid',
- width: '1px'
- }
- } );
- } );
- it( 'should parse border shorthand with other shorthands', () => {
- styleProxy.setStyle( 'border:1px solid blue;border-left:#665511 dashed 2.7em;border-top:7px dotted #ccc;' );
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
- bottom: {
- color: 'blue',
- style: 'solid',
- width: '1px'
- },
- left: {
- color: '#665511',
- style: 'dashed',
- width: '2.7em'
- },
- right: {
- color: 'blue',
- style: 'solid',
- width: '1px'
- },
- top: {
- color: '#ccc',
- style: 'dotted',
- width: '7px'
- }
- } );
- } );
- it( 'should output inline shorthand rules', () => {
- styleProxy.setStyle( 'border:1px solid blue;' );
- expect( styleProxy.getInlineStyle() ).to.equal( 'border:1px solid blue;' );
- expect( styleProxy.getInlineRule( 'border' ) ).to.equal( '1px solid blue' );
- expect( styleProxy.getInlineRule( 'border-top' ) ).to.equal( '1px solid blue' );
- expect( styleProxy.getInlineRule( 'border-right' ) ).to.equal( '1px solid blue' );
- expect( styleProxy.getInlineRule( 'border-bottom' ) ).to.equal( '1px solid blue' );
- expect( styleProxy.getInlineRule( 'border-left' ) ).to.equal( '1px solid blue' );
- } );
- it( 'should output inline shorthand rules', () => {
- styleProxy.setStyle( 'border:1px solid blue;border-left:#665511 dashed 2.7em;border-top:7px dotted #ccc;' );
- expect( styleProxy.getInlineStyle() ).to.equal(
- 'border-top:7px dotted #ccc;border-right:1px solid blue;border-bottom:1px solid blue;border-left:2.7em dashed #665511;'
- );
- expect( styleProxy.getInlineRule( 'border' ) ).to.be.undefined;
- expect( styleProxy.getInlineRule( 'border-top' ) ).to.equal( '7px dotted #ccc' );
- expect( styleProxy.getInlineRule( 'border-right' ) ).to.equal( '1px solid blue' );
- expect( styleProxy.getInlineRule( 'border-bottom' ) ).to.equal( '1px solid blue' );
- expect( styleProxy.getInlineRule( 'border-left' ) ).to.equal( '2.7em dashed #665511' );
- } );
- it( 'should merge rules on insert other shorthand', () => {
- styleProxy.setStyle( 'border:1px solid blue;' );
- styleProxy.insertRule( 'border-left', '#665511 dashed 2.7em' );
- styleProxy.insertRule( 'border-top', '7px dotted #ccc' );
- expect( styleProxy.getInlineStyle() ).to.equal(
- 'border-top:7px dotted #ccc;border-right:1px solid blue;border-bottom:1px solid blue;border-left:2.7em dashed #665511;'
- );
- expect( styleProxy.getInlineRule( 'border' ) ).to.be.undefined;
- expect( styleProxy.getInlineRule( 'border-top' ) ).to.equal( '7px dotted #ccc' );
- expect( styleProxy.getInlineRule( 'border-right' ) ).to.equal( '1px solid blue' );
- expect( styleProxy.getInlineRule( 'border-bottom' ) ).to.equal( '1px solid blue' );
- expect( styleProxy.getInlineRule( 'border-left' ) ).to.equal( '2.7em dashed #665511' );
- } );
- it( 'should output', () => {
- styleProxy.setStyle( 'border:1px solid blue;' );
- styleProxy.removeRule( 'border-top' );
- expect( styleProxy.getInlineStyle() ).to.equal(
- 'border-right:1px solid blue;border-bottom:1px solid blue;border-left:1px solid blue;'
- );
- expect( styleProxy.getInlineRule( 'border' ) ).to.be.undefined;
- expect( styleProxy.getInlineRule( 'border-top' ) ).to.be.undefined;
- expect( styleProxy.getInlineRule( 'border-right' ) ).to.equal( '1px solid blue' );
- expect( styleProxy.getInlineRule( 'border-bottom' ) ).to.equal( '1px solid blue' );
- expect( styleProxy.getInlineRule( 'border-left' ) ).to.equal( '1px solid blue' );
- } );
- describe( 'border-color', () => {
- it( 'should set all border colors (1 value defined)', () => {
- styleProxy.setStyle( 'border-color:cyan;' );
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
- top: { color: 'cyan' },
- left: { color: 'cyan' },
- bottom: { color: 'cyan' },
- right: { color: 'cyan' }
- } );
- } );
- it( 'should set all border colors (2 values defined)', () => {
- styleProxy.setStyle( 'border-color:cyan magenta;' );
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
- top: { color: 'cyan' },
- right: { color: 'magenta' },
- bottom: { color: 'cyan' },
- left: { color: 'magenta' }
- } );
- } );
- it( 'should set all border colors (3 values defined)', () => {
- styleProxy.setStyle( 'border-color:cyan magenta pink;' );
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
- top: { color: 'cyan' },
- right: { color: 'magenta' },
- bottom: { color: 'pink' },
- left: { color: 'magenta' }
- } );
- } );
- it( 'should set all border colors (4 values defined)', () => {
- styleProxy.setStyle( 'border-color:cyan magenta pink beige;' );
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
- top: { color: 'cyan' },
- right: { color: 'magenta' },
- bottom: { color: 'pink' },
- left: { color: 'beige' }
- } );
- } );
- } );
- describe( 'border-style', () => {
- it( 'should set all border styles (1 value defined)', () => {
- styleProxy.setStyle( 'border-style:solid;' );
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
- top: { style: 'solid' },
- left: { style: 'solid' },
- bottom: { style: 'solid' },
- right: { style: 'solid' }
- } );
- } );
- it( 'should set all border styles (2 values defined)', () => {
- styleProxy.setStyle( 'border-style:solid dotted;' );
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
- top: { style: 'solid' },
- right: { style: 'dotted' },
- bottom: { style: 'solid' },
- left: { style: 'dotted' }
- } );
- } );
- it( 'should set all border styles (3 values defined)', () => {
- styleProxy.setStyle( 'border-style:solid dotted dashed;' );
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
- top: { style: 'solid' },
- right: { style: 'dotted' },
- bottom: { style: 'dashed' },
- left: { style: 'dotted' }
- } );
- } );
- it( 'should set all border styles (4 values defined)', () => {
- styleProxy.setStyle( 'border-style:solid dotted dashed ridge;' );
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
- top: { style: 'solid' },
- right: { style: 'dotted' },
- bottom: { style: 'dashed' },
- left: { style: 'ridge' }
- } );
- } );
- } );
- } );
- describe( 'unknown rules', () => {
- it( 'should left rules untouched', () => {
- styleProxy.setStyle( 'foo-bar:baz 1px abc;baz: 2px 3em;' );
- expect( styleProxy.getInlineStyle() ).to.equal( 'baz:2px 3em;foo-bar:baz 1px abc;' );
- expect( styleProxy.getInlineRule( 'foo-bar' ) ).to.equal( 'baz 1px abc' );
- expect( styleProxy.getInlineRule( 'baz' ) ).to.equal( '2px 3em' );
- } );
- } );
- } );
- } );
|