Browse Source

Tests: Added manual test for getOptimalPosition() utility.

Aleksander Nowodzinski 8 years ago
parent
commit
8a5a60c25d

+ 56 - 0
packages/ckeditor5-utils/tests/manual/position/position.html

@@ -0,0 +1,56 @@
+<div class="test-box" style="height: 200px; width: 200px">
+	<div class="test-box" style="height: 400px; width: 400px">
+		<div class="test-box" style="height: 800px; width: 800px">
+			<div class="target"></div>
+			<div class="source source-se"></div>
+		</div>
+		<div class="source source-sw"></div>
+	</div>
+	<div class="source source-ne"></div>
+</div>
+<div class="source source-nw"></div>
+
+<style>
+	body {
+		padding-top: 2000px;
+	}
+
+	.test-box {
+		padding: 15px;
+		border: 25px solid #000;
+		overflow: scroll;
+		position: relative;
+	}
+
+	.source {
+		width: 40px;
+		height: 40px;
+		background: red;
+		position: absolute;
+	}
+
+	.source-nw {
+		background: cyan;
+	}
+
+	.source-ne {
+		background: magenta;
+	}
+
+	.source-sw {
+		background: yellow;
+	}
+
+	.source-se {
+		background: black;
+	}
+
+	.target {
+		width: 80px;
+		height: 80px;
+		background: blue;
+		position: absolute;
+		bottom: 0;
+		right: 0;
+	}
+</style>

+ 59 - 0
packages/ckeditor5-utils/tests/manual/position/position.js

@@ -0,0 +1,59 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global document, setTimeout */
+
+import { getOptimalPosition } from '@ckeditor/ckeditor5-utils/src/dom/position';
+
+const boxes = document.querySelectorAll( '.test-box' );
+const sources = document.querySelectorAll( '.source' );
+const target = document.querySelector( '.target' );
+
+target.scrollIntoView();
+
+const positions = {
+	nw: ( targetRect ) => ( {
+		top: targetRect.top,
+		left: targetRect.left,
+		name: 'nw'
+	} ),
+	ne: ( targetRect, sourceRect ) => ( {
+		top: targetRect.top,
+		left: targetRect.right - sourceRect.width,
+		name: 'ne'
+	} ),
+	sw: ( targetRect, sourceRect ) => ( {
+		top: targetRect.bottom - sourceRect.height,
+		left: targetRect.left,
+		name: 'sw'
+	} ),
+	se: ( targetRect, sourceRect ) => ( {
+		top: targetRect.bottom - sourceRect.height,
+		left: targetRect.right - sourceRect.width,
+		name: 'se'
+	} )
+};
+
+for ( let box of boxes ) {
+	box.scrollTop = box.scrollHeight;
+	box.scrollLeft = box.scrollWidth;
+}
+
+// Wait for the scroll to stabilize.
+setTimeout( () => {
+	for ( let source of sources ) {
+		const position = getOptimalPosition( {
+			element: source,
+			target: target,
+			positions: [
+				positions[ source.className.split( '-' )[ 1 ] ]
+			],
+			limiter: document.body
+		} );
+
+		source.style.top = position.top + 'px';
+		source.style.left = position.left + 'px';
+	}
+}, 100 );

+ 10 - 0
packages/ckeditor5-utils/tests/manual/position/position.md

@@ -0,0 +1,10 @@
+## getOptimalPosition() utility
+
+**Expected**: At the bottom of the page, in a nested, scrolled container hierarchy, a **perfect** square divided equally into 4 sub–squares should be visible.
+
+The colors of the sub–squares should be as follows:
+
+* Upper-left corner: <span style="color: cyan">cyan</span>,
+* Upper-right corner: <span style="color: magenta">magenta</span>,
+* Bottom-left corner: <span style="color: yellow; background: black;">yellow</span>,
+* Bottom-right corner: <span style="color: black">black</span>.