test(behavior): new behavior test suite

.github/workflows/ci-behavior.yml

@@ -0,0 +1,83 @@
+name: Behavior Tests
+
+permissions:
+  contents: read
+
+on:
+  pull_request:
+    branches: [main]
+    paths:
+      - 'packages/superdoc/**'
+      - 'packages/layout-engine/**'
+      - 'packages/super-editor/**'
+      - 'packages/ai/**'
+      - 'packages/word-layout/**'
+      - 'packages/preset-geometry/**'
+      - 'tests/behavior/**'
+      - 'shared/**'
+      - '!**/*.md'
+  workflow_dispatch:
+
+concurrency:
+  group: ci-behavior-${{ github.event.pull_request.number || github.run_id }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1, 2, 3]
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: .nvmrc
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --ignore-scripts
+
+      - name: Build SuperDoc
+        run: pnpm build
+
+      - name: Get Playwright version
+        id: pw
+        run: echo "version=$(node -p "require('@playwright/test/package.json').version")" >> $GITHUB_OUTPUT
+        working-directory: tests/behavior
+
+      - name: Cache Playwright browsers
+        uses: actions/cache@v5
+        id: pw-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ steps.pw.outputs.version }}
+
+      - name: Install Playwright browsers
+        if: steps.pw-cache.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install --with-deps chromium firefox webkit
+        working-directory: tests/behavior
+
+      - name: Install Playwright system deps
+        if: steps.pw-cache.outputs.cache-hit == 'true'
+        run: pnpm exec playwright install-deps chromium firefox webkit
+        working-directory: tests/behavior
+
+      - name: Run behavior tests (shard ${{ matrix.shard }}/3)
+        run: pnpm exec playwright test --shard=${{ matrix.shard }}/3
+        working-directory: tests/behavior
+
+  validate:
+    if: always()
+    needs: [test]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check results
+        run: |
+          if [[ "${{ contains(needs.*.result, 'failure') }}" == "true" ]]; then
+            exit 1
+          fi

package.json

@@ -13,6 +13,12 @@
     "test:editor": "vitest run --root ./packages/super-editor",
     "test:superdoc": "vitest run --root ./packages/superdoc",
     "test:cov": "node scripts/test-cov.mjs",
+    "test:behavior": "pnpm --filter @superdoc-testing/behavior test",
+    "test:behavior:trace": "pnpm --filter @superdoc-testing/behavior test:trace",
+    "test:behavior:screenshots": "pnpm --filter @superdoc-testing/behavior test:screenshots",
+    "test:behavior:headed": "pnpm --filter @superdoc-testing/behavior test:headed",
+    "test:behavior:ui": "pnpm --filter @superdoc-testing/behavior test:ui",
+    "test:behavior:html": "pnpm --filter @superdoc-testing/behavior test:html",
     "type-check": "tsc -b tsconfig.references.json",
     "type-check:force": "tsc -b --force tsconfig.references.json",
     "rebuild:types": "pnpm run --filter=@superdoc/common --filter=@superdoc/word-layout --filter=@superdoc/contracts --filter=@superdoc/geometry-utils --filter=@superdoc/style-engine --filter=@superdoc/pm-adapter --filter=@superdoc/measuring-dom --filter=@superdoc/layout-engine --filter=@superdoc/painter-dom --filter=@superdoc/layout-bridge build",

packages/document-api/src/types/inline.types.ts

@@ -22,6 +22,7 @@ export interface RunProperties {
   bold?: boolean;
   italic?: boolean;
   underline?: boolean;
+  strike?: boolean;
   font?: string;
   size?: number;
   color?: string;

packages/super-editor/src/document-api-adapters/helpers/node-info-mapper.test.ts

@@ -294,6 +294,72 @@ describe('mapNodeInfo — inline nodes', () => {
       language: 'en-US',
     });
   });
+
+  it('maps run from OOXML-style boolean tokens and fallback fields', () => {
+    const result = mapNodeInfo(
+      makeInlineCandidate('run', {
+        nodeAttrs: {
+          runProperties: {
+            bold: { 'w:val': '0' },
+            italic: 'on',
+            underline: { 'w:val': 'none' },
+            dstrike: { val: 'true' },
+            fontFamily: { hAnsi: 'Cambria' },
+            fontSize: '16pt',
+            color: { 'w:val': '00FF00' },
+            highlight: { 'w:fill': 'FF00AA' },
+            styleId: 'Emphasis',
+            lang: 'fr-CA',
+          },
+        },
+      }),
+    );
+
+    expect(result.nodeType).toBe('run');
+    expect(result.properties).toMatchObject({
+      bold: false,
+      italic: true,
+      underline: false,
+      strike: true,
+      font: 'Cambria',
+      size: 16,
+      color: '00FF00',
+      highlight: '#FF00AA',
+      styleId: 'Emphasis',
+      language: 'fr-CA',
+    });
+  });
+
+  it('maps run highlight "none" to transparent and keeps explicit false strike', () => {
+    const result = mapNodeInfo(
+      makeInlineCandidate('run', {
+        nodeAttrs: {
+          runProperties: {
+            strike: { val: 'off' },
+            u: { val: 'single' },
+            rFonts: { ascii: 'Calibri' },
+            size: '24',
+            color: '112233',
+            highlight: { val: 'none' },
+            rStyle: 'Strong',
+            lang: { val: 'de-DE' },
+          },
+        },
+      }),
+    );
+
+    expect(result.nodeType).toBe('run');
+    expect(result.properties).toMatchObject({
+      strike: false,
+      underline: true,
+      font: 'Calibri',
+      size: 24,
+      color: '112233',
+      highlight: 'transparent',
+      styleId: 'Strong',
+      language: 'de-DE',
+    });
+  });
 });
 
 // ---------------------------------------------------------------------------

packages/super-editor/src/document-api-adapters/helpers/node-info-mapper.ts

@@ -289,48 +289,142 @@ function mapFootnoteRefNode(candidate: InlineCandidate): FootnoteRefNodeInfo {
   return { nodeType: 'footnoteRef', kind: 'inline', properties };
 }
 
+function parseBooleanToken(value: string): boolean | undefined {
+  const normalized = value.trim().toLowerCase();
+  if (!normalized) return undefined;
+  if (normalized === '0' || normalized === 'false' || normalized === 'off' || normalized === 'none') return false;
+  if (normalized === '1' || normalized === 'true' || normalized === 'on' || normalized === 'single') return true;
+  return undefined;
+}
+
+function resolveBooleanLike(value: unknown): boolean | undefined {
+  if (typeof value === 'boolean') return value;
+  if (typeof value === 'number') return value !== 0;
+  if (typeof value === 'string') return parseBooleanToken(value);
+  if (value && typeof value === 'object') {
+    const record = value as Record<string, unknown>;
+    const explicit = resolveBooleanLike(
+      record.val ?? record.value ?? record.type ?? record['w:val'] ?? record['w:value'],
+    );
+    if (explicit != null) return explicit;
+    return true;
+  }
+  return undefined;
+}
+
+function resolveUnderlineLike(values: unknown[]): boolean | undefined {
+  for (const value of values) {
+    if (value == null) continue;
+    if (typeof value === 'string') {
+      const normalized = value.trim().toLowerCase();
+      if (!normalized) continue;
+      return normalized !== 'none' && normalized !== 'false' && normalized !== '0';
+    }
+    const resolved = resolveBooleanLike(value);
+    if (resolved != null) return resolved;
+  }
+  return undefined;
+}
+
+function resolveColorValue(value: unknown): string | undefined {
+  if (typeof value === 'string') return value;
+  if (value && typeof value === 'object') {
+    const record = value as Record<string, unknown>;
+    if (typeof record.val === 'string') return record.val;
+    if (typeof record.value === 'string') return record.value;
+    if (typeof record['w:val'] === 'string') return record['w:val'] as string;
+  }
+  return undefined;
+}
+
+function resolveHighlightValue(value: unknown): string | undefined {
+  if (typeof value === 'string') return value;
+  if (value && typeof value === 'object') {
+    const record = value as Record<string, unknown>;
+    const highlightValue = record.val ?? record.value ?? record['w:val'];
+    if (typeof highlightValue === 'string') {
+      const normalized = highlightValue.trim();
+      if (!normalized) return undefined;
+      if (normalized.toLowerCase() === 'none') return 'transparent';
+      return normalized;
+    }
+
+    const fill = record.fill ?? record['w:fill'];
+    if (typeof fill === 'string') {
+      const normalized = fill.trim();
+      if (!normalized || normalized.toLowerCase() === 'auto') return undefined;
+      return normalized.startsWith('#') ? normalized : `#${normalized}`;
+    }
+  }
+  return undefined;
+}
+
+function resolveFontValue(runProperties: Record<string, unknown>): string | undefined {
+  const fromRFonts = runProperties.rFonts;
+  if (fromRFonts && typeof fromRFonts === 'object') {
+    const fonts = fromRFonts as Record<string, unknown>;
+    const selected = fonts.ascii ?? fonts.hAnsi ?? fonts.eastAsia ?? fonts.cs;
+    if (typeof selected === 'string') return selected;
+  }
+
+  const fromFontFamily = runProperties.fontFamily;
+  if (typeof fromFontFamily === 'string') return fromFontFamily;
+  if (fromFontFamily && typeof fromFontFamily === 'object') {
+    const fonts = fromFontFamily as Record<string, unknown>;
+    const selected = fonts.ascii ?? fonts.hAnsi ?? fonts.eastAsia ?? fonts.cs;
+    if (typeof selected === 'string') return selected;
+  }
+
+  return undefined;
+}
+
+function resolveFontSizeValue(runProperties: Record<string, unknown>): number | undefined {
+  const candidate = runProperties.sz ?? runProperties.size ?? runProperties.fontSize;
+  if (typeof candidate === 'number') return candidate;
+  if (typeof candidate === 'string') {
+    const parsed = Number.parseFloat(candidate);
+    return Number.isFinite(parsed) ? parsed : undefined;
+  }
+  return undefined;
+}
+
 function mapRunNode(candidate: InlineCandidate): RunNodeInfo {
-  const attrs = (candidate.node?.attrs ?? candidate.attrs ?? {}) as {
-    runProperties?: {
-      bold?: boolean;
-      italic?: boolean;
-      underline?: { val?: string } | boolean;
-      rFonts?: { ascii?: string; hAnsi?: string; eastAsia?: string; cs?: string };
-      sz?: number;
-      color?: { val?: string };
-      highlight?: string;
-      rStyle?: string;
-      lang?: { val?: string };
-      u?: { val?: string };
-    } | null;
-  };
-  const runProperties = attrs.runProperties ?? undefined;
-  const underline = Boolean(
-    runProperties?.underline === true ||
-      runProperties?.u?.val === 'single' ||
-      (typeof runProperties?.underline === 'object' &&
-        typeof runProperties?.underline?.val === 'string' &&
-        runProperties.underline.val !== 'none'),
-  );
-  const font =
-    runProperties?.rFonts?.ascii ??
-    runProperties?.rFonts?.hAnsi ??
-    runProperties?.rFonts?.eastAsia ??
-    runProperties?.rFonts?.cs;
+  const attrs = (candidate.node?.attrs ?? candidate.attrs ?? {}) as { runProperties?: Record<string, unknown> | null };
+  const runProperties =
+    attrs.runProperties && typeof attrs.runProperties === 'object'
+      ? (attrs.runProperties as Record<string, unknown>)
+      : undefined;
+  const underline = resolveUnderlineLike([runProperties?.underline, runProperties?.u]);
+  const strike = resolveBooleanLike(runProperties?.strike) ?? resolveBooleanLike(runProperties?.dstrike) ?? undefined;
+  const languageRaw = runProperties?.lang;
+  const language =
+    typeof languageRaw === 'string'
+      ? languageRaw
+      : languageRaw &&
+          typeof languageRaw === 'object' &&
+          typeof (languageRaw as Record<string, unknown>).val === 'string'
+        ? ((languageRaw as Record<string, unknown>).val as string)
+        : undefined;
 
   return {
     nodeType: 'run',
     kind: 'inline',
     properties: {
-      bold: runProperties?.bold ?? undefined,
-      italic: runProperties?.italic ?? undefined,
-      underline: underline || undefined,
-      font: typeof font === 'string' ? font : undefined,
-      size: typeof runProperties?.sz === 'number' ? runProperties.sz : undefined,
-      color: runProperties?.color?.val ?? undefined,
-      highlight: runProperties?.highlight ?? undefined,
-      styleId: runProperties?.rStyle ?? undefined,
-      language: runProperties?.lang?.val ?? undefined,
+      bold: resolveBooleanLike(runProperties?.bold) ?? undefined,
+      italic: resolveBooleanLike(runProperties?.italic) ?? undefined,
+      underline: underline ?? undefined,
+      strike,
+      font: runProperties ? resolveFontValue(runProperties) : undefined,
+      size: runProperties ? resolveFontSizeValue(runProperties) : undefined,
+      color: resolveColorValue(runProperties?.color),
+      highlight: resolveHighlightValue(runProperties?.highlight),
+      styleId:
+        typeof runProperties?.rStyle === 'string'
+          ? runProperties.rStyle
+          : typeof runProperties?.styleId === 'string'
+            ? runProperties.styleId
+            : undefined,
+      language,
     },
   };
 }

pnpm-workspace.yaml

@@ -2,6 +2,7 @@ packages:
   - e2e-tests
   - e2e-tests/templates/vue
   - tests/visual
+  - tests/behavior
   - apps/*
   - packages/**/*
   - shared/*

tests/behavior/.gitignore

@@ -0,0 +1,3 @@
+playwright-report/
+test-results/
+test-data/