Missed this which is 'happy path' - add a test to catch catch case

rrweb-io · Apr 12, 2024 · 0c875be · 0c875be
1 parent 2c27e8b
commit 0c875be
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 12 deletions.
diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
@@ -256,6 +256,9 @@ function buildNode(
               }
             }
             continue;
+          } else if (hackCss && isRemoteOrDynamicCss) {
+            // <link> element or dynamic <style>
+            value = adaptCssForReplay(value, cache);
           }
           node.appendChild(doc.createTextNode(value));
           // https://github.com/rrweb-io/rrweb/issues/112

diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -3924,6 +3924,7 @@ exports[`record integration tests can record style text mutations 1`] = `
                     \\"type\\": 2,
                     \\"tagName\\": \\"style\\",
                     \\"attributes\\": {
+                      \\"id\\": \\"dual-textContent\\",
                       \\"_cssText\\": \\"body { background-color: black; }body { color: orange !important; }\\",
                       \\"_cssTextSplits\\": \\"33\\"
                     },
@@ -3961,16 +3962,70 @@ exports[`record integration tests can record style text mutations 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 19
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"style\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"single-textContent\\",
+                      \\"_cssText\\": \\"a:hover { outline: red solid 1px; }\\"
+                    },
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\",
+                        \\"id\\": 21
+                      }
+                    ],
+                    \\"id\\": 20
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 22
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"style\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"empty\\",
+                      \\"_cssText\\": \\"a:hover { outline: blue solid 1px; }\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 23
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 24
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 26
+                      }
+                    ],
+                    \\"id\\": 25
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 27
                   }
                 ],
                 \\"id\\": 4
               },
               {
                 \\"type\\": 3,
                 \\"textContent\\": \\"\\\\n  \\",
-                \\"id\\": 20
+                \\"id\\": 28
               },
               {
                 \\"type\\": 2,
@@ -3980,7 +4035,7 @@ exports[`record integration tests can record style text mutations 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 22
+                    \\"id\\": 30
                   },
                   {
                     \\"type\\": 2,
@@ -3990,18 +4045,18 @@ exports[`record integration tests can record style text mutations 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 24
+                        \\"id\\": 32
                       }
                     ],
-                    \\"id\\": 23
+                    \\"id\\": 31
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 25
+                    \\"id\\": 33
                   }
                 ],
-                \\"id\\": 21
+                \\"id\\": 29
               }
             ],
             \\"id\\": 3
@@ -4029,16 +4084,16 @@ exports[`record integration tests can record style text mutations 1`] = `
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\".absolutify { background-image: url(\\\\\\"http://localhost:3030/rel\\\\\\"); }\\",
-            \\"id\\": 26
+            \\"id\\": 34
           }
         },
         {
           \\"parentId\\": 13,
-          \\"nextId\\": 26,
+          \\"nextId\\": 34,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"body { background-color: darkgreen; }\\",
-            \\"id\\": 27
+            \\"id\\": 35
           }
         }
       ]
@@ -4058,7 +4113,7 @@ exports[`record integration tests can record style text mutations 1`] = `
           \\"value\\": \\"body { color: yellow; }\\"
         },
         {
-          \\"id\\": 27,
+          \\"id\\": 35,
           \\"value\\": \\"body { background-color: purple; }\\"
         }
       ],

diff --git a/packages/rrweb/test/html/style.html b/packages/rrweb/test/html/style.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>style</title>
-    <style>
+    <style id="dual-textContent">
       body { background-color: black; }
     </style>
     <script>
@@ -13,6 +13,15 @@
         document.createTextNode('body { color: orange !important; }')
       );
     </script>
+    <style id="single-textContent">
+      a:hover { outline: 1px solid red; }
+    </style>
+    <style id="empty"></style>
+    <script>
+      // this simulates how <link> is stringified
+      let empty = document.getElementById('empty');
+      empty.sheet.insertRule('a:hover { outline: 1px solid blue; }');
+    </script>
   </head>
   <body>
   </body>

diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
@@ -240,6 +240,8 @@ describe('record integration tests', function (this: ISuite) {
           'color': bodyStyle['color'],
         });
       });
+      vals.push(replayer.iframe.contentDocument.getElementById('single-textContent').innerText);
+      vals.push(replayer.iframe.contentDocument.getElementById('empty').innerText);
       vals;
 `);
 
@@ -256,6 +258,8 @@ describe('record integration tests', function (this: ISuite) {
         'background-color': 'rgb(0, 0, 0)', // black !important
         color: 'rgb(255, 255, 0)', // yellow
       },
+      'a:hover, a.\\:hover { outline: red solid 1px; }', // has run adaptCssForReplay
+      'a:hover, a.\\:hover { outline: blue solid 1px; }', // has run adaptCssForReplay
     ]);
   });