From 6c627e139c4b2278df9b5ac6c9be5e946bef856a Mon Sep 17 00:00:00 2001 From: Universe Date: Sun, 29 Mar 2026 19:32:15 +0900 Subject: [PATCH 01/10] feat: replace L0 HTML test fixtures with 21 systematic, supported-only fixtures MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Removed all 12 original fixtures that relied on unsupported CSS features (grid, margin, tables, viewport units). Added 21 new fixtures organized by category (layout, box, paint, text, mixed), each testing a specific CSS property group using only features the HTML→IR pipeline supports. Co-Authored-By: Claude Opus 4.6 --- fixtures/test-html/L0/README.md | 88 +++++++++-- fixtures/test-html/L0/box-dimensions.html | 96 ++++++++++++ fixtures/test-html/L0/box-padding.html | 82 ++++++++++ fixtures/test-html/L0/hello-div.html | 3 - fixtures/test-html/L0/hello.html | 19 --- fixtures/test-html/L0/layout-block.html | 122 ++++++++------- .../test-html/L0/layout-display-none.html | 43 ++++++ fixtures/test-html/L0/layout-flex-column.html | 124 +++++++++++++++ fixtures/test-html/L0/layout-flex-row.html | 146 ++++++++++++++++++ fixtures/test-html/L0/layout-flex.html | 80 ---------- fixtures/test-html/L0/mixed-card.html | 123 +++++++++++++++ fixtures/test-html/L0/mixed-inline-style.html | 88 +++++++++++ .../test-html/L0/paint-background-solid.html | 88 +++++++++++ .../test-html/L0/paint-border-radius.html | 89 +++++++++++ fixtures/test-html/L0/paint-border-style.html | 84 ++++++++++ .../test-html/L0/paint-gradient-linear.html | 93 +++++++++++ .../test-html/L0/paint-gradient-radial.html | 77 +++++++++ fixtures/test-html/L0/paint-opacity.html | 103 ++++++++++++ fixtures/test-html/L0/paint-shadow.html | 76 +++++++++ .../test-html/L0/painting-bg-gradient.html | 41 ----- fixtures/test-html/L0/painting-borders.html | 56 ------- .../test-html/L0/painting-fg-gradient.html | 43 ------ .../test-html/L0/structure-div-nested.html | 80 ---------- fixtures/test-html/L0/structure-table.html | 102 ------------ fixtures/test-html/L0/text-align.html | 82 ++++++++++ fixtures/test-html/L0/text-article.html | 75 --------- fixtures/test-html/L0/text-color.html | 51 ++++++ fixtures/test-html/L0/text-decoration.html | 44 ++++++ .../test-html/L0/text-font-properties.html | 111 +++++++++++++ .../test-html/L0/text-inline-formatting.html | 51 ------ .../test-html/L0/text-letter-spacing.html | 61 ++++++++ fixtures/test-html/L0/text-line-height.html | 81 ++++++++++ fixtures/test-html/L0/text-typography.html | 80 ---------- 33 files changed, 1882 insertions(+), 700 deletions(-) create mode 100644 fixtures/test-html/L0/box-dimensions.html create mode 100644 fixtures/test-html/L0/box-padding.html delete mode 100644 fixtures/test-html/L0/hello-div.html delete mode 100644 fixtures/test-html/L0/hello.html create mode 100644 fixtures/test-html/L0/layout-display-none.html create mode 100644 fixtures/test-html/L0/layout-flex-column.html create mode 100644 fixtures/test-html/L0/layout-flex-row.html delete mode 100644 fixtures/test-html/L0/layout-flex.html create mode 100644 fixtures/test-html/L0/mixed-card.html create mode 100644 fixtures/test-html/L0/mixed-inline-style.html create mode 100644 fixtures/test-html/L0/paint-background-solid.html create mode 100644 fixtures/test-html/L0/paint-border-radius.html create mode 100644 fixtures/test-html/L0/paint-border-style.html create mode 100644 fixtures/test-html/L0/paint-gradient-linear.html create mode 100644 fixtures/test-html/L0/paint-gradient-radial.html create mode 100644 fixtures/test-html/L0/paint-opacity.html create mode 100644 fixtures/test-html/L0/paint-shadow.html delete mode 100644 fixtures/test-html/L0/painting-bg-gradient.html delete mode 100644 fixtures/test-html/L0/painting-borders.html delete mode 100644 fixtures/test-html/L0/painting-fg-gradient.html delete mode 100644 fixtures/test-html/L0/structure-div-nested.html delete mode 100644 fixtures/test-html/L0/structure-table.html create mode 100644 fixtures/test-html/L0/text-align.html delete mode 100644 fixtures/test-html/L0/text-article.html create mode 100644 fixtures/test-html/L0/text-color.html create mode 100644 fixtures/test-html/L0/text-decoration.html create mode 100644 fixtures/test-html/L0/text-font-properties.html delete mode 100644 fixtures/test-html/L0/text-inline-formatting.html create mode 100644 fixtures/test-html/L0/text-letter-spacing.html create mode 100644 fixtures/test-html/L0/text-line-height.html delete mode 100644 fixtures/test-html/L0/text-typography.html diff --git a/fixtures/test-html/L0/README.md b/fixtures/test-html/L0/README.md index ed237c0270..94d765ebb2 100644 --- a/fixtures/test-html/L0/README.md +++ b/fixtures/test-html/L0/README.md @@ -1,18 +1,86 @@ ## `fixtures/test-html/L0` -This directory holds the baseline HTML fixtures that mirror the `test-svg/L0` coverage but for DOM rendering. Each file captures a narrowly scoped behavior (structure, text, painting, layout) with self-contained markup so parsers and renderers can exercise specific branches without relying on external assets. +Baseline HTML fixtures for the HTML→IR conversion pipeline (`crates/grida-canvas/src/html/`). Each file tests a specific CSS property group using only features the pipeline currently supports. + +### Naming Convention + +| Prefix | Scope | +| ---------- | ------------------------------------------------------ | +| `layout-*` | Display modes, flex layout, visibility | +| `box-*` | Dimensions, padding | +| `paint-*` | Backgrounds, borders, shadows, opacity | +| `text-*` | Font properties, color, alignment, spacing, decoration | +| `mixed-*` | Integration tests combining multiple properties | + +### Fixture Files (21) + +**Layout** + +- `layout-block.html` — block flow, padding, overflow clip +- `layout-flex-row.html` — flex row: space-between, wrap, flex-grow +- `layout-flex-column.html` — flex column: all 6 justify-content variants +- `layout-display-none.html` — display:none skips elements + +**Box Model** + +- `box-dimensions.html` — width, height, min/max constraints +- `box-padding.html` — uniform, horizontal, vertical, asymmetric padding + +**Paint** + +- `paint-background-solid.html` — background-color (hex, rgb, rgba, named) +- `paint-gradient-linear.html` — linear-gradient directions and multi-stop +- `paint-gradient-radial.html` — radial-gradient, stacked on solid +- `paint-border-style.html` — border width, color, style (solid/dashed/dotted), per-side +- `paint-border-radius.html` — uniform, pill, circle, single-corner, elliptical +- `paint-shadow.html` — box-shadow: drop, blur+spread, inset, combined +- `paint-opacity.html` — element opacity (1.0, 0.75, 0.5, 0.25) + +**Text** + +- `text-font-properties.html` — font-size, font-weight, font-family, font-style +- `text-color.html` — color (hex, rgb, rgba, named, inherited) +- `text-align.html` — text-align (left, right, center, justify) +- `text-line-height.html` — line-height (unitless, px) +- `text-letter-spacing.html` — letter-spacing (0, 2px, 5px) +- `text-decoration.html` — underline, overline, line-through + +**Mixed** + +- `mixed-card.html` — realistic card with flex, padding, gap, bg, radius, border, shadow, typography +- `mixed-inline-style.html` — style="" attribute overriding stylesheet rules ### Authoring Rules -1. ` + + +
+
+
width: 200px; height: 60px
+
200 × 60
+
+
+
min-width: 300px
+
min-w 300
+
+
+
max-width: 180px
+
max-w 180
+
+
+
min-height: 80px
+
min-h 80
+
+
+
max-height: 40px + overflow:hidden
+
max-h 40 (clipped)
+
+
+
+ min-width: 120px; max-width: 400px; width: 260px +
+
mixed constraints
+
+
+ + diff --git a/fixtures/test-html/L0/box-padding.html b/fixtures/test-html/L0/box-padding.html new file mode 100644 index 0000000000..9e75523d08 --- /dev/null +++ b/fixtures/test-html/L0/box-padding.html @@ -0,0 +1,82 @@ + + + + + Box: Padding + + + +
+
+
padding: 24px (uniform)
+
+
content
+
+
+
+
padding: 8px 32px (horizontal)
+
+
content
+
+
+
+
padding: 32px 8px (vertical)
+
+
content
+
+
+
+
padding: 8px 16px 32px 48px
+
+
content
+
+
+
+ + diff --git a/fixtures/test-html/L0/hello-div.html b/fixtures/test-html/L0/hello-div.html deleted file mode 100644 index 05fb3adc5b..0000000000 --- a/fixtures/test-html/L0/hello-div.html +++ /dev/null @@ -1,3 +0,0 @@ -
- hello div -
\ No newline at end of file diff --git a/fixtures/test-html/L0/hello.html b/fixtures/test-html/L0/hello.html deleted file mode 100644 index 132d07253a..0000000000 --- a/fixtures/test-html/L0/hello.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - -

Hello, HTML!

- - - \ No newline at end of file diff --git a/fixtures/test-html/L0/layout-block.html b/fixtures/test-html/L0/layout-block.html index 98b3a0eece..33b7e3d8ad 100644 --- a/fixtures/test-html/L0/layout-block.html +++ b/fixtures/test-html/L0/layout-block.html @@ -1,66 +1,68 @@ - + - Layout – Block Flow + Layout: Block Flow - - -
-
-

Block Flow Layout

-

Each region stacks vertically and spans the available inline size.

-
-
-
-

Article A

-

Demonstrates default block behavior within a block-level parent.

-
-
-

Article B

-

Blocks consume full width, pushing the following sibling downward.

-
-
- -
- Footer sticks to the end of the flow. -
-
- - + + +
+
Block 1 with padding
+
+ +
+ +
+
Block 2 — nested padding
+
+
Second child in block 2
+
+
+ +
+
+ This container has overflow: hidden and a fixed height. The content + below should be clipped and not visible in the rendered output. +
+
+
This text should be clipped.
+
+ + diff --git a/fixtures/test-html/L0/layout-display-none.html b/fixtures/test-html/L0/layout-display-none.html new file mode 100644 index 0000000000..bde37c361c --- /dev/null +++ b/fixtures/test-html/L0/layout-display-none.html @@ -0,0 +1,43 @@ + + + + + Layout: display:none + + + +
+
1 — visible
+ +
3 — visible
+ +
5 — visible
+
+ + diff --git a/fixtures/test-html/L0/layout-flex-column.html b/fixtures/test-html/L0/layout-flex-column.html new file mode 100644 index 0000000000..1cdbe46b31 --- /dev/null +++ b/fixtures/test-html/L0/layout-flex-column.html @@ -0,0 +1,124 @@ + + + + + Layout: Flex Column + + + +
+
+
flex-start
+
+
A
+
B
+
C
+
+
+ +
+
center
+
+
A
+
B
+
C
+
+
+ +
+
flex-end
+
+
A
+
B
+
C
+
+
+ +
+
space-between
+
+
A
+
B
+
C
+
+
+ +
+
space-around
+
+
A
+
B
+
C
+
+
+ +
+
space-evenly
+
+
A
+
B
+
C
+
+
+
+ + diff --git a/fixtures/test-html/L0/layout-flex-row.html b/fixtures/test-html/L0/layout-flex-row.html new file mode 100644 index 0000000000..07df48c77d --- /dev/null +++ b/fixtures/test-html/L0/layout-flex-row.html @@ -0,0 +1,146 @@ + + + + + Layout: Flex Row + + + + +
+
+ justify-content: space-between, align-items: center +
+
+
A
+
B tall
+
C
+
D
+
+
+ + +
+
flex-wrap: wrap
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+
+ + +
+
flex-grow on middle child
+
+
Fixed
+
Grows
+
Fixed
+
+
+ + diff --git a/fixtures/test-html/L0/layout-flex.html b/fixtures/test-html/L0/layout-flex.html deleted file mode 100644 index baf53d42e5..0000000000 --- a/fixtures/test-html/L0/layout-flex.html +++ /dev/null @@ -1,80 +0,0 @@ - - - - - Layout – Flexbox - - - -
-

Row Flex

-
-
Box A
-
Box B
-
Box C
-
Box D
-
-
-
-

Row aligned

-
-
Start
-
Center
-
End
-
-
-
-

Column Flex

-
-
Col 1
-
Col 2
-
Col 3
-
-
- - - diff --git a/fixtures/test-html/L0/mixed-card.html b/fixtures/test-html/L0/mixed-card.html new file mode 100644 index 0000000000..489a7b088a --- /dev/null +++ b/fixtures/test-html/L0/mixed-card.html @@ -0,0 +1,123 @@ + + + + + Mixed: Card Component + + + +
+
+
Canvas Renderer
+
+ High-performance 2D rendering engine built on Skia with support for + complex scene graphs and real-time interaction. +
+
+ Rust + Skia + WASM +
+
+ Status + Active +
+
+ +
+
Form Builder
+
+ Drag-and-drop form editor with conditional logic, validation rules, + and multi-step workflows. +
+
+ React + TypeScript +
+
+ Status + Stable +
+
+
+ + diff --git a/fixtures/test-html/L0/mixed-inline-style.html b/fixtures/test-html/L0/mixed-inline-style.html new file mode 100644 index 0000000000..4dec0deb9f --- /dev/null +++ b/fixtures/test-html/L0/mixed-inline-style.html @@ -0,0 +1,88 @@ + + + + + Mixed: Inline Style Override + + + +
+
+
class only (no inline override)
+
Default from stylesheet
+
+ +
+
inline font-size override
+
+ font-size: 24px via style="" +
+
+ +
+
inline color override
+
+ color: #f59e0b via style="" +
+
+ +
+
inline background override
+
+ background: #6366f1 via style="" +
+
+ +
+
inline padding + border-radius override
+
+ padding + radius via style="" +
+
+ +
+
multiple inline overrides combined
+
+ all overrides combined +
+
+
+ + diff --git a/fixtures/test-html/L0/paint-background-solid.html b/fixtures/test-html/L0/paint-background-solid.html new file mode 100644 index 0000000000..db8b9e1843 --- /dev/null +++ b/fixtures/test-html/L0/paint-background-solid.html @@ -0,0 +1,88 @@ + + + + + Paint: Solid Background + + + +
+
+
#6366f1
+
hex6
+
+
+
#f0f
+
hex3
+
+
+
rgb(34,197,94)
+
rgb
+
+
+
rgba(239,68,68,0.7)
+
rgba
+
+
+
dodgerblue
+
named
+
+
+
white
+
white
+
+
+ + diff --git a/fixtures/test-html/L0/paint-border-radius.html b/fixtures/test-html/L0/paint-border-radius.html new file mode 100644 index 0000000000..44232c9e6a --- /dev/null +++ b/fixtures/test-html/L0/paint-border-radius.html @@ -0,0 +1,89 @@ + + + + + Paint: Border Radius + + + +
+
+
12px uniform
+
uniform
+
+
+
pill (9999px)
+
pill
+
+
+
circle (50%)
+
circle
+
+
+
top-left only (24px)
+
tl-only
+
+
+
mixed (4/24/4/24)
+
mixed
+
+
+
elliptical (50%/25%)
+
elliptical
+
+
+ + diff --git a/fixtures/test-html/L0/paint-border-style.html b/fixtures/test-html/L0/paint-border-style.html new file mode 100644 index 0000000000..766fc0ef14 --- /dev/null +++ b/fixtures/test-html/L0/paint-border-style.html @@ -0,0 +1,84 @@ + + + + + Paint: Border Style + + + +
+
+
3px solid
+
solid
+
+
+
3px dashed
+
dashed
+
+
+
3px dotted
+
dotted
+
+
+
6px solid (thick)
+
thick
+
+
+
per-side (2/4/6/8)
+
per-side
+
+
+ + diff --git a/fixtures/test-html/L0/paint-gradient-linear.html b/fixtures/test-html/L0/paint-gradient-linear.html new file mode 100644 index 0000000000..861adf1b8a --- /dev/null +++ b/fixtures/test-html/L0/paint-gradient-linear.html @@ -0,0 +1,93 @@ + + + + + Paint: Linear Gradient + + + +
+
+
to right
+
to right
+
+
+
to bottom
+
to bottom
+
+
+
135deg
+
135deg
+
+
+
to bottom left
+
to bottom left
+
+
+
multi-stop (4 colors)
+
multi-stop
+
+
+
to top
+
to top
+
+
+ + diff --git a/fixtures/test-html/L0/paint-gradient-radial.html b/fixtures/test-html/L0/paint-gradient-radial.html new file mode 100644 index 0000000000..6e9a7d209c --- /dev/null +++ b/fixtures/test-html/L0/paint-gradient-radial.html @@ -0,0 +1,77 @@ + + + + + Paint: Radial Gradient + + + +
+
+
simple (2 stops)
+
simple
+
+
+
multi-stop (4 colors)
+
multi-stop
+
+
+
stacked on solid bg
+
stacked
+
+
+ + diff --git a/fixtures/test-html/L0/paint-opacity.html b/fixtures/test-html/L0/paint-opacity.html new file mode 100644 index 0000000000..34673f4895 --- /dev/null +++ b/fixtures/test-html/L0/paint-opacity.html @@ -0,0 +1,103 @@ + + + + + Paint: Opacity + + + +
+
Boxes at different opacities
+
+
+
1.0
+
100%
+
+
+
0.75
+
75%
+
+
+
0.5
+
50%
+
+
+
0.25
+
25%
+
+
+
+ +
+
Text at different opacities
+
+
opacity: 1.0
+
opacity: 0.75
+
opacity: 0.5
+
opacity: 0.25
+
+
+ + diff --git a/fixtures/test-html/L0/paint-shadow.html b/fixtures/test-html/L0/paint-shadow.html new file mode 100644 index 0000000000..0c397fba19 --- /dev/null +++ b/fixtures/test-html/L0/paint-shadow.html @@ -0,0 +1,76 @@ + + + + + Paint: Box Shadow + + + +
+
+
drop shadow
+
drop
+
+
+
blur + spread
+
blur+spread
+
+
+
inset
+
inset
+
+
+
combined (drop + inset)
+
combined
+
+
+ + diff --git a/fixtures/test-html/L0/painting-bg-gradient.html b/fixtures/test-html/L0/painting-bg-gradient.html deleted file mode 100644 index e9560ff5a8..0000000000 --- a/fixtures/test-html/L0/painting-bg-gradient.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - Painting – Background Gradient - - - -
-

Layered background

-

- Shows radial and linear gradients stacked with translucency to validate painting order and - blend behavior. -

-
- - - diff --git a/fixtures/test-html/L0/painting-borders.html b/fixtures/test-html/L0/painting-borders.html deleted file mode 100644 index a9e492b5a6..0000000000 --- a/fixtures/test-html/L0/painting-borders.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - Painting – Borders - - - -
-
Solid border
-
Dashed border
-
Gradient border
-
Shadowed border
-
- - - diff --git a/fixtures/test-html/L0/painting-fg-gradient.html b/fixtures/test-html/L0/painting-fg-gradient.html deleted file mode 100644 index c1b3334d0d..0000000000 --- a/fixtures/test-html/L0/painting-fg-gradient.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - Painting – Foreground Gradient - - - -

Gradient Text

-

- Text rendering demo with layered gradients. The foreground uses - background clipping to produce a smooth transition across glyphs. -

- - - diff --git a/fixtures/test-html/L0/structure-div-nested.html b/fixtures/test-html/L0/structure-div-nested.html deleted file mode 100644 index fc520fce14..0000000000 --- a/fixtures/test-html/L0/structure-div-nested.html +++ /dev/null @@ -1,80 +0,0 @@ - - - - - Structure – Div Nested - - - -
-
-

Nested Regions

-

Demonstrates stacked containers with nested divisions.

-
-
-

Section A

-
-

Group A.1

-
-

Group A.1.a content block.

-
-

Leaf block with inline text only.

-
-
-
-
-
-

Section B

-
-
-

Group B.1 contains two sibling leaves.

-
-

Leaf 1

-
-
-

Leaf 2

-
-
-
-
-
- - - diff --git a/fixtures/test-html/L0/structure-table.html b/fixtures/test-html/L0/structure-table.html deleted file mode 100644 index 5f58cfc949..0000000000 --- a/fixtures/test-html/L0/structure-table.html +++ /dev/null @@ -1,102 +0,0 @@ - - - - - Structure – Lists and Table - - - -
-
-

Lists

-
    -
  1. Step one
    2. -
  2. Step two
    3. -
  3. Step three
    4. -
-
    -
  • Unordered item A
    • -
  • Unordered item B
    • -
  • Unordered item C
    • -
-
-
Term
-
Definition of the term with a short sentence.
-
-
-
-

Table

- - - - - - - - - - - - - - - - - - - - - - - - - -
LayerRoleStatus
HeaderBrandingActive
BodyContentActive
FooterNavigationMuted
-
-
- - - diff --git a/fixtures/test-html/L0/text-align.html b/fixtures/test-html/L0/text-align.html new file mode 100644 index 0000000000..3562bd55c3 --- /dev/null +++ b/fixtures/test-html/L0/text-align.html @@ -0,0 +1,82 @@ + + + + + Text: Alignment + + + +
+
+
text-align: left
+
+ The quick brown fox jumps over the lazy dog. This text is + left-aligned, which is the default for LTR content. +
+
+
+
text-align: right
+
+ The quick brown fox jumps over the lazy dog. This text is + right-aligned, pushing content to the end of the line. +
+
+
+
text-align: center
+
+ The quick brown fox jumps over the lazy dog. This text is centered + within its container. +
+
+
+
text-align: justify
+
+ The quick brown fox jumps over the lazy dog. This text is justified, + stretching words to fill each line evenly from edge to edge. +
+
+
+ + diff --git a/fixtures/test-html/L0/text-article.html b/fixtures/test-html/L0/text-article.html deleted file mode 100644 index 83325e492c..0000000000 --- a/fixtures/test-html/L0/text-article.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - - Text – Article - - - -
-
-

Patterns · Case Study

-

Design tokens for expressive interfaces

-

- · 4 min read -

-
-

- Interfaces communicate intent through hierarchy, rhythm, and motion. A good token system - keeps those variables predictable without flattening the personality of each surface. -

-

- Start with a concise scale, reference design primitives, and capture rationale alongside - every change so the audit trail stays human. -

-
-
Figure 1. Affordance layers across surfaces.
-
-

- When teams remix layers, focus on the relationships: background vs. card, card vs. control. - Document the pairings so experimentation remains predictable. -

- 
token.surface.card = color.neutral.900
-token.surface.raised = mix(token.surface.card, color.primary.500, 12%)
-
Written by the Grida design systems crew.
-
- - - diff --git a/fixtures/test-html/L0/text-color.html b/fixtures/test-html/L0/text-color.html new file mode 100644 index 0000000000..e270016651 --- /dev/null +++ b/fixtures/test-html/L0/text-color.html @@ -0,0 +1,51 @@ + + + + + Text: Color + + + +
+
color: #6366f1 (hex)
+
color: rgb(34, 197, 94)
+
color: rgba(239, 68, 68, 0.7)
+
color: dodgerblue (named)
+
+ parent is #f59e0b + child inherits color +
+
+ + diff --git a/fixtures/test-html/L0/text-decoration.html b/fixtures/test-html/L0/text-decoration.html new file mode 100644 index 0000000000..557f47ab62 --- /dev/null +++ b/fixtures/test-html/L0/text-decoration.html @@ -0,0 +1,44 @@ + + + + + Text: Decoration + + + +
+
no decoration (plain)
+
text-decoration: underline
+
text-decoration: overline
+
text-decoration: line-through
+
+ + diff --git a/fixtures/test-html/L0/text-font-properties.html b/fixtures/test-html/L0/text-font-properties.html new file mode 100644 index 0000000000..047f2d4e59 --- /dev/null +++ b/fixtures/test-html/L0/text-font-properties.html @@ -0,0 +1,111 @@ + + + + + Text: Font Properties + + + +
+
+
font-size
+
+
12px
+
24px
+
48px
+
+
+ +
+
font-weight
+
+
400 normal
+
700 bold
+
900 black
+
+
+ +
+
font-family
+
+
sans-serif
+
serif
+
monospace
+
+
+ +
+
font-style
+
+
normal
+
italic
+
+
+
+ + diff --git a/fixtures/test-html/L0/text-inline-formatting.html b/fixtures/test-html/L0/text-inline-formatting.html deleted file mode 100644 index 467ac1ffd3..0000000000 --- a/fixtures/test-html/L0/text-inline-formatting.html +++ /dev/null @@ -1,51 +0,0 @@ - - - - - Text – Inline Formatting - - - -
-

Strong and bold emphasis.

-

Italic and alternate italic words.

-

- Superscript H2O and subscript CO2. -

-

- Inline code(), strikethrough, and underline. -

-

- Keyboard combo ⌘ + K with highlight. -

-

- CSS abbreviation plus spacing. -

-
- - - diff --git a/fixtures/test-html/L0/text-letter-spacing.html b/fixtures/test-html/L0/text-letter-spacing.html new file mode 100644 index 0000000000..4034daf73d --- /dev/null +++ b/fixtures/test-html/L0/text-letter-spacing.html @@ -0,0 +1,61 @@ + + + + + Text: Letter Spacing + + + +
+
+
letter-spacing: 0
+
The quick brown fox jumps
+
+
+
letter-spacing: 2px
+
The quick brown fox jumps
+
+
+
letter-spacing: 5px
+
The quick brown fox jumps
+
+
+ + diff --git a/fixtures/test-html/L0/text-line-height.html b/fixtures/test-html/L0/text-line-height.html new file mode 100644 index 0000000000..0db55e533e --- /dev/null +++ b/fixtures/test-html/L0/text-line-height.html @@ -0,0 +1,81 @@ + + + + + Text: Line Height + + + +
+
+
line-height: 1.0
+
+ The quick brown fox jumps over the lazy dog. Lines are tightly packed + with no extra spacing between them. +
+
+
+
line-height: 1.5
+
+ The quick brown fox jumps over the lazy dog. Lines have comfortable + spacing, common for body text readability. +
+
+
+
line-height: 2.0
+
+ The quick brown fox jumps over the lazy dog. Lines are double-spaced + with generous vertical room between them. +
+
+
+
line-height: 28px
+
+ The quick brown fox jumps over the lazy dog. Line height set to a + fixed pixel value independent of font size. +
+
+
+ + diff --git a/fixtures/test-html/L0/text-typography.html b/fixtures/test-html/L0/text-typography.html deleted file mode 100644 index 2d95f5f4f8..0000000000 --- a/fixtures/test-html/L0/text-typography.html +++ /dev/null @@ -1,80 +0,0 @@ - - - - - Text – Typography - - - -
-

Heading One

-

- Intro paragraph with a strong word, an emphasized word, and - a link to grida.co. -

-

Heading Two

-

- Additional text with inline code() and a HTML - abbreviation. -

-

Heading Three

-
Typography quote sample highlighted with a border.
-

Heading Four

-

- Highlighted text combined with underline for contrast. -

-
Heading Five
-

- Small print for captions or legal disclaimers. -

-
Heading Six
-
- - - From 1bb6eb107d3ad5ed6dbd3b8f77dd0ab916f4d161 Mon Sep 17 00:00:00 2001 From: Universe Date: Mon, 30 Mar 2026 16:16:34 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20HTML=E2=86=92IR=20conversion=20pi?= =?UTF-8?q?peline=20with=20CSS=20cascade=20support?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add csscascade adapter, cascade driver, and arena DOM modules - Add HTML import module (html/mod.rs) with Stylo-based CSS resolution - Wire grida-dev to load .html files via from_html_str - Support ~35 CSS properties: layout (flex, block, display:none), box model (width/height/min/max/padding/overflow), paint (backgrounds, gradients, borders, shadows, opacity), text (font, color, align, line-height, letter-spacing, word-spacing, text-transform, decoration), and inline style attributes - Map block containers to flex-column for correct flex-child sizing - Emit text-only elements as Container+TextSpan to preserve box model Co-Authored-By: Claude Opus 4.6 --- Cargo.lock | 2 + crates/csscascade/CSS_PROPERTY_MAPPING.md | 278 +++++ crates/csscascade/README.md | 304 ++--- .../csscascade/examples/resolve_and_print.rs | 168 +++ crates/csscascade/src/adapter.rs | 827 +++++++++++++ crates/csscascade/src/cascade.rs | 413 +++++++ crates/csscascade/src/dom.rs | 671 +++++++++++ crates/csscascade/src/lib.rs | 28 +- crates/grida-canvas/Cargo.toml | 3 + crates/grida-canvas/src/html/TODO.md | 101 ++ crates/grida-canvas/src/html/mod.rs | 1054 +++++++++++++++++ crates/grida-canvas/src/lib.rs | 1 + crates/grida-dev/src/main.rs | 21 +- 13 files changed, 3647 insertions(+), 224 deletions(-) create mode 100644 crates/csscascade/CSS_PROPERTY_MAPPING.md create mode 100644 crates/csscascade/examples/resolve_and_print.rs create mode 100644 crates/csscascade/src/adapter.rs create mode 100644 crates/csscascade/src/cascade.rs create mode 100644 crates/csscascade/src/dom.rs create mode 100644 crates/grida-canvas/src/html/TODO.md create mode 100644 crates/grida-canvas/src/html/mod.rs diff --git a/Cargo.lock b/Cargo.lock index 33b00e7ebd..224e3492b9 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -482,6 +482,7 @@ dependencies = [ "async-trait", "clap", "criterion", + "csscascade", "flatbuffers", "futures", "gl", @@ -499,6 +500,7 @@ dependencies = [ "serde", "serde_json", "skia-safe", + "stylo", "taffy", "tokio", "usvg", diff --git a/crates/csscascade/CSS_PROPERTY_MAPPING.md b/crates/csscascade/CSS_PROPERTY_MAPPING.md new file mode 100644 index 0000000000..49686e7662 --- /dev/null +++ b/crates/csscascade/CSS_PROPERTY_MAPPING.md @@ -0,0 +1,278 @@ +# CSS Longhand → Grida IR Property Mapping + +Status legend: +- [x] Clear 1:1 mapping exists +- [~] Partial or approximate mapping (noted) +- [ ] No direct mapping / needs design decision +- [n/a] Not applicable to static rendering + +--- + +## Container (ContainerNodeRec) + +Maps from: `
`, `
`, `
`, `
`, `