1import { describe, expect, it } from "vite-plus/test";
2
3import "~/index.css";
4import { applyAppearanceFontVariables } from "./appearanceFonts";
5
6function renderedFontSize(style: (probe: HTMLElement) => void): string {
7 const probe = document.createElement("div");
8 style(probe);
9 document.body.append(probe);
10 try {
11 return getComputedStyle(probe).fontSize;
12 } finally {
13 probe.remove();
14 }
15}
16
17const composerFontSize = () =>
18 renderedFontSize((probe) => {
19 // The composer editor's own size class.
20 probe.className = "text-(length:--font-size-prompt,var(--text-sm))";
21 });
22
23const touchComposerFontSize = () =>
24 renderedFontSize((probe) => {
25 probe.style.fontSize = "var(--font-size-prompt-touch)";
26 });
27
28describe("applyAppearanceFontVariables", () => {
29 it("sizes the composer from the interface size until fonts are set separately", () => {
30 const root = document.documentElement;
31 const style = root.getAttribute("style");
32 const preferences = {
33 sans: "",
34 code: "",
35 composer: "",
36 sizeInterface: 20,
37 sizePrompt: 14,
38 sizeCode: 13,
39 smoothing: true,
40 };
41 try {
42 applyAppearanceFontVariables(root, { ...preferences, separate: false });
43 expect(composerFontSize()).toBe("17.5px");
44 expect(touchComposerFontSize()).toBe("17.5px");
45
46 applyAppearanceFontVariables(root, { ...preferences, separate: true });
47 expect(composerFontSize()).toBe("14px");
48 // iOS zooms into inputs under 16px.
49 expect(touchComposerFontSize()).toBe("16px");
50 } finally {
51 if (style === null) root.removeAttribute("style");
52 else root.setAttribute("style", style);
53 }
54 });
55
56 it("widens the numbered-list gutter only when the interface font's marker would clip", () => {
57 const root = document.documentElement;
58 const style = root.getAttribute("style");
59 const gutter = (sans: string) => {
60 applyAppearanceFontVariables(root, {
61 sans,
62 code: "",
63 composer: "",
64 sizeInterface: 16,
65 sizePrompt: 14,
66 sizeCode: 13,
67 smoothing: true,
68 separate: false,
69 });
70 const markdown = document.createElement("div");
71 markdown.className = "chat-markdown";
72 markdown.style.fontSize = "14px";
73 const list = document.createElement("ol");
74 markdown.append(list);
75 document.body.append(markdown);
76 try {
77 return Number.parseFloat(getComputedStyle(list).paddingInlineStart);
78 } finally {
79 markdown.remove();
80 }
81 };
82 try {
83 // `0. ` in a 14px monospace font is about 25px, past the 20px default.
84 expect(gutter("monospace")).toBeGreaterThan(24);
85 expect(gutter("sans-serif")).toBe(20);
86 } finally {
87 if (style === null) root.removeAttribute("style");
88 else root.setAttribute("style", style);
89 }
90 });
91});