margin.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. import StylesMap, { StylesProcessor } from '../../../src/view/stylesmap';
  6. import { addMarginRules } from '../../../src/view/styles/margin';
  7. describe( 'Margin styles normalizer', () => {
  8. let styles;
  9. beforeEach( () => {
  10. const stylesProcessor = new StylesProcessor();
  11. addMarginRules( stylesProcessor );
  12. styles = new StylesMap( stylesProcessor );
  13. } );
  14. it( 'should set all margins (1 value defined)', () => {
  15. styles.setTo( 'margin:1px;' );
  16. expect( styles.getNormalized( 'margin' ) ).to.deep.equal( {
  17. top: '1px',
  18. right: '1px',
  19. bottom: '1px',
  20. left: '1px'
  21. } );
  22. } );
  23. it( 'should set all margins (2 values defined)', () => {
  24. styles.setTo( 'margin:1px .34cm;' );
  25. expect( styles.getNormalized( 'margin' ) ).to.deep.equal( {
  26. top: '1px',
  27. right: '.34cm',
  28. bottom: '1px',
  29. left: '.34cm'
  30. } );
  31. } );
  32. it( 'should set all margins (3 values defined)', () => {
  33. styles.setTo( 'margin:1px .34cm 90.1rem;' );
  34. expect( styles.getNormalized( 'margin' ) ).to.deep.equal( {
  35. top: '1px',
  36. right: '.34cm',
  37. bottom: '90.1rem',
  38. left: '.34cm'
  39. } );
  40. } );
  41. it( 'should set all margins (4 values defined)', () => {
  42. styles.setTo( 'margin:1px .34cm 90.1rem thick;' );
  43. expect( styles.getNormalized( 'margin' ) ).to.deep.equal( {
  44. top: '1px',
  45. right: '.34cm',
  46. bottom: '90.1rem',
  47. left: 'thick'
  48. } );
  49. } );
  50. it( 'should output inline style (1 value defined)', () => {
  51. styles.setTo( 'margin:1px;' );
  52. expect( styles.toString() ).to.equal( 'margin:1px;' );
  53. expect( styles.getAsString( 'margin' ) ).to.equal( '1px' );
  54. expect( styles.getAsString( 'margin-top' ) ).to.equal( '1px' );
  55. expect( styles.getAsString( 'margin-right' ) ).to.equal( '1px' );
  56. expect( styles.getAsString( 'margin-bottom' ) ).to.equal( '1px' );
  57. expect( styles.getAsString( 'margin-left' ) ).to.equal( '1px' );
  58. } );
  59. it( 'should output inline style (2 values defined)', () => {
  60. styles.setTo( 'margin:1px .34cm;' );
  61. expect( styles.toString() ).to.equal( 'margin:1px .34cm;' );
  62. expect( styles.getAsString( 'margin' ) ).to.equal( '1px .34cm' );
  63. expect( styles.getAsString( 'margin-top' ) ).to.equal( '1px' );
  64. expect( styles.getAsString( 'margin-right' ) ).to.equal( '.34cm' );
  65. expect( styles.getAsString( 'margin-bottom' ) ).to.equal( '1px' );
  66. expect( styles.getAsString( 'margin-left' ) ).to.equal( '.34cm' );
  67. } );
  68. it( 'should output inline style (3 values defined)', () => {
  69. styles.setTo( 'margin:1px .34cm 90.1rem;' );
  70. expect( styles.toString() ).to.equal( 'margin:1px .34cm 90.1rem;' );
  71. expect( styles.getAsString( 'margin' ) ).to.equal( '1px .34cm 90.1rem' );
  72. expect( styles.getAsString( 'margin-top' ) ).to.equal( '1px' );
  73. expect( styles.getAsString( 'margin-right' ) ).to.equal( '.34cm' );
  74. expect( styles.getAsString( 'margin-bottom' ) ).to.equal( '90.1rem' );
  75. expect( styles.getAsString( 'margin-left' ) ).to.equal( '.34cm' );
  76. } );
  77. it( 'should output inline style (3 values defined, only last different)', () => {
  78. styles.setTo( 'margin:1px 1px 90.1rem;' );
  79. expect( styles.toString() ).to.equal( 'margin:1px 1px 90.1rem;' );
  80. expect( styles.getAsString( 'margin' ) ).to.equal( '1px 1px 90.1rem' );
  81. expect( styles.getAsString( 'margin-top' ) ).to.equal( '1px' );
  82. expect( styles.getAsString( 'margin-right' ) ).to.equal( '1px' );
  83. expect( styles.getAsString( 'margin-bottom' ) ).to.equal( '90.1rem' );
  84. expect( styles.getAsString( 'margin-left' ) ).to.equal( '1px' );
  85. } );
  86. it( 'should output inline style (4 values defined)', () => {
  87. styles.setTo( 'margin:1px .34cm 90.1rem thick;' );
  88. expect( styles.toString() ).to.equal( 'margin:1px .34cm 90.1rem thick;' );
  89. expect( styles.getAsString( 'margin' ) ).to.equal( '1px .34cm 90.1rem thick' );
  90. expect( styles.getAsString( 'margin-top' ) ).to.equal( '1px' );
  91. expect( styles.getAsString( 'margin-right' ) ).to.equal( '.34cm' );
  92. expect( styles.getAsString( 'margin-bottom' ) ).to.equal( '90.1rem' );
  93. expect( styles.getAsString( 'margin-left' ) ).to.equal( 'thick' );
  94. } );
  95. it( 'should output inline style (4 values defined, only last different)', () => {
  96. styles.setTo( 'margin:1px 1px 1px thick;' );
  97. expect( styles.toString() ).to.equal( 'margin:1px 1px 1px thick;' );
  98. expect( styles.getAsString( 'margin' ) ).to.equal( '1px 1px 1px thick' );
  99. expect( styles.getAsString( 'margin-top' ) ).to.equal( '1px' );
  100. expect( styles.getAsString( 'margin-right' ) ).to.equal( '1px' );
  101. expect( styles.getAsString( 'margin-bottom' ) ).to.equal( '1px' );
  102. expect( styles.getAsString( 'margin-left' ) ).to.equal( 'thick' );
  103. } );
  104. describe( 'margin-*', () => {
  105. it( 'should set proper margin', () => {
  106. styles.setTo( 'margin-top:1px;' );
  107. expect( styles.getNormalized( 'margin' ) ).to.deep.equal( { top: '1px' } );
  108. expect( styles.getNormalized( 'margin-top' ) ).to.equal( '1px' );
  109. } );
  110. it( 'should merge margin with margin shorthand', () => {
  111. styles.setTo( 'margin: 2em;margin-top:1px;' );
  112. expect( styles.getNormalized( 'margin' ) ).to.deep.equal( {
  113. top: '1px',
  114. right: '2em',
  115. bottom: '2em',
  116. left: '2em'
  117. } );
  118. expect( styles.getNormalized( 'margin-top' ) ).to.equal( '1px' );
  119. expect( styles.getNormalized( 'margin-right' ) ).to.equal( '2em' );
  120. expect( styles.getNormalized( 'margin-bottom' ) ).to.equal( '2em' );
  121. expect( styles.getNormalized( 'margin-left' ) ).to.equal( '2em' );
  122. } );
  123. it( 'should output margin-top', () => {
  124. styles.setTo( 'margin-top:1px;' );
  125. expect( styles.toString() ).to.equal( 'margin-top:1px;' );
  126. expect( styles.getAsString( 'margin-top' ) ).to.equal( '1px' );
  127. } );
  128. it( 'should output margin-right', () => {
  129. styles.setTo( 'margin-right:1px;' );
  130. expect( styles.toString() ).to.equal( 'margin-right:1px;' );
  131. expect( styles.getAsString( 'margin-right' ) ).to.equal( '1px' );
  132. } );
  133. it( 'should output margin-bottom', () => {
  134. styles.setTo( 'margin-bottom:1px;' );
  135. expect( styles.toString() ).to.equal( 'margin-bottom:1px;' );
  136. expect( styles.getAsString( 'margin-bottom' ) ).to.equal( '1px' );
  137. } );
  138. it( 'should output margin-left', () => {
  139. styles.setTo( 'margin-left:1px;' );
  140. expect( styles.toString() ).to.equal( 'margin-left:1px;' );
  141. expect( styles.getAsString( 'margin-left' ) ).to.equal( '1px' );
  142. } );
  143. } );
  144. } );