From fce4b206c184ebd1516b142ecac19e1520dbfe6f Mon Sep 17 00:00:00 2001 From: likui <2218301630@qq.com> Date: Mon, 16 Mar 2020 11:50:36 +0800 Subject: [PATCH 1/2] fix(runtime-dom): patch xlink attribute --- .../__tests__/modules/attrs.spec.ts | 27 +++++++++++++++++++ packages/runtime-dom/src/modules/attrs.ts | 4 +-- 2 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 packages/runtime-dom/__tests__/modules/attrs.spec.ts diff --git a/packages/runtime-dom/__tests__/modules/attrs.spec.ts b/packages/runtime-dom/__tests__/modules/attrs.spec.ts new file mode 100644 index 00000000000..48f1c766487 --- /dev/null +++ b/packages/runtime-dom/__tests__/modules/attrs.spec.ts @@ -0,0 +1,27 @@ +import { patchAttr, xlinkNS } from '../../src/modules/attrs' + +describe('attrs', () => { + test('xlink attributes', () => { + const el = document.createElementNS(xlinkNS, 'use') + patchAttr(el, 'xlink:href', 'a', true) + expect(el.getAttributeNS(xlinkNS, 'href')).toBe('a') + patchAttr(el, 'xlink:href', null, true) + expect(el.getAttributeNS(xlinkNS, 'href')).toBe(null) + }) + + test('boolean attributes', () => { + const el = document.createElement('input') + patchAttr(el, 'readonly', true, false) + expect(el.getAttribute('readonly')).toBe('') + patchAttr(el, 'readonly', false, false) + expect(el.getAttribute('readonly')).toBe(null) + }) + + test('attributes', () => { + const el = document.createElement('div') + patchAttr(el, 'id', 'a', false) + expect(el.getAttribute('id')).toBe('a') + patchAttr(el, 'id', null, false) + expect(el.getAttribute('id')).toBe(null) + }) +}) diff --git a/packages/runtime-dom/src/modules/attrs.ts b/packages/runtime-dom/src/modules/attrs.ts index 2a6c5cc769a..10fe06afb7a 100644 --- a/packages/runtime-dom/src/modules/attrs.ts +++ b/packages/runtime-dom/src/modules/attrs.ts @@ -1,6 +1,6 @@ import { isSpecialBooleanAttr } from '@vue/shared' -const xlinkNS = 'http://www.w3.org/1999/xlink' +export const xlinkNS = 'http://www.w3.org/1999/xlink' export function patchAttr( el: Element, @@ -10,7 +10,7 @@ export function patchAttr( ) { if (isSVG && key.indexOf('xlink:') === 0) { if (value == null) { - el.removeAttributeNS(xlinkNS, key) + el.removeAttributeNS(xlinkNS, key.slice(6, key.length)) } else { el.setAttributeNS(xlinkNS, key, value) } From c4ec363bf39bb26b1ccfbcaa72f99aebfd571f81 Mon Sep 17 00:00:00 2001 From: Evan You Date: Mon, 16 Mar 2020 18:45:52 -0400 Subject: [PATCH 2/2] Update attrs.spec.ts --- packages/runtime-dom/__tests__/modules/attrs.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-dom/__tests__/modules/attrs.spec.ts b/packages/runtime-dom/__tests__/modules/attrs.spec.ts index 48f1c766487..91d59888773 100644 --- a/packages/runtime-dom/__tests__/modules/attrs.spec.ts +++ b/packages/runtime-dom/__tests__/modules/attrs.spec.ts @@ -2,7 +2,7 @@ import { patchAttr, xlinkNS } from '../../src/modules/attrs' describe('attrs', () => { test('xlink attributes', () => { - const el = document.createElementNS(xlinkNS, 'use') + const el = document.createElementNS('http://www.w3.org/2000/svg', 'use') patchAttr(el, 'xlink:href', 'a', true) expect(el.getAttributeNS(xlinkNS, 'href')).toBe('a') patchAttr(el, 'xlink:href', null, true)