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

Record when a doc is in compatMode and trigger this mode upon replay (#697)

Browse Source 
* Hygiene: clean up the xhtml namespace attribute; this is an artefact of the `serializeToString` method which we are using (I think) to be consistent with whitespace and to clean up invalid attributes. I'm removing as was confused as am adding tests related to doctypes

* Record when a document is in `compatMode` and trigger this mode on the iframe upon replay

 https://developer.mozilla.org/en-US/docs/Web/API/Document/compatMode

 the included DOCTYPE was picked up from https://stackoverflow.com/questions/18976213/ - there may be better ways of triggering compatMode

* Don't write an extra DOCTYPE if there's one already present in the snapshot. Rely instead on whatever doctype is there to trigger the BackCompat mode

* Modify to write the correct doctype if we can sniff xhtml - don't have any evidence that this will make a difference

* Dev convenience: Ignore files generated by editors

* Typo fix

* Was getting a 2000ms timeout on the 'before' hook I believe

* Change certain tests to go directly to their localhost page instead of loading the html content programmatically in order to avoid triggering an incorrect BackCompat mode (incorrect in that the html content has a correct doctype)

* Add test based on motivating site that had images lined up in a square which were all different sizes; very old style percentage width/height attributes were doing the right thing in quirksmode, which is what we are testing for here

* Fixup rrweb test html to include a valid doctype and avoid BackCompat to ensure we're not accidentally testing against quirks modes. I didn't find an elegant way of avoiding the `BackCompat` when adding a minimal iframe, so some BackCompat has slipped in here, I don't think there's much harm
This commit is contained in:
Eoghan Murray
2026-04-01 12:00:00 +08:00
committed by GitHub
parent af929f0767
commit 24d686ecfb
17 changed files with 645 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

639
packages/rrweb/test/__snapshots__/integration.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

233
packages/rrweb/test/__snapshots__/record.test.ts.snap
View File

@@ -16,6 +16,13 @@ exports[`async-checkout 1`] = `
\\"node\\": {
\\"type\\": 0,
\\"childNodes\\": [
{
\\"type\\": 1,
\\"name\\": \\"html\\",
\\"publicId\\": \\"\\",
\\"systemId\\": \\"\\",
\\"id\\": 2
},
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
@@ -26,7 +33,7 @@ exports[`async-checkout 1`] = `
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 3
\\"id\\": 4
},
{
\\"type\\": 2,
@@ -36,7 +43,7 @@ exports[`async-checkout 1`] = `
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 5
\\"id\\": 6
},
{
\\"type\\": 2,
@@ -46,18 +53,18 @@ exports[`async-checkout 1`] = `
\\"size\\": \\"40\\"
},
\\"childNodes\\": [],
\\"id\\": 6
\\"id\\": 7
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 7
\\"id\\": 8
}
],
\\"id\\": 4
\\"id\\": 5
}
],
\\"id\\": 2
\\"id\\": 3
}
],
\\"id\\": 1
@@ -76,31 +83,31 @@ exports[`async-checkout 1`] = `
\\"attributes\\": [],
\\"removes\\": [
{
\\"parentId\\": 4,
\\"id\\": 6
\\"parentId\\": 5,
\\"id\\": 7
}
],
\\"adds\\": [
{
\\"parentId\\": 4,
\\"parentId\\": 5,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"p\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 8
\\"id\\": 9
}
},
{
\\"parentId\\": 8,
\\"parentId\\": 9,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"span\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 9
\\"id\\": 10
}
}
]
@@ -115,12 +122,12 @@ exports[`async-checkout 1`] = `
\\"removes\\": [],
\\"adds\\": [
{
\\"parentId\\": 9,
\\"parentId\\": 10,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 3,
\\"textContent\\": \\"test\\",
\\"id\\": 10
\\"id\\": 11
}
}
]
@@ -140,6 +147,13 @@ exports[`async-checkout 1`] = `
\\"node\\": {
\\"type\\": 0,
\\"childNodes\\": [
{
\\"type\\": 1,
\\"name\\": \\"html\\",
\\"publicId\\": \\"\\",
\\"systemId\\": \\"\\",
\\"id\\": 2
},
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
@@ -150,7 +164,7 @@ exports[`async-checkout 1`] = `
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 3
\\"id\\": 4
},
{
\\"type\\": 2,
@@ -160,12 +174,12 @@ exports[`async-checkout 1`] = `
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 5
\\"id\\": 6
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 7
\\"id\\": 8
},
{
\\"type\\": 2,
@@ -180,19 +194,19 @@ exports[`async-checkout 1`] = `
{
\\"type\\": 3,
\\"textContent\\": \\"test\\",
\\"id\\": 10
\\"id\\": 11
}
],
\\"id\\": 9
\\"id\\": 10
}
],
\\"id\\": 8
\\"id\\": 9
}
],
\\"id\\": 4
\\"id\\": 5
}
],
\\"id\\": 2
\\"id\\": 3
}
],
\\"id\\": 1
@@ -211,29 +225,29 @@ exports[`async-checkout 1`] = `
\\"attributes\\": [],
\\"removes\\": [
{
\\"parentId\\": 8,
\\"id\\": 9
\\"parentId\\": 9,
\\"id\\": 10
}
],
\\"adds\\": [
{
\\"parentId\\": 4,
\\"parentId\\": 5,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"span\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 9
\\"id\\": 10
}
},
{
\\"parentId\\": 9,
\\"parentId\\": 10,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 3,
\\"textContent\\": \\"test\\",
\\"id\\": 10
\\"id\\": 11
}
}
]
@@ -258,6 +272,13 @@ exports[`custom-event 1`] = `
\\"node\\": {
\\"type\\": 0,
\\"childNodes\\": [
{
\\"type\\": 1,
\\"name\\": \\"html\\",
\\"publicId\\": \\"\\",
\\"systemId\\": \\"\\",
\\"id\\": 2
},
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
@@ -268,7 +289,7 @@ exports[`custom-event 1`] = `
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 3
\\"id\\": 4
},
{
\\"type\\": 2,
@@ -278,7 +299,7 @@ exports[`custom-event 1`] = `
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 5
\\"id\\": 6
},
{
\\"type\\": 2,
@@ -288,18 +309,18 @@ exports[`custom-event 1`] = `
\\"size\\": \\"40\\"
},
\\"childNodes\\": [],
\\"id\\": 6
\\"id\\": 7
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 7
\\"id\\": 8
}
],
\\"id\\": 4
\\"id\\": 5
}
],
\\"id\\": 2
\\"id\\": 3
}
],
\\"id\\": 1
@@ -345,6 +366,13 @@ exports[`iframe-stylesheet-mutations 1`] = `
\\"node\\": {
\\"type\\": 0,
\\"childNodes\\": [
{
\\"type\\": 1,
\\"name\\": \\"html\\",
\\"publicId\\": \\"\\",
\\"systemId\\": \\"\\",
\\"id\\": 2
},
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
@@ -355,7 +383,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 3
\\"id\\": 4
},
{
\\"type\\": 2,
@@ -365,7 +393,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 5
\\"id\\": 6
},
{
\\"type\\": 2,
@@ -377,16 +405,16 @@ exports[`iframe-stylesheet-mutations 1`] = `
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n </body>\\\\n </html>\\\\n \\",
\\"id\\": 7
\\"id\\": 8
}
],
\\"id\\": 6
\\"id\\": 7
}
],
\\"id\\": 4
\\"id\\": 5
}
],
\\"id\\": 2
\\"id\\": 3
}
],
\\"id\\": 1
@@ -403,7 +431,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
\\"source\\": 0,
\\"adds\\": [
{
\\"parentId\\": 6,
\\"parentId\\": 7,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 0,
@@ -418,8 +446,8 @@ exports[`iframe-stylesheet-mutations 1`] = `
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"rootId\\": 8,
\\"id\\": 10
\\"rootId\\": 9,
\\"id\\": 11
},
{
\\"type\\": 2,
@@ -434,23 +462,23 @@ exports[`iframe-stylesheet-mutations 1`] = `
{
\\"type\\": 3,
\\"textContent\\": \\"Mysterious Button\\",
\\"rootId\\": 8,
\\"id\\": 13
\\"rootId\\": 9,
\\"id\\": 14
}
],
\\"rootId\\": 8,
\\"id\\": 12
\\"rootId\\": 9,
\\"id\\": 13
}
],
\\"rootId\\": 8,
\\"id\\": 11
\\"rootId\\": 9,
\\"id\\": 12
}
],
\\"rootId\\": 8,
\\"id\\": 9
\\"rootId\\": 9,
\\"id\\": 10
}
],
\\"id\\": 8
\\"id\\": 9
}
}
],
@@ -469,7 +497,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
\\"removes\\": [],
\\"adds\\": [
{
\\"parentId\\": 10,
\\"parentId\\": 11,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
@@ -478,8 +506,8 @@ exports[`iframe-stylesheet-mutations 1`] = `
\\"_cssText\\": \\"body { background: rgb(0, 0, 0); }@media {\\\\n body { background: rgb(0, 0, 0); }\\\\n}\\"
},
\\"childNodes\\": [],
\\"rootId\\": 8,
\\"id\\": 14
\\"rootId\\": 9,
\\"id\\": 15
}
}
]
@@ -489,7 +517,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 14,
\\"id\\": 15,
\\"adds\\": [
{
\\"rule\\": \\"body { color: #fff; }\\"
@@ -501,7 +529,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 14,
\\"id\\": 15,
\\"adds\\": [
{
\\"rule\\": \\"body { color: #ccc; }\\",
@@ -517,7 +545,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 14,
\\"id\\": 15,
\\"removes\\": [
{
\\"index\\": 0
@@ -529,7 +557,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 13,
\\"id\\": 14,
\\"id\\": 15,
\\"set\\": {
\\"property\\": \\"color\\",
\\"value\\": \\"green\\"
@@ -543,7 +571,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 14,
\\"id\\": 15,
\\"removes\\": [
{
\\"index\\": [
@@ -573,6 +601,13 @@ exports[`nested-stylesheet-rules 1`] = `
\\"node\\": {
\\"type\\": 0,
\\"childNodes\\": [
{
\\"type\\": 1,
\\"name\\": \\"html\\",
\\"publicId\\": \\"\\",
\\"systemId\\": \\"\\",
\\"id\\": 2
},
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
@@ -583,7 +618,7 @@ exports[`nested-stylesheet-rules 1`] = `
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 3
\\"id\\": 4
},
{
\\"type\\": 2,
@@ -593,7 +628,7 @@ exports[`nested-stylesheet-rules 1`] = `
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 5
\\"id\\": 6
},
{
\\"type\\": 2,
@@ -603,18 +638,18 @@ exports[`nested-stylesheet-rules 1`] = `
\\"size\\": \\"40\\"
},
\\"childNodes\\": [],
\\"id\\": 6
\\"id\\": 7
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 7
\\"id\\": 8
}
],
\\"id\\": 4
\\"id\\": 5
}
],
\\"id\\": 2
\\"id\\": 3
}
],
\\"id\\": 1
@@ -634,7 +669,7 @@ exports[`nested-stylesheet-rules 1`] = `
\\"removes\\": [],
\\"adds\\": [
{
\\"parentId\\": 3,
\\"parentId\\": 4,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
@@ -643,7 +678,7 @@ exports[`nested-stylesheet-rules 1`] = `
\\"_cssText\\": \\"@media {\\\\n body { background: rgb(0, 0, 0); }\\\\n}\\"
},
\\"childNodes\\": [],
\\"id\\": 8
\\"id\\": 9
}
}
]
@@ -653,7 +688,7 @@ exports[`nested-stylesheet-rules 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 8,
\\"id\\": 9,
\\"adds\\": [
{
\\"rule\\": \\"body { color: #fff; }\\",
@@ -669,7 +704,7 @@ exports[`nested-stylesheet-rules 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 8,
\\"id\\": 9,
\\"removes\\": [
{
\\"index\\": [
@@ -684,7 +719,7 @@ exports[`nested-stylesheet-rules 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 8,
\\"id\\": 9,
\\"adds\\": [
{
\\"rule\\": \\"body { color: #ccc; }\\",
@@ -715,6 +750,13 @@ exports[`stylesheet-properties 1`] = `
\\"node\\": {
\\"type\\": 0,
\\"childNodes\\": [
{
\\"type\\": 1,
\\"name\\": \\"html\\",
\\"publicId\\": \\"\\",
\\"systemId\\": \\"\\",
\\"id\\": 2
},
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
@@ -725,7 +767,7 @@ exports[`stylesheet-properties 1`] = `
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 3
\\"id\\": 4
},
{
\\"type\\": 2,
@@ -735,7 +777,7 @@ exports[`stylesheet-properties 1`] = `
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 5
\\"id\\": 6
},
{
\\"type\\": 2,
@@ -745,18 +787,18 @@ exports[`stylesheet-properties 1`] = `
\\"size\\": \\"40\\"
},
\\"childNodes\\": [],
\\"id\\": 6
\\"id\\": 7
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 7
\\"id\\": 8
}
],
\\"id\\": 4
\\"id\\": 5
}
],
\\"id\\": 2
\\"id\\": 3
}
],
\\"id\\": 1
@@ -776,7 +818,7 @@ exports[`stylesheet-properties 1`] = `
\\"removes\\": [],
\\"adds\\": [
{
\\"parentId\\": 3,
\\"parentId\\": 4,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
@@ -785,7 +827,7 @@ exports[`stylesheet-properties 1`] = `
\\"_cssText\\": \\"body { background: rgb(0, 0, 0); }\\"
},
\\"childNodes\\": [],
\\"id\\": 8
\\"id\\": 9
}
}
]
@@ -795,7 +837,7 @@ exports[`stylesheet-properties 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 13,
\\"id\\": 8,
\\"id\\": 9,
\\"set\\": {
\\"property\\": \\"color\\",
\\"value\\": \\"green\\"
@@ -809,7 +851,7 @@ exports[`stylesheet-properties 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 13,
\\"id\\": 8,
\\"id\\": 9,
\\"remove\\": {
\\"property\\": \\"background\\"
},
@@ -837,6 +879,13 @@ exports[`stylesheet-rules 1`] = `
\\"node\\": {
\\"type\\": 0,
\\"childNodes\\": [
{
\\"type\\": 1,
\\"name\\": \\"html\\",
\\"publicId\\": \\"\\",
\\"systemId\\": \\"\\",
\\"id\\": 2
},
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
@@ -847,7 +896,7 @@ exports[`stylesheet-rules 1`] = `
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 3
\\"id\\": 4
},
{
\\"type\\": 2,
@@ -857,7 +906,7 @@ exports[`stylesheet-rules 1`] = `
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 5
\\"id\\": 6
},
{
\\"type\\": 2,
@@ -867,18 +916,18 @@ exports[`stylesheet-rules 1`] = `
\\"size\\": \\"40\\"
},
\\"childNodes\\": [],
\\"id\\": 6
\\"id\\": 7
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 7
\\"id\\": 8
}
],
\\"id\\": 4
\\"id\\": 5
}
],
\\"id\\": 2
\\"id\\": 3
}
],
\\"id\\": 1
@@ -898,7 +947,7 @@ exports[`stylesheet-rules 1`] = `
\\"removes\\": [],
\\"adds\\": [
{
\\"parentId\\": 3,
\\"parentId\\": 4,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
@@ -907,7 +956,7 @@ exports[`stylesheet-rules 1`] = `
\\"_cssText\\": \\"body { background: rgb(0, 0, 0); }\\"
},
\\"childNodes\\": [],
\\"id\\": 8
\\"id\\": 9
}
}
]
@@ -917,7 +966,7 @@ exports[`stylesheet-rules 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 8,
\\"id\\": 9,
\\"adds\\": [
{
\\"rule\\": \\"body { color: #fff; }\\"
@@ -929,7 +978,7 @@ exports[`stylesheet-rules 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 8,
\\"id\\": 9,
\\"removes\\": [
{
\\"index\\": 0
@@ -941,7 +990,7 @@ exports[`stylesheet-rules 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 8,
\\"id\\": 9,
\\"adds\\": [
{
\\"rule\\": \\"body { color: #ccc; }\\"

1
packages/rrweb/test/html/move-node.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<body>
<div>

1
packages/rrweb/test/html/mutation-observer.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<body>
<p>mutation observer</p>
<ul>

1
packages/rrweb/test/html/password.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />

2
packages/rrweb/test/record.test.ts
View File

@@ -72,6 +72,7 @@ describe('record', function (this: ISuite) {
setup.call(
this,
`
<!DOCTYPE html>
<html>
<body>
<input type="text" size="40" />
@@ -346,6 +347,7 @@ describe('record iframes', function (this: ISuite) {
setup.call(
this,
`
<!DOCTYPE html>
<html>
<body>
<iframe srcdoc="<button>Mysterious Button</button>" />