From 30b3fa08c488b33f33b3a24dd858ad2eaacf2922 Mon Sep 17 00:00:00 2001 From: Jorge Date: Tue, 15 Oct 2019 15:50:58 +0200 Subject: [PATCH 1/2] fix: #1868 Clone node, Setting className for SVG element raises error --- src/dom/document-cloner.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/dom/document-cloner.ts b/src/dom/document-cloner.ts index ae1c4cfd5..30ecd5674 100644 --- a/src/dom/document-cloner.ts +++ b/src/dom/document-cloner.ts @@ -322,7 +322,7 @@ export class DocumentCloner { resolvePseudoContent( node: Element, - clone: Element, + clone: Element | SVGElement, style: CSSStyleDeclaration, pseudoElt: PseudoElementType ): HTMLElement | void { @@ -409,10 +409,17 @@ export class DocumentCloner { }); anonymousReplacedElement.className = `${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE} ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`; - clone.className += + const newClassName = pseudoElt === PseudoElementType.BEFORE ? ` ${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}` : ` ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`; + + if (isSVGElement(clone)) { + clone.className.baseValue += newClassName; + } else { + clone.className += newClassName; + } + return anonymousReplacedElement; } @@ -425,6 +432,10 @@ export class DocumentCloner { } } +function isSVGElement(element: Element | SVGElement): element is SVGElement { + return typeof (element as SVGElement).className === 'object'; +} + enum PseudoElementType { BEFORE, AFTER From 509f53b3d49facfd3d58965b253a849f23bf9a8a Mon Sep 17 00:00:00 2001 From: Niklas von Hertzen Date: Mon, 25 Nov 2019 20:39:53 -0800 Subject: [PATCH 2/2] fix: svg element type information --- src/dom/document-cloner.ts | 9 +++------ src/dom/node-parser.ts | 3 ++- tests/reftests/images/svg/native_only.html | 5 ++++- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/dom/document-cloner.ts b/src/dom/document-cloner.ts index 30ecd5674..9603ef2a3 100644 --- a/src/dom/document-cloner.ts +++ b/src/dom/document-cloner.ts @@ -8,6 +8,7 @@ import { isScriptElement, isSelectElement, isStyleElement, + isSVGElementNode, isTextareaElement, isTextNode } from './node-parser'; @@ -322,7 +323,7 @@ export class DocumentCloner { resolvePseudoContent( node: Element, - clone: Element | SVGElement, + clone: Element, style: CSSStyleDeclaration, pseudoElt: PseudoElementType ): HTMLElement | void { @@ -414,7 +415,7 @@ export class DocumentCloner { ? ` ${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}` : ` ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`; - if (isSVGElement(clone)) { + if (isSVGElementNode(clone)) { clone.className.baseValue += newClassName; } else { clone.className += newClassName; @@ -432,10 +433,6 @@ export class DocumentCloner { } } -function isSVGElement(element: Element | SVGElement): element is SVGElement { - return typeof (element as SVGElement).className === 'object'; -} - enum PseudoElementType { BEFORE, AFTER diff --git a/src/dom/node-parser.ts b/src/dom/node-parser.ts index 238115edf..791247b26 100644 --- a/src/dom/node-parser.ts +++ b/src/dom/node-parser.ts @@ -103,7 +103,8 @@ export const isTextNode = (node: Node): node is Text => node.nodeType === Node.T export const isElementNode = (node: Node): node is Element => node.nodeType === Node.ELEMENT_NODE; export const isHTMLElementNode = (node: Node): node is HTMLElement => typeof (node as HTMLElement).style !== 'undefined'; - +export const isSVGElementNode = (element: Element): element is SVGElement => + typeof (element as SVGElement).className === 'object'; export const isLIElement = (node: Element): node is HTMLLIElement => node.tagName === 'LI'; export const isOLElement = (node: Element): node is HTMLOListElement => node.tagName === 'OL'; export const isInputElement = (node: Element): node is HTMLInputElement => node.tagName === 'INPUT'; diff --git a/tests/reftests/images/svg/native_only.html b/tests/reftests/images/svg/native_only.html index 8ab8f5d13..a6a7c255b 100644 --- a/tests/reftests/images/svg/native_only.html +++ b/tests/reftests/images/svg/native_only.html @@ -11,13 +11,16 @@ body { font-family: Arial; } + svg:before { + content: " "; + }
- +