Sfoglia il codice sorgente

Tests: Added manual test for scrollViewportToShowTarget helper.

Aleksander Nowodzinski 8 anni fa
parent
commit
93848801b5

+ 107 - 0
packages/ckeditor5-utils/tests/manual/scroll/scroll.html

@@ -0,0 +1,107 @@
+<p>
+	<button id="scrollToBlue">Go to blue</button>
+</p>
+
+<div id="target-blue" class="test-box">
+	<div class="test-box">
+		<div class="test-box">
+			<div class="target">
+				<button>Go to red</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<div id="target-red" class="test-box">
+	<div class="test-box">
+		<div class="test-box">
+			<div class="target">
+				<button>Go to green</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<div id="target-green" class="test-box">
+	<div class="test-box">
+		<div class="test-box">
+			<div class="target">
+				<button>Go to blue</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	body {
+		height: 2000px;
+		width: 2000px;
+	}
+
+	body > .test-box {
+		position: absolute;
+	}
+
+	.test-box {
+		background: #fff;
+		padding: 15px;
+		border: 25px solid #eee;
+		overflow: scroll;
+		position: relative;
+	}
+
+	.test-box > .test-box {
+		margin-top: 1000px;
+		margin-bottom: 1000px;
+		height: 400px;
+		width: 400px;
+	}
+
+	.test-box > .test-box > .test-box {
+		height: 800px;
+		width: 800px;
+	}
+
+	.target {
+		width: 80px;
+		height: 80px;
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		color: #fff;
+	}
+
+	#target-blue .target {
+		background: blue;
+	}
+
+	#target-red .target {
+		background: red;
+	}
+
+	#target-green .target {
+		background: green;
+	}
+
+	#target-blue,
+	#target-red,
+	#target-green {
+		width: 100px;
+		height: 100px;
+	}
+
+	#target-blue {
+		left: 1500px;
+		top: 1500px;
+	}
+
+	#target-red {
+		left: 1200px;
+		top: 100px;
+	}
+
+	#target-green {
+		left: 500px;
+		top: 1300px;
+	}
+</style>

+ 32 - 0
packages/ckeditor5-utils/tests/manual/scroll/scroll.js

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global document */
+
+import { scrollViewportToShowTarget } from '@ckeditor/ckeditor5-utils/src/dom/scroll';
+
+document.getElementById( 'scrollToBlue' ).addEventListener( 'click', () => {
+	const target = document.querySelector( '#target-blue .target' );
+
+	scrollViewportToShowTarget( { target } );
+} );
+
+document.querySelector( '#target-blue button' ).addEventListener( 'click', () => {
+	const target = document.querySelector( '#target-red .target' );
+
+	scrollViewportToShowTarget( { target } );
+} );
+
+document.querySelector( '#target-red button' ).addEventListener( 'click', () => {
+	const target = document.querySelector( '#target-green .target' );
+
+	scrollViewportToShowTarget( { target } );
+} );
+
+document.querySelector( '#target-green button' ).addEventListener( 'click', () => {
+	const target = document.querySelector( '#target-blue .target' );
+
+	scrollViewportToShowTarget( { target } );
+} );

+ 21 - 0
packages/ckeditor5-utils/tests/manual/scroll/scroll.md

@@ -0,0 +1,21 @@
+## scrollViewportToShowTarget() helper
+
+1. Click the "Go to blue" button.
+
+**Expected:** The viewport is scrolled to **fully** reveal the 80x80px blue square in the bottom-right corner.
+
+2. Scroll the **viewport** right and down just a little bit.
+3. Make sure the blue square is right in the **bottom-right corner** of the topmost div containing it. **There should be only one set of scrollbars visible**.
+4. Click "Go to red".
+
+**Expected:** The viewport is scrolled to **fully** reveal the 80x80px red square in in the top area of the page.
+
+5. Scroll the **viewport** top and left just a little bit.
+6. Make sure the red square is right in the **bottom-right corner** of the topmost div containing it. **There should be only one set of scrollbars visible**.
+7. Click "Go to green".
+
+**Expected:** The viewport is scrolled to **fully** reveal the 80x80px green square in in the bottom-left corner of the page.
+
+8. Scroll the **viewport** to the bottom and left just a little bit.
+9. Make sure the green square is right in the **bottom-right corner** of the topmost div containing it. **There should be only one set of scrollbars visible**.
+10. Click "Go to blue" to repeat the cycle.