tablecellproperties.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684
  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 Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  6. import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
  7. import TableEditing from '../src/tableediting';
  8. import TableCellProperties from '../src/tablecellproperties';
  9. import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  10. import { assertEqualMarkup } from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
  11. import { assertTableCellStyle, assertTRBLAttribute } from './_utils/utils';
  12. describe( 'TableCellProperties', () => {
  13. let editor, model;
  14. beforeEach( () => {
  15. return VirtualTestEditor
  16. .create( {
  17. plugins: [ TableCellProperties, Paragraph, TableEditing ]
  18. } )
  19. .then( newEditor => {
  20. editor = newEditor;
  21. model = editor.model;
  22. } );
  23. } );
  24. afterEach( () => {
  25. editor.destroy();
  26. } );
  27. it( 'should have pluginName', () => {
  28. expect( TableCellProperties.pluginName ).to.equal( 'TableCellProperties' );
  29. } );
  30. describe( 'border', () => {
  31. it( 'should set proper schema rules', () => {
  32. expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'borderColor' ) ).to.be.true;
  33. expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'borderStyle' ) ).to.be.true;
  34. expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'borderWidth' ) ).to.be.true;
  35. } );
  36. describe( 'upcast conversion', () => {
  37. it( 'should upcast border shorthand', () => {
  38. editor.setData( '<table><tr><td style="border:1px solid #f00">foo</td></tr></table>' );
  39. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  40. assertTRBLAttribute( tableCell, 'borderColor', '#f00' );
  41. assertTRBLAttribute( tableCell, 'borderStyle', 'solid' );
  42. assertTRBLAttribute( tableCell, 'borderWidth', '1px' );
  43. } );
  44. it( 'should upcast border-color shorthand', () => {
  45. editor.setData( '<table><tr><td style="border-color:#f00">foo</td></tr></table>' );
  46. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  47. assertTRBLAttribute( tableCell, 'borderColor', '#f00' );
  48. } );
  49. it( 'should upcast border-style shorthand', () => {
  50. editor.setData( '<table><tr><td style="border-style:ridge">foo</td></tr></table>' );
  51. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  52. assertTRBLAttribute( tableCell, 'borderStyle', 'ridge' );
  53. } );
  54. it( 'should upcast border-width shorthand', () => {
  55. editor.setData( '<table><tr><td style="border-width:1px">foo</td></tr></table>' );
  56. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  57. assertTRBLAttribute( tableCell, 'borderWidth', '1px' );
  58. } );
  59. it( 'should upcast border-top shorthand', () => {
  60. editor.setData( '<table><tr><td style="border-top:1px solid #f00">foo</td></tr></table>' );
  61. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  62. assertTRBLAttribute( tableCell, 'borderColor', '#f00', null, null, null );
  63. assertTRBLAttribute( tableCell, 'borderStyle', 'solid', null, null, null );
  64. assertTRBLAttribute( tableCell, 'borderWidth', '1px', null, null, null );
  65. } );
  66. it( 'should upcast border-right shorthand', () => {
  67. editor.setData( '<table><tr><td style="border-right:1px solid #f00">foo</td></tr></table>' );
  68. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  69. assertTRBLAttribute( tableCell, 'borderColor', null, '#f00', null, null );
  70. assertTRBLAttribute( tableCell, 'borderStyle', null, 'solid', null, null );
  71. assertTRBLAttribute( tableCell, 'borderWidth', null, '1px', null, null );
  72. } );
  73. it( 'should upcast border-bottom shorthand', () => {
  74. editor.setData( '<table><tr><td style="border-bottom:1px solid #f00">foo</td></tr></table>' );
  75. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  76. assertTRBLAttribute( tableCell, 'borderColor', null, null, '#f00', null );
  77. assertTRBLAttribute( tableCell, 'borderStyle', null, null, 'solid', null );
  78. assertTRBLAttribute( tableCell, 'borderWidth', null, null, '1px', null );
  79. } );
  80. it( 'should upcast border-left shorthand', () => {
  81. editor.setData( '<table><tr><td style="border-left:1px solid #f00">foo</td></tr></table>' );
  82. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  83. assertTRBLAttribute( tableCell, 'borderColor', null, null, null, '#f00' );
  84. assertTRBLAttribute( tableCell, 'borderStyle', null, null, null, 'solid' );
  85. assertTRBLAttribute( tableCell, 'borderWidth', null, null, null, '1px' );
  86. } );
  87. it( 'should upcast mixed shorthands', () => {
  88. editor.setData(
  89. '<table><tr><td style="border-top:1px solid #f00;border-bottom:2em ridge rgba(255,0,0,1)">foo</td></tr></table>'
  90. );
  91. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  92. assertTRBLAttribute( tableCell, 'borderColor', '#f00', null, 'rgba(255, 0, 0, 1)', null );
  93. assertTRBLAttribute( tableCell, 'borderStyle', 'solid', null, 'ridge', null );
  94. assertTRBLAttribute( tableCell, 'borderWidth', '1px', null, '2em', null );
  95. } );
  96. it( 'should upcast border-top-* styles', () => {
  97. editor.setData(
  98. '<table><tr><td style="border-top-width:1px;border-top-style:solid;border-top-color:#f00">foo</td></tr></table>'
  99. );
  100. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  101. assertTRBLAttribute( tableCell, 'borderColor', '#f00', null, null, null );
  102. assertTRBLAttribute( tableCell, 'borderStyle', 'solid', null, null, null );
  103. assertTRBLAttribute( tableCell, 'borderWidth', '1px', null, null, null );
  104. } );
  105. it( 'should upcast border-right-* styles', () => {
  106. editor.setData(
  107. '<table><tr><td style="border-right-width:1px;border-right-style:solid;border-right-color:#f00">foo</td></tr></table>'
  108. );
  109. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  110. assertTRBLAttribute( tableCell, 'borderColor', null, '#f00', null, null );
  111. assertTRBLAttribute( tableCell, 'borderStyle', null, 'solid', null, null );
  112. assertTRBLAttribute( tableCell, 'borderWidth', null, '1px', null, null );
  113. } );
  114. it( 'should upcast border-bottom-* styles', () => {
  115. editor.setData(
  116. '<table><tr>' +
  117. '<td style="border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#f00">foo</td>' +
  118. '</tr></table>'
  119. );
  120. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  121. assertTRBLAttribute( tableCell, 'borderColor', null, null, '#f00', null );
  122. assertTRBLAttribute( tableCell, 'borderStyle', null, null, 'solid', null );
  123. assertTRBLAttribute( tableCell, 'borderWidth', null, null, '1px', null );
  124. } );
  125. it( 'should upcast border-left-* styles', () => {
  126. editor.setData(
  127. '<table><tr><td style="border-left-width:1px;border-left-style:solid;border-left-color:#f00">foo</td></tr></table>'
  128. );
  129. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  130. assertTRBLAttribute( tableCell, 'borderColor', null, null, null, '#f00' );
  131. assertTRBLAttribute( tableCell, 'borderStyle', null, null, null, 'solid' );
  132. assertTRBLAttribute( tableCell, 'borderWidth', null, null, null, '1px' );
  133. } );
  134. it( 'should allow to be overriden (only border-top consumed)', () => {
  135. editor.conversion.for( 'upcast' ).add( dispatcher => dispatcher.on( 'element:td', ( evt, data, conversionApi ) => {
  136. conversionApi.consumable.consume( data.viewItem, {
  137. styles: [ 'border-top' ]
  138. } );
  139. }, { priority: 'high' } ) );
  140. editor.setData( '<table><tr><td style="border:1px solid blue;">foo</td></tr></table>' );
  141. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  142. expect( tableCell.getAttribute( 'borderColor' ) ).to.be.undefined;
  143. expect( tableCell.getAttribute( 'borderStyle' ) ).to.be.undefined;
  144. expect( tableCell.getAttribute( 'borderWidth' ) ).to.be.undefined;
  145. } );
  146. } );
  147. describe( 'downcast conversion', () => {
  148. let tableCell;
  149. beforeEach( () => {
  150. setModelData(
  151. model,
  152. '<table headingRows="0" headingColumns="0">' +
  153. '<tableRow>' +
  154. '<tableCell>' +
  155. '<paragraph>foo</paragraph>' +
  156. '</tableCell>' +
  157. '</tableRow>' +
  158. '</table>'
  159. );
  160. tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  161. } );
  162. it( 'should downcast borderColor attribute (same top, right, bottom, left)', () => {
  163. model.change( writer => writer.setAttribute( 'borderColor', {
  164. top: '#f00',
  165. right: '#f00',
  166. bottom: '#f00',
  167. left: '#f00'
  168. }, tableCell ) );
  169. assertTableCellStyle( editor, 'border-bottom:#f00;border-left:#f00;border-right:#f00;border-top:#f00;' );
  170. } );
  171. it( 'should downcast borderColor attribute (different top, right, bottom, left)', () => {
  172. model.change( writer => writer.setAttribute( 'borderColor', {
  173. top: '#f00',
  174. right: 'hsla(0, 100%, 50%, 0.5)',
  175. bottom: 'deeppink',
  176. left: 'rgb(255, 0, 0)'
  177. }, tableCell ) );
  178. assertTableCellStyle( editor,
  179. 'border-bottom:deeppink;' +
  180. 'border-left:rgb(255, 0, 0);' +
  181. 'border-right:hsla(0, 100%, 50%, 0.5);' +
  182. 'border-top:#f00;'
  183. );
  184. } );
  185. it( 'should downcast borderStyle attribute (same top, right, bottom, left)', () => {
  186. model.change( writer => writer.setAttribute( 'borderStyle', {
  187. top: 'solid',
  188. right: 'solid',
  189. bottom: 'solid',
  190. left: 'solid'
  191. }, tableCell ) );
  192. assertTableCellStyle( editor, 'border-bottom:solid;border-left:solid;border-right:solid;border-top:solid;' );
  193. } );
  194. it( 'should downcast borderStyle attribute (different top, right, bottom, left)', () => {
  195. model.change( writer => writer.setAttribute( 'borderStyle', {
  196. top: 'solid',
  197. right: 'ridge',
  198. bottom: 'dotted',
  199. left: 'dashed'
  200. }, tableCell ) );
  201. assertTableCellStyle( editor, 'border-bottom:dotted;border-left:dashed;border-right:ridge;border-top:solid;' );
  202. } );
  203. it( 'should downcast borderWidth attribute (same top, right, bottom, left)', () => {
  204. model.change( writer => writer.setAttribute( 'borderWidth', {
  205. top: '42px',
  206. right: '.1em',
  207. bottom: '1337rem',
  208. left: 'thick'
  209. }, tableCell ) );
  210. assertTableCellStyle( editor, 'border-bottom:1337rem;border-left:thick;border-right:.1em;border-top:42px;' );
  211. } );
  212. it( 'should downcast borderWidth attribute (different top, right, bottom, left)', () => {
  213. model.change( writer => writer.setAttribute( 'borderWidth', {
  214. top: '42px',
  215. right: '42px',
  216. bottom: '42px',
  217. left: '42px'
  218. }, tableCell ) );
  219. assertTableCellStyle( editor, 'border-bottom:42px;border-left:42px;border-right:42px;border-top:42px;' );
  220. } );
  221. it( 'should downcast borderColor, borderStyle and borderWidth attributes together (same top, right, bottom, left)', () => {
  222. model.change( writer => {
  223. writer.setAttribute( 'borderColor', {
  224. top: '#f00',
  225. right: '#f00',
  226. bottom: '#f00',
  227. left: '#f00'
  228. }, tableCell );
  229. writer.setAttribute( 'borderStyle', {
  230. top: 'solid',
  231. right: 'solid',
  232. bottom: 'solid',
  233. left: 'solid'
  234. }, tableCell );
  235. writer.setAttribute( 'borderWidth', {
  236. top: '42px',
  237. right: '42px',
  238. bottom: '42px',
  239. left: '42px'
  240. }, tableCell );
  241. } );
  242. assertTableCellStyle( editor,
  243. 'border-bottom:42px solid #f00;' +
  244. 'border-left:42px solid #f00;' +
  245. 'border-right:42px solid #f00;' +
  246. 'border-top:42px solid #f00;'
  247. );
  248. } );
  249. it( 'should downcast borderColor, borderStyle and borderWidth attributes together (different top, right, bottom, left)', () => {
  250. model.change( writer => {
  251. writer.setAttribute( 'borderColor', {
  252. top: '#f00',
  253. right: 'hsla(0, 100%, 50%, 0.5)',
  254. bottom: 'deeppink',
  255. left: 'rgb(255, 0, 0)'
  256. }, tableCell );
  257. writer.setAttribute( 'borderStyle', {
  258. top: 'solid',
  259. right: 'ridge',
  260. bottom: 'dotted',
  261. left: 'dashed'
  262. }, tableCell );
  263. writer.setAttribute( 'borderWidth', {
  264. top: '42px',
  265. right: '.1em',
  266. bottom: '1337rem',
  267. left: 'thick'
  268. }, tableCell );
  269. } );
  270. assertTableCellStyle( editor,
  271. 'border-bottom:1337rem dotted deeppink;' +
  272. 'border-left:thick dashed rgb(255, 0, 0);' +
  273. 'border-right:.1em ridge hsla(0, 100%, 50%, 0.5);' +
  274. 'border-top:42px solid #f00;'
  275. );
  276. } );
  277. describe( 'change attribute', () => {
  278. beforeEach( () => {
  279. model.change( writer => {
  280. writer.setAttribute( 'borderColor', {
  281. top: '#f00',
  282. right: '#f00',
  283. bottom: '#f00',
  284. left: '#f00'
  285. }, tableCell );
  286. writer.setAttribute( 'borderStyle', {
  287. top: 'solid',
  288. right: 'solid',
  289. bottom: 'solid',
  290. left: 'solid'
  291. }, tableCell );
  292. writer.setAttribute( 'borderWidth', {
  293. top: '42px',
  294. right: '42px',
  295. bottom: '42px',
  296. left: '42px'
  297. }, tableCell );
  298. } );
  299. } );
  300. it( 'should downcast borderColor attribute change', () => {
  301. model.change( writer => writer.setAttribute( 'borderColor', {
  302. top: 'deeppink',
  303. right: 'deeppink',
  304. bottom: 'deeppink',
  305. left: 'deeppink'
  306. }, tableCell ) );
  307. assertTableCellStyle( editor,
  308. 'border-bottom:42px solid deeppink;' +
  309. 'border-left:42px solid deeppink;' +
  310. 'border-right:42px solid deeppink;' +
  311. 'border-top:42px solid deeppink;'
  312. );
  313. } );
  314. it( 'should downcast borderStyle attribute change', () => {
  315. model.change( writer => writer.setAttribute( 'borderStyle', {
  316. top: 'ridge',
  317. right: 'ridge',
  318. bottom: 'ridge',
  319. left: 'ridge'
  320. }, tableCell ) );
  321. assertTableCellStyle( editor,
  322. 'border-bottom:42px ridge #f00;' +
  323. 'border-left:42px ridge #f00;' +
  324. 'border-right:42px ridge #f00;' +
  325. 'border-top:42px ridge #f00;'
  326. );
  327. } );
  328. it( 'should downcast borderWidth attribute change', () => {
  329. model.change( writer => writer.setAttribute( 'borderWidth', {
  330. top: 'thick',
  331. right: 'thick',
  332. bottom: 'thick',
  333. left: 'thick'
  334. }, tableCell ) );
  335. assertTableCellStyle( editor,
  336. 'border-bottom:thick solid #f00;' +
  337. 'border-left:thick solid #f00;' +
  338. 'border-right:thick solid #f00;' +
  339. 'border-top:thick solid #f00;'
  340. );
  341. } );
  342. it( 'should downcast borderColor attribute removal', () => {
  343. model.change( writer => writer.removeAttribute( 'borderColor', tableCell ) );
  344. assertTableCellStyle( editor,
  345. 'border-bottom:42px solid;' +
  346. 'border-left:42px solid;' +
  347. 'border-right:42px solid;' +
  348. 'border-top:42px solid;'
  349. );
  350. } );
  351. it( 'should downcast borderStyle attribute removal', () => {
  352. model.change( writer => writer.removeAttribute( 'borderStyle', tableCell ) );
  353. assertTableCellStyle( editor,
  354. 'border-bottom:42px #f00;' +
  355. 'border-left:42px #f00;' +
  356. 'border-right:42px #f00;' +
  357. 'border-top:42px #f00;'
  358. );
  359. } );
  360. it( 'should downcast borderWidth attribute removal', () => {
  361. model.change( writer => writer.removeAttribute( 'borderWidth', tableCell ) );
  362. assertTableCellStyle( editor,
  363. 'border-bottom:solid #f00;' +
  364. 'border-left:solid #f00;' +
  365. 'border-right:solid #f00;' +
  366. 'border-top:solid #f00;'
  367. );
  368. } );
  369. it( 'should downcast borderColor, borderStyle and borderWidth attributes removal', () => {
  370. model.change( writer => {
  371. writer.removeAttribute( 'borderColor', tableCell );
  372. writer.removeAttribute( 'borderStyle', tableCell );
  373. writer.removeAttribute( 'borderWidth', tableCell );
  374. } );
  375. assertEqualMarkup(
  376. editor.getData(),
  377. '<figure class="table"><table><tbody><tr><td>foo</td></tr></tbody></table></figure>'
  378. );
  379. } );
  380. } );
  381. } );
  382. } );
  383. describe( 'background color', () => {
  384. it( 'should set proper schema rules', () => {
  385. expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'backgroundColor' ) ).to.be.true;
  386. } );
  387. describe( 'upcast conversion', () => {
  388. it( 'should upcast background-color', () => {
  389. editor.setData( '<table><tr><td style="background-color:#f00">foo</td></tr></table>' );
  390. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  391. expect( tableCell.getAttribute( 'backgroundColor' ) ).to.equal( '#f00' );
  392. } );
  393. } );
  394. describe( 'downcast conversion', () => {
  395. let tableCell;
  396. beforeEach( () => {
  397. setModelData(
  398. model,
  399. '<table headingRows="0" headingColumns="0">' +
  400. '<tableRow>' +
  401. '<tableCell>' +
  402. '<paragraph>foo</paragraph>' +
  403. '</tableCell>' +
  404. '</tableRow>' +
  405. '</table>'
  406. );
  407. tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  408. } );
  409. it( 'should downcast backgroundColor', () => {
  410. model.change( writer => writer.setAttribute( 'backgroundColor', '#f00', tableCell ) );
  411. assertTableCellStyle( editor, 'background-color:#f00;' );
  412. } );
  413. } );
  414. } );
  415. describe( 'horizontal alignment', () => {
  416. it( 'should set proper schema rules', () => {
  417. expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'horizontalAlignment' ) ).to.be.true;
  418. } );
  419. describe( 'upcast conversion', () => {
  420. it( 'should upcast text-align:left style', () => {
  421. editor.setData( '<table><tr><td style="text-align:left">foo</td></tr></table>' );
  422. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  423. expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.equal( 'left' );
  424. } );
  425. it( 'should upcast text-align:right style', () => {
  426. editor.setData( '<table><tr><td style="text-align:right">foo</td></tr></table>' );
  427. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  428. expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.equal( 'right' );
  429. } );
  430. it( 'should upcast text-align:center style', () => {
  431. editor.setData( '<table><tr><td style="text-align:center">foo</td></tr></table>' );
  432. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  433. expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.equal( 'center' );
  434. } );
  435. it( 'should upcast text-align:justify style', () => {
  436. editor.setData( '<table><tr><td style="text-align:justify">foo</td></tr></table>' );
  437. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  438. expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.equal( 'justify' );
  439. } );
  440. } );
  441. describe( 'downcast conversion', () => {
  442. let tableCell;
  443. beforeEach( () => {
  444. setModelData(
  445. model,
  446. '<table headingRows="0" headingColumns="0">' +
  447. '<tableRow>' +
  448. '<tableCell>' +
  449. '<paragraph>foo</paragraph>' +
  450. '</tableCell>' +
  451. '</tableRow>' +
  452. '</table>'
  453. );
  454. tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  455. } );
  456. it( 'should downcast horizontalAlignment=left', () => {
  457. model.change( writer => writer.setAttribute( 'horizontalAlignment', 'left', tableCell ) );
  458. assertTableCellStyle( editor, 'text-align:left;' );
  459. } );
  460. it( 'should downcast horizontalAlignment=right', () => {
  461. model.change( writer => writer.setAttribute( 'horizontalAlignment', 'right', tableCell ) );
  462. assertTableCellStyle( editor, 'text-align:right;' );
  463. } );
  464. it( 'should downcast horizontalAlignment=center', () => {
  465. model.change( writer => writer.setAttribute( 'horizontalAlignment', 'center', tableCell ) );
  466. assertTableCellStyle( editor, 'text-align:center;' );
  467. } );
  468. it( 'should downcast horizontalAlignment=justify', () => {
  469. model.change( writer => writer.setAttribute( 'horizontalAlignment', 'justify', tableCell ) );
  470. assertTableCellStyle( editor, 'text-align:justify;' );
  471. } );
  472. } );
  473. } );
  474. describe( 'vertical alignment', () => {
  475. it( 'should set proper schema rules', () => {
  476. expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'verticalAlignment' ) ).to.be.true;
  477. } );
  478. describe( 'upcast conversion', () => {
  479. it( 'should upcast vertical-align', () => {
  480. editor.setData( '<table><tr><td style="vertical-align:top">foo</td></tr></table>' );
  481. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  482. expect( tableCell.getAttribute( 'verticalAlignment' ) ).to.equal( 'top' );
  483. } );
  484. } );
  485. describe( 'downcast conversion', () => {
  486. let tableCell;
  487. beforeEach( () => {
  488. setModelData(
  489. model,
  490. '<table headingRows="0" headingColumns="0">' +
  491. '<tableRow>' +
  492. '<tableCell>' +
  493. '<paragraph>foo</paragraph>' +
  494. '</tableCell>' +
  495. '</tableRow>' +
  496. '</table>'
  497. );
  498. tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  499. } );
  500. it( 'should downcast verticalAlignment', () => {
  501. model.change( writer => writer.setAttribute( 'verticalAlignment', 'middle', tableCell ) );
  502. assertTableCellStyle( editor, 'vertical-align:middle;' );
  503. } );
  504. } );
  505. } );
  506. describe( 'padding', () => {
  507. it( 'should set proper schema rules', () => {
  508. expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'padding' ) ).to.be.true;
  509. } );
  510. describe( 'upcast conversion', () => {
  511. it( 'should upcast padding shorthand', () => {
  512. editor.setData( '<table><tr><td style="padding:2px 4em">foo</td></tr></table>' );
  513. const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  514. assertTRBLAttribute( tableCell, 'padding', '2px', '4em' );
  515. } );
  516. } );
  517. describe( 'downcast conversion', () => {
  518. let tableCell;
  519. beforeEach( () => {
  520. setModelData(
  521. model,
  522. '<table headingRows="0" headingColumns="0">' +
  523. '<tableRow>' +
  524. '<tableCell>' +
  525. '<paragraph>foo</paragraph>' +
  526. '</tableCell>' +
  527. '</tableRow>' +
  528. '</table>'
  529. );
  530. tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
  531. } );
  532. it( 'should downcast padding (same top, right, bottom, left)', () => {
  533. model.change( writer => writer.setAttribute( 'padding', {
  534. top: '2px',
  535. right: '2px',
  536. bottom: '2px',
  537. left: '2px'
  538. }, tableCell ) );
  539. assertTableCellStyle( editor, 'padding:2px;' );
  540. } );
  541. it( 'should downcast padding (different top, right, bottom, left)', () => {
  542. model.change( writer => writer.setAttribute( 'padding', {
  543. top: '2px',
  544. right: '3px',
  545. bottom: '4px',
  546. left: '5px'
  547. }, tableCell ) );
  548. assertTableCellStyle( editor, 'padding:2px 3px 4px 5px;' );
  549. } );
  550. } );
  551. } );
  552. } );