stylenormalizer.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  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/stylenormalizer';
  6. describe( 'Style proxy', () => {
  7. let styleProxy;
  8. beforeEach( () => {
  9. styleProxy = new StyleProxy();
  10. } );
  11. it( 'should parse', () => {
  12. styleProxy.setStyle( 'border:1px solid blue;' );
  13. expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
  14. bottom: {
  15. color: 'blue',
  16. style: 'solid',
  17. width: '1px'
  18. },
  19. left: {
  20. color: 'blue',
  21. style: 'solid',
  22. width: '1px'
  23. },
  24. right: {
  25. color: 'blue',
  26. style: 'solid',
  27. width: '1px'
  28. },
  29. top: {
  30. color: 'blue',
  31. style: 'solid',
  32. width: '1px'
  33. }
  34. } );
  35. } );
  36. it( 'should parse', () => {
  37. styleProxy.setStyle( 'border:1px solid blue;border-left:#665511 dashed 2.7em;border-top:7px dotted #ccc;' );
  38. expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
  39. bottom: {
  40. color: 'blue',
  41. style: 'solid',
  42. width: '1px'
  43. },
  44. left: {
  45. color: '#665511',
  46. style: 'dashed',
  47. width: '2.7em'
  48. },
  49. right: {
  50. color: 'blue',
  51. style: 'solid',
  52. width: '1px'
  53. },
  54. top: {
  55. color: '#ccc',
  56. style: 'dotted',
  57. width: '7px'
  58. }
  59. } );
  60. } );
  61. it( 'should output', () => {
  62. styleProxy.setStyle( 'border:1px solid blue;' );
  63. expect( styleProxy.getInlineStyle() ).to.equal( 'border:1px solid blue;' );
  64. expect( styleProxy.getInlineRule( 'border' ) ).to.equal( '1px solid blue' );
  65. expect( styleProxy.getInlineRule( 'border-top' ) ).to.equal( '1px solid blue' );
  66. expect( styleProxy.getInlineRule( 'border-right' ) ).to.equal( '1px solid blue' );
  67. expect( styleProxy.getInlineRule( 'border-bottom' ) ).to.equal( '1px solid blue' );
  68. expect( styleProxy.getInlineRule( 'border-left' ) ).to.equal( '1px solid blue' );
  69. } );
  70. it( 'should output', () => {
  71. styleProxy.setStyle( 'border:1px solid blue;border-left:#665511 dashed 2.7em;border-top:7px dotted #ccc;' );
  72. expect( styleProxy.getInlineStyle() ).to.equal(
  73. 'border-top:7px dotted #ccc;border-right:1px solid blue;border-bottom:1px solid blue;border-left:2.7em dashed #665511;'
  74. );
  75. expect( styleProxy.getInlineRule( 'border' ) ).to.be.undefined;
  76. expect( styleProxy.getInlineRule( 'border-top' ) ).to.equal( '7px dotted #ccc' );
  77. expect( styleProxy.getInlineRule( 'border-right' ) ).to.equal( '1px solid blue' );
  78. expect( styleProxy.getInlineRule( 'border-bottom' ) ).to.equal( '1px solid blue' );
  79. expect( styleProxy.getInlineRule( 'border-left' ) ).to.equal( '2.7em dashed #665511' );
  80. } );
  81. it( 'should add', () => {
  82. styleProxy.setStyle( 'border:1px solid blue;' );
  83. styleProxy.insertRule( 'border-left', '#665511 dashed 2.7em' );
  84. styleProxy.insertRule( 'border-top', '7px dotted #ccc' );
  85. expect( styleProxy.getInlineStyle() ).to.equal(
  86. 'border-top:7px dotted #ccc;border-right:1px solid blue;border-bottom:1px solid blue;border-left:2.7em dashed #665511;'
  87. );
  88. expect( styleProxy.getInlineRule( 'border' ) ).to.be.undefined;
  89. expect( styleProxy.getInlineRule( 'border-top' ) ).to.equal( '7px dotted #ccc' );
  90. expect( styleProxy.getInlineRule( 'border-right' ) ).to.equal( '1px solid blue' );
  91. expect( styleProxy.getInlineRule( 'border-bottom' ) ).to.equal( '1px solid blue' );
  92. expect( styleProxy.getInlineRule( 'border-left' ) ).to.equal( '2.7em dashed #665511' );
  93. } );
  94. it( 'should output', () => {
  95. styleProxy.setStyle( 'border:1px solid blue' );
  96. styleProxy.removeRule( 'border-top' );
  97. expect( styleProxy.getInlineStyle() ).to.equal(
  98. 'border-right:1px solid blue;border-bottom:1px solid blue;border-left:1px solid blue;'
  99. );
  100. expect( styleProxy.getInlineRule( 'border' ) ).to.be.undefined;
  101. expect( styleProxy.getInlineRule( 'border-top' ) ).to.be.undefined;
  102. expect( styleProxy.getInlineRule( 'border-right' ) ).to.equal( '1px solid blue' );
  103. expect( styleProxy.getInlineRule( 'border-bottom' ) ).to.equal( '1px solid blue' );
  104. expect( styleProxy.getInlineRule( 'border-left' ) ).to.equal( '1px solid blue' );
  105. } );
  106. it( 'pass-through', () => {
  107. styleProxy.setStyle( 'foo-bar:baz 1px abc;margin: 2px 3em;' );
  108. expect( styleProxy.getInlineStyle() ).to.equal( 'foo-bar:baz 1px abc;margin:2px 3em;' );
  109. expect( styleProxy.getInlineRule( 'foo-bar' ) ).to.equal( 'baz 1px abc' );
  110. expect( styleProxy.getInlineRule( 'margin' ) ).to.equal( '2px 3em' );
  111. } );
  112. } );