diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts index abba1161eb..9f082e0fdd 100644 --- a/src/validate/html/validateElement.ts +++ b/src/validate/html/validateElement.ts @@ -3,6 +3,7 @@ import validateEventHandler from './validateEventHandler'; import validate, { Validator } from '../index'; import { Node } from '../../interfaces'; import { dimensions } from '../../utils/patterns'; +import isVoidElementName from '../../utils/isVoidElementName'; const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/; @@ -169,6 +170,11 @@ export default function validateElement( code: 'invalid-binding', message: `'${attribute.name}' is not a valid binding on SVG elements` }); + } else if (isVoidElementName(node.name)) { + validator.error(attribute, { + code: 'invalid-binding', + message: `'${attribute.name}' is not a valid binding on void elements like <${node.name}>. Use a wrapper element instead` + }); } } else { validator.error(attribute, { diff --git a/test/validator/samples/binding-dimensions-void/errors.json b/test/validator/samples/binding-dimensions-void/errors.json new file mode 100644 index 0000000000..555cb33f5d --- /dev/null +++ b/test/validator/samples/binding-dimensions-void/errors.json @@ -0,0 +1,15 @@ +[{ + "code": "invalid-binding", + "message": "'offsetWidth' is not a valid binding on void elements like . Use a wrapper element instead", + "pos": 22, + "start": { + "line": 1, + "column": 22, + "character": 22 + }, + "end": { + "line": 1, + "column": 38, + "character": 38 + } +}] \ No newline at end of file diff --git a/test/validator/samples/binding-dimensions-void/input.html b/test/validator/samples/binding-dimensions-void/input.html new file mode 100644 index 0000000000..985f6b1930 --- /dev/null +++ b/test/validator/samples/binding-dimensions-void/input.html @@ -0,0 +1 @@ + \ No newline at end of file