Skip to content

Commit

Permalink
Fix case where we wouldn't have been able to mutate a <style> text no…
Browse files Browse the repository at this point in the history
…de after a mutation as it's textContent wasn't getting a serialized id
  • Loading branch information
eoghanmurray committed Jul 8, 2024
1 parent 7c344ff commit a1e475c
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 3 deletions.
4 changes: 3 additions & 1 deletion packages/rrweb/src/record/mutation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -288,6 +288,7 @@ export default class MutationBuffer {
if (!n.parentNode || !inDom(n)) {
return;
}
let cssCaptured = false;
if (n.nodeType === Node.TEXT_NODE) {
const parentTag = (n.parentNode as Element).tagName;
if (parentTag === 'TEXTAREA') {
Expand All @@ -296,7 +297,7 @@ export default class MutationBuffer {
} else if (parentTag === 'STYLE' && this.addedSet.has(n.parentNode)) {
// css content will be recorded via parent's _cssText attribute when
// mutation adds entire <style> element
return;
cssCaptured = true;
}
}

Expand Down Expand Up @@ -345,6 +346,7 @@ export default class MutationBuffer {
onStylesheetLoad: (link, childSn) => {
this.stylesheetManager.attachLinkElement(link, childSn);
},
cssCaptured,
});
if (sn) {
adds.push({
Expand Down
57 changes: 57 additions & 0 deletions packages/rrweb/test/__snapshots__/integration.test.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -1366,6 +1366,45 @@ exports[`record integration tests > can record and replay style mutations 1`] =
],
\\"attributes\\": [],
\\"removes\\": [],
\\"adds\\": [
{
\\"parentId\\": 32,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"style\\",
\\"attributes\\": {
\\"id\\": \\"goldilocks\\",
\\"_cssText\\": \\"body { color: brown; }\\"
},
\\"childNodes\\": [],
\\"id\\": 39
}
},
{
\\"parentId\\": 39,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 3,
\\"textContent\\": \\"\\",
\\"id\\": 40
}
}
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 0,
\\"texts\\": [
{
\\"id\\": 40,
\\"value\\": \\"body { color: gold }\\"
}
],
\\"attributes\\": [],
\\"removes\\": [],
\\"adds\\": []
}
}
Expand Down Expand Up @@ -16388,6 +16427,24 @@ exports[`record integration tests > should record style mutations with multiple
\\"childNodes\\": [],
\\"id\\": 21
}
},
{
\\"parentId\\": 21,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 3,
\\"textContent\\": \\"\\",
\\"id\\": 22
}
},
{
\\"parentId\\": 21,
\\"nextId\\": 22,
\\"node\\": {
\\"type\\": 3,
\\"textContent\\": \\"\\",
\\"id\\": 23
}
}
]
}
Expand Down
24 changes: 22 additions & 2 deletions packages/rrweb/test/integration.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -240,10 +240,26 @@ describe('record integration tests', function (this: ISuite) {
});
}
let st = document.createElement('style');
st.innerText = '.record-once { color: brown }';
st.id = 'goldilocks';
st.innerText = 'body { color: brown }';
document.body.append(st);
});

await page.waitForTimeout(5);
await page.evaluate(() => {
let styleEl = document.getElementById('goldilocks');
if (styleEl) {
styleEl.childNodes.forEach((cn) => {
if (cn.textContent) {
cn.textContent = cn.textContent.replace(
'brown',
'gold',
);
}
});
}
});

const snapshots = (await page.evaluate(
'window.snapshots',
)) as eventWithTime[];
Expand Down Expand Up @@ -281,7 +297,11 @@ describe('record integration tests', function (this: ISuite) {
},
{
'background-color': 'rgb(0, 0, 0)', // black !important
color: 'rgb(255, 255, 0)', // yellow
color: 'rgb(165, 42, 42)', // brown
},
{
'background-color': 'rgb(0, 0, 0)',
color: 'rgb(255, 215, 0)', // gold
},
'a:hover,\na.\\:hover { outline: red solid 1px; }', // has run adaptCssForReplay
'a:hover,\na.\\:hover { outline: blue solid 1px; }', // has run adaptCssForReplay
Expand Down

0 comments on commit a1e475c

Please sign in to comment.