181 lines
6.4 KiB
TypeScript
181 lines
6.4 KiB
TypeScript
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)'],
|
|
]);
|
|
});
|
|
});
|