diff --git a/src/css/property-descriptors/__tests__/font-family.ts b/src/css/property-descriptors/__tests__/font-family.ts index 4400bb2..f98a9ce 100644 --- a/src/css/property-descriptors/__tests__/font-family.ts +++ b/src/css/property-descriptors/__tests__/font-family.ts @@ -6,26 +6,19 @@ const fontFamilyParse = (value: string) => fontFamily.parse(Parser.parseValues(v describe('property-descriptors', () => { describe('font-family', () => { - it('sans-serif', () => - deepEqual(fontFamilyParse('sans-serif'), [ - "sans-serif", - ])); + it('sans-serif', () => deepEqual(fontFamilyParse('sans-serif'), ['sans-serif'])); it('great fonts 40 library', () => - deepEqual(fontFamilyParse('great fonts 40 library'), [ - "'great fonts 40 library'", - ])); + deepEqual(fontFamilyParse('great fonts 40 library'), ["'great fonts 40 library'"])); it('preferred font, "quoted fallback font", font', () => deepEqual(fontFamilyParse('preferred font, "quoted fallback font", font'), [ "'preferred font'", "'quoted fallback font'", - "font" + 'font' ])); it("'escaping test\\'s font'", () => - deepEqual(fontFamilyParse("'escaping test\\'s font'"), [ - "'escaping test\'s font'", - ])); + deepEqual(fontFamilyParse("'escaping test\\'s font'"), ["'escaping test's font'"])); }); }); diff --git a/src/css/property-descriptors/font-family.ts b/src/css/property-descriptors/font-family.ts index 8ebab4f..624166c 100644 --- a/src/css/property-descriptors/font-family.ts +++ b/src/css/property-descriptors/font-family.ts @@ -32,6 +32,6 @@ export const fontFamily: IPropertyListDescriptor = { if (accumulator.length) { results.push(accumulator.join(' ')); } - return results.map(result => result.indexOf(' ') === -1 ? result : `'${result}'`); + return results.map(result => (result.indexOf(' ') === -1 ? result : `'${result}'`)); } }; diff --git a/src/dom/document-cloner.ts b/src/dom/document-cloner.ts index d3e347c..2e93a02 100644 --- a/src/dom/document-cloner.ts +++ b/src/dom/document-cloner.ts @@ -116,7 +116,7 @@ export class DocumentCloner { return iframeLoad; } - createElementClone(node: HTMLElement): HTMLElement { + createElementClone(node: T): HTMLElement | SVGElement { if (isCanvasElement(node)) { return this.createCanvasClone(node); } @@ -129,8 +129,7 @@ export class DocumentCloner { return this.createStyleClone(node); } - const clone = node.cloneNode(false) as HTMLElement; - + const clone = node.cloneNode(false) as T; // @ts-ignore if (isImageElement(clone) && clone.loading === 'lazy') { // @ts-ignore @@ -266,14 +265,14 @@ export class DocumentCloner { const window = node.ownerDocument.defaultView; - if (isHTMLElementNode(node) && window) { + if (window && isElementNode(node) && (isHTMLElementNode(node) || isSVGElementNode(node))) { const clone = this.createElementClone(node); const style = window.getComputedStyle(node); const styleBefore = window.getComputedStyle(node, ':before'); const styleAfter = window.getComputedStyle(node, ':after'); - if (this.referenceElement === node) { + if (this.referenceElement === node && isHTMLElementNode(clone)) { this.clonedReferenceElement = clone; } if (isBodyElement(clone)) { @@ -307,7 +306,7 @@ export class DocumentCloner { this.counters.pop(counters); - if (style && this.options.copyStyles && !isIFrameElement(node)) { + if (style && (this.options.copyStyles || isSVGElementNode(node)) && !isIFrameElement(node)) { copyCSSStyles(style, clone); } @@ -487,7 +486,7 @@ const iframeLoader = (iframe: HTMLIFrameElement): Promise => }); }; -export const copyCSSStyles = (style: CSSStyleDeclaration, target: HTMLElement): HTMLElement => { +export const copyCSSStyles = (style: CSSStyleDeclaration, target: T): T => { // Edge does not provide value for cssText for (let i = style.length - 1; i >= 0; i--) { const property = style.item(i); diff --git a/src/dom/node-parser.ts b/src/dom/node-parser.ts index 791247b..adf4256 100644 --- a/src/dom/node-parser.ts +++ b/src/dom/node-parser.ts @@ -102,7 +102,7 @@ const createsStackingContext = (styles: CSSParsedDeclaration): boolean => styles export const isTextNode = (node: Node): node is Text => node.nodeType === Node.TEXT_NODE; 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'; + isElementNode(node) && typeof (node as HTMLElement).style !== 'undefined' && !isSVGElementNode(node); 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'; diff --git a/tests/reftests/images/svg/native_only.html b/tests/reftests/images/svg/native_only.html index a6a7c25..95709a8 100644 --- a/tests/reftests/images/svg/native_only.html +++ b/tests/reftests/images/svg/native_only.html @@ -15,6 +15,12 @@ content: " "; } + +
@@ -28,6 +34,11 @@ style="fill:#40aa54;fill-opacity:1;stroke:#20552a;stroke-width:7.99999952;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/> + + html + 2 + canvas +