border.js 20 KB

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