浏览代码

Tests: Added manual test for #60.

Aleksander Nowodzinski 8 年之前
父节点
当前提交
de00292527

+ 37 - 0
packages/ckeditor5-editor-classic/tests/manual/tickets/60/1.html

@@ -0,0 +1,37 @@
+<div id="editor">
+	<h2>Hello world!</h2>
+	<p>This is an editor instance.</p>
+	<p>This is an editor instance.</p>
+	<p>This is an editor instance.</p>
+	<p>This is an editor instance.</p>
+	<p>This is an editor instance.</p>
+	<p>This is an editor instance.</p>
+</div>
+
+<div id="fixed">The toolbar should stick to me instead of the viewport.</div>
+
+<style>
+	body {
+		height: 10000px;
+	}
+
+	.ck-editor {
+		margin-top: 200px;
+		margin-left: 100px;
+		margin-bottom: 200px;
+		width: 450px;
+	}
+
+	#fixed {
+		width: 100%;
+		height: 100px;
+		position: fixed;
+		top: 0;
+		z-index: 9999;
+		background: green;
+		opacity: .8;
+		color: #fff;
+		box-sizing: border-box;
+		padding: 40px;
+	}
+</style>

+ 32 - 0
packages/ckeditor5-editor-classic/tests/manual/tickets/60/1.js

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console:false, document, window */
+
+import ClassicEditor from '../../../../src/classiceditor';
+import Enter from '@ckeditor/ckeditor5-enter/src/enter';
+import Typing from '@ckeditor/ckeditor5-typing/src/typing';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Undo from '@ckeditor/ckeditor5-undo/src/undo';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+
+ClassicEditor.create( document.querySelector( '#editor' ), {
+	plugins: [ Enter, Typing, Paragraph, Undo, Heading, Bold, Italic ],
+	toolbar: {
+		items: [ 'headings', 'bold', 'italic', 'undo', 'redo' ],
+		verticalOffset: 100
+	}
+} )
+.then( newEditor => {
+	console.log( 'Editor was initialized', newEditor );
+	console.log( 'You can now play with it using global `editor` and `editable` variables.' );
+
+	window.editor = newEditor;
+} )
+.catch( err => {
+	console.error( err.stack );
+} );

+ 20 - 0
packages/ckeditor5-editor-classic/tests/manual/tickets/60/1.md

@@ -0,0 +1,20 @@
+### The toolbar should support a vertical offset from the top of the web page [#60](https://github.com/ckeditor/ckeditor5-editor-classic/issues/60)
+
+## Focus then scroll
+
+1. Focus the editor.
+2. Scroll the web page until the toolbar reaches the green box boundaries.
+
+**Expected:**
+
+1. The toolbar should stick to the green box instead of the viewport edge, respecting `toolbar.viewportTopOffset` configuration.
+2. At some point, the toolbar should disappear below the green box, leaving some space for the last paragraph of the content to remain visible.
+
+## Scroll then focus
+
+1. Scroll the web page until the toolbar is underneath the green box.
+2. Focus the editor.
+
+**Expected:**
+
+1. The toolbar should stick to the lower boundary of the green box.