Index: /CKEditor/tests/tt/4246/1.html
===================================================================
--- /CKEditor/tests/tt/4246/1.html	(revision 4449)
+++ /CKEditor/tests/tt/4246/1.html	(revision 4449)
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+	"http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+	<title>Ticket: #4246 - update image style from dialog</title>
+	<meta name="tags" content="editor,unit,stable">
+	<script type="text/javascript" src="../../cktester/cell.js"></script>
+	<script>
+( function()
+{
+	var ts, tc, assert = CKEDITOR.test.assert, test = CKEDITOR.test, selector = YAHOO.util.Selector;
+
+	YAHOO.tool.TestRunner.add( ts = new CKEDITOR.test.suites.editorTestSuite(
+		{
+				editorName : 'test_editor_1',
+				name :document.title
+		} ) );
+
+	ts.add( tc = new YAHOO.tool.TestCase(
+		{
+			/**
+			 * Image dialog should produce valid xhtml image style instead of deprecated html attributes.
+			 */
+			test_alter_image_style : function()
+			{
+				var editor = ts.editor,
+					input = '<p><img src="http://dev.fckeditor.net/chrome/site/logos.gif" /></p>',
+					outputGecko = '<p><img src="http://dev.fckeditor.net/chrome/site/logos.gif" style="border:2px solid;float:right;height:86px;margin:10px 5px;vertical-align:bottom;width:414px;"></p>',
+					outputIE = '<p><img src="http://dev.fckeditor.net/chrome/site/logos.gif" style="border-bottom:2px solid;border-left:2px solid;border-right:2px solid;border-top:2px solid;float:right;height:86px;margin:10px 5px;vertical-align:bottom;width:414px;"></p>',
+					outputWebkit = '<p><img src="http://dev.fckeditor.net/chrome/site/logos.gif" style="border-bottom-style:solid;border-bottom-width:2px;border-color:initial;border-left-style:solid;border-left-width:2px;border-right-style:solid;border-right-width:2px;border-top-style:solid;border-top-width:2px;float:right;height:86px;margin-bottom:10px;margin-left:5px;margin-right:5px;margin-top:10px;vertical-align:bottom;width:414px;"></p>',
+					outputOpera = '<p>&nbsp;</p><p><img src="http://dev.fckeditor.net/chrome/site/logos.gif" style="border-bottom-color:currentcolor;border-bottom-style:solid;border-bottom-width:2px;border-left-color:currentcolor;border-left-style:solid;border-left-width:2px;border-right-color:currentcolor;border-right-style:solid;border-right-width:2px;border-top-color:currentcolor;border-top-style:solid;border-top-width:2px;float:right;height:86px;margin-bottom:10px;margin-left:5px;margin-right:5px;margin-top:10px;vertical-align:bottom;width:414px;"></p>';
+
+				// Force result data un-formatted.
+				editor.dataProcessor.writer._.rules = {};
+
+				editor.loadSnapshot( input );
+				editor.focus();
+				var img = new CKEDITOR.dom.element( selector.query( 'img[src]', editor.document.$ )[ 0 ] );
+				editor.getSelection().selectElement( img );
+
+				// Open dialog need some time.
+				editor.execCommand( 'image' );
+				this.wait( function()
+						{
+							var dialog = editor._.storedDialogs[ 'image' ];
+							var widthField = dialog.getContentElement( 'info', 'txtWidth' ),
+								heightField = dialog.getContentElement( 'info', 'txtHeight' ),
+								borderField = dialog.getContentElement( 'info', 'txtBorder' ),
+								hspaceField = dialog.getContentElement( 'info', 'txtHSpace' ),
+								vspaceField = dialog.getContentElement( 'info', 'txtVSpace' ),
+								alignField = dialog.getContentElement( 'info', 'cmbAlign' ),
+								floatField = dialog.getContentElement( 'info', 'cmbFloat' );
+
+							widthField.setValue( 414 );
+							heightField.setValue( 86 );
+							borderField.setValue( 2 );
+							hspaceField.setValue( 5 );
+							vspaceField.setValue( 10 );
+							alignField.setValue( 'bottom' );
+							floatField.setValue( 'right' );
+
+							dialog.fire( 'ok' );
+							dialog.hide();
+
+							var result = editor.getData();
+							assert.areEqual(
+									CKEDITOR.env.ie ? outputIE
+									: CKEDITOR.env.gecko?  outputGecko
+									: CKEDITOR.env.webkit? outputWebkit
+									: outputOpera ,
+								test.fixHtml( result ), 'Created image element attributes/style doesn\'t match.' );
+
+						}, CKEDITOR.env.ie ? 4000 : 1000 );
+			}
+		} ) );
+} )();
+	</script>
+</head>
+<body>
+<div style="height:300px">text</div>
+</body>
+</html>
Index: /CKEditor/tests/tt/4246/2.html
===================================================================
--- /CKEditor/tests/tt/4246/2.html	(revision 4449)
+++ /CKEditor/tests/tt/4246/2.html	(revision 4449)
@@ -0,0 +1,295 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+	"http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+	<title>Ticket: #4246 - Setup image dialog</title>
+	<meta name="tags" content="editor,unit,stable">
+	<script type="text/javascript" src="../../cktester/cell.js"></script>
+	<script>
+( function()
+{
+	var ts, tc, assert = CKEDITOR.test.assert, test = CKEDITOR.test, selector = YAHOO.util.Selector;
+
+	YAHOO.tool.TestRunner.add( ts = new CKEDITOR.test.suites.editorTestSuite(
+		{
+				editorName : 'test_editor_1',
+				config :
+				{
+					language : 'en'
+				},
+				name : document.title
+		} ) );
+
+	ts.add( tc = new YAHOO.tool.TestCase(
+		{
+			tearDown : function()
+			{
+				var dialog = ts.editor._.storedDialogs[ 'image' ];
+				if( dialog )
+					dialog.hide();
+			},
+//			shouldIgnoreAllBut : [ 'test_read_image_style_5' ],
+
+			/**
+			 * Image dialog should be able to read from inline style.
+			 */
+			test_read_image_style : function()
+			{
+				var editor = ts.editor,
+					input = '<p><img src="http://dev.fckeditor.net/chrome/site/logos.gif" ' +
+							'style="border:solid 2px;height:86px;margin:10px 5px;vertical-align:baseline;width:414px;"></p>';
+
+				// Force result data un-formatted.
+				editor.dataProcessor.writer._.rules = {};
+
+				editor.loadSnapshot( input );
+				editor.focus();
+				var img = new CKEDITOR.dom.element( selector.query( 'img[src]', editor.document.$ )[ 0 ] );
+				editor.getSelection().selectElement( img );
+
+				// Open dialog need some time.
+				editor.execCommand( 'image' );
+				this.wait( function()
+						{
+							var dialog = editor._.storedDialogs[ 'image' ];
+							var widthField = dialog.getContentElement( 'info', 'txtWidth' ),
+								heightField = dialog.getContentElement( 'info', 'txtHeight' ),
+								borderField = dialog.getContentElement( 'info', 'txtBorder' ),
+								hspaceField = dialog.getContentElement( 'info', 'txtHSpace' ),
+								vspaceField = dialog.getContentElement( 'info', 'txtVSpace' ),
+								alignField = dialog.getContentElement( 'info', 'cmbAlign' );
+
+//							assert.areSame( 414, parseInt( widthField.getValue() ) );
+							assert.areSame( 86, parseInt( heightField.getValue() ) );
+							assert.areSame( 2, parseInt( borderField.getValue() ) );
+							assert.areSame( 5, parseInt( hspaceField.getValue() ) );
+							assert.areSame( 10, parseInt( vspaceField.getValue() ) );
+							assert.areSame( 'baseline', alignField.getValue() );
+
+
+						}, 1000 );
+			},
+
+			/**
+			 * Image dialog should be able to read from attributes.
+			 */
+			test_read_image_style_2 : function()
+			{
+				var editor = ts.editor,
+					input = '<p><img src="http://dev.fckeditor.net/chrome/site/logos.gif" ' +
+							'border="2" height="86" width="414" vspace="10" hspace="5" align="right"></p>';
+
+				// Force result data un-formatted.
+				editor.dataProcessor.writer._.rules = {};
+
+				editor.loadSnapshot( input );
+				editor.focus();
+				var img = new CKEDITOR.dom.element( selector.query( 'img[src]', editor.document.$ )[ 0 ] );
+				editor.getSelection().selectElement( img );
+
+				// Open dialog need some time.
+				editor.execCommand( 'image' );
+				this.wait( function()
+						{
+							var dialog = editor._.storedDialogs[ 'image' ];
+							var widthField = dialog.getContentElement( 'info', 'txtWidth' ),
+								heightField = dialog.getContentElement( 'info', 'txtHeight' ),
+								borderField = dialog.getContentElement( 'info', 'txtBorder' ),
+								hspaceField = dialog.getContentElement( 'info', 'txtHSpace' ),
+								vspaceField = dialog.getContentElement( 'info', 'txtVSpace' ),
+								alignField = dialog.getContentElement( 'info', 'cmbAlign' ),
+								floatField = dialog.getContentElement( 'info', 'cmbFloat' );
+
+							assert.areSame( 414, parseInt( widthField.getValue() ) );
+							assert.areSame( 86, parseInt( heightField.getValue() ) );
+							assert.areSame( 2, parseInt( borderField.getValue() ) );
+							assert.areSame( 5, parseInt( hspaceField.getValue() ) );
+							assert.areSame( 10, parseInt( vspaceField.getValue() ) );
+							assert.areSame( 'right', floatField.getValue() );
+							assert.areSame ( '', alignField.getValue() );
+
+						}, 1000 );
+			},
+
+			/**
+			 * Image dialog should be able to read from attributes.
+			 */
+			test_read_image_style_3 : function()
+			{
+				var editor = ts.editor,
+					input = '<p><img src="http://dev.fckeditor.net/chrome/site/logos.gif" ' +
+							'align="texttop" style="float:left"></p>';
+
+				// Force result data un-formatted.
+				editor.dataProcessor.writer._.rules = {};
+
+				editor.loadSnapshot( input );
+				editor.focus();
+				var img = new CKEDITOR.dom.element( selector.query( 'img[src]', editor.document.$ )[ 0 ] );
+				editor.getSelection().selectElement( img );
+
+				// Open dialog need some time.
+				editor.execCommand( 'image' );
+				this.wait( function()
+						{
+							var dialog = editor._.storedDialogs[ 'image' ];
+								alignField = dialog.getContentElement( 'info', 'cmbAlign' ),
+								floatField = dialog.getContentElement( 'info', 'cmbFloat' );
+
+							assert.areSame( 'left', floatField.getValue() );
+							assert.areSame ( 'text-top', alignField.getValue() );
+
+						}, 1000 );
+			},
+
+			/**
+			 * Image dialog should be able to read from attributes.
+			 */
+			test_read_image_style_4 : function()
+			{
+				var editor = ts.editor,
+					input = '<p><img src="http://dev.fckeditor.net/chrome/site/logos.gif" ' +
+							'align="absmiddle" style="float:none"></p>';
+
+				// Force result data un-formatted.
+				editor.dataProcessor.writer._.rules = {};
+
+				editor.loadSnapshot( input );
+				editor.focus();
+				var img = new CKEDITOR.dom.element( selector.query( 'img[src]', editor.document.$ )[ 0 ] );
+				editor.getSelection().selectElement( img );
+
+				// Open dialog need some time.
+				editor.execCommand( 'image' );
+				this.wait( function()
+						{
+							var dialog = editor._.storedDialogs[ 'image' ];
+								alignField = dialog.getContentElement( 'info', 'cmbAlign' ),
+								floatField = dialog.getContentElement( 'info', 'cmbFloat' );
+
+							assert.areSame( '', floatField.getValue() );
+							assert.areSame ( 'middle', alignField.getValue() );
+
+						}, 1000 );
+			},
+
+			/**
+			 * Image dialog should read from inline style prior to attributes.
+			 */
+			test_read_image_style_5 : function()
+			{
+				var editor = ts.editor,
+					input = '<p><img src="http://dev.fckeditor.net/chrome/site/logos.gif" ' +
+							'border="1" height="43" width="212" vspace="0" hspace="0" align="baseline" ' +
+							'style="border:solid 2px blue;width:414px;height:86px;margin:10px 5px;vertical-align:bottom;float:right"></p>';
+
+				// Force result data un-formatted.
+				editor.dataProcessor.writer._.rules = {};
+
+				editor.loadSnapshot( input );
+				editor.focus();
+				var img = new CKEDITOR.dom.element( selector.query( 'img[src]', editor.document.$ )[ 0 ] );
+				editor.getSelection().selectElement( img );
+
+				// Open dialog need some time.
+				editor.execCommand( 'image' );
+				this.wait( function()
+						{
+							
+							var dialog = editor._.storedDialogs[ 'image' ];
+							var widthField = dialog.getContentElement( 'info', 'txtWidth' ),
+								heightField = dialog.getContentElement( 'info', 'txtHeight' ),
+								borderField = dialog.getContentElement( 'info', 'txtBorder' ),
+								hspaceField = dialog.getContentElement( 'info', 'txtHSpace' ),
+								vspaceField = dialog.getContentElement( 'info', 'txtVSpace' ),
+								alignField = dialog.getContentElement( 'info', 'cmbAlign' ),
+								floatField = dialog.getContentElement( 'info', 'cmbFloat' );
+
+							assert.areSame( 414, parseInt( widthField.getValue() ) );
+							assert.areSame( 86, parseInt( heightField.getValue() ) );
+							assert.areSame( 2, parseInt( borderField.getValue() ) );
+							assert.areSame( 5, parseInt( hspaceField.getValue() ) );
+							assert.areSame( 10, parseInt( vspaceField.getValue() ) );
+							assert.areSame( 'right', floatField.getValue() );
+							assert.areSame ( 'bottom', alignField.getValue() );
+
+						}, 1000 );
+			},
+
+			/**
+			 * Image dialog should read from inline style delivered as style components.
+			 */
+			test_read_image_style_6 : function()
+			{
+				var editor = ts.editor,
+					input = '<p><img src="http://dev.fckeditor.net/chrome/site/logos.gif" ' +
+							'style="border-bottom-width:2px;border-left-width:2px;border-right-width:2px;border-top-width:2px;' +
+							'margin-bottom:10px;margin-left:5px;margin-right:5px;margin-top:10px;"></p>';
+
+				// Force result data un-formatted.
+				editor.dataProcessor.writer._.rules = {};
+
+				editor.loadSnapshot( input );
+				editor.focus();
+				var img = new CKEDITOR.dom.element( selector.query( 'img[src]', editor.document.$ )[ 0 ] );
+				editor.getSelection().selectElement( img );
+
+				// Open dialog need some time.
+				editor.execCommand( 'image' );
+				this.wait( function()
+						{
+
+							var dialog = editor._.storedDialogs[ 'image' ];
+								borderField = dialog.getContentElement( 'info', 'txtBorder' ),
+								hspaceField = dialog.getContentElement( 'info', 'txtHSpace' ),
+								vspaceField = dialog.getContentElement( 'info', 'txtVSpace' );
+
+							assert.areSame( 2, parseInt( borderField.getValue() ) );
+							assert.areSame( 5, parseInt( hspaceField.getValue() ) );
+							assert.areSame( 10, parseInt( vspaceField.getValue() ) );
+
+						}, 1000 );
+			},
+
+			/**
+			 * Image dialog should ignore unmatched inline styles.
+			 */
+			test_read_image_style_7 : function()
+			{
+				var editor = ts.editor,
+					input = '<p><img src="http://dev.fckeditor.net/chrome/site/logos.gif" ' +
+							'style="border-style:solid;border-bottom-width:1px;border-left-width:2px;border-right-width:2px;border-top-width:2px;' +
+							'margin: 10px 5px 11px;"></p>';
+
+				// Force result data un-formatted.
+				editor.dataProcessor.writer._.rules = {};
+
+				editor.loadSnapshot( input );
+				editor.focus();
+				var img = new CKEDITOR.dom.element( selector.query( 'img[src]', editor.document.$ )[ 0 ] );
+				editor.getSelection().selectElement( img );
+
+				// Open dialog need some time.
+				editor.execCommand( 'image' );
+				this.wait( function()
+						{
+
+							var dialog = editor._.storedDialogs[ 'image' ];
+								borderField = dialog.getContentElement( 'info', 'txtBorder' ),
+								hspaceField = dialog.getContentElement( 'info', 'txtHSpace' ),
+								vspaceField = dialog.getContentElement( 'info', 'txtVSpace' );
+
+							assert.isNaN( parseInt( borderField.getValue() ) );
+							assert.areSame( 5, parseInt( hspaceField.getValue() ) );
+							assert.isNaN( parseInt( vspaceField.getValue() ) );
+
+						}, 1000 );
+			}
+		} ) );
+} )();
+	</script>
+</head>
+<body>
+<div style="height:300px">text</div>
+</body>
+</html>
