8
0

tablepropertiesediting.js 27 KB

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