Explorar el Código

Added focus/selected state to fake selection manual test.

Szymon Kupś hace 9 años
padre
commit
4d74d2a971

+ 8 - 0
packages/ckeditor5-engine/tests/view/manual/fakeselection.html

@@ -7,6 +7,14 @@
 	#editor strong {
 		cursor: pointer;
 	}
+
+	#editor strong.selected {
+		background-color: #dadada;
+	}
+
+	#editor strong.selected.focused {
+		background-color: yellow;
+	}
 </style>
 
 <p>Scroll down.</p>

+ 8 - 2
packages/ckeditor5-engine/tests/view/manual/fakeselection.js

@@ -54,17 +54,23 @@ viewDocument.selection.on( 'change', () => {
 	const lastPos = viewDocument.selection.getLastPosition();
 
 	if ( firstPos && lastPos && firstPos.nodeAfter == viewStrong && lastPos.nodeBefore == viewStrong ) {
-		viewStrong.setStyle( 'background-color', 'yellow' );
+		viewStrong.addClass( 'selected' );
 	} else {
-		viewStrong.removeStyle( 'background-color' );
+		viewStrong.removeClass( 'selected' );
 	}
 } );
 
 viewDocument.on( 'focus', () => {
+	viewStrong.addClass( 'focused' );
+	viewDocument.render();
+
 	console.log( 'The document was focused.' );
 } );
 
 viewDocument.on( 'blur', () => {
+	viewStrong.removeClass( 'focused' );
+	viewDocument.render();
+
 	console.log( 'The document was blurred.' );
 } );
 

+ 15 - 7
packages/ckeditor5-engine/tests/view/manual/fakeselection.md

@@ -3,13 +3,21 @@
 
 ## Fake selection
 
-1. Click on bold `bar` to create fake selection over it before each of following steps:
-   1. Press left/up arrow key - collapsed selection should appear before `bar`
-   1. Press right/down arrow key - collapsed selection should appear after `bar`
-1. Open console and check if `<div style="position: fixed; top: 0px; left: -9999px;">fake selection over bar</div>` is added to editable when fake selection is present. It should be removed when fake selection is not present.
+Click on bold `bar` to create fake selection over it before each of following steps:
+   * Press left/up arrow key - collapsed selection should appear before `bar`
+   * Press right/down arrow key - collapsed selection should appear after `bar`
 
 Notes:
 
-* Focus shouldn't disappear from the editable element.
-* No #blur event should be logged on the console.
-* The viewport shouldn't scroll when selecting the `bar`.
+- Focus shouldn't disappear from the editable element.
+- No #blur event should be logged on the console.
+- The viewport shouldn't scroll when selecting the `bar`.
+
+-----
+
+Open console and check if `<div style="position: fixed; top: 0px; left: -9999px;">fake selection over bar</div>` is added to editable when fake selection is present. It should be removed when fake selection is not present.
+
+-----
+
+Click on bold `bar` to create fake selection over it. Click outside editable and check if yellow fake selection turns to gray one.
+