From 18d66dca7c85279d08ae60591e9d975f364da00e Mon Sep 17 00:00:00 2001 From: Yanzhen Yu Date: Sun, 31 Oct 2021 11:24:41 +0800 Subject: [PATCH] do not transform xlink:href when the value is an id close #566, #741 --- packages/rrweb-snapshot/src/snapshot.ts | 14 +++-- .../__snapshots__/integration.test.ts.snap | 33 ++++++++++++ packages/rrweb-snapshot/test/html/svg.html | 54 +++++++++++++++++++ .../test/images/symbol-defs.svg | 12 +++++ 4 files changed, 108 insertions(+), 5 deletions(-) create mode 100644 packages/rrweb-snapshot/test/html/svg.html create mode 100644 packages/rrweb-snapshot/test/images/symbol-defs.svg diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts index 0f58d375..ca548332 100644 --- a/packages/rrweb-snapshot/src/snapshot.ts +++ b/packages/rrweb-snapshot/src/snapshot.ts @@ -13,6 +13,7 @@ import { documentNode, } from './types'; import { isElement, isShadowRoot, maskInputValue } from './utils'; +import { values } from 'puppeteer/DeviceDescriptors'; let _id = 1; const tagNameRegex = RegExp('[^a-z0-9-_:]'); @@ -218,7 +219,10 @@ export function transformAttribute( value: string, ): string { // relative path in attribute - if (name === 'src' || ((name === 'href' || name === 'xlink:href') && value)) { + if (name === 'src' || (name === 'href' && value)) { + return absoluteToDoc(doc, value); + } else if (name === 'xlink:href' && value && value[0] !== '#') { + // xlink:href starts with # is an id pointer return absoluteToDoc(doc, value); } else if ( name === 'background' && @@ -384,15 +388,15 @@ function serializeNode( return { type: NodeType.Document, childNodes: [], - compatMode: (n as HTMLDocument).compatMode, // probably "BackCompat" + compatMode: (n as HTMLDocument).compatMode, // probably "BackCompat" rootId, - } + }; } else { return { type: NodeType.Document, childNodes: [], rootId, - } + }; } case n.DOCUMENT_TYPE_NODE: return { @@ -514,7 +518,7 @@ function serializeNode( // preserve the src attribute so a decision can be taken at replay time attributes.rr_src = attributes.src; } - delete attributes.src; // prevent auto loading + delete attributes.src; // prevent auto loading } return { type: NodeType.Element, diff --git a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap index c3399843..10fad1b6 100644 --- a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap @@ -402,6 +402,39 @@ exports[`integration tests [html file]: shadow-dom.html 1`] = ` " `; +exports[`integration tests [html file]: svg.html 1`] = ` +" + IcoMoon - SVG Icons + + + + +
+

Grid Size: 0

+
+
+ + Icon-behance +
+
+
+
+ + Icon-linkedin +
+
+
+ + + + + + + + + " +`; + exports[`integration tests [html file]: video.html 1`] = ` " diff --git a/packages/rrweb-snapshot/test/html/svg.html b/packages/rrweb-snapshot/test/html/svg.html new file mode 100644 index 00000000..3035cd34 --- /dev/null +++ b/packages/rrweb-snapshot/test/html/svg.html @@ -0,0 +1,54 @@ + + + + IcoMoon - SVG Icons + + + + +
+

Grid Size: 0

+
+
+ + Icon-behance +
+
+
+
+ + Icon-linkedin +
+
+
+ + + + + + + + + + diff --git a/packages/rrweb-snapshot/test/images/symbol-defs.svg b/packages/rrweb-snapshot/test/images/symbol-defs.svg new file mode 100644 index 00000000..17edc194 --- /dev/null +++ b/packages/rrweb-snapshot/test/images/symbol-defs.svg @@ -0,0 +1,12 @@ + + + +behance + + + +linkedin + + + + \ No newline at end of file