styles.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. import StyleProxy from '../../src/view/styles';
  6. describe( 'Styles', () => {
  7. let styleProxy;
  8. beforeEach( () => {
  9. styleProxy = new StyleProxy();
  10. } );
  11. describe( 'styles rules', () => {
  12. describe( 'border', () => {
  13. it( 'should parse border shorthand', () => {
  14. styleProxy.setStyle( 'border:1px solid blue;' );
  15. expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
  16. bottom: {
  17. color: 'blue',
  18. style: 'solid',
  19. width: '1px'
  20. },
  21. left: {
  22. color: 'blue',
  23. style: 'solid',
  24. width: '1px'
  25. },
  26. right: {
  27. color: 'blue',
  28. style: 'solid',
  29. width: '1px'
  30. },
  31. top: {
  32. color: 'blue',
  33. style: 'solid',
  34. width: '1px'
  35. }
  36. } );
  37. } );
  38. it( 'should parse border shorthand with other shorthands', () => {
  39. styleProxy.setStyle( 'border:1px solid blue;border-left:#665511 dashed 2.7em;border-top:7px dotted #ccc;' );
  40. expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
  41. bottom: {
  42. color: 'blue',
  43. style: 'solid',
  44. width: '1px'
  45. },
  46. left: {
  47. color: '#665511',
  48. style: 'dashed',
  49. width: '2.7em'
  50. },
  51. right: {
  52. color: 'blue',
  53. style: 'solid',
  54. width: '1px'
  55. },
  56. top: {
  57. color: '#ccc',
  58. style: 'dotted',
  59. width: '7px'
  60. }
  61. } );
  62. } );
  63. it( 'should output inline shorthand rules', () => {
  64. styleProxy.setStyle( 'border:1px solid blue;' );
  65. expect( styleProxy.getInlineStyle() ).to.equal( 'border:1px solid blue;' );
  66. expect( styleProxy.getInlineRule( 'border' ) ).to.equal( '1px solid blue' );
  67. expect( styleProxy.getInlineRule( 'border-top' ) ).to.equal( '1px solid blue' );
  68. expect( styleProxy.getInlineRule( 'border-right' ) ).to.equal( '1px solid blue' );
  69. expect( styleProxy.getInlineRule( 'border-bottom' ) ).to.equal( '1px solid blue' );
  70. expect( styleProxy.getInlineRule( 'border-left' ) ).to.equal( '1px solid blue' );
  71. } );
  72. it( 'should output inline shorthand rules', () => {
  73. styleProxy.setStyle( 'border:1px solid blue;border-left:#665511 dashed 2.7em;border-top:7px dotted #ccc;' );
  74. expect( styleProxy.getInlineStyle() ).to.equal(
  75. 'border-top:7px dotted #ccc;border-right:1px solid blue;border-bottom:1px solid blue;border-left:2.7em dashed #665511;'
  76. );
  77. expect( styleProxy.getInlineRule( 'border' ) ).to.be.undefined;
  78. expect( styleProxy.getInlineRule( 'border-top' ) ).to.equal( '7px dotted #ccc' );
  79. expect( styleProxy.getInlineRule( 'border-right' ) ).to.equal( '1px solid blue' );
  80. expect( styleProxy.getInlineRule( 'border-bottom' ) ).to.equal( '1px solid blue' );
  81. expect( styleProxy.getInlineRule( 'border-left' ) ).to.equal( '2.7em dashed #665511' );
  82. } );
  83. it( 'should merge rules on insert other shorthand', () => {
  84. styleProxy.setStyle( 'border:1px solid blue;' );
  85. styleProxy.insertRule( 'border-left', '#665511 dashed 2.7em' );
  86. styleProxy.insertRule( 'border-top', '7px dotted #ccc' );
  87. expect( styleProxy.getInlineStyle() ).to.equal(
  88. 'border-top:7px dotted #ccc;border-right:1px solid blue;border-bottom:1px solid blue;border-left:2.7em dashed #665511;'
  89. );
  90. expect( styleProxy.getInlineRule( 'border' ) ).to.be.undefined;
  91. expect( styleProxy.getInlineRule( 'border-top' ) ).to.equal( '7px dotted #ccc' );
  92. expect( styleProxy.getInlineRule( 'border-right' ) ).to.equal( '1px solid blue' );
  93. expect( styleProxy.getInlineRule( 'border-bottom' ) ).to.equal( '1px solid blue' );
  94. expect( styleProxy.getInlineRule( 'border-left' ) ).to.equal( '2.7em dashed #665511' );
  95. } );
  96. it( 'should output', () => {
  97. styleProxy.setStyle( 'border:1px solid blue;' );
  98. styleProxy.removeRule( 'border-top' );
  99. expect( styleProxy.getInlineStyle() ).to.equal(
  100. 'border-right:1px solid blue;border-bottom:1px solid blue;border-left:1px solid blue;'
  101. );
  102. expect( styleProxy.getInlineRule( 'border' ) ).to.be.undefined;
  103. expect( styleProxy.getInlineRule( 'border-top' ) ).to.be.undefined;
  104. expect( styleProxy.getInlineRule( 'border-right' ) ).to.equal( '1px solid blue' );
  105. expect( styleProxy.getInlineRule( 'border-bottom' ) ).to.equal( '1px solid blue' );
  106. expect( styleProxy.getInlineRule( 'border-left' ) ).to.equal( '1px solid blue' );
  107. } );
  108. describe( 'border-color', () => {
  109. it( 'should set all border colors (1 value defined)', () => {
  110. styleProxy.setStyle( 'border-color:cyan;' );
  111. expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
  112. top: { color: 'cyan' },
  113. left: { color: 'cyan' },
  114. bottom: { color: 'cyan' },
  115. right: { color: 'cyan' }
  116. } );
  117. } );
  118. it( 'should set all border colors (2 values defined)', () => {
  119. styleProxy.setStyle( 'border-color:cyan magenta;' );
  120. expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
  121. top: { color: 'cyan' },
  122. right: { color: 'magenta' },
  123. bottom: { color: 'cyan' },
  124. left: { color: 'magenta' }
  125. } );
  126. } );
  127. it( 'should set all border colors (3 values defined)', () => {
  128. styleProxy.setStyle( 'border-color:cyan magenta pink;' );
  129. expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
  130. top: { color: 'cyan' },
  131. right: { color: 'magenta' },
  132. bottom: { color: 'pink' },
  133. left: { color: 'magenta' }
  134. } );
  135. } );
  136. it( 'should set all border colors (4 values defined)', () => {
  137. styleProxy.setStyle( 'border-color:cyan magenta pink beige;' );
  138. expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
  139. top: { color: 'cyan' },
  140. right: { color: 'magenta' },
  141. bottom: { color: 'pink' },
  142. left: { color: 'beige' }
  143. } );
  144. } );
  145. } );
  146. } );
  147. describe( 'unknown rules', () => {
  148. it( 'should left rules untouched', () => {
  149. styleProxy.setStyle( 'foo-bar:baz 1px abc;baz: 2px 3em;' );
  150. expect( styleProxy.getInlineStyle() ).to.equal( 'baz:2px 3em;foo-bar:baz 1px abc;' );
  151. expect( styleProxy.getInlineRule( 'foo-bar' ) ).to.equal( 'baz 1px abc' );
  152. expect( styleProxy.getInlineRule( 'baz' ) ).to.equal( '2px 3em' );
  153. } );
  154. } );
  155. } );
  156. } );