tablecellpropertiesediting.js 25 KB

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