Browse Source

Tests: Updated the image style manual test with formatting styles.

Aleksander Nowodzinski 8 years ago
parent
commit
b5addfc264

+ 2 - 1
packages/ckeditor5-image/tests/manual/caption.js

@@ -28,7 +28,8 @@ ClassicEditor
 		],
 		toolbar: [ 'headings', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList' ],
 		image: {
-			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
+			styles: [ 'imageStyleFull', 'imageStyleAlignCenter' ],
+			toolbar: [ 'imageStyleFull', 'imageStyleAlignCenter', '|', 'imageTextAlternative' ]
 		}
 	} )
 	.then( editor => {

+ 11 - 1
packages/ckeditor5-image/tests/manual/imagestyle.html

@@ -1,10 +1,20 @@
-<div id="editor">
+<h2>Semantic–oriented images</h2>
+
+<div id="editor-semantic">
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<figure class="image">
 		<img src="sample.jpg" alt="" />
 	</figure>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+</div>
+
+<h2>Formatting–oriented images</h2>
+<div id="editor-formatting">
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+	<figure class="image image-style-align-center">
+		<img src="sample.jpg" alt="" />
+	</figure>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 </div>

+ 28 - 2
packages/ckeditor5-image/tests/manual/imagestyle.js

@@ -17,7 +17,7 @@ import ImageStyle from '../../src/imagestyle';
 import ImageToolbar from '../../src/imagetoolbar';
 
 ClassicEditor
-	.create( document.querySelector( '#editor' ), {
+	.create( document.querySelector( '#editor-semantic' ), {
 		plugins: [
 			ImageToolbar,
 			EnterPlugin,
@@ -35,7 +35,33 @@ ClassicEditor
 		}
 	} )
 	.then( editor => {
-		window.editor = editor;
+		window.editorSemantic = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+ClassicEditor
+	.create( document.querySelector( '#editor-formatting' ), {
+		plugins: [
+			ImageToolbar,
+			EnterPlugin,
+			TypingPlugin,
+			ParagraphPlugin,
+			HeadingPlugin,
+			ImagePlugin,
+			UndoPlugin,
+			ClipboardPlugin,
+			ImageStyle
+		],
+		toolbar: [ 'headings', 'undo', 'redo' ],
+		image: {
+			styles: [ 'imageStyleAlignLeft', 'imageStyleAlignCenter', 'imageStyleAlignRight' ],
+			toolbar: [ 'imageStyleAlignLeft', 'imageStyleAlignCenter', 'imageStyleAlignRight' ]
+		}
+	} )
+	.then( editor => {
+		window.editorFormatting = editor;
 	} )
 	.catch( err => {
 		console.error( err.stack );

+ 7 - 0
packages/ckeditor5-image/tests/manual/imagestyle.md

@@ -1,6 +1,13 @@
 ## ImageStyle feature
 
+### The "semantic–oriented" editor
+
 * Click on image - toolbar with icons should appear. "Full size image" icon should be selected.
 * Click on "Side image" icon. Image should be aligned to right.
 * Click on "Full size image" icon. Image should be back to its original state.
 * Resize the browser window so the scrollbar is visible. Click on image and scroll editor contents - check if toolbar is placed in proper position.
+
+### The "formatting–oriented" editor
+
+* Click on image - toolbar with icons should appear. "Centered image" icon should be selected.
+* Check if other icons icons change the alignment of the image.