| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129 |
- /**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
- import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
- import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
- import TableEditing from '../../src/tableediting';
- import TableCellPropertiesEditing from '../../src/tablecellproperties/tablecellpropertiesediting';
- import TableCellBorderColorCommand from '../../src/tablecellproperties/commands/tablecellbordercolorcommand';
- import TableCellBorderStyleCommand from '../../src/tablecellproperties/commands/tablecellborderstylecommand';
- import TableCellBorderWidthCommand from '../../src/tablecellproperties/commands/tablecellborderwidthcommand';
- import TableCellHorizontalAlignmentCommand from '../../src/tablecellproperties/commands/tablecellhorizontalalignmentcommand';
- import TableCellWidthCommand from '../../src/tablecellproperties/commands/tablecellwidthcommand';
- import TableCellHeightCommand from '../../src/tablecellproperties/commands/tablecellheightcommand';
- import TableCellVerticalAlignmentCommand from '../../src/tablecellproperties/commands/tablecellverticalalignmentcommand';
- import TableCellPaddingCommand from '../../src/tablecellproperties/commands/tablecellpaddingcommand';
- import TableCellBackgroundColorCommand from '../../src/tablecellproperties/commands/tablecellbackgroundcolorcommand';
- import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
- import { assertEqualMarkup } from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
- import { assertTableCellStyle, assertTRBLAttribute } from '../_utils/utils';
- describe( 'table cell properties', () => {
- describe( 'TableCellPropertiesEditing', () => {
- let editor, model;
- beforeEach( async () => {
- editor = await VirtualTestEditor.create( {
- plugins: [ TableCellPropertiesEditing, Paragraph, TableEditing ]
- } );
- model = editor.model;
- } );
- afterEach( async () => {
- await editor.destroy();
- } );
- it( 'should have pluginName', () => {
- expect( TableCellPropertiesEditing.pluginName ).to.equal( 'TableCellPropertiesEditing' );
- } );
- it( 'adds tableCellBorderColor command', () => {
- expect( editor.commands.get( 'tableCellBorderColor' ) ).to.be.instanceOf( TableCellBorderColorCommand );
- } );
- it( 'adds tableCellBorderStyle command', () => {
- expect( editor.commands.get( 'tableCellBorderStyle' ) ).to.be.instanceOf( TableCellBorderStyleCommand );
- } );
- it( 'adds tableCellBorderWidth command', () => {
- expect( editor.commands.get( 'tableCellBorderWidth' ) ).to.be.instanceOf( TableCellBorderWidthCommand );
- } );
- it( 'adds tableCellAlignment command', () => {
- expect( editor.commands.get( 'tableCellHorizontalAlignment' ) ).to.be.instanceOf( TableCellHorizontalAlignmentCommand );
- } );
- it( 'adds tableCellAlignment command', () => {
- expect( editor.commands.get( 'tableCellVerticalAlignment' ) ).to.be.instanceOf( TableCellVerticalAlignmentCommand );
- } );
- it( 'adds tableCellPadding command', () => {
- expect( editor.commands.get( 'tableCellPadding' ) ).to.be.instanceOf( TableCellPaddingCommand );
- } );
- it( 'adds tableCellBackgroundColor command', () => {
- expect( editor.commands.get( 'tableCellBackgroundColor' ) ).to.be.instanceOf( TableCellBackgroundColorCommand );
- } );
- it( 'adds tableCellWidth command', () => {
- expect( editor.commands.get( 'tableCellWidth' ) ).to.be.instanceOf( TableCellWidthCommand );
- } );
- it( 'adds tableCellHeight command', () => {
- expect( editor.commands.get( 'tableCellHeight' ) ).to.be.instanceOf( TableCellHeightCommand );
- } );
- describe( 'border', () => {
- it( 'should set proper schema rules', () => {
- expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'borderColor' ) ).to.be.true;
- expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'borderStyle' ) ).to.be.true;
- expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'borderWidth' ) ).to.be.true;
- } );
- describe( 'upcast conversion', () => {
- it( 'should upcast border shorthand', () => {
- editor.setData( '<table><tr><td style="border:1px solid #f00">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- assertTRBLAttribute( tableCell, 'borderColor', '#f00' );
- assertTRBLAttribute( tableCell, 'borderStyle', 'solid' );
- assertTRBLAttribute( tableCell, 'borderWidth', '1px' );
- } );
- it( 'should upcast border-color shorthand', () => {
- editor.setData( '<table><tr><td style="border-color:#f00">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- assertTRBLAttribute( tableCell, 'borderColor', '#f00' );
- } );
- it( 'should upcast border-style shorthand', () => {
- editor.setData( '<table><tr><td style="border-style:ridge">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- assertTRBLAttribute( tableCell, 'borderStyle', 'ridge' );
- } );
- it( 'should upcast border-width shorthand', () => {
- editor.setData( '<table><tr><td style="border-width:1px">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- assertTRBLAttribute( tableCell, 'borderWidth', '1px' );
- } );
- it( 'should upcast border-top shorthand', () => {
- editor.setData( '<table><tr><td style="border-top:1px solid #f00">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- assertTRBLAttribute( tableCell, 'borderColor', '#f00', null, null, null );
- assertTRBLAttribute( tableCell, 'borderStyle', 'solid', null, null, null );
- assertTRBLAttribute( tableCell, 'borderWidth', '1px', null, null, null );
- } );
- it( 'should upcast border-right shorthand', () => {
- editor.setData( '<table><tr><td style="border-right:1px solid #f00">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- assertTRBLAttribute( tableCell, 'borderColor', null, '#f00', null, null );
- assertTRBLAttribute( tableCell, 'borderStyle', null, 'solid', null, null );
- assertTRBLAttribute( tableCell, 'borderWidth', null, '1px', null, null );
- } );
- it( 'should upcast border-bottom shorthand', () => {
- editor.setData( '<table><tr><td style="border-bottom:1px solid #f00">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- assertTRBLAttribute( tableCell, 'borderColor', null, null, '#f00', null );
- assertTRBLAttribute( tableCell, 'borderStyle', null, null, 'solid', null );
- assertTRBLAttribute( tableCell, 'borderWidth', null, null, '1px', null );
- } );
- it( 'should upcast border-left shorthand', () => {
- editor.setData( '<table><tr><td style="border-left:1px solid #f00">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- assertTRBLAttribute( tableCell, 'borderColor', null, null, null, '#f00' );
- assertTRBLAttribute( tableCell, 'borderStyle', null, null, null, 'solid' );
- assertTRBLAttribute( tableCell, 'borderWidth', null, null, null, '1px' );
- } );
- it( 'should upcast mixed shorthands', () => {
- editor.setData(
- '<table><tr><td style="border-top:1px solid #f00;border-bottom:2em ridge rgba(255,0,0,1)">foo</td></tr></table>'
- );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- assertTRBLAttribute( tableCell, 'borderColor', '#f00', null, 'rgba(255, 0, 0, 1)', null );
- assertTRBLAttribute( tableCell, 'borderStyle', 'solid', null, 'ridge', null );
- assertTRBLAttribute( tableCell, 'borderWidth', '1px', null, '2em', null );
- } );
- it( 'should upcast border-top-* styles', () => {
- editor.setData(
- '<table><tr><td style="border-top-width:1px;border-top-style:solid;border-top-color:#f00">foo</td></tr></table>'
- );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- assertTRBLAttribute( tableCell, 'borderColor', '#f00', null, null, null );
- assertTRBLAttribute( tableCell, 'borderStyle', 'solid', null, null, null );
- assertTRBLAttribute( tableCell, 'borderWidth', '1px', null, null, null );
- } );
- it( 'should upcast border-right-* styles', () => {
- editor.setData(
- '<table>' +
- '<tr>' +
- '<td style="border-right-width:1px;border-right-style:solid;border-right-color:#f00">foo</td>' +
- '</tr>' +
- '</table>'
- );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- assertTRBLAttribute( tableCell, 'borderColor', null, '#f00', null, null );
- assertTRBLAttribute( tableCell, 'borderStyle', null, 'solid', null, null );
- assertTRBLAttribute( tableCell, 'borderWidth', null, '1px', null, null );
- } );
- it( 'should upcast border-bottom-* styles', () => {
- editor.setData(
- '<table>' +
- '<tr>' +
- '<td style="border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#f00">foo</td>' +
- '</tr>' +
- '</table>'
- );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- assertTRBLAttribute( tableCell, 'borderColor', null, null, '#f00', null );
- assertTRBLAttribute( tableCell, 'borderStyle', null, null, 'solid', null );
- assertTRBLAttribute( tableCell, 'borderWidth', null, null, '1px', null );
- } );
- it( 'should upcast border-left-* styles', () => {
- editor.setData(
- '<table>' +
- '<tr>' +
- '<td style="border-left-width:1px;border-left-style:solid;border-left-color:#f00">foo</td>' +
- '</tr>' +
- '</table>'
- );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- assertTRBLAttribute( tableCell, 'borderColor', null, null, null, '#f00' );
- assertTRBLAttribute( tableCell, 'borderStyle', null, null, null, 'solid' );
- assertTRBLAttribute( tableCell, 'borderWidth', null, null, null, '1px' );
- } );
- it( 'should allow to be overriden (only border-top consumed)', () => {
- editor.conversion.for( 'upcast' ).add( dispatcher => dispatcher.on( 'element:td', ( evt, data, conversionApi ) => {
- conversionApi.consumable.consume( data.viewItem, {
- styles: [ 'border-top' ]
- } );
- }, { priority: 'high' } ) );
- editor.setData( '<table><tr><td style="border:1px solid blue;">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- expect( tableCell.getAttribute( 'borderColor' ) ).to.be.undefined;
- expect( tableCell.getAttribute( 'borderStyle' ) ).to.be.undefined;
- expect( tableCell.getAttribute( 'borderWidth' ) ).to.be.undefined;
- } );
- } );
- describe( 'downcast conversion', () => {
- let tableCell;
- beforeEach( () => {
- setModelData(
- model,
- '<table headingRows="0" headingColumns="0">' +
- '<tableRow>' +
- '<tableCell>' +
- '<paragraph>foo</paragraph>' +
- '</tableCell>' +
- '</tableRow>' +
- '</table>'
- );
- tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- } );
- it( 'should consume converted item borderColor attribute', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:borderColor:tableCell', ( evt, data, conversionApi ) => {
- expect( conversionApi.consumable.consume( data.item, evt.name ) ).to.be.false;
- } ) );
- model.change( writer => writer.setAttribute( 'borderColor', '#f00', tableCell ) );
- } );
- it( 'should be overridable', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:borderColor:tableCell', ( evt, data, conversionApi ) => {
- conversionApi.consumable.consume( data.item, evt.name );
- }, { priority: 'high' } ) );
- model.change( writer => writer.setAttribute( 'borderColor', '#f00', tableCell ) );
- assertTableCellStyle( editor, '' );
- } );
- it( 'should downcast borderColor attribute (same top, right, bottom, left)', () => {
- model.change( writer => writer.setAttribute( 'borderColor', {
- top: '#f00',
- right: '#f00',
- bottom: '#f00',
- left: '#f00'
- }, tableCell ) );
- assertTableCellStyle( editor, 'border-bottom:#f00;border-left:#f00;border-right:#f00;border-top:#f00;' );
- } );
- it( 'should downcast borderColor attribute (different top, right, bottom, left)', () => {
- model.change( writer => writer.setAttribute( 'borderColor', {
- top: '#f00',
- right: 'hsla(0, 100%, 50%, 0.5)',
- bottom: 'deeppink',
- left: 'rgb(255, 0, 0)'
- }, tableCell ) );
- assertTableCellStyle( editor,
- 'border-bottom:deeppink;' +
- 'border-left:rgb(255, 0, 0);' +
- 'border-right:hsla(0, 100%, 50%, 0.5);' +
- 'border-top:#f00;'
- );
- } );
- it( 'should consume converted item borderStyle attribute', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:borderStyle:tableCell', ( evt, data, conversionApi ) => {
- expect( conversionApi.consumable.consume( data.item, evt.name ) ).to.be.false;
- } ) );
- model.change( writer => writer.setAttribute( 'borderStyle', 'ridge', tableCell ) );
- } );
- it( 'should be overridable', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:borderStyle:tableCell', ( evt, data, conversionApi ) => {
- conversionApi.consumable.consume( data.item, evt.name );
- }, { priority: 'high' } ) );
- model.change( writer => writer.setAttribute( 'borderStyle', 'ridge', tableCell ) );
- assertTableCellStyle( editor, '' );
- } );
- it( 'should downcast borderStyle attribute (same top, right, bottom, left)', () => {
- model.change( writer => writer.setAttribute( 'borderStyle', {
- top: 'solid',
- right: 'solid',
- bottom: 'solid',
- left: 'solid'
- }, tableCell ) );
- assertTableCellStyle( editor, 'border-bottom:solid;border-left:solid;border-right:solid;border-top:solid;' );
- } );
- it( 'should downcast borderStyle attribute (different top, right, bottom, left)', () => {
- model.change( writer => writer.setAttribute( 'borderStyle', {
- top: 'solid',
- right: 'ridge',
- bottom: 'dotted',
- left: 'dashed'
- }, tableCell ) );
- assertTableCellStyle( editor, 'border-bottom:dotted;border-left:dashed;border-right:ridge;border-top:solid;' );
- } );
- it( 'should consume converted item borderWidth attribute', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:borderWidth:tableCell', ( evt, data, conversionApi ) => {
- expect( conversionApi.consumable.consume( data.item, evt.name ) ).to.be.false;
- } ) );
- model.change( writer => writer.setAttribute( 'borderWidth', '2px', tableCell ) );
- } );
- it( 'should be overridable', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:borderWidth:tableCell', ( evt, data, conversionApi ) => {
- conversionApi.consumable.consume( data.item, evt.name );
- }, { priority: 'high' } ) );
- model.change( writer => writer.setAttribute( 'borderWidth', '2px', tableCell ) );
- assertTableCellStyle( editor, '' );
- } );
- it( 'should downcast borderWidth attribute (same top, right, bottom, left)', () => {
- model.change( writer => writer.setAttribute( 'borderWidth', {
- top: '42px',
- right: '.1em',
- bottom: '1337rem',
- left: 'thick'
- }, tableCell ) );
- assertTableCellStyle( editor, 'border-bottom:1337rem;border-left:thick;border-right:.1em;border-top:42px;' );
- } );
- it( 'should downcast borderWidth attribute (different top, right, bottom, left)', () => {
- model.change( writer => writer.setAttribute( 'borderWidth', {
- top: '42px',
- right: '42px',
- bottom: '42px',
- left: '42px'
- }, tableCell ) );
- assertTableCellStyle( editor, 'border-bottom:42px;border-left:42px;border-right:42px;border-top:42px;' );
- } );
- it( 'should downcast borderColor, borderStyle and borderWidth attributes together (same top, right, bottom, left)', () => {
- model.change( writer => {
- writer.setAttribute( 'borderColor', {
- top: '#f00',
- right: '#f00',
- bottom: '#f00',
- left: '#f00'
- }, tableCell );
- writer.setAttribute( 'borderStyle', {
- top: 'solid',
- right: 'solid',
- bottom: 'solid',
- left: 'solid'
- }, tableCell );
- writer.setAttribute( 'borderWidth', {
- top: '42px',
- right: '42px',
- bottom: '42px',
- left: '42px'
- }, tableCell );
- } );
- assertTableCellStyle( editor,
- 'border-bottom:42px solid #f00;' +
- 'border-left:42px solid #f00;' +
- 'border-right:42px solid #f00;' +
- 'border-top:42px solid #f00;'
- );
- } );
- it(
- 'should downcast borderColor, borderStyle and borderWidth attributes together (different top, right, bottom, left)',
- () => {
- model.change( writer => {
- writer.setAttribute( 'borderColor', {
- top: '#f00',
- right: 'hsla(0, 100%, 50%, 0.5)',
- bottom: 'deeppink',
- left: 'rgb(255, 0, 0)'
- }, tableCell );
- writer.setAttribute( 'borderStyle', {
- top: 'solid',
- right: 'ridge',
- bottom: 'dotted',
- left: 'dashed'
- }, tableCell );
- writer.setAttribute( 'borderWidth', {
- top: '42px',
- right: '.1em',
- bottom: '1337rem',
- left: 'thick'
- }, tableCell );
- } );
- assertTableCellStyle( editor,
- 'border-bottom:1337rem dotted deeppink;' +
- 'border-left:thick dashed rgb(255, 0, 0);' +
- 'border-right:.1em ridge hsla(0, 100%, 50%, 0.5);' +
- 'border-top:42px solid #f00;'
- );
- }
- );
- describe( 'change attribute', () => {
- beforeEach( () => {
- model.change( writer => {
- writer.setAttribute( 'borderColor', {
- top: '#f00',
- right: '#f00',
- bottom: '#f00',
- left: '#f00'
- }, tableCell );
- writer.setAttribute( 'borderStyle', {
- top: 'solid',
- right: 'solid',
- bottom: 'solid',
- left: 'solid'
- }, tableCell );
- writer.setAttribute( 'borderWidth', {
- top: '42px',
- right: '42px',
- bottom: '42px',
- left: '42px'
- }, tableCell );
- } );
- } );
- it( 'should downcast borderColor attribute change', () => {
- model.change( writer => writer.setAttribute( 'borderColor', {
- top: 'deeppink',
- right: 'deeppink',
- bottom: 'deeppink',
- left: 'deeppink'
- }, tableCell ) );
- assertTableCellStyle( editor,
- 'border-bottom:42px solid deeppink;' +
- 'border-left:42px solid deeppink;' +
- 'border-right:42px solid deeppink;' +
- 'border-top:42px solid deeppink;'
- );
- } );
- it( 'should downcast borderStyle attribute change', () => {
- model.change( writer => writer.setAttribute( 'borderStyle', {
- top: 'ridge',
- right: 'ridge',
- bottom: 'ridge',
- left: 'ridge'
- }, tableCell ) );
- assertTableCellStyle( editor,
- 'border-bottom:42px ridge #f00;' +
- 'border-left:42px ridge #f00;' +
- 'border-right:42px ridge #f00;' +
- 'border-top:42px ridge #f00;'
- );
- } );
- it( 'should downcast borderWidth attribute change', () => {
- model.change( writer => writer.setAttribute( 'borderWidth', {
- top: 'thick',
- right: 'thick',
- bottom: 'thick',
- left: 'thick'
- }, tableCell ) );
- assertTableCellStyle( editor,
- 'border-bottom:thick solid #f00;' +
- 'border-left:thick solid #f00;' +
- 'border-right:thick solid #f00;' +
- 'border-top:thick solid #f00;'
- );
- } );
- it( 'should downcast borderColor attribute removal', () => {
- model.change( writer => writer.removeAttribute( 'borderColor', tableCell ) );
- assertTableCellStyle( editor,
- 'border-bottom:42px solid;' +
- 'border-left:42px solid;' +
- 'border-right:42px solid;' +
- 'border-top:42px solid;'
- );
- } );
- it( 'should downcast borderStyle attribute removal', () => {
- model.change( writer => writer.removeAttribute( 'borderStyle', tableCell ) );
- assertTableCellStyle( editor,
- 'border-bottom:42px #f00;' +
- 'border-left:42px #f00;' +
- 'border-right:42px #f00;' +
- 'border-top:42px #f00;'
- );
- } );
- it( 'should downcast borderWidth attribute removal', () => {
- model.change( writer => writer.removeAttribute( 'borderWidth', tableCell ) );
- assertTableCellStyle( editor,
- 'border-bottom:solid #f00;' +
- 'border-left:solid #f00;' +
- 'border-right:solid #f00;' +
- 'border-top:solid #f00;'
- );
- } );
- it( 'should downcast borderColor, borderStyle and borderWidth attributes removal', () => {
- model.change( writer => {
- writer.removeAttribute( 'borderColor', tableCell );
- writer.removeAttribute( 'borderStyle', tableCell );
- writer.removeAttribute( 'borderWidth', tableCell );
- } );
- assertEqualMarkup(
- editor.getData(),
- '<figure class="table"><table><tbody><tr><td>foo</td></tr></tbody></table></figure>'
- );
- } );
- } );
- } );
- } );
- describe( 'background color', () => {
- it( 'should set proper schema rules', () => {
- expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'backgroundColor' ) ).to.be.true;
- } );
- describe( 'upcast conversion', () => {
- it( 'should upcast background-color', () => {
- editor.setData( '<table><tr><td style="background-color:#f00">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- expect( tableCell.getAttribute( 'backgroundColor' ) ).to.equal( '#f00' );
- } );
- it( 'should upcast from background shorthand', () => {
- editor.setData( '<table><tr><td style="background:#f00 center center">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- expect( tableCell.getAttribute( 'backgroundColor' ) ).to.equal( '#f00' );
- } );
- it( 'should upcast from background shorthand (rbg color value with spaces)', () => {
- editor.setData( '<table><tr><td style="background:rgb(253, 253, 119) center center">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- expect( tableCell.getAttribute( 'backgroundColor' ) ).to.equal( 'rgb(253, 253, 119)' );
- } );
- } );
- describe( 'downcast conversion', () => {
- let tableCell;
- beforeEach( () => {
- setModelData(
- model,
- '<table headingRows="0" headingColumns="0">' +
- '<tableRow>' +
- '<tableCell>' +
- '<paragraph>foo</paragraph>' +
- '</tableCell>' +
- '</tableRow>' +
- '</table>'
- );
- tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- } );
- it( 'should consume converted item backgroundColor attribute', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:backgroundColor:tableCell', ( evt, data, conversionApi ) => {
- expect( conversionApi.consumable.consume( data.item, evt.name ) ).to.be.false;
- } ) );
- model.change( writer => writer.setAttribute( 'backgroundColor', '#f00', tableCell ) );
- } );
- it( 'should be overridable', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:backgroundColor:tableCell', ( evt, data, conversionApi ) => {
- conversionApi.consumable.consume( data.item, evt.name );
- }, { priority: 'high' } ) );
- model.change( writer => writer.setAttribute( 'backgroundColor', '#f00', tableCell ) );
- assertTableCellStyle( editor, '' );
- } );
- it( 'should downcast backgroundColor', () => {
- model.change( writer => writer.setAttribute( 'backgroundColor', '#f00', tableCell ) );
- assertTableCellStyle( editor, 'background-color:#f00;' );
- } );
- it( 'should downcast backgroundColor removal', () => {
- model.change( writer => writer.setAttribute( 'backgroundColor', '#f00', tableCell ) );
- model.change( writer => writer.removeAttribute( 'backgroundColor', tableCell ) );
- assertTableCellStyle( editor );
- } );
- it( 'should downcast backgroundColor change', () => {
- model.change( writer => writer.setAttribute( 'backgroundColor', '#f00', tableCell ) );
- assertTableCellStyle( editor, 'background-color:#f00;' );
- model.change( writer => writer.setAttribute( 'backgroundColor', '#ba7', tableCell ) );
- assertTableCellStyle( editor, 'background-color:#ba7;' );
- } );
- } );
- } );
- describe( 'horizontal alignment', () => {
- it( 'should set proper schema rules', () => {
- expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'horizontalAlignment' ) ).to.be.true;
- } );
- describe( 'upcast conversion', () => {
- it( 'should not upcast text-align:left style', () => {
- editor.setData( '<table><tr><td style="text-align:left">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.be.undefined;
- } );
- it( 'should upcast text-align:right style', () => {
- editor.setData( '<table><tr><td style="text-align:right">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.equal( 'right' );
- } );
- it( 'should upcast text-align:center style', () => {
- editor.setData( '<table><tr><td style="text-align:center">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.equal( 'center' );
- } );
- it( 'should upcast text-align:justify style', () => {
- editor.setData( '<table><tr><td style="text-align:justify">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.equal( 'justify' );
- } );
- } );
- describe( 'downcast conversion', () => {
- let tableCell;
- beforeEach( () => {
- setModelData(
- model,
- '<table headingRows="0" headingColumns="0">' +
- '<tableRow>' +
- '<tableCell>' +
- '<paragraph>foo</paragraph>' +
- '</tableCell>' +
- '</tableRow>' +
- '</table>'
- );
- tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- } );
- it( 'should consume converted item horizontalAlignment attribute', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:horizontalAlignment:tableCell', ( evt, data, conversionApi ) => {
- expect( conversionApi.consumable.consume( data.item, evt.name ) ).to.be.false;
- } ) );
- model.change( writer => writer.setAttribute( 'horizontalAlignment', 'right', tableCell ) );
- } );
- it( 'should be overridable', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:horizontalAlignment:tableCell', ( evt, data, conversionApi ) => {
- conversionApi.consumable.consume( data.item, evt.name );
- }, { priority: 'high' } ) );
- model.change( writer => writer.setAttribute( 'horizontalAlignment', 'right', tableCell ) );
- assertTableCellStyle( editor, '' );
- } );
- it( 'should not downcast horizontalAlignment=left', () => {
- model.change( writer => writer.setAttribute( 'horizontalAlignment', 'left', tableCell ) );
- assertTableCellStyle( editor );
- } );
- it( 'should downcast horizontalAlignment=right', () => {
- model.change( writer => writer.setAttribute( 'horizontalAlignment', 'right', tableCell ) );
- assertTableCellStyle( editor, 'text-align:right;' );
- } );
- it( 'should downcast horizontalAlignment=center', () => {
- model.change( writer => writer.setAttribute( 'horizontalAlignment', 'center', tableCell ) );
- assertTableCellStyle( editor, 'text-align:center;' );
- } );
- it( 'should downcast horizontalAlignment=justify', () => {
- model.change( writer => writer.setAttribute( 'horizontalAlignment', 'justify', tableCell ) );
- assertTableCellStyle( editor, 'text-align:justify;' );
- } );
- } );
- } );
- describe( 'vertical alignment', () => {
- it( 'should set proper schema rules', () => {
- expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'verticalAlignment' ) ).to.be.true;
- } );
- describe( 'upcast conversion', () => {
- it( 'should upcast "top" vertical-align', () => {
- editor.setData( '<table><tr><td style="vertical-align:top">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- expect( tableCell.getAttribute( 'verticalAlignment' ) ).to.equal( 'top' );
- } );
- it( 'should upcast "bottom" vertical-align', () => {
- editor.setData( '<table><tr><td style="vertical-align:bottom">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- expect( tableCell.getAttribute( 'verticalAlignment' ) ).to.equal( 'bottom' );
- } );
- it( 'should not upcast "middle" vertical-align', () => {
- editor.setData( '<table><tr><td style="vertical-align:middle">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- expect( tableCell.getAttribute( 'verticalAlignment' ) ).to.be.undefined;
- } );
- it( 'should upcast "top" valign attribute', () => {
- editor.setData( '<table><tr><td valign="top">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- expect( tableCell.getAttribute( 'verticalAlignment' ) ).to.equal( 'top' );
- } );
- it( 'should upcast "bottom" valign attribute', () => {
- editor.setData( '<table><tr><td valign="bottom">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- expect( tableCell.getAttribute( 'verticalAlignment' ) ).to.equal( 'bottom' );
- } );
- it( 'should not upcast "middle" valign attribute', () => {
- editor.setData( '<table><tr><td valign="middle">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- expect( tableCell.getAttribute( 'verticalAlignment' ) ).to.be.undefined;
- } );
- } );
- describe( 'downcast conversion', () => {
- let tableCell;
- beforeEach( () => {
- setModelData(
- model,
- '<table headingRows="0" headingColumns="0">' +
- '<tableRow>' +
- '<tableCell>' +
- '<paragraph>foo</paragraph>' +
- '</tableCell>' +
- '</tableRow>' +
- '</table>'
- );
- tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- } );
- it( 'should consume converted item verticalAlignment attribute', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:verticalAlignment:tableCell', ( evt, data, conversionApi ) => {
- expect( conversionApi.consumable.consume( data.item, evt.name ) ).to.be.false;
- } ) );
- model.change( writer => writer.setAttribute( 'verticalAlignment', 'top', tableCell ) );
- } );
- it( 'should be overridable', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:verticalAlignment:tableCell', ( evt, data, conversionApi ) => {
- conversionApi.consumable.consume( data.item, evt.name );
- }, { priority: 'high' } ) );
- model.change( writer => writer.setAttribute( 'verticalAlignment', 'top', tableCell ) );
- assertTableCellStyle( editor, '' );
- } );
- it( 'should downcast verticalAlignment', () => {
- model.change( writer => writer.setAttribute( 'verticalAlignment', 'top', tableCell ) );
- assertTableCellStyle( editor, 'vertical-align:top;' );
- } );
- } );
- } );
- describe( 'padding', () => {
- it( 'should set proper schema rules', () => {
- expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'padding' ) ).to.be.true;
- } );
- describe( 'upcast conversion', () => {
- it( 'should upcast padding shorthand', () => {
- editor.setData( '<table><tr><td style="padding:2px 4em">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- assertTRBLAttribute( tableCell, 'padding', '2px', '4em' );
- } );
- } );
- describe( 'downcast conversion', () => {
- let tableCell;
- beforeEach( () => {
- setModelData(
- model,
- '<table headingRows="0" headingColumns="0">' +
- '<tableRow>' +
- '<tableCell>' +
- '<paragraph>foo</paragraph>' +
- '</tableCell>' +
- '</tableRow>' +
- '</table>'
- );
- tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- } );
- it( 'should consume converted item borderColor attribute', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:padding:tableCell', ( evt, data, conversionApi ) => {
- expect( conversionApi.consumable.consume( data.item, evt.name ) ).to.be.false;
- } ) );
- model.change( writer => writer.setAttribute( 'padding', '1px', tableCell ) );
- } );
- it( 'should be overridable', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:padding:tableCell', ( evt, data, conversionApi ) => {
- conversionApi.consumable.consume( data.item, evt.name );
- }, { priority: 'high' } ) );
- model.change( writer => writer.setAttribute( 'padding', '1px', tableCell ) );
- assertTableCellStyle( editor, '' );
- } );
- it( 'should downcast padding (same top, right, bottom, left)', () => {
- model.change( writer => writer.setAttribute( 'padding', {
- top: '2px',
- right: '2px',
- bottom: '2px',
- left: '2px'
- }, tableCell ) );
- assertTableCellStyle( editor, 'padding:2px;' );
- } );
- it( 'should downcast padding (different top, right, bottom, left)', () => {
- model.change( writer => writer.setAttribute( 'padding', {
- top: '2px',
- right: '3px',
- bottom: '4px',
- left: '5px'
- }, tableCell ) );
- assertTableCellStyle( editor, 'padding:2px 3px 4px 5px;' );
- } );
- it( 'should downcast padding removal', () => {
- model.change( writer => writer.setAttribute( 'padding', '1337px', tableCell ) );
- model.change( writer => writer.removeAttribute( 'padding', tableCell ) );
- assertTableCellStyle( editor );
- } );
- it( 'should downcast padding change', () => {
- model.change( writer => writer.setAttribute( 'padding', '1337px', tableCell ) );
- assertTableCellStyle( editor, 'padding:1337px;' );
- model.change( writer => writer.setAttribute( 'padding', '1410em', tableCell ) );
- assertTableCellStyle( editor, 'padding:1410em;' );
- } );
- } );
- } );
- describe( 'cell width', () => {
- it( 'should set proper schema rules', () => {
- expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'width' ) ).to.be.true;
- } );
- describe( 'upcast conversion', () => {
- it( 'should upcast width attribute on table cell', () => {
- editor.setData( '<table><tr><td style="width:20px">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- expect( tableCell.getAttribute( 'width' ) ).to.equal( '20px' );
- } );
- } );
- describe( 'downcast conversion', () => {
- let tableCell;
- beforeEach( () => {
- setModelData(
- model,
- '<table headingRows="0" headingColumns="0">' +
- '<tableRow>' +
- '<tableCell>' +
- '<paragraph>foo</paragraph>' +
- '</tableCell>' +
- '</tableRow>' +
- '</table>'
- );
- tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- } );
- it( 'should consume converted item width attribute', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:width:tableCell', ( evt, data, conversionApi ) => {
- expect( conversionApi.consumable.consume( data.item, evt.name ) ).to.be.false;
- } ) );
- model.change( writer => writer.setAttribute( 'width', '40px', tableCell ) );
- } );
- it( 'should be overridable', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:width:tableCell', ( evt, data, conversionApi ) => {
- conversionApi.consumable.consume( data.item, evt.name );
- }, { priority: 'high' } ) );
- model.change( writer => writer.setAttribute( 'width', '40px', tableCell ) );
- assertTableCellStyle( editor, '' );
- } );
- it( 'should downcast width attribute', () => {
- model.change( writer => writer.setAttribute( 'width', '20px', tableCell ) );
- assertEqualMarkup(
- editor.getData(),
- '<figure class="table"><table><tbody><tr><td style="width:20px;">foo</td></tr></tbody></table></figure>'
- );
- } );
- it( 'should downcast width removal', () => {
- model.change( writer => writer.setAttribute( 'width', '1337px', tableCell ) );
- model.change( writer => writer.removeAttribute( 'width', tableCell ) );
- assertTableCellStyle( editor );
- } );
- it( 'should downcast width change', () => {
- model.change( writer => writer.setAttribute( 'width', '1337px', tableCell ) );
- assertTableCellStyle( editor, 'width:1337px;' );
- model.change( writer => writer.setAttribute( 'width', '1410em', tableCell ) );
- assertTableCellStyle( editor, 'width:1410em;' );
- } );
- } );
- } );
- describe( 'cell height', () => {
- it( 'should set proper schema rules', () => {
- expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'height' ) ).to.be.true;
- } );
- describe( 'upcast conversion', () => {
- it( 'should upcast height attribute on table cell', () => {
- editor.setData( '<table><tr><td style="height:20px">foo</td></tr></table>' );
- const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- expect( tableCell.getAttribute( 'height' ) ).to.equal( '20px' );
- } );
- } );
- describe( 'downcast conversion', () => {
- let tableCell;
- beforeEach( () => {
- setModelData(
- model,
- '<table headingRows="0" headingColumns="0">' +
- '<tableRow>' +
- '<tableCell>' +
- '<paragraph>foo</paragraph>' +
- '</tableCell>' +
- '</tableRow>' +
- '</table>'
- );
- tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
- } );
- it( 'should consume converted item height attribute', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:height:tableCell', ( evt, data, conversionApi ) => {
- expect( conversionApi.consumable.consume( data.item, evt.name ) ).to.be.false;
- } ) );
- model.change( writer => writer.setAttribute( 'height', '40px', tableCell ) );
- } );
- it( 'should be overridable', () => {
- editor.conversion.for( 'downcast' )
- .add( dispatcher => dispatcher.on( 'attribute:height:tableCell', ( evt, data, conversionApi ) => {
- conversionApi.consumable.consume( data.item, evt.name );
- }, { priority: 'high' } ) );
- model.change( writer => writer.setAttribute( 'height', '40px', tableCell ) );
- assertTableCellStyle( editor, '' );
- } );
- it( 'should downcast height attribute', () => {
- model.change( writer => writer.setAttribute( 'height', '20px', tableCell ) );
- assertEqualMarkup(
- editor.getData(),
- '<figure class="table"><table><tbody><tr><td style="height:20px;">foo</td></tr></tbody></table></figure>'
- );
- } );
- it( 'should downcast height removal', () => {
- model.change( writer => writer.setAttribute( 'height', '1337px', tableCell ) );
- model.change( writer => writer.removeAttribute( 'height', tableCell ) );
- assertTableCellStyle( editor );
- } );
- it( 'should downcast height change', () => {
- model.change( writer => writer.setAttribute( 'height', '1337px', tableCell ) );
- assertTableCellStyle( editor, 'height:1337px;' );
- model.change( writer => writer.setAttribute( 'height', '1410em', tableCell ) );
- assertTableCellStyle( editor, 'height:1410em;' );
- } );
- } );
- } );
- } );
- } );
|