From 2d21d1e3f50829a873507c37505cba2a9baeb317 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Tue, 10 Oct 2023 11:38:05 +0100
Subject: [PATCH] Add failing test for capturing shorthand with variable e.g. 
 `animation: var(--my-anim);`

---
 .../__snapshots__/integration.test.ts.snap    | 198 ++++++++++++++++++
 packages/rrweb/test/html/animation-var.html   |  35 ++++
 .../rrweb/test/html/assets/animation-var.css  |   4 +
 packages/rrweb/test/integration.test.ts       |  15 ++
 4 files changed, 252 insertions(+)
 create mode 100644 packages/rrweb/test/html/animation-var.html
 create mode 100644 packages/rrweb/test/html/assets/animation-var.css

diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index c95ec53a5f..65f677d017 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -3348,6 +3348,204 @@ exports[`record integration tests can record node mutations 1`] = `
 ]"
 `;
 
+exports[`record integration tests can record shorthand properties defined via variables 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 1,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {
+              \\"lang\\": \\"en\\"
+            },
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 5
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"charset\\": \\"UTF-8\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"name\\": \\"viewport\\",
+                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 8
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"title\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"Animation defined via variable\\",
+                        \\"id\\": 11
+                      }
+                    ],
+                    \\"id\\": 10
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 12
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"style\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\":root { --duration-extra-long: 1.6s; --animation-fade-in: fadeIn var(--duration-extra-long) cubic-bezier(0, 0, .3, 1) forwards; }@keyframes fadeIn { \\\\n  0% { opacity: 0; }\\\\n  100% { opacity: 1; }\\\\n}#one { background-color: red; width: 200px; height: 200px; opacity: 0; }#one:not(.good) { animation: var(--animation-fade-in); animation-delay: 0.2s; }#one.ok { animation: var(--animation-fade-in); }\\",
+                        \\"isStyle\\": true,
+                        \\"id\\": 14
+                      }
+                    ],
+                    \\"id\\": 13
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 15
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"link\\",
+                    \\"attributes\\": {
+                      \\"rel\\": \\"stylesheet\\",
+                      \\"type\\": \\"text/css\\",
+                      \\"href\\": \\"http://localhost:3030/assets/animation-var.css\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 16
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 17
+                  }
+                ],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 3,
+                \\"textContent\\": \\"\\\\n  \\",
+                \\"id\\": 18
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 20
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"div\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"one\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 21
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
+                    \\"id\\": 22
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 24
+                      }
+                    ],
+                    \\"id\\": 23
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 25
+                  }
+                ],
+                \\"id\\": 19
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  }
+]"
+`;
+
 exports[`record integration tests can record style changes compactly and preserve css var() functions 1`] = `
 "[
   {
diff --git a/packages/rrweb/test/html/animation-var.html b/packages/rrweb/test/html/animation-var.html
new file mode 100644
index 0000000000..ea1866bd61
--- /dev/null
+++ b/packages/rrweb/test/html/animation-var.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Animation defined via variable</title>
+    <style>
+      :root {
+          --duration-extra-long: 1.6s;
+          --animation-fade-in: fadeIn var(--duration-extra-long) cubic-bezier(0, 0, .3, 1) forwards;
+      }
+      @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+      }
+      #one {
+          background-color: red;
+          width: 200px;
+          height: 200px;
+          opacity: 0;
+      }
+      #one:not(.good) {
+          animation: var(--animation-fade-in);
+          animation-delay: 0.2s;
+      }
+      #one.ok {
+          animation: var(--animation-fade-in);
+      }
+    </style>
+    <link rel="stylesheet" type="text/css" href="assets/animation-var.css">
+  </head>
+  <body>
+    <div id="one"></div>
+  </body>
+</html>
diff --git a/packages/rrweb/test/html/assets/animation-var.css b/packages/rrweb/test/html/assets/animation-var.css
new file mode 100644
index 0000000000..d8c7574dc8
--- /dev/null
+++ b/packages/rrweb/test/html/assets/animation-var.css
@@ -0,0 +1,4 @@
+#one.cant-access-inner-text-here {  /* like we could do .innerText for an inline <style> element */
+	animation: var(--animation-fade-in);
+	animation-delay: 0.2s;
+}
diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
index edfc8a97af..a70adc2c6e 100644
--- a/packages/rrweb/test/integration.test.ts
+++ b/packages/rrweb/test/integration.test.ts
@@ -214,6 +214,21 @@ describe('record integration tests', function (this: ISuite) {
     assertSnapshot(snapshots);
   });
 
+  it('can record shorthand properties defined via variables', async () => {
+    const page: puppeteer.Page = await browser.newPage();
+    await page.goto(`${serverURL}/html`);
+    await page.waitForTimeout(10);
+    await page.setContent(
+      getHtml.call(this, 'animation-var.html', {
+        inlineStylesheet: true, // TODO: this isn't working?
+      }),
+    );
+    const snapshots = (await page.evaluate(
+      'window.snapshots',
+    )) as eventWithTime[];
+    assertSnapshot(snapshots);
+  });
+
   it('can record style changes compactly and preserve css var() functions', async () => {
     const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');