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

Added manual tests for the list styles feature.

Kamil Piechaczek пре 5 година
родитељ
комит
9b24335dd7

+ 180 - 0
packages/ckeditor5-list/tests/manual/list-styles.html

@@ -0,0 +1,180 @@
+<div id="editor">
+    <h2>Default styles</h2>
+    <figure class="table">
+        <table style="width: 600px;">
+            <tbody>
+            <tr>
+                <td colspan="2" style="text-align: center">
+                    <span class="text-big" style="font-weight: bold">Default styles</span>
+                </td>
+            </tr>
+            <tr>
+                <td style="text-align: center"><span class="text-big" style="font-weight: bold">Bulleted</span></td>
+                <td style="text-align: center"><span class="text-big" style="font-weight: bold">Numbered</span></td>
+            </tr>
+            <tr>
+                <td style="vertical-align:top; width: 50%">
+                    <ul>
+                        <li>UL List item 1</li>
+                        <li>UL List item 2</li>
+                        <li>UL List item 3</li>
+                    </ul>
+                </td>
+                <td style="vertical-align:top; width: 50%">
+                    <ol>
+                        <li>OL List item 1</li>
+                        <li>OL List item 2</li>
+                        <li>OL List item 3</li>
+                    </ol>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </figure>
+
+    <h2>Bulleted lists</h2>
+    <figure class="table">
+        <table style="width: 600px;">
+            <tbody>
+            <tr>
+                <td colspan="4" style="text-align: center">
+                    <span class="text-big" style="font-weight: bold">Type of list</span>
+                </td>
+            </tr>
+            <tr>
+                <td style="text-align: center"><span class="text-big" style="font-weight: bold">Circle</span></td>
+                <td style="text-align: center"><span class="text-big" style="font-weight: bold">Disc</span></td>
+                <td style="text-align: center"><span class="text-big" style="font-weight: bold">Square</span></td>
+                <td style="text-align: center"><span class="text-big" style="font-weight: bold">'👉'</span></td>
+            </tr>
+            <tr>
+                <td style="vertical-align:top; width: 25%">
+                    <ul style="list-style-type: circle;">
+                        <li>UL List item 1</li>
+                        <li>UL List item 2</li>
+                        <li>UL List item 3</li>
+                    </ul>
+                </td>
+                <td style="vertical-align:top; width: 25%">
+                    <ul style="list-style-type: disc;">
+                        <li>UL List item 1</li>
+                        <li>UL List item 2</li>
+                        <li>UL List item 3</li>
+                    </ul>
+                </td>
+                <td style="vertical-align:top; width: 25%">
+                    <ul style="list-style-type: square;">
+                        <li>UL List item 1</li>
+                        <li>UL List item 2</li>
+                        <li>UL List item 3</li>
+                    </ul>
+                </td>
+                <td style="vertical-align:top; width: 25%">
+                    <ul style="list-style-type: '👉';">
+                        <li>UL List item 1</li>
+                        <li>UL List item 2</li>
+                        <li>UL List item 3</li>
+                    </ul>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </figure>
+
+    <h2>Numbered lists</h2>
+    <figure class="table">
+        <table style="width: 800px;">
+            <tbody>
+            <tr>
+                <td colspan="4" style="text-align: center">
+                    <span class="text-big" style="font-weight: bold">Type of list</span>
+                </td>
+            </tr>
+            <tr>
+                <td style="text-align: center"><span class="text-big" style="font-weight: bold">Decimal</span></td>
+                <td style="text-align: center"><span class="text-big" style="font-weight: bold">Decimal-leading-zero</span></td>
+                <td style="text-align: center"><span class="text-big" style="font-weight: bold">Lower-latin</span></td>
+                <td style="text-align: center"><span class="text-big" style="font-weight: bold">Lower-roman</span></td>
+            </tr>
+            <tr>
+                <td style="vertical-align:top; width: 25%">
+                    <ol style="list-style-type: decimal;">
+                        <li>OL List item 1</li>
+                        <li>OL List item 2</li>
+                        <li>OL List item 3</li>
+                    </ol>
+                </td>
+                <td style="vertical-align:top; width: 25%">
+                    <ol style="list-style-type: decimal-leading-zero;">
+                        <li>OL List item 1</li>
+                        <li>OL List item 2</li>
+                        <li>OL List item 3</li>
+                    </ol>
+                </td>
+                <td style="vertical-align:top; width: 25%">
+                    <ol style="list-style-type: lower-latin;">
+                        <li>OL List item 1</li>
+                        <li>OL List item 2</li>
+                        <li>OL List item 3</li>
+                    </ol>
+                </td>
+                <td style="vertical-align:top; width: 25%">
+                    <ol style="list-style-type: lower-roman;">
+                        <li>OL List item 1</li>
+                        <li>OL List item 2</li>
+                        <li>OL List item 3</li>
+                    </ol>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </figure>
+
+    <h2>Nested/mixed lists (numbered and bulleted)</h2>
+    <figure class="table">
+        <table style="width: 1200px;">
+            <tr>
+                <td style="width: 50%">
+                    <ol style="list-style-type: lower-roman;">
+                        <li>OL 1.1 <code>OL[style: lower-roman]</code></li>
+                        <li>OL 1.2 <code>OL[style: lower-roman]</code>
+                            <ul style="list-style-type: square;">
+                                <li>UL 1.2.1 <code>OL[style: lower-roman] &gt; UL[style: square]</code></li>
+                                <li>UL 1.2.2 <code>OL[style: lower-roman] &gt; UL[style: square]</code></li>
+                                <li>UL 1.2.3 <code>OL[style: lower-roman] &gt; UL[style: square]</code></li>
+                            </ul>
+                        </li>
+                        <li>OL 1.3 <code>OL[style: lower-roman]</code></li>
+                        <li>OL 1.4 <code>OL[style: lower-roman]</code></li>
+                        <ol style="list-style-type: lower-alpha;">
+                            <li>OL 1.4.1 <code>OL[style: lower-roman] &gt; OL[style: lower-alpha]</code></li>
+                            <li>OL 1.4.2 <code>OL[style: lower-roman] &gt; OL[style: lower-alpha]</code></li>
+                            <li>OL 1.4.3 <code>OL[style: lower-roman] &gt; OL[style: lower-alpha]</code></li>
+                        </ol>
+                        </li>
+                        <li>OL 1.5 <code>OL[style: lower-roman]</code></li>
+                        <li>OL 1.6 <code>OL[style: lower-roman]</code></li>
+                    </ol>
+                </td>
+                <td style="width: 50%">
+                    <ol style="list-style-type: upper-alpha;">
+                        <li>OL 2.1 <code>OL[style: upper-alpha]</code>
+                            <ol style="list-style-type: lower-greek;">
+                                <li>OL 2.2.1 <code>OL[style: lower-alpha] &gt; OL[style: lower-greek]</code>
+                                    <ul style="list-style-type: circle;">
+                                        <li>UL 2.2.1.1 <code>... &gt; OL[style: lower-greek] &gt; UL[style: circle]</code></li>
+                                        <li>UL 2.2.1.2 <code>... &gt; OL[style: lower-greek] &gt; UL[style: circle]</code></li>
+                                        <li>UL 2.2.1.3 <code>... &gt; OL[style: lower-greek] &gt; UL[style: circle]</code></li>
+                                    </ul>
+                                </li>
+                                <li>OL 2.2.2 <code>OL[style: lower-alpha] &gt; OL[style: lower-greek]</code></li>
+                                <li>OL 2.2.3 <code>OL[style: lower-alpha] &gt; OL[style: lower-greek]</code></li>
+                            </ol>
+                        </li>
+                        <li>OL 2.2 <code>OL[style: upper-alpha]</code></li>
+                    </ol>
+                </td>
+            </tr>
+        </table>
+    </figure>
+</div>

+ 45 - 0
packages/ckeditor5-list/tests/manual/list-styles.js

@@ -0,0 +1,45 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Table from '@ckeditor/ckeditor5-table/src/table';
+import TablePropertiesEditing from '@ckeditor/ckeditor5-table/src/tableproperties/tablepropertiesediting';
+import TableCellPropertiesEditing from '@ckeditor/ckeditor5-table/src/tablecellproperties/tablecellpropertiesediting';
+import List from '../../src/list';
+import ListStyles from '../../src/liststyles';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [
+			Essentials,
+			Code,
+			Heading,
+			List,
+			Paragraph,
+			ListStyles,
+			Table,
+			TablePropertiesEditing,
+			TableCellPropertiesEditing
+		],
+		toolbar: [
+			'heading',
+			'|',
+			'bulletedList', 'numberedList',
+			'|',
+			'undo', 'redo'
+		]
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 17 - 0
packages/ckeditor5-list/tests/manual/list-styles.md

@@ -0,0 +1,17 @@
+# List Styles feature
+
+The editor should display 4 headers and tables.
+
+1. **Default styles**<br>
+    A table should contain two columns that display default styles for `<ul>` and `<ol>` lists.
+2. **Bulleted lists**
+    A table should contain four columns with different bulleted lists
+    (`circle`, `disc`, `square`, `'👉'`).
+3. **Numbered lists**
+    A table should contain four columns with different numbered lists
+    (`decimal`, `decimal-leading-zero`, `lower-latin`, `lower-roman`).
+4. **Nested/mixed lists**
+    A table with two columns that contains nested and mixed `<ol>` and `<ul>` elements with
+    different values for `list-style-type`.
+    
+Check whether the `list-style-type` value is the same as the table or the list item describes.