failing test for #1104

src/validate/html/validateElement.ts

@@ -80,6 +80,15 @@ export default function validateElement(
 	let hasTransition: boolean;
 	let hasAnimation: boolean;
 
+	function checkElement(attribute, bindingName, nodeName) {
+		if (node.name !== nodeName) {
+			validator.error(attribute, {
+				code: `invalid-binding`,
+				message: `'${bindingName}' is not a valid binding on <${nodeName}> elements`
+			});
+		}
+	}
+
 	node.attributes.forEach((attribute: Node) => {
 		if (attribute.type === 'Ref') {
 			if (!refs.has(attribute.name)) refs.set(attribute.name, []);
@@ -115,18 +124,24 @@ export default function validateElement(
 				} else {
 					checkTypeAttribute(validator, node);
 				}
-			} else if (name === 'checked' || name === 'indeterminate') {
+			} else if (name === 'checked') {
-				if (node.name !== 'input') {
+				checkElement(attribute, name, 'input');
+				const type = checkTypeAttribute(validator, node);
+
+				if (type !== 'checkbox' && type !== 'radio') {
 					validator.error(attribute, {
 						code: `invalid-binding`,
-						message: `'${name}' is not a valid binding on <${node.name}> elements`
+						message: `'checked' binding can only be used with <input type="checkbox"> or <input type="radio">`
 					});
 				}
+			} else if (name === 'indeterminate') {
+				checkElement(attribute, name, 'input');
+				const type = checkTypeAttribute(validator, node);
 
-				if (checkTypeAttribute(validator, node) !== 'checkbox') {
+				if (type !== 'checkbox') {
 					validator.error(attribute, {
 						code: `invalid-binding`,
-						message: `'${name}' binding can only be used with <input type="checkbox">`
+						message: `'indeterminate' binding can only be used with <input type="checkbox">`
 					});
 				}
 			} else if (name === 'group') {

test/runtime/samples/binding-input-radio-checked/_config.js

@@ -0,0 +1,81 @@
+export default {
+	data: {
+		foo: false,
+		bar: true,
+		baz: false,
+	},
+
+	html: `
+		<label>
+			<input type="radio" name="x"> foo
+		</label>
+
+		<label>
+			<input type="radio" name="x"> bar
+		</label>
+
+		<label>
+			<input type="radio" name="x"> baz
+		</label>
+
+		<p>foo false</p>
+		<p>bar true</p>
+		<p>baz false</p>`,
+
+	test(assert, component, target, window) {
+		const inputs = target.querySelectorAll('input');
+		assert.equal(inputs[0].checked, false);
+		assert.equal(inputs[1].checked, true);
+		assert.equal(inputs[2].checked, false);
+
+		const event = new window.Event('change');
+
+		inputs[0].checked = true;
+		inputs[0].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label>
+				<input type="radio" name="x"> foo
+			</label>
+
+			<label>
+				<input type="radio" name="x"> bar
+			</label>
+
+			<label>
+				<input type="radio" name="x"> baz
+			</label>
+
+			<p>foo true</p>
+			<p>bar false</p>
+			<p>baz false</p>
+		`);
+
+		assert.equal(inputs[0].checked, true);
+		assert.equal(inputs[1].checked, false);
+		assert.equal(inputs[2].checked, false);
+
+		component.set({ baz: true });
+		assert.equal(inputs[0].checked, false);
+		assert.equal(inputs[1].checked, false);
+		assert.equal(inputs[2].checked, true);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label>
+				<input type="radio" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="radio" value="[object Object]"> Beta
+			</label>
+
+			<label>
+				<input type="radio" value="[object Object]"> Gamma
+			</label>
+
+			<p>foo false</p>
+			<p>bar false</p>
+			<p>baz true</p>
+		`);
+	},
+};

test/runtime/samples/binding-input-radio-checked/main.html

@@ -0,0 +1,15 @@
+<label>
+	<input type="radio" name="x" bind:checked=foo /> foo
+</label>
+
+<label>
+	<input type="radio" name="x" bind:checked=bar /> bar
+</label>
+
+<label>
+	<input type="radio" name="x" bind:checked=baz /> baz
+</label>
+
+<p>foo {foo}</p>
+<p>bar {bar}</p>
+<p>baz {baz}</p>