8
0

border.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667
  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 { addBorderRules } from '../../../src/view/styles/border';
  7. describe( 'Border styles normalization', () => {
  8. let styles;
  9. beforeEach( () => {
  10. const stylesProcessor = new StylesProcessor();
  11. addBorderRules( stylesProcessor );
  12. styles = new StylesMap( stylesProcessor );
  13. } );
  14. it( 'should parse border shorthand', () => {
  15. styles.setTo( '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.setTo( '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.setTo( '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.setTo( '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.setTo( 'border:1px solid blue;' );
  52. expect( styles.toString() ).to.equal(
  53. 'border-bottom:1px solid blue;' +
  54. 'border-left:1px solid blue;' +
  55. 'border-right:1px solid blue;' +
  56. 'border-top:1px solid blue;'
  57. );
  58. expect( styles.getAsString( 'border-color' ) ).to.equal( 'blue' );
  59. expect( styles.getAsString( 'border-style' ) ).to.equal( 'solid' );
  60. expect( styles.getAsString( 'border-width' ) ).to.equal( '1px' );
  61. } );
  62. it( 'should output only defined inline styles', () => {
  63. styles.set( 'border-color', { top: 'blue' } );
  64. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  65. color: { top: 'blue' }
  66. } );
  67. expect( styles.toString( 'border' ) ).to.equal( 'border-top:blue;' );
  68. expect( styles.has( 'border-top-color' ) ).to.be.true;
  69. expect( styles.getAsString( 'border-top-color' ) ).to.equal( 'blue' );
  70. } );
  71. it( 'should output inline shorthand rules #2', () => {
  72. styles.setTo( 'border:1px solid blue;border-left:#665511 dashed 2.7em;border-top:7px dotted #ccc;' );
  73. expect( styles.toString() ).to.equal(
  74. 'border-bottom:1px solid blue;' +
  75. 'border-left:2.7em dashed #665511;' +
  76. 'border-right:1px solid blue;' +
  77. 'border-top:7px dotted #ccc;'
  78. );
  79. expect( styles.getAsString( 'border' ) ).to.be.undefined;
  80. expect( styles.getAsString( 'border-color' ) ).to.equal( '#ccc blue blue #665511' );
  81. expect( styles.getAsString( 'border-style' ) ).to.equal( 'dotted solid solid dashed' );
  82. expect( styles.getAsString( 'border-width' ) ).to.equal( '7px 1px 1px 2.7em' );
  83. } );
  84. it( 'should parse border + border-position(only color defined)', () => {
  85. styles.setTo( 'border:1px solid blue;border-left:#665511;' );
  86. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  87. color: { top: 'blue', right: 'blue', bottom: 'blue', left: '#665511' },
  88. style: { top: 'solid', right: 'solid', bottom: 'solid', left: 'solid' },
  89. width: { top: '1px', right: '1px', bottom: '1px', left: '1px' }
  90. } );
  91. } );
  92. it( 'should parse border + border-position(only style defined)', () => {
  93. styles.setTo( 'border:1px solid blue;border-left:ridge;' );
  94. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  95. color: { top: 'blue', right: 'blue', bottom: 'blue', left: 'blue' },
  96. style: { top: 'solid', right: 'solid', bottom: 'solid', left: 'ridge' },
  97. width: { top: '1px', right: '1px', bottom: '1px', left: '1px' }
  98. } );
  99. } );
  100. it( 'should parse border + border-position(only width defined)', () => {
  101. styles.setTo( 'border:1px solid blue;border-left:1337px' );
  102. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  103. color: { top: 'blue', right: 'blue', bottom: 'blue', left: 'blue' },
  104. style: { top: 'solid', right: 'solid', bottom: 'solid', left: 'solid' },
  105. width: { top: '1px', right: '1px', bottom: '1px', left: '1337px' }
  106. } );
  107. } );
  108. it( 'should merge rules on insert other shorthand', () => {
  109. styles.setTo( 'border:1px solid blue;' );
  110. styles.set( 'border-left', '#665511 dashed 2.7em' );
  111. styles.set( 'border-top', '7px dotted #ccc' );
  112. expect( styles.toString() ).to.equal(
  113. 'border-bottom:1px solid blue;' +
  114. 'border-left:2.7em dashed #665511;' +
  115. 'border-right:1px solid blue;' +
  116. 'border-top:7px dotted #ccc;'
  117. );
  118. expect( styles.getAsString( 'border' ) ).to.be.undefined;
  119. expect( styles.getAsString( 'border-color' ) ).to.equal( '#ccc blue blue #665511' );
  120. expect( styles.getAsString( 'border-style' ) ).to.equal( 'dotted solid solid dashed' );
  121. expect( styles.getAsString( 'border-width' ) ).to.equal( '7px 1px 1px 2.7em' );
  122. } );
  123. it( 'should output single values if one shorthand is removed', () => {
  124. styles.setTo( 'border:1px solid blue;' );
  125. styles.remove( 'border-color' );
  126. expect( styles.toString() ).to.equal(
  127. 'border-bottom:1px solid;' +
  128. 'border-left:1px solid;' +
  129. 'border-right:1px solid;' +
  130. 'border-top:1px solid;'
  131. );
  132. expect( styles.getAsString( 'border' ) ).to.be.undefined;
  133. expect( styles.getAsString( 'border-color' ) ).to.be.undefined;
  134. expect( styles.getAsString( 'border-style' ) ).to.equal( 'solid' );
  135. expect( styles.getAsString( 'border-width' ) ).to.equal( '1px' );
  136. expect( styles.getAsString( 'border-top' ) ).to.equal( '1px solid' );
  137. expect( styles.getAsString( 'border-right' ) ).to.equal( '1px solid' );
  138. expect( styles.getAsString( 'border-bottom' ) ).to.equal( '1px solid' );
  139. expect( styles.getAsString( 'border-left' ) ).to.equal( '1px solid' );
  140. } );
  141. it( 'should output border with only style shorthand (style)', () => {
  142. styles.setTo( 'border:solid;' );
  143. expect( styles.toString() ).to.equal(
  144. 'border-bottom:solid;' +
  145. 'border-left:solid;' +
  146. 'border-right:solid;' +
  147. 'border-top:solid;'
  148. );
  149. expect( styles.getAsString( 'border' ) ).to.be.undefined;
  150. expect( styles.getAsString( 'border-color' ) ).to.be.undefined;
  151. expect( styles.getAsString( 'border-style' ) ).to.equal( 'solid' );
  152. expect( styles.getAsString( 'border-width' ) ).to.be.undefined;
  153. expect( styles.getAsString( 'border-top' ) ).to.equal( 'solid' );
  154. expect( styles.getAsString( 'border-right' ) ).to.equal( 'solid' );
  155. expect( styles.getAsString( 'border-bottom' ) ).to.equal( 'solid' );
  156. expect( styles.getAsString( 'border-left' ) ).to.equal( 'solid' );
  157. } );
  158. it( 'should output border with only style shorthand (color)', () => {
  159. styles.setTo( 'border:#f00;' );
  160. expect( styles.toString() ).to.equal(
  161. 'border-bottom:#f00;' +
  162. 'border-left:#f00;' +
  163. 'border-right:#f00;' +
  164. 'border-top:#f00;'
  165. );
  166. expect( styles.getAsString( 'border' ) ).to.be.undefined;
  167. expect( styles.getAsString( 'border-color' ) ).to.equal( '#f00' );
  168. expect( styles.getAsString( 'border-style' ) ).to.be.undefined;
  169. expect( styles.getAsString( 'border-width' ) ).to.be.undefined;
  170. expect( styles.getAsString( 'border-top' ) ).to.equal( '#f00' );
  171. expect( styles.getAsString( 'border-right' ) ).to.equal( '#f00' );
  172. expect( styles.getAsString( 'border-bottom' ) ).to.equal( '#f00' );
  173. expect( styles.getAsString( 'border-left' ) ).to.equal( '#f00' );
  174. } );
  175. it( 'should output border with only style shorthand (width)', () => {
  176. styles.setTo( 'border:1px;' );
  177. expect( styles.toString() ).to.equal(
  178. 'border-bottom:1px;' +
  179. 'border-left:1px;' +
  180. 'border-right:1px;' +
  181. 'border-top:1px;'
  182. );
  183. expect( styles.getAsString( 'border' ) ).to.be.undefined;
  184. expect( styles.getAsString( 'border-color' ) ).to.be.undefined;
  185. expect( styles.getAsString( 'border-style' ) ).to.be.undefined;
  186. expect( styles.getAsString( 'border-width' ) ).to.equal( '1px' );
  187. expect( styles.getAsString( 'border-top' ) ).to.equal( '1px' );
  188. expect( styles.getAsString( 'border-right' ) ).to.equal( '1px' );
  189. expect( styles.getAsString( 'border-bottom' ) ).to.equal( '1px' );
  190. expect( styles.getAsString( 'border-left' ) ).to.equal( '1px' );
  191. } );
  192. it( 'should properly remove border properties one by one', () => {
  193. styles.setTo( 'border:1px solid blue;' );
  194. expect( styles.toString() ).to.equal(
  195. 'border-bottom:1px solid blue;' +
  196. 'border-left:1px solid blue;' +
  197. 'border-right:1px solid blue;' +
  198. 'border-top:1px solid blue;'
  199. );
  200. styles.remove( 'border-color' );
  201. expect( styles.toString() ).to.equal(
  202. 'border-bottom:1px solid;' +
  203. 'border-left:1px solid;' +
  204. 'border-right:1px solid;' +
  205. 'border-top:1px solid;'
  206. );
  207. styles.remove( 'border-style' );
  208. expect( styles.toString() ).to.equal(
  209. 'border-bottom:1px;' +
  210. 'border-left:1px;' +
  211. 'border-right:1px;' +
  212. 'border-top:1px;'
  213. );
  214. styles.remove( 'border-width' );
  215. expect( styles.isEmpty ).to.be.true;
  216. expect( styles.toString() ).to.equal( '' );
  217. } );
  218. describe( 'normalized values getters', () => {
  219. it( 'should output border-*-color', () => {
  220. styles.setTo( 'border:1px solid #f00;' );
  221. [ 'top', 'right', 'bottom', 'left' ].forEach( position => {
  222. expect( styles.getNormalized( `border-${ position }-color` ) ).to.equal( '#f00' );
  223. } );
  224. } );
  225. it( 'should output border-*-width', () => {
  226. styles.setTo( 'border:1px solid #f00;' );
  227. [ 'top', 'right', 'bottom', 'left' ].forEach( position => {
  228. expect( styles.getNormalized( `border-${ position }-width` ) ).to.equal( '1px' );
  229. } );
  230. } );
  231. it( 'should output border-*-style', () => {
  232. styles.setTo( 'border:1px solid #f00;' );
  233. [ 'top', 'right', 'bottom', 'left' ].forEach( position => {
  234. expect( styles.getNormalized( `border-${ position }-style` ) ).to.equal( 'solid' );
  235. } );
  236. } );
  237. } );
  238. describe( 'border reducers', () => {
  239. it( 'should output border-top', () => {
  240. styles.setTo( 'border:1px solid #f00' );
  241. expect( styles.getAsString( 'border-top' ) ).to.equal( '1px solid #f00' );
  242. } );
  243. it( 'should output border-right', () => {
  244. styles.setTo( 'border:1px solid #f00' );
  245. expect( styles.getAsString( 'border-right' ) ).to.equal( '1px solid #f00' );
  246. } );
  247. it( 'should output border-bottom', () => {
  248. styles.setTo( 'border:1px solid #f00' );
  249. expect( styles.getAsString( 'border-bottom' ) ).to.equal( '1px solid #f00' );
  250. } );
  251. it( 'should output border-left', () => {
  252. styles.setTo( 'border:1px solid #f00' );
  253. expect( styles.getAsString( 'border-left' ) ).to.equal( '1px solid #f00' );
  254. } );
  255. } );
  256. describe( 'border-color', () => {
  257. it( 'should set all border colors (1 value defined)', () => {
  258. styles.setTo( 'border-color:cyan;' );
  259. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  260. color: {
  261. top: 'cyan',
  262. right: 'cyan',
  263. bottom: 'cyan',
  264. left: 'cyan'
  265. }
  266. } );
  267. } );
  268. it( 'should set all border colors (2 values defined)', () => {
  269. styles.setTo( 'border-color:cyan magenta;' );
  270. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  271. color: {
  272. top: 'cyan',
  273. right: 'magenta',
  274. bottom: 'cyan',
  275. left: 'magenta'
  276. }
  277. } );
  278. } );
  279. it( 'should set all border colors (3 values defined)', () => {
  280. styles.setTo( 'border-color:cyan magenta pink;' );
  281. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  282. color: {
  283. top: 'cyan',
  284. right: 'magenta',
  285. bottom: 'pink',
  286. left: 'magenta'
  287. }
  288. } );
  289. } );
  290. it( 'should set all border colors (4 values defined)', () => {
  291. styles.setTo( 'border-color:cyan magenta pink beige;' );
  292. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  293. color: {
  294. top: 'cyan',
  295. right: 'magenta',
  296. bottom: 'pink',
  297. left: 'beige'
  298. }
  299. } );
  300. } );
  301. it( 'should merge with border shorthand', () => {
  302. styles.setTo( 'border:1px solid blue;border-color:cyan black;' );
  303. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  304. color: { top: 'cyan', right: 'black', bottom: 'cyan', left: 'black' },
  305. style: { top: 'solid', right: 'solid', bottom: 'solid', left: 'solid' },
  306. width: { top: '1px', right: '1px', bottom: '1px', left: '1px' }
  307. } );
  308. } );
  309. it( 'should parse #RGB color value', () => {
  310. styles.setTo( 'border:#f00;' );
  311. expect( styles.getNormalized( 'border-color' ) ).to.deep.equal( {
  312. top: '#f00',
  313. right: '#f00',
  314. bottom: '#f00',
  315. left: '#f00'
  316. } );
  317. } );
  318. it( 'should parse #RGBA color value', () => {
  319. styles.setTo( 'border:#f00A;' );
  320. expect( styles.getNormalized( 'border-color' ) ).to.deep.equal( {
  321. top: '#f00A',
  322. right: '#f00A',
  323. bottom: '#f00A',
  324. left: '#f00A'
  325. } );
  326. } );
  327. it( 'should parse rgb() color value', () => {
  328. styles.setTo( 'border:rgb(0, 30%,35);' );
  329. expect( styles.getNormalized( 'border-color' ) ).to.deep.equal( {
  330. top: 'rgb(0, 30%, 35)',
  331. right: 'rgb(0, 30%, 35)',
  332. bottom: 'rgb(0, 30%, 35)',
  333. left: 'rgb(0, 30%, 35)'
  334. } );
  335. } );
  336. it( 'should parse hsl() color value', () => {
  337. styles.setTo( 'border:hsl(0, 100%, 50%);' );
  338. expect( styles.getNormalized( 'border-color' ) ).to.deep.equal( {
  339. top: 'hsl(0, 100%, 50%)',
  340. right: 'hsl(0, 100%, 50%)',
  341. bottom: 'hsl(0, 100%, 50%)',
  342. left: 'hsl(0, 100%, 50%)'
  343. } );
  344. } );
  345. } );
  346. describe( 'border-style', () => {
  347. it( 'should set all border styles (1 value defined)', () => {
  348. styles.setTo( 'border-style:solid;' );
  349. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  350. style: {
  351. top: 'solid',
  352. right: 'solid',
  353. bottom: 'solid',
  354. left: 'solid'
  355. }
  356. } );
  357. } );
  358. it( 'should set all border styles (2 values defined)', () => {
  359. styles.setTo( 'border-style:solid dotted;' );
  360. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  361. style: {
  362. top: 'solid',
  363. right: 'dotted',
  364. bottom: 'solid',
  365. left: 'dotted'
  366. }
  367. } );
  368. } );
  369. it( 'should set all border styles (3 values defined)', () => {
  370. styles.setTo( 'border-style:solid dotted dashed;' );
  371. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  372. style: {
  373. top: 'solid',
  374. right: 'dotted',
  375. bottom: 'dashed',
  376. left: 'dotted'
  377. }
  378. } );
  379. } );
  380. it( 'should set all border styles (4 values defined)', () => {
  381. styles.setTo( 'border-style:solid dotted dashed ridge;' );
  382. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  383. style: {
  384. top: 'solid',
  385. right: 'dotted',
  386. bottom: 'dashed',
  387. left: 'ridge'
  388. }
  389. } );
  390. } );
  391. it( 'should parse none value', () => {
  392. styles.setTo( 'border:none;' );
  393. expect( styles.getNormalized( 'border-style' ) ).to.deep.equal( {
  394. top: 'none',
  395. right: 'none',
  396. bottom: 'none',
  397. left: 'none'
  398. } );
  399. } );
  400. it( 'should parse line-style value', () => {
  401. styles.setTo( 'border:solid;' );
  402. expect( styles.getNormalized( 'border-style' ) ).to.deep.equal( {
  403. top: 'solid',
  404. right: 'solid',
  405. bottom: 'solid',
  406. left: 'solid'
  407. } );
  408. } );
  409. it( 'should not parse non line-style value', () => {
  410. styles.setTo( 'border:blue' );
  411. expect( styles.getNormalized( 'border-style' ) ).to.deep.equal( {
  412. top: undefined,
  413. right: undefined,
  414. bottom: undefined,
  415. left: undefined
  416. } );
  417. } );
  418. } );
  419. describe( 'border-width', () => {
  420. it( 'should set all border widths (1 value defined)', () => {
  421. styles.setTo( 'border-width:1px;' );
  422. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  423. width: {
  424. top: '1px',
  425. right: '1px',
  426. bottom: '1px',
  427. left: '1px'
  428. }
  429. } );
  430. } );
  431. it( 'should set all border widths (2 values defined)', () => {
  432. styles.setTo( 'border-width:1px .34cm;' );
  433. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  434. width: {
  435. top: '1px',
  436. right: '.34cm',
  437. bottom: '1px',
  438. left: '.34cm'
  439. }
  440. } );
  441. } );
  442. it( 'should set all border widths (3 values defined)', () => {
  443. styles.setTo( 'border-width:1px .34cm 90.1rem;' );
  444. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  445. width: {
  446. top: '1px',
  447. right: '.34cm',
  448. bottom: '90.1rem',
  449. left: '.34cm'
  450. }
  451. } );
  452. } );
  453. it( 'should set all border widths (4 values defined)', () => {
  454. styles.setTo( 'border-width:1px .34cm 90.1rem thick;' );
  455. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  456. width: {
  457. top: '1px',
  458. right: '.34cm',
  459. bottom: '90.1rem',
  460. left: 'thick'
  461. }
  462. } );
  463. } );
  464. it( 'should parse px value', () => {
  465. styles.setTo( 'border:1px;' );
  466. expect( styles.getNormalized( 'border-width' ) ).to.deep.equal( {
  467. top: '1px',
  468. right: '1px',
  469. bottom: '1px',
  470. left: '1px'
  471. } );
  472. } );
  473. it( 'should parse em value', () => {
  474. styles.setTo( 'border:1em;' );
  475. expect( styles.getNormalized( 'border-width' ) ).to.deep.equal( {
  476. top: '1em',
  477. right: '1em',
  478. bottom: '1em',
  479. left: '1em'
  480. } );
  481. } );
  482. it( 'should parse thin value', () => {
  483. styles.setTo( 'border:thin' );
  484. expect( styles.getNormalized( 'border-width' ) ).to.deep.equal( {
  485. top: 'thin',
  486. right: 'thin',
  487. bottom: 'thin',
  488. left: 'thin'
  489. } );
  490. } );
  491. it( 'should parse medium value', () => {
  492. styles.setTo( 'border:medium' );
  493. expect( styles.getNormalized( 'border-width' ) ).to.deep.equal( {
  494. top: 'medium',
  495. right: 'medium',
  496. bottom: 'medium',
  497. left: 'medium'
  498. } );
  499. } );
  500. it( 'should parse thick value', () => {
  501. styles.setTo( 'border:thick' );
  502. expect( styles.getNormalized( 'border-width' ) ).to.deep.equal( {
  503. top: 'thick',
  504. right: 'thick',
  505. bottom: 'thick',
  506. left: 'thick'
  507. } );
  508. } );
  509. } );
  510. describe( 'border-* position', () => {
  511. it( 'should output all positions', () => {
  512. styles.setTo(
  513. 'border-top:none;' +
  514. 'border-left:none;' +
  515. 'border-bottom:dotted #FFC000 3.0pt;' +
  516. 'border-right:dotted #FFC000 3.0pt;'
  517. );
  518. expect( styles.toString() ).to.equal(
  519. 'border-bottom:3.0pt dotted #FFC000;' +
  520. 'border-left:none;' +
  521. 'border-right:3.0pt dotted #FFC000;' +
  522. 'border-top:none;'
  523. );
  524. expect( styles.getAsString( 'border-top' ) ).to.equal( 'none' );
  525. expect( styles.getAsString( 'border-right' ) ).to.equal( '3.0pt dotted #FFC000' );
  526. expect( styles.getAsString( 'border-bottom' ) ).to.equal( '3.0pt dotted #FFC000' );
  527. expect( styles.getAsString( 'border-left' ) ).to.equal( 'none' );
  528. } );
  529. it( 'should output nothing if no border style defined', () => {
  530. styles.setTo( 'color:blue;' );
  531. expect( styles.toString() ).to.equal( 'color:blue;' );
  532. expect( styles.getAsString( 'border-top' ) ).to.be.undefined;
  533. expect( styles.getAsString( 'border-right' ) ).to.be.undefined;
  534. expect( styles.getAsString( 'border-bottom' ) ).to.be.undefined;
  535. expect( styles.getAsString( 'border-left' ) ).to.be.undefined;
  536. } );
  537. } );
  538. describe( 'getStyleNames() - border', () => {
  539. it( 'should set all border colors (1 value defined)', () => {
  540. styles.setTo( 'border-color: deeppink deepskyblue;' +
  541. 'border-style: solid;' +
  542. 'border-width: 1px;' +
  543. 'border-bottom-width: 2px;' +
  544. 'border-right-style: dotted;' );
  545. expect( styles.getStyleNames() ).to.deep.equal( [
  546. 'border-top',
  547. 'border-right',
  548. 'border-bottom',
  549. 'border-left'
  550. ] );
  551. } );
  552. } );
  553. } );