Merge pull request #1435 from ckeditor/t/898

Long image alt text protrudes into editor when image is selected

CHANGES.md

@@ -14,6 +14,7 @@ Fixed Issues:
 * [#2294](/~https://github.com/ckeditor/ckeditor-dev/issues/2294) Fixed: Pasting content from MS Outlook and then bolding it results with an error.
 * [#2035](/~https://github.com/ckeditor/ckeditor-dev/issues/2035) [Edge] Fixed: `Permission denied` is thrown when opening [Panel](https://ckeditor.com/cke4/addon/panel) instance.
 * [#965](/~https://github.com/ckeditor/ckeditor-dev/issues/965) Fixed: The [`config.forceSimpleAmpersand`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-forceSimpleAmpersand) option does no longer work. Thanks to [Alex Maris](/~https://github.com/alexmaris)!
+* [#898](/~https://github.com/ckeditor/ckeditor-dev/issues/898): Fixed: [Enhanced Image](https://ckeditor.com/cke4/addon/image2) long alt text protrudes into editor when image is selected.
 
 API Changes:
 

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,36 @@ bender.test( {
 
 			assert.areEqual( '<p>[[placeholder]]</p>', editor.getData() );
 		} );
+	},
+
+	// (#898)
+	'test hidden selection container styles': function() {
+		var bot = this.editorBot,
+			editor = bot.editor;
+
+		bot.setData( '<p>[<span id="bar">bar</span>]</p>', function() {
+			var hiddenSelectionContainer, expected;
+
+			editor.getSelection().fake( editor.document.getById( 'bar' ), '<i>foo</i>' );
+
+			hiddenSelectionContainer = editor.editable().findOne( '[data-cke-hidden-sel]' );
+
+			if ( CKEDITOR.env.ie && CKEDITOR.env.version < 14 ) {
+				assert.areEqual( 'none', hiddenSelectionContainer.getStyle( 'display' ) );
+			} else {
+				expected = {
+					position: 'fixed',
+					top: '0px',
+					left: '-1000px',
+					width: '0px',
+					height: '0px',
+					overflow: 'hidden'
+				};
+
+				for ( var key in expected ) {
+					assert.areEqual( expected[ key ] , hiddenSelectionContainer.getComputedStyle( key ) );
+				}
+			}
+		} );
 	}
 } );

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 Firefox with 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.