From 97985f5bf1a229c53741f7641baffa7d1b223aa4 Mon Sep 17 00:00:00 2001
From: zh-lx <18366276315@163.com>
Date: Fri, 14 Jul 2023 10:07:14 +0800
Subject: [PATCH 1/2] fix(runtime-dom): <img> width should be set as attribute

---
 packages/runtime-dom/__tests__/patchProps.spec.ts | 10 ++++++++++
 packages/runtime-dom/src/patchProp.ts             | 10 ++++++++++
 2 files changed, 20 insertions(+)

diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts
index bf6362e7a0c..0ddea0d500c 100644
--- a/packages/runtime-dom/__tests__/patchProps.spec.ts
+++ b/packages/runtime-dom/__tests__/patchProps.spec.ts
@@ -291,6 +291,16 @@ describe('runtime-dom: props patching', () => {
     expect(el.value).toBe('baz')
   })
 
+   // #8780
+   test('embedded tag with width and height', () => {
+      // Width and height of some embedded element such as img、video、source、canvas
+      // must be set as attribute
+      const el = document.createElement('img')
+      patchProp(el, 'width', null, '24px')
+      expect(el.getAttribute('width')).toBe('24px')
+    })
+  })
+
   test('translate attribute', () => {
     const el = document.createElement('div')
     patchProp(el, 'translate', null, 'no')
diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts
index 6d65a63a88c..d2847f6b11e 100644
--- a/packages/runtime-dom/src/patchProp.ts
+++ b/packages/runtime-dom/src/patchProp.ts
@@ -8,6 +8,8 @@ import { RendererOptions } from '@vue/runtime-core'
 
 const nativeOnRE = /^on[a-z]/
 
+const embeddedTags = ['IMG', 'VIDEO', 'CANVAS', 'SOURCE']
+
 type DOMRendererOptions = RendererOptions<Node, Element>
 
 export const patchProp: DOMRendererOptions['patchProp'] = (
@@ -105,6 +107,14 @@ function shouldSetAsProp(
     return false
   }
 
+  // #8780 the width or heigth of embedded tags must be set as attribute
+  if (
+    (key === 'width' || key === 'height') &&
+    embeddedTags.includes(el.tagName)
+  ) {
+    return false
+  }
+
   // native onclick with string value, must be set as attribute
   if (nativeOnRE.test(key) && isString(value)) {
     return false

From c55194e452e7ce427b921127677f6aeb2f1d09b9 Mon Sep 17 00:00:00 2001
From: zhoulixiang <18366276315@163.com>
Date: Fri, 14 Jul 2023 10:41:18 +0800
Subject: [PATCH 2/2] Update patchProps.spec.ts

---
 packages/runtime-dom/__tests__/patchProps.spec.ts | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts
index 0ddea0d500c..19554b02810 100644
--- a/packages/runtime-dom/__tests__/patchProps.spec.ts
+++ b/packages/runtime-dom/__tests__/patchProps.spec.ts
@@ -291,14 +291,13 @@ describe('runtime-dom: props patching', () => {
     expect(el.value).toBe('baz')
   })
 
-   // #8780
-   test('embedded tag with width and height', () => {
-      // Width and height of some embedded element such as img、video、source、canvas
-      // must be set as attribute
-      const el = document.createElement('img')
-      patchProp(el, 'width', null, '24px')
-      expect(el.getAttribute('width')).toBe('24px')
-    })
+  // #8780
+  test('embedded tag with width and height', () => {
+    // Width and height of some embedded element such as img、video、source、canvas
+    // must be set as attribute
+    const el = document.createElement('img')
+    patchProp(el, 'width', null, '24px')
+    expect(el.getAttribute('width')).toBe('24px')
   })
 
   test('translate attribute', () => {