fix style content url normalizer and add some tests

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "main": "dist/index.js",
   "module": "dist/module.js",

src/snapshot.ts

@@ -28,9 +28,29 @@ function getCssRulesString(s: CSSStyleSheet): string | null {
   }
 }
 
+function extractOrigin(url: string): string {
+  let origin;
+  if (url.indexOf('//') > -1) {
+    origin = url
+      .split('/')
+      .slice(0, 3)
+      .join('/');
+  } else {
+    origin = url.split('/')[0];
+  }
+  origin = origin.split('?')[0];
+  return origin;
+}
+
 const URL_IN_CSS_REF = /url\((['"])([^'"]*)\1\)/gm;
-function absoluteToStylesheet(cssText: string, href: string): string {
+export function absoluteToStylesheet(cssText: string, href: string): string {
   return cssText.replace(URL_IN_CSS_REF, (_1, _2, filePath) => {
+    if (!/^[./]/.test(filePath)) {
+      return `url('${filePath}')`;
+    }
+    if (filePath[0] === '/') {
+      return `url('${extractOrigin(href) + filePath}')`;
+    }
     const stack = href.split('/');
     const parts = filePath.split('/');
     stack.pop();

test/snapshot.test.ts

@@ -0,0 +1,31 @@
+import 'mocha';
+import { expect } from 'chai';
+import { absoluteToStylesheet } from '../src/snapshot';
+
+describe('absolute url to stylesheet', () => {
+  const href = 'http://localhost/css/style.css';
+
+  it('can handle same level path', () => {
+    expect(absoluteToStylesheet('url("./a.jpg")', href)).to.equal(
+      `url('http://localhost/css/a.jpg')`,
+    );
+  });
+
+  it('can handle parent level path', () => {
+    expect(absoluteToStylesheet('url("../a.jpg")', href)).to.equal(
+      `url('http://localhost/a.jpg')`,
+    );
+  });
+
+  it('can handle absolute path', () => {
+    expect(absoluteToStylesheet('url("/a.jpg")', href)).to.equal(
+      `url('http://localhost/a.jpg')`,
+    );
+  });
+
+  it('can handle external path', () => {
+    expect(
+      absoluteToStylesheet('url("http://localhost/a.jpg")', href),
+    ).to.equal(`url('http://localhost/a.jpg')`);
+  });
+});