chore: 整理 third-party Dark Reader 目录并移除本地说明文件跟踪
This commit is contained in:
@@ -0,0 +1,42 @@
|
||||
import {multiline} from '../../support/test-utils';
|
||||
import type {StyleExpectations} from '../globals';
|
||||
|
||||
async function loadBasicPage() {
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
' <span style="color: red;">Inline style override</span>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
async function expectStyles(styles: StyleExpectations) {
|
||||
await expectPageStyles(expect, styles);
|
||||
}
|
||||
|
||||
describe('Inline style override', () => {
|
||||
it('should override inline style', async () => {
|
||||
await loadBasicPage();
|
||||
|
||||
await expectStyles(['span', 'color', 'rgb(255, 26, 26)']);
|
||||
});
|
||||
|
||||
it('should watch for inline style change', async () => {
|
||||
await loadBasicPage();
|
||||
|
||||
await expectStyles(['span', 'color', 'rgb(255, 26, 26)']);
|
||||
|
||||
await expect(pageUtils.evaluateScript(async () => {
|
||||
const span = document.querySelector('span')!;
|
||||
span.style.color = 'green';
|
||||
await new Promise((resolve) => setTimeout(resolve));
|
||||
return getComputedStyle(span).color;
|
||||
})).resolves.toBe('rgb(114, 255, 114)');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,121 @@
|
||||
import {multiline} from '../../support/test-utils';
|
||||
import type {StyleExpectations} from '../globals';
|
||||
|
||||
async function expectStyles(styles: StyleExpectations) {
|
||||
await expectPageStyles(expect, styles);
|
||||
}
|
||||
|
||||
describe('Link override', () => {
|
||||
it('should override link style', async () => {
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
' <link rel="stylesheet" href="style.css"/>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
' <h1>Link style <strong>override</strong>!</h1>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
'/style.css': multiline(
|
||||
'body { background: gray; }',
|
||||
'h1 strong { color: red; }',
|
||||
),
|
||||
});
|
||||
|
||||
await expectStyles([
|
||||
['document', 'background-color', 'rgb(24, 26, 27)'],
|
||||
['body', 'background-color', 'rgb(96, 104, 108)'],
|
||||
['body', 'color', 'rgb(232, 230, 227)'],
|
||||
['h1', 'color', 'rgb(232, 230, 227)'],
|
||||
['h1 strong', 'color', 'rgb(255, 26, 26)'],
|
||||
]);
|
||||
});
|
||||
|
||||
it('should override CORS style', async () => {
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
` <link rel="stylesheet" href="${corsURL}/style.css"/>`,
|
||||
'</head>',
|
||||
'<body>',
|
||||
' <h1>CORS style <strong>override</strong>!</h1>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
cors: {
|
||||
'/style.css': multiline(
|
||||
'body { background: gray; }',
|
||||
'h1 strong { color: red; }',
|
||||
),
|
||||
},
|
||||
});
|
||||
|
||||
await expectStyles([
|
||||
['document', 'background-color', 'rgb(24, 26, 27)'],
|
||||
['body', 'background-color', 'rgb(96, 104, 108)'],
|
||||
['body', 'color', 'rgb(232, 230, 227)'],
|
||||
['h1', 'color', 'rgb(232, 230, 227)'],
|
||||
['h1 strong', 'color', 'rgb(255, 26, 26)'],
|
||||
]);
|
||||
});
|
||||
|
||||
it('should wait till style is loading', async () => {
|
||||
const styleResolvers: Array<() => any> = [];
|
||||
let didStyleResolve = false;
|
||||
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
' <link rel="stylesheet" href="style.css"/>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
' <h1>Link loading <strong>delay</strong></h1>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
'/style.css': async (_, res) => {
|
||||
res.statusCode = 200;
|
||||
res.setHeader('Content-Type', 'text/css');
|
||||
|
||||
// For some reason Firefox 151 performs two requests.
|
||||
// Only the second has effect on page's look.
|
||||
if (!didStyleResolve) {
|
||||
await new Promise<void>((resolve) => styleResolvers.push(resolve));
|
||||
}
|
||||
|
||||
res.end(multiline(
|
||||
'body { background: gray; }',
|
||||
'h1 strong { color: red; }',
|
||||
), 'utf8');
|
||||
},
|
||||
}, {
|
||||
waitUntil: 'domcontentloaded',
|
||||
});
|
||||
|
||||
await expectStyles([
|
||||
['document', 'background-color', 'rgb(24, 26, 27)'],
|
||||
['body', 'background-color', 'rgb(24, 26, 27)'],
|
||||
['body', 'color', 'rgb(232, 230, 227)'],
|
||||
['h1', 'color', 'rgb(232, 230, 227)'],
|
||||
['h1 strong', 'color', 'rgb(232, 230, 227)'],
|
||||
]);
|
||||
|
||||
styleResolvers.forEach((resolve) => resolve());
|
||||
didStyleResolve = true;
|
||||
|
||||
await expectStyles([
|
||||
['document', 'background-color', 'rgb(24, 26, 27)'],
|
||||
['body', 'background-color', 'rgb(96, 104, 108)'],
|
||||
['body', 'color', 'rgb(232, 230, 227)'],
|
||||
['h1', 'color', 'rgb(232, 230, 227)'],
|
||||
['h1 strong', 'color', 'rgb(255, 26, 26)'],
|
||||
]);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,255 @@
|
||||
import {multiline} from '../../support/test-utils';
|
||||
import type {StyleExpectations} from '../globals';
|
||||
|
||||
async function expectStyles(styles: StyleExpectations) {
|
||||
await expectPageStyles(expect, styles);
|
||||
}
|
||||
|
||||
describe('Style override', () => {
|
||||
it('should override user agent style', async () => {
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
' Text',
|
||||
' <a href="#">Link</a>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
});
|
||||
|
||||
await expectStyles([
|
||||
['document', 'background-color', 'rgb(24, 26, 27)'],
|
||||
['document', 'color', 'rgb(232, 230, 227)'],
|
||||
['body', 'background-color', 'rgb(24, 26, 27)'],
|
||||
['body', 'color', 'rgb(232, 230, 227)'],
|
||||
['a', 'color', 'rgb(51, 145, 255)'],
|
||||
]);
|
||||
});
|
||||
|
||||
it('should override static style', async () => {
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
' <style>',
|
||||
' body { background: gray; }',
|
||||
' h1 strong { color: red; }',
|
||||
' </style>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
' <h1>Style <strong>override</strong>!</h1>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
});
|
||||
|
||||
await expectStyles([
|
||||
['document', 'background-color', 'rgb(24, 26, 27)'],
|
||||
['body', 'background-color', 'rgb(96, 104, 108)'],
|
||||
['body', 'color', 'rgb(232, 230, 227)'],
|
||||
['h1', 'color', 'rgb(232, 230, 227)'],
|
||||
['h1 strong', 'color', 'rgb(255, 26, 26)'],
|
||||
]);
|
||||
});
|
||||
|
||||
it('should restore override', async () => {
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
' <h1>Style <strong>override</strong>!</h1>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
});
|
||||
|
||||
await pageUtils.evaluateScript(() => {
|
||||
const styleElement = document.createElement('style');
|
||||
styleElement.classList.add('testcase-style');
|
||||
document.head.append(styleElement);
|
||||
styleElement.sheet!.insertRule('h1 { color: gray }');
|
||||
styleElement.sheet!.insertRule('strong { color: red }');
|
||||
});
|
||||
|
||||
await expectStyles([
|
||||
['h1', 'color', 'rgb(152, 143, 129)'],
|
||||
['h1 strong', 'color', 'rgb(255, 26, 26)'],
|
||||
]);
|
||||
|
||||
await expect(pageUtils.evaluateScript(async () => {
|
||||
const style = document.querySelector('.testcase-style')!;
|
||||
style.nextSibling!.remove();
|
||||
await new Promise((resolve) => setTimeout(resolve));
|
||||
return (style.nextSibling as HTMLStyleElement).classList.contains('darkreader--sync');
|
||||
})).resolves.toBe(true);
|
||||
});
|
||||
|
||||
it('should move override', async () => {
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
' <h1>Some test foor...... <strong>Moving styles</strong>!</h1>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
});
|
||||
|
||||
await pageUtils.evaluateScript(() => {
|
||||
const styleElement = document.createElement('style');
|
||||
styleElement.classList.add('testcase-style');
|
||||
document.head.append(styleElement);
|
||||
styleElement.sheet!.insertRule('h1 { color: gray } ');
|
||||
styleElement.sheet!.insertRule('strong { color: red } ');
|
||||
});
|
||||
|
||||
await expect(pageUtils.evaluateScript(async () => {
|
||||
const style = document.querySelector('.testcase-style')!;
|
||||
document.body.append(style);
|
||||
await new Promise((resolve) => setTimeout(resolve));
|
||||
return (style.nextSibling as HTMLStyleElement).classList.contains('darkreader--sync');
|
||||
})).resolves.toBe(true);
|
||||
});
|
||||
|
||||
it('should remove override', async () => {
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
' <h1>Some test foor...... <strong>Oh uhm removing styles :(</strong>!</h1>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
});
|
||||
|
||||
await pageUtils.evaluateScript(() => {
|
||||
const styleElement = document.createElement('style');
|
||||
styleElement.classList.add('testcase-style');
|
||||
document.head.append(styleElement);
|
||||
styleElement.sheet!.insertRule('h1 { color: gray }');
|
||||
styleElement.sheet!.insertRule('strong { color: red }');
|
||||
});
|
||||
|
||||
await expect(pageUtils.evaluateScript(async () => {
|
||||
const style = document.querySelector('.testcase-style')!;
|
||||
const sibling = style.nextSibling!;
|
||||
style.remove();
|
||||
await new Promise((resolve) => setTimeout(resolve));
|
||||
return sibling.isConnected && !((sibling as HTMLStyleElement).classList.contains('darkreader--sync'));
|
||||
})).resolves.toBe(false);
|
||||
});
|
||||
|
||||
it('should react to updated style', async () => {
|
||||
if (product === 'firefox') {
|
||||
expect(true);
|
||||
return;
|
||||
}
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
' <h1>Some test foor...... <strong>Oh uhm a pink background</strong></h1>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
});
|
||||
|
||||
await pageUtils.evaluateScript(() => {
|
||||
const styleElement = document.createElement('style');
|
||||
styleElement.classList.add('testcase-style');
|
||||
document.head.append(styleElement);
|
||||
styleElement.sheet!.insertRule('h1 { color: gray }');
|
||||
styleElement.sheet!.insertRule('strong { color: red }');
|
||||
});
|
||||
|
||||
await expect(pageUtils.evaluateScript(async () => {
|
||||
const style = document.querySelector('.testcase-style')!;
|
||||
(style as HTMLStyleElement).sheet!.insertRule('html { background-color: pink }');
|
||||
await new Promise((resolve) => setTimeout(resolve));
|
||||
return (style.nextSibling as HTMLStyleElement).sheet!.cssRules[0].cssText;
|
||||
})).resolves.toBe('html { background-color: var(--darkreader-background-ffc0cb, #590010); }');
|
||||
});
|
||||
|
||||
it('should react to a new style', async () => {
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
' <h1>Some test foor...... <strong>Oh uhm what?</strong>!</h1>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
});
|
||||
|
||||
await expect(pageUtils.evaluateScript(async () => {
|
||||
const styleElement = document.createElement('style');
|
||||
styleElement.classList.add('testcase-style');
|
||||
document.head.append(styleElement);
|
||||
styleElement.sheet!.insertRule('h1 { color: pink }');
|
||||
styleElement.sheet!.insertRule('strong { color: orange }');
|
||||
await new Promise((resolve) => setTimeout(resolve));
|
||||
return (styleElement.nextSibling as HTMLStyleElement).sheet!.cssRules.length === 2 && (styleElement.nextSibling as HTMLStyleElement).classList.contains('darkreader--sync');
|
||||
})).resolves.toBe(true);
|
||||
});
|
||||
|
||||
it('should handle defined custom elements', async () => {
|
||||
if (product === 'firefox') {
|
||||
return;
|
||||
}
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
'<custom-element>',
|
||||
'</custom-element>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
});
|
||||
|
||||
pageUtils.evaluateScript(async () => {
|
||||
class CustomElement extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
const shadowRoot = this.attachShadow({mode: 'open'});
|
||||
const style = document.createElement('style');
|
||||
style.textContent = 'p { color: pink }';
|
||||
const paragraph = document.createElement('p');
|
||||
paragraph.textContent = 'Some text content that should be pink.';
|
||||
|
||||
shadowRoot.append(style);
|
||||
shadowRoot.append(paragraph);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('custom-element', CustomElement);
|
||||
});
|
||||
|
||||
await expectStyles([
|
||||
[['custom-element', 'p'], 'color', 'rgb(255, 160, 177)'],
|
||||
]);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user