tests: added a fancy global editor toolbar imitation using inline too…

…lbar.

tests/plugins/inlinetoolbar/context/manual/toolbar.html

@@ -0,0 +1,78 @@
+<style>
+	body {
+		/* (#1048) */
+		margin-left: 0px;
+		padding-left: 400px;
+		padding-top: 40px;
+	}
+</style>
+
+<textarea id="editor1" cols="10" rows="10">
+	<p>Sample paragraph with <em>emphasize</em>, <strong>strong</strong>, <u>underline</u> and <s>strike thourgh</s>.</p>
+	<ol>
+		<li>List item with a plain text only.</li>
+		<li>
+			<p>List item with <em>emphasize</em>, <strong>strong</strong>, <u>underline</u> and <s>strike thourgh</s>.</p>
+		</li>
+		<li>List item with a plain text only.</li>
+	</ol>
+	<p>Paragraph after the list.</p>
+</textarea>
+
+<div id="editor2" contenteditable="true" style="width: 500px">
+	<p>Sample paragraph with <em>emphasize</em>, <strong>strong</strong>, <u>underline</u> and <s>strike thourgh</s>.</p>
+	<ol>
+		<li>List item with a plain text only.</li>
+		<li>
+			<p>List item with <em>emphasize</em>, <strong>strong</strong>, <u>underline</u> and <s>strike thourgh</s>.</p>
+		</li>
+		<li>List item with a plain text only.</li>
+	</ol>
+	<p>Paragraph after the list.</p>
+</div>
+
+<style>
+.cke_top { display: none; }
+</style>
+
+<script>
+	CKEDITOR.disableAutoInline = true;
+
+	var config = {
+			height: 300,
+			width: 500,
+			on: {
+				instanceReady: function( evt ) {
+					// Register the toolbar for inline elements.
+					evt.editor.inlineToolbar.create( {
+						buttons: 'Strike,Underline',
+						cssSelector: 'u, s'
+					} );
+
+
+					evt.editor.inlineToolbar.create( {
+						buttons: 'BulletedList,NumberedList',
+						cssSelector: 'li'
+					} );
+
+					var inlineToolbarContext = evt.editor.inlineToolbar.create( {
+						buttons: 'Source,Save,NewPage,Preview,Print,Templates,Cut,Copy,Paste,PasteText,PasteFromWord,Undo,Redo,Find,Replace,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Bold,Italic,Underline,Strike,Subscript,Superscript,CopyFormatting,RemoveFormat,NumberedList,BulletedList,Outdent,Indent,Blockquote,CreateDiv,JustifyLeft,JustifyCenter,JustifyRight,JustifyBlock,BidiLtr,BidiRtl,Language,Link,Unlink,Anchor,Image,Flash,Table,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe,Styles,Format,Font,FontSize,TextColor,BGColor,Maximize,ShowBlocks,About',
+						refresh: function( editor ) { return editor.editable(); },
+						priority: CKEDITOR.plugins.inlinetoolbar.PRIORITY.LOW
+					} );
+
+					// Only for that single toolbar, customize the alignment, so that it's always top hcenter.
+					inlineToolbarContext.toolbar._view._getAlignments = function( elementRect, panelWidth, panelHeight ) {
+						var ret = CKEDITOR.ui.inlineToolbarView.prototype._getAlignments.call( this, elementRect, panelWidth, panelHeight );
+
+						return {
+							'top hcenter': ret[ 'top hcenter' ]
+						}
+					};
+				}
+			}
+		};
+
+	CKEDITOR.replace( 'editor1', config );
+	CKEDITOR.inline( 'editor2', config );
+</script>

tests/plugins/inlinetoolbar/context/manual/toolbar.md

@@ -0,0 +1,23 @@
+@bender-ui: collapsed
+@bender-tags: 4.8.0, feature, inlinetoolbar, 933
+@bender-ckeditor-plugins: wysiwygarea, toolbar, undo, basicstyles, floatingspace, inlinetoolbar, sourcearea, list, link, elementspath, language, stylescombo, image
+
+## Editor Toolbar Imitation
+
+Selecting:
+* `u, s` - will show `Strike,Underline` buttons.
+*  `li` - will show `BulletedList,NumberedList` buttons.
+* _any other selection_ - shuold display a toolbar context displayed on the top of the editor.
+
+### Test Case
+
+Put a selection in `Para^graph after the list.`
+
+#### Expected
+
+A toolbar with many buttons is shown on top of the editor.
+
+#### Actual
+
+* Toolbar has only 2 buttons.
+* Toolbar is displayed over the focused paragraph.