From cf28f1769a3a7182d67933669bd0715d27ac8e9b Mon Sep 17 00:00:00 2001 From: Universe Date: Tue, 7 Apr 2026 22:20:14 +0900 Subject: [PATCH] chore(docs): clean up markdown files by removing unnecessary blank lines --- docs/wg/feat-2d/aa-cost-findings.md | 22 +- docs/wg/feat-2d/curve-decoration.md | 1 - docs/wg/feat-2d/htmlcss.md | 533 +++++++++++------- .../feat-2d/investigation-viewport-culling.md | 1 - docs/wg/feat-2d/optimization.md | 4 +- docs/wg/feat-2d/stroke-fill-opacity.md | 1 - 6 files changed, 348 insertions(+), 214 deletions(-) diff --git a/docs/wg/feat-2d/aa-cost-findings.md b/docs/wg/feat-2d/aa-cost-findings.md index 5d77faebe3..a6f24ac604 100644 --- a/docs/wg/feat-2d/aa-cost-findings.md +++ b/docs/wg/feat-2d/aa-cost-findings.md @@ -21,12 +21,12 @@ Hardware: Apple M2 Pro, Metal 4.1, 1000x1000 viewport. ### Results -| Nodes | full (AA on) | 0.02x (AA on) | 0.02x (AA off) | skip (0 draws) | -|-------|-------------|---------------|----------------|----------------| -| 1,000 | 621 µs | 809 µs | 442 µs | 286 µs | -| 5,000 | 1,923 µs | 3,426 µs | 1,535 µs | 271 µs | -| 10,000 | 2,986 µs | 6,221 µs | 2,180 µs | 458 µs | -| 40,000 | 9,628 µs | 21,878 µs | 6,804 µs | 324 µs | +| Nodes | full (AA on) | 0.02x (AA on) | 0.02x (AA off) | skip (0 draws) | +| ------ | ------------ | ------------- | -------------- | -------------- | +| 1,000 | 621 µs | 809 µs | 442 µs | 286 µs | +| 5,000 | 1,923 µs | 3,426 µs | 1,535 µs | 271 µs | +| 10,000 | 2,986 µs | 6,221 µs | 2,180 µs | 458 µs | +| 40,000 | 9,628 µs | 21,878 µs | 6,804 µs | 324 µs | ### Key findings @@ -93,12 +93,12 @@ measure isolated GPU cost, not real-world frame rate. ## Real-scene results (135K nodes, 01-135k.perf.grida) -| Scenario | AA on | AA off | Delta | -|----------|-------|--------|-------| -| baseline_nocache_zoom_slow_fit (0.02x) | 62,038 µs | 60,103 µs | **-3%** | -| mid_flush at fit | 50,599 µs | 48,773 µs | -4% | +| Scenario | AA on | AA off | Delta | +| ------------------------------------------- | --------- | --------- | ------- | +| baseline_nocache_zoom_slow_fit (0.02x) | 62,038 µs | 60,103 µs | **-3%** | +| mid_flush at fit | 50,599 µs | 48,773 µs | -4% | | baseline_nocache_zoom_slow_high (zoomed in) | 21,190 µs | 19,491 µs | **-8%** | -| mid_flush at high zoom | 16,542 µs | 15,009 µs | -9% | +| mid_flush at high zoom | 16,542 µs | 15,009 µs | -9% | The improvement is smaller than the isolated bench predicted (3-9% vs 3.2x) because the real scene has complex Path nodes where picture cache diff --git a/docs/wg/feat-2d/curve-decoration.md b/docs/wg/feat-2d/curve-decoration.md index f495f59afb..4005e3454b 100644 --- a/docs/wg/feat-2d/curve-decoration.md +++ b/docs/wg/feat-2d/curve-decoration.md @@ -6,7 +6,6 @@ tags: - canvas - vector - rendering - --- # Curve Decorations (2D) diff --git a/docs/wg/feat-2d/htmlcss.md b/docs/wg/feat-2d/htmlcss.md index 16193e92c4..54e77bf432 100644 --- a/docs/wg/feat-2d/htmlcss.md +++ b/docs/wg/feat-2d/htmlcss.md @@ -66,68 +66,189 @@ Types from `cg::prelude` reused where they 100% align with CSS semantics: **Status key:** ✅ supported | ⚠️ partial | ❌ not yet -### Display & Layout +### Display & Box Generation | CSS Property | Status | Notes | | ----------------------- | ------ | ------------------------------------------------- | | `display: block` | ✅ | Via Taffy `Display::Block` with margin collapsing | | `display: inline` | ✅ | Merged into parent's Paragraph as InlineRunItem | +| `display: inline-block` | ⚠️ | Treated as inline | | `display: none` | ✅ | Subtree skipped | | `display: flex` | ✅ | Via Taffy — direction, wrap, align, justify, gap | +| `display: inline-flex` | ❌ | | | `display: grid` | ✅ | Via Taffy `Display::Grid` — full property support | +| `display: inline-grid` | ❌ | | | `display: list-item` | ✅ | Marker text generated (bullet/number) | | `display: table` | ⚠️ | Falls back to block flow (no column grid) | -| `display: inline-block` | ⚠️ | Treated as inline | - -### Grid Layout - -| CSS Property | Status | Notes | -| ------------------------- | ------ | -------------------------------------------------- | -| `grid-template-columns` | ✅ | px, %, fr, minmax(), fit-content(), repeat() | -| `grid-template-rows` | ✅ | px, %, fr, minmax(), fit-content(), repeat() | -| `grid-auto-columns` | ✅ | Implicit track sizing | -| `grid-auto-rows` | ✅ | Implicit track sizing | -| `grid-auto-flow` | ✅ | row, column, dense | -| `grid-column` (start/end) | ✅ | Line numbers, span | -| `grid-row` (start/end) | ✅ | Line numbers, span | -| `repeat(auto-fill, ...)` | ✅ | Via Taffy | -| `repeat(auto-fit, ...)` | ✅ | Via Taffy | -| `grid-template-areas` | ❌ | Not collected from Stylo (named areas not mapped) | -| Named grid lines | ❌ | Line names ignored; numeric placement only | -| `subgrid` | ❌ | Taffy does not support subgrid | +| `display: table-row` | ⚠️ | Falls back to flex (faux-table) | +| `display: table-cell` | ⚠️ | Falls back to flex item | +| `display: contents` | ❌ | | +| `display: flow-root` | ❌ | | ### Box Model -| CSS Property | Status | Notes | -| -------------------------- | ------ | ----------------------------------------- | -| `width`, `height` | ✅ | px and auto | -| `min-width`, `max-width` | ✅ | Via Taffy | -| `padding` (all sides) | ✅ | px values | -| `margin` (all sides) | ✅ | px, auto; collapsing via Taffy block flow | -| `border-width/color/style` | ✅ | All sides; solid/dashed/dotted | -| `border-radius` | ✅ | Per-corner elliptical (separate rx/ry) | -| `box-sizing` | ✅ | Via Taffy | +| CSS Property | Status | Notes | +| ----------------------------- | ------ | ----------------------------------------- | +| `width`, `height` | ✅ | px and auto | +| `width`, `height` (%) | ⚠️ | % not resolved against parent | +| `min-width`, `max-width` | ✅ | Via Taffy | +| `min-height`, `max-height` | ✅ | Via Taffy | +| `aspect-ratio` | ❌ | | +| `inline-size`, `block-size` | ❌ | Logical sizing not mapped | +| `min-inline-size`, etc. | ❌ | Logical sizing not mapped | +| `padding` (all sides) | ✅ | px values | +| `margin` (all sides) | ✅ | px, auto; collapsing via Taffy block flow | +| `box-sizing` | ✅ | Via Taffy | +| `overflow` | ✅ | hidden/clip via canvas clip_rect | +| `overflow-x`, `overflow-y` | ⚠️ | Mapped to single overflow axis | +| `overflow-clip-margin` | ❌ | | +| `overflow-wrap` / `word-wrap` | ❌ | | +| `resize` | ❌ | | + +### Positioning + +| CSS Property | Status | Notes | +| -------------------------------- | ------ | --------------------------------------- | +| `position: static` | ✅ | Default | +| `position: relative` | ✅ | Via Taffy | +| `position: absolute` | ✅ | Via Taffy | +| `position: fixed` | ❌ | | +| `position: sticky` | ❌ | | +| `top`, `right`, `bottom`, `left` | ⚠️ | Stub in collect.rs, returns defaults | +| `inset` (shorthand) | ❌ | | +| `inset-block`, `inset-inline` | ❌ | Logical insets not mapped | +| `z-index` | ⚠️ | Stored but not used for paint order | +| `float` | ❌ | Recognized in collect, no layout effect | +| `clear` | ❌ | Recognized in collect, no layout effect | + +### Flexbox + +| CSS Property | Status | Notes | +| ----------------- | ------ | --------------------------- | +| `flex-direction` | ✅ | Via Taffy | +| `flex-wrap` | ✅ | Via Taffy | +| `flex-flow` | ✅ | Shorthand; direction + wrap | +| `align-items` | ✅ | Via Taffy | +| `align-self` | ✅ | Via Taffy | +| `align-content` | ✅ | Via Taffy | +| `justify-content` | ✅ | Via Taffy | +| `justify-items` | ❌ | | +| `justify-self` | ❌ | | +| `place-content` | ❌ | Shorthand | +| `place-items` | ❌ | Shorthand | +| `place-self` | ❌ | Shorthand | +| `flex-grow` | ✅ | Via Taffy | +| `flex-shrink` | ✅ | Via Taffy | +| `flex-basis` | ✅ | Via Taffy | +| `flex` | ✅ | Shorthand | +| `gap` | ✅ | Via Taffy | +| `row-gap` | ✅ | Via Taffy | +| `column-gap` | ✅ | Via Taffy | +| `order` | ❌ | | + +### Grid + +| CSS Property | Status | Notes | +| ------------------------ | ------ | ------------------------------------------------- | +| `grid-template-columns` | ✅ | px, %, fr, minmax(), fit-content(), repeat() | +| `grid-template-rows` | ✅ | px, %, fr, minmax(), fit-content(), repeat() | +| `grid-template-areas` | ❌ | Not collected from Stylo (named areas not mapped) | +| `grid-template` | ❌ | Shorthand | +| `grid-auto-columns` | ✅ | Implicit track sizing | +| `grid-auto-rows` | ✅ | Implicit track sizing | +| `grid-auto-flow` | ✅ | row, column, dense | +| `grid-column-start/end` | ✅ | Line numbers, span | +| `grid-row-start/end` | ✅ | Line numbers, span | +| `grid-column` | ✅ | Shorthand | +| `grid-row` | ✅ | Shorthand | +| `grid-area` | ❌ | Named area placement not supported | +| `grid` | ❌ | Shorthand | +| `repeat(auto-fill, ...)` | ✅ | Via Taffy | +| `repeat(auto-fit, ...)` | ✅ | Via Taffy | +| Named grid lines | ❌ | Line names ignored; numeric placement only | +| `subgrid` | ❌ | Taffy does not support subgrid | + +### Sizing Keywords + +| CSS Property | Status | Notes | +| ---------------------------- | ------ | ------------------------- | +| `min-content`, `max-content` | ❌ | Intrinsic sizing keywords | +| `fit-content` | ❌ | | +| `contain-intrinsic-size` | ❌ | | ### Background | CSS Property | Status | Notes | | ------------------------- | ------ | ----------------------------------- | | `background-color` | ✅ | Solid color with border-radius | +| `background-image: url()` | ❌ | | | `linear-gradient()` | ✅ | All directions + angles, multi-stop | | `radial-gradient()` | ✅ | Circle/ellipse | | `conic-gradient()` | ✅ | Sweep gradient | | Multi-layer backgrounds | ✅ | Stacked gradient + solid layers | -| `background-image: url()` | ❌ | | +| `background-position` | ❌ | | +| `background-size` | ❌ | | +| `background-repeat` | ❌ | | +| `background-origin` | ❌ | | +| `background-clip` | ❌ | | +| `background-attachment` | ❌ | | +| `background-blend-mode` | ❌ | Different from `mix-blend-mode` | +| `background` (shorthand) | ⚠️ | Color and gradient layers only | + +### Border + +| CSS Property | Status | Notes | +| -------------------------- | ------ | ------------------------------------------ | +| `border-width` (all sides) | ✅ | | +| `border-color` (all sides) | ✅ | | +| `border-style` (all sides) | ✅ | solid/dashed/dotted painted; rest fallback | +| `border-style: groove` | ❌ | Enum defined, paint falls back to solid | +| `border-style: ridge` | ❌ | Enum defined, paint falls back to solid | +| `border-style: inset` | ❌ | Enum defined, paint falls back to solid | +| `border-style: outset` | ❌ | Enum defined, paint falls back to solid | +| `border-style: double` | ❌ | Enum defined, paint falls back to solid | +| `border-radius` | ✅ | Per-corner elliptical (separate rx/ry) | +| `border` (shorthand) | ✅ | | +| `border-image` | ❌ | | +| `border-image-outset` | ❌ | | +| `border-image-repeat` | ❌ | | +| `border-image-slice` | ❌ | | +| `border-image-source` | ❌ | | +| `border-image-width` | ❌ | | +| `border-collapse` | ❌ | | +| `border-spacing` | ❌ | | +| Logical border properties | ❌ | `border-block-*`, `border-inline-*` | + +### Outline + +| CSS Property | Status | Notes | +| ---------------- | ------ | ----- | +| `outline` | ❌ | | +| `outline-color` | ❌ | | +| `outline-style` | ❌ | | +| `outline-width` | ❌ | | +| `outline-offset` | ❌ | | -### Text & Font +### Box Shadow -#### Color & Inheritance +| CSS Property | Status | Notes | +| -------------------- | ------ | ------------------------------------ | +| `box-shadow` (outer) | ✅ | blur, spread, offset, border-radius | +| `box-shadow: inset` | ✅ | clip + EvenOdd frame via PathBuilder | +| Multiple shadows | ✅ | All shadows stacked in order | + +### Color -| CSS Property | Status | Notes | -| ------------ | ------ | --------- | -| `color` | ✅ | Inherited | +| CSS Property | Status | Notes | +| --------------------- | ------ | --------------------- | +| `color` | ✅ | Inherited | +| `opacity` | ✅ | Via canvas save_layer | +| `color-scheme` | ❌ | | +| `accent-color` | ❌ | | +| `forced-color-adjust` | ❌ | | +| `print-color-adjust` | ❌ | | -#### Font Properties +### Font | CSS Property | Status | Notes | | --------------------------- | ------ | ----------------------------------------- | @@ -155,8 +276,9 @@ Types from `cg::prelude` reused where they 100% align with CSS semantics: | `font-feature-settings` | ❌ | | | `font-variation-settings` | ❌ | | | `font-language-override` | ❌ | | +| `font-palette` | ❌ | | -#### Text Layout +### Text Layout | CSS Property | Status | Notes | | ----------------------------- | ------ | ------------------------------------------- | @@ -169,6 +291,7 @@ Types from `cg::prelude` reused where they 100% align with CSS semantics: | `text-indent` | ❌ | Field defined in FontProps, not extracted | | `text-transform` | ✅ | uppercase, lowercase, capitalize | | `white-space` | ✅ | normal, pre, pre-wrap, pre-line, nowrap | +| `white-space-collapse` | ❌ | | | `word-break` | ❌ | | | `overflow-wrap` / `word-wrap` | ❌ | | | `line-break` | ❌ | | @@ -182,8 +305,11 @@ Types from `cg::prelude` reused where they 100% align with CSS semantics: | `text-wrap-style` | ❌ | | | `hanging-punctuation` | ❌ | | | `text-spacing-trim` | ❌ | | +| `text-autospace` | ❌ | | +| `widows` | ❌ | | +| `orphans` | ❌ | | -#### Text Decoration +### Text Decoration | CSS Property | Status | Notes | | ----------------------------- | ------ | ----------------------------------------------------------- | @@ -196,22 +322,17 @@ Types from `cg::prelude` reused where they 100% align with CSS semantics: | `text-underline-position` | ❌ | | | `text-underline-offset` | ❌ | | -#### Text Emphasis - -| CSS Property | Status | Notes | -| ------------------------ | ------ | ----- | -| `text-emphasis` | ❌ | | -| `text-emphasis-style` | ❌ | | -| `text-emphasis-color` | ❌ | | -| `text-emphasis-position` | ❌ | | +### Text Shadow & Emphasis -#### Text Shadow +| CSS Property | Status | Notes | +| ------------------------ | ------ | ------------------ | +| `text-shadow` | ❌ | Not in type schema | +| `text-emphasis` | ❌ | | +| `text-emphasis-style` | ❌ | | +| `text-emphasis-color` | ❌ | | +| `text-emphasis-position` | ❌ | | -| CSS Property | Status | Notes | -| ------------- | ------ | ------------------ | -| `text-shadow` | ❌ | Not in type schema | - -#### Writing Modes & BiDi +### Writing Modes & BiDi | CSS Property | Status | Notes | | ---------------------- | ------ | ----- | @@ -221,7 +342,7 @@ Types from `cg::prelude` reused where they 100% align with CSS semantics: | `text-orientation` | ❌ | | | `text-combine-upright` | ❌ | | -#### Inline Layout & Alignment +### Inline Layout & Alignment | CSS Property | Status | Notes | | -------------------- | ------ | --------------------------- | @@ -231,24 +352,13 @@ Types from `cg::prelude` reused where they 100% align with CSS semantics: | `baseline-shift` | ❌ | | | `initial-letter` | ❌ | | -#### Ruby +### Ruby | CSS Property | Status | Notes | | --------------- | ------ | ----- | | `ruby-position` | ❌ | | | `ruby-align` | ❌ | | - -### Inline Elements - -| Feature | Status | Notes | -| ---------------------------------- | ------ | ------------------------------------------------------------------ | -| ``, ``, ``, `` | ✅ | Bold/italic via font properties | -| ``, `` | ✅ | Underline decoration | -| ``, ``, `` | ✅ | Line-through decoration | -| `` | ✅ | Smaller font size | -| ``, ``, `` | ✅ | Background, border, border-radius, padding via InlineBoxDecoration | -| Inline box padding as layout space | ✅ | Skia placeholders at OpenBox/CloseBox boundaries | -| Text wrapping with inline boxes | ✅ | Taffy MeasureFunc with Skia Paragraph | +| `ruby-overhang` | ❌ | | ### Lists @@ -259,106 +369,33 @@ Types from `cg::prelude` reused where they 100% align with CSS semantics: | `lower-alpha`, `upper-alpha` | ✅ | | | `lower-roman`, `upper-roman` | ❌ | Stylo servo-mode limitation (servo/stylo#349) | | `list-style-type: none` | ✅ | | +| `list-style-image` | ❌ | | +| `list-style-position` | ❌ | | +| `list-style` (shorthand) | ⚠️ | type only | | Nested lists | ✅ | Independent counters per list | ### Visual Effects -| CSS Property | Status | Notes | -| -------------------- | ------ | ----------------------------------- | -| `opacity` | ✅ | Via canvas save_layer | -| `visibility` | ✅ | hidden/collapse skips painting | -| `overflow` | ✅ | hidden/clip via canvas clip_rect | -| `box-shadow` (outer) | ✅ | blur, spread, offset, border-radius | -| `box-shadow` (inset) | ✅ | clip + EvenOdd frame via PathBuilder | -| `box-shadow` (multi) | ✅ | Multiple shadows stacked | -| `mix-blend-mode` | ✅ | All CSS blend modes | - -### Positioning - -| CSS Property | Status | Notes | -| -------------------- | ------ | ----------------------------------- | -| `position: static` | ✅ | Default | -| `position: relative` | ✅ | Via Taffy | -| `position: absolute` | ✅ | Via Taffy | -| `z-index` | ⚠️ | Stored but not used for paint order | - -### Grid Layout - -| CSS Property | Status | Notes | -| ------------------------------------- | ------ | ---------------------------------------- | -| `display: grid` | ⚠️ | Taffy `Display::Grid`, no grid props yet | -| `grid-template-columns` | ❌ | | -| `grid-template-rows` | ❌ | | -| `grid-template-areas` | ❌ | | -| `grid-auto-columns`, `grid-auto-rows` | ❌ | | -| `grid-auto-flow` | ❌ | | -| `grid-column`, `grid-row` | ❌ | | -| `gap` (row-gap, column-gap) | ✅ | Flex/grid gap via Taffy | - -### Flexbox (detail) - -| CSS Property | Status | Notes | -| ----------------- | ------ | --------- | -| `flex-direction` | ✅ | Via Taffy | -| `flex-wrap` | ✅ | Via Taffy | -| `align-items` | ✅ | Via Taffy | -| `align-self` | ✅ | Via Taffy | -| `align-content` | ✅ | Via Taffy | -| `justify-content` | ✅ | Via Taffy | -| `justify-items` | ❌ | | -| `justify-self` | ❌ | | -| `flex-grow` | ✅ | Via Taffy | -| `flex-shrink` | ✅ | Via Taffy | -| `flex-basis` | ✅ | Via Taffy | -| `order` | ❌ | | - -### Sizing & Intrinsic Keywords - -| CSS Property | Status | Notes | -| ---------------------------- | ------ | -------------------------------- | -| `width`, `height` (%) | ⚠️ | px and auto only; % not resolved | -| `aspect-ratio` | ❌ | | -| `min-content`, `max-content` | ❌ | Intrinsic sizing keywords | -| `fit-content` | ❌ | | - -### Background (extended) - -| CSS Property | Status | Notes | -| ------------------------- | ------ | ----- | -| `background-position` | ❌ | | -| `background-size` | ❌ | | -| `background-repeat` | ❌ | | -| `background-origin` | ❌ | | -| `background-clip` | ❌ | | -| `background-attachment` | ❌ | | -| `background-image: url()` | ❌ | | - -### Box Shadow (detail) - -| CSS Property | Status | Notes | -| -------------------- | ------ | ----------------------------------- | -| `box-shadow` (outer) | ✅ | blur, spread, offset, border-radius | -| `box-shadow: inset` | ✅ | clip + EvenOdd frame via PathBuilder | -| Multiple shadows | ✅ | All shadows stacked in order | - -### Positioning (extended) - -| CSS Property | Status | Notes | -| -------------------------------- | ------ | --------------------------------------- | -| `position: fixed` | ❌ | | -| `position: sticky` | ❌ | | -| `top`, `right`, `bottom`, `left` | ⚠️ | Stub in collect.rs, returns defaults | -| `z-index` | ⚠️ | Stored but not used for paint order | -| `float` | ❌ | Recognized in collect, no layout effect | -| `clear` | ❌ | Recognized in collect, no layout effect | +| CSS Property | Status | Notes | +| ---------------- | ------ | ------------------------------ | +| `opacity` | ✅ | Via canvas save_layer | +| `visibility` | ✅ | hidden/collapse skips painting | +| `mix-blend-mode` | ✅ | All CSS blend modes | +| `isolation` | ❌ | | -### Transform & 3D +### Transform | CSS Property | Status | Notes | | --------------------- | ------ | ----- | | `transform` | ❌ | | | `transform-origin` | ❌ | | +| `transform-box` | ❌ | | +| `transform-style` | ❌ | | +| `translate` | ❌ | | +| `rotate` | ❌ | | +| `scale` | ❌ | | | `perspective` | ❌ | | +| `perspective-origin` | ❌ | | | `backface-visibility` | ❌ | | ### Filter & Effects @@ -368,27 +405,28 @@ Types from `cg::prelude` reused where they 100% align with CSS semantics: | `filter` | ❌ | | | `backdrop-filter` | ❌ | | | `clip-path` | ❌ | | +| `clip-rule` | ❌ | | | `mask` | ❌ | | | `mask-image` | ❌ | | +| `mask-clip` | ❌ | | +| `mask-composite` | ❌ | | +| `mask-mode` | ❌ | | +| `mask-origin` | ❌ | | +| `mask-position` | ❌ | | +| `mask-repeat` | ❌ | | +| `mask-size` | ❌ | | +| `mask-type` | ❌ | | -### Outline - -| CSS Property | Status | Notes | -| ---------------- | ------ | ----- | -| `outline` | ❌ | | -| `outline-offset` | ❌ | | - -### Table Layout +### CSS Motion Path (Offset) -| CSS Property | Status | Notes | -| --------------------- | ------ | ------------------------------- | -| `display: table` | ⚠️ | Falls back to block flow | -| `display: table-row` | ⚠️ | Falls back to flex (faux-table) | -| `display: table-cell` | ⚠️ | Falls back to flex item | -| `border-collapse` | ❌ | | -| `border-spacing` | ❌ | | -| `table-layout` | ❌ | | -| `caption-side` | ❌ | | +| CSS Property | Status | Notes | +| ----------------- | ------ | ----- | +| `offset` | ❌ | | +| `offset-path` | ❌ | | +| `offset-distance` | ❌ | | +| `offset-rotate` | ❌ | | +| `offset-anchor` | ❌ | | +| `offset-position` | ❌ | | ### Multi-column Layout @@ -396,10 +434,24 @@ Types from `cg::prelude` reused where they 100% align with CSS semantics: | -------------- | ------ | ------------------------------ | | `columns` | ❌ | | | `column-count` | ❌ | | +| `column-width` | ❌ | | | `column-gap` | ✅ | Via Taffy gap (flex/grid only) | | `column-rule` | ❌ | | | `column-span` | ❌ | | -| `column-width` | ❌ | | +| `column-fill` | ❌ | | +| `break-before` | ❌ | | +| `break-after` | ❌ | | +| `break-inside` | ❌ | | + +### Table Layout + +| CSS Property | Status | Notes | +| ----------------- | ------ | ----- | +| `table-layout` | ❌ | | +| `border-collapse` | ❌ | | +| `border-spacing` | ❌ | | +| `caption-side` | ❌ | | +| `empty-cells` | ❌ | | ### Generated Content & Counters @@ -408,8 +460,90 @@ Types from `cg::prelude` reused where they 100% align with CSS semantics: | `content` (::before/after) | ❌ | Pseudo-elements not supported | | `counter-reset` | ❌ | Internal counters for `
    ` only | | `counter-increment` | ❌ | | +| `counter-set` | ❌ | | | `quotes` | ❌ | | +### Scroll Snap + +| CSS Property | Status | Notes | +| --------------------- | ------ | ------------------ | +| `scroll-snap-type` | ❌ | Static render only | +| `scroll-snap-align` | ❌ | Static render only | +| `scroll-snap-stop` | ❌ | Static render only | +| `scroll-padding` | ❌ | | +| `scroll-margin` | ❌ | | +| `scroll-behavior` | ❌ | | +| `overscroll-behavior` | ❌ | | + +### Scrollbar + +| CSS Property | Status | Notes | +| ------------------ | ------ | ----- | +| `scrollbar-width` | ❌ | | +| `scrollbar-color` | ❌ | | +| `scrollbar-gutter` | ❌ | | + +### Contain & Content Visibility + +| CSS Property | Status | Notes | +| -------------------- | ------ | ----- | +| `contain` | ❌ | | +| `content-visibility` | ❌ | | +| `will-change` | ❌ | | + +### Image Rendering + +| CSS Property | Status | Notes | +| ------------------- | ------ | ----- | +| `image-rendering` | ❌ | | +| `image-orientation` | ❌ | | +| `object-fit` | ❌ | | +| `object-position` | ❌ | | +| `object-view-box` | ❌ | | + +### Shape (Floats) + +| CSS Property | Status | Notes | +| ----------------------- | ------ | ----- | +| `shape-outside` | ❌ | | +| `shape-margin` | ❌ | | +| `shape-image-threshold` | ❌ | | + +### SVG Presentation Attributes + +| CSS Property | Status | Notes | +| --------------------- | ------ | ------------------------- | +| `fill` | ❌ | SVG elements not rendered | +| `fill-opacity` | ❌ | | +| `fill-rule` | ❌ | | +| `stroke` | ❌ | | +| `stroke-width` | ❌ | | +| `stroke-opacity` | ❌ | | +| `stroke-dasharray` | ❌ | | +| `stroke-dashoffset` | ❌ | | +| `stroke-linecap` | ❌ | | +| `stroke-linejoin` | ❌ | | +| `stroke-miterlimit` | ❌ | | +| `paint-order` | ❌ | | +| `vector-effect` | ❌ | | +| `marker`, `marker-*` | ❌ | | +| `clip-rule` | ❌ | | +| `color-interpolation` | ❌ | | +| `flood-color` | ❌ | | +| `flood-opacity` | ❌ | | +| `stop-color` | ❌ | | +| `stop-opacity` | ❌ | | +| `lighting-color` | ❌ | | +| `text-anchor` | ❌ | | +| `` inline | ❌ | | + +### Replaced Elements + +| CSS Property | Status | Notes | +| --------------------- | ------ | ------------------------- | +| `` rendering | ❌ | Images not loaded/painted | +| `