borderstyles.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409
  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 Styles, { StylesConverter } from '../../../src/view/styles';
  6. import BorderStyles from '../../../src/view/styles/borderstyles';
  7. describe( 'Border styles normalization', () => {
  8. let styles;
  9. beforeEach( () => {
  10. const converter = new StylesConverter();
  11. BorderStyles.attach( converter );
  12. styles = new Styles( converter );
  13. } );
  14. it( 'should parse border shorthand', () => {
  15. styles.setStyle( 'border:1px solid blue;' );
  16. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  17. color: { top: 'blue', right: 'blue', bottom: 'blue', left: 'blue' },
  18. style: { top: 'solid', right: 'solid', bottom: 'solid', left: 'solid' },
  19. width: { top: '1px', right: '1px', bottom: '1px', left: '1px' }
  20. } );
  21. } );
  22. it( 'should parse border shorthand with only style', () => {
  23. styles.setStyle( 'border:solid;' );
  24. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  25. color: { top: undefined, right: undefined, bottom: undefined, left: undefined },
  26. style: { top: 'solid', right: 'solid', bottom: 'solid', left: 'solid' },
  27. width: { top: undefined, right: undefined, bottom: undefined, left: undefined }
  28. } );
  29. } );
  30. it( 'should parse border shorthand with other shorthands', () => {
  31. styles.setStyle( 'border:1px solid blue;border-left:#665511 dashed 2.7em;border-top:7px dotted #ccc;' );
  32. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  33. color: { top: '#ccc', right: 'blue', bottom: 'blue', left: '#665511' },
  34. style: { top: 'dotted', right: 'solid', bottom: 'solid', left: 'dashed' },
  35. width: { top: '7px', right: '1px', bottom: '1px', left: '2.7em' }
  36. } );
  37. } );
  38. it( 'should parse border longhand', () => {
  39. styles.setStyle( 'border-color: #f00 #ba2;' +
  40. 'border-style: solid;' +
  41. 'border-width: 1px;' +
  42. 'border-bottom-width: 2px;' +
  43. 'border-right-style: dotted;' );
  44. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  45. color: { top: '#f00', right: '#ba2', bottom: '#f00', left: '#ba2' },
  46. style: { top: 'solid', right: 'dotted', bottom: 'solid', left: 'solid' },
  47. width: { top: '1px', right: '1px', bottom: '2px', left: '1px' }
  48. } );
  49. } );
  50. it( 'should output inline shorthand rules #1', () => {
  51. styles.setStyle( 'border:1px solid blue;' );
  52. expect( styles.getInlineStyle() ).to.equal(
  53. 'border-top:1px solid blue;border-right:1px solid blue;border-bottom:1px solid blue;border-left:1px solid blue;'
  54. );
  55. expect( styles.getInlineProperty( 'border-color' ) ).to.equal( 'blue' );
  56. expect( styles.getInlineProperty( 'border-style' ) ).to.equal( 'solid' );
  57. expect( styles.getInlineProperty( 'border-width' ) ).to.equal( '1px' );
  58. } );
  59. it( 'should output only defined inline styles', () => {
  60. styles.insertProperty( 'border-color', { top: 'blue' } );
  61. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  62. color: { top: 'blue' }
  63. } );
  64. expect( styles.getInlineStyle( 'border' ) ).to.equal( 'border-top:blue;' );
  65. // TODO: expect( styles.hasProperty( 'border-top-color' ) ).to.be.true;
  66. // expect( styles.getInlineProperty( 'border-top-color' ) ).to.equal( 'blue' );
  67. } );
  68. it( 'should output inline shorthand rules #2', () => {
  69. styles.setStyle( 'border:1px solid blue;border-left:#665511 dashed 2.7em;border-top:7px dotted #ccc;' );
  70. expect( styles.getInlineStyle() ).to.equal(
  71. 'border-top:7px dotted #ccc;border-right:1px solid blue;border-bottom:1px solid blue;border-left:2.7em dashed #665511;'
  72. );
  73. expect( styles.getInlineProperty( 'border' ) ).to.be.undefined;
  74. expect( styles.getInlineProperty( 'border-color' ) ).to.equal( '#ccc blue blue #665511' );
  75. expect( styles.getInlineProperty( 'border-style' ) ).to.equal( 'dotted solid solid dashed' );
  76. expect( styles.getInlineProperty( 'border-width' ) ).to.equal( '7px 1px 1px 2.7em' );
  77. } );
  78. it( 'should parse border + border-position(only color defined)', () => {
  79. styles.setStyle( 'border:1px solid blue;border-left:#665511;' );
  80. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  81. color: { top: 'blue', right: 'blue', bottom: 'blue', left: '#665511' },
  82. style: { top: 'solid', right: 'solid', bottom: 'solid', left: 'solid' },
  83. width: { top: '1px', right: '1px', bottom: '1px', left: '1px' }
  84. } );
  85. } );
  86. it( 'should parse border + border-position(only style defined)', () => {
  87. styles.setStyle( 'border:1px solid blue;border-left:ridge;' );
  88. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  89. color: { top: 'blue', right: 'blue', bottom: 'blue', left: 'blue' },
  90. style: { top: 'solid', right: 'solid', bottom: 'solid', left: 'ridge' },
  91. width: { top: '1px', right: '1px', bottom: '1px', left: '1px' }
  92. } );
  93. } );
  94. it( 'should parse border + border-position(only width defined)', () => {
  95. styles.setStyle( 'border:1px solid blue;border-left:1337px' );
  96. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  97. color: { top: 'blue', right: 'blue', bottom: 'blue', left: 'blue' },
  98. style: { top: 'solid', right: 'solid', bottom: 'solid', left: 'solid' },
  99. width: { top: '1px', right: '1px', bottom: '1px', left: '1337px' }
  100. } );
  101. } );
  102. it( 'should merge rules on insert other shorthand', () => {
  103. styles.setStyle( 'border:1px solid blue;' );
  104. styles.insertProperty( 'border-left', '#665511 dashed 2.7em' );
  105. styles.insertProperty( 'border-top', '7px dotted #ccc' );
  106. expect( styles.getInlineStyle() ).to.equal(
  107. 'border-top:7px dotted #ccc;border-right:1px solid blue;border-bottom:1px solid blue;border-left:2.7em dashed #665511;'
  108. );
  109. expect( styles.getInlineProperty( 'border' ) ).to.be.undefined;
  110. expect( styles.getInlineProperty( 'border-color' ) ).to.equal( '#ccc blue blue #665511' );
  111. expect( styles.getInlineProperty( 'border-style' ) ).to.equal( 'dotted solid solid dashed' );
  112. expect( styles.getInlineProperty( 'border-width' ) ).to.equal( '7px 1px 1px 2.7em' );
  113. } );
  114. it( 'should output', () => {
  115. styles.setStyle( 'border:1px solid blue;' );
  116. styles.removeProperty( 'border-color' );
  117. expect( styles.getInlineStyle() ).to.equal(
  118. 'border-top:1px solid;border-right:1px solid;border-bottom:1px solid;border-left:1px solid;'
  119. );
  120. expect( styles.getInlineProperty( 'border' ) ).to.be.undefined;
  121. expect( styles.getInlineProperty( 'border-color' ) ).to.be.undefined;
  122. expect( styles.getInlineProperty( 'border-style' ) ).to.equal( 'solid' );
  123. expect( styles.getInlineProperty( 'border-width' ) ).to.equal( '1px' );
  124. expect( styles.getInlineProperty( 'border-top' ) ).to.equal( '1px solid' );
  125. expect( styles.getInlineProperty( 'border-right' ) ).to.equal( '1px solid' );
  126. expect( styles.getInlineProperty( 'border-bottom' ) ).to.equal( '1px solid' );
  127. expect( styles.getInlineProperty( 'border-left' ) ).to.equal( '1px solid' );
  128. } );
  129. it( 'should output border with only style shorthand (style)', () => {
  130. styles.setStyle( 'border:solid;' );
  131. expect( styles.getInlineStyle() ).to.equal( 'border-top:solid;border-right:solid;border-bottom:solid;border-left:solid;' );
  132. expect( styles.getInlineProperty( 'border' ) ).to.be.undefined;
  133. expect( styles.getInlineProperty( 'border-color' ) ).to.be.undefined;
  134. expect( styles.getInlineProperty( 'border-style' ) ).to.equal( 'solid' );
  135. expect( styles.getInlineProperty( 'border-width' ) ).to.be.undefined;
  136. expect( styles.getInlineProperty( 'border-top' ) ).to.equal( 'solid' );
  137. expect( styles.getInlineProperty( 'border-right' ) ).to.equal( 'solid' );
  138. expect( styles.getInlineProperty( 'border-bottom' ) ).to.equal( 'solid' );
  139. expect( styles.getInlineProperty( 'border-left' ) ).to.equal( 'solid' );
  140. } );
  141. it( 'should output border with only style shorthand (color)', () => {
  142. styles.setStyle( 'border:#f00;' );
  143. expect( styles.getInlineStyle() ).to.equal( 'border-top:#f00;border-right:#f00;border-bottom:#f00;border-left:#f00;' );
  144. expect( styles.getInlineProperty( 'border' ) ).to.be.undefined;
  145. expect( styles.getInlineProperty( 'border-color' ) ).to.equal( '#f00' );
  146. expect( styles.getInlineProperty( 'border-style' ) ).to.be.undefined;
  147. expect( styles.getInlineProperty( 'border-width' ) ).to.be.undefined;
  148. expect( styles.getInlineProperty( 'border-top' ) ).to.equal( '#f00' );
  149. expect( styles.getInlineProperty( 'border-right' ) ).to.equal( '#f00' );
  150. expect( styles.getInlineProperty( 'border-bottom' ) ).to.equal( '#f00' );
  151. expect( styles.getInlineProperty( 'border-left' ) ).to.equal( '#f00' );
  152. } );
  153. it( 'should output border with only style shorthand (width)', () => {
  154. styles.setStyle( 'border:1px;' );
  155. expect( styles.getInlineStyle() ).to.equal( 'border-top:1px;border-right:1px;border-bottom:1px;border-left:1px;' );
  156. expect( styles.getInlineProperty( 'border' ) ).to.be.undefined;
  157. expect( styles.getInlineProperty( 'border-color' ) ).to.be.undefined;
  158. expect( styles.getInlineProperty( 'border-style' ) ).to.be.undefined;
  159. expect( styles.getInlineProperty( 'border-width' ) ).to.equal( '1px' );
  160. expect( styles.getInlineProperty( 'border-top' ) ).to.equal( '1px' );
  161. expect( styles.getInlineProperty( 'border-right' ) ).to.equal( '1px' );
  162. expect( styles.getInlineProperty( 'border-bottom' ) ).to.equal( '1px' );
  163. expect( styles.getInlineProperty( 'border-left' ) ).to.equal( '1px' );
  164. } );
  165. describe( 'border-color', () => {
  166. it( 'should set all border colors (1 value defined)', () => {
  167. styles.setStyle( 'border-color:cyan;' );
  168. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  169. color: {
  170. top: 'cyan',
  171. right: 'cyan',
  172. bottom: 'cyan',
  173. left: 'cyan'
  174. }
  175. } );
  176. } );
  177. it( 'should set all border colors (2 values defined)', () => {
  178. styles.setStyle( 'border-color:cyan magenta;' );
  179. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  180. color: {
  181. top: 'cyan',
  182. right: 'magenta',
  183. bottom: 'cyan',
  184. left: 'magenta'
  185. }
  186. } );
  187. } );
  188. it( 'should set all border colors (3 values defined)', () => {
  189. styles.setStyle( 'border-color:cyan magenta pink;' );
  190. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  191. color: {
  192. top: 'cyan',
  193. right: 'magenta',
  194. bottom: 'pink',
  195. left: 'magenta'
  196. }
  197. } );
  198. } );
  199. it( 'should set all border colors (4 values defined)', () => {
  200. styles.setStyle( 'border-color:cyan magenta pink beige;' );
  201. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  202. color: {
  203. top: 'cyan',
  204. right: 'magenta',
  205. bottom: 'pink',
  206. left: 'beige'
  207. }
  208. } );
  209. } );
  210. it( 'should merge with border shorthand', () => {
  211. styles.setStyle( 'border:1px solid blue;border-color:cyan black;' );
  212. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  213. color: { top: 'cyan', right: 'black', bottom: 'cyan', left: 'black' },
  214. style: { top: 'solid', right: 'solid', bottom: 'solid', left: 'solid' },
  215. width: { top: '1px', right: '1px', bottom: '1px', left: '1px' }
  216. } );
  217. } );
  218. } );
  219. describe( 'border-style', () => {
  220. it( 'should set all border styles (1 value defined)', () => {
  221. styles.setStyle( 'border-style:solid;' );
  222. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  223. style: {
  224. top: 'solid',
  225. right: 'solid',
  226. bottom: 'solid',
  227. left: 'solid'
  228. }
  229. } );
  230. } );
  231. it( 'should set all border styles (2 values defined)', () => {
  232. styles.setStyle( 'border-style:solid dotted;' );
  233. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  234. style: {
  235. top: 'solid',
  236. right: 'dotted',
  237. bottom: 'solid',
  238. left: 'dotted'
  239. }
  240. } );
  241. } );
  242. it( 'should set all border styles (3 values defined)', () => {
  243. styles.setStyle( 'border-style:solid dotted dashed;' );
  244. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  245. style: {
  246. top: 'solid',
  247. right: 'dotted',
  248. bottom: 'dashed',
  249. left: 'dotted'
  250. }
  251. } );
  252. } );
  253. it( 'should set all border styles (4 values defined)', () => {
  254. styles.setStyle( 'border-style:solid dotted dashed ridge;' );
  255. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  256. style: {
  257. top: 'solid',
  258. right: 'dotted',
  259. bottom: 'dashed',
  260. left: 'ridge'
  261. }
  262. } );
  263. } );
  264. } );
  265. describe( 'border-width', () => {
  266. it( 'should set all border widths (1 value defined)', () => {
  267. styles.setStyle( 'border-width:1px;' );
  268. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  269. width: {
  270. top: '1px',
  271. right: '1px',
  272. bottom: '1px',
  273. left: '1px'
  274. }
  275. } );
  276. } );
  277. it( 'should set all border widths (2 values defined)', () => {
  278. styles.setStyle( 'border-width:1px .34cm;' );
  279. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  280. width: {
  281. top: '1px',
  282. right: '.34cm',
  283. bottom: '1px',
  284. left: '.34cm'
  285. }
  286. } );
  287. } );
  288. it( 'should set all border widths (3 values defined)', () => {
  289. styles.setStyle( 'border-width:1px .34cm 90.1rem;' );
  290. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  291. width: {
  292. top: '1px',
  293. right: '.34cm',
  294. bottom: '90.1rem',
  295. left: '.34cm'
  296. }
  297. } );
  298. } );
  299. it( 'should set all border widths (4 values defined)', () => {
  300. styles.setStyle( 'border-width:1px .34cm 90.1rem thick;' );
  301. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  302. width: {
  303. top: '1px',
  304. right: '.34cm',
  305. bottom: '90.1rem',
  306. left: 'thick'
  307. }
  308. } );
  309. } );
  310. } );
  311. describe( 'border-* position', () => {
  312. it( 'should output all positions', () => {
  313. styles.setStyle(
  314. 'border-top:none;' +
  315. 'border-left:none;' +
  316. 'border-bottom:dotted #FFC000 3.0pt;' +
  317. 'border-right:dotted #FFC000 3.0pt;'
  318. );
  319. expect( styles.getInlineStyle() ).to.equal(
  320. 'border-top:none;border-right:3.0pt dotted #FFC000;border-bottom:3.0pt dotted #FFC000;border-left:none;'
  321. );
  322. expect( styles.getInlineProperty( 'border-top' ) ).to.equal( 'none' );
  323. expect( styles.getInlineProperty( 'border-right' ) ).to.equal( '3.0pt dotted #FFC000' );
  324. expect( styles.getInlineProperty( 'border-bottom' ) ).to.equal( '3.0pt dotted #FFC000' );
  325. expect( styles.getInlineProperty( 'border-left' ) ).to.equal( 'none' );
  326. } );
  327. } );
  328. describe( 'getStyleNames() - border', () => {
  329. it( 'should set all border colors (1 value defined)', () => {
  330. styles.setStyle( ' border-color: deeppink deepskyblue;\n' +
  331. ' border-style: solid;\n' +
  332. ' border-width: 1px;\n' +
  333. ' border-bottom-width: 2px;\n' +
  334. ' border-right-style: dotted;' );
  335. expect( styles.getStyleNames() ).to.deep.equal( [
  336. 'border-top',
  337. 'border-right',
  338. 'border-bottom',
  339. 'border-left'
  340. ] );
  341. } );
  342. } );
  343. } );