diff --git a/.changeset/perfect-dolls-grab.md b/.changeset/perfect-dolls-grab.md new file mode 100644 index 0000000000..78e03a8e88 --- /dev/null +++ b/.changeset/perfect-dolls-grab.md @@ -0,0 +1,5 @@ +--- +"rrweb-snapshot": patch +--- + +fix dimensions for blocked element not being applied diff --git a/packages/rrdom/test/virtual-dom.test.ts b/packages/rrdom/test/virtual-dom.test.ts index e3b4d11efc..8896e81d41 100644 --- a/packages/rrdom/test/virtual-dom.test.ts +++ b/packages/rrdom/test/virtual-dom.test.ts @@ -7,6 +7,7 @@ import * as puppeteer from 'puppeteer'; import { vi } from 'vitest'; import { JSDOM } from 'jsdom'; import { + buildNodeWithSN, cdataNode, commentNode, documentNode, @@ -207,6 +208,33 @@ describe('RRDocument for browser environment', () => { expect((rrNode as RRElement).tagName).toEqual('SHADOWROOT'); expect(rrNode).toBe(parentRRNode.shadowRoot); }); + + it('can rebuild blocked element with correct dimensions', () => { + // @ts-expect-error Testing buildNodeWithSN with rr elements + const node = buildNodeWithSN( + { + id: 1, + tagName: 'svg', + type: NodeType.Element, + isSVG: true, + attributes: { + rr_width: '50px', + rr_height: '50px', + }, + childNodes: [], + }, + { + // @ts-expect-error + doc: new RRDocument(), + mirror, + blockSelector: '*', + slimDOMOptions: {}, + }, + ) as RRElement; + + expect(node.style.width).toBe('50px'); + expect(node.style.height).toBe('50px'); + }); }); describe('create a RRDocument from a html document', () => { diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts index d79c8f8716..e4a4c9df4f 100644 --- a/packages/rrweb-snapshot/src/rebuild.ts +++ b/packages/rrweb-snapshot/src/rebuild.ts @@ -328,9 +328,9 @@ function buildNode( } if (name === 'rr_width') { - (node as HTMLElement).style.width = value.toString(); + (node as HTMLElement).style.setProperty('width', value.toString()); } else if (name === 'rr_height') { - (node as HTMLElement).style.height = value.toString(); + (node as HTMLElement).style.setProperty('height', value.toString()); } else if ( name === 'rr_mediaCurrentTime' && typeof value === 'number' diff --git a/packages/rrweb-snapshot/test/rebuild.test.ts b/packages/rrweb-snapshot/test/rebuild.test.ts index 14a255bf6d..a0994a2f88 100644 --- a/packages/rrweb-snapshot/test/rebuild.test.ts +++ b/packages/rrweb-snapshot/test/rebuild.test.ts @@ -72,6 +72,32 @@ describe('rebuild', function () { }); }); + describe('rr_width/rr_height', function () { + it('rebuild blocked element with correct dimensions', function () { + const node = buildNodeWithSN( + { + id: 1, + tagName: 'svg', + type: NodeType.Element, + isSVG: true, + attributes: { + rr_width: '50px', + rr_height: '50px', + }, + childNodes: [], + }, + { + doc: document, + mirror, + hackCss: false, + cache, + }, + ) as HTMLDivElement; + expect(node.style.width).toBe('50px'); + expect(node.style.height).toBe('50px'); + }); + }); + describe('shadowDom', function () { it('rebuild shadowRoot without siblings', function () { const node = buildNodeWithSN(