Merge branch 't/10448'

CHANGES.md

@@ -6,6 +6,7 @@ CKEditor 4 Changelog
 Other Changes:
 
 * [#12440](http://dev.ckeditor.com/ticket/12440): Added the [`config.colorButton_enableAutomatic`](http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-colorButton_enableAutomatic) option to allow hiding the "Automatic" option in the color picker.
+* [#10448](http://dev.ckeditor.com/ticket/10448): Fixed: [Bidi] Lack of scrollbar in the RTL text direction.
 * [#13756](http://dev.ckeditor.com/ticket/13756): Fixed: Context menus are cut-off in Microsoft Edge.
 * [#12707](http://dev.ckeditor.com/ticket/12707): Fixed: The order of table elements does not meet the HTML specification.
 

contents.css

@@ -22,6 +22,9 @@ body
 {
 	font-size: 13px;
 	line-height: 1.6;
+
+	/* Fix for missing scrollbars with RTL texts. (#10488) */
+	word-wrap: break-word;
 }
 
 blockquote

tests/tickets/10448/1.html

@@ -0,0 +1 @@
+<p dir="rtl">VerylongWordThatShouldBreakIntoSeveralLinesVerylongWordThatShouldBreakIntoSeveralLinesVerylongWordThatShouldBreakIntoSeveralLinesVerylongWordThatShouldBreakIntoSeveralLinesVerylongWordThatShouldBreakIntoSeveralLinesVerylongWordThatShouldBreakIntoSeveralLinesVerylongWordThatShouldBreakIntoSeveralLinesVerylongWordThatShouldBreakIntoSeveralLinesVerylongWordThatShouldBreakIntoSeveralLines</p>

tests/tickets/10448/1.js

@@ -0,0 +1,28 @@
+/* bender-tags: 10448 */
+/* bender-ckeditor-plugins: toolbar, bidi, wysiwygarea */
+
+( function() {
+	'use strict';
+
+	bender.editor = {
+		config: {
+			width: 300
+		}
+	};
+
+	bender.test( {
+		'test paragraph fits into editable width': function() {
+			var html = CKEDITOR.document.findOne( 'p' ).getOuterHtml(),
+				editor = this.editor,
+				editable = editor.editable(),
+				editableSize = editable.getSize( 'width' ),
+				paragraphSize;
+
+			this.editorBot.setData( html, function() {
+				paragraphSize = editable.findOne( 'p' ).$.scrollWidth;
+
+				assert.isTrue( editableSize >= paragraphSize );
+			} );
+		}
+	} );
+} )();

tests/tickets/10448/2.html

@@ -0,0 +1,9 @@
+<div id="editor1">
+	<p dir="rtl">VerylongWordThatShouldBreakIntoSeveralLinesVerylongWordThatShouldBreakIntoSeveralLinesVerylongWordThatShouldBreakIntoSeveralLinesVerylongWordThatShouldBreakIntoSeveralLinesVerylongWordThatShouldBreakIntoSeveralLinesVerylongWordThatShouldBreakIntoSeveralLinesVerylongWordThatShouldBreakIntoSeveralLinesVerylongWordThatShouldBreakIntoSeveralLinesVerylongWordThatShouldBreakIntoSeveralLines</p>
+</div>
+
+<script>
+	CKEDITOR.replace( 'editor1', {
+		width: 600
+	} );
+</script>

tests/tickets/10448/2.md

@@ -0,0 +1,9 @@
+@bender-tags: 4.5.8, tc, 10448
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, bidi
+
+----
+
+1. Look at the editable.
+
+**Expected:** The text inside editable area should be broken between several lines.