tablecellproperties.js 23 KB

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