From 5a42bef85b7700023a57a363ee54ce135e069da2 Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Thu, 19 Oct 2023 19:13:07 -0400
Subject: [PATCH 1/2] fix(snapshot): dimensions for blocked element not being
 applied

Dimensions are not being properly applied when you seek to a position in
the replay. Need to use `setProperty`, otherwise the style attributes
get lost.
---
 packages/rrdom/test/virtual-dom.test.ts      | 28 ++++++++++++++++++++
 packages/rrweb-snapshot/src/rebuild.ts       |  4 +--
 packages/rrweb-snapshot/test/rebuild.test.ts | 26 ++++++++++++++++++
 3 files changed, 56 insertions(+), 2 deletions(-)

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(

From 091ebc2a692ebc933c073b0c6b7124f6fb7601f7 Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Tue, 17 Sep 2024 11:20:42 -0400
Subject: [PATCH 2/2] add changeset

---
 .changeset/perfect-dolls-grab.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/perfect-dolls-grab.md

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