Merge branch 't/12707'

Author: mlewand

CHANGES.md

@@ -3,6 +3,10 @@ CKEditor 4 Changelog
 
 ## CKEditor 4.5.8
 
+Other Changes:
+
+* [#12707](http://dev.ckeditor.com/ticket/12707): Fixed: Table elements order to meet HTML specification.
+
 ## CKEditor 4.5.7
 
 New Features:

plugins/table/dialogs/table.js

@@ -157,10 +157,15 @@
 					// Should we make a <thead>?
 					var headers = info.selHeaders;
 					if ( !table.$.tHead && ( headers == 'row' || headers == 'both' ) ) {
-						var thead = new CKEDITOR.dom.element( table.$.createTHead() );
+						var thead = table.findOne( 'thead' );
 						tbody = table.getElementsByTag( 'tbody' ).getItem( 0 );
 						var theRow = tbody.getElementsByTag( 'tr' ).getItem( 0 );
 
+						if ( !thead ) {
+							thead = new CKEDITOR.dom.element( 'thead' );
+							thead.insertBefore( tbody );
+						}
+
 						// Change TD to TH:
 						for ( i = 0; i < theRow.getChildCount(); i++ ) {
 							var th = theRow.getChild( i );
@@ -498,10 +503,7 @@
 									captionElement.setHtml( '' );
 								} else {
 									captionElement = new CKEDITOR.dom.element( 'caption', editor.document );
-									if ( table.getChildCount() )
-										captionElement.insertBefore( table.getFirst() );
-									else
-										captionElement.appendTo( table );
+									table.append( captionElement, true );
 								}
 								captionElement.append( new CKEDITOR.dom.text( caption, editor.document ) );
 							} else if ( captionElement.count() > 0 ) {

tests/plugins/table/caption.js

@@ -0,0 +1,66 @@
+/* bender-tags: editor,unit,table */
+/* bender-ckeditor-plugins: toolbar,dialog,table */
+
+( function() {
+	'use strict';
+
+	bender.editor = true;
+
+	bender.test( {
+
+		'test caption index in table without headers': function() {
+			var bot = this.editorBot;
+
+			bot.dialog( 'tableProperties', function( dialog ) {
+				dialog.setValueOf( 'info', 'txtCaption', 'Caption1' );
+				dialog.getButton( 'ok' ).click();
+
+				var table = bot.editor.document.find( 'table' );
+				assert.areSame( table.count(), 1, 'Table inserted.' );
+				assert.areSame( table.getItem( 0 ).getChild( 0 ).getName(), 'caption', 'Caption element is first child of table.' );
+			} );
+		},
+
+		'test caption index in table with headers row': function() {
+			var bot = this.editorBot;
+
+			bot.dialog( 'tableProperties', function( dialog ) {
+				dialog.setValueOf( 'info', 'txtCaption', 'Caption2' );
+				dialog.setValueOf( 'info', 'selHeaders', 'row' );
+				dialog.getButton( 'ok' ).click();
+
+				var table = bot.editor.document.find( 'table' );
+				assert.areSame( table.count(), 1, 'Table inserted.' );
+				assert.areSame( table.getItem( 0 ).getChild( 0 ).getName(), 'caption', 'Caption element is first child of table.' );
+			} );
+		},
+
+		'test caption index in table with headers col': function() {
+			var bot = this.editorBot;
+
+			bot.dialog( 'tableProperties', function( dialog ) {
+				dialog.setValueOf( 'info', 'txtCaption', 'Caption3' );
+				dialog.setValueOf( 'info', 'selHeaders', 'col' );
+				dialog.getButton( 'ok' ).click();
+
+				var table = bot.editor.document.find( 'table' );
+				assert.areSame( table.count(), 1, 'Table inserted.' );
+				assert.areSame( table.getItem( 0 ).getChild( 0 ).getName(), 'caption', 'Caption element is first child of table.' );
+			} );
+		},
+
+		'test caption index in table with both headers': function() {
+			var bot = this.editorBot;
+
+			bot.dialog( 'tableProperties', function( dialog ) {
+				dialog.setValueOf( 'info', 'txtCaption', 'Caption4' );
+				dialog.setValueOf( 'info', 'selHeaders', 'both' );
+				dialog.getButton( 'ok' ).click();
+
+				var table = bot.editor.document.find( 'table' );
+				assert.areSame( table.count(), 1, 'Table inserted.' );
+				assert.areSame( table.getItem( 0 ).getChild( 0 ).getName(), 'caption', 'Caption element is first child of table.' );
+			} );
+		}
+	} );
+} )();

tests/plugins/table/manual/tagsorder.html

@@ -0,0 +1,5 @@
+<textarea id="editor1"></textarea>
+
+<script>
+	CKEDITOR.replace( 'editor1' );
+</script>

tests/plugins/table/manual/tagsorder.md

@@ -0,0 +1,13 @@
+@bender-tags: 4.5.8, tc, 12707
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea,toolbar,table,sourcearea
+
+1. Click on the Table button.
+1. Select Headers: **Both**.
+1. Type **foo** in Caption field.
+1. Click Ok.
+	* The table with 3 row and 2 columns was created.
+1. Click the Source toolbar button and view the generated HTML.
+	* The `caption` element is the first, direct child of `table` element,
+	* The `caption` element contains text "foo",
+	* `thead` is a second child of the `table` element.