Merge pull request #448 from cksource/t/417

Tableresize plugin should check if table body exists.

Fixes #417.

CHANGES.md

@@ -13,6 +13,7 @@ Fixed Issues:
 * [#457](https://github.com/ckeditor/ckeditor-dev/issues/457): Fixed: Error thrown when deleting content from the editor with no selection.
 * [#450](https://github.com/ckeditor/ckeditor-dev/issues/450): Fixed: [`CKEDITOR.filter`](http://docs.ckeditor.com/#!/api/CKEDITOR.filter) incorrectly transforms `margin` CSS property.
 * [#478](https://github.com/ckeditor/ckeditor-dev/issues/478): Fixed: [Chrome] Error thrown by [Enter Key](http://ckeditor.com/addon/enterkey) plugin when pressing enter with no selection.
+* [#417](https://github.com/ckeditor/ckeditor-dev/issues/417): Fixed: [Table Resize](http://ckeditor.com/addon/tableresize) plugin throws an error when used with a table with only header or footer rows.
 
 ## CKEditor 4.7
 

plugins/tableresize/plugin.js

@@ -52,26 +52,29 @@
 	function buildTableColumnPillars( table ) {
 		var pillars = [],
 			pillarIndex = -1,
+			pillarHeight = 0,
+			pillarPosition = null,
 			rtl = ( table.getComputedStyle( 'direction' ) == 'rtl' );
 
-		// Get the raw row element that cointains the most columns.
+		// Get the raw row element that contains the most columns.
 		var $tr = getMasterPillarRow( table );
 
-		// Get the tbody element and position, which will be used to set the
-		// top and bottom boundaries.
-		var tbody = new CKEDITOR.dom.element( table.$.tBodies[ 0 ] ),
-			pillarPosition = tbody.getDocumentPosition(),
-			pillarHeight = tbody.$.offsetHeight;
+		// Sets pillar height and position based on given table element (head, body, footer).
+		function setPillarDimensions( nativeTableElement ) {
+			if ( nativeTableElement ) {
+				var tableElement = new CKEDITOR.dom.element( nativeTableElement );
+				pillarHeight += tableElement.$.offsetHeight;
 
-		if ( table.$.tHead ) {
-			var tHead = new CKEDITOR.dom.element( table.$.tHead );
-			pillarPosition = tHead.getDocumentPosition();
-			pillarHeight += tHead.$.offsetHeight;
+				if ( !pillarPosition ) {
+					pillarPosition = tableElement.getDocumentPosition();
+				}
+			}
 		}
 
-		if ( table.$.tFoot ) {
-			pillarHeight += table.$.tFoot.offsetHeight;
-		}
+		// Table may contain only one of thead, tbody or tfoot elements so its existence should be checked (#417).
+		setPillarDimensions( table.$.tHead );
+		setPillarDimensions( table.$.tBodies[ 0 ] );
+		setPillarDimensions( table.$.tFoot );
 
 		if ( $tr ) {
 			// Loop thorugh all cells, building pillars after each one of them.

tests/plugins/tableresize/manual/footeronly.html

@@ -0,0 +1,19 @@
+<div id="editor">
+
+	<table border="1" style="width:500px">
+		<tfoot>
+			<tr>
+				<td>1</td>
+				<td>2</td>
+				<td>3</td>
+			</tr>
+		</tfoot>
+	</table>
+
+	<p>Foo Bar...</p>
+
+</div>
+
+<script>
+	CKEDITOR.replace( 'editor' );
+</script>

tests/plugins/tableresize/manual/footeronly.md

@@ -0,0 +1,12 @@
+@bender-ui: collapsed
+@bender-tags: bug, 4.7.1, 417
+@bender-ckeditor-plugins: wysiwygarea, toolbar, table, tableresize
+
+1. Focus editor.
+2. Move mouse over the table.
+	* **Expected**: No error is thrown in the browser console.
+3. Try to resize one of the table columns.
+	* **Expected**: The cursor changes to horizontal resize cursor when hovering over table borders. It is possible to
+	resize table. The `column pillar` is visible while resizing table.
+
+**Unexpected**: An error in the browser console occurs. Not possible to resize table.

tests/plugins/tableresize/manual/headeronly.html

@@ -0,0 +1,19 @@
+<div id="editor">
+
+	<table border="1" style="width:500px">
+		<thead>
+			<tr>
+				<td>1</td>
+				<td>2</td>
+				<td>3</td>
+			</tr>
+		</thead>
+	</table>
+
+	<p>Foo Bar...</p>
+
+</div>
+
+<script>
+	CKEDITOR.replace( 'editor' );
+</script>

tests/plugins/tableresize/manual/headeronly.md

@@ -0,0 +1,12 @@
+@bender-ui: collapsed
+@bender-tags: bug, 4.7.1, 417
+@bender-ckeditor-plugins: wysiwygarea, toolbar, table, tableresize
+
+1. Focus editor.
+2. Move mouse over the table.
+	* **Expected**: No error is thrown in the browser console.
+3. Try to resize one of the table columns.
+	* **Expected**: The cursor changes to horizontal resize cursor when hovering over table borders. It is possible to
+	resize table. The `column pillar` is visible while resizing table.
+
+**Unexpected**: An error in the browser console occurs. Not possible to resize table.

tests/plugins/tableresize/tableresize.html

@@ -51,3 +51,23 @@ <h1>Foo</h1>
 <table id="empty" border="1" style="width:500px">
 	<tbody> </tbody>
 </table>
+
+<table id="headeronly">
+	<thead>
+		<tr>
+			<td>1</td>
+			<td>2</td>
+			<td>3</td>
+		</tr>
+	</thead>
+</table>
+
+<table id="footeronly">
+	<tfoot>
+		<tr>
+			<td>1</td>
+			<td>2</td>
+			<td>3</td>
+		</tr>
+	</tfoot>
+</table>

tests/plugins/tableresize/tableresize.js

@@ -259,6 +259,48 @@ bender.test( {
 			}
 		} );
 
+		wait();
+	},
+
+	// #417
+	'test resizing table with thead only': function() {
+		var editor = this.editors.classic2,
+			editable = editor.editable();
+
+		editor.setData( CKEDITOR.document.findOne( '#headeronly' ).getOuterHtml(), {
+
+			callback: function() {
+				resume( function() {
+					editor.document.fire( 'mousemove', new CKEDITOR.dom.event( {
+						target: editable.findOne( 'table' ).$
+					} ) );
+
+					assert.pass();
+				} );
+			}
+		} );
+
+		wait();
+	},
+
+	// #417
+	'test resizing table with tfoot only': function() {
+		var editor = this.editors.classic2,
+			editable = editor.editable();
+
+		editor.setData( CKEDITOR.document.findOne( '#footeronly' ).getOuterHtml(), {
+
+			callback: function() {
+				resume( function() {
+					editor.document.fire( 'mousemove', new CKEDITOR.dom.event( {
+						target: editable.findOne( 'table' ).$
+					} ) );
+
+					assert.pass();
+				} );
+			}
+		} );
+
 		wait();
 	}
 } );