8
0
Просмотр исходного кода

Tests: Extended StickyToolbarView manual test to consider the #viewportTopOffset attribute value.

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
6a0e6f90e3

+ 66 - 19
packages/ckeditor5-ui/tests/manual/stickytoolbarview/stickytoolbarview.html

@@ -1,31 +1,70 @@
-<div class="ck-reset ck-editor">
-	<div class="ck-reset_all ck-editor__top">
+<div id="columns">
+	<div class="column">
+		<h2>Sticky to the top of the viewport</h2>
+
+		<div class="ck-reset ck-editor ck-sticky_to-the-top">
+			<div class="ck-reset_all ck-editor__top"></div>
+			<p class="ck-reset">
+				An editable content mock–up.
+				An editable content mock–up.
+				An editable content mock–up.
+				An editable content mock–up.
+				An editable content mock–up.
+				An editable content mock–up.
+				An editable content mock–up.
+				An editable content mock–up.
+			</p>
+			<div class="ck-reset_all offset-visualizer"></div>
+		</div>
 	</div>
-	<p class="ck-reset">
-		An editable content mock–up.
-		An editable content mock–up.
-		An editable content mock–up.
-		An editable content mock–up.
-		An editable content mock–up.
-		An editable content mock–up.
-		An editable content mock–up.
-		An editable content mock–up.
-	</p>
-	<div class="ck-reset_all offset-visualizer">
+	<div class="column">
+		<h2>Sticky to the green box</h2>
+
+		<div class="ck-reset ck-editor ck-sticky_to-the-box">
+			<div class="ck-reset_all ck-editor__top "></div>
+			<p class="ck-reset">
+				An editable content mock–up.
+				An editable content mock–up.
+				An editable content mock–up.
+				An editable content mock–up.
+				An editable content mock–up.
+				An editable content mock–up.
+				An editable content mock–up.
+				An editable content mock–up.
+			</p>
+			<div class="ck-reset_all offset-visualizer"></div>
+		</div>
+
+		<div id="fixed">The toolbar should stick to me instead of the viewport.</div>
 	</div>
 </div>
 
 <style>
+	body {
+		width: 3000px;
+		height: 3000px;
+		padding-top: 150px;
+	}
+
+	#columns {
+		overflow: hidden;
+	}
+
+	.column {
+		float: left;
+		width: 350px;
+		padding: 1em;
+	}
+
 	.ck-editor {
 		height: 200px;
-		max-width: 400px;
-		margin: 5em;
 		background: #ccc;
 		position: relative;
 	}
 
 	.ck-toolbar {
-		background: #fff !important;
+		background: yellow !important;
+		padding: 1em;
 	}
 
 	.ck-toolbar:after {
@@ -45,8 +84,16 @@
 		content: "An offset mock–up. Toolbar should *never* cover the red area.";
 	}
 
-	body {
-		width: 3000px;
-		height: 3000px;
+	#fixed {
+		height: 100px;
+		width: 350px;
+		position: fixed;
+		top: 0;
+		z-index: 9999;
+		background: green;
+		opacity: .8;
+		color: #fff;
+		box-sizing: border-box;
+		padding: 30px;
 	}
 </style>

+ 8 - 2
packages/ckeditor5-ui/tests/manual/stickytoolbarview/stickytoolbarview.js

@@ -9,10 +9,14 @@ import StickyToolbarView from '../../../src/toolbar/sticky/stickytoolbarview';
 import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
 
 const ui = testUtils.createTestUIView( {
-	top: '.ck-editor__top'
+	stickyToTheTop: '.ck-sticky_to-the-top .ck-editor__top',
+	stickyToTheBox: '.ck-sticky_to-the-box .ck-editor__top'
 } );
 
-createToolbar( ui.top );
+createToolbar( ui.stickyToTheTop );
+const stickyToTheBoxToolbar = createToolbar( ui.stickyToTheBox );
+
+stickyToTheBoxToolbar.viewportTopOffset = 100;
 
 function createToolbar( collection ) {
 	const toolbar = new StickyToolbarView();
@@ -21,4 +25,6 @@ function createToolbar( collection ) {
 
 	collection.add( toolbar );
 	toolbar.isActive = true;
+
+	return toolbar;
 }

+ 9 - 0
packages/ckeditor5-ui/tests/manual/stickytoolbarview/stickytoolbarview.md

@@ -1,10 +1,19 @@
 ## Vertical scrolling
 
+### Sticky to the top of the viewport
+
 1. When the page is scrolled vertically, the toolbar should
 	1. stick to the top of the viewport first,
 	1. then disappear beyond the upper edge of the viewport as it touches the red area
 	1. but never cover the red area or go beyond the upper edge of editor mock–up.
 
+### Sticky to the green box
+
+1. When the page is scrolled vertically, the toolbar should
+	1. stick to the bottom of the green box first,
+	1. then disappear beyond the bottom edge of the green box as it touches the red area
+	1. but never cover the red area or go beyond the upper edge of editor mock–up.
+
 ## Horizontal scrolling
 
 1. The toolbar should always fit horizontally within the editor mock–up, regardless of the position of the h– and v–scrolls of the web page.