Răsfoiți Sursa

Improved virtual selection manual test.

Szymon Kupś 8 ani în urmă
părinte
comite
e587dd3405

+ 12 - 3
packages/ckeditor5-engine/tests/manual/virtualselection.html

@@ -33,6 +33,10 @@
 		background-color: red;
 		color: black;
 	}
+
+	button {
+		width: 200px;
+	}
 </style>
 
 <div id="editor">
@@ -40,6 +44,11 @@
 	<figure></figure>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at diam quis justo imperdiet posuere non eu tortor. Mauris vel magna eu sem hendrerit varius. Ut imperdiet velit ut ante interdum convallis. Vestibulum vitae lacinia mi. </p>
 </div>
-<button id="add-marker-yellow">Set yellow marker</button>
-<button id="add-marker-blue">Set blue marker</button>
-<button id="add-marker-red">Set red marker</button>
+<h2>Markers</h2>
+<button id="add-marker-yellow">Set yellow marker</button><button id="remove-marker-yellow">Remove yellow marker</button>
+<br />
+<button id="add-marker-red">Set red marker</button><button id="remove-marker-red">Remove red marker</button>
+<br />
+<button id="add-marker-blue">Set blue marker</button><button id="remove-marker-blue">Remove blue marker</button>
+<br />
+<button id="remove-markers">Remove all markers</button>

+ 35 - 0
packages/ckeditor5-engine/tests/manual/virtualselection.js

@@ -81,6 +81,33 @@ ClassicEditor.create( global.document.querySelector( '#editor' ), {
 			addMarker( editor, 'red' );
 			evt.preventDefault();
 		} );
+
+		document.getElementById( 'remove-marker-yellow' ).addEventListener( 'mousedown', evt => {
+			removeMarker( editor, 'yellow' );
+			evt.preventDefault();
+		} );
+
+		document.getElementById( 'remove-marker-blue' ).addEventListener( 'mousedown', evt => {
+			removeMarker( editor, 'blue' );
+			evt.preventDefault();
+		} );
+
+		document.getElementById( 'remove-marker-red' ).addEventListener( 'mousedown', evt => {
+			removeMarker( editor, 'red' );
+			evt.preventDefault();
+		} );
+
+		document.getElementById( 'remove-markers' ).addEventListener( 'mousedown', evt => {
+			const markers = editor.document.markers;
+
+			editor.document.enqueueChanges( () => {
+				for ( const marker of markers ) {
+					markers.remove( marker );
+				}
+			} );
+
+			evt.preventDefault();
+		} );
 	} )
 	.catch( err => {
 		console.error( err.stack );
@@ -94,3 +121,11 @@ function addMarker( editor, color ) {
 		model.markers.set( 'marker:' + color, range );
 	} );
 }
+
+function removeMarker( editor, color ) {
+	const model = editor.document;
+
+	editor.document.enqueueChanges( () => {
+		model.markers.remove( 'marker:' + color );
+	} );
+}

+ 12 - 5
packages/ckeditor5-engine/tests/manual/virtualselection.md

@@ -1,7 +1,14 @@
 ### Virtual selection manual test
 
-1. Select widget and press `Set marker` button - widget's background color should change.
-1. Select part of the text in the first paragraph and press `Set marker` - widget's should return to its initial state, 
-text should be highlighted.
-1. Create selection that starts in the first paragraph and ends in second one. Press `Set marker`. Selected text
-should be highlighted and widget should have virtual selection applied.
+1. Create selection that starts before the last word of the first paragraph and ends after first
+word of the second paragraph and press `Set yellow marker`.
+1. Yellow marker should be visible on text and widget.
+1. Select whole contents of the editor and press `Set red marker`.
+1. Yellow marker should be visible as before, red marker should be visible on ranges where yellow marker is not
+applied.
+1. Click `Remove yellow marker`.
+1. Red marker should be visible on the whole content, including the widget.
+1. Play with markers, add and remove them, check if they are applied correctly.
+
+NOTE: Yellow marker should be visible over red and blue one. Red marker should be visible over blue one. 
+