SubMiner/src/renderer/subtitle-render.test.ts

import test from 'node:test';
import assert from 'node:assert/strict';
import fs from 'node:fs';
import path from 'node:path';

import type { MergedToken } from '../types';
import { PartOfSpeech } from '../types.js';
import {
  alignTokensToSourceText,
  buildSubtitleTokenHoverRanges,
  computeWordClass,
  createSubtitleRenderer,
  getFrequencyRankLabelForToken,
  getJlptLevelLabelForToken,
  normalizeSubtitle,
  sanitizeSubtitleHoverTokenColor,
  shouldRenderTokenizedSubtitle,
} from './subtitle-render.js';
import { createRendererState } from './state.js';

class FakeTextNode {
  constructor(public textContent: string) {}
}

class FakeDocumentFragment {
  childNodes: Array<FakeElement | FakeTextNode> = [];

  appendChild(
    child: FakeElement | FakeTextNode | FakeDocumentFragment,
  ): FakeElement | FakeTextNode | FakeDocumentFragment {
    if (child instanceof FakeDocumentFragment) {
      this.childNodes.push(...child.childNodes);
      child.childNodes = [];
      return child;
    }

    this.childNodes.push(child);
    return child;
  }
}

class FakeStyleDeclaration {
  private values = new Map<string, string>();

  setProperty(name: string, value: string) {
    this.values.set(name, value);
  }
}

class FakeElement {
  childNodes: Array<FakeElement | FakeTextNode> = [];
  dataset: Record<string, string> = {};
  style = new FakeStyleDeclaration();
  className = '';
  private ownTextContent = '';

  constructor(public tagName: string) {}

  appendChild(
    child: FakeElement | FakeTextNode | FakeDocumentFragment,
  ): FakeElement | FakeTextNode | FakeDocumentFragment {
    if (child instanceof FakeDocumentFragment) {
      this.childNodes.push(...child.childNodes);
      child.childNodes = [];
      return child;
    }

    this.childNodes.push(child);
    return child;
  }

  set textContent(value: string) {
    this.ownTextContent = value;
    this.childNodes = [];
  }

  get textContent(): string {
    if (this.childNodes.length === 0) {
      return this.ownTextContent;
    }

    return this.childNodes
      .map((child) => (child instanceof FakeTextNode ? child.textContent : child.textContent))
      .join('');
  }

  set innerHTML(value: string) {
    if (value === '') {
      this.childNodes = [];
      this.ownTextContent = '';
    }
  }

  replaceChildren(): void {
    this.childNodes = [];
    this.ownTextContent = '';
  }

  cloneNode(_deep: boolean): FakeElement {
    return new FakeElement(this.tagName);
  }
}

function installFakeDocument() {
  const previousDocument = (globalThis as { document?: unknown }).document;

  Object.defineProperty(globalThis, 'document', {
    configurable: true,
    value: {
      createDocumentFragment: () => new FakeDocumentFragment(),
      createElement: (tagName: string) => new FakeElement(tagName),
      createTextNode: (text: string) => new FakeTextNode(text),
    },
  });

  return () => {
    Object.defineProperty(globalThis, 'document', {
      configurable: true,
      value: previousDocument,
    });
  };
}

function collectWordNodes(root: FakeElement): FakeElement[] {
  return root.childNodes.filter(
    (child): child is FakeElement =>
      child instanceof FakeElement && child.className.includes('word'),
  );
}

function createToken(overrides: Partial<MergedToken>): MergedToken {
  return {
    surface: '',
    reading: '',
    headword: '',
    startPos: 0,
    endPos: 0,
    partOfSpeech: PartOfSpeech.other,
    isMerged: true,
    isKnown: false,
    isNPlusOneTarget: false,
    ...overrides,
  };
}

function extractClassBlock(cssText: string, selector: string): string {
  const ruleRegex = /([^{}]+)\{([^}]*)\}/g;
  let match: RegExpExecArray | null = null;
  let fallbackBlock = '';
  const normalizedSelector = normalizeCssSelector(selector);

  while ((match = ruleRegex.exec(cssText)) !== null) {
    const selectorsBlock = match[1]?.trim() ?? '';
    const selectorBlock = match[2] ?? '';

    const selectors = splitCssSelectors(selectorsBlock);

    if (selectors.some((entry) => normalizeCssSelector(entry) === normalizedSelector)) {
      if (selectors.length === 1) {
        return selectorBlock;
      }

      if (!fallbackBlock) {
        fallbackBlock = selectorBlock;
      }
    }
  }

  if (fallbackBlock) {
    return fallbackBlock;
  }

  return '';
}

function splitCssSelectors(selectorsBlock: string): string[] {
  const selectors: string[] = [];
  let current = '';
  let parenDepth = 0;

  for (const char of selectorsBlock) {
    if (char === '(') {
      parenDepth += 1;
      current += char;
      continue;
    }

    if (char === ')') {
      parenDepth = Math.max(0, parenDepth - 1);
      current += char;
      continue;
    }

    if (char === ',' && parenDepth === 0) {
      const trimmed = current.trim();
      if (trimmed.length > 0) {
        selectors.push(trimmed);
      }
      current = '';
      continue;
    }

    current += char;
  }

  const trimmed = current.trim();
  if (trimmed.length > 0) {
    selectors.push(trimmed);
  }

  return selectors;
}

function normalizeCssSelector(selector: string): string {
  return selector
    .replace(/\s+/g, ' ')
    .replace(/\(\s+/g, '(')
    .replace(/\s+\)/g, ')')
    .replace(/\s*,\s*/g, ', ')
    .trim();
}

test('computeWordClass preserves known and n+1 classes while adding JLPT classes', () => {
  const knownJlpt = createToken({
    isKnown: true,
    jlptLevel: 'N1',
    surface: '猫',
  });
  const nPlusOneJlpt = createToken({
    isNPlusOneTarget: true,
    jlptLevel: 'N2',
    surface: '犬',
  });

  assert.equal(computeWordClass(knownJlpt), 'word word-known word-jlpt-n1');
  assert.equal(computeWordClass(nPlusOneJlpt), 'word word-n-plus-one word-jlpt-n2');
});

test('computeWordClass applies name-match class ahead of known, n+1, frequency, and JLPT classes', () => {
  const token = createToken({
    isKnown: true,
    isNPlusOneTarget: true,
    jlptLevel: 'N2',
    frequencyRank: 10,
    surface: 'アクア',
  }) as MergedToken & { isNameMatch?: boolean };
  token.isNameMatch = true;

  assert.equal(
    computeWordClass(token, {
      enabled: true,
      topX: 100,
      mode: 'single',
      singleColor: '#000000',
      bandedColors: ['#000000', '#000000', '#000000', '#000000', '#000000'] as const,
    }),
    'word word-name-match',
  );
});

test('computeWordClass skips name-match class when disabled', () => {
  const token = createToken({
    surface: 'アクア',
  }) as MergedToken & { isNameMatch?: boolean };
  token.isNameMatch = true;

  assert.equal(
    computeWordClass(token, {
      nameMatchEnabled: false,
      enabled: true,
      topX: 100,
      mode: 'single',
      singleColor: '#000000',
      bandedColors: ['#000000', '#000000', '#000000', '#000000', '#000000'] as const,
    }),
    'word',
  );
});

test('computeWordClass keeps known and N+1 color classes exclusive over frequency classes', () => {
  const known = createToken({
    isKnown: true,
    frequencyRank: 10,
    surface: '既知',
  });
  const nPlusOne = createToken({
    isNPlusOneTarget: true,
    frequencyRank: 10,
    surface: '目標',
  });
  const frequency = createToken({
    frequencyRank: 10,
    surface: '頻度',
  });

  assert.equal(
    computeWordClass(known, {
      enabled: true,
      topX: 100,
      mode: 'single',
      singleColor: '#000000',
      bandedColors: ['#000000', '#000000', '#000000', '#000000', '#000000'] as const,
    }),
    'word word-known',
  );
  assert.equal(
    computeWordClass(nPlusOne, {
      enabled: true,
      topX: 100,
      mode: 'single',
      singleColor: '#000000',
      bandedColors: ['#000000', '#000000', '#000000', '#000000', '#000000'] as const,
    }),
    'word word-n-plus-one',
  );
  assert.equal(
    computeWordClass(frequency, {
      enabled: true,
      topX: 100,
      mode: 'single',
      singleColor: '#000000',
      bandedColors: ['#000000', '#000000', '#000000', '#000000', '#000000'] as const,
    }),
    'word word-frequency-single',
  );
});

test('applySubtitleStyle sets subtitle name-match color variable', () => {
  const restoreDocument = installFakeDocument();
  try {
    const subtitleRoot = new FakeElement('div');
    const subtitleContainer = new FakeElement('div');
    const secondarySubRoot = new FakeElement('div');
    const secondarySubContainer = new FakeElement('div');
    const ctx = {
      state: createRendererState(),
      dom: {
        subtitleRoot,
        subtitleContainer,
        secondarySubRoot,
        secondarySubContainer,
      },
    } as never;

    const renderer = createSubtitleRenderer(ctx);
    renderer.applySubtitleStyle({
      nameMatchColor: '#f5bde6',
    } as never);

    assert.equal(
      (subtitleRoot.style as unknown as { values?: Map<string, string> }).values?.get(
        '--subtitle-name-match-color',
      ),
      '#f5bde6',
    );
  } finally {
    restoreDocument();
  }
});

test('applySubtitleStyle stores secondary background styles in hover-aware css variables', () => {
  const restoreDocument = installFakeDocument();
  try {
    const subtitleRoot = new FakeElement('div');
    const subtitleContainer = new FakeElement('div');
    const secondarySubRoot = new FakeElement('div');
    const secondarySubContainer = new FakeElement('div');
    const ctx = {
      state: createRendererState(),
      dom: {
        subtitleRoot,
        subtitleContainer,
        secondarySubRoot,
        secondarySubContainer,
      },
    } as never;

    const renderer = createSubtitleRenderer(ctx);
    renderer.applySubtitleStyle({
      secondary: {
        backgroundColor: 'rgba(20, 22, 34, 0.78)',
        backdropFilter: 'blur(6px)',
        fontWeight: '600',
      },
    } as never);

    const secondaryStyleValues = (
      secondarySubContainer.style as unknown as {
        values?: Map<string, string>;
        backgroundColor?: string;
        backdropFilter?: string;
      }
    ).values;
    assert.equal(
      secondaryStyleValues?.get('--secondary-sub-background-color'),
      'rgba(20, 22, 34, 0.78)',
    );
    assert.equal(secondaryStyleValues?.get('--secondary-sub-backdrop-filter'), 'blur(6px)');
    assert.equal(
      (secondarySubContainer.style as unknown as { backgroundColor?: string }).backgroundColor,
      undefined,
    );
    assert.equal(
      (secondarySubContainer.style as unknown as { backdropFilter?: string }).backdropFilter,
      undefined,
    );
    assert.equal((secondarySubRoot.style as unknown as { fontWeight?: string }).fontWeight, '600');
  } finally {
    restoreDocument();
  }
});

test('computeWordClass adds frequency class for single mode when rank is within topX', () => {
  const token = createToken({
    surface: '猫',
    frequencyRank: 50,
  });

  const actual = computeWordClass(token, {
    enabled: true,
    topX: 100,
    mode: 'single',
    singleColor: '#000000',
    bandedColors: ['#000000', '#000000', '#000000', '#000000', '#000000'] as const,
  });

  assert.equal(actual, 'word word-frequency-single');
});

test('computeWordClass adds frequency class when rank equals topX', () => {
  const token = createToken({
    surface: '水',
    frequencyRank: 100,
  });

  const actual = computeWordClass(token, {
    enabled: true,
    topX: 100,
    mode: 'single',
    singleColor: '#000000',
    bandedColors: ['#000000', '#000000', '#000000', '#000000', '#000000'] as const,
  });

  assert.equal(actual, 'word word-frequency-single');
});

test('computeWordClass adds frequency class for banded mode', () => {
  const token = createToken({
    surface: '犬',
    frequencyRank: 250,
  });

  const actual = computeWordClass(token, {
    enabled: true,
    topX: 1000,
    mode: 'banded',
    singleColor: '#000000',
    bandedColors: ['#111111', '#222222', '#333333', '#444444', '#555555'] as const,
  });

  assert.equal(actual, 'word word-frequency-band-2');
});

test('computeWordClass uses configured band count for banded mode', () => {
  const token = createToken({
    surface: '犬',
    frequencyRank: 2,
  });

  const actual = computeWordClass(token, {
    enabled: true,
    topX: 4,
    mode: 'banded',
    singleColor: '#000000',
    bandedColors: ['#111111', '#222222', '#333333', '#444444', '#555555'],
  } as any);

  assert.equal(actual, 'word word-frequency-band-3');
});

test('computeWordClass skips frequency class when rank is out of topX', () => {
  const token = createToken({
    surface: '犬',
    frequencyRank: 1200,
  });

  const actual = computeWordClass(token, {
    enabled: true,
    topX: 1000,
    mode: 'single',
    singleColor: '#000000',
    bandedColors: ['#000000', '#000000', '#000000', '#000000', '#000000'] as const,
  });

  assert.equal(actual, 'word');
});

test('getFrequencyRankLabelForToken returns rank only for frequency-colored tokens', () => {
  const settings = {
    enabled: true,
    topX: 100,
    mode: 'single' as const,
    singleColor: '#000000',
    bandedColors: ['#000000', '#000000', '#000000', '#000000', '#000000'] as [
      string,
      string,
      string,
      string,
      string,
    ],
  };
  const frequencyToken = createToken({ surface: '頻度', frequencyRank: 20 });
  const knownToken = createToken({ surface: '既知', isKnown: true, frequencyRank: 20 });
  const nPlusOneToken = createToken({ surface: '目標', isNPlusOneTarget: true, frequencyRank: 20 });
  const outOfRangeToken = createToken({ surface: '圏外', frequencyRank: 1000 });
  const nameToken = createToken({ surface: 'アクア', frequencyRank: 20 }) as MergedToken & {
    isNameMatch?: boolean;
  };
  nameToken.isNameMatch = true;

  assert.equal(getFrequencyRankLabelForToken(frequencyToken, settings), '20');
  assert.equal(getFrequencyRankLabelForToken(knownToken, settings), '20');
  assert.equal(getFrequencyRankLabelForToken(nPlusOneToken, settings), '20');
  assert.equal(getFrequencyRankLabelForToken(outOfRangeToken, settings), null);
  assert.equal(
    getFrequencyRankLabelForToken(nameToken, { ...settings, nameMatchEnabled: true }),
    null,
  );
});

test('getJlptLevelLabelForToken returns level when token has jlpt metadata', () => {
  const jlptToken = createToken({ surface: '語彙', jlptLevel: 'N2' });
  const noJlptToken = createToken({ surface: '語彙' });
  const nameToken = createToken({ surface: 'アクア', jlptLevel: 'N5' }) as MergedToken & {
    isNameMatch?: boolean;
  };
  nameToken.isNameMatch = true;

  assert.equal(getJlptLevelLabelForToken(jlptToken), 'N2');
  assert.equal(getJlptLevelLabelForToken(noJlptToken), null);
  assert.equal(getJlptLevelLabelForToken(nameToken, { nameMatchEnabled: true }), null);
});

test('sanitizeSubtitleHoverTokenColor falls back for pure black values', () => {
  assert.equal(sanitizeSubtitleHoverTokenColor('#000000'), '#f4dbd6');
  assert.equal(sanitizeSubtitleHoverTokenColor('000000'), '#f4dbd6');
  assert.equal(sanitizeSubtitleHoverTokenColor('#0000'), '#f4dbd6');
});

test('sanitizeSubtitleHoverTokenColor keeps non-black color values', () => {
  assert.equal(sanitizeSubtitleHoverTokenColor('#ff00ff'), '#ff00ff');
  assert.equal(sanitizeSubtitleHoverTokenColor(undefined), '#f4dbd6');
});

test('alignTokensToSourceText preserves newline separators between adjacent token surfaces', () => {
  const tokens = [
    createToken({ surface: 'キリキリと', reading: 'きりきりと', headword: 'キリキリと' }),
    createToken({ surface: 'かかってこい', reading: 'かかってこい', headword: 'かかってこい' }),
  ];

  const segments = alignTokensToSourceText(tokens, 'キリキリと\nかかってこい');
  assert.deepEqual(
    segments.map((segment) => (segment.kind === 'text' ? `text:${segment.text}` : 'token')),
    ['token', 'text:\n', 'token'],
  );
});

test('alignTokensToSourceText treats whitespace-only token surfaces as plain text separators', () => {
  const tokens = [
    createToken({ surface: '常人が使えば' }),
    createToken({ surface: ' ' }),
    createToken({ surface: 'その圧倒的な力に' }),
    createToken({ surface: '\n' }),
    createToken({ surface: '体が耐えきれず死に至るが…' }),
  ];

  const segments = alignTokensToSourceText(
    tokens,
    '常人が使えば その圧倒的な力に\n体が耐えきれず死に至るが…',
  );
  assert.deepEqual(
    segments.map((segment) => (segment.kind === 'text' ? `text:${segment.text}` : 'token')),
    ['token', 'text: ', 'token', 'text:\n', 'token'],
  );
});

test('alignTokensToSourceText preserves unsupported punctuation between matched tokens', () => {
  const tokens = [createToken({ surface: 'えっ' }), createToken({ surface: 'マジ' })];

  const segments = alignTokensToSourceText(tokens, 'えっ！？マジ');
  assert.deepEqual(
    segments.map((segment) => (segment.kind === 'text' ? `text:${segment.text}` : 'token')),
    ['token', 'text:！？', 'token'],
  );
});

test('alignTokensToSourceText avoids duplicate tail when later token surface does not match source', () => {
  const tokens = [
    createToken({ surface: '君たちが潰した拠点に' }),
    createToken({ surface: '教団の主力は1人もいない' }),
  ];

  const segments = alignTokensToSourceText(
    tokens,
    '君たちが潰した拠点に\n教団の主力は１人もいない',
  );
  assert.deepEqual(
    segments.map((segment) => (segment.kind === 'text' ? `text:${segment.text}` : 'token')),
    ['token', 'text:\n教団の主力は１人もいない'],
  );
});

test('buildSubtitleTokenHoverRanges tracks token offsets across text separators', () => {
  const tokens = [createToken({ surface: 'キリキリと' }), createToken({ surface: 'かかってこい' })];

  const ranges = buildSubtitleTokenHoverRanges(tokens, 'キリキリと\nかかってこい');
  assert.deepEqual(ranges, [
    { start: 0, end: 5, tokenIndex: 0 },
    { start: 6, end: 12, tokenIndex: 1 },
  ]);
});

test('buildSubtitleTokenHoverRanges ignores unmatched token surfaces', () => {
  const tokens = [
    createToken({ surface: '君たちが潰した拠点に' }),
    createToken({ surface: '教団の主力は1人もいない' }),
  ];

  const ranges = buildSubtitleTokenHoverRanges(
    tokens,
    '君たちが潰した拠点に\n教団の主力は１人もいない',
  );
  assert.deepEqual(ranges, [{ start: 0, end: 10, tokenIndex: 0 }]);
});

test('buildSubtitleTokenHoverRanges skips unsupported punctuation while preserving later offsets', () => {
  const tokens = [createToken({ surface: 'えっ' }), createToken({ surface: 'マジ' })];

  const ranges = buildSubtitleTokenHoverRanges(tokens, 'えっ！？マジ');
  assert.deepEqual(ranges, [
    { start: 0, end: 2, tokenIndex: 0 },
    { start: 4, end: 6, tokenIndex: 1 },
  ]);
});

test('renderSubtitle preserves unsupported punctuation while keeping it non-interactive', () => {
  const restoreDocument = installFakeDocument();

  try {
    const subtitleRoot = new FakeElement('div');
    const renderer = createSubtitleRenderer({
      dom: {
        subtitleRoot,
        subtitleContainer: new FakeElement('div'),
        secondarySubRoot: new FakeElement('div'),
        secondarySubContainer: new FakeElement('div'),
      },
      platform: {
        isMacOSPlatform: false,
        isModalLayer: false,
        overlayLayer: 'visible',
        shouldToggleMouseIgnore: false,
      },
      state: createRendererState(),
    } as never);

    renderer.renderSubtitle({
      text: 'えっ！？マジ',
      tokens: [createToken({ surface: 'えっ' }), createToken({ surface: 'マジ' })],
    });

    assert.equal(subtitleRoot.textContent, 'えっ！？マジ');
    assert.deepEqual(
      collectWordNodes(subtitleRoot).map((node) => [node.textContent, node.dataset.tokenIndex]),
      [
        ['えっ', '0'],
        ['マジ', '1'],
      ],
    );
  } finally {
    restoreDocument();
  }
});

test('renderSubtitle keeps excluded interjection tokens hoverable while rendering them without annotation styling', () => {
  const restoreDocument = installFakeDocument();

  try {
    const subtitleRoot = new FakeElement('div');
    const secondaryRoot = new FakeElement('div');
    const renderer = createSubtitleRenderer({
      dom: {
        subtitleRoot,
        secondarySubtitleRoot: secondaryRoot,
      },
      config: {
        subtitleStyle: {},
        frequencyDictionary: {
          colorTopX: 1000,
          colorMode: 'single',
          colorSingle: '#f5a97f',
          colorBanded: ['#ed8796', '#f5a97f', '#f9e2af', '#8bd5ca', '#8aadf4'],
        },
        secondarySubtitles: { mode: 'hidden' },
      },
      logger: {
        info: () => {},
        warn: () => {},
        error: () => {},
        debug: () => {},
      },
      runtime: {
        secondaryMode: 'hidden' as const,
        shouldToggleMouseIgnore: false,
      },
      state: createRendererState(),
    } as never);

    renderer.renderSubtitle({
      text: 'ぐはっ 猫',
      tokens: [
        createToken({ surface: 'ぐはっ', headword: 'ぐはっ', reading: 'ぐはっ' }),
        createToken({ surface: '猫', headword: '猫', reading: 'ねこ' }),
      ],
    });

    assert.equal(subtitleRoot.textContent, 'ぐはっ 猫');
    assert.deepEqual(
      collectWordNodes(subtitleRoot).map((node) => [node.textContent, node.dataset.tokenIndex]),
      [
        ['ぐはっ', '0'],
        ['猫', '1'],
      ],
    );
  } finally {
    restoreDocument();
  }
});

test('normalizeSubtitle collapses explicit line breaks when collapseLineBreaks is enabled', () => {
  assert.equal(
    normalizeSubtitle('常人が使えば\\Nその圧倒的な力に\\n体が耐えきれず死に至るが…', true, true),
    '常人が使えば その圧倒的な力に 体が耐えきれず死に至るが…',
  );
});

test('shouldRenderTokenizedSubtitle enables token rendering when tokens exist', () => {
  assert.equal(shouldRenderTokenizedSubtitle(5), true);
  assert.equal(shouldRenderTokenizedSubtitle(0), false);
});

test('JLPT CSS rules use underline-only styling in renderer stylesheet', () => {
  const distCssPath = path.join(process.cwd(), 'dist', 'renderer', 'style.css');
  const srcCssPath = path.join(process.cwd(), 'src', 'renderer', 'style.css');

  const cssPath = fs.existsSync(srcCssPath) ? srcCssPath : distCssPath;
  if (!fs.existsSync(cssPath)) {
    assert.fail(
      'JLPT CSS file missing. Run `bun run build` first, or ensure src/renderer/style.css exists.',
    );
  }

  const cssText = fs.readFileSync(cssPath, 'utf-8');

  for (let level = 1; level <= 5; level += 1) {
    const block = extractClassBlock(cssText, `#subtitleRoot .word.word-jlpt-n${level}`);
    assert.ok(block.length > 0, `word-jlpt-n${level} class should exist`);
    assert.match(
      block,
      new RegExp(`--subtitle-jlpt-underline-color:\\s*var\\(--subtitle-jlpt-n${level}-color,`),
    );
    assert.match(block, /border-bottom:\s*2px solid var\(--subtitle-jlpt-underline-color\);/);
    assert.match(block, /padding-bottom:\s*1px;/);
    assert.match(block, /box-decoration-break:\s*clone;/);
    assert.match(block, /-webkit-box-decoration-break:\s*clone;/);
    assert.doesNotMatch(block, /(?:^|\n)\s*color\s*:/m);
  }

  for (let band = 1; band <= 5; band += 1) {
    const block = extractClassBlock(
      cssText,
      band === 1
        ? '#subtitleRoot .word.word-frequency-single'
        : `#subtitleRoot .word.word-frequency-band-${band}`,
    );
    assert.ok(
      block.length > 0,
      `frequency class word-frequency-${band === 1 ? 'single' : `band-${band}`} should exist`,
    );
    assert.match(block, /color:\s*var\(/);
  }

  const visibleMacBlock = extractClassBlock(
    cssText,
    'body.platform-macos.layer-visible #subtitleRoot',
  );
  assert.match(visibleMacBlock, /--visible-sub-line-height:\s*1\.64;/);
  assert.match(visibleMacBlock, /--visible-sub-line-gap:\s*0\.54em;/);

  const subtitleRootBlock = extractClassBlock(cssText, '#subtitleRoot');
  assert.match(subtitleRootBlock, /--subtitle-hover-token-color:\s*#f4dbd6;/);
  assert.match(
    subtitleRootBlock,
    /--subtitle-hover-token-background-color:\s*rgba\(54,\s*58,\s*79,\s*0\.84\);/,
  );
  assert.match(subtitleRootBlock, /-webkit-text-fill-color:\s*currentColor;/);

  const charBlock = extractClassBlock(cssText, '#subtitleRoot .c');
  assert.match(charBlock, /-webkit-text-fill-color:\s*currentColor\s*!important;/);

  const wordBlock = extractClassBlock(cssText, '#subtitleRoot .word');
  assert.match(wordBlock, /-webkit-text-fill-color:\s*currentColor\s*!important;/);

  const frequencyTooltipBaseBlock = extractClassBlock(
    cssText,
    '#subtitleRoot .word[data-frequency-rank]::before',
  );
  assert.match(frequencyTooltipBaseBlock, /content:\s*attr\(data-frequency-rank\);/);
  assert.match(frequencyTooltipBaseBlock, /opacity:\s*0;/);
  assert.match(frequencyTooltipBaseBlock, /pointer-events:\s*none;/);

  const frequencyTooltipHoverBlock = extractClassBlock(
    cssText,
    '#subtitleRoot .word[data-frequency-rank]:hover::before',
  );
  assert.match(frequencyTooltipHoverBlock, /opacity:\s*1;/);
  const frequencyTooltipKeyboardSelectedBlock = extractClassBlock(
    cssText,
    '#subtitleRoot .word.keyboard-selected[data-frequency-rank]::before',
  );
  assert.match(frequencyTooltipKeyboardSelectedBlock, /opacity:\s*1;/);

  const jlptTooltipBaseBlock = extractClassBlock(
    cssText,
    '#subtitleRoot .word[data-jlpt-level]::after',
  );
  assert.match(jlptTooltipBaseBlock, /content:\s*attr\(data-jlpt-level\);/);
  assert.match(jlptTooltipBaseBlock, /bottom:\s*-\s*0\.42em;/);
  assert.match(jlptTooltipBaseBlock, /opacity:\s*0;/);
  assert.match(jlptTooltipBaseBlock, /pointer-events:\s*none;/);

  const jlptTooltipHoverBlock = extractClassBlock(
    cssText,
    '#subtitleRoot .word[data-jlpt-level]:hover::after',
  );
  assert.match(jlptTooltipHoverBlock, /opacity:\s*1;/);
  const jlptTooltipKeyboardSelectedBlock = extractClassBlock(
    cssText,
    '#subtitleRoot .word.keyboard-selected[data-jlpt-level]::after',
  );
  assert.match(jlptTooltipKeyboardSelectedBlock, /opacity:\s*1;/);

  const plainWordHoverBlock = extractClassBlock(
    cssText,
    '#subtitleRoot .word:not(.word-known):not(.word-n-plus-one):not(.word-name-match):not(.word-frequency-single):not(.word-frequency-band-1):not(.word-frequency-band-2):not(.word-frequency-band-3):not(.word-frequency-band-4):not(.word-frequency-band-5):hover',
  );
  assert.match(
    plainWordHoverBlock,
    /background:\s*var\(--subtitle-hover-token-background-color,\s*rgba\(54,\s*58,\s*79,\s*0\.84\)\);/,
  );
  assert.match(
    plainWordHoverBlock,
    /color:\s*var\(--subtitle-hover-token-color,\s*#f4dbd6\)\s*!important;/,
  );
  assert.match(
    plainWordHoverBlock,
    /-webkit-text-fill-color:\s*var\(--subtitle-hover-token-color,\s*#f4dbd6\)\s*!important;/,
  );

  const coloredWordHoverBlock = extractClassBlock(cssText, '#subtitleRoot .word.word-known:hover');
  assert.match(
    coloredWordHoverBlock,
    /background:\s*var\(--subtitle-hover-token-background-color,\s*rgba\(54,\s*58,\s*79,\s*0\.84\)\);/,
  );
  assert.match(coloredWordHoverBlock, /border-radius:\s*3px;/);
  assert.match(coloredWordHoverBlock, /font-weight:\s*800;/);
  assert.doesNotMatch(coloredWordHoverBlock, /color:\s*var\(--subtitle-hover-token-color/);
  assert.doesNotMatch(
    coloredWordHoverBlock,
    /-webkit-text-fill-color:\s*var\(--subtitle-hover-token-color/,
  );

  const coloredWordSelectionBlock = extractClassBlock(
    cssText,
    '#subtitleRoot .word.word-known::selection',
  );
  assert.match(
    coloredWordSelectionBlock,
    /color:\s*var\(--subtitle-known-word-color,\s*#a6da95\)\s*!important;/,
  );
  assert.match(
    coloredWordSelectionBlock,
    /-webkit-text-fill-color:\s*var\(--subtitle-known-word-color,\s*#a6da95\)\s*!important;/,
  );

  const coloredCharHoverBlock = extractClassBlock(
    cssText,
    '#subtitleRoot .word.word-known .c:hover',
  );
  assert.match(coloredCharHoverBlock, /background:\s*transparent;/);
  assert.match(coloredCharHoverBlock, /color:\s*inherit\s*!important;/);

  const jlptOnlyHoverBlock = extractClassBlock(
    cssText,
    '#subtitleRoot .word:is(.word-jlpt-n1, .word-jlpt-n2, .word-jlpt-n3, .word-jlpt-n4, .word-jlpt-n5):not(.word-known):not(.word-n-plus-one):not(.word-name-match):not(.word-frequency-single):not(.word-frequency-band-1):not(.word-frequency-band-2):not(.word-frequency-band-3):not(.word-frequency-band-4):not(.word-frequency-band-5):hover',
  );
  assert.match(
    jlptOnlyHoverBlock,
    /color:\s*var\(--subtitle-hover-token-color,\s*#f4dbd6\)\s*!important;/,
  );
  assert.match(
    jlptOnlyHoverBlock,
    /-webkit-text-fill-color:\s*var\(--subtitle-hover-token-color,\s*#f4dbd6\)\s*!important;/,
  );

  const jlptOnlySelectionBlock = extractClassBlock(
    cssText,
    '#subtitleRoot .word:is(.word-jlpt-n1, .word-jlpt-n2, .word-jlpt-n3, .word-jlpt-n4, .word-jlpt-n5):not(.word-known):not(.word-n-plus-one):not(.word-name-match):not(.word-frequency-single):not(.word-frequency-band-1):not(.word-frequency-band-2):not(.word-frequency-band-3):not(.word-frequency-band-4):not(.word-frequency-band-5)::selection',
  );
  assert.match(
    jlptOnlySelectionBlock,
    /color:\s*var\(--subtitle-hover-token-color,\s*#f4dbd6\)\s*!important;/,
  );
  assert.match(
    jlptOnlySelectionBlock,
    /-webkit-text-fill-color:\s*var\(--subtitle-hover-token-color,\s*#f4dbd6\)\s*!important;/,
  );

  const selectionBlock = extractClassBlock(cssText, '#subtitleRoot::selection');
  assert.match(
    selectionBlock,
    /background:\s*var\(--subtitle-hover-token-background-color,\s*rgba\(54,\s*58,\s*79,\s*0\.84\)\);/,
  );
  assert.match(
    selectionBlock,
    /color:\s*var\(--subtitle-hover-token-color,\s*#f4dbd6\)\s*!important;/,
  );
  assert.match(
    selectionBlock,
    /-webkit-text-fill-color:\s*var\(--subtitle-hover-token-color,\s*#f4dbd6\)\s*!important;/,
  );

  const descendantSelectionBlock = extractClassBlock(cssText, '#subtitleRoot *::selection');
  assert.match(
    descendantSelectionBlock,
    /background:\s*var\(--subtitle-hover-token-background-color,\s*rgba\(54,\s*58,\s*79,\s*0\.84\)\)\s*!important;/,
  );
  assert.match(
    descendantSelectionBlock,
    /color:\s*var\(--subtitle-hover-token-color,\s*#f4dbd6\)\s*!important;/,
  );
  assert.match(
    descendantSelectionBlock,
    /-webkit-text-fill-color:\s*var\(--subtitle-hover-token-color,\s*#f4dbd6\)\s*!important;/,
  );

  const secondaryContainerBlock = extractClassBlock(cssText, '#secondarySubContainer');
  assert.match(
    secondaryContainerBlock,
    /background:\s*var\(--secondary-sub-background-color,\s*transparent\);/,
  );
  assert.match(
    secondaryContainerBlock,
    /backdrop-filter:\s*var\(--secondary-sub-backdrop-filter,\s*none\);/,
  );

  const secondaryRootBlock = extractClassBlock(cssText, '#secondarySubRoot');
  assert.match(secondaryRootBlock, /-webkit-text-stroke:\s*0\.45px rgba\(0,\s*0,\s*0,\s*0\.7\);/);
  assert.match(
    secondaryRootBlock,
    /text-shadow:\s*0 2px 4px rgba\(0,\s*0,\s*0,\s*0\.95\),\s*0 0 8px rgba\(0,\s*0,\s*0,\s*0\.8\),\s*0 0 16px rgba\(0,\s*0,\s*0,\s*0\.55\);/,
  );

  const secondaryHoverBaseBlock = extractClassBlock(
    cssText,
    '#secondarySubContainer.secondary-sub-hover #secondarySubRoot',
  );
  assert.match(secondaryHoverBaseBlock, /background:\s*transparent;/);

  const secondaryEmbeddedHoverBlock = extractClassBlock(
    cssText,
    'body.subtitle-sidebar-embedded-open #secondarySubContainer.secondary-sub-hover',
  );
  assert.match(secondaryEmbeddedHoverBlock, /right:\s*var\(--subtitle-sidebar-reserved-width\);/);
  assert.match(secondaryEmbeddedHoverBlock, /max-width:\s*none;/);
  assert.match(secondaryEmbeddedHoverBlock, /transform:\s*none;/);
  assert.doesNotMatch(
    secondaryEmbeddedHoverBlock,
    /transform:\s*translateX\(calc\(var\(--subtitle-sidebar-reserved-width\)\s*\*\s*-0\.5\)\);/,
  );

  const subtitleSidebarListBlock = extractClassBlock(cssText, '.subtitle-sidebar-list');
  assert.doesNotMatch(subtitleSidebarListBlock, /scroll-behavior:\s*smooth;/);

  const secondaryHoverVisibleBlock = extractClassBlock(
    cssText,
    '#secondarySubContainer.secondary-sub-hover:hover #secondarySubRoot',
  );
  assert.match(
    secondaryHoverVisibleBlock,
    /background:\s*var\(--secondary-sub-background-color,\s*transparent\);/,
  );
  assert.match(
    secondaryHoverVisibleBlock,
    /backdrop-filter:\s*var\(--secondary-sub-backdrop-filter,\s*none\);/,
  );

  const secondaryHoverActiveBlock = extractClassBlock(
    cssText,
    '#secondarySubContainer.secondary-sub-hover.secondary-sub-hover-active',
  );
  assert.match(secondaryHoverActiveBlock, /opacity:\s*1;/);

  const secondaryHoverActiveRootBlock = extractClassBlock(
    cssText,
    '#secondarySubContainer.secondary-sub-hover.secondary-sub-hover-active #secondarySubRoot',
  );
  assert.match(
    secondaryHoverActiveRootBlock,
    /background:\s*var\(--secondary-sub-background-color,\s*transparent\);/,
  );
  assert.match(
    secondaryHoverActiveRootBlock,
    /backdrop-filter:\s*var\(--secondary-sub-backdrop-filter,\s*none\);/,
  );

  assert.doesNotMatch(
    cssText,
    /body\.layer-visible\s+#secondarySubContainer\s*\{[^}]*display:\s*none/i,
  );
});