From d47ad209f7ed116d13ad3a8b867101d00864b2e6 Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Wed, 24 Apr 2024 14:43:45 -0400
Subject: [PATCH] repro: adding node to `<style>` clears injected styles

Here is a repro of a case where a mutation that adds a node to a `<style>` (at least I think this is what `parentId=-2` is) will clear the injected styles. This ends up clearing the `noscript` css so that the contents of the `noscript` elements will be displayed in the replay.
---
 packages/rrweb/test/events/noscript.ts | 104 +++++++++++++++++++++++++
 packages/rrweb/test/replayer.test.ts   |  24 ++++++
 2 files changed, 128 insertions(+)
 create mode 100644 packages/rrweb/test/events/noscript.ts

diff --git a/packages/rrweb/test/events/noscript.ts b/packages/rrweb/test/events/noscript.ts
new file mode 100644
index 0000000000..c9580858ae
--- /dev/null
+++ b/packages/rrweb/test/events/noscript.ts
@@ -0,0 +1,104 @@
+import { EventType, IncrementalSource } from '@sentry-internal/rrweb-types';
+import type { eventWithTime } from '@sentry-internal/rrweb-types';
+
+const now = Date.now();
+
+const events: eventWithTime[] = [
+  { type: EventType.DomContentLoaded, data: {}, timestamp: now },
+  {
+    type: EventType.Meta,
+    data: {
+      href: 'about:blank',
+      width: 1920,
+      height: 1080,
+    },
+    timestamp: now + 100,
+  },
+  {
+    type: EventType.FullSnapshot,
+    data: {
+      node: {
+        type: 0,
+        childNodes: [
+          {
+            type: 1,
+            name: 'html',
+            publicId: '',
+            systemId: '',
+            id: 2,
+          },
+          {
+            type: 2,
+            tagName: 'html',
+            attributes: {},
+            childNodes: [
+              {
+                type: 2,
+                tagName: 'head',
+                attributes: {},
+                childNodes: [],
+                id: 4,
+              },
+              {
+                type: 2,
+                tagName: 'body',
+                attributes: {},
+                childNodes: [
+                  {
+                    type: 3,
+                    textContent: '\n        ',
+                    id: 6,
+                  },
+                  {
+                    type: 2,
+                    tagName: 'noscript',
+                    attributes: {},
+                    childNodes: [
+                      {
+                        type: 3,
+                        textContent: 'text in noscript',
+                        id: 8,
+                      },
+                    ],
+                    id: 7,
+                  },
+                ],
+                id: 5,
+              },
+            ],
+            id: 3,
+          },
+        ],
+        id: 1,
+      },
+      initialOffset: {
+        left: 0,
+        top: 0,
+      },
+    },
+    timestamp: now + 100,
+  },
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.Mutation,
+      texts: [],
+      attributes: [],
+      removes: [],
+      adds: [
+        {
+          parentId: -1,
+          nextId: null,
+          node: {
+            type: 3,
+            textContent: 'SCRIPT_PLACEHOLDER',
+            id: 21,
+          },
+        },
+      ],
+    },
+    timestamp: now + 300,
+  },
+];
+
+export default events;
diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts
index b54d360a6b..8579800735 100644
--- a/packages/rrweb/test/replayer.test.ts
+++ b/packages/rrweb/test/replayer.test.ts
@@ -10,6 +10,7 @@ import {
   waitForRAF,
 } from './utils';
 import styleSheetRuleEvents from './events/style-sheet-rule-events';
+import noscriptEvents from './events/noscript';
 import orderingEvents from './events/ordering';
 import scrollEvents from './events/scroll';
 import scrollWithParentStylesEvents from './events/scroll-with-parent-styles';
@@ -175,6 +176,29 @@ describe('replayer', function () {
     await assertDomSnapshot(page);
   });
 
+  it('should keep default injected styles after fast forward, and appending to style tag', async () => {
+    await page.evaluate(`events = ${JSON.stringify(noscriptEvents)}`);
+    const result = await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+      function pause() {
+        return new Promise(resolve => setTimeout(() => {
+          replayer.pause(1500);
+          console.log('paused');
+          resolve();
+        }, 0));
+      }
+      pause().then(() => {
+        const rules = [...replayer.iframe.contentDocument.styleSheets].map(
+          (sheet) => [...sheet.rules],
+        ).flat();
+        return rules.some((x) => x.selectorText === 'noscript');
+      });
+    `);
+
+    expect(result).toEqual(true);
+  });
+
   it('should apply fast forwarded StyleSheetRules that where added', async () => {
     await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`);
     const result = await page.evaluate(`