xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Handle quoted strings in data url (#84)

Browse Source 
* handle quoted strings in data url

* unrefactor

* update package json

* Revert "update package json"

This reverts commit 9446109b0f94d9e569a961642f1e57b1a67793ee.

* change background-image to border-image
This commit is contained in:
AssafKr
2026-04-01 12:00:00 +08:00
committed by GitHub
parent d9133fd7ac
commit 3c7aeb3b13
4 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/snapshot.ts
View File

@@ -69,7 +69,7 @@ function extractOrigin(url: string): string {
return origin;
}
const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")([^"]*)"|([^)]*))\)/gm;
const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm;
const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/|#).*/;
const DATA_URI = /^(data:)([^,]*),(.*)/i;
export function absoluteToStylesheet(

4
test/__snapshots__/integration.ts.snap
View File

@@ -297,7 +297,7 @@ exports[`[html file]: with-style-sheet.html 1`] = `
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>with style sheet</title>
<style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body &gt; p { color: yellow; }</style>
<style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); border-image: url(\\"data:image/svg+xml;utf8,&lt;svg xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\" x=\\\\\\"0px\\\\\\" y=\\\\\\"0px\\\\\\" viewBox=\\\\\\"0 0 256 256\\\\\\"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points=\\\\\\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\\\\\\"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;\\") 100% / 1 / 0 stretch; }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body &gt; p { color: yellow; }</style>
</head><body>
</body></html>"
`;
@@ -308,7 +308,7 @@ exports[`[html file]: with-style-sheet-with-import.html 1`] = `
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>with style sheet with import</title>
<style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body &gt; p { color: yellow; }</style>
<style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); border-image: url(\\"data:image/svg+xml;utf8,&lt;svg xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\" x=\\\\\\"0px\\\\\\" y=\\\\\\"0px\\\\\\" viewBox=\\\\\\"0 0 256 256\\\\\\"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points=\\\\\\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\\\\\\"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;\\") 100% / 1 / 0 stretch; }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body &gt; p { color: yellow; }</style>
</head><body>
</body></html>"
`;

1
test/css/style.css
View File

@@ -1,6 +1,7 @@
body {
margin: 0;
background: url('../a.jpg');
border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 256 256"><g><g><polygon points="79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128"/></g></g></svg>');
}
p {
color: red;

8
test/snapshot.test.ts
View File

@@ -89,6 +89,14 @@ describe('absolute url to stylesheet', () => {
).to.equal(
'url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')',
);
expect(
absoluteToStylesheet(
'url("data:image/svg+xml;utf8,<svg width=\"28\" height=\"32\" viewBox=\"0 0 28 32\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M27 14C28\" fill=\"white\"/></svg>")',
href,
),
).to.equal(
'url("data:image/svg+xml;utf8,<svg width=\"28\" height=\"32\" viewBox=\"0 0 28 32\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M27 14C28\" fill=\"white\"/></svg>")',
);
});
it('can handle empty path', () => {
expect(absoluteToStylesheet(`url('')`, href)).to.equal(`url('')`);