Skip to content

Browser/Spec bug: Failing test for capturing css shorthand with confounding variable #1322

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

Browser/Spec bug: Failing test for capturing css shorthand with confounding variable #1322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
198 changes: 198 additions & 0 deletions packages/rrweb/test/__snapshots__/integration.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3348,6 +3348,204 @@ exports[`record integration tests can record node mutations 1`] = `
]"
`;

exports[`record integration tests can record shorthand properties defined via variables 1`] = `
"[
{
\\"type\\": 0,
\\"data\\": {}
},
{
\\"type\\": 1,
\\"data\\": {}
},
{
\\"type\\": 4,
\\"data\\": {
\\"href\\": \\"about:blank\\",
\\"width\\": 1920,
\\"height\\": 1080
}
},
{
\\"type\\": 2,
\\"data\\": {
\\"node\\": {
\\"type\\": 0,
\\"childNodes\\": [
{
\\"type\\": 1,
\\"name\\": \\"html\\",
\\"publicId\\": \\"\\",
\\"systemId\\": \\"\\",
\\"id\\": 2
},
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
\\"attributes\\": {
\\"lang\\": \\"en\\"
},
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 5
},
{
\\"type\\": 2,
\\"tagName\\": \\"meta\\",
\\"attributes\\": {
\\"charset\\": \\"UTF-8\\"
},
\\"childNodes\\": [],
\\"id\\": 6
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 7
},
{
\\"type\\": 2,
\\"tagName\\": \\"meta\\",
\\"attributes\\": {
\\"name\\": \\"viewport\\",
\\"content\\": \\"width=device-width, initial-scale=1.0\\"
},
\\"childNodes\\": [],
\\"id\\": 8
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 9
},
{
\\"type\\": 2,
\\"tagName\\": \\"title\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"Animation defined via variable\\",
\\"id\\": 11
}
],
\\"id\\": 10
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 12
},
{
\\"type\\": 2,
\\"tagName\\": \\"style\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\":root { --duration-extra-long: 1.6s; --animation-fade-in: fadeIn var(--duration-extra-long) cubic-bezier(0, 0, .3, 1) forwards; }@keyframes fadeIn { \\\\n 0% { opacity: 0; }\\\\n 100% { opacity: 1; }\\\\n}#one { background-color: red; width: 200px; height: 200px; opacity: 0; }#one:not(.good) { animation: var(--animation-fade-in); animation-delay: 0.2s; }#one.ok { animation: var(--animation-fade-in); }\\",
\\"isStyle\\": true,
\\"id\\": 14
}
],
\\"id\\": 13
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 15
},
{
\\"type\\": 2,
\\"tagName\\": \\"link\\",
\\"attributes\\": {
\\"rel\\": \\"stylesheet\\",
\\"type\\": \\"text/css\\",
\\"href\\": \\"http://localhost:3030/assets/animation-var.css\\"
},
\\"childNodes\\": [],
\\"id\\": 16
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 17
}
],
\\"id\\": 4
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 18
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 20
},
{
\\"type\\": 2,
\\"tagName\\": \\"div\\",
\\"attributes\\": {
\\"id\\": \\"one\\"
},
\\"childNodes\\": [],
\\"id\\": 21
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\",
\\"id\\": 22
},
{
\\"type\\": 2,
\\"tagName\\": \\"script\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"id\\": 24
}
],
\\"id\\": 23
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\",
\\"id\\": 25
}
],
\\"id\\": 19
}
],
\\"id\\": 3
}
],
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
}
}
]"
`;

exports[`record integration tests can record style changes compactly and preserve css var() functions 1`] = `
"[
{
Expand Down
35 changes: 35 additions & 0 deletions packages/rrweb/test/html/animation-var.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animation defined via variable</title>
<style>
:root {
--duration-extra-long: 1.6s;
--animation-fade-in: fadeIn var(--duration-extra-long) cubic-bezier(0, 0, .3, 1) forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#one {
background-color: red;
width: 200px;
height: 200px;
opacity: 0;
}
#one:not(.good) {
animation: var(--animation-fade-in);
animation-delay: 0.2s;
}
#one.ok {
animation: var(--animation-fade-in);
}
</style>
<link rel="stylesheet" type="text/css" href="assets/animation-var.css">
</head>
<body>
<div id="one"></div>
</body>
</html>
4 changes: 4 additions & 0 deletions packages/rrweb/test/html/assets/animation-var.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
#one.cant-access-inner-text-here { /* like we could do .innerText for an inline <style> element */
animation: var(--animation-fade-in);
animation-delay: 0.2s;
}
15 changes: 15 additions & 0 deletions packages/rrweb/test/integration.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,21 @@ describe('record integration tests', function (this: ISuite) {
assertSnapshot(snapshots);
});

it('can record shorthand properties defined via variables', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto(`${serverURL}/html`);
await page.waitForTimeout(10);
await page.setContent(
getHtml.call(this, 'animation-var.html', {
inlineStylesheet: true, // TODO: this isn't working?
}),
);
const snapshots = (await page.evaluate(
'window.snapshots',
)) as eventWithTime[];
assertSnapshot(snapshots);
});

it('can record style changes compactly and preserve css var() functions', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
Expand Down