fix: special-case width/height attribute during spread (#8412)

fixes #6752

---------

Co-authored-by: Ben McCann <[email protected]>
Co-authored-by: Tan Li Hau <[email protected]>

Author: 3 people

src/runtime/internal/dom.ts

@@ -306,6 +306,15 @@ export function attr(node: Element, attribute: string, value?: string) {
 	else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value);
 }
 
+/** 
+ * List of attributes that should always be set through the attr method,
+ * because updating them through the property setter doesn't work reliably.
+ * In the example of `width`/`height`, the problem is that the setter only
+ * accepts numeric values, but the attribute can also be set to a string like `50%`.
+ * If this list becomes too big, rethink this approach.
+ */
+const always_set_through_set_attribute = ['width', 'height'];
+
 export function set_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) {
 	// @ts-ignore
 	const descriptors = Object.getOwnPropertyDescriptors(node.__proto__);
@@ -316,7 +325,7 @@ export function set_attributes(node: Element & ElementCSSInlineStyle, attributes
 			node.style.cssText = attributes[key];
 		} else if (key === '__value') {
 			(node as any).value = node[key] = attributes[key];
-		} else if (descriptors[key] && descriptors[key].set) {
+		} else if (descriptors[key] && descriptors[key].set && always_set_through_set_attribute.indexOf(key) === -1) {
 			node[key] = attributes[key];
 		} else {
 			attr(node, key, attributes[key]);

test/runtime/samples/spread-width-height-attributes/_config.js

@@ -0,0 +1,4 @@
+export default {
+	// https://github.com/sveltejs/svelte/issues/6752
+	html: '<img height="100%" width="100%" alt="" />'
+};

test/runtime/samples/spread-width-height-attributes/main.svelte

@@ -0,0 +1 @@
+<img height="100%" width="100%" alt="" {...$$restProps} />