Skip to content

Commit

Permalink
Add failing test for capturing shorthand with variable e.g. `animatio…
Browse files Browse the repository at this point in the history 
…n: var(--my-anim);`
  • Loading branch information
@eoghanmurray
eoghanmurray committed Oct 10, 2023
1 parent 297104c commit 2d21d1e
Show file tree
Hide file tree
Showing 4 changed files with 252 additions and 0 deletions.
198 changes: 198 additions & 0 deletions packages/rrweb/test/__snapshots__/integration.test.ts.snap
View file
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
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
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
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

0 comments on commit 2d21d1e

Please sign in to comment.