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

iterate style element to get css rules string

Browse Source
This commit is contained in:
Yanzhen Yu
2019-02-17 16:34:28 +08:00
parent 5e07137059
commit 687c710fe9
4 changed files with 57 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/rebuild.ts
View File

@@ -95,11 +95,12 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
let value = n.attributes[name];
value = typeof value === 'boolean' ? '' : value;
const isTextarea = tagName === 'textarea' && name === 'value';
const isRemoteCss = tagName === 'style' && name === '_cssText';
if (isRemoteCss) {
const isRemoteOrDynamicCss =
tagName === 'style' && name === '_cssText';
if (isRemoteOrDynamicCss) {
value = addHoverClass(value);
}
if (isTextarea || isRemoteCss) {
if (isTextarea || isRemoteOrDynamicCss) {
const child = doc.createTextNode(value);
node.appendChild(child);
continue;

22
src/snapshot.ts
View File

@@ -122,9 +122,25 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
});
const cssText = getCssRulesString(stylesheet as CSSStyleSheet);
if (cssText) {
attributes = {
_cssText: absoluteToStylesheet(cssText, stylesheet!.href!),
};
delete attributes.rel;
delete attributes.href;
attributes._cssText = absoluteToStylesheet(
cssText,
stylesheet!.href!,
);
}
}
// dynamic stylesheet
if (
tagName === 'style' &&
(n as HTMLStyleElement).sheet &&
// TODO: Currently we only try to get dynamic stylesheet when it is an empty style element
!(n as HTMLElement).innerText.trim().length
) {
const cssText = getCssRulesString((n as HTMLStyleElement)
.sheet as CSSStyleSheet);
if (cssText) {
attributes._cssText = absoluteToStylesheet(cssText, location.href);
}
}
// form fields

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

@@ -83,6 +83,20 @@ exports[`[html file]: cors-style-sheet.html 1`] = `
</head><body></body></html>"
`;
exports[`[html file]: dynamic-stylesheet.html 1`] = `
"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>dynamic stylesheet</title>
<style>body { margin: 0px; }p { background: lightpink; }</style>
<noscript>SCRIPT_PLACEHOLDER</noscript>
</head>
<body>
<p>p tag</p>
</body></html>"
`;
exports[`[html file]: form-fields.html 1`] = `
"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />

20
test/html/dynamic-stylesheet.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>dynamic stylesheet</title>
<style></style>
<script>
const styleEl = document.querySelector('style');
const rules = [`body { margin: 0 }`, `p { background: lightpink }`];
rules.forEach((rule, idx) => {
styleEl.sheet.insertRule(rule, idx);
});
</script>
</head>
<body>
<p>p tag</p>
</body>
</html>