fc95c54298
Implement parsing, styling, layout, display list, and rasterization for linear-gradient(), -webkit-linear-gradient(), and -o-linear-gradient(). This enables gradient backgrounds used extensively in Bootstrap 3 and similar frameworks. Key changes: - Define ColorStopPosition, ColorStop, LinearGradient types in shared crate - Parse modern (to bottom) and legacy prefixed (origin-based) direction syntax - Add BackgroundImage enum replacing Option<String> in style system - Thread gradient data through layout boxes and display list items - Rasterize gradients by projecting pixels onto gradient line with color interpolation - CSS spec fixup ensures stop positions are monotonically non-decreasing - Update WPT manifest: promote 1 newly-passing test, demote 5 false passes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
95 lines
5.0 KiB
Markdown
95 lines
5.0 KiB
Markdown
# CSS Support Matrix
|
|
|
|
This document tracks implemented CSS features and gaps, with a focus on completing CSS 2.1 support. CSS is modular (there is no single “CSS4”), so this is organized by selectors, properties, values, and at-rules as implemented in this codebase.
|
|
|
|
## Scope And Prioritization
|
|
|
|
Prioritization is based on visual impact and popularity in typical pages.
|
|
|
|
## Implemented Today (High-Level)
|
|
|
|
Selectors:
|
|
- Type, class, ID, universal selectors
|
|
- Attribute selectors: `[attr]`, `[attr=value]`, `^=`, `$=`, `*=`, `~=`, `|=`
|
|
- Combinators: descendant, child (`>`), adjacent sibling (`+`), general sibling (`~`)
|
|
- Pseudo-classes: `:root`, `:link`, `:checked`, `:disabled`, `:enabled`, `:required`, `:optional`, `:read-only`, `:read-write`, `:defined`, `:dir()`, `:lang()`, `:not()`, `:is()`, `:where()`, `:has()`, `:first-child`, `:last-child`, `:only-child`, `:nth-child()`, `:nth-last-child()`, `:first-of-type`, `:last-of-type`, `:only-of-type`, `:nth-of-type()`, `:nth-last-of-type()`, `:empty`
|
|
|
|
Properties (parsed + applied):
|
|
- `display` (block, inline, inline-block, flex, none, table variants)
|
|
- Box model: `width`, `height`, `margin-*`, `padding-*`, `border-*-width`, `border-*-color`, `border-*-style`
|
|
- Shorthands: `margin`, `padding`, `border`, `border-*`, `border-width`, `border-color`, `border-style`, `background` (color only)
|
|
- `background-color`, `color`, `font-size`
|
|
- Positioning: `position`, `top`, `right`, `bottom`, `left`, `z-index`
|
|
- Overflow: `overflow`, `overflow-x`, `overflow-y` (visible, hidden)
|
|
- Flexbox: `flex-direction`, `justify-content`, `align-items`, `gap`, `flex-grow`, `flex-shrink`, `flex-basis`
|
|
- Text: `white-space`, `line-height`, `text-align`
|
|
- Tables: `border-spacing`, `vertical-align`
|
|
- Constraints: `max-width`, `min-width`, `max-height`, `min-height`
|
|
- Floats: `float`, `clear`
|
|
- Custom properties (CSS variables), including `var()` in key shorthands
|
|
|
|
Values:
|
|
- Length units: `px`, `em`, `rem`, `%`
|
|
- Colors: named colors, hex (`#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`), `rgb()`, `rgba()`
|
|
|
|
At-rules:
|
|
- None (all `@` rules are skipped)
|
|
|
|
## Known Missing Or Incomplete Behavior
|
|
|
|
Selectors and pseudo-classes:
|
|
- Pseudo-elements never match (e.g., `::before`, `::after`, `::first-line`, `::first-letter`, `::placeholder`).
|
|
- Many pseudo-classes are parsed but always return false: `:hover`, `:focus`, `:focus-visible`, `:focus-within`, `:active`, `:visited`, `:target`, `:placeholder-shown`, `:default`, `:valid`, `:invalid`, `:in-range`, `:out-of-range`, `:indeterminate`.
|
|
- Attribute selector case-sensitivity flags (`i`/`s`) are parsed but not honored.
|
|
|
|
At-rules and media:
|
|
- `@media` is supported (viewport width/height, prefers-color-scheme; nesting supported).
|
|
- `@font-face` is supported (font-family, src with url()/format(), font-weight, font-style; TTF/OTF only, WOFF2 not yet supported).
|
|
- `@import`, `@supports`, `@keyframes`, `@layer` are not supported.
|
|
|
|
Properties and values:
|
|
- Many CSS 2.1 properties are missing entirely (see Prioritized Backlog below).
|
|
- `background` shorthand extracts color and `linear-gradient()` (no repeat, position, size).
|
|
- Border styles are limited to `none`, `solid`, `dashed`, `dotted`.
|
|
- Units missing: `pt`, `pc`, `in`, `cm`, `mm`, `ex`, `ch`.
|
|
- Color functions missing: `hsl()`, `hsla()`.
|
|
|
|
## Prioritized Backlog For CSS 2.1 Completion
|
|
|
|
Tier 1: High visual impact and common usage
|
|
- `font-weight` (bold text for `<b>`, `<strong>`, `<th>`)
|
|
- `font-style` (italics for `<em>`, `<i>`, `<cite>`, `<var>`)
|
|
- `font-family` (monospace for `<code>`, `<pre>`, `<kbd>`, `<samp>`)
|
|
- `text-decoration` (underlines for links)
|
|
- `list-style-type`, `list-style-position` (bulleted and numbered lists)
|
|
- `background-image` with `url()` and `linear-gradient()` (including `-webkit-` and `-o-` prefixes), `background-repeat`, `background-position` (basic background rendering)
|
|
- Pseudo-elements `::before` and `::after` (even limited `content` support for simple strings)
|
|
- `:hover` and `:focus` (core interactive styling)
|
|
|
|
Tier 2: Layout correctness and common rendering expectations
|
|
- `border-collapse` (tables)
|
|
- `caption-side` (tables)
|
|
- `vertical-align` for inline/inline-block elements in layout (not just computed value)
|
|
- `line-height` inheritance nuances and `normal` default per font metrics (currently fixed 1.2)
|
|
- `%` resolution for `height`, `top`, `bottom` with containing block rules
|
|
- `overflow: scroll` and `overflow: auto`
|
|
- `visibility` (hidden while taking space)
|
|
- `white-space` layout behavior for `pre-wrap` and `pre-line`
|
|
|
|
Tier 3: CSS 2.1 coverage and polish
|
|
- `text-transform`
|
|
- `letter-spacing`, `word-spacing`
|
|
- `text-indent`
|
|
- `direction`, `unicode-bidi`
|
|
- `quotes`
|
|
- `content` (full support for pseudo-elements)
|
|
- `outline` properties
|
|
- `cursor`
|
|
- Full unit support: `pt`, `pc`, `in`, `cm`, `mm`, `ex`, `ch`
|
|
- Full color support: `hsl()`, `hsla()`
|
|
|
|
## Notes
|
|
|
|
- This list reflects observed gaps in `crates/css`, `crates/style`, and `crates/selectors` as of the current tree.
|
|
- If you add a property, update the parser (`PropertyId` and parsing), computed style (`ComputedStyles`), and layout/paint as needed.
|