update

tests/unit/renderer/styles/scrollbar-standard-props-firefox-only.test.ts

@@ -0,0 +1,114 @@
+// tests/unit/renderer/styles/scrollbar-standard-props-firefox-only.test.ts
+//
+// 行为锁(audit-r250,2026-10-21):globals.css 里 `scrollbar-color` /
+// `scrollbar-width: thin` 这类**标准滚动条属性**只允许出现在
+// `@supports (-moz-appearance: none)`(≈ Firefox-only)块里。
+//
+// 为什么:这两个属性一旦在祖先(html)上生效,就会**继承**到每个内部滚动
+// 容器(侧栏列表 / 笔记编辑器 / Reader / 设置抽屉 / 搜索面板)。
+// Chromium 的规则是:scrollbar-color 不是 auto 时,UA 改用「标准滚动条」
+// 渲染并**忽略整套 ::-webkit-scrollbar 规则** —— 于是 r143 校准到 3:1 的
+// --scrollbar-thumb-rgb 整套主题从来没生效,用户看到的是 Windows 原生
+// 17px 滚动条(▲▼ 箭头 + 浅灰 thumb),暗色主题下尤其刺眼,还白占 9px 宽度。
+//
+// 实测(Chromium 124 / Electron 30,真机 CDP 探针):
+//   scrollbar-color 继承中 → 滚动条 17px
+//   scrollbar-color: auto   → 滚动条  8px(::-webkit-scrollbar 生效)
+//
+// 形态:源码字面解析(css-tree 不在 devDeps ⇒ 注释剥离 + 括号配平)。
+// 注释先剥掉 ⇒ 本文件/globals.css 注释里出现 "scrollbar-color" 字样不会误判。
+// 读文件走 process.cwd()(jsdom 环境下 fileURLToPath(import.meta.url) 不可靠,
+// 见 r236 同族测试)。
+
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+import { describe, expect, it } from 'vitest';
+
+const FIREFOX_ONLY_HEADER = '@supports (-moz-appearance: none)';
+
+/** 剥注释后的 globals.css 全文 */
+function cssWithoutComments(): string {
+  return readFileSync(join(process.cwd(), 'src/renderer/src/styles/globals.css'), 'utf8').replace(
+    /\/\*[\s\S]*?\*\//g,
+    '',
+  );
+}
+
+interface BlockRange {
+  /** 块内容起止(含头不含尾),用于「某次出现是否落在块内」的区间判定 */
+  start: number;
+  end: number;
+  body: string;
+}
+
+/** 按括号配平取出 `header` 之后那个块的正文;找不到返回 null */
+function extractBlock(css: string, header: string): BlockRange | null {
+  const headerIdx = css.indexOf(header);
+  if (headerIdx < 0) return null;
+  const open = css.indexOf('{', headerIdx + header.length);
+  if (open < 0) return null;
+  let depth = 0;
+  for (let i = open; i < css.length; i += 1) {
+    if (css[i] === '{') depth += 1;
+    else if (css[i] === '}') {
+      depth -= 1;
+      if (depth === 0) return { start: open + 1, end: i, body: css.slice(open + 1, i) };
+    }
+  }
+  return null;
+}
+
+/** 全文里某个 token 的所有出现位置 */
+function occurrences(css: string, token: string): number[] {
+  const out: number[] = [];
+  let idx = css.indexOf(token);
+  while (idx >= 0) {
+    out.push(idx);
+    idx = css.indexOf(token, idx + token.length);
+  }
+  return out;
+}
+
+describe('标准滚动条属性必须收在 Firefox-only 块里(r250 行为锁)', () => {
+  const css = cssWithoutComments();
+
+  it('Firefox-only 块存在,且带 scrollbar-color + scrollbar-width: thin', () => {
+    const block = extractBlock(css, FIREFOX_ONLY_HEADER);
+    expect(block, `globals.css 必须有 ${FIREFOX_ONLY_HEADER} 块承载标准滚动条属性`).not.toBeNull();
+    expect(block?.body).toMatch(/scrollbar-color\s*:/);
+    expect(block?.body).toMatch(/scrollbar-width\s*:\s*thin/);
+  });
+
+  it('任何 scrollbar-color 声明都落在 Firefox-only 块内(Chromium 不再被劫持)', () => {
+    const block = extractBlock(css, FIREFOX_ONLY_HEADER);
+    expect(block).not.toBeNull();
+    const outside = occurrences(css, 'scrollbar-color').filter(
+      (i) => i < block!.start || i >= block!.end,
+    );
+    expect(
+      outside.length,
+      'scrollbar-color 是可继承属性,漏在块外会继承到所有内部滚动容器,' +
+        'Chromium 随即忽略 ::-webkit-scrollbar ⇒ 用户看到 Windows 原生滚动条',
+    ).toBe(0);
+  });
+
+  it('任何 scrollbar-width: thin 声明都落在 Firefox-only 块内', () => {
+    const block = extractBlock(css, FIREFOX_ONLY_HEADER);
+    expect(block).not.toBeNull();
+    const thinPositions = occurrences(css, 'scrollbar-width').filter((i) =>
+      /scrollbar-width\s*:\s*thin/.test(css.slice(i, i + 40)),
+    );
+    const outside = thinPositions.filter((i) => i < block!.start || i >= block!.end);
+    expect(outside.length, 'scrollbar-width: thin 落在块外同样会让 Chromium 走标准滚动条').toBe(0);
+  });
+
+  it('::-webkit-scrollbar 主题仍在(8px 细滚动条 + token 着色没被顺手删)', () => {
+    // Chromium 下真正生效的就是这一套 —— 它被忽略等于主题全废
+    expect(css).toMatch(/::-webkit-scrollbar\s*\{[^}]*width\s*:\s*8px/);
+    expect(css).toMatch(
+      /::-webkit-scrollbar-thumb\s*\{[^}]*background\s*:\s*rgb\(var\(--scrollbar-thumb-rgb\)\)/,
+    );
+    expect(css).toMatch(/--scrollbar-thumb-rgb\s*:/);
+  });
+});