From 5b61c1bf46c14ffae2d6d9bbf53323d26087421a Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Wed, 3 Jun 2026 14:32:35 +0300
Subject: [PATCH] test(dom-css): expand fixture matrix

---
 packages/dom-css/src/to-scene-graph.ts    |  40 +++++-
 tests/e2e/dom-css/browser-runtime.spec.ts | 157 +++++++++++++++++++-
 tests/engine/dom-css/conversion.test.ts   | 106 +++++++++++++-
 tests/helpers/dom-css.ts                  | 166 +++++++++++++++++++++-
 4 files changed, 460 insertions(+), 9 deletions(-)

diff --git a/packages/dom-css/src/to-scene-graph.ts b/packages/dom-css/src/to-scene-graph.ts
index fb278e460..302bb6d02 100644
--- a/packages/dom-css/src/to-scene-graph.ts
+++ b/packages/dom-css/src/to-scene-graph.ts
@@ -137,8 +137,16 @@ function counterAxisAlignFromCSS(value: string | undefined): SceneNode['counterA
   return 'MIN'
 }
 
+function applyPadding(node: SceneNode, style: DesignStyleDeclaration): void {
+  node.paddingTop = firstCSSNumber(style, 'padding-top', 'padding-block', 'padding') ?? 0
+  node.paddingRight = firstCSSNumber(style, 'padding-right', 'padding-inline', 'padding') ?? 0
+  node.paddingBottom = firstCSSNumber(style, 'padding-bottom', 'padding-block', 'padding') ?? 0
+  node.paddingLeft = firstCSSNumber(style, 'padding-left', 'padding-inline', 'padding') ?? 0
+}
+
 function applyElementStyle(node: SceneNode, style: DesignStyleDeclaration): void {
   setNodeBox(node, style)
+  applyPadding(node, style)
 
   const fills = fillsFromStyle(style, 'background-color')
   if (fills.length > 0) node.fills = fills
@@ -168,10 +176,6 @@ function applyElementStyle(node: SceneNode, style: DesignStyleDeclaration): void
     node.primaryAxisAlign = primaryAxisAlignFromCSS(pickStyle(style, 'justify-content'))
     node.counterAxisAlign = counterAxisAlignFromCSS(pickStyle(style, 'align-items'))
     node.itemSpacing = firstCSSNumber(style, 'gap', 'column-gap', 'row-gap') ?? 0
-    node.paddingTop = firstCSSNumber(style, 'padding-top', 'padding') ?? 0
-    node.paddingRight = firstCSSNumber(style, 'padding-right', 'padding') ?? 0
-    node.paddingBottom = firstCSSNumber(style, 'padding-bottom', 'padding') ?? 0
-    node.paddingLeft = firstCSSNumber(style, 'padding-left', 'padding') ?? 0
   }
 }
 
@@ -225,9 +229,35 @@ function createTextNode(
   return node
 }
 
+function hasBoxStyle(style: DesignStyleDeclaration): boolean {
+  return [
+    'background-color',
+    'border-color',
+    'border-width',
+    'border-top-width',
+    'border-right-width',
+    'border-bottom-width',
+    'border-left-width',
+    'border-radius',
+    'box-shadow',
+    'display',
+    'height',
+    'padding',
+    'padding-top',
+    'padding-right',
+    'padding-bottom',
+    'padding-left',
+    'width'
+  ].some((property) => pickStyle(style, property) !== undefined)
+}
+
 function createElementNode(graph: SceneGraph, parentId: string, element: DesignElement): SceneNode {
   const style = mergedStyle(element)
-  if (isTextLikeElement(element) && element.children.every((child) => child.type === 'text')) {
+  if (
+    isTextLikeElement(element) &&
+    !hasBoxStyle(style) &&
+    element.children.every((child) => child.type === 'text')
+  ) {
     return createTextNode(graph, parentId, textContent(element), style)
   }
 
diff --git a/tests/e2e/dom-css/browser-runtime.spec.ts b/tests/e2e/dom-css/browser-runtime.spec.ts
index 837057ef8..3c92c93cf 100644
--- a/tests/e2e/dom-css/browser-runtime.spec.ts
+++ b/tests/e2e/dom-css/browser-runtime.spec.ts
@@ -2,7 +2,15 @@ import type { Page } from '@playwright/test'
 
 import { compileTailwindCSS } from '@open-pencil/dom-css'
 
-import { tailwindButtonClasses, tailwindCardClasses } from '#tests/helpers/dom-css'
+import {
+  fixtureMatrixCSS,
+  fixtureMatrixHTML,
+  tailwindBadgeClasses,
+  tailwindButtonClasses,
+  tailwindCardClasses,
+  tailwindInputClasses,
+  tailwindNavClasses
+} from '#tests/helpers/dom-css'
 
 import { expect, test } from '../fixtures'
 
@@ -91,6 +99,153 @@ test.describe('@open-pencil/dom-css browser CSS runtime oracle', () => {
     expect(styles.color).toBe('rgb(255, 255, 255)')
   })
 
+  test('resolves fixture matrix layout, form, badge, and dialog styles', async ({ page }) => {
+    await setStyledContent(page, fixtureMatrixCSS, fixtureMatrixHTML)
+
+    const navbar = await computedStyleProperties(page, '.navbar', [
+      'align-items',
+      'border-radius',
+      'display',
+      'height',
+      'justify-content',
+      'padding-left',
+      'width'
+    ])
+    expect(navbar.display).toBe('flex')
+    expect(navbar['align-items']).toBe('center')
+    expect(navbar['justify-content']).toBe('space-between')
+    expect(navbar.width).toBe('416px')
+    expect(navbar.height).toBe('48px')
+    expect(navbar['padding-left']).toBe('16px')
+    expect(navbar['border-radius']).toBe('12px')
+
+    const badge = await computedStyleProperties(page, '.badge', [
+      'align-items',
+      'background-color',
+      'border-radius',
+      'color',
+      'display',
+      'font-size',
+      'font-weight',
+      'height',
+      'justify-content',
+      'padding-left'
+    ])
+    expect(badge.display).toBe('flex')
+    expect(badge['align-items']).toBe('center')
+    expect(badge['justify-content']).toBe('center')
+    expect(badge.height).toBe('24px')
+    expect(badge['padding-left']).toBe('10px')
+    expect(badge['border-radius']).toBe('9999px')
+    expect(badge['font-size']).toBe('12px')
+    expect(badge['font-weight']).toBe('600')
+    expect(badge['background-color']).toBe('rgb(224, 242, 254)')
+    expect(badge.color).toBe('rgb(3, 105, 161)')
+
+    const input = await computedStyleProperties(page, '.input', [
+      'border-bottom-width',
+      'border-radius',
+      'font-size',
+      'height',
+      'padding-left',
+      'width'
+    ])
+    expect(input.width).toBe('312px')
+    expect(input.height).toBe('40px')
+    expect(input['padding-left']).toBe('12px')
+    expect(input['border-radius']).toBe('8px')
+    expect(input['border-bottom-width']).toBe('1px')
+    expect(input['font-size']).toBe('14px')
+
+    const dialog = await computedStyleProperties(page, '.dialog', [
+      'box-shadow',
+      'display',
+      'flex-direction',
+      'gap',
+      'max-width',
+      'min-width',
+      'padding-top',
+      'width'
+    ])
+    expect(dialog.display).toBe('flex')
+    expect(dialog['flex-direction']).toBe('column')
+    expect(dialog.gap).toBe('16px')
+    expect(dialog.width).toBe('360px')
+    expect(dialog['min-width']).toBe('320px')
+    expect(dialog['max-width']).toBe('420px')
+    expect(dialog['padding-top']).toBe('24px')
+    expect(dialog['box-shadow']).toContain('rgba(15, 23, 42, 0.16)')
+  })
+
+  test('resolves Tailwind input, badge, and nav utilities in a real browser', async ({ page }) => {
+    const inputClasses = [...tailwindInputClasses]
+    const badgeClasses = [...tailwindBadgeClasses]
+    const navClasses = [...tailwindNavClasses]
+    const css = await compileTailwindCSS([...inputClasses, ...badgeClasses, ...navClasses])
+    await setStyledContent(
+      page,
+      css,
+      `
+        <nav class="${navClasses.join(' ')}">
+          <span>OpenPencil</span>
+          <span class="${badgeClasses.join(' ')}">Beta</span>
+        </nav>
+        <input class="${inputClasses.join(' ')}" value="https://openpencil.dev" />
+      `
+    )
+
+    const nav = await computedStyleProperties(page, 'nav', [
+      'align-items',
+      'border-radius',
+      'display',
+      'height',
+      'justify-content',
+      'padding-left',
+      'width'
+    ])
+    expect(nav.display).toBe('flex')
+    expect(nav['align-items']).toBe('center')
+    expect(nav['justify-content']).toBe('space-between')
+    expect(nav.width).toBe('384px')
+    expect(nav.height).toBe('48px')
+    expect(nav['padding-left']).toBe('16px')
+    expect(nav['border-radius']).toBe('12px')
+
+    const badge = await computedStyleProperties(page, 'nav span:last-child', [
+      'align-items',
+      'border-radius',
+      'display',
+      'font-size',
+      'font-weight',
+      'height',
+      'justify-content',
+      'padding-left'
+    ])
+    expect(badge.display).toBe('flex')
+    expect(badge['align-items']).toBe('center')
+    expect(badge['justify-content']).toBe('center')
+    expect(badge.height).toBe('24px')
+    expect(badge['padding-left']).toBe('10px')
+    expect(badge['border-radius']).toMatch(/^3\.\d+e\+\d+px$/)
+    expect(badge['font-size']).toBe('12px')
+    expect(badge['font-weight']).toBe('600')
+
+    const input = await computedStyleProperties(page, 'input', [
+      'border-bottom-width',
+      'border-radius',
+      'font-size',
+      'height',
+      'padding-left',
+      'width'
+    ])
+    expect(input.width).toBe('320px')
+    expect(input.height).toBe('40px')
+    expect(input['padding-left']).toBe('12px')
+    expect(input['border-radius']).toBe('6px')
+    expect(input['border-bottom-width']).toBe('1px')
+    expect(input['font-size']).toBe('14px')
+  })
+
   test('resolves custom properties when assigned to real CSS properties', async ({ page }) => {
     await page.setContent(`
       <style>
diff --git a/tests/engine/dom-css/conversion.test.ts b/tests/engine/dom-css/conversion.test.ts
index 0a49e72c0..89653985a 100644
--- a/tests/engine/dom-css/conversion.test.ts
+++ b/tests/engine/dom-css/conversion.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'bun:test'
 
+import type { SceneNode } from '@open-pencil/core/scene-graph'
 import {
   compileTailwindCSS,
   createHeadlessCSSRuntime,
@@ -15,9 +16,20 @@ import {
   computedCardDocument,
   cssCardCSS,
   cssCardHTML,
-  tailwindCardClasses
+  fixtureMatrixCSS,
+  fixtureMatrixHTML,
+  tailwindBadgeClasses,
+  tailwindCardClasses,
+  tailwindInputClasses,
+  tailwindNavClasses
 } from '#tests/helpers/dom-css'
 
+function expectFrame(node: SceneNode | undefined) {
+  expect(node?.type).toBe('FRAME')
+  if (node?.type !== 'FRAME') throw new Error('Expected frame node')
+  return node
+}
+
 describe('@open-pencil/dom-css conversion', () => {
   it('converts HTML and CSS to DesignDOM with one API call', async () => {
     const document = await htmlToDesignDocument(cssCardHTML, {
@@ -233,6 +245,98 @@ describe('@open-pencil/dom-css conversion', () => {
     expect(roundTripToolbar.inlineStyle?.['align-items']).toBe('center')
   })
 
+  it('projects the shared fixture matrix into editable scene graph layers', async () => {
+    const graph = await htmlToSceneGraph(fixtureMatrixHTML, {
+      cssText: fixtureMatrixCSS,
+      runtime: createHeadlessCSSRuntime()
+    })
+    const page = graph.getPages()[0]
+    const shell = expectFrame(page ? graph.getChildren(page.id)[0] : undefined)
+    expect(shell.width).toBe(480)
+    expect(shell.layoutMode).toBe('VERTICAL')
+    expect(shell.itemSpacing).toBe(24)
+    expect(shell.paddingLeft).toBe(32)
+
+    const [navbarNode, dialogNode] = graph.getChildren(shell.id)
+    const navbar = expectFrame(navbarNode)
+    const dialog = expectFrame(dialogNode)
+
+    expect(navbar.layoutMode).toBe('HORIZONTAL')
+    expect(navbar.primaryAxisAlign).toBe('SPACE_BETWEEN')
+    expect(navbar.counterAxisAlign).toBe('CENTER')
+    expect(navbar.cornerRadius).toBe(12)
+
+    const navActions = expectFrame(graph.getChildren(navbar.id)[1])
+    const badge = expectFrame(graph.getChildren(navActions.id)[1])
+    expect(badge.layoutMode).toBe('HORIZONTAL')
+    expect(badge.counterAxisAlign).toBe('CENTER')
+    expect(badge.cornerRadius).toBe(9999)
+    expect(graph.getChildren(badge.id)[0]?.type).toBe('TEXT')
+
+    expect(dialog.width).toBe(360)
+    expect(dialog.minWidth).toBe(320)
+    expect(dialog.maxWidth).toBe(420)
+    expect(dialog.itemSpacing).toBe(16)
+    expect(dialog.effects[0]?.type).toBe('DROP_SHADOW')
+    expect(dialog.effects[0]?.radius).toBe(40)
+
+    const [, , inputNode, buttonNode] = graph.getChildren(dialog.id)
+    const input = expectFrame(inputNode)
+    const button = expectFrame(buttonNode)
+    expect(input.width).toBe(312)
+    expect(input.height).toBe(40)
+    expect(input.cornerRadius).toBe(8)
+    expect(button.layoutMode).toBe('HORIZONTAL')
+    expect(button.primaryAxisAlign).toBe('CENTER')
+    expect(button.counterAxisAlign).toBe('CENTER')
+    expect(graph.getChildren(button.id)[0]?.type).toBe('TEXT')
+  })
+
+  it('projects Tailwind input, badge, and nav fixtures through generated CSS', async () => {
+    const runtime = createHeadlessCSSRuntime()
+    const inputClasses = [...tailwindInputClasses]
+    const badgeClasses = [...tailwindBadgeClasses]
+    const navClasses = [...tailwindNavClasses]
+    const classes = [...inputClasses, ...badgeClasses, ...navClasses]
+    const document = await runtime.computeStyles(
+      runtime.parseHTML(`
+        <nav class="${navClasses.join(' ')}">
+          <span>OpenPencil</span>
+          <span class="${badgeClasses.join(' ')}">Beta</span>
+        </nav>
+        <input class="${inputClasses.join(' ')}" value="https://openpencil.dev" />
+      `),
+      await compileTailwindCSS(classes)
+    )
+    const graph = designDocumentToSceneGraph(document)
+    const page = graph.getPages()[0]
+    const [nav, input] = page ? graph.getChildren(page.id) : []
+
+    expect(nav?.type).toBe('FRAME')
+    expect(input?.type).toBe('FRAME')
+    if (nav?.type !== 'FRAME' || input?.type !== 'FRAME') return
+    expect(nav.width).toBe(384)
+    expect(nav.height).toBe(48)
+    expect(nav.layoutMode).toBe('HORIZONTAL')
+    expect(nav.primaryAxisAlign).toBe('SPACE_BETWEEN')
+    expect(nav.counterAxisAlign).toBe('CENTER')
+    expect(nav.cornerRadius).toBe(12)
+
+    const badge = graph.getChildren(nav.id)[1]
+    expect(badge?.type).toBe('FRAME')
+    if (badge?.type !== 'FRAME') return
+    expect(badge.height).toBe(24)
+    expect(badge.layoutMode).toBe('HORIZONTAL')
+    expect(badge.primaryAxisAlign).toBe('CENTER')
+    expect(badge.counterAxisAlign).toBe('CENTER')
+
+    expect(input.width).toBe(320)
+    expect(input.height).toBe(40)
+    expect(input.paddingLeft).toBe(12)
+    expect(input.cornerRadius).toBe(6)
+    expect(input.strokes[0]?.weight).toBe(1)
+  })
+
   it('projects a Tailwind card through generated CSS into a scene graph', async () => {
     const runtime = createHeadlessCSSRuntime()
     const classes = [...tailwindCardClasses]
diff --git a/tests/helpers/dom-css.ts b/tests/helpers/dom-css.ts
index f17637476..76e7a9852 100644
--- a/tests/helpers/dom-css.ts
+++ b/tests/helpers/dom-css.ts
@@ -2,10 +2,18 @@ import { colorToCSS } from '@open-pencil/core/color'
 import type { DesignDocument } from '@open-pencil/dom-css'
 
 export const DOM_CSS_COLORS = {
+  white: colorToCSS({ r: 1, g: 1, b: 1, a: 1 }),
+  slate950: colorToCSS({ r: 2 / 255, g: 6 / 255, b: 23 / 255, a: 1 }),
   slate900: colorToCSS({ r: 17 / 255, g: 24 / 255, b: 39 / 255, a: 1 }),
   slate700: colorToCSS({ r: 31 / 255, g: 41 / 255, b: 55 / 255, a: 1 }),
-  slate200: colorToCSS({ r: 229 / 255, g: 231 / 255, b: 235 / 255, a: 1 }),
-  slateShadow: colorToCSS({ r: 15 / 255, g: 23 / 255, b: 42 / 255, a: 0.12 })
+  slate600: colorToCSS({ r: 71 / 255, g: 85 / 255, b: 105 / 255, a: 1 }),
+  slate200: colorToCSS({ r: 226 / 255, g: 232 / 255, b: 240 / 255, a: 1 }),
+  slate300: colorToCSS({ r: 203 / 255, g: 213 / 255, b: 225 / 255, a: 1 }),
+  slate50: colorToCSS({ r: 248 / 255, g: 250 / 255, b: 252 / 255, a: 1 }),
+  sky100: colorToCSS({ r: 224 / 255, g: 242 / 255, b: 254 / 255, a: 1 }),
+  sky700: colorToCSS({ r: 3 / 255, g: 105 / 255, b: 161 / 255, a: 1 }),
+  slateShadow: colorToCSS({ r: 15 / 255, g: 23 / 255, b: 42 / 255, a: 0.12 }),
+  dialogShadow: colorToCSS({ r: 15 / 255, g: 23 / 255, b: 42 / 255, a: 0.16 })
 } as const
 
 export const simpleCardDocument: DesignDocument = {
@@ -112,3 +120,157 @@ export const tailwindButtonClasses = [
   'font-medium',
   'text-white'
 ] as const
+
+export const fixtureMatrixHTML = `
+  <section class="fixture-shell">
+    <nav class="navbar">
+      <span class="brand">OpenPencil</span>
+      <div class="nav-actions">
+        <span class="nav-item">Docs</span>
+        <span class="badge">Beta</span>
+      </div>
+    </nav>
+    <dialog class="dialog" open>
+      <h2 class="dialog-title">Import from web</h2>
+      <p class="dialog-description">Convert HTML and CSS into editable design layers.</p>
+      <input class="input" value="https://openpencil.dev" />
+      <button class="primary-button">Create design</button>
+    </dialog>
+  </section>
+`
+
+export const fixtureMatrixCSS = `
+  .fixture-shell {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 480px;
+    padding: 32px;
+    background: ${DOM_CSS_COLORS.slate50};
+    color: ${DOM_CSS_COLORS.slate950};
+  }
+  .navbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 416px;
+    height: 48px;
+    padding: 0 16px;
+    border: 1px solid ${DOM_CSS_COLORS.slate200};
+    border-radius: 12px;
+    background: ${DOM_CSS_COLORS.white};
+  }
+  .brand {
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+  }
+  .nav-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .nav-item {
+    font-size: 14px;
+    line-height: 20px;
+    color: ${DOM_CSS_COLORS.slate700};
+  }
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 24px;
+    padding: 0 10px;
+    border-radius: 9999px;
+    background: ${DOM_CSS_COLORS.sky100};
+    color: ${DOM_CSS_COLORS.sky700};
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+  }
+  .dialog {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 360px;
+    min-width: 320px;
+    max-width: 420px;
+    padding: 24px;
+    border: 1px solid ${DOM_CSS_COLORS.slate200};
+    border-radius: 18px;
+    background: ${DOM_CSS_COLORS.white};
+    box-shadow: 0px 16px 40px 0px ${DOM_CSS_COLORS.dialogShadow};
+  }
+  .dialog-title {
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 28px;
+  }
+  .dialog-description {
+    font-size: 14px;
+    line-height: 20px;
+    color: ${DOM_CSS_COLORS.slate600};
+  }
+  .input {
+    width: 312px;
+    height: 40px;
+    padding: 0 12px;
+    border: 1px solid ${DOM_CSS_COLORS.slate300};
+    border-radius: 8px;
+    background: ${DOM_CSS_COLORS.white};
+    color: ${DOM_CSS_COLORS.slate950};
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .primary-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 312px;
+    height: 40px;
+    border-radius: 8px;
+    background: ${DOM_CSS_COLORS.slate950};
+    color: ${DOM_CSS_COLORS.white};
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+  }
+`
+
+export const tailwindInputClasses = [
+  'h-10',
+  'w-80',
+  'rounded-md',
+  'border',
+  'border-slate-300',
+  'bg-white',
+  'px-3',
+  'text-sm',
+  'text-slate-900'
+] as const
+
+export const tailwindBadgeClasses = [
+  'inline-flex',
+  'h-6',
+  'items-center',
+  'justify-center',
+  'rounded-full',
+  'bg-sky-100',
+  'px-2.5',
+  'text-xs',
+  'font-semibold',
+  'text-sky-700'
+] as const
+
+export const tailwindNavClasses = [
+  'flex',
+  'h-12',
+  'w-96',
+  'items-center',
+  'justify-between',
+  'rounded-xl',
+  'border',
+  'border-slate-200',
+  'bg-white',
+  'px-4'
+] as const