feat(look): en akse mere — hvordan det læses, ikke hvor lyst det er
Fire udseender ved siden af de fem temaer: Verdande, Rolig (serif, mere luft), Tæt (flere rækker, mindre luft) og Terminal (én bredde til det hele). De ganges ud til tyve udseender fra otte små blokke CSS frem for at kræve en blok hver. To akser, fordi det er to spørgsmål. Den, der vil have en serif om natten, skal ikke opgive den mørke palet for at få den — og prøven holder netop det fast: at vælge en skrift må ikke trække temaet med sig. Udseendet sættes før første optegning, ligesom temaet. Ellers bliver siden sat op i én skrift og derefter i en anden, og det er et synligt spring. Det er også det ærlige svar på at ligne noget andet. Standarden er bevidst genkendelig — det var det, der blev bedt om — men et program med ét muligt udseende har lånt en form, det ikke kan give tilbage. Med udseender er ligheden en indstilling blandt flere frem for det eneste, det kan være. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
1bbae698d5
commit
90bdf4b725
@@ -2045,3 +2045,40 @@ test('en note kan deles med et projekts folk, og tages tilbage igen', async ({ p
|
||||
|
||||
expect(trouble).toEqual([]);
|
||||
});
|
||||
|
||||
test('udseendet kan skiftes uafhængigt af temaet, og overlever en genindlæsning', async ({
|
||||
page
|
||||
}) => {
|
||||
const trouble = watchForTrouble(page);
|
||||
await page.goto('/indstillinger');
|
||||
|
||||
const face = () =>
|
||||
page.evaluate(() => getComputedStyle(document.body).fontFamily);
|
||||
const ground = () =>
|
||||
page.evaluate(() => getComputedStyle(document.body).backgroundColor);
|
||||
|
||||
const startFace = await face();
|
||||
await page.getByRole('button', { name: /^Rolig/ }).click();
|
||||
const serif = await face();
|
||||
expect(serif, 'skriften skiftede ikke').not.toBe(startFace);
|
||||
expect(serif.toLowerCase()).toContain('serif');
|
||||
|
||||
// The other axis is untouched: choosing a face must not drag the palette with
|
||||
// it. That is the whole reason they are two settings and not one list.
|
||||
const darkGround = await ground();
|
||||
await page.getByRole('button', { name: /^Papir/ }).click();
|
||||
expect(await ground(), 'temaet skiftede ikke').not.toBe(darkGround);
|
||||
expect(await face(), 'temaet ændrede skriften').toBe(serif);
|
||||
|
||||
// And it is on before the first paint, not applied afterwards — otherwise the
|
||||
// page is laid out once in one face and again in another.
|
||||
await page.reload();
|
||||
expect(await face()).toBe(serif);
|
||||
expect(await page.evaluate(() => document.documentElement.dataset.look)).toBe('rolig');
|
||||
|
||||
// Back to the default, which carries no attribute at all.
|
||||
await page.getByRole('button', { name: /^Verdande/ }).click();
|
||||
expect(await page.evaluate(() => document.documentElement.dataset.look)).toBeUndefined();
|
||||
|
||||
expect(trouble).toEqual([]);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user