Long image alt text protrudes into editor when image is selected

CHANGES.md

@@ -18,6 +18,7 @@ Fixed Issues:
 API Changes:
 
 * [#1451](/~https://github.com/ckeditor/ckeditor-dev/issues/1451): Fixed: Context menu is incorrectly positioned when opened with `Shift-F10`.
+* [#898](/~https://github.com/ckeditor/ckeditor-dev/issues/898): Fixed: [Image2](https://ckeditor.com/cke4/addon/image2) long alt text protrudes into editor when image is selected.
 
 ## CKEditor 4.10.1
 

core/selection.js

@@ -458,7 +458,7 @@
 	// Creates cke_hidden_sel container and puts real selection there.
 	function hideSelection( editor, ariaLabel ) {
 		var content = ariaLabel && CKEDITOR.tools.htmlEncode( ariaLabel ) || ' ',
-			style = CKEDITOR.env.ie && CKEDITOR.env.version < 14 ? 'display:none' : 'position:fixed;top:0;left:-1000px',
+			style = CKEDITOR.env.ie && CKEDITOR.env.version < 14 ? 'display:none' : 'position:fixed;top:0;left:-1000px;width:0;height:0;overflow:hidden;',
 			hiddenEl = CKEDITOR.dom.element.createFromHtml(
 				'<div data-cke-hidden-sel="1" data-cke-temp="1" style="' + style + '">' + content + '</div>',
 				editor.document );

tests/core/selection/fake.js

@@ -1096,5 +1096,35 @@ bender.test( {
 
 			assert.areEqual( '<p>[[placeholder]]</p>', editor.getData() );
 		} );
+	},
+
+	// (#898)
+	'Test image long alt visibility': function() {
+		var bot = this.editorBot,
+			editor = bot.editor;
+
+		bot.setData( '<p>[<span id="bar">bar</span>]</p>', function() {
+			var altContainer, styles, expected;
+
+			editor.getSelection().fake( editor.document.getById( 'bar' ), '<i>foo</i>' );
+
+			altContainer = editor.editable().findOne( '[data-cke-hidden-sel]' );
+
+			if ( CKEDITOR.env.ie && CKEDITOR.env.version < 14 ) {
+				assert.areEqual( 'none', altContainer.getStyle( 'display' ) );
+			} else {
+				styles = CKEDITOR.tools.parseCssText( altContainer.getAttributes().style );
+				expected = {
+					position: 'fixed',
+					top: 0,
+					left: '-1000px',
+					width: 0,
+					height: 0,
+					overflow: 'hidden'
+				};
+
+				assert.isTrue( CKEDITOR.tools.objectCompare( expected, styles ) );
+			}
+		} );
 	}
 } );

tests/core/selection/manual/hiddenselcontainer.html

@@ -0,0 +1,7 @@
+<div id="editor">
+	<p>Test: <img src="%BASE_PATH%/_assets/logo.png" alt="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."></p>
+</div>
+
+<script>
+	CKEDITOR.replace( 'editor' );
+</script>

tests/core/selection/manual/hiddenselcontainer.md

@@ -0,0 +1,29 @@
+@bender-tags: 4.10.2, bug, 898
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, image2
+
+Click on the image
+
+## Expected:
+
+There shouldn't be any visible text around the image.
+
+## Unexpected:
+
+There is a visible text around the image.
+
+# Test steps for browsers supporting JAWS text reader:
+
+1. Open JAWS.
+1. Place caret in the text, eg: `Test: ^`.
+1. Use right arrow to select the image.
+
+## Expected:
+
+Text reader reads image alt text:
+
+	Lorem ipsum dolor sit amet, consetetur sadipscing elitr...
+
+## Unexpected:
+
+Text reader doesn't read image alt text.