Преглед изворни кода

Tests: Updated manual test for the image resizer.

Marek Lewandowski пре 6 година
родитељ
комит
b9dc5e7c44

+ 6 - 29
packages/ckeditor5-image/tests/manual/resize.html

@@ -1,24 +1,3 @@
-<section id="resizer-options">
-	<h1>Options</h1>
-
-	<p>Use the options below to adjust resizer behavior.</p>
-
-	<h2>Visible resizers</h2>
-	<ol>
-		<li><input type="checkbox" name="handler[]" value="top-left" id="resizer-checkbox__top-left"> <label
-				for="resizer-checkbox__top-left">top-left</label></li>
-		<li><input type="checkbox" name="handler[]" value="top-right" id="resizer-checkbox__top-right"> <label
-				for="resizer-checkbox__top-right">top-right</label></li>
-		<li><input type="checkbox" name="handler[]" value="bottom-right" id="resizer-checkbox__bottom-right"> <label
-				for="resizer-checkbox__bottom-right">bottom-right</label></li>
-		<li><input type="checkbox" name="handler[]" value="bottom-left" id="resizer-checkbox__bottom-left"> <label
-				for="resizer-checkbox__bottom-left">bottom-left</label></li>
-	</ol>
-
-	<p><input type="checkbox" name="resize-image" value="true" id="resize-image" checked> <label
-			for="resize-image">Resize using image directly</label></p>
-</section>
-
 <style>
 	.ck-content .image-style-side,
 	.ck-content .image-style-align-left,
@@ -35,13 +14,12 @@
 </style>
 
 <div id="editor">
-
+	<figure class="image image-style-side">
+		<img src="sample.jpg" alt="" style="width: 240px" />
+	</figure>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus
 		et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis
 		leo interdum. </p>
-	<figure class="image image-style-side">
-		<img src="sample.jpg" alt="" height="60" />
-	</figure>
 	<figure class="image">
 		<img src="sample.jpg" alt="" />
 	</figure>
@@ -57,15 +35,14 @@
 	<p>This is editor with fancier image styling. Images have some internal padding.</p>
 
 	<div id="fancyEditor">
-
+		<figure class="image image-style-side">
+			<img src="sample.jpg" alt="" style="width: 240px" />
+		</figure>
 		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id
 			tellus
 			et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non
 			lobortis
 			leo interdum. </p>
-		<figure class="image image-style-side">
-			<img src="sample.jpg" alt="" height="60" />
-		</figure>
 		<figure class="image">
 			<img src="sample.jpg" alt="" />
 		</figure>

+ 0 - 35
packages/ckeditor5-image/tests/manual/resize.js

@@ -52,38 +52,3 @@ ClassicEditor
 	.catch( err => {
 		console.error( err.stack );
 	} );
-
-( function() {
-	const optionsWrapper = document.getElementById( 'resizer-options' );
-	const defaultConfig = {
-		handler: [ 'top-left', 'top-right', 'bottom-right', 'bottom-left' ]
-	};
-	const dynamicStylesheet = document.createElement( 'style' );
-	const cssRules = {};
-
-	for ( const checkbox of optionsWrapper.querySelectorAll( 'input[name="handler[]"]' ) ) {
-		checkbox.addEventListener( 'change', function() {
-			const ruleValue = `.ck-widget__resizer.ck-widget__resizer-${ this.value } { display: none; }`;
-
-			if ( this.value in cssRules ) {
-				dynamicStylesheet.sheet.deleteRule( cssRules[ this.value ] );
-				delete cssRules[ this.value ];
-			}
-
-			if ( !this.checked ) {
-				cssRules[ this.value ] = dynamicStylesheet.sheet.insertRule( ruleValue );
-			}
-		} );
-
-		if ( defaultConfig.handler.includes( checkbox.value ) ) {
-			checkbox.checked = true;
-		}
-	}
-
-	document.head.appendChild( dynamicStylesheet );
-
-	// Resize using image
-	document.getElementById( 'resize-image' ).addEventListener( 'change', function() {
-		window.pocResizeUsingImage = this.checked;
-	} );
-}() );

+ 8 - 0
packages/ckeditor5-image/tests/manual/resize.md

@@ -1,2 +1,10 @@
 ## Image resize
 
+* Image resizer should be visible after focusing the image.
+* There should be four resizers.
+* Resizers should always be bound to image, not the entire image widget.
+
+### Edge cases
+
+* Make sure that the resized image can't be bigger than the editable.
+* Make sure that releasing mouse button outside of an editable stops the resize.