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

Fix: Capture css background-clip: text with browser prefix (#1047)

Browse Source
This commit is contained in:
Justin Halsall
2022-11-12 09:02:30 +01:00
committed by GitHub
parent 75e2280bf6
commit 9bbc3e0073
4 changed files with 112 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
View File

@@ -149,6 +149,20 @@ exports[`integration tests [html file]: about-mozilla.html 1`] = `
</p></body></html>"
`;
exports[`integration tests [html file]: background-clip-text.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<title>Document</title>
<style id=\\"dynamic-style\\">p { border-width: 0.8em; border-color: darkviolet; border-image: initial; border-style: dotted double; margin: 1em 0px; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; }.text { -webkit-background-clip: text; background-clip: text; color: rgba(0, 0, 0, 0.2); }</style>
</head>
<body>
<p class=\\"text\\">The background is clipped to the foreground text.</p>
<noscript>SCRIPT_PLACEHOLDER</noscript>
</body></html>"
`;
exports[`integration tests [html file]: basic.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
@@ -330,6 +344,25 @@ exports[`integration tests [html file]: picture.html 1`] = `
</body></html>"
`;
exports[`integration tests [html file]: picture-blob.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\"><html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
<img src=\\"\\" alt=\\"This is a robot\\" />
<noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
`;
exports[`integration tests [html file]: picture-blob-in-frame.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\"><html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
<iframe></iframe>
</body></html>"
`;
exports[`integration tests [html file]: picture-in-frame.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\"><html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
<iframe></iframe>
</body></html>"
`;
exports[`integration tests [html file]: preload.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />

33
packages/rrweb-snapshot/test/html/background-clip-text.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style id="dynamic-style"></style>
</head>
<body>
<p class="text">The background is clipped to the foreground text.</p>
<script>
const style = document.getElementById('dynamic-style');
style.sheet.insertRule(`p {
border: 0.8em darkviolet;
border-style: dotted double;
margin: 1em 0;
padding: 1.4em;
background: linear-gradient(60deg, red, yellow, red, yellow, red);
font: 900 1.2em sans-serif;
text-decoration: underline;
}`);
style.sheet.insertRule(
`.text {
background-clip: text;
-webkit-background-clip: text;
color: rgba(0, 0, 0, 0.2);
}`,
1,
);
</script>
</body>
</html>

17
packages/rrweb-snapshot/test/integration.test.ts
View File

@@ -276,6 +276,23 @@ iframe.contentDocument.querySelector('center').clientHeight
assert(snapshot.includes('"rr_dataURL"'));
assert(snapshot.includes('data:image/webp;base64,'));
});
it('should save background-clip: text; as the more compatible -webkit-background-clip: test;', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto(`http://localhost:3030/html/background-clip-text.html`, {
waitUntil: 'load',
});
await waitForRAF(page); // wait for page to render
await page.evaluate(`${code}
window.snapshot = rrweb.snapshot(document, {
inlineStylesheet: true,
})`);
await page.waitFor(100);
const snapshot = (await page.evaluate(
'JSON.stringify(window.snapshot, null, 2);',
)) as string;
assert(snapshot.includes('-webkit-background-clip: text;'));
});
});
describe('iframe integration tests', function (this: ISuite) {