64 lines
3.7 KiB
Markdown
64 lines
3.7 KiB
Markdown
|
# DOM/CSS mapping reference
|
||
|
|
|
||
|
|
OpenPencil maps browser-computed DOM/CSS styles into SceneGraph fields through `@open-pencil/dom-css`. Browser adapters should use native DOM/CSSOM and `getComputedStyle()` as the source of truth. Headless conversion is an approximation for tests and CLI usage.
|
||
|
|
|
||
|
|
## Layout
|
||
|
|
|
||
|
|
| CSS | SceneGraph | Notes |
|
||
|
|
|---|---|---|
|
||
|
|
| `display: flex` / `inline-flex` | `layoutMode` | `flex-direction: row` maps to horizontal; `column` maps to vertical. |
|
||
|
|
| `justify-content` | `primaryAxisAlign` | Supports start, center, end/flex-end, and space-between. |
|
||
|
|
| `align-items` | `counterAxisAlign` | Supports start, center, end/flex-end, stretch, and baseline. |
|
||
|
|
| `align-self` | `layoutAlignSelf` | Supports start, center, end/flex-end, stretch, and baseline. |
|
||
|
|
| `flex-wrap: wrap` | `layoutWrap: WRAP` | Counter-axis spacing is preserved when gaps are available. |
|
||
|
|
| `gap`, `row-gap`, `column-gap` | `itemSpacing`, `counterAxisSpacing` | Axis-aware: row and column gaps swap meaning for column flex direction. |
|
||
|
|
| `padding-*` | `paddingTop/Right/Bottom/Left` | Browser-computed physical values are preferred. |
|
||
|
|
| `position: absolute/fixed`, `left`, `top` | `layoutPositioning`, `x`, `y` | Right/bottom constraints are not mapped yet. |
|
||
|
|
| `overflow: hidden/clip` | `clipsContent` | Other overflow values are ignored. |
|
||
|
|
| `width`, `height`, min/max sizes | node size constraints | Browser-computed pixel values are preferred. |
|
||
|
|
|
||
|
|
## Paint, stroke, and effects
|
||
|
|
|
||
|
|
| CSS | SceneGraph | Notes |
|
||
|
|
|---|---|---|
|
||
|
|
| `background-color` | solid fill | Transparent values are ignored. |
|
||
|
|
| `border-color`, `border-*-color` | stroke color | First available border color is used. |
|
||
|
|
| `border-width`, `border-*-width` | stroke weight / independent stroke weights | Side-specific widths set independent stroke weights. |
|
||
|
|
| `border-style: dashed/dotted` | `dashPattern` | Unsupported border styles fall back to solid. |
|
||
|
|
| `border-radius`, `border-*-radius` | corner radii | Independent corners are preserved when sides differ. |
|
||
|
|
| `opacity` | node opacity | Numeric computed value. |
|
||
|
|
| `box-shadow` | drop shadow | Simple shadows only; see parser audit before expanding. |
|
||
|
|
|
||
|
|
## Text
|
||
|
|
|
||
|
|
| CSS | SceneGraph | Notes |
|
||
|
|
|---|---|---|
|
||
|
|
| `color` | text fill | Uses core color parsing. |
|
||
|
|
| `font-family` | `fontFamily` | Uses first family token. |
|
||
|
|
| `font-size` | `fontSize` | Pixel/rem-ish numeric values. |
|
||
|
|
| `font-weight` | `fontWeight` | Numeric values. |
|
||
|
|
| `font-style: italic` | `italic` | Other styles ignored. |
|
||
|
|
| `line-height` | `lineHeight` | Numeric computed values. |
|
||
|
|
| `letter-spacing` | `letterSpacing` | Numeric computed values. |
|
||
|
|
| `text-align` | horizontal text alignment | Supports center, right, justified; defaults left. |
|
||
|
|
| `text-decoration-line` | underline / strikethrough | Decoration style/thickness are not mapped yet. |
|
||
|
|
| `text-transform` | `textCase` | Uppercase, lowercase, and capitalize map to SceneGraph text case. |
|
||
|
|
| `white-space: nowrap` | `maxLines = 1` | Other white-space values are not mapped yet. |
|
||
|
|
| `text-shadow` | drop shadow effect | Simple shadows only. |
|
||
|
|
|
||
|
|
## Browser-oracle but not mapped yet
|
||
|
|
|
||
|
|
These values are collected or covered by browser oracle tests but do not yet have a stable SceneGraph mapping:
|
||
|
|
|
||
|
|
- `aspect-ratio`
|
||
|
|
- `object-fit`
|
||
|
|
- complex gradients
|
||
|
|
- CSS filters
|
||
|
|
- multi-shadow lists
|
||
|
|
- media-query-specific provenance
|
||
|
|
- pseudo-elements
|
||
|
|
|
||
|
|
## Headless limitations
|
||
|
|
|
||
|
|
The headless runtime uses maintained parsers for HTML (`parse5`) and stylesheets (`@acemir/cssom`), but still has limited approximations for selector matching, shorthand expansion, inline style text, `calc()`, and simple shadows. Do not expand those with ad hoc parsers. See [`../development/dom-css-parser-audit.md`](../development/dom-css-parser-audit.md).
|