borderstyles.js 14 KB

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