(function() { module("tinymce.plugins.Table", { setupModule: function() { QUnit.stop(); tinymce.init({ selector: "textarea", add_unload_trigger: false, skin: false, indent: false, plugins: 'table', valid_styles: { '*' : 'width,height,vertical-align,text-align,float,border-color,background-color,border,padding,border-spacing,border-collapse' }, init_instance_callback: function(ed) { window.editor = ed; QUnit.start(); } }); }, teardown: function() { var win = Utils.getFrontmostWindow(); if (win) { win.close(); } delete editor.settings.table_advtab; delete editor.settings.table_cell_advtab; delete editor.settings.table_class_list; delete editor.settings.table_cell_class_list; delete editor.settings.table_row_class_list; delete editor.settings.table_style_by_css; editor.off('newcell newrow'); } }); function fillAndSubmitWindowForm(data) { var win = Utils.getFrontmostWindow(); win.fromJSON(data); win.find('form')[0].submit(); win.close(); } function cleanTableHtml(html) { return Utils.cleanHtml(html).replace(/

( |]+>)<\/p>$/, ''); } test("Table properties dialog (get data from plain table)", function() { editor.setContent('
X
'); Utils.setSelection('td', 0); editor.execCommand('mceTableProps'); deepEqual(Utils.getFrontmostWindow().toJSON(), { "align": "", "border": "", "caption": false, "cellpadding": "", "cellspacing": "", "height": "", "width": "", "backgroundColor": "", "borderColor": "", "style": "" }); }); test("Table properties dialog (get/set data from/to plain table, no adv tab)", function() { editor.settings.table_advtab = false; editor.setContent('
X
'); Utils.setSelection('td', 0); editor.execCommand('mceTableProps'); deepEqual(Utils.getFrontmostWindow().toJSON(), { "align": "", "border": "", "caption": false, "cellpadding": "", "cellspacing": "", "height": "", "width": "" }); fillAndSubmitWindowForm({ width: "100", height: "101" }); equal( cleanTableHtml(editor.getContent()), '
x
' ); }); test("Table properties dialog (get/set data from/to plain table, class list)", function() { editor.settings.table_class_list = [{title: 'Class1', value: 'class1'}]; editor.setContent('
X
'); Utils.setSelection('td', 0); editor.execCommand('mceTableProps'); deepEqual(Utils.getFrontmostWindow().toJSON(), { "align": "", "border": "", "caption": false, "cellpadding": "", "cellspacing": "", "height": "", "width": "", "backgroundColor": "", "borderColor": "", "style": "", "class": "" }); fillAndSubmitWindowForm({ width: "100", height: "101" }); equal( cleanTableHtml(editor.getContent()), '
x
' ); }); test("Table properties dialog (get data from full table)", function() { editor.setContent( '' + '' + '' + '' + '' + '' + '' + '
 
 
' ); Utils.setSelection('td', 0); editor.execCommand('mceTableProps'); deepEqual(Utils.getFrontmostWindow().toJSON(), { "align": "", "border": "4", "caption": true, "cellpadding": "3", "cellspacing": "2", "height": "101", "width": "100", "backgroundColor": "", "borderColor": "", "style": "width: 100px; height: 101px;" }); }); test("Table properties dialog (add caption)", function() { editor.setContent('
X
'); Utils.setSelection('td', 0); editor.execCommand('mceTableProps'); fillAndSubmitWindowForm({ caption: true }); equal( cleanTableHtml(editor.getContent()), '
 
x
' ); }); test("Table properties dialog (remove caption)", function() { editor.setContent('
 
X
'); Utils.setSelection('td', 0); editor.execCommand('mceTableProps'); fillAndSubmitWindowForm({ caption: false }); equal( cleanTableHtml(editor.getContent()), '
x
' ); }); test("Table properties dialog (change size in pixels)", function() { editor.setContent('
X
'); Utils.setSelection('td', 0); editor.execCommand('mceTableProps'); fillAndSubmitWindowForm({ width: 100, height: 101 }); equal( cleanTableHtml(editor.getContent()), '
x
' ); }); test("Table properties dialog (change size in %)", function() { editor.setContent('
X
'); Utils.setSelection('td', 0); editor.execCommand('mceTableProps'); fillAndSubmitWindowForm({ width: "100%", height: "101%" }); equal( cleanTableHtml(editor.getContent()), '
x
' ); }); test("Table properties dialog (change: border,cellpadding,cellspacing,align,backgroundColor,borderColor)", function() { editor.setContent('
X
'); Utils.setSelection('td', 0); editor.execCommand('mceTableProps'); fillAndSubmitWindowForm({ border: "1", cellpadding: "2", cellspacing: "3", align: "right" }); equal( cleanTableHtml(editor.getContent()), '
x
' ); }); test("Table properties dialog css border", function() { editor.settings.table_style_by_css = true; editor.setContent('
XZ
'); Utils.setSelection('td', 0); editor.execCommand('mceTableProps'); fillAndSubmitWindowForm({ border: "1px solid green" }); equal( cleanTableHtml(editor.getContent()), '
xz
' ); }); test("Table properties dialog css cell padding", function() { editor.settings.table_style_by_css = true; editor.setContent('
XZ
'); Utils.setSelection('td', 0); editor.execCommand('mceTableProps'); fillAndSubmitWindowForm({ cellpadding: "2" }); equal( cleanTableHtml(editor.getContent()), '
xz
' ); }); test("Table properties dialog cell spacing", function() { editor.settings.table_style_by_css = true; editor.setContent('
XZ
'); Utils.setSelection('td', 0); editor.execCommand('mceTableProps'); fillAndSubmitWindowForm({ cellspacing: "3" }); equal( cleanTableHtml(editor.getContent()), '
xz
' ); }); test("Table properties dialog border-color", function() { editor.settings.table_style_by_css = true; editor.setContent('
XZ
'); Utils.setSelection('td', 0); editor.execCommand('mceTableProps'); fillAndSubmitWindowForm({ borderColor: "green" }); equal( cleanTableHtml(editor.getContent()), '
xz
' ); }); test("Table properties dialog css border, style", function() { editor.settings.table_style_by_css = true; editor.setContent('
XZ
'); Utils.setSelection('td', 0); editor.execCommand('mceTableProps'); fillAndSubmitWindowForm({ border: "1px solid green", style: "border-collapse: collapse" }); equal( cleanTableHtml(editor.getContent()), '
xz
' ); }); test("Table properties dialog (get cell padding from styled cells)", function() { editor.settings.table_style_by_css = true; editor.setContent('
X
X
' + '
X
X
'); Utils.setSelection('td', 0); editor.execCommand('mceTableProps'); deepEqual(Utils.getFrontmostWindow().toJSON(), { "align": "", "backgroundColor": "", "border": "", "borderColor": "", "caption": false, "cellpadding": "5px", "cellspacing": "", "height": "", "style": "", "width": "" }); }); test("Table cell properties dialog (get data from plain cell)", function() { editor.setContent('
X
'); Utils.setSelection('td', 0); editor.execCommand('mceTableCellProps'); deepEqual(Utils.getFrontmostWindow().toJSON(), { "align": "", "valign": "", "height": "", "scope": "", "type": "td", "width": "", "backgroundColor": "", "borderColor": "", "style": "" }); }); test("Table cell properties dialog (get/set data from/to plain cell, no adv tab)", function() { editor.settings.table_cell_advtab = false; editor.setContent('
X
'); Utils.setSelection('td', 0); editor.execCommand('mceTableCellProps'); deepEqual(Utils.getFrontmostWindow().toJSON(), { "align": "", "valign": "", "height": "", "scope": "", "type": "td", "width": "" }); fillAndSubmitWindowForm({ width: 100, height: 101 }); equal( cleanTableHtml(editor.getContent()), '
x
' ); }); test("Table cell properties dialog (get data from complex cell)", function() { editor.setContent('
X
'); Utils.setSelection('th', 0); editor.execCommand('mceTableCellProps'); deepEqual(Utils.getFrontmostWindow().toJSON(), { "align": "right", "valign": "top", "height": "11", "scope": "row", "type": "th", "width": "10", "backgroundColor": "blue", "borderColor": "red", "style": "width: 10px; height: 11px; vertical-align: top; text-align: right; border-color: red; background-color: blue;" }); }); test("Table cell properties dialog (update all)", function() { editor.setContent('
X
'); Utils.setSelection('td', 0); editor.execCommand('mceTableCellProps'); fillAndSubmitWindowForm({ "align": "right", "height": "11", "scope": "row", "type": "th", "width": "10" }); equal( cleanTableHtml(editor.getContent()), '
x
' ); }); test("Table row properties dialog (get data from plain cell)", function() { editor.setContent('
X
'); Utils.setSelection('td', 0); editor.execCommand('mceTableRowProps'); deepEqual(Utils.getFrontmostWindow().toJSON(), { "align": "", "height": "", "type": "tbody", "backgroundColor": "", "borderColor": "", "style": "" }); }); test("Table row properties dialog (get data from complex row)", function() { editor.setContent('
X
'); Utils.setSelection('td', 0); editor.execCommand('mceTableRowProps'); deepEqual(Utils.getFrontmostWindow().toJSON(), { "align": "right", "height": "10", "type": "thead", "backgroundColor": "blue", "borderColor": "red", "style": "height: 10px; text-align: right; border-color: red; background-color: blue;" }); }); test("Table row properties dialog (update all)", function() { editor.setContent('
X
'); Utils.setSelection('td', 0); editor.execCommand('mceTableRowProps'); fillAndSubmitWindowForm({ "align": "right", "height": "10", "type": "thead" }); equal( cleanTableHtml(editor.getContent()), '
x
' ); }); test("mceTableDelete command", function() { editor.setContent('
X
'); Utils.setSelection('td', 0); editor.execCommand('mceTableDelete'); equal(cleanTableHtml(editor.getContent()), ''); }); test("mceTableDeleteCol command", function() { editor.setContent('
12
'); Utils.setSelection('td', 0); editor.execCommand('mceTableDeleteCol'); equal(cleanTableHtml(editor.getContent()), '
2
'); }); test("mceTableDeleteRow command", function() { editor.setContent('
1
2
'); Utils.setSelection('td', 0); editor.execCommand('mceTableDeleteRow'); equal(cleanTableHtml(editor.getContent()), '
2
'); }); test("mceTableInsertColAfter command", function() { editor.setContent('
1
2
'); Utils.setSelection('td', 0); editor.execCommand('mceTableInsertColAfter'); equal(cleanTableHtml(editor.getContent()), '
1 
2 
'); }); test("mceTableInsertColBefore command", function() { editor.setContent('
1
2
'); Utils.setSelection('td', 0); editor.execCommand('mceTableInsertColBefore'); equal(cleanTableHtml(editor.getContent()), '
 1
 2
'); }); test("mceTableInsertRowAfter command", function() { editor.setContent('
12
'); Utils.setSelection('td', 0); editor.execCommand('mceTableInsertRowAfter'); equal(cleanTableHtml(editor.getContent()), '
12
  
'); }); test("mceTableInsertRowBefore command", function() { editor.setContent('
12
'); Utils.setSelection('td', 0); editor.execCommand('mceTableInsertRowBefore'); equal(cleanTableHtml(editor.getContent()), '
  
12
'); }); test("mceTableMergeCells command with cell selection", function() { editor.getBody().innerHTML = '
12
'; Utils.setSelection('td', 0); editor.execCommand('mceTableMergeCells'); equal(cleanTableHtml(editor.getContent()), '
12
'); }); test("mceTableSplitCells command", function() { editor.setContent('
12
'); Utils.setSelection('td', 0); editor.execCommand('mceTableSplitCells'); equal( cleanTableHtml(editor.getContent()), '
12 
' ); }); test("Tab key navigation", function() { editor.setContent('
A1A2
B1B2

x

'); Utils.setSelection('td', 0); editor.fire('keydown', {keyCode: 9}); equal(editor.selection.getStart().innerHTML, 'A2'); Utils.setSelection('td', 0); editor.fire('keydown', {keyCode: 9, shiftKey: true}); equal(editor.selection.getStart().innerHTML, 'A1'); Utils.setSelection('td:nth-child(2)', 0); editor.fire('keydown', {keyCode: 9, shiftKey: true}); equal(editor.selection.getStart().innerHTML, 'A1'); Utils.setSelection('tr:nth-child(2) td:nth-child(2)', 0); editor.fire('keydown', {keyCode: 9}); equal(editor.selection.getStart(true).nodeName, 'TD'); equal( editor.getContent(), '
A1A2
B1B2
  

x

' ); }); test("Delete selected cells", function() { editor.getBody().innerHTML = ( '' + '' + '' + '
A1A2
B1B2
' + '

x

' ); Utils.setSelection('td', 0, 'td', 2); editor.fire('keydown', {keyCode: 46}); equal( editor.getContent(), '
 A2
 B2

x

' ); }); test("Delete all cells", function() { editor.getBody().innerHTML = ( '' + '' + '' + '
A1A2
B1B2
' + '

x

' ); Utils.setSelection('td', 0, 'td', 2); editor.fire('keydown', {keyCode: 46}); equal( editor.getContent(), '

x

' ); }); test("Delete empty like table cell contents", function() { editor.getBody().innerHTML = ( '' + '' + '


a

' + '

x

' ); Utils.setSelection('td', 0); editor.fire('keydown', {keyCode: 46}); equal( editor.getContent(), '
 

a

x

' ); }); var testResizeTable1 = '' + '' + '' + '' + '
A1A2A3
B1B2B3
C1C2C3
D1
'; var testResizeTable2 = '' + '' + '
A0A1A2A3A4
B0B1B2B3' + 'B3
C0C1C2C3
'; var testResizeTable3 = '
' + '
 a b  c
 d  e
 f g 
 h i 
'; var testResizeTable4 = ( '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
ab
abc
a
abc
' ); test("Is Pixel/Percentage Based Width", function() { var pixelWidths = ['125px', '200px', '300em']; var percentageWidths = ['25%', '30%', '100%']; var i, pixelBasedSize, percentBasedSize; for (i = 0; i < pixelWidths.length; i++) { pixelBasedSize = editor.plugins.table.resizeBars.isPixelBasedSize(pixelWidths[i]); deepEqual(pixelBasedSize, true); percentBasedSize = editor.plugins.table.resizeBars.isPercentageBasedSize(pixelWidths[i]); deepEqual(percentBasedSize, false); } for (i = 0; i < percentageWidths.length; i++) { pixelBasedSize = editor.plugins.table.resizeBars.isPixelBasedSize(percentageWidths[i]); deepEqual(pixelBasedSize, false); percentBasedSize = editor.plugins.table.resizeBars.isPercentageBasedSize(percentageWidths[i]); deepEqual(percentBasedSize, true); } }); test("Get widths/heights", function() { editor.setContent(testResizeTable1); var table = editor.dom.select('table')[0]; var details = editor.plugins.table.resizeBars.getTableDetails(table); var tableGrid = editor.plugins.table.resizeBars.getTableGrid(details); deepEqual( editor.plugins.table.resizeBars.getWidths(tableGrid, false, table), [100, 100, 100, 100] ); deepEqual( editor.plugins.table.resizeBars.getPixelHeights(tableGrid), [20, 20, 20, 20] ); editor.setContent(testResizeTable2); table = editor.dom.select('table')[0]; details = editor.plugins.table.resizeBars.getTableDetails(table); tableGrid = editor.plugins.table.resizeBars.getTableGrid(details); deepEqual( editor.plugins.table.resizeBars.getWidths(tableGrid, false, table), [20, 20, 20, 40, 10] ); deepEqual( editor.plugins.table.resizeBars.getPixelHeights(tableGrid), [20, 20, 20] ); editor.setContent(testResizeTable3); table = editor.dom.select('table')[0]; details = editor.plugins.table.resizeBars.getTableDetails(table); tableGrid = editor.plugins.table.resizeBars.getTableGrid(details); deepEqual( editor.plugins.table.resizeBars.getWidths(tableGrid, true, table), [25, 25, 25, 25] ); }); test("Draw bars/clear bars", function() { editor.setContent(testResizeTable1); var table = editor.dom.select('table')[0]; editor.plugins.table.resizeBars.drawBars(table); equal(editor.dom.select('.mce-resize-bar-row').length, 4); equal(editor.dom.select('.mce-resize-bar-col').length, 4); editor.plugins.table.resizeBars.clearBars(); equal(editor.dom.select('.mce-resize-bar-row').length, 0); equal(editor.dom.select('.mce-resize-bar-col').length, 0); }); test("Draw bars/clear bars on invalid table", function() { editor.setContent(testResizeTable4); var table = editor.dom.select('table')[0]; editor.plugins.table.resizeBars.drawBars(table); equal(editor.dom.select('.mce-resize-bar-row').length, 4); equal(editor.dom.select('.mce-resize-bar-col').length, 4); editor.plugins.table.resizeBars.clearBars(); equal(editor.dom.select('.mce-resize-bar-row').length, 0); equal(editor.dom.select('.mce-resize-bar-col').length, 0); }); test("Determine deltas", function() { var deltas = editor.plugins.table.resizeBars.determineDeltas([100, 100, 100, 100], 0, 50, 10, false); deepEqual(deltas, [50, -50, 0, 0]); deltas = editor.plugins.table.resizeBars.determineDeltas([100, 100, 100, 100], 1, 50, 10, false); deepEqual(deltas, [0, 50, -50, 0]); deltas = editor.plugins.table.resizeBars.determineDeltas([100, 100, 100, 100], 2, 50, 10, false); deepEqual(deltas, [0, 0, 50, -50]); deltas = editor.plugins.table.resizeBars.determineDeltas([100, 100, 100, 100], 3, 50, 10, false); deepEqual(deltas, [0, 0, 0, 50]); deltas = editor.plugins.table.resizeBars.determineDeltas([50], 0, 5, 10, true); deepEqual(deltas, [50]); // 50 + 50 = 100, one column, percent case deltas = editor.plugins.table.resizeBars.determineDeltas([25, 25, 25, 25], 1, 5, 10, true); deepEqual(deltas, [0, 5, -5, 0]); }); test("Adjust width", function() { editor.setContent(testResizeTable1); var table = editor.dom.select('table')[0]; editor.plugins.table.resizeBars.adjustWidth(table, 50, 0); equal(editor.getContent(), '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
A1A2A3
B1B2B3
C1C2C3
D1
'); editor.setContent(testResizeTable1); table = editor.dom.select('table')[0]; editor.plugins.table.resizeBars.adjustWidth(table, 50, 1); equal(editor.getContent(), '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
A1A2A3
B1B2B3
C1C2C3
D1
'); editor.setContent(testResizeTable1); table = editor.dom.select('table')[0]; editor.plugins.table.resizeBars.adjustWidth(table, 50, 2); equal(editor.getContent(), '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
A1A2A3
B1B2B3
C1C2C3
D1
'); editor.setContent(testResizeTable1); table = editor.dom.select('table')[0]; editor.plugins.table.resizeBars.adjustWidth(table, 50, 3); equal(editor.getContent(), '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
A1A2A3
B1B2B3
C1C2C3
D1
'); }); test("Adjust height", function() { editor.setContent(testResizeTable2); var table = editor.dom.select('table')[0]; editor.plugins.table.resizeBars.adjustHeight(table, 50, 0); equal(editor.getContent(), '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
A0A1A2A3A4
B0B1B2B3B3
C0C1C2C3
'); editor.setContent(testResizeTable2); table = editor.dom.select('table')[0]; editor.plugins.table.resizeBars.adjustHeight(table, 50, 1); equal(editor.getContent(), '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
A0A1A2A3A4
B0B1B2B3B3
C0C1C2C3
'); editor.setContent(testResizeTable2); table = editor.dom.select('table')[0]; editor.plugins.table.resizeBars.adjustHeight(table, 50, 2); equal(editor.getContent(), '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
A0A1A2A3A4
B0B1B2B3B3
C0C1C2C3
'); }); test("Table newcell/newrow events", function() { var cells = [], rows = [], counter = 0; editor.on('newcell', function(e) { cells.push(e.node); e.node.setAttribute('data-counter', counter++); }); editor.on('newrow', function(e) { rows.push(e.node); e.node.setAttribute('data-counter', counter++); }); editor.plugins.table.insertTable(2, 3); equal(cells.length, 6); equal(rows.length, 3); equal(cells[cells.length - 1].getAttribute('data-counter'), "8"); equal(rows[rows.length - 1].getAttribute('data-counter'), "6"); }); })();