8
0

border.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637
  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. describe( 'normalized values getters', () => {
  196. it( 'should output border-*-color', () => {
  197. styles.setTo( 'border:1px solid #f00;' );
  198. [ 'top', 'right', 'bottom', 'left' ].forEach( position => {
  199. expect( styles.getNormalized( `border-${ position }-color` ) ).to.equal( '#f00' );
  200. } );
  201. } );
  202. it( 'should output border-*-width', () => {
  203. styles.setTo( 'border:1px solid #f00;' );
  204. [ 'top', 'right', 'bottom', 'left' ].forEach( position => {
  205. expect( styles.getNormalized( `border-${ position }-width` ) ).to.equal( '1px' );
  206. } );
  207. } );
  208. it( 'should output border-*-style', () => {
  209. styles.setTo( 'border:1px solid #f00;' );
  210. [ 'top', 'right', 'bottom', 'left' ].forEach( position => {
  211. expect( styles.getNormalized( `border-${ position }-style` ) ).to.equal( 'solid' );
  212. } );
  213. } );
  214. } );
  215. describe( 'border reducers', () => {
  216. it( 'should output border-top', () => {
  217. styles.setTo( 'border:1px solid #f00' );
  218. expect( styles.getAsString( 'border-top' ) ).to.equal( '1px solid #f00' );
  219. } );
  220. it( 'should output border-right', () => {
  221. styles.setTo( 'border:1px solid #f00' );
  222. expect( styles.getAsString( 'border-right' ) ).to.equal( '1px solid #f00' );
  223. } );
  224. it( 'should output border-bottom', () => {
  225. styles.setTo( 'border:1px solid #f00' );
  226. expect( styles.getAsString( 'border-bottom' ) ).to.equal( '1px solid #f00' );
  227. } );
  228. it( 'should output border-left', () => {
  229. styles.setTo( 'border:1px solid #f00' );
  230. expect( styles.getAsString( 'border-left' ) ).to.equal( '1px solid #f00' );
  231. } );
  232. } );
  233. describe( 'border-color', () => {
  234. it( 'should set all border colors (1 value defined)', () => {
  235. styles.setTo( 'border-color:cyan;' );
  236. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  237. color: {
  238. top: 'cyan',
  239. right: 'cyan',
  240. bottom: 'cyan',
  241. left: 'cyan'
  242. }
  243. } );
  244. } );
  245. it( 'should set all border colors (2 values defined)', () => {
  246. styles.setTo( 'border-color:cyan magenta;' );
  247. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  248. color: {
  249. top: 'cyan',
  250. right: 'magenta',
  251. bottom: 'cyan',
  252. left: 'magenta'
  253. }
  254. } );
  255. } );
  256. it( 'should set all border colors (3 values defined)', () => {
  257. styles.setTo( 'border-color:cyan magenta pink;' );
  258. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  259. color: {
  260. top: 'cyan',
  261. right: 'magenta',
  262. bottom: 'pink',
  263. left: 'magenta'
  264. }
  265. } );
  266. } );
  267. it( 'should set all border colors (4 values defined)', () => {
  268. styles.setTo( 'border-color:cyan magenta pink beige;' );
  269. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  270. color: {
  271. top: 'cyan',
  272. right: 'magenta',
  273. bottom: 'pink',
  274. left: 'beige'
  275. }
  276. } );
  277. } );
  278. it( 'should merge with border shorthand', () => {
  279. styles.setTo( 'border:1px solid blue;border-color:cyan black;' );
  280. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  281. color: { top: 'cyan', right: 'black', bottom: 'cyan', left: 'black' },
  282. style: { top: 'solid', right: 'solid', bottom: 'solid', left: 'solid' },
  283. width: { top: '1px', right: '1px', bottom: '1px', left: '1px' }
  284. } );
  285. } );
  286. it( 'should parse #RGB color value', () => {
  287. styles.setTo( 'border:#f00;' );
  288. expect( styles.getNormalized( 'border-color' ) ).to.deep.equal( {
  289. top: '#f00',
  290. right: '#f00',
  291. bottom: '#f00',
  292. left: '#f00'
  293. } );
  294. } );
  295. it( 'should parse #RGBA color value', () => {
  296. styles.setTo( 'border:#f00A;' );
  297. expect( styles.getNormalized( 'border-color' ) ).to.deep.equal( {
  298. top: '#f00A',
  299. right: '#f00A',
  300. bottom: '#f00A',
  301. left: '#f00A'
  302. } );
  303. } );
  304. it( 'should parse rgb() color value', () => {
  305. styles.setTo( 'border:rgb(0, 30%,35);' );
  306. expect( styles.getNormalized( 'border-color' ) ).to.deep.equal( {
  307. top: 'rgb(0, 30%, 35)',
  308. right: 'rgb(0, 30%, 35)',
  309. bottom: 'rgb(0, 30%, 35)',
  310. left: 'rgb(0, 30%, 35)'
  311. } );
  312. } );
  313. it( 'should parse hsl() color value', () => {
  314. styles.setTo( 'border:hsl(0, 100%, 50%);' );
  315. expect( styles.getNormalized( 'border-color' ) ).to.deep.equal( {
  316. top: 'hsl(0, 100%, 50%)',
  317. right: 'hsl(0, 100%, 50%)',
  318. bottom: 'hsl(0, 100%, 50%)',
  319. left: 'hsl(0, 100%, 50%)'
  320. } );
  321. } );
  322. } );
  323. describe( 'border-style', () => {
  324. it( 'should set all border styles (1 value defined)', () => {
  325. styles.setTo( 'border-style:solid;' );
  326. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  327. style: {
  328. top: 'solid',
  329. right: 'solid',
  330. bottom: 'solid',
  331. left: 'solid'
  332. }
  333. } );
  334. } );
  335. it( 'should set all border styles (2 values defined)', () => {
  336. styles.setTo( 'border-style:solid dotted;' );
  337. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  338. style: {
  339. top: 'solid',
  340. right: 'dotted',
  341. bottom: 'solid',
  342. left: 'dotted'
  343. }
  344. } );
  345. } );
  346. it( 'should set all border styles (3 values defined)', () => {
  347. styles.setTo( 'border-style:solid dotted dashed;' );
  348. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  349. style: {
  350. top: 'solid',
  351. right: 'dotted',
  352. bottom: 'dashed',
  353. left: 'dotted'
  354. }
  355. } );
  356. } );
  357. it( 'should set all border styles (4 values defined)', () => {
  358. styles.setTo( 'border-style:solid dotted dashed ridge;' );
  359. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  360. style: {
  361. top: 'solid',
  362. right: 'dotted',
  363. bottom: 'dashed',
  364. left: 'ridge'
  365. }
  366. } );
  367. } );
  368. it( 'should parse none value', () => {
  369. styles.setTo( 'border:none;' );
  370. expect( styles.getNormalized( 'border-style' ) ).to.deep.equal( {
  371. top: 'none',
  372. right: 'none',
  373. bottom: 'none',
  374. left: 'none'
  375. } );
  376. } );
  377. it( 'should parse line-style value', () => {
  378. styles.setTo( 'border:solid;' );
  379. expect( styles.getNormalized( 'border-style' ) ).to.deep.equal( {
  380. top: 'solid',
  381. right: 'solid',
  382. bottom: 'solid',
  383. left: 'solid'
  384. } );
  385. } );
  386. it( 'should not parse non line-style value', () => {
  387. styles.setTo( 'border:blue' );
  388. expect( styles.getNormalized( 'border-style' ) ).to.deep.equal( {
  389. top: undefined,
  390. right: undefined,
  391. bottom: undefined,
  392. left: undefined
  393. } );
  394. } );
  395. } );
  396. describe( 'border-width', () => {
  397. it( 'should set all border widths (1 value defined)', () => {
  398. styles.setTo( 'border-width:1px;' );
  399. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  400. width: {
  401. top: '1px',
  402. right: '1px',
  403. bottom: '1px',
  404. left: '1px'
  405. }
  406. } );
  407. } );
  408. it( 'should set all border widths (2 values defined)', () => {
  409. styles.setTo( 'border-width:1px .34cm;' );
  410. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  411. width: {
  412. top: '1px',
  413. right: '.34cm',
  414. bottom: '1px',
  415. left: '.34cm'
  416. }
  417. } );
  418. } );
  419. it( 'should set all border widths (3 values defined)', () => {
  420. styles.setTo( 'border-width:1px .34cm 90.1rem;' );
  421. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  422. width: {
  423. top: '1px',
  424. right: '.34cm',
  425. bottom: '90.1rem',
  426. left: '.34cm'
  427. }
  428. } );
  429. } );
  430. it( 'should set all border widths (4 values defined)', () => {
  431. styles.setTo( 'border-width:1px .34cm 90.1rem thick;' );
  432. expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
  433. width: {
  434. top: '1px',
  435. right: '.34cm',
  436. bottom: '90.1rem',
  437. left: 'thick'
  438. }
  439. } );
  440. } );
  441. it( 'should parse px value', () => {
  442. styles.setTo( 'border:1px;' );
  443. expect( styles.getNormalized( 'border-width' ) ).to.deep.equal( {
  444. top: '1px',
  445. right: '1px',
  446. bottom: '1px',
  447. left: '1px'
  448. } );
  449. } );
  450. it( 'should parse em value', () => {
  451. styles.setTo( 'border:1em;' );
  452. expect( styles.getNormalized( 'border-width' ) ).to.deep.equal( {
  453. top: '1em',
  454. right: '1em',
  455. bottom: '1em',
  456. left: '1em'
  457. } );
  458. } );
  459. it( 'should parse thin value', () => {
  460. styles.setTo( 'border:thin' );
  461. expect( styles.getNormalized( 'border-width' ) ).to.deep.equal( {
  462. top: 'thin',
  463. right: 'thin',
  464. bottom: 'thin',
  465. left: 'thin'
  466. } );
  467. } );
  468. it( 'should parse medium value', () => {
  469. styles.setTo( 'border:medium' );
  470. expect( styles.getNormalized( 'border-width' ) ).to.deep.equal( {
  471. top: 'medium',
  472. right: 'medium',
  473. bottom: 'medium',
  474. left: 'medium'
  475. } );
  476. } );
  477. it( 'should parse thick value', () => {
  478. styles.setTo( 'border:thick' );
  479. expect( styles.getNormalized( 'border-width' ) ).to.deep.equal( {
  480. top: 'thick',
  481. right: 'thick',
  482. bottom: 'thick',
  483. left: 'thick'
  484. } );
  485. } );
  486. } );
  487. describe( 'border-* position', () => {
  488. it( 'should output all positions', () => {
  489. styles.setTo(
  490. 'border-top:none;' +
  491. 'border-left:none;' +
  492. 'border-bottom:dotted #FFC000 3.0pt;' +
  493. 'border-right:dotted #FFC000 3.0pt;'
  494. );
  495. expect( styles.toString() ).to.equal(
  496. 'border-bottom:3.0pt dotted #FFC000;' +
  497. 'border-left:none;' +
  498. 'border-right:3.0pt dotted #FFC000;' +
  499. 'border-top:none;'
  500. );
  501. expect( styles.getAsString( 'border-top' ) ).to.equal( 'none' );
  502. expect( styles.getAsString( 'border-right' ) ).to.equal( '3.0pt dotted #FFC000' );
  503. expect( styles.getAsString( 'border-bottom' ) ).to.equal( '3.0pt dotted #FFC000' );
  504. expect( styles.getAsString( 'border-left' ) ).to.equal( 'none' );
  505. } );
  506. it( 'should output nothing if no border style defined', () => {
  507. styles.setTo( 'color:blue;' );
  508. expect( styles.toString() ).to.equal( 'color:blue;' );
  509. expect( styles.getAsString( 'border-top' ) ).to.be.undefined;
  510. expect( styles.getAsString( 'border-right' ) ).to.be.undefined;
  511. expect( styles.getAsString( 'border-bottom' ) ).to.be.undefined;
  512. expect( styles.getAsString( 'border-left' ) ).to.be.undefined;
  513. } );
  514. } );
  515. describe( 'getStyleNames() - border', () => {
  516. it( 'should set all border colors (1 value defined)', () => {
  517. styles.setTo( 'border-color: deeppink deepskyblue;' +
  518. 'border-style: solid;' +
  519. 'border-width: 1px;' +
  520. 'border-bottom-width: 2px;' +
  521. 'border-right-style: dotted;' );
  522. expect( styles.getStyleNames() ).to.deep.equal( [
  523. 'border-top',
  524. 'border-right',
  525. 'border-bottom',
  526. 'border-left'
  527. ] );
  528. } );
  529. } );
  530. } );