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(
'',
'',
'',
' ',
'',
'',
' White title - should stay
',
' White subtitle - should change
',
' ',
' ',
'',
'',
),
'/red.html': multiline(
'',
'',
'',
' ',
'',
'',
' Red title - should change
',
' White subtitle - should stay
',
'',
'',
),
'/blue.html': multiline(
'',
'',
'',
' ',
'',
'',
' Blue title - should change
',
' White subtitle - should stay
',
'',
'',
),
});
}
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)'],
]);
});
});