border.js 20 KB

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