Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Tests: Added manual test for #60.
Browse files Browse the repository at this point in the history
  • Loading branch information
oleq committed Jul 20, 2017
1 parent 71fef28 commit 8a57a5c
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 0 deletions.
37 changes: 37 additions & 0 deletions tests/manual/tickets/60/1.html
Original file line number Diff line number Diff line change
@@ -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 changes: 32 additions & 0 deletions tests/manual/tickets/60/1.js
Original file line number Diff line number Diff line change
@@ -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 changes: 20 additions & 0 deletions tests/manual/tickets/60/1.md
Original file line number Diff line number Diff line change
@@ -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.

0 comments on commit 8a57a5c

Please sign in to comment.