Skip to content

Commit

Permalink
fix(runtime-dom): set width/height with units as attribute (#8781)
Browse files Browse the repository at this point in the history
Technically, width / height on `<img>`, `<video>` etc must be integers and cannot contain units. When set as a DOM property, the DOM force converts strings with units to 0. However, this is such a common mistake that most browsers nowadays supports such usage, and it makes sense for Vue to at least let it be set as an attribute.
  • Loading branch information
zh-lx authored Nov 30, 2023
1 parent 7411143 commit bfc1838
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 0 deletions.
9 changes: 9 additions & 0 deletions packages/runtime-dom/__tests__/patchProps.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,15 @@ 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')
Expand Down
10 changes: 10 additions & 0 deletions packages/runtime-dom/src/patchProp.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'] = (
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit bfc1838

Please sign in to comment.