borderstyles.js 19 KB

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