8
0
فهرست منبع

Tests: Extended the to-do list feature manual test to check content styles.

Aleksander Nowodzinski 6 سال پیش
والد
کامیت
d8b5d11b64

+ 22 - 1
packages/ckeditor5-list/tests/manual/todo-list.html

@@ -1,3 +1,4 @@
+<h2>Editor</h2>
 <div id="editor">
 <div id="editor">
 	<p>This is a test for list feature.</p>
 	<p>This is a test for list feature.</p>
 	<p>Some more text for testing.</p>
 	<p>Some more text for testing.</p>
@@ -7,7 +8,17 @@
 		<li><input type="checkbox">To-do list item 3</li>
 		<li><input type="checkbox">To-do list item 3</li>
 		<li><input type="checkbox" checked="checked">To-do list item 4</li>
 		<li><input type="checkbox" checked="checked">To-do list item 4</li>
 		<li><input type="checkbox">To-do list item 5</li>
 		<li><input type="checkbox">To-do list item 5</li>
-		<li><input type="checkbox">To-do list item 6</li>
+		<li>
+			<input type="checkbox">To-do list item 6
+			<ul class="todo-list">
+					<li>
+						<label class="todo-list__label">
+							<input type="checkbox" disabled="disabled" checked="checked">
+							Nested item
+						</label>
+					</li>
+			</ul>
+		</li>
 		<li><input type="checkbox" checked="checked">To-do list item 7</li>
 		<li><input type="checkbox" checked="checked">To-do list item 7</li>
 		<li><input type="checkbox">To-do list item 8</li>
 		<li><input type="checkbox">To-do list item 8</li>
 	</ul>
 	</ul>
@@ -23,3 +34,13 @@
 		<li>Bullet list</li>
 		<li>Bullet list</li>
 	</ul>
 	</ul>
 </div>
 </div>
+
+<h2>Editor content preview</h2>
+<div id="preview" class="ck-content"></div>
+
+<style>
+	#preview {
+		outline: 1px solid red;
+		padding: 10px;
+	}
+</style>

+ 8 - 0
packages/ckeditor5-list/tests/manual/todo-list.js

@@ -42,6 +42,14 @@ ClassicEditor
 	} )
 	} )
 	.then( editor => {
 	.then( editor => {
 		window.editor = editor;
 		window.editor = editor;
+
+		const contentPreviewBox = document.getElementById( 'preview' );
+
+		contentPreviewBox.innerHTML = editor.getData();
+
+		editor.model.document.on( 'change:data', () => {
+			contentPreviewBox.innerHTML = editor.getData();
+		} );
 	} )
 	} )
 	.catch( err => {
 	.catch( err => {
 		console.error( err.stack );
 		console.error( err.stack );

+ 6 - 0
packages/ckeditor5-list/tests/manual/todo-list.md

@@ -84,3 +84,9 @@
 2. Highlight selected text
 2. Highlight selected text
 3. Check or uncheck highlighted to-do list item
 3. Check or uncheck highlighted to-do list item
 4. Type inside highlighted to-do list item
 4. Type inside highlighted to-do list item
+
+### Content styles
+
+1. Inspect list styles in the editor and in the content preview (below).
+2. There should be no major visual difference between them.
+3. Check marks in the content preview should be rich custom components (no native checkboxes).