From 14b6f8bb6777fba8255ca8dd2be5741e260ee1e7 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 29 Apr 2018 20:00:02 -0400
Subject: [PATCH] add validation logic, error on dimension bindings for SVG
 elements

---
 src/validate/html/validateElement.ts              | 14 +++++++++++++-
 .../binding-dimensions-svg-child/errors.json      | 15 +++++++++++++++
 .../binding-dimensions-svg-child/input.html       |  3 +++
 .../samples/binding-dimensions-svg/errors.json    | 15 +++++++++++++++
 .../samples/binding-dimensions-svg/input.html     |  1 +
 5 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 test/validator/samples/binding-dimensions-svg-child/errors.json
 create mode 100644 test/validator/samples/binding-dimensions-svg-child/input.html
 create mode 100644 test/validator/samples/binding-dimensions-svg/errors.json
 create mode 100644 test/validator/samples/binding-dimensions-svg/input.html

diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts
index cd1db6664b..abba1161eb 100644
--- a/src/validate/html/validateElement.ts
+++ b/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`
diff --git a/test/validator/samples/binding-dimensions-svg-child/errors.json b/test/validator/samples/binding-dimensions-svg-child/errors.json
new file mode 100644
index 0000000000..d35946678e
--- /dev/null
+++ b/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
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-svg-child/input.html b/test/validator/samples/binding-dimensions-svg-child/input.html
new file mode 100644
index 0000000000..8819dca703
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-svg-child/input.html
@@ -0,0 +1,3 @@
+<svg>
+	<text bind:offsetWidth>some text</text>
+</svg>
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-svg/errors.json b/test/validator/samples/binding-dimensions-svg/errors.json
new file mode 100644
index 0000000000..930f577f22
--- /dev/null
+++ b/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
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-svg/input.html b/test/validator/samples/binding-dimensions-svg/input.html
new file mode 100644
index 0000000000..ced9988f8f
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-svg/input.html
@@ -0,0 +1 @@
+<svg bind:offsetWidth></svg>
\ No newline at end of file