add validation logic, error on dimension bindings for SVG elements

src/validate/html/validateElement.ts

@@ -158,7 +158,19 @@ export default function validateElement(
 						message: `'${name}' binding can only be used with <audio> or <video>`
 					});
 				}
-			} else if (!dimensions.test(name)) {
+			} else if (dimensions.test(name)) {
+				if (node.name === 'svg' && (name === 'offsetWidth' || name === 'offsetHeight')) {
+					validator.error(attribute, {
+						code: 'invalid-binding',
+						message: `'${attribute.name}' is not a valid binding on <svg>. Use '${name.replace('offset', 'client')}' instead`
+					});
+				} else if (svg.test(node.name)) {
+					validator.error(attribute, {
+						code: 'invalid-binding',
+						message: `'${attribute.name}' is not a valid binding on SVG elements`
+					});
+				}
+			} else {
 				validator.error(attribute, {
 					code: `invalid-binding`,
 					message: `'${attribute.name}' is not a valid binding`

test/validator/samples/binding-dimensions-svg-child/errors.json

@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'offsetWidth' is not a valid binding on SVG elements",
+	"pos": 13,
+	"start": {
+		"line": 2,
+		"column": 7,
+		"character": 13
+	},
+	"end": {
+		"line": 2,
+		"column": 23,
+		"character": 29
+	}
+}]

test/validator/samples/binding-dimensions-svg-child/input.html

@@ -0,0 +1,3 @@
+<svg>
+	<text bind:offsetWidth>some text</text>
+</svg>

test/validator/samples/binding-dimensions-svg/errors.json

@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'offsetWidth' is not a valid binding on <svg>. Use 'clientWidth' instead",
+	"pos": 5,
+	"start": {
+		"line": 1,
+		"column": 5,
+		"character": 5
+	},
+	"end": {
+		"line": 1,
+		"column": 21,
+		"character": 21
+	}
+}]

test/validator/samples/binding-dimensions-svg/input.html

@@ -0,0 +1 @@
+<svg bind:offsetWidth></svg>