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

add hover class to :hover related css rules

Browse Source
This commit is contained in:
Yanzhen Yu
2026-04-01 12:00:00 +08:00
parent 23eee58853
commit efcbd0faf1
4 changed files with 124 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -88,6 +88,29 @@ exports[`[html file]: form-fields.html 1`] = `
</body></html>"
`;
exports[`[html file]: hover.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>hover selector</title>
<style> div:hover, div.\\\\:hover {
background: orange;
} div:hover::after, div.\\\\:hover::after {
position: absolute;
left: 0;
top: 100%;
content: 'dropdown';
width: 100px;
height: 200px;
background: lightblue;
}
</style>
</head><body>
<div>hover me</div>
</body></html>"
`;
exports[`[html file]: iframe.html 1`] = `
"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />

31
test/html/hover.html Normal file
View File

@@ -0,0 +1,31 @@
<!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>hover selector</title>
<style>
div:hover {
background: orange;
}
div:hover::after {
position: absolute;
left: 0;
top: 100%;
content: 'dropdown';
width: 100px;
height: 200px;
background: lightblue;
}
</style>
</head>
<body>
<div>hover me</div>
</body>
</html>

42
test/snapshot.test.ts
View File

@@ -1,6 +1,6 @@
import 'mocha';
import { expect } from 'chai';
import { absoluteToStylesheet } from '../src/snapshot';
import { absoluteToStylesheet, addHoverClass } from '../src/snapshot';
describe('absolute url to stylesheet', () => {
const href = 'http://localhost/css/style.css';
@@ -29,3 +29,43 @@ describe('absolute url to stylesheet', () => {
).to.equal(`url('http://localhost/a.jpg')`);
});
});
describe('add hover class to hover selector related rules', () => {
it('will do nothing to css text without :hover', () => {
const cssText = 'body { color: white }';
expect(addHoverClass(cssText)).to.equal(cssText);
});
it('can add hover class to css text', () => {
const cssText = '.a:hover { color: white }';
expect(addHoverClass(cssText)).to.equal(
'.a:hover, .a.\\:hover { color: white }',
);
});
it('can add hover class when there is multi selector', () => {
const cssText = '.a, .b:hover, .c { color: white }';
expect(addHoverClass(cssText)).to.equal(
'.a, .b:hover, .b.\\:hover, .c { color: white }',
);
});
it('can add hover class when :hover is not the end of selector', () => {
const cssText = 'div:hover::after { color: white }';
expect(addHoverClass(cssText)).to.equal(
'div:hover::after, div.\\:hover::after { color: white }',
);
});
it('can add hover class when the selector has multi :hover', () => {
const cssText = 'a:hover b:hover { color: white }';
expect(addHoverClass(cssText)).to.equal(
'a:hover b:hover, a.\\:hover b.\\:hover { color: white }',
);
});
it('will ignore :hover in css value', () => {
const cssText = '.a::after { content: ":hover" }';
expect(addHoverClass(cssText)).to.equal(cssText);
});
});