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

Tests: Created manual test for scrollViewportToShowTarget in an iframe.

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

+ 43 - 0
packages/ckeditor5-utils/tests/manual/scroll/assets/scroll-iframe-child.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>Child frame</title>
+	</head>
+	<body>
+		<div id="target">Yay, you can see me!</div>
+		<div id="info">
+			There is nothing to do here as it is just a sub-component of another test.
+			<br/>
+			<a href="../scroll-iframe.html">Click here to continue testing</a>.
+		</div>
+	</body>
+	<style>
+		.manual-test-container {
+			padding: 50px;
+			width: 3000px;
+			height: 3000px;
+		}
+
+		.manual-test-sidebar {
+			display: none;
+		}
+
+		#target {
+			background: red;
+			width: 200px;
+			height: 200px;
+			margin-top: 1000px;
+			margin-left: 2000px;
+			border: 10px solid green;
+		}
+
+		#info {
+			position: fixed;
+			top: 50%;
+			left: 50%;
+			transform: translateX( -50% );
+			display: none;
+		}
+	</style>
+</html>

+ 11 - 0
packages/ckeditor5-utils/tests/manual/scroll/assets/scroll-iframe-child.js

@@ -0,0 +1,11 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global window, document */
+
+// Display an info when this file is ran as a standalone test.
+if ( window.top === window ) {
+	document.getElementById( 'info' ).style.display = 'block';
+}

+ 0 - 0
packages/ckeditor5-utils/tests/manual/scroll/assets/scroll-iframe-child.md


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

@@ -0,0 +1,36 @@
+<button id="scroll">Scroll</button>
+
+<div id="scrollable">
+	<iframe src="assets/scroll-iframe-child.html"></iframe>
+</div>
+
+<style>
+	body {
+		height: 3000px;
+		width: 3000px;
+	}
+
+	button {
+		display: block;
+		position: fixed;
+		top: 1em;
+		right: 1em;
+		padding: 1em;
+	}
+
+	#scrollable {
+		border: 30px solid orange;
+		width: 500px;
+		height: 500px;
+		overflow: scroll;
+		margin-top: 2000px;
+		margin-left: 2000px;
+	}
+
+	iframe {
+		margin: 1000px;
+		border: 20px solid blue;
+		height: 300px;
+		width: 300px;
+	}
+</style>

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

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

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

@@ -0,0 +1,32 @@
+## scrollViewportToShowTarget() helper in an iframe
+
+The aim of this test is checking if the helper function works for targets residing in a child document (window) within an `<iframe>`. There are 3 elements that interact in this test:
+
+1. the **target**, which is a <span style="background: red; border: 3px solid green">red square with green border</span>,
+2. the **iframe**, which is a <span style="background: white; border: 3px solid blue">blue–bordered square</span>,
+3. the scrollable **iframe parent** <span style="background: white; border: 3px solid orange">has an orange border</span>.
+
+## Scenario #1
+
+1. Click the "Scroll" button in the upper–right corner of the viewport.
+
+**Expected**:
+
+The viewport should scroll so the red (target) square (and its green border). It should be revealed and completely visible in the viewport. Most certainly, it will land directly in the bottom–right corner of the viewport.
+
+## Scenario #2
+
+1. Click the "Scroll" button again.
+
+**Expected**:
+
+Basically, nothing should happen (nothing should get scrolled).
+
+## Scenario #3
+
+1. Play with the scrollbars of each element (iframe, iframe's parent, top window), e.g. to partially hide the target or to completely hide it to to hide it to the left/right/top/bottom. Be creative.
+2. Click the "Scroll" button.
+
+**Expected**:
+
+The target should always be scrolled back and become completely visible. Mind the green border, it should become visible too. The location of the target on the screen will vary, depending on where you "hide" in its scrollable ancestors.