瀏覽代碼

Renamed singular parameters names to plural.

Kamil Piechaczek 7 年之前
父節點
當前提交
d1bc09e3a3

+ 15 - 15
packages/ckeditor5-engine/src/conversion/conversion.js

@@ -133,7 +133,7 @@ export default class Conversion {
 	 *			model: 'fancyParagraph',
 	 *			model: 'fancyParagraph',
 	 *			view: {
 	 *			view: {
 	 *				name: 'p',
 	 *				name: 'p',
-	 *				class: 'fancy'
+	 *				classes: 'fancy'
 	 *			}
 	 *			}
 	 *		} );
 	 *		} );
 	 *
 	 *
@@ -145,7 +145,7 @@ export default class Conversion {
 	 *				'div',
 	 *				'div',
 	 *				{
 	 *				{
 	 *					// Any element with `display: block` style.
 	 *					// Any element with `display: block` style.
-	 *					style: {
+	 *					styles: {
 	 *						display: 'block'
 	 *						display: 'block'
 	 *					}
 	 *					}
 	 *				}
 	 *				}
@@ -177,7 +177,7 @@ export default class Conversion {
 	 *					// Those properties will be "consumed" during conversion.
 	 *					// Those properties will be "consumed" during conversion.
 	 *					// See `engine.view.Matcher~MatcherPattern` and `engine.view.Matcher#match` for more.
 	 *					// See `engine.view.Matcher~MatcherPattern` and `engine.view.Matcher#match` for more.
 	 *
 	 *
-	 *					return { name: true, style: [ 'font-size' ] };
+	 *					return { name: true, styles: [ 'font-size' ] };
 	 *				}
 	 *				}
 	 *
 	 *
 	 *				return null;
 	 *				return null;
@@ -220,7 +220,7 @@ export default class Conversion {
 	 *			model: 'bold',
 	 *			model: 'bold',
 	 *			view: {
 	 *			view: {
 	 *				name: 'span',
 	 *				name: 'span',
-	 *				class: 'bold'
+	 *				classes: 'bold'
 	 *			}
 	 *			}
 	 *		} );
 	 *		} );
 	 *
 	 *
@@ -235,13 +235,13 @@ export default class Conversion {
 	 *			view: {
 	 *			view: {
 	 *				underline: {
 	 *				underline: {
 	 *					name: 'span',
 	 *					name: 'span',
-	 *					style: {
+	 *					styles: {
 	 *						'text-decoration': 'underline'
 	 *						'text-decoration': 'underline'
 	 *					}
 	 *					}
 	 *				},
 	 *				},
 	 *				lineThrough: {
 	 *				lineThrough: {
 	 *					name: 'span',
 	 *					name: 'span',
-	 *					style: {
+	 *					styles: {
 	 *						'text-decoration': 'line-through'
 	 *						'text-decoration': 'line-through'
 	 *					}
 	 *					}
 	 *				}
 	 *				}
@@ -256,11 +256,11 @@ export default class Conversion {
 	 *				'b',
 	 *				'b',
 	 *				{
 	 *				{
 	 *					name: 'span',
 	 *					name: 'span',
-	 *					class: 'bold'
+	 *					classes: 'bold'
 	 *				},
 	 *				},
 	 *				{
 	 *				{
 	 *					name: 'span',
 	 *					name: 'span',
-	 *					style: {
+	 *					styles: {
 	 *						'font-weight': 'bold'
 	 *						'font-weight': 'bold'
 	 *					}
 	 *					}
 	 *				},
 	 *				},
@@ -274,7 +274,7 @@ export default class Conversion {
 	 *
 	 *
 	 *						return {
 	 *						return {
 	 *							name: true,
 	 *							name: true,
-	 *							style: [ 'font-weight' ]
+	 *							styles: [ 'font-weight' ]
 	 *						};
 	 *						};
 	 *					}
 	 *					}
 	 *				}
 	 *				}
@@ -291,13 +291,13 @@ export default class Conversion {
 	 *			view: {
 	 *			view: {
 	 *				big: {
 	 *				big: {
 	 *					name: 'span',
 	 *					name: 'span',
-	 *					style: {
+	 *					styles: {
 	 *						'font-size': '1.2em'
 	 *						'font-size': '1.2em'
 	 *					}
 	 *					}
 	 *				},
 	 *				},
 	 *				small: {
 	 *				small: {
 	 *					name: 'span',
 	 *					name: 'span',
-	 *					style: {
+	 *					styles: {
 	 *						'font-size': '0.8em'
 	 *						'font-size': '0.8em'
 	 *					}
 	 *					}
 	 *				}
 	 *				}
@@ -323,7 +323,7 @@ export default class Conversion {
 	 *						// Those properties will be "consumed" during conversion.
 	 *						// Those properties will be "consumed" during conversion.
 	 *						// See `engine.view.Matcher~MatcherPattern` and `engine.view.Matcher#match` for more.
 	 *						// See `engine.view.Matcher~MatcherPattern` and `engine.view.Matcher#match` for more.
 	 *
 	 *
-	 *						return { name: true, style: [ 'font-size' ] };
+	 *						return { name: true, styles: [ 'font-size' ] };
 	 *					}
 	 *					}
 	 *
 	 *
 	 *					return null;
 	 *					return null;
@@ -348,7 +348,7 @@ export default class Conversion {
 	 *						// Those properties will be "consumed" during conversion.
 	 *						// Those properties will be "consumed" during conversion.
 	 *						// See `engine.view.Matcher~MatcherPattern` and `engine.view.Matcher#match` for more.
 	 *						// See `engine.view.Matcher~MatcherPattern` and `engine.view.Matcher#match` for more.
 	 *
 	 *
-	 *						return { name: true, style: [ 'font-size' ] };
+	 *						return { name: true, styles: [ 'font-size' ] };
 	 *					}
 	 *					}
 	 *
 	 *
 	 *					return null;
 	 *					return null;
@@ -440,12 +440,12 @@ export default class Conversion {
 	 *			},
 	 *			},
 	 *			upcastAlso: {
 	 *			upcastAlso: {
 	 *				right: {
 	 *				right: {
-	 *					style: {
+	 *					styles: {
 	 *						'text-align': 'right'
 	 *						'text-align': 'right'
 	 *					}
 	 *					}
 	 *				},
 	 *				},
 	 *				center: {
 	 *				center: {
-	 *					style: {
+	 *					styles: {
 	 *						'text-align': 'center'
 	 *						'text-align': 'center'
 	 *					}
 	 *					}
 	 *				}
 	 *				}

+ 20 - 20
packages/ckeditor5-engine/src/conversion/downcast-converters.js

@@ -32,7 +32,7 @@ import cloneDeep from '@ckeditor/ckeditor5-utils/src/lib/lodash/cloneDeep';
  *			model: 'fancyParagraph',
  *			model: 'fancyParagraph',
  *			view: {
  *			view: {
  *				name: 'p',
  *				name: 'p',
- *				class: 'fancy'
+ *				classes: 'fancy'
  *			}
  *			}
  *		} );
  *		} );
  *
  *
@@ -73,7 +73,7 @@ export function downcastElementToElement( config ) {
  *			model: 'invert',
  *			model: 'invert',
  *			view: {
  *			view: {
  *				name: 'span',
  *				name: 'span',
- *				class: [ 'font-light', 'bg-dark' ]
+ *				classes: [ 'font-light', 'bg-dark' ]
  *			}
  *			}
  *		} );
  *		} );
  *
  *
@@ -85,13 +85,13 @@ export function downcastElementToElement( config ) {
  *			view: {
  *			view: {
  *				big: {
  *				big: {
  *					name: 'span',
  *					name: 'span',
- *					style: {
+ *					styles: {
  *						'font-size': '1.2em'
  *						'font-size': '1.2em'
  *					}
  *					}
  *				},
  *				},
  *				small: {
  *				small: {
  *					name: 'span',
  *					name: 'span',
- *					style: {
+ *					styles: {
  *						'font-size': '0.8em'
  *						'font-size': '0.8em'
  *					}
  *					}
  *				}
  *				}
@@ -244,7 +244,7 @@ export function downcastAttributeToAttribute( config ) {
  *			model: 'search',
  *			model: 'search',
  *			view: {
  *			view: {
  *				name: 'span',
  *				name: 'span',
- *				attribute: {
+ *				attributes: {
  *					'data-marker': 'search'
  *					'data-marker': 'search'
  *				}
  *				}
  *			}
  *			}
@@ -305,9 +305,9 @@ export function downcastMarkerToElement( config ) {
  * to a container element, it is the container element instance itself which applies values from highlight descriptor.
  * to a container element, it is the container element instance itself which applies values from highlight descriptor.
  * So, in a sense, converter takes care of stating what should be applied on what, while element decides how to apply that.
  * So, in a sense, converter takes care of stating what should be applied on what, while element decides how to apply that.
  *
  *
- *		downcastMarkerToHighlight( { model: 'comment', view: { class: 'comment' } } );
+ *		downcastMarkerToHighlight( { model: 'comment', view: { classes: 'comment' } } );
  *
  *
- *		downcastMarkerToHighlight( { model: 'comment', view: { class: 'new-comment' }, priority: 'high' } );
+ *		downcastMarkerToHighlight( { model: 'comment', view: { classes: 'new-comment' }, priority: 'high' } );
  *
  *
  * 		downcastMarkerToHighlight( {
  * 		downcastMarkerToHighlight( {
  * 			model: 'comment',
  * 			model: 'comment',
@@ -316,7 +316,7 @@ export function downcastMarkerToElement( config ) {
  *	 			const commentType = data.markerName.split( ':' )[ 1 ];
  *	 			const commentType = data.markerName.split( ':' )[ 1 ];
  *
  *
  *	 			return {
  *	 			return {
- *	 				class: [ 'comment', 'comment-' + commentType ]
+ *	 				classes: [ 'comment', 'comment-' + commentType ]
  *	 			};
  *	 			};
  * 			}
  * 			}
  * 		} );
  * 		} );
@@ -372,24 +372,24 @@ function _createViewElementFromDefinition( viewElementDefinition, viewWriter, vi
 	let element;
 	let element;
 
 
 	if ( viewElementType == 'container' ) {
 	if ( viewElementType == 'container' ) {
-		element = viewWriter.createContainerElement( viewElementDefinition.name, Object.assign( {}, viewElementDefinition.attribute ) );
+		element = viewWriter.createContainerElement( viewElementDefinition.name, Object.assign( {}, viewElementDefinition.attributes ) );
 	} else if ( viewElementType == 'attribute' ) {
 	} else if ( viewElementType == 'attribute' ) {
-		element = viewWriter.createAttributeElement( viewElementDefinition.name, Object.assign( {}, viewElementDefinition.attribute ) );
+		element = viewWriter.createAttributeElement( viewElementDefinition.name, Object.assign( {}, viewElementDefinition.attributes ) );
 	} else {
 	} else {
 		// 'ui'.
 		// 'ui'.
-		element = viewWriter.createUIElement( viewElementDefinition.name, Object.assign( {}, viewElementDefinition.attribute ) );
+		element = viewWriter.createUIElement( viewElementDefinition.name, Object.assign( {}, viewElementDefinition.attributes ) );
 	}
 	}
 
 
-	if ( viewElementDefinition.style ) {
-		const keys = Object.keys( viewElementDefinition.style );
+	if ( viewElementDefinition.styles ) {
+		const keys = Object.keys( viewElementDefinition.styles );
 
 
 		for ( const key of keys ) {
 		for ( const key of keys ) {
-			viewWriter.setStyle( key, viewElementDefinition.style[ key ], element );
+			viewWriter.setStyle( key, viewElementDefinition.styles[ key ], element );
 		}
 		}
 	}
 	}
 
 
-	if ( viewElementDefinition.class ) {
-		const classes = viewElementDefinition.class;
+	if ( viewElementDefinition.classes ) {
+		const classes = viewElementDefinition.classes;
 
 
 		if ( typeof classes == 'string' ) {
 		if ( typeof classes == 'string' ) {
 			viewWriter.addClass( classes, element );
 			viewWriter.addClass( classes, element );
@@ -638,7 +638,7 @@ export function removeUIElement() {
  * The converter automatically consumes corresponding value from consumables list and stops the event (see
  * The converter automatically consumes corresponding value from consumables list and stops the event (see
  * {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher}).
  * {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher}).
  *
  *
- *		modelDispatcher.on( 'attribute:customAttr:myElem', changeAttribute( ( value, data ) => {
+ *		modelDispatcher.on( 'attributes:customAttr:myElem', changeAttribute( ( value, data ) => {
  *			// Change attribute key from `customAttr` to `class` in view.
  *			// Change attribute key from `customAttr` to `class` in view.
  *			const key = 'class';
  *			const key = 'class';
  *			let value = data.attributeNewValue;
  *			let value = data.attributeNewValue;
@@ -738,7 +738,7 @@ export function changeAttribute( attributeCreator ) {
  * The converter automatically consumes corresponding value from consumables list, stops the event (see
  * The converter automatically consumes corresponding value from consumables list, stops the event (see
  * {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher}).
  * {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher}).
  *
  *
- *		modelDispatcher.on( 'attribute:bold', wrapItem( ( modelAttributeValue, viewWriter ) => {
+ *		modelDispatcher.on( 'attributes:bold', wrapItem( ( modelAttributeValue, viewWriter ) => {
  *			return viewWriter.createAttributeElement( 'strong' );
  *			return viewWriter.createAttributeElement( 'strong' );
  *		} );
  *		} );
  *
  *
@@ -1000,8 +1000,8 @@ function _prepareDescriptor( highlightDescriptor, data, conversionApi ) {
 export function createViewElementFromHighlightDescriptor( descriptor ) {
 export function createViewElementFromHighlightDescriptor( descriptor ) {
 	const viewElement = new ViewAttributeElement( 'span', descriptor.attributes );
 	const viewElement = new ViewAttributeElement( 'span', descriptor.attributes );
 
 
-	if ( descriptor.class ) {
-		viewElement._addClass( descriptor.class );
+	if ( descriptor.classes ) {
+		viewElement._addClass( descriptor.classes );
 	}
 	}
 
 
 	if ( descriptor.priority ) {
 	if ( descriptor.priority ) {

+ 3 - 3
packages/ckeditor5-engine/src/conversion/modelconsumable.js

@@ -21,8 +21,8 @@ import TextProxy from '../model/textproxy';
  * during conversion, when given part of model item is converted (i.e. the view element has been inserted into the view,
  * during conversion, when given part of model item is converted (i.e. the view element has been inserted into the view,
  * but without attributes), consumable value is removed from `ModelConsumable`.
  * but without attributes), consumable value is removed from `ModelConsumable`.
  *
  *
- * For model items, `ModelConsumable` stores consumable values of one of following types: `insert`, `addAttribute:<attributeKey>`,
- * `changeAttribute:<attributeKey>`, `removeAttribute:<attributeKey>`.
+ * For model items, `ModelConsumable` stores consumable values of one of following types: `insert`, `addattributes:<attributeKey>`,
+ * `changeattributes:<attributeKey>`, `removeattributes:<attributeKey>`.
  *
  *
  * In most cases, it is enough to let {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher}
  * In most cases, it is enough to let {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher}
  * gather consumable values, so there is no need to use
  * gather consumable values, so there is no need to use
@@ -312,7 +312,7 @@ export default class ModelConsumable {
 
 
 // Returns a normalized consumable type name from given string. A normalized consumable type name is a string that has
 // Returns a normalized consumable type name from given string. A normalized consumable type name is a string that has
 // at most one colon, for example: `insert` or `addMarker:highlight`. If string to normalize has more "parts" (more colons),
 // at most one colon, for example: `insert` or `addMarker:highlight`. If string to normalize has more "parts" (more colons),
-// the other parts are dropped, for example: `addAttribute:bold:$text` -> `addAttribute:bold`.
+// the other parts are dropped, for example: `addattributes:bold:$text` -> `addattributes:bold`.
 //
 //
 // @param {String} type Consumable type.
 // @param {String} type Consumable type.
 // @returns {String} Normalized consumable type.
 // @returns {String} Normalized consumable type.

+ 11 - 9
packages/ckeditor5-engine/src/conversion/upcast-converters.js

@@ -31,7 +31,7 @@ import cloneDeep from '@ckeditor/ckeditor5-utils/src/lib/lodash/cloneDeep';
  *		upcastElementToElement( {
  *		upcastElementToElement( {
  *			view: {
  *			view: {
  *				name: 'p',
  *				name: 'p',
- *				class: 'fancy'
+ *				classes: 'fancy'
  *			},
  *			},
  *			model: 'fancyParagraph'
  *			model: 'fancyParagraph'
  *		} );
  *		} );
@@ -39,7 +39,7 @@ import cloneDeep from '@ckeditor/ckeditor5-utils/src/lib/lodash/cloneDeep';
  *		upcastElementToElement( {
  *		upcastElementToElement( {
  * 			view: {
  * 			view: {
  *				name: 'p',
  *				name: 'p',
- *				class: 'heading'
+ *				classes: 'heading'
  * 			},
  * 			},
  * 			model: ( viewElement, modelWriter ) => {
  * 			model: ( viewElement, modelWriter ) => {
  * 				return modelWriter.createElement( 'heading', { level: viewElement.getAttribute( 'data-level' ) } );
  * 				return modelWriter.createElement( 'heading', { level: viewElement.getAttribute( 'data-level' ) } );
@@ -83,7 +83,7 @@ export function upcastElementToElement( config ) {
  *		upcastElementToAttribute( {
  *		upcastElementToAttribute( {
  *			view: {
  *			view: {
  *				name: 'span',
  *				name: 'span',
- *				class: 'bold'
+ *				classes: 'bold'
  *			},
  *			},
  *			model: 'bold'
  *			model: 'bold'
  *		} );
  *		} );
@@ -91,7 +91,7 @@ export function upcastElementToElement( config ) {
  *		upcastElementToAttribute( {
  *		upcastElementToAttribute( {
  *			view: {
  *			view: {
  *				name: 'span',
  *				name: 'span',
- *				class: [ 'styled', 'styled-dark' ]
+ *				classes: [ 'styled', 'styled-dark' ]
  *			},
  *			},
  *			model: {
  *			model: {
  *				key: 'styled',
  *				key: 'styled',
@@ -102,7 +102,7 @@ export function upcastElementToElement( config ) {
  * 		upcastElementToAttribute( {
  * 		upcastElementToAttribute( {
  *			view: {
  *			view: {
  *				name: 'span',
  *				name: 'span',
- *				style: {
+ *				styles: {
  *					'font-size': /[\s\S]+/
  *					'font-size': /[\s\S]+/
  *				}
  *				}
  *			},
  *			},
@@ -250,7 +250,7 @@ export function upcastAttributeToAttribute( config ) {
  *		upcastElementToMarker( {
  *		upcastElementToMarker( {
  *			view: {
  *			view: {
  *				name: 'span',
  *				name: 'span',
- *				attribute: {
+ *				attributes: {
  *					'data-marker': 'search'
  *					'data-marker': 'search'
  *				}
  *				}
  *			},
  *			},
@@ -397,14 +397,16 @@ function _normalizeViewAttributeKeyValueConfig( config ) {
 	let normalized;
 	let normalized;
 
 
 	if ( key == 'class' || key == 'style' ) {
 	if ( key == 'class' || key == 'style' ) {
+		const keyName = key == 'class' ? 'classes' : 'styles';
+
 		normalized = {
 		normalized = {
-			[ key ]: config.view.value
+			[ keyName ]: config.view.value
 		};
 		};
 	} else {
 	} else {
 		const value = typeof config.view.value == 'undefined' ? /[\s\S]*/ : config.view.value;
 		const value = typeof config.view.value == 'undefined' ? /[\s\S]*/ : config.view.value;
 
 
 		normalized = {
 		normalized = {
-			attribute: {
+			attributes: {
 				[ key ]: value
 				[ key ]: value
 			}
 			}
 		};
 		};
@@ -498,7 +500,7 @@ function _onlyViewNameIsDefined( config ) {
 		return false;
 		return false;
 	}
 	}
 
 
-	return !config.view.class && !config.view.attribute && !config.view.style;
+	return !config.view.classes && !config.view.attributes && !config.view.styles;
 }
 }
 
 
 // Helper function for to-model-attribute converter. Sets model attribute on given range. Checks {@link module:engine/model/schema~Schema}
 // Helper function for to-model-attribute converter. Sets model attribute on given range. Checks {@link module:engine/model/schema~Schema}

+ 89 - 83
packages/ckeditor5-engine/src/conversion/viewconsumable.js

@@ -55,26 +55,26 @@ export default class ViewConsumable {
 	 * {@link module:engine/view/documentfragment~DocumentFragment document fragment} as ready to be consumed.
 	 * {@link module:engine/view/documentfragment~DocumentFragment document fragment} as ready to be consumed.
 	 *
 	 *
 	 *		viewConsumable.add( p, { name: true } ); // Adds element's name to consume.
 	 *		viewConsumable.add( p, { name: true } ); // Adds element's name to consume.
-	 *		viewConsumable.add( p, { attribute: 'name' } ); // Adds element's attribute.
-	 *		viewConsumable.add( p, { class: 'foobar' } ); // Adds element's class.
-	 *		viewConsumable.add( p, { style: 'color' } ); // Adds element's style
-	 *		viewConsumable.add( p, { attribute: 'name', style: 'color' } ); // Adds attribute and style.
-	 *		viewConsumable.add( p, { class: [ 'baz', 'bar' ] } ); // Multiple consumables can be provided.
+	 *		viewConsumable.add( p, { attributes: 'name' } ); // Adds element's attribute.
+	 *		viewConsumable.add( p, { classes: 'foobar' } ); // Adds element's class.
+	 *		viewConsumable.add( p, { styles: 'color' } ); // Adds element's style
+	 *		viewConsumable.add( p, { attributes: 'name', styles: 'color' } ); // Adds attribute and style.
+	 *		viewConsumable.add( p, { classes: [ 'baz', 'bar' ] } ); // Multiple consumables can be provided.
 	 *		viewConsumable.add( textNode ); // Adds text node to consume.
 	 *		viewConsumable.add( textNode ); // Adds text node to consume.
 	 *		viewConsumable.add( docFragment ); // Adds document fragment to consume.
 	 *		viewConsumable.add( docFragment ); // Adds document fragment to consume.
 	 *
 	 *
 	 * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `viewconsumable-invalid-attribute` when `class` or `style`
 	 * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `viewconsumable-invalid-attribute` when `class` or `style`
 	 * attribute is provided - it should be handled separately by providing actual style/class.
 	 * attribute is provided - it should be handled separately by providing actual style/class.
 	 *
 	 *
-	 *		viewConsumable.add( p, { attribute: 'style' } ); // This call will throw an exception.
-	 *		viewConsumable.add( p, { style: 'color' } ); // This is properly handled style.
+	 *		viewConsumable.add( p, { attributes: 'style' } ); // This call will throw an exception.
+	 *		viewConsumable.add( p, { styles: 'color' } ); // This is properly handled style.
 	 *
 	 *
 	 * @param {module:engine/view/element~Element|module:engine/view/text~Text|module:engine/view/documentfragment~DocumentFragment} element
 	 * @param {module:engine/view/element~Element|module:engine/view/text~Text|module:engine/view/documentfragment~DocumentFragment} element
 	 * @param {Object} [consumables] Used only if first parameter is {@link module:engine/view/element~Element view element} instance.
 	 * @param {Object} [consumables] Used only if first parameter is {@link module:engine/view/element~Element view element} instance.
 	 * @param {Boolean} consumables.name If set to true element's name will be included.
 	 * @param {Boolean} consumables.name If set to true element's name will be included.
-	 * @param {String|Array.<String>} consumables.attribute Attribute name or array of attribute names.
-	 * @param {String|Array.<String>} consumables.class Class name or array of class names.
-	 * @param {String|Array.<String>} consumables.style Style name or array of style names.
+	 * @param {String|Array.<String>} consumables.attributes Attribute name or array of attribute names.
+	 * @param {String|Array.<String>} consumables.classes Class name or array of class names.
+	 * @param {String|Array.<String>} consumables.styles Style name or array of style names.
 	 */
 	 */
 	add( element, consumables ) {
 	add( element, consumables ) {
 		let elementConsumables;
 		let elementConsumables;
@@ -104,25 +104,25 @@ export default class ViewConsumable {
 	 * first already consumed item is found and `null` when first non-consumable item is found.
 	 * first already consumed item is found and `null` when first non-consumable item is found.
 	 *
 	 *
 	 *		viewConsumable.test( p, { name: true } ); // Tests element's name.
 	 *		viewConsumable.test( p, { name: true } ); // Tests element's name.
-	 *		viewConsumable.test( p, { attribute: 'name' } ); // Tests attribute.
-	 *		viewConsumable.test( p, { class: 'foobar' } ); // Tests class.
-	 *		viewConsumable.test( p, { style: 'color' } ); // Tests style.
-	 *		viewConsumable.test( p, { attribute: 'name', style: 'color' } ); // Tests attribute and style.
-	 *		viewConsumable.test( p, { class: [ 'baz', 'bar' ] } ); // Multiple consumables can be tested.
+	 *		viewConsumable.test( p, { attributes: 'name' } ); // Tests attribute.
+	 *		viewConsumable.test( p, { classes: 'foobar' } ); // Tests class.
+	 *		viewConsumable.test( p, { styles: 'color' } ); // Tests style.
+	 *		viewConsumable.test( p, { attributes: 'name', styles: 'color' } ); // Tests attribute and style.
+	 *		viewConsumable.test( p, { classes: [ 'baz', 'bar' ] } ); // Multiple consumables can be tested.
 	 *		viewConsumable.test( textNode ); // Tests text node.
 	 *		viewConsumable.test( textNode ); // Tests text node.
 	 *		viewConsumable.test( docFragment ); // Tests document fragment.
 	 *		viewConsumable.test( docFragment ); // Tests document fragment.
 	 *
 	 *
 	 * Testing classes and styles as attribute will test if all added classes/styles can be consumed.
 	 * Testing classes and styles as attribute will test if all added classes/styles can be consumed.
 	 *
 	 *
-	 *		viewConsumable.test( p, { attribute: 'class' } ); // Tests if all added classes can be consumed.
-	 *		viewConsumable.test( p, { attribute: 'style' } ); // Tests if all added styles can be consumed.
+	 *		viewConsumable.test( p, { attributes: 'class' } ); // Tests if all added classes can be consumed.
+	 *		viewConsumable.test( p, { attributes: 'style' } ); // Tests if all added styles can be consumed.
 	 *
 	 *
 	 * @param {module:engine/view/element~Element|module:engine/view/text~Text|module:engine/view/documentfragment~DocumentFragment} element
 	 * @param {module:engine/view/element~Element|module:engine/view/text~Text|module:engine/view/documentfragment~DocumentFragment} element
 	 * @param {Object} [consumables] Used only if first parameter is {@link module:engine/view/element~Element view element} instance.
 	 * @param {Object} [consumables] Used only if first parameter is {@link module:engine/view/element~Element view element} instance.
 	 * @param {Boolean} consumables.name If set to true element's name will be included.
 	 * @param {Boolean} consumables.name If set to true element's name will be included.
-	 * @param {String|Array.<String>} consumables.attribute Attribute name or array of attribute names.
-	 * @param {String|Array.<String>} consumables.class Class name or array of class names.
-	 * @param {String|Array.<String>} consumables.style Style name or array of style names.
+	 * @param {String|Array.<String>} consumables.attributes Attribute name or array of attribute names.
+	 * @param {String|Array.<String>} consumables.classes Class name or array of class names.
+	 * @param {String|Array.<String>} consumables.styles Style name or array of style names.
 	 * @returns {Boolean|null} Returns `true` when all items included in method's call can be consumed. Returns `false`
 	 * @returns {Boolean|null} Returns `true` when all items included in method's call can be consumed. Returns `false`
 	 * when first already consumed item is found and `null` when first non-consumable item is found.
 	 * when first already consumed item is found and `null` when first non-consumable item is found.
 	 */
 	 */
@@ -148,25 +148,25 @@ export default class ViewConsumable {
 	 * It returns `true` when all items included in method's call can be consumed, otherwise returns `false`.
 	 * It returns `true` when all items included in method's call can be consumed, otherwise returns `false`.
 	 *
 	 *
 	 *		viewConsumable.consume( p, { name: true } ); // Consumes element's name.
 	 *		viewConsumable.consume( p, { name: true } ); // Consumes element's name.
-	 *		viewConsumable.consume( p, { attribute: 'name' } ); // Consumes element's attribute.
-	 *		viewConsumable.consume( p, { class: 'foobar' } ); // Consumes element's class.
-	 *		viewConsumable.consume( p, { style: 'color' } ); // Consumes element's style.
-	 *		viewConsumable.consume( p, { attribute: 'name', style: 'color' } ); // Consumes attribute and style.
-	 *		viewConsumable.consume( p, { class: [ 'baz', 'bar' ] } ); // Multiple consumables can be consumed.
+	 *		viewConsumable.consume( p, { attributes: 'name' } ); // Consumes element's attribute.
+	 *		viewConsumable.consume( p, { classes: 'foobar' } ); // Consumes element's class.
+	 *		viewConsumable.consume( p, { styles: 'color' } ); // Consumes element's style.
+	 *		viewConsumable.consume( p, { attributes: 'name', styles: 'color' } ); // Consumes attribute and style.
+	 *		viewConsumable.consume( p, { classes: [ 'baz', 'bar' ] } ); // Multiple consumables can be consumed.
 	 *		viewConsumable.consume( textNode ); // Consumes text node.
 	 *		viewConsumable.consume( textNode ); // Consumes text node.
 	 *		viewConsumable.consume( docFragment ); // Consumes document fragment.
 	 *		viewConsumable.consume( docFragment ); // Consumes document fragment.
 	 *
 	 *
 	 * Consuming classes and styles as attribute will test if all added classes/styles can be consumed.
 	 * Consuming classes and styles as attribute will test if all added classes/styles can be consumed.
 	 *
 	 *
-	 *		viewConsumable.consume( p, { attribute: 'class' } ); // Consume only if all added classes can be consumed.
-	 *		viewConsumable.consume( p, { attribute: 'style' } ); // Consume only if all added styles can be consumed.
+	 *		viewConsumable.consume( p, { attributes: 'class' } ); // Consume only if all added classes can be consumed.
+	 *		viewConsumable.consume( p, { attributes: 'style' } ); // Consume only if all added styles can be consumed.
 	 *
 	 *
 	 * @param {module:engine/view/element~Element|module:engine/view/text~Text|module:engine/view/documentfragment~DocumentFragment} element
 	 * @param {module:engine/view/element~Element|module:engine/view/text~Text|module:engine/view/documentfragment~DocumentFragment} element
 	 * @param {Object} [consumables] Used only if first parameter is {@link module:engine/view/element~Element view element} instance.
 	 * @param {Object} [consumables] Used only if first parameter is {@link module:engine/view/element~Element view element} instance.
 	 * @param {Boolean} consumables.name If set to true element's name will be included.
 	 * @param {Boolean} consumables.name If set to true element's name will be included.
-	 * @param {String|Array.<String>} consumables.attribute Attribute name or array of attribute names.
-	 * @param {String|Array.<String>} consumables.class Class name or array of class names.
-	 * @param {String|Array.<String>} consumables.style Style name or array of style names.
+	 * @param {String|Array.<String>} consumables.attributes Attribute name or array of attribute names.
+	 * @param {String|Array.<String>} consumables.classes Class name or array of class names.
+	 * @param {String|Array.<String>} consumables.styles Style name or array of style names.
 	 * @returns {Boolean} Returns `true` when all items included in method's call can be consumed,
 	 * @returns {Boolean} Returns `true` when all items included in method's call can be consumed,
 	 * otherwise returns `false`.
 	 * otherwise returns `false`.
 	 */
 	 */
@@ -193,26 +193,26 @@ export default class ViewConsumable {
 	 * method's call.
 	 * method's call.
 	 *
 	 *
 	 *		viewConsumable.revert( p, { name: true } ); // Reverts element's name.
 	 *		viewConsumable.revert( p, { name: true } ); // Reverts element's name.
-	 *		viewConsumable.revert( p, { attribute: 'name' } ); // Reverts element's attribute.
-	 *		viewConsumable.revert( p, { class: 'foobar' } ); // Reverts element's class.
-	 *		viewConsumable.revert( p, { style: 'color' } ); // Reverts element's style.
-	 *		viewConsumable.revert( p, { attribute: 'name', style: 'color' } ); // Reverts attribute and style.
-	 *		viewConsumable.revert( p, { class: [ 'baz', 'bar' ] } ); // Multiple names can be reverted.
+	 *		viewConsumable.revert( p, { attributes: 'name' } ); // Reverts element's attribute.
+	 *		viewConsumable.revert( p, { classes: 'foobar' } ); // Reverts element's class.
+	 *		viewConsumable.revert( p, { styles: 'color' } ); // Reverts element's style.
+	 *		viewConsumable.revert( p, { attributes: 'name', styles: 'color' } ); // Reverts attribute and style.
+	 *		viewConsumable.revert( p, { classes: [ 'baz', 'bar' ] } ); // Multiple names can be reverted.
 	 *		viewConsumable.revert( textNode ); // Reverts text node.
 	 *		viewConsumable.revert( textNode ); // Reverts text node.
 	 *		viewConsumable.revert( docFragment ); // Reverts document fragment.
 	 *		viewConsumable.revert( docFragment ); // Reverts document fragment.
 	 *
 	 *
 	 * Reverting classes and styles as attribute will revert all classes/styles that were previously added for
 	 * Reverting classes and styles as attribute will revert all classes/styles that were previously added for
 	 * consumption.
 	 * consumption.
 	 *
 	 *
-	 *		viewConsumable.revert( p, { attribute: 'class' } ); // Reverts all classes added for consumption.
-	 *		viewConsumable.revert( p, { attribute: 'style' } ); // Reverts all styles added for consumption.
+	 *		viewConsumable.revert( p, { attributes: 'class' } ); // Reverts all classes added for consumption.
+	 *		viewConsumable.revert( p, { attributes: 'style' } ); // Reverts all styles added for consumption.
 	 *
 	 *
 	 * @param {module:engine/view/element~Element|module:engine/view/text~Text|module:engine/view/documentfragment~DocumentFragment} element
 	 * @param {module:engine/view/element~Element|module:engine/view/text~Text|module:engine/view/documentfragment~DocumentFragment} element
 	 * @param {Object} [consumables] Used only if first parameter is {@link module:engine/view/element~Element view element} instance.
 	 * @param {Object} [consumables] Used only if first parameter is {@link module:engine/view/element~Element view element} instance.
 	 * @param {Boolean} consumables.name If set to true element's name will be included.
 	 * @param {Boolean} consumables.name If set to true element's name will be included.
-	 * @param {String|Array.<String>} consumables.attribute Attribute name or array of attribute names.
-	 * @param {String|Array.<String>} consumables.class Class name or array of class names.
-	 * @param {String|Array.<String>} consumables.style Style name or array of style names.
+	 * @param {String|Array.<String>} consumables.attributes Attribute name or array of attribute names.
+	 * @param {String|Array.<String>} consumables.classes Class name or array of class names.
+	 * @param {String|Array.<String>} consumables.styles Style name or array of style names.
 	 */
 	 */
 	revert( element, consumables ) {
 	revert( element, consumables ) {
 		const elementConsumables = this._consumables.get( element );
 		const elementConsumables = this._consumables.get( element );
@@ -239,9 +239,9 @@ export default class ViewConsumable {
 	static consumablesFromElement( element ) {
 	static consumablesFromElement( element ) {
 		const consumables = {
 		const consumables = {
 			name: true,
 			name: true,
-			attribute: [],
-			class: [],
-			style: []
+			attributes: [],
+			classes: [],
+			styles: []
 		};
 		};
 
 
 		const attributes = element.getAttributeKeys();
 		const attributes = element.getAttributeKeys();
@@ -252,19 +252,19 @@ export default class ViewConsumable {
 				continue;
 				continue;
 			}
 			}
 
 
-			consumables.attribute.push( attribute );
+			consumables.attributes.push( attribute );
 		}
 		}
 
 
 		const classes = element.getClassNames();
 		const classes = element.getClassNames();
 
 
 		for ( const className of classes ) {
 		for ( const className of classes ) {
-			consumables.class.push( className );
+			consumables.classes.push( className );
 		}
 		}
 
 
 		const styles = element.getStyleNames();
 		const styles = element.getStyleNames();
 
 
 		for ( const style of styles ) {
 		for ( const style of styles ) {
-			consumables.style.push( style );
+			consumables.styles.push( style );
 		}
 		}
 
 
 		return consumables;
 		return consumables;
@@ -335,9 +335,9 @@ class ViewElementConsumables {
 		 * @member {Object}
 		 * @member {Object}
 		 */
 		 */
 		this._consumables = {
 		this._consumables = {
-			attribute: new Map(),
-			style: new Map(),
-			class: new Map()
+			attributes: new Map(),
+			styles: new Map(),
+			classes: new Map()
 		};
 		};
 	}
 	}
 
 
@@ -350,17 +350,17 @@ class ViewElementConsumables {
 	 *
 	 *
 	 * Attributes classes and styles:
 	 * Attributes classes and styles:
 	 *
 	 *
-	 *		consumables.add( { attribute: 'title', class: 'foo', style: 'color' } );
-	 *		consumables.add( { attribute: [ 'title', 'name' ], class: [ 'foo', 'bar' ] );
+	 *		consumables.add( { attributes: 'title', classes: 'foo', styles: 'color' } );
+	 *		consumables.add( { attributes: [ 'title', 'name' ], classes: [ 'foo', 'bar' ] );
 	 *
 	 *
 	 * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `viewconsumable-invalid-attribute` when `class` or `style`
 	 * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `viewconsumable-invalid-attribute` when `class` or `style`
 	 * attribute is provided - it should be handled separately by providing `style` and `class` in consumables object.
 	 * attribute is provided - it should be handled separately by providing `style` and `class` in consumables object.
 	 *
 	 *
 	 * @param {Object} consumables Object describing which parts of the element can be consumed.
 	 * @param {Object} consumables Object describing which parts of the element can be consumed.
 	 * @param {Boolean} consumables.name If set to `true` element's name will be added as consumable.
 	 * @param {Boolean} consumables.name If set to `true` element's name will be added as consumable.
-	 * @param {String|Array.<String>} consumables.attribute Attribute name or array of attribute names to add as consumable.
-	 * @param {String|Array.<String>} consumables.class Class name or array of class names to add as consumable.
-	 * @param {String|Array.<String>} consumables.style Style name or array of style names to add as consumable.
+	 * @param {String|Array.<String>} consumables.attributes Attribute name or array of attribute names to add as consumable.
+	 * @param {String|Array.<String>} consumables.classes Class name or array of class names to add as consumable.
+	 * @param {String|Array.<String>} consumables.styles Style name or array of style names to add as consumable.
 	 */
 	 */
 	add( consumables ) {
 	add( consumables ) {
 		if ( consumables.name ) {
 		if ( consumables.name ) {
@@ -383,14 +383,14 @@ class ViewElementConsumables {
 	 *
 	 *
 	 * Attributes classes and styles:
 	 * Attributes classes and styles:
 	 *
 	 *
-	 *		consumables.test( { attribute: 'title', class: 'foo', style: 'color' } );
-	 *		consumables.test( { attribute: [ 'title', 'name' ], class: [ 'foo', 'bar' ] );
+	 *		consumables.test( { attributes: 'title', classes: 'foo', styles: 'color' } );
+	 *		consumables.test( { attributes: [ 'title', 'name' ], classes: [ 'foo', 'bar' ] );
 	 *
 	 *
 	 * @param {Object} consumables Object describing which parts of the element should be tested.
 	 * @param {Object} consumables Object describing which parts of the element should be tested.
 	 * @param {Boolean} consumables.name If set to `true` element's name will be tested.
 	 * @param {Boolean} consumables.name If set to `true` element's name will be tested.
-	 * @param {String|Array.<String>} consumables.attribute Attribute name or array of attribute names to test.
-	 * @param {String|Array.<String>} consumables.class Class name or array of class names to test.
-	 * @param {String|Array.<String>} consumables.style Style name or array of style names to test.
+	 * @param {String|Array.<String>} consumables.attributes Attribute name or array of attribute names to test.
+	 * @param {String|Array.<String>} consumables.classes Class name or array of class names to test.
+	 * @param {String|Array.<String>} consumables.styles Style name or array of style names to test.
 	 * @returns {Boolean|null} `true` when all tested items can be consumed, `null` when even one of the items
 	 * @returns {Boolean|null} `true` when all tested items can be consumed, `null` when even one of the items
 	 * was never marked for consumption and `false` when even one of the items was already consumed.
 	 * was never marked for consumption and `false` when even one of the items was already consumed.
 	 */
 	 */
@@ -423,14 +423,14 @@ class ViewElementConsumables {
 	 *
 	 *
 	 * Attributes classes and styles:
 	 * Attributes classes and styles:
 	 *
 	 *
-	 *		consumables.consume( { attribute: 'title', class: 'foo', style: 'color' } );
-	 *		consumables.consume( { attribute: [ 'title', 'name' ], class: [ 'foo', 'bar' ] );
+	 *		consumables.consume( { attributes: 'title', classes: 'foo', styles: 'color' } );
+	 *		consumables.consume( { attributes: [ 'title', 'name' ], classes: [ 'foo', 'bar' ] );
 	 *
 	 *
 	 * @param {Object} consumables Object describing which parts of the element should be consumed.
 	 * @param {Object} consumables Object describing which parts of the element should be consumed.
 	 * @param {Boolean} consumables.name If set to `true` element's name will be consumed.
 	 * @param {Boolean} consumables.name If set to `true` element's name will be consumed.
-	 * @param {String|Array.<String>} consumables.attribute Attribute name or array of attribute names to consume.
-	 * @param {String|Array.<String>} consumables.class Class name or array of class names to consume.
-	 * @param {String|Array.<String>} consumables.style Style name or array of style names to consume.
+	 * @param {String|Array.<String>} consumables.attributes Attribute name or array of attribute names to consume.
+	 * @param {String|Array.<String>} consumables.classes Class name or array of class names to consume.
+	 * @param {String|Array.<String>} consumables.styles Style name or array of style names to consume.
 	 */
 	 */
 	consume( consumables ) {
 	consume( consumables ) {
 		if ( consumables.name ) {
 		if ( consumables.name ) {
@@ -452,14 +452,14 @@ class ViewElementConsumables {
 	 *
 	 *
 	 * Attributes classes and styles:
 	 * Attributes classes and styles:
 	 *
 	 *
-	 *		consumables.revert( { attribute: 'title', class: 'foo', style: 'color' } );
-	 *		consumables.revert( { attribute: [ 'title', 'name' ], class: [ 'foo', 'bar' ] );
+	 *		consumables.revert( { attributes: 'title', classes: 'foo', styles: 'color' } );
+	 *		consumables.revert( { attributes: [ 'title', 'name' ], classes: [ 'foo', 'bar' ] );
 	 *
 	 *
 	 * @param {Object} consumables Object describing which parts of the element should be reverted.
 	 * @param {Object} consumables Object describing which parts of the element should be reverted.
 	 * @param {Boolean} consumables.name If set to `true` element's name will be reverted.
 	 * @param {Boolean} consumables.name If set to `true` element's name will be reverted.
-	 * @param {String|Array.<String>} consumables.attribute Attribute name or array of attribute names to revert.
-	 * @param {String|Array.<String>} consumables.class Class name or array of class names to revert.
-	 * @param {String|Array.<String>} consumables.style Style name or array of style names to revert.
+	 * @param {String|Array.<String>} consumables.attributes Attribute name or array of attribute names to revert.
+	 * @param {String|Array.<String>} consumables.classes Class name or array of class names to revert.
+	 * @param {String|Array.<String>} consumables.styles Style name or array of style names to revert.
 	 */
 	 */
 	revert( consumables ) {
 	revert( consumables ) {
 		if ( consumables.name ) {
 		if ( consumables.name ) {
@@ -480,7 +480,7 @@ class ViewElementConsumables {
 	 * type is provided - it should be handled separately by providing actual style/class type.
 	 * type is provided - it should be handled separately by providing actual style/class type.
 	 *
 	 *
 	 * @private
 	 * @private
-	 * @param {String} type Type of the consumable item: `attribute`, `class` or `style`.
+	 * @param {String} type Type of the consumable item: `attributes`, `classes` or `styles`.
 	 * @param {String|Array.<String>} item Consumable item or array of items.
 	 * @param {String|Array.<String>} item Consumable item or array of items.
 	 */
 	 */
 	_add( type, item ) {
 	_add( type, item ) {
@@ -488,22 +488,22 @@ class ViewElementConsumables {
 		const consumables = this._consumables[ type ];
 		const consumables = this._consumables[ type ];
 
 
 		for ( const name of items ) {
 		for ( const name of items ) {
-			if ( type === 'attribute' && ( name === 'class' || name === 'style' ) ) {
+			if ( type === 'attributes' && ( name === 'class' || name === 'style' ) ) {
 				/**
 				/**
 				 * Class and style attributes should be handled separately in
 				 * Class and style attributes should be handled separately in
 				 * {@link module:engine/conversion/viewconsumable~ViewConsumable#add `ViewConsumable#add()`}.
 				 * {@link module:engine/conversion/viewconsumable~ViewConsumable#add `ViewConsumable#add()`}.
 				 *
 				 *
 				 * What you have done is trying to use:
 				 * What you have done is trying to use:
 				 *
 				 *
-				 *		consumables.add( { attribute: [ 'class', 'style' ] } );
+				 *		consumables.add( { attributes: [ 'class', 'style' ] } );
 				 *
 				 *
 				 * While each class and style should be registered separately:
 				 * While each class and style should be registered separately:
 				 *
 				 *
-				 *		consumables.add( { class: 'some-class', style: 'font-weight' } );
+				 *		consumables.add( { classes: 'some-class', styles: 'font-weight' } );
 				 *
 				 *
 				 * @error viewconsumable-invalid-attribute
 				 * @error viewconsumable-invalid-attribute
 				 */
 				 */
-				throw new CKEditorError( 'viewconsumable-invalid-attribute: Classes and styles should be handled separately.' );
+				throw new CKEditorError( 'viewconsumable-invalid-attributes: Classes and styles should be handled separately.' );
 			}
 			}
 
 
 			consumables.set( name, true );
 			consumables.set( name, true );
@@ -514,7 +514,7 @@ class ViewElementConsumables {
 	 * Helper method that tests consumables of a given type: attribute, class or style.
 	 * Helper method that tests consumables of a given type: attribute, class or style.
 	 *
 	 *
 	 * @private
 	 * @private
-	 * @param {String} type Type of the consumable item: `attribute`, `class` or `style`.
+	 * @param {String} type Type of the consumable item: `attributes`, `classes` or `styles`.
 	 * @param {String|Array.<String>} item Consumable item or array of items.
 	 * @param {String|Array.<String>} item Consumable item or array of items.
 	 * @returns {Boolean|null} Returns `true` if all items can be consumed, `null` when one of the items cannot be
 	 * @returns {Boolean|null} Returns `true` if all items can be consumed, `null` when one of the items cannot be
 	 * consumed and `false` when one of the items is already consumed.
 	 * consumed and `false` when one of the items is already consumed.
@@ -524,9 +524,11 @@ class ViewElementConsumables {
 		const consumables = this._consumables[ type ];
 		const consumables = this._consumables[ type ];
 
 
 		for ( const name of items ) {
 		for ( const name of items ) {
-			if ( type === 'attribute' && ( name === 'class' || name === 'style' ) ) {
+			if ( type === 'attributes' && ( name === 'class' || name === 'style' ) ) {
+				const consumableName = name == 'class' ? 'classes' : 'styles';
+
 				// Check all classes/styles if class/style attribute is tested.
 				// Check all classes/styles if class/style attribute is tested.
-				const value = this._test( name, [ ...this._consumables[ name ].keys() ] );
+				const value = this._test( consumableName, [ ...this._consumables[ consumableName ].keys() ] );
 
 
 				if ( value !== true ) {
 				if ( value !== true ) {
 					return value;
 					return value;
@@ -551,7 +553,7 @@ class ViewElementConsumables {
 	 * Helper method that consumes items of a given type: attribute, class or style.
 	 * Helper method that consumes items of a given type: attribute, class or style.
 	 *
 	 *
 	 * @private
 	 * @private
-	 * @param {String} type Type of the consumable item: `attribute`, `class` or `style`.
+	 * @param {String} type Type of the consumable item: `attributes`, `classes` or `styles`.
 	 * @param {String|Array.<String>} item Consumable item or array of items.
 	 * @param {String|Array.<String>} item Consumable item or array of items.
 	 */
 	 */
 	_consume( type, item ) {
 	_consume( type, item ) {
@@ -559,9 +561,11 @@ class ViewElementConsumables {
 		const consumables = this._consumables[ type ];
 		const consumables = this._consumables[ type ];
 
 
 		for ( const name of items ) {
 		for ( const name of items ) {
-			if ( type === 'attribute' && ( name === 'class' || name === 'style' ) ) {
+			if ( type === 'attributes' && ( name === 'class' || name === 'style' ) ) {
+				const consumableName = name == 'class' ? 'classes' : 'styles';
+
 				// If class or style is provided for consumption - consume them all.
 				// If class or style is provided for consumption - consume them all.
-				this._consume( name, [ ...this._consumables[ name ].keys() ] );
+				this._consume( consumableName, [ ...this._consumables[ consumableName ].keys() ] );
 			} else {
 			} else {
 				consumables.set( name, false );
 				consumables.set( name, false );
 			}
 			}
@@ -572,7 +576,7 @@ class ViewElementConsumables {
 	 * Helper method that reverts items of a given type: attribute, class or style.
 	 * Helper method that reverts items of a given type: attribute, class or style.
 	 *
 	 *
 	 * @private
 	 * @private
-	 * @param {String} type Type of the consumable item: `attribute`, `class` or , `style`.
+	 * @param {String} type Type of the consumable item: `attributes`, `classes` or , `styles`.
 	 * @param {String|Array.<String>} item Consumable item or array of items.
 	 * @param {String|Array.<String>} item Consumable item or array of items.
 	 */
 	 */
 	_revert( type, item ) {
 	_revert( type, item ) {
@@ -580,9 +584,11 @@ class ViewElementConsumables {
 		const consumables = this._consumables[ type ];
 		const consumables = this._consumables[ type ];
 
 
 		for ( const name of items ) {
 		for ( const name of items ) {
-			if ( type === 'attribute' && ( name === 'class' || name === 'style' ) ) {
+			if ( type === 'attributes' && ( name === 'class' || name === 'style' ) ) {
+				const consumableName = name == 'class' ? 'classes' : 'styles';
+
 				// If class or style is provided for reverting - revert them all.
 				// If class or style is provided for reverting - revert them all.
-				this._revert( name, [ ...this._consumables[ name ].keys() ] );
+				this._revert( consumableName, [ ...this._consumables[ consumableName ].keys() ] );
 			} else {
 			} else {
 				const value = consumables.get( name );
 				const value = consumables.get( name );
 
 

+ 31 - 31
packages/ckeditor5-engine/src/view/matcher.js

@@ -39,14 +39,14 @@ export default class Matcher {
 	 *
 	 *
 	 *		// Single class.
 	 *		// Single class.
 	 *		matcher.add( {
 	 *		matcher.add( {
-	 *			class: 'foobar'
+	 *			classes: 'foobar'
 	 *		} );
 	 *		} );
 	 *
 	 *
 	 * See {@link module:engine/view/matcher~MatcherPattern} for more examples.
 	 * See {@link module:engine/view/matcher~MatcherPattern} for more examples.
 	 *
 	 *
 	 * Multiple patterns can be added in one call:
 	 * Multiple patterns can be added in one call:
 	 *
 	 *
-	 * 		matcher.add( 'div', { class: 'foobar' } );
+	 * 		matcher.add( 'div', { classes: 'foobar' } );
 	 *
 	 *
 	 * @param {Object|String|RegExp|Function} pattern Object describing pattern details. If string or regular expression
 	 * @param {Object|String|RegExp|Function} pattern Object describing pattern details. If string or regular expression
 	 * is provided it will be used to match element's name. Pattern can be also provided in a form
 	 * is provided it will be used to match element's name. Pattern can be also provided in a form
@@ -54,14 +54,14 @@ export default class Matcher {
 	 * Function's return value will be stored under `match` key of the object returned from
 	 * Function's return value will be stored under `match` key of the object returned from
 	 * {@link module:engine/view/matcher~Matcher#match match} or {@link module:engine/view/matcher~Matcher#matchAll matchAll} methods.
 	 * {@link module:engine/view/matcher~Matcher#match match} or {@link module:engine/view/matcher~Matcher#matchAll matchAll} methods.
 	 * @param {String|RegExp} [pattern.name] Name or regular expression to match element's name.
 	 * @param {String|RegExp} [pattern.name] Name or regular expression to match element's name.
-	 * @param {Object} [pattern.attribute] Object with key-value pairs representing attributes to match. Each object key
+	 * @param {Object} [pattern.attributes] Object with key-value pairs representing attributes to match. Each object key
 	 * represents attribute name. Value under that key can be either:
 	 * represents attribute name. Value under that key can be either:
 	 * * `true` - then attribute is just required (can be empty),
 	 * * `true` - then attribute is just required (can be empty),
 	 * * a string - then attribute has to be equal, or
 	 * * a string - then attribute has to be equal, or
 	 * * a regular expression - then attribute has to match the expression.
 	 * * a regular expression - then attribute has to match the expression.
-	 * @param {String|RegExp|Array} [pattern.class] Class name or array of class names to match. Each name can be
+	 * @param {String|RegExp|Array} [pattern.classes] Class name or array of class names to match. Each name can be
 	 * provided in a form of string or regular expression.
 	 * provided in a form of string or regular expression.
-	 * @param {Object} [pattern.style] Object with key-value pairs representing styles to match. Each object key
+	 * @param {Object} [pattern.styles] Object with key-value pairs representing styles to match. Each object key
 	 * represents style name. Value under that key can be either a string or a regular expression and it will be used
 	 * represents style name. Value under that key can be either a string or a regular expression and it will be used
 	 * to match style value.
 	 * to match style value.
 	 */
 	 */
@@ -73,8 +73,8 @@ export default class Matcher {
 			}
 			}
 
 
 			// Single class name/RegExp can be provided.
 			// Single class name/RegExp can be provided.
-			if ( item.class && ( typeof item.class == 'string' || item.class instanceof RegExp ) ) {
-				item.class = [ item.class ];
+			if ( item.classes && ( typeof item.classes == 'string' || item.classes instanceof RegExp ) ) {
+				item.classes = [ item.classes ];
 			}
 			}
 
 
 			this._patterns.push( item );
 			this._patterns.push( item );
@@ -92,9 +92,9 @@ export default class Matcher {
 	 *			pattern: <pattern used to match found element>,
 	 *			pattern: <pattern used to match found element>,
 	 *			match: {
 	 *			match: {
 	 *				name: true,
 	 *				name: true,
-	 *				attribute: [ 'title', 'href' ],
-	 *				class: [ 'foo' ],
-	 *				style: [ 'color', 'position' ]
+	 *				attributes: [ 'title', 'href' ],
+	 *				classes: [ 'foo' ],
+	 *				styles: [ 'color', 'position' ]
 	 *			}
 	 *			}
 	 *		}
 	 *		}
 	 *
 	 *
@@ -106,9 +106,9 @@ export default class Matcher {
 	 * @returns {Object|String|RegExp|Function} result.pattern Pattern that was used to find matched element.
 	 * @returns {Object|String|RegExp|Function} result.pattern Pattern that was used to find matched element.
 	 * @returns {Object} result.match Object representing matched element parts.
 	 * @returns {Object} result.match Object representing matched element parts.
 	 * @returns {Boolean} [result.match.name] True if name of the element was matched.
 	 * @returns {Boolean} [result.match.name] True if name of the element was matched.
-	 * @returns {Array} [result.match.attribute] Array with matched attribute names.
-	 * @returns {Array} [result.match.class] Array with matched class names.
-	 * @returns {Array} [result.match.style] Array with matched style names.
+	 * @returns {Array} [result.match.attributes] Array with matched attribute names.
+	 * @returns {Array} [result.match.classes] Array with matched class names.
+	 * @returns {Array} [result.match.styles] Array with matched style names.
 	 */
 	 */
 	match( ...element ) {
 	match( ...element ) {
 		for ( const singleElement of element ) {
 		for ( const singleElement of element ) {
@@ -199,28 +199,28 @@ function isElementMatching( element, pattern ) {
 	}
 	}
 
 
 	// Check element's attributes.
 	// Check element's attributes.
-	if ( pattern.attribute ) {
-		match.attribute = matchAttributes( pattern.attribute, element );
+	if ( pattern.attributes ) {
+		match.attributes = matchAttributes( pattern.attributes, element );
 
 
-		if ( !match.attribute ) {
+		if ( !match.attributes ) {
 			return null;
 			return null;
 		}
 		}
 	}
 	}
 
 
 	// Check element's classes.
 	// Check element's classes.
-	if ( pattern.class ) {
-		match.class = matchClasses( pattern.class, element );
+	if ( pattern.classes ) {
+		match.classes = matchClasses( pattern.classes, element );
 
 
-		if ( !match.class ) {
+		if ( !match.classes ) {
 			return false;
 			return false;
 		}
 		}
 	}
 	}
 
 
 	// Check element's styles.
 	// Check element's styles.
-	if ( pattern.style ) {
-		match.style = matchStyles( pattern.style, element );
+	if ( pattern.styles ) {
+		match.styles = matchStyles( pattern.styles, element );
 
 
-		if ( !match.style ) {
+		if ( !match.styles ) {
 			return false;
 			return false;
 		}
 		}
 	}
 	}
@@ -373,22 +373,22 @@ function matchStyles( patterns, element ) {
  *
  *
  *		// Match view element which has given class.
  *		// Match view element which has given class.
  *		const pattern = {
  *		const pattern = {
- *			class: 'foobar'
+ *			classes: 'foobar'
  *		};
  *		};
  *
  *
  *		// Match view element class using regular expression.
  *		// Match view element class using regular expression.
  *		const pattern = {
  *		const pattern = {
- *			class: /foo.../
+ *			classes: /foo.../
  *		};
  *		};
  *
  *
  *		// Multiple classes to match.
  *		// Multiple classes to match.
  *		const pattern = {
  *		const pattern = {
- *			class: [ 'baz', 'bar', /foo.../ ]
+ *			classes: [ 'baz', 'bar', /foo.../ ]
  *		}:
  *		}:
  *
  *
  *		// Match view element which has given styles.
  *		// Match view element which has given styles.
  *		const pattern = {
  *		const pattern = {
- *			style: {
+ *			styles: {
  *				position: 'absolute',
  *				position: 'absolute',
  *				color: /^\w*blue$/
  *				color: /^\w*blue$/
  *			}
  *			}
@@ -397,10 +397,10 @@ function matchStyles( patterns, element ) {
  *		// Pattern with multiple properties.
  *		// Pattern with multiple properties.
  *		const pattern = {
  *		const pattern = {
  *			name: 'span',
  *			name: 'span',
- *			style: {
+ *			styles: {
  *				'font-weight': 'bold'
  *				'font-weight': 'bold'
  *			},
  *			},
- *			class: 'highlighted'
+ *			classes: 'highlighted'
  *		};
  *		};
  *
  *
  * If `MatcherPattern` is given as a `Function`, the function takes a view element as a first and only parameter and
  * If `MatcherPattern` is given as a `Function`, the function takes a view element as a first and only parameter and
@@ -438,9 +438,9 @@ function matchStyles( patterns, element ) {
  * @typedef {String|RegExp|Object|Function} module:engine/view/matcher~MatcherPattern
  * @typedef {String|RegExp|Object|Function} module:engine/view/matcher~MatcherPattern
  *
  *
  * @property {String|RegExp} [name] View element name to match.
  * @property {String|RegExp} [name] View element name to match.
- * @property {String|RegExp|Array.<String|RegExp>} [class] View element's class name(s) to match.
- * @property {Object} [style] Object with key-value pairs representing styles to match.
+ * @property {String|RegExp|Array.<String|RegExp>} [classes] View element's class name(s) to match.
+ * @property {Object} [styles] Object with key-value pairs representing styles to match.
  * Each object key represents style name. Value can be given as `String` or `RegExp`.
  * Each object key represents style name. Value can be given as `String` or `RegExp`.
- * @property {Object} [attribute] Object with key-value pairs representing attributes to match.
+ * @property {Object} [attributes] Object with key-value pairs representing attributes to match.
  * Each object key represents attribute name. Value can be given as `String` or `RegExp`.
  * Each object key represents attribute name. Value can be given as `String` or `RegExp`.
  */
  */

+ 3 - 3
packages/ckeditor5-engine/tests/controller/datacontroller.js

@@ -402,7 +402,7 @@ describe( 'DataController', () => {
 			const modelElement = parseModel( '<div><paragraph>foobar</paragraph></div>', schema );
 			const modelElement = parseModel( '<div><paragraph>foobar</paragraph></div>', schema );
 			const modelRoot = model.document.getRoot();
 			const modelRoot = model.document.getRoot();
 
 
-			downcastMarkerToHighlight( { model: 'marker:a', view: { class: 'a' } } )( data.downcastDispatcher );
+			downcastMarkerToHighlight( { model: 'marker:a', view: { classes: 'a' } } )( data.downcastDispatcher );
 
 
 			model.change( writer => {
 			model.change( writer => {
 				writer.insert( modelElement, modelRoot, 0 );
 				writer.insert( modelElement, modelRoot, 0 );
@@ -419,8 +419,8 @@ describe( 'DataController', () => {
 			const modelElement = parseModel( '<div><paragraph>foo</paragraph><paragraph>bar</paragraph></div>', schema );
 			const modelElement = parseModel( '<div><paragraph>foo</paragraph><paragraph>bar</paragraph></div>', schema );
 			const modelRoot = model.document.getRoot();
 			const modelRoot = model.document.getRoot();
 
 
-			downcastMarkerToHighlight( { model: 'marker:a', view: { class: 'a' } } )( data.downcastDispatcher );
-			downcastMarkerToHighlight( { model: 'marker:b', view: { class: 'b' } } )( data.downcastDispatcher );
+			downcastMarkerToHighlight( { model: 'marker:a', view: { classes: 'a' } } )( data.downcastDispatcher );
+			downcastMarkerToHighlight( { model: 'marker:b', view: { classes: 'b' } } )( data.downcastDispatcher );
 
 
 			const modelP1 = modelElement.getChild( 0 );
 			const modelP1 = modelElement.getChild( 0 );
 			const modelP2 = modelElement.getChild( 1 );
 			const modelP2 = modelElement.getChild( 1 );

+ 12 - 12
packages/ckeditor5-engine/tests/conversion/conversion.js

@@ -142,7 +142,7 @@ describe( 'Conversion', () => {
 					model: 'fancyParagraph',
 					model: 'fancyParagraph',
 					view: {
 					view: {
 						name: 'p',
 						name: 'p',
-						class: 'fancy'
+						classes: 'fancy'
 					}
 					}
 				} );
 				} );
 
 
@@ -157,7 +157,7 @@ describe( 'Conversion', () => {
 						'div',
 						'div',
 						{
 						{
 							// Any element with `display: block` style.
 							// Any element with `display: block` style.
-							style: {
+							styles: {
 								display: 'block'
 								display: 'block'
 							}
 							}
 						}
 						}
@@ -237,7 +237,7 @@ describe( 'Conversion', () => {
 					model: 'bold',
 					model: 'bold',
 					view: {
 					view: {
 						name: 'span',
 						name: 'span',
-						class: 'bold'
+						classes: 'bold'
 					}
 					}
 				} );
 				} );
 
 
@@ -252,11 +252,11 @@ describe( 'Conversion', () => {
 						'b',
 						'b',
 						{
 						{
 							name: 'span',
 							name: 'span',
-							class: 'bold'
+							classes: 'bold'
 						},
 						},
 						{
 						{
 							name: 'span',
 							name: 'span',
-							style: {
+							styles: {
 								'font-weight': 'bold'
 								'font-weight': 'bold'
 							}
 							}
 						},
 						},
@@ -266,7 +266,7 @@ describe( 'Conversion', () => {
 							if ( viewElement.is( 'span' ) && fontWeight && /\d+/.test( fontWeight ) && Number( fontWeight ) > 500 ) {
 							if ( viewElement.is( 'span' ) && fontWeight && /\d+/.test( fontWeight ) && Number( fontWeight ) > 500 ) {
 								return {
 								return {
 									name: true,
 									name: true,
-									style: [ 'font-weight' ]
+									styles: [ 'font-weight' ]
 								};
 								};
 							}
 							}
 						}
 						}
@@ -322,13 +322,13 @@ describe( 'Conversion', () => {
 					view: {
 					view: {
 						big: {
 						big: {
 							name: 'span',
 							name: 'span',
-							style: {
+							styles: {
 								'font-size': '1.2em'
 								'font-size': '1.2em'
 							}
 							}
 						},
 						},
 						small: {
 						small: {
 							name: 'span',
 							name: 'span',
-							style: {
+							styles: {
 								'font-size': '0.8em'
 								'font-size': '0.8em'
 							}
 							}
 						}
 						}
@@ -422,13 +422,13 @@ describe( 'Conversion', () => {
 					view: {
 					view: {
 						underline: {
 						underline: {
 							name: 'span',
 							name: 'span',
-							style: {
+							styles: {
 								'text-decoration': 'underline'
 								'text-decoration': 'underline'
 							}
 							}
 						},
 						},
 						lineThrough: {
 						lineThrough: {
 							name: 'span',
 							name: 'span',
-							style: {
+							styles: {
 								'text-decoration': 'line-through'
 								'text-decoration': 'line-through'
 							}
 							}
 						}
 						}
@@ -551,12 +551,12 @@ describe( 'Conversion', () => {
 					},
 					},
 					upcastAlso: {
 					upcastAlso: {
 						right: {
 						right: {
-							style: {
+							styles: {
 								'text-align': 'right'
 								'text-align': 'right'
 							}
 							}
 						},
 						},
 						center: {
 						center: {
-							style: {
+							styles: {
 								'text-align': 'center'
 								'text-align': 'center'
 							}
 							}
 						}
 						}

+ 24 - 24
packages/ckeditor5-engine/tests/conversion/downcast-converters.js

@@ -77,7 +77,7 @@ describe( 'downcast-helpers', () => {
 				model: 'fancyParagraph',
 				model: 'fancyParagraph',
 				view: {
 				view: {
 					name: 'p',
 					name: 'p',
-					class: 'fancy'
+					classes: 'fancy'
 				}
 				}
 			} );
 			} );
 
 
@@ -137,7 +137,7 @@ describe( 'downcast-helpers', () => {
 				model: 'invert',
 				model: 'invert',
 				view: {
 				view: {
 					name: 'span',
 					name: 'span',
-					class: [ 'font-light', 'bg-dark' ]
+					classes: [ 'font-light', 'bg-dark' ]
 				}
 				}
 			} );
 			} );
 
 
@@ -159,13 +159,13 @@ describe( 'downcast-helpers', () => {
 				view: {
 				view: {
 					big: {
 					big: {
 						name: 'span',
 						name: 'span',
-						style: {
+						styles: {
 							'font-size': '1.2em'
 							'font-size': '1.2em'
 						}
 						}
 					},
 					},
 					small: {
 					small: {
 						name: 'span',
 						name: 'span',
-						style: {
+						styles: {
 							'font-size': '0.8em'
 							'font-size': '0.8em'
 						}
 						}
 					}
 					}
@@ -474,7 +474,7 @@ describe( 'downcast-helpers', () => {
 				model: 'search',
 				model: 'search',
 				view: {
 				view: {
 					name: 'span',
 					name: 'span',
-					attribute: {
+					attributes: {
 						'data-marker': 'search'
 						'data-marker': 'search'
 					}
 					}
 				}
 				}
@@ -511,7 +511,7 @@ describe( 'downcast-helpers', () => {
 
 
 	describe( 'downcastMarkerToHighlight', () => {
 	describe( 'downcastMarkerToHighlight', () => {
 		it( 'config.view is a highlight descriptor', () => {
 		it( 'config.view is a highlight descriptor', () => {
-			const helper = downcastMarkerToHighlight( { model: 'comment', view: { class: 'comment' } } );
+			const helper = downcastMarkerToHighlight( { model: 'comment', view: { classes: 'comment' } } );
 
 
 			conversion.for( 'downcast' ).add( helper );
 			conversion.for( 'downcast' ).add( helper );
 
 
@@ -524,8 +524,8 @@ describe( 'downcast-helpers', () => {
 		} );
 		} );
 
 
 		it( 'can be overwritten using priority', () => {
 		it( 'can be overwritten using priority', () => {
-			const helperA = downcastMarkerToHighlight( { model: 'comment', view: { class: 'comment' } } );
-			const helperB = downcastMarkerToHighlight( { model: 'comment', view: { class: 'new-comment' }, priority: 'high' } );
+			const helperA = downcastMarkerToHighlight( { model: 'comment', view: { classes: 'comment' } } );
+			const helperB = downcastMarkerToHighlight( { model: 'comment', view: { classes: 'new-comment' }, priority: 'high' } );
 
 
 			conversion.for( 'downcast' ).add( helperA ).add( helperB );
 			conversion.for( 'downcast' ).add( helperA ).add( helperB );
 
 
@@ -544,7 +544,7 @@ describe( 'downcast-helpers', () => {
 					const commentType = data.markerName.split( ':' )[ 1 ];
 					const commentType = data.markerName.split( ':' )[ 1 ];
 
 
 					return {
 					return {
-						class: [ 'comment', 'comment-' + commentType ]
+						classes: [ 'comment', 'comment-' + commentType ]
 					};
 					};
 				}
 				}
 			} );
 			} );
@@ -739,10 +739,10 @@ describe( 'downcast-converters', () => {
 		} );
 		} );
 
 
 		it( 'should be possible to override setAttribute', () => {
 		it( 'should be possible to override setAttribute', () => {
-			const modelElement = new ModelElement( 'paragraph', { class: 'foo' }, new ModelText( 'foobar' ) );
+			const modelElement = new ModelElement( 'paragraph', { classes: 'foo' }, new ModelText( 'foobar' ) );
 
 
 			dispatcher.on( 'attribute:class', ( evt, data, conversionApi ) => {
 			dispatcher.on( 'attribute:class', ( evt, data, conversionApi ) => {
-				conversionApi.consumable.consume( data.item, 'attribute:class' );
+				conversionApi.consumable.consume( data.item, 'attributes:class' );
 			}, { priority: 'high' } );
 			}, { priority: 'high' } );
 
 
 			model.change( writer => {
 			model.change( writer => {
@@ -1244,7 +1244,7 @@ describe( 'downcast-converters', () => {
 	describe( 'highlight', () => {
 	describe( 'highlight', () => {
 		describe( 'on text', () => {
 		describe( 'on text', () => {
 			const highlightDescriptor = {
 			const highlightDescriptor = {
-				class: 'highlight-class',
+				classes: 'highlight-class',
 				priority: 7,
 				priority: 7,
 				attributes: { title: 'title' }
 				attributes: { title: 'title' }
 			};
 			};
@@ -1294,7 +1294,7 @@ describe( 'downcast-converters', () => {
 				dispatcher.on( 'addMarker:marker', highlightElement( highlightDescriptor ) );
 				dispatcher.on( 'addMarker:marker', highlightElement( highlightDescriptor ) );
 				dispatcher.on( 'removeMarker:marker', removeHighlight( highlightDescriptor ) );
 				dispatcher.on( 'removeMarker:marker', removeHighlight( highlightDescriptor ) );
 
 
-				const newDescriptor = { class: 'override-class' };
+				const newDescriptor = { classes: 'override-class' };
 
 
 				dispatcher.on( 'addMarker:marker', highlightText( newDescriptor ), { priority: 'high' } );
 				dispatcher.on( 'addMarker:marker', highlightText( newDescriptor ), { priority: 'high' } );
 				dispatcher.on( 'addMarker:marker', highlightElement( newDescriptor ), { priority: 'high' } );
 				dispatcher.on( 'addMarker:marker', highlightElement( newDescriptor ), { priority: 'high' } );
@@ -1341,7 +1341,7 @@ describe( 'downcast-converters', () => {
 			} );
 			} );
 
 
 			it( 'should do nothing if collapsed marker is converted', () => {
 			it( 'should do nothing if collapsed marker is converted', () => {
-				const descriptor = { class: 'foo' };
+				const descriptor = { classes: 'foo' };
 
 
 				dispatcher.on( 'addMarker:marker', highlightText( descriptor ), { priority: 'high' } );
 				dispatcher.on( 'addMarker:marker', highlightText( descriptor ), { priority: 'high' } );
 				dispatcher.on( 'addMarker:marker', highlightElement( descriptor ), { priority: 'high' } );
 				dispatcher.on( 'addMarker:marker', highlightElement( descriptor ), { priority: 'high' } );
@@ -1363,9 +1363,9 @@ describe( 'downcast-converters', () => {
 			} );
 			} );
 
 
 			it( 'should correctly wrap and unwrap multiple, intersecting markers', () => {
 			it( 'should correctly wrap and unwrap multiple, intersecting markers', () => {
-				const descriptorFoo = { class: 'foo' };
-				const descriptorBar = { class: 'bar' };
-				const descriptorXyz = { class: 'xyz' };
+				const descriptorFoo = { classes: 'foo' };
+				const descriptorBar = { classes: 'bar' };
+				const descriptorXyz = { classes: 'xyz' };
 
 
 				dispatcher.on( 'addMarker:markerFoo', highlightText( descriptorFoo ) );
 				dispatcher.on( 'addMarker:markerFoo', highlightText( descriptorFoo ) );
 				dispatcher.on( 'addMarker:markerBar', highlightText( descriptorBar ) );
 				dispatcher.on( 'addMarker:markerBar', highlightText( descriptorBar ) );
@@ -1500,7 +1500,7 @@ describe( 'downcast-converters', () => {
 
 
 		describe( 'on element', () => {
 		describe( 'on element', () => {
 			const highlightDescriptor = {
 			const highlightDescriptor = {
-				class: 'highlight-class',
+				classes: 'highlight-class',
 				priority: 7,
 				priority: 7,
 				attributes: { title: 'title' },
 				attributes: { title: 'title' },
 				id: 'customId'
 				id: 'customId'
@@ -1514,7 +1514,7 @@ describe( 'downcast-converters', () => {
 					const viewContainer = new ViewContainerElement( 'div' );
 					const viewContainer = new ViewContainerElement( 'div' );
 
 
 					viewContainer._setCustomProperty( 'addHighlight', ( element, descriptor, writer ) => {
 					viewContainer._setCustomProperty( 'addHighlight', ( element, descriptor, writer ) => {
-						writer.addClass( descriptor.class, element );
+						writer.addClass( descriptor.classes, element );
 					} );
 					} );
 
 
 					viewContainer._setCustomProperty( 'removeHighlight', ( element, id, writer ) => {
 					viewContainer._setCustomProperty( 'removeHighlight', ( element, id, writer ) => {
@@ -1558,7 +1558,7 @@ describe( 'downcast-converters', () => {
 			} );
 			} );
 
 
 			it( 'should be possible to override', () => {
 			it( 'should be possible to override', () => {
-				const newDescriptor = { class: 'override-class' };
+				const newDescriptor = { classes: 'override-class' };
 
 
 				dispatcher.on( 'addMarker:marker', highlightText( newDescriptor ), { priority: 'high' } );
 				dispatcher.on( 'addMarker:marker', highlightText( newDescriptor ), { priority: 'high' } );
 				dispatcher.on( 'addMarker:marker', highlightElement( newDescriptor ), { priority: 'high' } );
 				dispatcher.on( 'addMarker:marker', highlightElement( newDescriptor ), { priority: 'high' } );
@@ -1627,7 +1627,7 @@ describe( 'downcast-converters', () => {
 	describe( 'createViewElementFromHighlightDescriptor()', () => {
 	describe( 'createViewElementFromHighlightDescriptor()', () => {
 		it( 'should return attribute element from descriptor object', () => {
 		it( 'should return attribute element from descriptor object', () => {
 			const descriptor = {
 			const descriptor = {
-				class: 'foo-class',
+				classes: 'foo-class',
 				attributes: { one: '1', two: '2' },
 				attributes: { one: '1', two: '2' },
 				priority: 7,
 				priority: 7,
 			};
 			};
@@ -1645,7 +1645,7 @@ describe( 'downcast-converters', () => {
 
 
 		it( 'should return attribute element from descriptor object - array with classes', () => {
 		it( 'should return attribute element from descriptor object - array with classes', () => {
 			const descriptor = {
 			const descriptor = {
-				class: [ 'foo-class', 'bar-class' ],
+				classes: [ 'foo-class', 'bar-class' ],
 				attributes: { one: '1', two: '2' },
 				attributes: { one: '1', two: '2' },
 				priority: 7,
 				priority: 7,
 			};
 			};
@@ -1680,7 +1680,7 @@ describe( 'downcast-converters', () => {
 
 
 		it( 'should create element without priority', () => {
 		it( 'should create element without priority', () => {
 			const descriptor = {
 			const descriptor = {
-				class: 'foo-class',
+				classes: 'foo-class',
 				attributes: { one: '1', two: '2' },
 				attributes: { one: '1', two: '2' },
 			};
 			};
 			const element = createViewElementFromHighlightDescriptor( descriptor );
 			const element = createViewElementFromHighlightDescriptor( descriptor );
@@ -1697,7 +1697,7 @@ describe( 'downcast-converters', () => {
 
 
 		it( 'should create element without attributes', () => {
 		it( 'should create element without attributes', () => {
 			const descriptor = {
 			const descriptor = {
-				class: 'foo-class',
+				classes: 'foo-class',
 				priority: 7
 				priority: 7
 			};
 			};
 			const element = createViewElementFromHighlightDescriptor( descriptor );
 			const element = createViewElementFromHighlightDescriptor( descriptor );

+ 2 - 2
packages/ckeditor5-engine/tests/conversion/downcast-selection-converters.js

@@ -51,7 +51,7 @@ describe( 'downcast-selection-converters', () => {
 		mapper = new Mapper();
 		mapper = new Mapper();
 		mapper.bindElements( modelRoot, viewRoot );
 		mapper.bindElements( modelRoot, viewRoot );
 
 
-		highlightDescriptor = { class: 'marker', priority: 1 };
+		highlightDescriptor = { classes: 'marker', priority: 1 };
 
 
 		dispatcher = new DowncastDispatcher( { mapper, viewSelection } );
 		dispatcher = new DowncastDispatcher( { mapper, viewSelection } );
 
 
@@ -243,7 +243,7 @@ describe( 'downcast-selection-converters', () => {
 
 
 			it( 'in marker - using highlight descriptor creator', () => {
 			it( 'in marker - using highlight descriptor creator', () => {
 				dispatcher.on( 'addMarker:marker2', highlightText(
 				dispatcher.on( 'addMarker:marker2', highlightText(
-					data => ( { 'class': data.markerName } )
+					data => ( { classes: data.markerName } )
 				) );
 				) );
 
 
 				setModelData( model, 'foobar' );
 				setModelData( model, 'foobar' );

+ 4 - 4
packages/ckeditor5-engine/tests/conversion/upcast-converters.js

@@ -232,7 +232,7 @@ describe( 'upcast-helpers', () => {
 			const helper = upcastElementToAttribute( {
 			const helper = upcastElementToAttribute( {
 				view: {
 				view: {
 					name: 'span',
 					name: 'span',
-					style: {
+					styles: {
 						'font-size': /[\s\S]+/
 						'font-size': /[\s\S]+/
 					}
 					}
 				},
 				},
@@ -304,12 +304,12 @@ describe( 'upcast-helpers', () => {
 		it( 'should allow two converters to convert attributes on the same element', () => {
 		it( 'should allow two converters to convert attributes on the same element', () => {
 			const helperA = upcastElementToAttribute( {
 			const helperA = upcastElementToAttribute( {
 				model: 'attribA',
 				model: 'attribA',
-				view: { name: 'span', class: 'attrib-a' }
+				view: { name: 'span', classes: 'attrib-a' }
 			} );
 			} );
 
 
 			const helperB = upcastElementToAttribute( {
 			const helperB = upcastElementToAttribute( {
 				model: 'attribB',
 				model: 'attribB',
-				view: { name: 'span', style: { color: 'attrib-b' } }
+				view: { name: 'span', styles: { color: 'attrib-b' } }
 			} );
 			} );
 
 
 			conversion.for( 'upcast' ).add( helperA ).add( helperB );
 			conversion.for( 'upcast' ).add( helperA ).add( helperB );
@@ -333,7 +333,7 @@ describe( 'upcast-helpers', () => {
 
 
 			const helperB = upcastElementToAttribute( {
 			const helperB = upcastElementToAttribute( {
 				model: 'attribB',
 				model: 'attribB',
-				view: { name: 'strong', class: 'foo' }
+				view: { name: 'strong', classes: 'foo' }
 			} );
 			} );
 
 
 			conversion.for( 'upcast' ).add( helperBold ).add( helperA ).add( helperB );
 			conversion.for( 'upcast' ).add( helperBold ).add( helperA ).add( helperB );

+ 176 - 176
packages/ckeditor5-engine/tests/conversion/viewconsumable.js

@@ -36,62 +36,62 @@ describe( 'ViewConsumable', () => {
 			expect( viewConsumable.test( fragment ) ).to.be.true;
 			expect( viewConsumable.test( fragment ) ).to.be.true;
 		} );
 		} );
 
 
-		it( 'should allow to add attributes classes and styles', () => {
-			viewConsumable.add( el, { attribute: 'href' } );
-			viewConsumable.add( el, { class: 'foobar' } );
-			viewConsumable.add( el, { style: 'color' } );
-
-			expect( viewConsumable.test( el, { attribute: 'href' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { class: 'foobar' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { style: 'color' } ) ).to.be.true;
+		it( 'should allow to add attribute classes and styles', () => {
+			viewConsumable.add( el, { attributes: 'href' } );
+			viewConsumable.add( el, { classes: 'foobar' } );
+			viewConsumable.add( el, { styles: 'color' } );
+
+			expect( viewConsumable.test( el, { attributes: 'href' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { classes: 'foobar' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { styles: 'color' } ) ).to.be.true;
 			expect( viewConsumable.test( el, { name: true } ) ).to.be.null;
 			expect( viewConsumable.test( el, { name: true } ) ).to.be.null;
 		} );
 		} );
 
 
-		it( 'should allow to add attributes classes and styles in one call', () => {
-			viewConsumable.add( el, { attribute: 'href', class: 'foobar', style: 'color' } );
+		it( 'should allow to add attribute classes and styles in one call', () => {
+			viewConsumable.add( el, { attributes: 'href', classes: 'foobar', styles: 'color' } );
 
 
-			expect( viewConsumable.test( el, { attribute: 'href' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { class: 'foobar' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { style: 'color' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { attributes: 'href' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { classes: 'foobar' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { styles: 'color' } ) ).to.be.true;
 			expect( viewConsumable.test( el, { name: true } ) ).to.be.null;
 			expect( viewConsumable.test( el, { name: true } ) ).to.be.null;
 		} );
 		} );
 
 
-		it( 'should allow to add multiple attributes in one call', () => {
-			viewConsumable.add( el, { attribute: [ 'href', 'target', 'title' ] } );
+		it( 'should allow to add multiple attribute in one call', () => {
+			viewConsumable.add( el, { attributes: [ 'href', 'target', 'title' ] } );
 
 
-			expect( viewConsumable.test( el, { attribute: 'href' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { attribute: 'target' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { attribute: 'title' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { attributes: 'href' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { attributes: 'target' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { attributes: 'title' } ) ).to.be.true;
 			expect( viewConsumable.test( el, { name: true } ) ).to.be.null;
 			expect( viewConsumable.test( el, { name: true } ) ).to.be.null;
 		} );
 		} );
 
 
 		it( 'should allow to add multiple classes in one call', () => {
 		it( 'should allow to add multiple classes in one call', () => {
-			viewConsumable.add( el, { class: [ 'foo', 'bar', 'baz' ] } );
+			viewConsumable.add( el, { classes: [ 'foo', 'bar', 'baz' ] } );
 
 
-			expect( viewConsumable.test( el, { class: 'foo' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { class: 'bar' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { class: 'baz' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { classes: 'foo' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { classes: 'bar' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { classes: 'baz' } ) ).to.be.true;
 			expect( viewConsumable.test( el, { name: true } ) ).to.be.null;
 			expect( viewConsumable.test( el, { name: true } ) ).to.be.null;
 		} );
 		} );
 
 
 		it( 'should allow to add multiple styles in one call', () => {
 		it( 'should allow to add multiple styles in one call', () => {
-			viewConsumable.add( el, { style: [ 'color', 'position', 'top' ] } );
+			viewConsumable.add( el, { styles: [ 'color', 'position', 'top' ] } );
 
 
-			expect( viewConsumable.test( el, { style: 'color' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { style: 'position' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { style: 'top' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { styles: 'color' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { styles: 'position' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { styles: 'top' } ) ).to.be.true;
 			expect( viewConsumable.test( el, { name: true } ) ).to.be.null;
 			expect( viewConsumable.test( el, { name: true } ) ).to.be.null;
 		} );
 		} );
 
 
 		it( 'should throw if class attribute is added', () => {
 		it( 'should throw if class attribute is added', () => {
 			expect( () => {
 			expect( () => {
-				viewConsumable.add( el, { attribute: 'class' } );
+				viewConsumable.add( el, { attributes: 'class' } );
 			} ).to.throw( 'viewconsumable-invalid-attribute' );
 			} ).to.throw( 'viewconsumable-invalid-attribute' );
 		} );
 		} );
 
 
 		it( 'should throw if style attribute is added', () => {
 		it( 'should throw if style attribute is added', () => {
 			expect( () => {
 			expect( () => {
-				viewConsumable.add( el, { attribute: 'style' } );
+				viewConsumable.add( el, { attributes: 'style' } );
 			} ).to.throw( 'viewconsumable-invalid-attribute' );
 			} ).to.throw( 'viewconsumable-invalid-attribute' );
 		} );
 		} );
 	} );
 	} );
@@ -126,50 +126,50 @@ describe( 'ViewConsumable', () => {
 			expect( viewConsumable.test( fragment2 ) ).to.be.null;
 			expect( viewConsumable.test( fragment2 ) ).to.be.null;
 		} );
 		} );
 
 
-		it( 'should test attributes, classes and styles', () => {
+		it( 'should test attribute, classes and styles', () => {
 			const el = new ViewElement( 'p' );
 			const el = new ViewElement( 'p' );
 
 
-			viewConsumable.add( el, { attribute: 'href', class: 'foobar', style: 'color' } );
+			viewConsumable.add( el, { attributes: 'href', classes: 'foobar', styles: 'color' } );
 
 
-			expect( viewConsumable.test( el, { attribute: 'href' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { class: 'foobar' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { style: 'color' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { attribute: 'href', class: 'foobar', style: 'color' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { attribute: 'href', class: 'baz' } ) ).to.be.null;
+			expect( viewConsumable.test( el, { attributes: 'href' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { classes: 'foobar' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { styles: 'color' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { attributes: 'href', classes: 'foobar', styles: 'color' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { attributes: 'href', classes: 'baz' } ) ).to.be.null;
 			expect( viewConsumable.test( el, { name: true } ) ).to.be.null;
 			expect( viewConsumable.test( el, { name: true } ) ).to.be.null;
 
 
-			viewConsumable.consume( el, { style: 'color' } );
-			expect( viewConsumable.test( el, { attribute: 'href', style: 'color' } ) ).to.be.false;
+			viewConsumable.consume( el, { styles: 'color' } );
+			expect( viewConsumable.test( el, { attributes: 'href', styles: 'color' } ) ).to.be.false;
 		} );
 		} );
 
 
-		it( 'should allow to test multiple attributes in one call', () => {
-			viewConsumable.add( el, { attribute: [ 'href', 'title', 'target' ] } );
+		it( 'should allow to test multiple attribute in one call', () => {
+			viewConsumable.add( el, { attributes: [ 'href', 'title', 'target' ] } );
 
 
-			expect( viewConsumable.test( el, { attribute: [ 'href', 'title', 'target' ] } ) ).to.be.true;
-			expect( viewConsumable.test( el, { attribute: [ 'href', 'title', 'alt' ] } ) ).to.be.null;
+			expect( viewConsumable.test( el, { attributes: [ 'href', 'title', 'target' ] } ) ).to.be.true;
+			expect( viewConsumable.test( el, { attributes: [ 'href', 'title', 'alt' ] } ) ).to.be.null;
 
 
-			viewConsumable.consume( el, { attribute: 'target' } );
-			expect( viewConsumable.test( el, { attribute: [ 'href', 'title', 'target' ] } ) ).to.be.false;
+			viewConsumable.consume( el, { attributes: 'target' } );
+			expect( viewConsumable.test( el, { attributes: [ 'href', 'title', 'target' ] } ) ).to.be.false;
 		} );
 		} );
 
 
 		it( 'should allow to test multiple classes in one call', () => {
 		it( 'should allow to test multiple classes in one call', () => {
-			viewConsumable.add( el, { class: [ 'foo', 'bar', 'baz' ] } );
+			viewConsumable.add( el, { classes: [ 'foo', 'bar', 'baz' ] } );
 
 
-			expect( viewConsumable.test( el, { class: [ 'foo', 'bar', 'baz' ] } ) ).to.be.true;
-			expect( viewConsumable.test( el, { class: [ 'foo', 'bar', 'qux' ] } ) ).to.be.null;
+			expect( viewConsumable.test( el, { classes: [ 'foo', 'bar', 'baz' ] } ) ).to.be.true;
+			expect( viewConsumable.test( el, { classes: [ 'foo', 'bar', 'qux' ] } ) ).to.be.null;
 
 
-			viewConsumable.consume( el, { class: 'bar' } );
-			expect( viewConsumable.test( el, { class: [ 'foo', 'bar', 'baz' ] } ) ).to.be.false;
+			viewConsumable.consume( el, { classes: 'bar' } );
+			expect( viewConsumable.test( el, { classes: [ 'foo', 'bar', 'baz' ] } ) ).to.be.false;
 		} );
 		} );
 
 
 		it( 'should allow to test multiple styles in one call', () => {
 		it( 'should allow to test multiple styles in one call', () => {
-			viewConsumable.add( el, { style: [ 'color', 'position', 'top' ] } );
+			viewConsumable.add( el, { styles: [ 'color', 'position', 'top' ] } );
 
 
-			expect( viewConsumable.test( el, { style: [ 'color', 'position', 'top' ] } ) ).to.be.true;
-			expect( viewConsumable.test( el, { style: [ 'color', 'position', 'left' ] } ) ).to.be.null;
+			expect( viewConsumable.test( el, { styles: [ 'color', 'position', 'top' ] } ) ).to.be.true;
+			expect( viewConsumable.test( el, { styles: [ 'color', 'position', 'left' ] } ) ).to.be.null;
 
 
-			viewConsumable.consume( el, { style: 'top' } );
-			expect( viewConsumable.test( el, { style: [ 'color', 'position', 'top' ] } ) ).to.be.false;
+			viewConsumable.consume( el, { styles: 'top' } );
+			expect( viewConsumable.test( el, { styles: [ 'color', 'position', 'top' ] } ) ).to.be.false;
 		} );
 		} );
 
 
 		it( 'should return null if not consumable', () => {
 		it( 'should return null if not consumable', () => {
@@ -184,46 +184,46 @@ describe( 'ViewConsumable', () => {
 		} );
 		} );
 
 
 		it( 'should return null if first non-consumable item is found', () => {
 		it( 'should return null if first non-consumable item is found', () => {
-			viewConsumable.add( el, { attribute: 'foo' } );
+			viewConsumable.add( el, { attributes: 'foo' } );
 
 
-			expect( viewConsumable.test( el, { attribute: [ 'foo', 'bar' ] } ) ).to.be.null;
+			expect( viewConsumable.test( el, { attributes: [ 'foo', 'bar' ] } ) ).to.be.null;
 		} );
 		} );
 
 
 		it( 'should return false if first already consumed item is found', () => {
 		it( 'should return false if first already consumed item is found', () => {
-			viewConsumable.add( el, { name: true, attribute: [ 'foo', 'bar' ] } );
-			viewConsumable.consume( el, { attribute: 'bar' } );
+			viewConsumable.add( el, { name: true, attributes: [ 'foo', 'bar' ] } );
+			viewConsumable.consume( el, { attributes: 'bar' } );
 			viewConsumable.consume( el, { name: true } );
 			viewConsumable.consume( el, { name: true } );
 
 
-			expect( viewConsumable.test( el, { attribute: [ 'foo', 'bar' ] } ) ).to.be.false;
+			expect( viewConsumable.test( el, { attributes: [ 'foo', 'bar' ] } ) ).to.be.false;
 			expect( viewConsumable.test( el, { name: true } ) ).to.be.false;
 			expect( viewConsumable.test( el, { name: true } ) ).to.be.false;
 		} );
 		} );
 
 
 		it( 'should test all classes if class attribute is tested', () => {
 		it( 'should test all classes if class attribute is tested', () => {
-			viewConsumable.add( el, { class: [ 'foo', 'bar', 'baz' ] } );
-			expect( viewConsumable.test( el, { attribute: 'class' } ) ).to.be.true;
-			expect( viewConsumable.consume( el, { class: 'baz' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { attribute: 'class' } ) ).to.be.false;
+			viewConsumable.add( el, { classes: [ 'foo', 'bar', 'baz' ] } );
+			expect( viewConsumable.test( el, { attributes: 'class' } ) ).to.be.true;
+			expect( viewConsumable.consume( el, { classes: 'baz' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { attributes: 'class' } ) ).to.be.false;
 		} );
 		} );
 
 
 		it( 'should test all styles if style attribute is tested', () => {
 		it( 'should test all styles if style attribute is tested', () => {
-			viewConsumable.add( el, { style: [ 'color', 'top', 'position' ] } );
-			expect( viewConsumable.test( el, { attribute: 'style' } ) ).to.be.true;
-			expect( viewConsumable.consume( el, { style: 'top' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { attribute: 'style' } ) ).to.be.false;
+			viewConsumable.add( el, { styles: [ 'color', 'top', 'position' ] } );
+			expect( viewConsumable.test( el, { attributes: 'style' } ) ).to.be.true;
+			expect( viewConsumable.consume( el, { styles: 'top' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { attributes: 'style' } ) ).to.be.false;
 		} );
 		} );
 
 
 		it( 'should return false when testing class attribute when consumed classes exists', () => {
 		it( 'should return false when testing class attribute when consumed classes exists', () => {
-			viewConsumable.add( el, { class: [ 'foo', 'baz' ] } );
-			expect( viewConsumable.consume( el, { class: 'baz' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { attribute: 'class' } ) ).to.be.false;
-			expect( viewConsumable.consume( el, { attribute: 'class' } ) ).to.be.false;
+			viewConsumable.add( el, { classes: [ 'foo', 'baz' ] } );
+			expect( viewConsumable.consume( el, { classes: 'baz' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { attributes: 'class' } ) ).to.be.false;
+			expect( viewConsumable.consume( el, { attributes: 'class' } ) ).to.be.false;
 		} );
 		} );
 
 
 		it( 'should return false when testing style attribute when consumed styles exists', () => {
 		it( 'should return false when testing style attribute when consumed styles exists', () => {
-			viewConsumable.add( el, { style: [ 'top', 'left' ] } );
-			expect( viewConsumable.consume( el, { style: 'top' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { attribute: 'style' } ) ).to.be.false;
-			expect( viewConsumable.consume( el, { attribute: 'style' } ) ).to.be.false;
+			viewConsumable.add( el, { styles: [ 'top', 'left' ] } );
+			expect( viewConsumable.consume( el, { styles: 'top' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { attributes: 'style' } ) ).to.be.false;
+			expect( viewConsumable.consume( el, { attributes: 'style' } ) ).to.be.false;
 		} );
 		} );
 	} );
 	} );
 
 
@@ -265,81 +265,81 @@ describe( 'ViewConsumable', () => {
 			expect( viewConsumable.consume( el, { name: true } ) ).to.be.false;
 			expect( viewConsumable.consume( el, { name: true } ) ).to.be.false;
 		} );
 		} );
 
 
-		it( 'should consume attributes, classes and styles', () => {
-			viewConsumable.add( el, { class: 'foobar', attribute: 'href', style: 'color' } );
+		it( 'should consume attribute, classes and styles', () => {
+			viewConsumable.add( el, { classes: 'foobar', attributes: 'href', styles: 'color' } );
 
 
-			const consumed1 = viewConsumable.consume( el, { class: 'foobar' } );
-			const consumed2 = viewConsumable.consume( el, { attribute: 'href' } );
-			const consumed3 = viewConsumable.consume( el, { style: 'color' } );
+			const consumed1 = viewConsumable.consume( el, { classes: 'foobar' } );
+			const consumed2 = viewConsumable.consume( el, { attributes: 'href' } );
+			const consumed3 = viewConsumable.consume( el, { styles: 'color' } );
 
 
 			expect( consumed1 ).to.be.true;
 			expect( consumed1 ).to.be.true;
 			expect( consumed2 ).to.be.true;
 			expect( consumed2 ).to.be.true;
 			expect( consumed3 ).to.be.true;
 			expect( consumed3 ).to.be.true;
 
 
-			expect( viewConsumable.test( el, { class: 'foobar' } ) ).to.be.false;
-			expect( viewConsumable.test( el, { attribute: 'href' } ) ).to.be.false;
-			expect( viewConsumable.test( el, { style: 'color' } ) ).to.be.false;
+			expect( viewConsumable.test( el, { classes: 'foobar' } ) ).to.be.false;
+			expect( viewConsumable.test( el, { attributes: 'href' } ) ).to.be.false;
+			expect( viewConsumable.test( el, { styles: 'color' } ) ).to.be.false;
 		} );
 		} );
 
 
-		it( 'should consume multiple attributes', () => {
-			viewConsumable.add( el, { attribute: [ 'href', 'title', 'name' ] } );
+		it( 'should consume multiple attribute', () => {
+			viewConsumable.add( el, { attributes: [ 'href', 'title', 'name' ] } );
 
 
-			const consumed = viewConsumable.consume( el, { attribute: [ 'href', 'title' ] } );
+			const consumed = viewConsumable.consume( el, { attributes: [ 'href', 'title' ] } );
 
 
 			expect( consumed ).to.be.true;
 			expect( consumed ).to.be.true;
-			expect( viewConsumable.test( el, { attribute: 'href' } ) ).to.be.false;
-			expect( viewConsumable.test( el, { attribute: 'title' } ) ).to.be.false;
-			expect( viewConsumable.test( el, { attribute: 'name' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { attributes: 'href' } ) ).to.be.false;
+			expect( viewConsumable.test( el, { attributes: 'title' } ) ).to.be.false;
+			expect( viewConsumable.test( el, { attributes: 'name' } ) ).to.be.true;
 		} );
 		} );
 
 
 		it( 'should consume multiple styles', () => {
 		it( 'should consume multiple styles', () => {
-			viewConsumable.add( el, { style: [ 'color', 'top', 'position' ] } );
+			viewConsumable.add( el, { styles: [ 'color', 'top', 'position' ] } );
 
 
-			const consumed = viewConsumable.consume( el, { style: [ 'color', 'position' ] } );
+			const consumed = viewConsumable.consume( el, { styles: [ 'color', 'position' ] } );
 
 
 			expect( consumed ).to.be.true;
 			expect( consumed ).to.be.true;
-			expect( viewConsumable.test( el, { style: 'color' } ) ).to.be.false;
-			expect( viewConsumable.test( el, { style: 'position' } ) ).to.be.false;
-			expect( viewConsumable.test( el, { style: 'top' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { styles: 'color' } ) ).to.be.false;
+			expect( viewConsumable.test( el, { styles: 'position' } ) ).to.be.false;
+			expect( viewConsumable.test( el, { styles: 'top' } ) ).to.be.true;
 		} );
 		} );
 
 
 		it( 'should consume multiple classes', () => {
 		it( 'should consume multiple classes', () => {
-			viewConsumable.add( el, { class: [ 'foo', 'bar', 'baz' ] } );
+			viewConsumable.add( el, { classes: [ 'foo', 'bar', 'baz' ] } );
 
 
-			const consumed = viewConsumable.consume( el, { class: [ 'bar', 'baz' ] } );
+			const consumed = viewConsumable.consume( el, { classes: [ 'bar', 'baz' ] } );
 
 
 			expect( consumed ).to.be.true;
 			expect( consumed ).to.be.true;
-			expect( viewConsumable.test( el, { class: 'bar' } ) ).to.be.false;
-			expect( viewConsumable.test( el, { class: 'baz' } ) ).to.be.false;
-			expect( viewConsumable.test( el, { class: 'foo' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { classes: 'bar' } ) ).to.be.false;
+			expect( viewConsumable.test( el, { classes: 'baz' } ) ).to.be.false;
+			expect( viewConsumable.test( el, { classes: 'foo' } ) ).to.be.true;
 		} );
 		} );
 
 
 		it( 'should consume only if all items can be consumed', () => {
 		it( 'should consume only if all items can be consumed', () => {
-			viewConsumable.add( el, { style: [ 'position', 'color' ], attribute: [ 'href', 'title' ] } );
+			viewConsumable.add( el, { styles: [ 'position', 'color' ], attributes: [ 'href', 'title' ] } );
 
 
-			const consumed = viewConsumable.consume( el, { style: [ 'color', 'top' ] } );
+			const consumed = viewConsumable.consume( el, { styles: [ 'color', 'top' ] } );
 			expect( consumed ).to.be.false;
 			expect( consumed ).to.be.false;
-			expect( viewConsumable.test( el, { style: 'color' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { styles: 'color' } ) ).to.be.true;
 		} );
 		} );
 
 
 		it( 'should consume all classes when class attribute is provided', () => {
 		it( 'should consume all classes when class attribute is provided', () => {
-			expect( viewConsumable.consume( el, { attribute: 'class' } ) ).to.be.false;
-			viewConsumable.add( el, { class: [ 'foo', 'bar', 'baz' ] } );
-			expect( viewConsumable.consume( el, { attribute: 'class' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { attribute: 'class' } ) ).to.be.false;
-			expect( viewConsumable.test( el, { class: 'foo' } ) ).to.be.false;
-			expect( viewConsumable.test( el, { class: 'bar' } ) ).to.be.false;
-			expect( viewConsumable.test( el, { class: 'baz' } ) ).to.be.false;
+			expect( viewConsumable.consume( el, { attributes: 'class' } ) ).to.be.false;
+			viewConsumable.add( el, { classes: [ 'foo', 'bar', 'baz' ] } );
+			expect( viewConsumable.consume( el, { attributes: 'class' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { attributes: 'class' } ) ).to.be.false;
+			expect( viewConsumable.test( el, { classes: 'foo' } ) ).to.be.false;
+			expect( viewConsumable.test( el, { classes: 'bar' } ) ).to.be.false;
+			expect( viewConsumable.test( el, { classes: 'baz' } ) ).to.be.false;
 		} );
 		} );
 
 
 		it( 'should consume all styles when style attribute is provided', () => {
 		it( 'should consume all styles when style attribute is provided', () => {
-			expect( viewConsumable.consume( el, { attribute: 'style' } ) ).to.be.false;
-			viewConsumable.add( el, { style: [ 'color', 'top', 'position' ] } );
-			expect( viewConsumable.consume( el, { attribute: 'style' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { attribute: 'style' } ) ).to.be.false;
-			expect( viewConsumable.test( el, { style: 'color' } ) ).to.be.false;
-			expect( viewConsumable.test( el, { style: 'top' } ) ).to.be.false;
-			expect( viewConsumable.test( el, { style: 'position' } ) ).to.be.false;
+			expect( viewConsumable.consume( el, { attributes: 'style' } ) ).to.be.false;
+			viewConsumable.add( el, { styles: [ 'color', 'top', 'position' ] } );
+			expect( viewConsumable.consume( el, { attributes: 'style' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { attributes: 'style' } ) ).to.be.false;
+			expect( viewConsumable.test( el, { styles: 'color' } ) ).to.be.false;
+			expect( viewConsumable.test( el, { styles: 'top' } ) ).to.be.false;
+			expect( viewConsumable.test( el, { styles: 'position' } ) ).to.be.false;
 		} );
 		} );
 	} );
 	} );
 
 
@@ -391,34 +391,34 @@ describe( 'ViewConsumable', () => {
 			expect( viewConsumable.test( el, { name: true } ) ).to.be.true;
 			expect( viewConsumable.test( el, { name: true } ) ).to.be.true;
 		} );
 		} );
 
 
-		it( 'should revert classes, attributes and styles', () => {
-			viewConsumable.add( el, { class: 'foobar', style: 'color', attribute: 'name' } );
-			viewConsumable.consume( el, { class: 'foobar', style: 'color', attribute: 'name' } );
+		it( 'should revert classes, attribute and styles', () => {
+			viewConsumable.add( el, { classes: 'foobar', styles: 'color', attributes: 'name' } );
+			viewConsumable.consume( el, { classes: 'foobar', styles: 'color', attributes: 'name' } );
 
 
-			viewConsumable.revert( el, { class: 'foobar' } );
-			viewConsumable.revert( el, { style: 'color' } );
-			viewConsumable.revert( el, { attribute: 'name' } );
+			viewConsumable.revert( el, { classes: 'foobar' } );
+			viewConsumable.revert( el, { styles: 'color' } );
+			viewConsumable.revert( el, { attributes: 'name' } );
 
 
-			expect( viewConsumable.test( el, { class: 'foobar', style: 'color', attribute: 'name' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { classes: 'foobar', styles: 'color', attributes: 'name' } ) ).to.be.true;
 		} );
 		} );
 
 
-		it( 'should revert multiple classes, attributes and styles in one call #1', () => {
+		it( 'should revert multiple classes, attribute and styles in one call #1', () => {
 			viewConsumable.add( el, {
 			viewConsumable.add( el, {
-				class: 'foobar',
-				style: 'color',
-				attribute: 'name'
+				classes: 'foobar',
+				styles: 'color',
+				attributes: 'name'
 			} );
 			} );
-			viewConsumable.consume( el, { class: 'foobar', style: 'color', attribute: 'name' } );
-			viewConsumable.revert( el, { class: 'foobar', style: 'color', attribute: 'name' } );
+			viewConsumable.consume( el, { classes: 'foobar', styles: 'color', attributes: 'name' } );
+			viewConsumable.revert( el, { classes: 'foobar', styles: 'color', attributes: 'name' } );
 
 
-			expect( viewConsumable.test( el, { class: 'foobar', style: 'color', attribute: 'name' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { classes: 'foobar', styles: 'color', attributes: 'name' } ) ).to.be.true;
 		} );
 		} );
 
 
-		it( 'should revert multiple classes, attributes and styles in one call #2', () => {
+		it( 'should revert multiple classes, attribute and styles in one call #2', () => {
 			const consumables = {
 			const consumables = {
-				class: [ 'foobar', 'baz' ],
-				style: [ 'color', 'position' ],
-				attribute: [ 'name', 'href' ]
+				classes: [ 'foobar', 'baz' ],
+				styles: [ 'color', 'position' ],
+				attributes: [ 'name', 'href' ]
 			};
 			};
 
 
 			viewConsumable.add( el, consumables );
 			viewConsumable.add( el, consumables );
@@ -429,33 +429,33 @@ describe( 'ViewConsumable', () => {
 		} );
 		} );
 
 
 		it( 'should revert only items that were previously added', () => {
 		it( 'should revert only items that were previously added', () => {
-			viewConsumable.add( el, { class: 'foobar' } );
-			viewConsumable.consume( el, { class: 'foobar' } );
-			viewConsumable.revert( el, { class: 'foobar', attribute: 'name' } );
+			viewConsumable.add( el, { classes: 'foobar' } );
+			viewConsumable.consume( el, { classes: 'foobar' } );
+			viewConsumable.revert( el, { classes: 'foobar', attributes: 'name' } );
 
 
-			expect( viewConsumable.test( el, { class: 'foobar' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { attribute: 'name' } ) ).to.be.null;
+			expect( viewConsumable.test( el, { classes: 'foobar' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { attributes: 'name' } ) ).to.be.null;
 		} );
 		} );
 
 
 		it( 'should revert all classes when class attribute is provided', () => {
 		it( 'should revert all classes when class attribute is provided', () => {
-			viewConsumable.add( el, { class: [ 'foo', 'bar', 'baz' ] } );
-			expect( viewConsumable.consume( el, { class: [ 'foo', 'bar', 'baz' ] } ) ).to.be.true;
-			viewConsumable.revert( el, { attribute: 'class' } );
+			viewConsumable.add( el, { classes: [ 'foo', 'bar', 'baz' ] } );
+			expect( viewConsumable.consume( el, { classes: [ 'foo', 'bar', 'baz' ] } ) ).to.be.true;
+			viewConsumable.revert( el, { attributes: 'class' } );
 
 
-			expect( viewConsumable.test( el, { class: 'foo' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { class: 'bar' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { class: 'baz' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { class: 'qux' } ) ).to.be.null;
+			expect( viewConsumable.test( el, { classes: 'foo' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { classes: 'bar' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { classes: 'baz' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { classes: 'qux' } ) ).to.be.null;
 		} );
 		} );
 
 
 		it( 'should revert all styles when style attribute is provided', () => {
 		it( 'should revert all styles when style attribute is provided', () => {
-			viewConsumable.add( el, { style: [ 'color', 'top' ] } );
-			expect( viewConsumable.consume( el, { style: [ 'color', 'top' ] } ) ).to.be.true;
-			viewConsumable.revert( el, { attribute: 'style' } );
+			viewConsumable.add( el, { styles: [ 'color', 'top' ] } );
+			expect( viewConsumable.consume( el, { styles: [ 'color', 'top' ] } ) ).to.be.true;
+			viewConsumable.revert( el, { attributes: 'style' } );
 
 
-			expect( viewConsumable.test( el, { style: 'color' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { style: 'top' } ) ).to.be.true;
-			expect( viewConsumable.test( el, { style: 'qux' } ) ).to.be.null;
+			expect( viewConsumable.test( el, { styles: 'color' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { styles: 'top' } ) ).to.be.true;
+			expect( viewConsumable.test( el, { styles: 'qux' } ) ).to.be.null;
 		} );
 		} );
 	} );
 	} );
 
 
@@ -465,24 +465,24 @@ describe( 'ViewConsumable', () => {
 
 
 			expect( consumables ).to.be.an( 'object' );
 			expect( consumables ).to.be.an( 'object' );
 			expect( consumables.name ).to.be.true;
 			expect( consumables.name ).to.be.true;
-			expect( consumables.attribute ).to.be.an( 'array' );
-			expect( consumables.attribute.length ).to.equal( 0 );
-			expect( consumables.class ).to.be.an( 'array' );
-			expect( consumables.class.length ).to.equal( 0 );
-			expect( consumables.style ).to.be.an( 'array' );
-			expect( consumables.style.length ).to.equal( 0 );
+			expect( consumables.attributes ).to.be.an( 'array' );
+			expect( consumables.attributes.length ).to.equal( 0 );
+			expect( consumables.classes ).to.be.an( 'array' );
+			expect( consumables.classes.length ).to.equal( 0 );
+			expect( consumables.styles ).to.be.an( 'array' );
+			expect( consumables.styles.length ).to.equal( 0 );
 		} );
 		} );
 
 
-		it( 'should add all attributes', () => {
+		it( 'should add all attribute', () => {
 			el._setAttribute( 'title', 'foobar' );
 			el._setAttribute( 'title', 'foobar' );
 			el._setAttribute( 'href', 'https://ckeditor.com' );
 			el._setAttribute( 'href', 'https://ckeditor.com' );
 
 
 			const consumables = ViewConsumable.consumablesFromElement( el );
 			const consumables = ViewConsumable.consumablesFromElement( el );
-			expect( consumables.attribute.length ).to.equal( 2 );
-			expect( consumables.attribute.indexOf( 'title' ) > -1 ).to.be.true;
-			expect( consumables.attribute.indexOf( 'href' ) > -1 ).to.be.true;
-			expect( consumables.class.length ).to.equal( 0 );
-			expect( consumables.style.length ).to.equal( 0 );
+			expect( consumables.attributes.length ).to.equal( 2 );
+			expect( consumables.attributes.indexOf( 'title' ) > -1 ).to.be.true;
+			expect( consumables.attributes.indexOf( 'href' ) > -1 ).to.be.true;
+			expect( consumables.classes.length ).to.equal( 0 );
+			expect( consumables.styles.length ).to.equal( 0 );
 			expect( consumables.name ).to.be.true;
 			expect( consumables.name ).to.be.true;
 		} );
 		} );
 
 
@@ -490,12 +490,12 @@ describe( 'ViewConsumable', () => {
 			el._addClass( [ 'foo', 'bar', 'baz' ] );
 			el._addClass( [ 'foo', 'bar', 'baz' ] );
 
 
 			const consumables = ViewConsumable.consumablesFromElement( el );
 			const consumables = ViewConsumable.consumablesFromElement( el );
-			expect( consumables.class.length ).to.equal( 3 );
-			expect( consumables.class.indexOf( 'foo' ) > -1 ).to.be.true;
-			expect( consumables.class.indexOf( 'bar' ) > -1 ).to.be.true;
-			expect( consumables.class.indexOf( 'baz' ) > -1 ).to.be.true;
-			expect( consumables.attribute.length ).to.equal( 0 );
-			expect( consumables.style.length ).to.equal( 0 );
+			expect( consumables.classes.length ).to.equal( 3 );
+			expect( consumables.classes.indexOf( 'foo' ) > -1 ).to.be.true;
+			expect( consumables.classes.indexOf( 'bar' ) > -1 ).to.be.true;
+			expect( consumables.classes.indexOf( 'baz' ) > -1 ).to.be.true;
+			expect( consumables.attributes.length ).to.equal( 0 );
+			expect( consumables.styles.length ).to.equal( 0 );
 			expect( consumables.name ).to.be.true;
 			expect( consumables.name ).to.be.true;
 		} );
 		} );
 
 
@@ -506,11 +506,11 @@ describe( 'ViewConsumable', () => {
 			} );
 			} );
 
 
 			const consumables = ViewConsumable.consumablesFromElement( el );
 			const consumables = ViewConsumable.consumablesFromElement( el );
-			expect( consumables.style.length ).to.equal( 2 );
-			expect( consumables.style.indexOf( 'color' ) > -1 ).to.be.true;
-			expect( consumables.style.indexOf( 'position' ) > -1 ).to.be.true;
-			expect( consumables.attribute.length ).to.equal( 0 );
-			expect( consumables.class.length ).to.equal( 0 );
+			expect( consumables.styles.length ).to.equal( 2 );
+			expect( consumables.styles.indexOf( 'color' ) > -1 ).to.be.true;
+			expect( consumables.styles.indexOf( 'position' ) > -1 ).to.be.true;
+			expect( consumables.attributes.length ).to.equal( 0 );
+			expect( consumables.classes.length ).to.equal( 0 );
 			expect( consumables.name ).to.be.true;
 			expect( consumables.name ).to.be.true;
 		} );
 		} );
 	} );
 	} );
@@ -544,9 +544,9 @@ describe( 'ViewConsumable', () => {
 			expect( newConsumable.test( el, { name: true } ) ).to.be.true;
 			expect( newConsumable.test( el, { name: true } ) ).to.be.true;
 			expect( newConsumable.test( text1 ) ).to.be.true;
 			expect( newConsumable.test( text1 ) ).to.be.true;
 			expect( newConsumable.test( text2 ) ).to.be.true;
 			expect( newConsumable.test( text2 ) ).to.be.true;
-			expect( newConsumable.test( child1, { name: true, attribute: 'title' } ) ).to.be.true;
+			expect( newConsumable.test( child1, { name: true, attributes: 'title' } ) ).to.be.true;
 			expect( newConsumable.test( child2, { name: true } ) ).to.be.true;
 			expect( newConsumable.test( child2, { name: true } ) ).to.be.true;
-			expect( newConsumable.test( child3, { name: true, style: 'top', class: [ 'qux', 'bar' ] } ) ).to.be.true;
+			expect( newConsumable.test( child3, { name: true, styles: 'top', classes: [ 'qux', 'bar' ] } ) ).to.be.true;
 		} );
 		} );
 	} );
 	} );
 } );
 } );

+ 2 - 2
packages/ckeditor5-engine/tests/view/element.js

@@ -948,7 +948,7 @@ describe( 'Element', () => {
 			const el2 = new Element( 'div', null, el1 );
 			const el2 = new Element( 'div', null, el1 );
 			const el3 = new Element( 'div', { class: 'foo bar' }, el2 );
 			const el3 = new Element( 'div', { class: 'foo bar' }, el2 );
 
 
-			expect( el1.findAncestor( { class: 'foo' } ) ).to.equal( el3 );
+			expect( el1.findAncestor( { classes: 'foo' } ) ).to.equal( el3 );
 		} );
 		} );
 
 
 		it( 'should return null if no matches found', () => {
 		it( 'should return null if no matches found', () => {
@@ -957,7 +957,7 @@ describe( 'Element', () => {
 
 
 			expect( el1.findAncestor( {
 			expect( el1.findAncestor( {
 				name: 'div',
 				name: 'div',
-				class: 'container'
+				classes: 'container'
 			} ) ).to.be.null;
 			} ) ).to.be.null;
 		} );
 		} );
 	} );
 	} );

+ 53 - 53
packages/ckeditor5-engine/tests/view/matcher.js

@@ -13,14 +13,14 @@ describe( 'Matcher', () => {
 			const el = new Element( 'p', { title: 'foobar' } );
 			const el = new Element( 'p', { title: 'foobar' } );
 
 
 			expect( matcher.match( el ) ).to.be.null;
 			expect( matcher.match( el ) ).to.be.null;
-			const pattern = { name: 'p', attribute: { title: 'foobar' } };
+			const pattern = { name: 'p', attributes: { title: 'foobar' } };
 			matcher.add( pattern );
 			matcher.add( pattern );
 			const result = matcher.match( el );
 			const result = matcher.match( el );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'element' ).that.equal( el );
 			expect( result ).to.have.property( 'element' ).that.equal( el );
 			expect( result ).to.have.property( 'match' ).that.has.property( 'name' ).that.is.true;
 			expect( result ).to.have.property( 'match' ).that.has.property( 'name' ).that.is.true;
-			expect( result.match ).to.have.property( 'attribute' ).that.is.an( 'array' );
-			expect( result.match.attribute[ 0 ] ).to.equal( 'title' );
+			expect( result.match ).to.have.property( 'attributes' ).that.is.an( 'array' );
+			expect( result.match.attributes[ 0 ] ).to.equal( 'title' );
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.be.an( 'object' );
 		} );
 		} );
 
 
@@ -77,7 +77,7 @@ describe( 'Matcher', () => {
 
 
 		it( 'should match element attributes', () => {
 		it( 'should match element attributes', () => {
 			const pattern = {
 			const pattern = {
-				attribute: {
+				attributes: {
 					title: 'foobar'
 					title: 'foobar'
 				}
 				}
 			};
 			};
@@ -92,16 +92,16 @@ describe( 'Matcher', () => {
 			expect( result ).to.have.property( 'element' ).and.equal( el1 );
 			expect( result ).to.have.property( 'element' ).and.equal( el1 );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 
 
-			expect( result ).to.have.property( 'match' ).that.has.property( 'attribute' ).that.is.an( 'array' );
+			expect( result ).to.have.property( 'match' ).that.has.property( 'attributes' ).that.is.an( 'array' );
 
 
-			expect( result.match.attribute[ 0 ] ).equal( 'title' );
+			expect( result.match.attributes[ 0 ] ).equal( 'title' );
 			expect( matcher.match( el2 ) ).to.be.null;
 			expect( matcher.match( el2 ) ).to.be.null;
 			expect( matcher.match( el3 ) ).to.be.null;
 			expect( matcher.match( el3 ) ).to.be.null;
 		} );
 		} );
 
 
 		it( 'should match element attributes using RegExp', () => {
 		it( 'should match element attributes using RegExp', () => {
 			const pattern = {
 			const pattern = {
-				attribute: {
+				attributes: {
 					title: /fooba./
 					title: /fooba./
 				}
 				}
 			};
 			};
@@ -114,21 +114,21 @@ describe( 'Matcher', () => {
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.have.property( 'element' ).that.equal( el1 );
 			expect( result ).to.have.property( 'element' ).that.equal( el1 );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
-			expect( result ).to.have.property( 'match' ).that.has.property( 'attribute' ).that.is.an( 'array' );
-			expect( result.match.attribute[ 0 ] ).equal( 'title' );
+			expect( result ).to.have.property( 'match' ).that.has.property( 'attributes' ).that.is.an( 'array' );
+			expect( result.match.attributes[ 0 ] ).equal( 'title' );
 
 
 			result = matcher.match( el2 );
 			result = matcher.match( el2 );
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.have.property( 'element' ).that.equal( el2 );
 			expect( result ).to.have.property( 'element' ).that.equal( el2 );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
-			expect( result ).to.have.property( 'match' ).that.has.property( 'attribute' ).that.is.an( 'array' );
-			expect( result.match.attribute[ 0 ] ).equal( 'title' );
+			expect( result ).to.have.property( 'match' ).that.has.property( 'attributes' ).that.is.an( 'array' );
+			expect( result.match.attributes[ 0 ] ).equal( 'title' );
 			expect( matcher.match( el3 ) ).to.be.null;
 			expect( matcher.match( el3 ) ).to.be.null;
 		} );
 		} );
 
 
 		it( 'should match if element has given attribute', () => {
 		it( 'should match if element has given attribute', () => {
 			const pattern = {
 			const pattern = {
-				attribute: {
+				attributes: {
 					title: true
 					title: true
 				}
 				}
 			};
 			};
@@ -141,21 +141,21 @@ describe( 'Matcher', () => {
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.have.property( 'element' ).that.equal( el1 );
 			expect( result ).to.have.property( 'element' ).that.equal( el1 );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
-			expect( result ).to.have.property( 'match' ).that.has.property( 'attribute' ).that.is.an( 'array' );
-			expect( result.match.attribute[ 0 ] ).equal( 'title' );
+			expect( result ).to.have.property( 'match' ).that.has.property( 'attributes' ).that.is.an( 'array' );
+			expect( result.match.attributes[ 0 ] ).equal( 'title' );
 
 
 			result = matcher.match( el2 );
 			result = matcher.match( el2 );
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.have.property( 'element' ).that.equal( el2 );
 			expect( result ).to.have.property( 'element' ).that.equal( el2 );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
-			expect( result ).to.have.property( 'match' ).that.has.property( 'attribute' ).that.is.an( 'array' );
-			expect( result.match.attribute[ 0 ] ).equal( 'title' );
+			expect( result ).to.have.property( 'match' ).that.has.property( 'attributes' ).that.is.an( 'array' );
+			expect( result.match.attributes[ 0 ] ).equal( 'title' );
 
 
 			expect( matcher.match( el3 ) ).to.be.null;
 			expect( matcher.match( el3 ) ).to.be.null;
 		} );
 		} );
 
 
 		it( 'should match element class names', () => {
 		it( 'should match element class names', () => {
-			const pattern = { class: 'foobar' };
+			const pattern = { classes: 'foobar' };
 			const matcher = new Matcher( pattern );
 			const matcher = new Matcher( pattern );
 			const el1 = new Element( 'p', { class: 'foobar' } );
 			const el1 = new Element( 'p', { class: 'foobar' } );
 
 
@@ -163,13 +163,13 @@ describe( 'Matcher', () => {
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.have.property( 'element' ).that.equal( el1 );
 			expect( result ).to.have.property( 'element' ).that.equal( el1 );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
-			expect( result ).to.have.property( 'match' ).that.has.property( 'class' ).that.is.an( 'array' );
-			expect( result.match.class[ 0 ] ).equal( 'foobar' );
-			expect( new Matcher( { class: 'baz' } ).match( el1 ) ).to.be.null;
+			expect( result ).to.have.property( 'match' ).that.has.property( 'classes' ).that.is.an( 'array' );
+			expect( result.match.classes[ 0 ] ).equal( 'foobar' );
+			expect( new Matcher( { classes: 'baz' } ).match( el1 ) ).to.be.null;
 		} );
 		} );
 
 
 		it( 'should match element class names using RegExp', () => {
 		it( 'should match element class names using RegExp', () => {
-			const pattern = { class: /fooba./ };
+			const pattern = { classes: /fooba./ };
 			const matcher = new Matcher( pattern );
 			const matcher = new Matcher( pattern );
 			const el1 = new Element( 'p', { class: 'foobar'	} );
 			const el1 = new Element( 'p', { class: 'foobar'	} );
 			const el2 = new Element( 'p', { class: 'foobaz'	} );
 			const el2 = new Element( 'p', { class: 'foobaz'	} );
@@ -179,21 +179,21 @@ describe( 'Matcher', () => {
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.have.property( 'element' ).that.equal( el1 );
 			expect( result ).to.have.property( 'element' ).that.equal( el1 );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
-			expect( result ).to.have.property( 'match' ).that.has.property( 'class' ).that.is.an( 'array' );
-			expect( result.match.class[ 0 ] ).equal( 'foobar' );
+			expect( result ).to.have.property( 'match' ).that.has.property( 'classes' ).that.is.an( 'array' );
+			expect( result.match.classes[ 0 ] ).equal( 'foobar' );
 
 
 			result = matcher.match( el2 );
 			result = matcher.match( el2 );
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.have.property( 'element' ).that.equal( el2 );
 			expect( result ).to.have.property( 'element' ).that.equal( el2 );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
-			expect( result ).to.have.property( 'match' ).that.has.property( 'class' ).that.is.an( 'array' );
-			expect( result.match.class[ 0 ] ).equal( 'foobaz' );
+			expect( result ).to.have.property( 'match' ).that.has.property( 'classes' ).that.is.an( 'array' );
+			expect( result.match.classes[ 0 ] ).equal( 'foobaz' );
 			expect( matcher.match( el3 ) ).to.be.null;
 			expect( matcher.match( el3 ) ).to.be.null;
 		} );
 		} );
 
 
 		it( 'should match element styles', () => {
 		it( 'should match element styles', () => {
 			const pattern = {
 			const pattern = {
-				style: {
+				styles: {
 					color: 'red'
 					color: 'red'
 				}
 				}
 			};
 			};
@@ -205,15 +205,15 @@ describe( 'Matcher', () => {
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.have.property( 'element' ).that.equal( el1 );
 			expect( result ).to.have.property( 'element' ).that.equal( el1 );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
-			expect( result ).to.have.property( 'match' ).that.has.property( 'style' ).that.is.an( 'array' );
-			expect( result.match.style[ 0 ] ).equal( 'color' );
+			expect( result ).to.have.property( 'match' ).that.has.property( 'styles' ).that.is.an( 'array' );
+			expect( result.match.styles[ 0 ] ).equal( 'color' );
 			expect( matcher.match( el2 ) ).to.be.null;
 			expect( matcher.match( el2 ) ).to.be.null;
-			expect( new Matcher( { style: { color: 'blue' } } ).match( el1 ) ).to.be.null;
+			expect( new Matcher( { styles: { color: 'blue' } } ).match( el1 ) ).to.be.null;
 		} );
 		} );
 
 
 		it( 'should match element styles using RegExp', () => {
 		it( 'should match element styles using RegExp', () => {
 			const pattern = {
 			const pattern = {
-				style: {
+				styles: {
 					color: /^.*blue$/
 					color: /^.*blue$/
 				}
 				}
 			};
 			};
@@ -226,15 +226,15 @@ describe( 'Matcher', () => {
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.have.property( 'element' ).that.equal( el1 );
 			expect( result ).to.have.property( 'element' ).that.equal( el1 );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
-			expect( result ).to.have.property( 'match' ).that.has.property( 'style' ).that.is.an( 'array' );
-			expect( result.match.style[ 0 ] ).to.equal( 'color' );
+			expect( result ).to.have.property( 'match' ).that.has.property( 'styles' ).that.is.an( 'array' );
+			expect( result.match.styles[ 0 ] ).to.equal( 'color' );
 
 
 			result = matcher.match( el2 );
 			result = matcher.match( el2 );
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.be.an( 'object' );
 			expect( result ).to.have.property( 'element' ).that.equal( el2 );
 			expect( result ).to.have.property( 'element' ).that.equal( el2 );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
-			expect( result ).to.have.property( 'match' ).that.has.property( 'style' ).that.is.an( 'array' );
-			expect( result.match.style[ 0 ] ).to.equal( 'color' );
+			expect( result ).to.have.property( 'match' ).that.has.property( 'styles' ).that.is.an( 'array' );
+			expect( result.match.styles[ 0 ] ).to.equal( 'color' );
 			expect( matcher.match( el3 ) ).to.be.null;
 			expect( matcher.match( el3 ) ).to.be.null;
 		} );
 		} );
 
 
@@ -278,7 +278,7 @@ describe( 'Matcher', () => {
 		it( 'should match multiple attributes', () => {
 		it( 'should match multiple attributes', () => {
 			const pattern = {
 			const pattern = {
 				name: 'a',
 				name: 'a',
-				attribute: {
+				attributes: {
 					name: 'foo',
 					name: 'foo',
 					title: 'bar'
 					title: 'bar'
 				}
 				}
@@ -294,15 +294,15 @@ describe( 'Matcher', () => {
 			expect( result ).to.have.property( 'element' ).that.equal( el );
 			expect( result ).to.have.property( 'element' ).that.equal( el );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'match' ).that.is.an( 'object' );
 			expect( result ).to.have.property( 'match' ).that.is.an( 'object' );
-			expect( result.match ).to.have.property( 'attribute' ).that.is.an( 'array' );
-			expect( result.match.attribute[ 0 ] ).to.equal( 'name' );
-			expect( result.match.attribute[ 1 ] ).to.equal( 'title' );
+			expect( result.match ).to.have.property( 'attributes' ).that.is.an( 'array' );
+			expect( result.match.attributes[ 0 ] ).to.equal( 'name' );
+			expect( result.match.attributes[ 1 ] ).to.equal( 'title' );
 		} );
 		} );
 
 
 		it( 'should match multiple classes', () => {
 		it( 'should match multiple classes', () => {
 			const pattern = {
 			const pattern = {
 				name: 'a',
 				name: 'a',
-				class: [ 'foo', 'bar' ]
+				classes: [ 'foo', 'bar' ]
 			};
 			};
 			const matcher = new Matcher( pattern );
 			const matcher = new Matcher( pattern );
 			const el = new Element( 'a' );
 			const el = new Element( 'a' );
@@ -313,15 +313,15 @@ describe( 'Matcher', () => {
 			expect( result ).to.have.property( 'element' ).that.equal( el );
 			expect( result ).to.have.property( 'element' ).that.equal( el );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'match' ).that.is.an( 'object' );
 			expect( result ).to.have.property( 'match' ).that.is.an( 'object' );
-			expect( result.match ).to.have.property( 'class' ).that.is.an( 'array' );
-			expect( result.match.class[ 0 ] ).to.equal( 'foo' );
-			expect( result.match.class[ 1 ] ).to.equal( 'bar' );
+			expect( result.match ).to.have.property( 'classes' ).that.is.an( 'array' );
+			expect( result.match.classes[ 0 ] ).to.equal( 'foo' );
+			expect( result.match.classes[ 1 ] ).to.equal( 'bar' );
 		} );
 		} );
 
 
 		it( 'should match multiple styles', () => {
 		it( 'should match multiple styles', () => {
 			const pattern = {
 			const pattern = {
 				name: 'a',
 				name: 'a',
-				style: {
+				styles: {
 					color: 'red',
 					color: 'red',
 					position: 'relative'
 					position: 'relative'
 				}
 				}
@@ -338,9 +338,9 @@ describe( 'Matcher', () => {
 			expect( result ).to.have.property( 'element' ).that.equal( el );
 			expect( result ).to.have.property( 'element' ).that.equal( el );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'pattern' ).that.equal( pattern );
 			expect( result ).to.have.property( 'match' ).that.is.an( 'object' );
 			expect( result ).to.have.property( 'match' ).that.is.an( 'object' );
-			expect( result.match ).to.have.property( 'style' ).that.is.an( 'array' );
-			expect( result.match.style[ 0 ] ).to.equal( 'color' );
-			expect( result.match.style[ 1 ] ).to.equal( 'position' );
+			expect( result.match ).to.have.property( 'styles' ).that.is.an( 'array' );
+			expect( result.match.styles[ 0 ] ).to.equal( 'color' );
+			expect( result.match.styles[ 1 ] ).to.equal( 'position' );
 		} );
 		} );
 	} );
 	} );
 
 
@@ -370,7 +370,7 @@ describe( 'Matcher', () => {
 		} );
 		} );
 
 
 		it( 'should return all matched elements when using RegExp pattern', () => {
 		it( 'should return all matched elements when using RegExp pattern', () => {
-			const pattern = { class: /^red-.*/ };
+			const pattern = { classes: /^red-.*/ };
 			const matcher = new Matcher( pattern );
 			const matcher = new Matcher( pattern );
 			const el1 = new Element( 'p' );
 			const el1 = new Element( 'p' );
 			const el2 = new Element( 'p' );
 			const el2 = new Element( 'p' );
@@ -386,14 +386,14 @@ describe( 'Matcher', () => {
 			expect( result[ 0 ] ).to.have.property( 'element' ).that.equal( el1 );
 			expect( result[ 0 ] ).to.have.property( 'element' ).that.equal( el1 );
 			expect( result[ 0 ] ).to.have.property( 'pattern' ).that.is.equal( pattern );
 			expect( result[ 0 ] ).to.have.property( 'pattern' ).that.is.equal( pattern );
 			expect( result[ 0 ] ).to.have.property( 'match' ).that.is.an( 'object' );
 			expect( result[ 0 ] ).to.have.property( 'match' ).that.is.an( 'object' );
-			expect( result[ 0 ].match ).to.have.property( 'class' ).that.is.an( 'array' );
-			expect( result[ 0 ].match.class[ 0 ] ).to.equal( 'red-foreground' );
+			expect( result[ 0 ].match ).to.have.property( 'classes' ).that.is.an( 'array' );
+			expect( result[ 0 ].match.classes[ 0 ] ).to.equal( 'red-foreground' );
 
 
 			expect( result[ 1 ] ).to.have.property( 'element' ).that.equal( el2 );
 			expect( result[ 1 ] ).to.have.property( 'element' ).that.equal( el2 );
 			expect( result[ 1 ] ).to.have.property( 'pattern' ).that.is.equal( pattern );
 			expect( result[ 1 ] ).to.have.property( 'pattern' ).that.is.equal( pattern );
 			expect( result[ 1 ] ).to.have.property( 'match' ).that.is.an( 'object' );
 			expect( result[ 1 ] ).to.have.property( 'match' ).that.is.an( 'object' );
-			expect( result[ 1 ].match ).to.have.property( 'class' ).that.is.an( 'array' );
-			expect( result[ 1 ].match.class[ 0 ] ).to.equal( 'red-background' );
+			expect( result[ 1 ].match ).to.have.property( 'classes' ).that.is.an( 'array' );
+			expect( result[ 1 ].match.classes[ 0 ] ).to.equal( 'red-background' );
 
 
 			expect( matcher.matchAll( el3 ) ).to.be.null;
 			expect( matcher.matchAll( el3 ) ).to.be.null;
 		} );
 		} );
@@ -407,7 +407,7 @@ describe( 'Matcher', () => {
 		} );
 		} );
 
 
 		it( 'should return null if pattern has no name property', () => {
 		it( 'should return null if pattern has no name property', () => {
-			const matcher = new Matcher( { class: 'foo' } );
+			const matcher = new Matcher( { classes: 'foo' } );
 
 
 			expect( matcher.getElementName() ).to.be.null;
 			expect( matcher.getElementName() ).to.be.null;
 		} );
 		} );
@@ -425,7 +425,7 @@ describe( 'Matcher', () => {
 		} );
 		} );
 
 
 		it( 'should return null if matcher has more than one pattern', () => {
 		it( 'should return null if matcher has more than one pattern', () => {
-			const matcher = new Matcher( { name: 'div' }, { class: 'foo' } );
+			const matcher = new Matcher( { name: 'div' }, { classes: 'foo' } );
 
 
 			expect( matcher.getElementName() ).to.be.null;
 			expect( matcher.getElementName() ).to.be.null;
 		} );
 		} );