72f4713923
All checks were successful
ci / fast (linux) (push) Successful in 7m14s
Add support for the attr() function in CSS content property values,
enabling patterns like `content: " (" attr(href) ")"` on ::before/::after
pseudo-elements. The implementation parses attr() at CSS parse time into
ContentValue::Items, then resolves attribute references against the DOM
during pseudo-element style computation, converting to ContentValue::String
before layout sees it.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
115 lines
7.7 KiB
Markdown
115 lines
7.7 KiB
Markdown
# Investigation: FreeBSD.org Homepage
|
|
|
|
**URL**: https://www.freebsd.org
|
|
**Last investigated**: 2026-03-10
|
|
|
|
## Summary
|
|
|
|
The FreeBSD homepage renders with excellent fidelity. All previously reported issues have been resolved. The page shows proper multi-column float layout, horizontal navigation bar, themed colors (#990000 dark red headings, #666666 nav text), styled buttons with rounded corners and colored backgrounds, the beastie mascot background image, the grey news container with four columns (Latest News, Upcoming Events, Press, Security Advisories), and a correctly positioned footer. The CSS `attr()` function (F-012) is now supported after implementation in this session.
|
|
|
|
## Findings
|
|
|
|
### F-001: CSS @import rules not supported
|
|
- **Status**: Fixed (2026-03-09)
|
|
- **Found**: 2026-03-09
|
|
- **Category**: CSS Support
|
|
- **Severity**: High
|
|
- **Description**: The main stylesheet `fixed.css` consists entirely of `@import` statements that pull in 6 sub-stylesheets. The engine now fetches and applies all imported stylesheets correctly.
|
|
- **Evidence**: Render log shows fetching of `global.css`, `layout.css`, `text.css`, `navigation.css`, `table.css`, and `iefixes.css`. All CSS rules are applied (colors, layout, backgrounds).
|
|
|
|
### F-002: Flex item sizing causes header overflow
|
|
- **Status**: Fixed (2026-03-09)
|
|
- **Found**: 2026-03-09
|
|
- **Category**: Layout
|
|
- **Severity**: High
|
|
- **Description**: Flex content sizing for replaced elements (images) now respects specified dimensions from HTML width/height attributes, falling back to intrinsic size only when no specified size exists. The header donate/search section is now visible within the viewport.
|
|
- **Evidence**: "Donate" text now renders at x=674 (within 800px viewport). The logo wrapper div correctly sizes based on the img width="457" attribute rather than the 914px intrinsic width.
|
|
|
|
### F-003: @font-face rule parsing failure
|
|
- **Status**: Fixed (2026-03-09)
|
|
- **Found**: 2026-03-09
|
|
- **Category**: CSS Support
|
|
- **Severity**: Medium
|
|
- **Description**: FreeBSD's font-awesome-min.css had `font-weight` and `font-style` descriptors outside the `@font-face` block (after the closing `}`). The parser now handles stray `}` tokens at the top level and during selector parsing, recovering gracefully instead of consuming subsequent rules as malformed selector text. The `@font-face` rule itself was already parsed correctly.
|
|
- **Evidence**: No selector parse warnings in render log. The `.fa` and subsequent FontAwesome rules are now parsed correctly.
|
|
|
|
### F-004: Navigation renders as vertical bulleted list instead of horizontal bar
|
|
- **Status**: Fixed (2026-03-09)
|
|
- **Found**: 2026-03-09
|
|
- **Category**: Layout
|
|
- **Severity**: High
|
|
- **Description**: The `<nav>` element now renders as a compact horizontal navigation bar with proper float-based layout. All top-level items (Home, About, Get FreeBSD, Documentation, Community, Developers, Support, Foundation) display horizontally with correct styling.
|
|
- **Evidence**: Nav element (node #93) has content height 28.8px with items arranged horizontally. Text rendered in #666666 bold verdana at 14.4px, matching navigation.css rules.
|
|
|
|
### F-005: Multi-column float layout not applied to content sections
|
|
- **Status**: Fixed (2026-03-09)
|
|
- **Found**: 2026-03-09
|
|
- **Category**: Layout
|
|
- **Severity**: High
|
|
- **Description**: Float-based multi-column layouts now work correctly. The feature area shows three columns (left content, middle with beastie, right with shortcuts/releases), and the news container has four columns. Clear properties work to separate sections.
|
|
- **Evidence**: `#frontfeatureleft` (node #324) has width 216 (~30% of 720). Beastie background image renders at x=256. News columns appear at y=493 with proper column widths.
|
|
|
|
### F-006: Body background image not rendered
|
|
- **Status**: Fixed (2026-03-09)
|
|
- **Found**: 2026-03-09
|
|
- **Category**: Display
|
|
- **Severity**: Medium
|
|
- **Description**: The body background image (hdr_fill.png) now renders correctly with `repeat-x` across the top of the page.
|
|
- **Evidence**: Display list shows `BackgroundImage rect=(0, 0, 800, 600) image_id=img#19 pos=(Zero,Zero) repeat=RepeatX`.
|
|
|
|
### F-007: Container width and centering not applied
|
|
- **Status**: Fixed (2026-03-09)
|
|
- **Found**: 2026-03-09
|
|
- **Category**: Layout
|
|
- **Severity**: Medium
|
|
- **Description**: The `#container` div now has proper width (90%) and centering via auto margins.
|
|
- **Evidence**: Container div (node #61) has content width 720 with margin 0 40 0 40, correctly centered in the 800px viewport.
|
|
|
|
### F-008: Heading and link colors use defaults instead of themed values
|
|
- **Status**: Fixed (2026-03-09)
|
|
- **Found**: 2026-03-09
|
|
- **Category**: Display
|
|
- **Severity**: Low
|
|
- **Description**: Headings and links now render with the correct themed colors.
|
|
- **Evidence**: H1 "The FreeBSD Project" renders in #990000 at 19.2px bold. Nav links render in #666666 bold. Body links render in #990000 with underlines.
|
|
|
|
### F-009: "New to FreeBSD?" and "Download FreeBSD" buttons unstyled
|
|
- **Status**: Fixed (2026-03-09)
|
|
- **Found**: 2026-03-09
|
|
- **Category**: Display
|
|
- **Severity**: Low
|
|
- **Description**: The `.frontgetroundbox` buttons now display with correct styling: rounded corners (15px radius), colored backgrounds (#eeeeee for "New to FreeBSD?", #facc2e yellow for "Download FreeBSD"), and bold dark red text.
|
|
- **Evidence**: Display list shows `SolidRect rect=(466, 175.96, 325, 44.96) color=#eeeeee radii=(15,15,15,15)` and `SolidRect rect=(466, 230.92, 325, 44.96) color=#facc2e radii=(15,15,15,15)`.
|
|
|
|
### F-010: News/Events/Press/Security columns missing grey background
|
|
- **Status**: Fixed (2026-03-09)
|
|
- **Found**: 2026-03-09
|
|
- **Category**: Display
|
|
- **Severity**: Low
|
|
- **Description**: The news/events container now has the correct grey background.
|
|
- **Evidence**: Display list shows `SolidRect rect=(40, 493.54, 720, 512.47) color=#eeeeee`.
|
|
|
|
### F-011: overflow:hidden not creating BFC to contain floats
|
|
- **Status**: Not a Bug
|
|
- **Found**: 2026-03-09
|
|
- **Resolved**: 2026-03-09
|
|
- **Category**: Layout
|
|
- **Severity**: N/A
|
|
- **Description**: Originally reported as `#content` having `overflow: hidden` but height=0. Investigation revealed the actual FreeBSD CSS (`layout.css`) sets `#content { clear: both; display: block; }` — there is no `overflow: hidden`. Since `#content` does not establish a BFC, its height=0 is correct per CSS 2.1 spec (all meaningful children are floated and thus out-of-flow). The `#frontnemscontainer` has `display: inline; float: left; width: 100%` which is correctly blockified to `display: block` by CSS 2.1 §9.7 and positioned as a float. The page renders correctly: `clear: both` on the footer pushes it below all floats.
|
|
- **Evidence**: FreeBSD `layout.css` contains `#content { clear: both; display: block; }` — no overflow property. BFC float containment was verified working correctly via 7 regression tests in `crates/layout/src/tests/bfc_float_containment_tests.rs`.
|
|
|
|
### F-012: CSS content: attr() function not supported
|
|
- **Status**: Fixed (2026-03-10)
|
|
- **Found**: 2026-03-09
|
|
- **Category**: CSS Support
|
|
- **Severity**: Low
|
|
- **Description**: The CSS `content: attr(title)` declaration in `global.css` previously failed to parse. This has been resolved by implementing full `attr()` function support in the CSS parser and style computation pipeline, including content lists like `content: "prefix" attr(name) "suffix"`.
|
|
- **Evidence**: The `parse_content_value` function now handles `attr()` tokens, producing `ContentValue::Items` which is resolved against DOM attributes during pseudo-element style computation. No parse warnings for `content: attr(title)` in the current render.
|
|
|
|
## Stats
|
|
|
|
| Status | High | Medium | Low | Total |
|
|
|--------|------|--------|-----|-------|
|
|
| Open | 0 | 0 | 0 | 0 |
|
|
| Fixed | 4 | 3 | 4 | 11 |
|