chore: 整理 third-party Dark Reader 目录并移除本地说明文件跟踪
This commit is contained in:
@@ -0,0 +1,82 @@
|
||||
import {multiline} from '../../support/test-utils';
|
||||
import type {StyleExpectations} from '../globals';
|
||||
|
||||
async function loadBasicPage() {
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
' <style>',
|
||||
' h1 { color: red; }',
|
||||
' </style>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
' <h1>E2E test page</h1>',
|
||||
' <p>Text</p>',
|
||||
' <a href="#">Link</a>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
async function expectStyles(styles: StyleExpectations) {
|
||||
await expectPageStyles(expect, styles);
|
||||
}
|
||||
|
||||
describe('Modifying config via Developer tools', () => {
|
||||
it('Modifying config', async () => {
|
||||
await loadBasicPage();
|
||||
|
||||
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)'],
|
||||
['h1', 'color', 'rgb(255, 26, 26)'],
|
||||
['a', 'color', 'rgb(51, 145, 255)'],
|
||||
]);
|
||||
|
||||
await devtoolsUtils.paste([
|
||||
'*',
|
||||
'',
|
||||
'CSS',
|
||||
'h1 {',
|
||||
' background: black;',
|
||||
' color: white;',
|
||||
'}',
|
||||
'',
|
||||
'============================',
|
||||
'',
|
||||
'nonexistent.com',
|
||||
'',
|
||||
'CSS',
|
||||
'h1 {',
|
||||
' color: red;',
|
||||
'}',
|
||||
'',
|
||||
].join('\n'));
|
||||
|
||||
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)'],
|
||||
['h1', 'background-color', 'rgb(0, 0, 0)'],
|
||||
['h1', 'color', 'rgb(255, 255, 255)'],
|
||||
['a', 'color', 'rgb(51, 145, 255)'],
|
||||
]);
|
||||
|
||||
await devtoolsUtils.reset();
|
||||
|
||||
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)'],
|
||||
['h1', 'color', 'rgb(255, 26, 26)'],
|
||||
['a', 'color', 'rgb(51, 145, 255)'],
|
||||
]);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,41 @@
|
||||
import {multiline} from '../../support/test-utils';
|
||||
|
||||
async function loadBasicPage(header = 'E2E test page') {
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
' <style>',
|
||||
' h1 { color: red; }',
|
||||
' </style>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
` <h1>${header}</h1>`,
|
||||
' <p>Text</p>',
|
||||
' <a href="#">Link</a>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
describe('Test environment', () => {
|
||||
it('should turn On/Off', async () => {
|
||||
await loadBasicPage();
|
||||
|
||||
const initialColorScheme = await getColorScheme();
|
||||
const overrideColorScheme = initialColorScheme === 'dark' ? 'light' : 'dark';
|
||||
|
||||
expect(initialColorScheme === 'light' || initialColorScheme === 'dark');
|
||||
if (product === 'firefox') {
|
||||
await expect(backgroundUtils.getColorScheme()).resolves.toBe(initialColorScheme);
|
||||
}
|
||||
|
||||
await emulateColorScheme(overrideColorScheme);
|
||||
await expect(getColorScheme()).resolves.toBe(overrideColorScheme);
|
||||
if (product === 'firefox') {
|
||||
await expect(backgroundUtils.getColorScheme()).resolves.toBe(overrideColorScheme);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
import {timeout} from '../../support/test-utils';
|
||||
|
||||
describe('Export settings', () => {
|
||||
it('Should download file', async () => {
|
||||
await timeout(1000);
|
||||
const p = new Promise<{ok: boolean}>((resolve) => backgroundUtils.onDownload(resolve));
|
||||
await popupUtils.saveFile('example', 'content');
|
||||
expect((await p).ok).toBe(true);
|
||||
if (product === 'firefox') {
|
||||
await timeout(1000);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,241 @@
|
||||
import {multiline} from '../../support/test-utils';
|
||||
import type {StyleExpectations} from '../globals';
|
||||
|
||||
async function loadBasicPage() {
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
' <style>',
|
||||
' h1 { color: red; }',
|
||||
' </style>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
' <h1>E2E test page</h1>',
|
||||
' <p>Text</p>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
async function expectStyles(styles: StyleExpectations) {
|
||||
await expectPageStyles(expect, styles);
|
||||
}
|
||||
|
||||
describe('Correct fixes are chosen', () => {
|
||||
it('If no matching URL found, returns only default fix', async () => {
|
||||
await loadBasicPage();
|
||||
|
||||
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)'],
|
||||
['h1', 'color', 'rgb(255, 26, 26)'],
|
||||
]);
|
||||
|
||||
await devtoolsUtils.paste(multiline(
|
||||
'*',
|
||||
'',
|
||||
'CSS',
|
||||
'body {',
|
||||
' background: navy;',
|
||||
' color: white;',
|
||||
'}',
|
||||
'h1 {',
|
||||
' color: orange;',
|
||||
'}',
|
||||
'',
|
||||
'============================',
|
||||
'',
|
||||
'nonexistent.com',
|
||||
'',
|
||||
'CSS',
|
||||
'body {',
|
||||
' bachground: green;',
|
||||
'}',
|
||||
'',
|
||||
'============================',
|
||||
'',
|
||||
'other.net',
|
||||
'',
|
||||
'CSS',
|
||||
'body {',
|
||||
' bachground: blue;',
|
||||
'}',
|
||||
));
|
||||
|
||||
await expectStyles([
|
||||
['document', 'background-color', 'rgb(24, 26, 27)'],
|
||||
['document', 'color', 'rgb(232, 230, 227)'],
|
||||
['body', 'background-color', 'rgb(0, 0, 128)'],
|
||||
['body', 'color', 'rgb(255, 255, 255)'],
|
||||
['h1', 'color', 'rgb(255, 165, 0)'],
|
||||
]);
|
||||
|
||||
await devtoolsUtils.reset();
|
||||
});
|
||||
|
||||
it('If multiple matching URL patterns found, select the most specific one', async () => {
|
||||
await loadBasicPage();
|
||||
|
||||
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)'],
|
||||
['h1', 'color', 'rgb(255, 26, 26)'],
|
||||
]);
|
||||
|
||||
await devtoolsUtils.paste(multiline(
|
||||
'*',
|
||||
'',
|
||||
'CSS',
|
||||
'body {',
|
||||
' background: navy;',
|
||||
' color: white;',
|
||||
'}',
|
||||
'h1 {',
|
||||
' color: orange;',
|
||||
'}',
|
||||
'',
|
||||
'============================',
|
||||
'',
|
||||
'localhost:8891/',
|
||||
'',
|
||||
'CSS',
|
||||
'body {',
|
||||
' bachground: blue;',
|
||||
'}',
|
||||
'',
|
||||
'============================',
|
||||
'',
|
||||
'localhost:8891',
|
||||
'',
|
||||
'CSS',
|
||||
'body {',
|
||||
' bachground: green;',
|
||||
'}',
|
||||
));
|
||||
|
||||
await expectStyles([
|
||||
['document', 'background-color', 'rgb(24, 26, 27)'],
|
||||
['document', 'color', 'rgb(232, 230, 227)'],
|
||||
['body', 'background-color', 'rgb(0, 0, 128)'],
|
||||
['body', 'color', 'rgb(255, 255, 255)'],
|
||||
['h1', 'color', 'rgb(255, 165, 0)'],
|
||||
]);
|
||||
|
||||
await devtoolsUtils.reset();
|
||||
});
|
||||
|
||||
it('BUG COMPATIBILITY: If multiple matching URL patterns found, the most specific fix is determined by the length of first pattern', async () => {
|
||||
await loadBasicPage();
|
||||
|
||||
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)'],
|
||||
['h1', 'color', 'rgb(255, 26, 26)'],
|
||||
]);
|
||||
|
||||
await devtoolsUtils.paste(multiline(
|
||||
'*',
|
||||
'',
|
||||
'CSS',
|
||||
'body {',
|
||||
' background: navy;',
|
||||
' color: white;',
|
||||
'}',
|
||||
'h1 {',
|
||||
' color: orange;',
|
||||
'}',
|
||||
'',
|
||||
'============================',
|
||||
'',
|
||||
'example.com/loooooooong',
|
||||
'localhost:8891',
|
||||
'',
|
||||
'CSS',
|
||||
'body {',
|
||||
' bachground: blue;',
|
||||
'}',
|
||||
'',
|
||||
'============================',
|
||||
'',
|
||||
'example.com',
|
||||
'localhost:8891/',
|
||||
'',
|
||||
'CSS',
|
||||
'body {',
|
||||
' bachground: green;',
|
||||
'}',
|
||||
));
|
||||
|
||||
await expectStyles([
|
||||
['document', 'background-color', 'rgb(24, 26, 27)'],
|
||||
['document', 'color', 'rgb(232, 230, 227)'],
|
||||
['body', 'background-color', 'rgb(0, 0, 128)'],
|
||||
['body', 'color', 'rgb(255, 255, 255)'],
|
||||
['h1', 'color', 'rgb(255, 165, 0)'],
|
||||
]);
|
||||
|
||||
await devtoolsUtils.reset();
|
||||
});
|
||||
|
||||
it('BUG COMPATIBILITY: If multiple matching URL patterns of the same length are found, select the first one', async () => {
|
||||
await loadBasicPage();
|
||||
|
||||
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)'],
|
||||
['h1', 'color', 'rgb(255, 26, 26)'],
|
||||
]);
|
||||
|
||||
await devtoolsUtils.paste(multiline(
|
||||
'*',
|
||||
'',
|
||||
'CSS',
|
||||
'body {',
|
||||
' background: navy;',
|
||||
' color: white;',
|
||||
'}',
|
||||
'h1 {',
|
||||
' color: orange;',
|
||||
'}',
|
||||
'',
|
||||
'============================',
|
||||
'',
|
||||
'localhost:8891',
|
||||
'',
|
||||
'CSS',
|
||||
'body {',
|
||||
' bachground: blue;',
|
||||
'}',
|
||||
'',
|
||||
'============================',
|
||||
'',
|
||||
'localhost:8891',
|
||||
'',
|
||||
'CSS',
|
||||
'body {',
|
||||
' bachground: green;',
|
||||
'}',
|
||||
));
|
||||
|
||||
await expectStyles([
|
||||
['document', 'background-color', 'rgb(24, 26, 27)'],
|
||||
['document', 'color', 'rgb(232, 230, 227)'],
|
||||
['body', 'background-color', 'rgb(0, 0, 128)'],
|
||||
['body', 'color', 'rgb(255, 255, 255)'],
|
||||
['h1', 'color', 'rgb(255, 165, 0)'],
|
||||
]);
|
||||
|
||||
await devtoolsUtils.reset();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
describe('News', () => {
|
||||
const newsSelector = 'div.news.news--expanded';
|
||||
|
||||
it('should display news', async () => {
|
||||
await backgroundUtils.setNews([{
|
||||
id: 'some',
|
||||
date: '10',
|
||||
url: '/',
|
||||
headline: 'Test news',
|
||||
}]);
|
||||
|
||||
popupUtils.exists(newsSelector);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,180 @@
|
||||
import {multiline} from '../../support/test-utils';
|
||||
import type {StyleExpectations} from '../globals';
|
||||
|
||||
async function expectStyles(styles: StyleExpectations) {
|
||||
await expectPageStyles(expect, styles);
|
||||
}
|
||||
|
||||
async function loadBasicPage() {
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
' <style>',
|
||||
' h1 { color: white; }',
|
||||
' </style>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
' <h1>White title - should stay</h1>',
|
||||
' <h2>White subtitle - should change</h2>',
|
||||
' <iframe id="red" src="/red.html"></iframe>',
|
||||
' <iframe id="blue" src="/blue.html"></iframe>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
'/red.html': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
' <style>',
|
||||
' h1 { color: red; }',
|
||||
' h2 { color: white; }',
|
||||
' </style>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
' <h1>Red title - should change</h1>',
|
||||
' <h2>White subtitle - should stay</h2>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
'/blue.html': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
' <style>',
|
||||
' h1 { color: blue; }',
|
||||
' h2 { color: white; }',
|
||||
' </style>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
' <h1>Blue title - should change</h1>',
|
||||
' <h2>White subtitle - should stay</h2>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
describe('Different paths in URL patterns', () => {
|
||||
it('Different paths upon initial load', async () => {
|
||||
await Promise.all([
|
||||
awaitForEvent('ready-/red.html'),
|
||||
awaitForEvent('ready-/blue.html'),
|
||||
loadBasicPage(),
|
||||
]);
|
||||
|
||||
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)'],
|
||||
['h1', 'color', 'rgb(232, 230, 227)'],
|
||||
|
||||
[['iframe#red', 'document'], 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
[['iframe#red', 'document'], 'color', 'rgb(232, 230, 227)'],
|
||||
[['iframe#red', 'body'], 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
[['iframe#red', 'body'], 'color', 'rgb(232, 230, 227)'],
|
||||
[['iframe#red', 'h1'], 'color', 'rgb(255, 26, 26)'],
|
||||
|
||||
[['iframe#blue', 'document'], 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
[['iframe#blue', 'document'], 'color', 'rgb(232, 230, 227)'],
|
||||
[['iframe#blue', 'body'], 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
[['iframe#blue', 'body'], 'color', 'rgb(232, 230, 227)'],
|
||||
[['iframe#blue', 'h1'], 'color', 'rgb(51, 125, 255)'],
|
||||
]);
|
||||
|
||||
await devtoolsUtils.paste([
|
||||
'*',
|
||||
'',
|
||||
'CSS',
|
||||
'body {',
|
||||
' background: black',
|
||||
' color: white',
|
||||
'}',
|
||||
'',
|
||||
'============================',
|
||||
'',
|
||||
'*/red.html',
|
||||
'',
|
||||
'CSS',
|
||||
'body {',
|
||||
' background: black',
|
||||
'}',
|
||||
'h1 {',
|
||||
' color: indigo;',
|
||||
'}',
|
||||
'',
|
||||
'============================',
|
||||
'',
|
||||
'*/blue.html',
|
||||
'',
|
||||
'CSS',
|
||||
'body {',
|
||||
' background: black',
|
||||
'}',
|
||||
'h1 {',
|
||||
' color: navy;',
|
||||
'}',
|
||||
'',
|
||||
'============================',
|
||||
'',
|
||||
'nonexistent.com',
|
||||
'',
|
||||
'CSS',
|
||||
'body {',
|
||||
' background: purple',
|
||||
'}',
|
||||
'',
|
||||
].join('\n'));
|
||||
|
||||
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)'],
|
||||
['h1', 'color', 'rgb(232, 230, 227)'],
|
||||
['h2', 'color', 'rgb(232, 230, 227)'],
|
||||
|
||||
[['iframe#red', 'document'], 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
[['iframe#red', 'document'], 'color', 'rgb(232, 230, 227)'],
|
||||
[['iframe#red', 'body'], 'background-color', 'rgb(0, 0, 0)'],
|
||||
[['iframe#red', 'body'], 'color', 'rgb(232, 230, 227)'],
|
||||
[['iframe#red', 'h1'], 'color', 'rgb(75, 0, 130)'],
|
||||
|
||||
[['iframe#blue', 'document'], 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
[['iframe#blue', 'document'], 'color', 'rgb(232, 230, 227)'],
|
||||
[['iframe#blue', 'body'], 'background-color', 'rgb(0, 0, 0)'],
|
||||
[['iframe#blue', 'body'], 'color', 'rgb(232, 230, 227)'],
|
||||
[['iframe#blue', 'h1'], 'color', 'rgb(0, 0, 128)'],
|
||||
]);
|
||||
|
||||
const redPromise = awaitForEvent('darkreader-dynamic-theme-ready-/red.html');
|
||||
const bluePromise = awaitForEvent('darkreader-dynamic-theme-ready-/blue.html');
|
||||
await Promise.all([
|
||||
redPromise,
|
||||
bluePromise,
|
||||
devtoolsUtils.reset(),
|
||||
]);
|
||||
|
||||
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)'],
|
||||
['h1', 'color', 'rgb(232, 230, 227)'],
|
||||
|
||||
[['iframe#red', 'document'], 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
[['iframe#red', 'document'], 'color', 'rgb(232, 230, 227)'],
|
||||
[['iframe#red', 'body'], 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
[['iframe#red', 'body'], 'color', 'rgb(232, 230, 227)'],
|
||||
[['iframe#red', 'h1'], 'color', 'rgb(255, 26, 26)'],
|
||||
|
||||
[['iframe#blue', 'document'], 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
[['iframe#blue', 'document'], 'color', 'rgb(232, 230, 227)'],
|
||||
[['iframe#blue', 'body'], 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
[['iframe#blue', 'body'], 'color', 'rgb(232, 230, 227)'],
|
||||
[['iframe#blue', 'h1'], 'color', 'rgb(51, 125, 255)'],
|
||||
]);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,67 @@
|
||||
import {multiline} from '../../support/test-utils';
|
||||
import type {StyleExpectations} from '../globals';
|
||||
|
||||
async function expectStyles(styles: StyleExpectations) {
|
||||
await expectPageStyles(expect, styles);
|
||||
}
|
||||
|
||||
describe('Custom HTML elements', () => {
|
||||
it('Asynchronous define', async () => {
|
||||
// Temporarily disable this test on Firefox
|
||||
if (product === 'firefox') {
|
||||
expect(true);
|
||||
return;
|
||||
}
|
||||
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
'</head>',
|
||||
'<body></body>',
|
||||
'</html>',
|
||||
),
|
||||
});
|
||||
|
||||
await pageUtils.evaluateScript(async () => {
|
||||
class ElementWitAsync extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
const root = this.attachShadow({mode: 'open'});
|
||||
setTimeout(() => root.innerHTML =
|
||||
'<style>\
|
||||
p { color: red; }\
|
||||
</style>\
|
||||
<p>\
|
||||
Should be red initially and then change to green.\
|
||||
</p>'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('elem-with-async', ElementWitAsync);
|
||||
const elem = document.createElement('elem-with-async');
|
||||
document.body.appendChild(elem);
|
||||
});
|
||||
|
||||
await expectStyles([
|
||||
[['elem-with-async', 'p'], 'color', 'rgb(255, 26, 26)'],
|
||||
]);
|
||||
|
||||
await devtoolsUtils.paste(multiline(
|
||||
'*',
|
||||
'',
|
||||
'CSS',
|
||||
'p {',
|
||||
' color: green !important;',
|
||||
'}',
|
||||
));
|
||||
|
||||
await expectStyles([
|
||||
[['elem-with-async', 'p'], 'color', 'rgb(0, 128, 0)'],
|
||||
]);
|
||||
|
||||
await devtoolsUtils.reset();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,257 @@
|
||||
import {multiline, timeout} from '../../support/test-utils';
|
||||
import type {StyleExpectations} from '../globals';
|
||||
|
||||
async function expectStyles(styles: StyleExpectations) {
|
||||
await expectPageStyles(expect, styles);
|
||||
}
|
||||
|
||||
async function loadBasicPage(header: string) {
|
||||
await loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
' <style>',
|
||||
' h1 { color: red; }',
|
||||
' </style>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
` <h1>${header}</h1>`,
|
||||
' <p>Text</p>',
|
||||
' <a href="#">Link</a>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
describe('Toggling the extension', () => {
|
||||
const automationMenuSelector = '.header__more-settings-button';
|
||||
const automationSystemSelector = '.header__more-settings__system-dark-mode__checkbox .checkbox__input';
|
||||
|
||||
it('should turn On/Off', async () => {
|
||||
await loadBasicPage('Toggle on/off');
|
||||
|
||||
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)'],
|
||||
['h1', 'color', 'rgb(255, 26, 26)'],
|
||||
['a', 'color', 'rgb(51, 145, 255)'],
|
||||
]);
|
||||
|
||||
await popupUtils.click('.toggle__off');
|
||||
await timeout(500);
|
||||
|
||||
await expectStyles([
|
||||
['document', 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
['document', 'color', 'rgb(0, 0, 0)'],
|
||||
['body', 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
['body', 'color', 'rgb(0, 0, 0)'],
|
||||
['h1', 'color', 'rgb(255, 0, 0)'],
|
||||
['a', 'color', 'rgb(0, 0, 238)'],
|
||||
]);
|
||||
|
||||
await popupUtils.click('.toggle__on');
|
||||
await timeout(500);
|
||||
|
||||
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)'],
|
||||
['h1', 'color', 'rgb(255, 26, 26)'],
|
||||
['a', 'color', 'rgb(51, 145, 255)'],
|
||||
]);
|
||||
});
|
||||
|
||||
it('should follow system color scheme', async () => {
|
||||
await loadBasicPage('Automation (color scheme)');
|
||||
|
||||
|
||||
await emulateColorScheme('light');
|
||||
|
||||
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)'],
|
||||
['h1', 'color', 'rgb(255, 26, 26)'],
|
||||
['a', 'color', 'rgb(51, 145, 255)'],
|
||||
]);
|
||||
|
||||
await popupUtils.click(automationMenuSelector);
|
||||
await popupUtils.click(automationSystemSelector);
|
||||
|
||||
await expectStyles([
|
||||
['document', 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
['document', 'color', 'rgb(0, 0, 0)'],
|
||||
['body', 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
['body', 'color', 'rgb(0, 0, 0)'],
|
||||
['h1', 'color', 'rgb(255, 0, 0)'],
|
||||
['a', 'color', 'rgb(0, 0, 238)'],
|
||||
]);
|
||||
if ((await backgroundUtils.getManifest()).manifest_version === 3) {
|
||||
expect(await backgroundUtils.getChromeStorage('local', ['system-color-state'])).toEqual({
|
||||
'system-color-state': {wasLastColorSchemeDark: false},
|
||||
});
|
||||
}
|
||||
|
||||
await emulateColorScheme('dark');
|
||||
|
||||
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)'],
|
||||
['h1', 'color', 'rgb(255, 26, 26)'],
|
||||
['a', 'color', 'rgb(51, 145, 255)'],
|
||||
]);
|
||||
|
||||
await emulateColorScheme('light');
|
||||
|
||||
await expectStyles([
|
||||
['document', 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
['document', 'color', 'rgb(0, 0, 0)'],
|
||||
['body', 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
['body', 'color', 'rgb(0, 0, 0)'],
|
||||
['h1', 'color', 'rgb(255, 0, 0)'],
|
||||
['a', 'color', 'rgb(0, 0, 238)'],
|
||||
]);
|
||||
|
||||
await popupUtils.click(automationSystemSelector);
|
||||
|
||||
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)'],
|
||||
['h1', 'color', 'rgb(255, 26, 26)'],
|
||||
['a', 'color', 'rgb(51, 145, 255)'],
|
||||
]);
|
||||
|
||||
await emulateColorScheme('dark');
|
||||
});
|
||||
|
||||
// Note: this test is relevant only to Firefox and Thunderbird
|
||||
it('should ignore color watcher messages from subframes', async () => {
|
||||
const darkPageExpectations: StyleExpectations = [
|
||||
['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)'],
|
||||
['h1', 'color', 'rgb(255, 26, 26)'],
|
||||
['a', 'color', 'rgb(51, 145, 255)'],
|
||||
];
|
||||
|
||||
const lightPageExpectations: StyleExpectations = [
|
||||
['document', 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
['document', 'color', 'rgb(0, 0, 0)'],
|
||||
['body', 'background-color', 'rgba(0, 0, 0, 0)'],
|
||||
['body', 'color', 'rgb(0, 0, 0)'],
|
||||
['h1', 'color', 'rgb(255, 0, 0)'],
|
||||
['a', 'color', 'rgb(0, 0, 238)'],
|
||||
];
|
||||
|
||||
const darkSubframePageExpectations: StyleExpectations = [
|
||||
[['iframe', 'h1'], 'color', 'rgb(255, 26, 26)'],
|
||||
[['iframe', 'a'], 'color', 'rgb(51, 145, 255)'],
|
||||
];
|
||||
|
||||
const lightSubframePageExpectations: StyleExpectations = [
|
||||
[['iframe', 'h1'], 'color', 'rgb(255, 0, 0)'],
|
||||
[['iframe', 'a'], 'color', 'rgb(0, 0, 238)'],
|
||||
];
|
||||
|
||||
let loadSubframe: () => void = () => void(0);
|
||||
const loadCompleted = loadTestPage({
|
||||
'/': multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
' <style>',
|
||||
' h1 { color: red; }',
|
||||
' </style>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
` <h1>Color scheme detector</h1>`,
|
||||
' <p>Text</p>',
|
||||
' <a href="#">Link</a>',
|
||||
' <iframe src="/subframe.html" style="color-scheme: light"></iframe>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
'/subframe.html': async (_, res) => {
|
||||
res.statusCode = 200;
|
||||
res.setHeader('Content-Type', 'text/html');
|
||||
|
||||
await new Promise<void>((resolve) => loadSubframe = resolve);
|
||||
|
||||
res.end(
|
||||
multiline(
|
||||
'<!DOCTYPE html>',
|
||||
'<html>',
|
||||
'<head>',
|
||||
' <style>',
|
||||
' h1 { color: red; }',
|
||||
' </style>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
' <h1>Header</h1>',
|
||||
' <p>Text</p>',
|
||||
' <a href="#">Link</a>',
|
||||
'</body>',
|
||||
'</html>',
|
||||
),
|
||||
'utf8'
|
||||
);
|
||||
},
|
||||
}, {
|
||||
waitUntil: 'domcontentloaded',
|
||||
});
|
||||
|
||||
await awaitForEvent('ready-/');
|
||||
|
||||
await emulateColorScheme('dark');
|
||||
await expectStyles(darkPageExpectations);
|
||||
|
||||
await popupUtils.click(automationMenuSelector);
|
||||
await popupUtils.click(automationSystemSelector);
|
||||
|
||||
await expectStyles(darkPageExpectations);
|
||||
|
||||
// Finalize page load
|
||||
loadSubframe();
|
||||
// Top-level page may finish loading only after the subframe has loaded
|
||||
await loadCompleted;
|
||||
|
||||
// Ensure that the subframe received its styles
|
||||
await expectStyles(darkSubframePageExpectations);
|
||||
// Ensure that the parent frame retained its styles
|
||||
await expectStyles(darkPageExpectations);
|
||||
|
||||
await emulateColorScheme('light');
|
||||
|
||||
await expectStyles(lightPageExpectations);
|
||||
await expectStyles(lightSubframePageExpectations);
|
||||
|
||||
await popupUtils.click(automationSystemSelector);
|
||||
|
||||
await expectStyles(darkPageExpectations);
|
||||
|
||||
await emulateColorScheme('dark');
|
||||
});
|
||||
|
||||
it('should have new design button on desktop', async () => {
|
||||
await devtoolsUtils.click('.settings-tab-panel__button:nth-child(4)');
|
||||
expect(await devtoolsUtils.exists('.preview-design-button'));
|
||||
});
|
||||
|
||||
it('dynamic themes', async () => {
|
||||
await loadBasicPage('Dynamic styles');
|
||||
|
||||
const numStyles = await pageUtils.evaluateScript(() => document.styleSheets.length);
|
||||
expect(numStyles).toBe(1);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user