tableproperties.js 22 KB

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