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>
 	</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>
 </div>
 </div>
 
 
 <style>
 <style>
+	body {
+		width: 3000px;
+		height: 3000px;
+		padding-top: 150px;
+	}
+
+	#columns {
+		overflow: hidden;
+	}
+
+	.column {
+		float: left;
+		width: 350px;
+		padding: 1em;
+	}
+
 	.ck-editor {
 	.ck-editor {
 		height: 200px;
 		height: 200px;
-		max-width: 400px;
-		margin: 5em;
 		background: #ccc;
 		background: #ccc;
 		position: relative;
 		position: relative;
 	}
 	}
 
 
 	.ck-toolbar {
 	.ck-toolbar {
-		background: #fff !important;
+		background: yellow !important;
+		padding: 1em;
 	}
 	}
 
 
 	.ck-toolbar:after {
 	.ck-toolbar:after {
@@ -45,8 +84,16 @@
 		content: "An offset mock–up. Toolbar should *never* cover the red area.";
 		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>
 </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';
 import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
 
 
 const ui = testUtils.createTestUIView( {
 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 ) {
 function createToolbar( collection ) {
 	const toolbar = new StickyToolbarView();
 	const toolbar = new StickyToolbarView();
@@ -21,4 +25,6 @@ function createToolbar( collection ) {
 
 
 	collection.add( toolbar );
 	collection.add( toolbar );
 	toolbar.isActive = true;
 	toolbar.isActive = true;
+
+	return toolbar;
 }
 }

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

@@ -1,10 +1,19 @@
 ## Vertical scrolling
 ## Vertical scrolling
 
 
+### Sticky to the top of the viewport
+
 1. When the page is scrolled vertically, the toolbar should
 1. When the page is scrolled vertically, the toolbar should
 	1. stick to the top of the viewport first,
 	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. 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.
 	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
 ## 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.
 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.