Files
rust_browser/investigations/bmow1/report.md
Zachary D. Rowitsch b9380a8a03
All checks were successful
ci / fast (linux) (push) Successful in 6m43s
Fix inline line box height inflation that broke float two-column layouts
The strut half-leading calculation in apply_vertical_align used the
effective line height (inflated by tall inline-block elements like images)
instead of the CSS computed line-height. For a line with a 76px image and
CSS line-height: 15px, the strut got half_leading = (76 - font_height)/2
≈ 30, inflating descent by ~30px. This caused floated containers to
overflow their parents, leaking through shared BFC float contexts and
displacing sibling floats.

Fixes: pass CSS computed line-height separately for strut calculation;
also pass parent font family/weight/style for accurate strut metrics.
Adds float=left/right annotations to layout tree dumps for debugging.

32 WPT tests promoted from known_fail to pass. BMOW page sidebar moves
from x=73 to x=829 (correct float:right), content from y=4375 to y=114.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-15 02:36:00 -04:00

84 lines
4.8 KiB
Markdown

# Investigation: BMOW 1 Computer - Big Mess o' Wires
**URL**: https://www.bigmessowires.com/bmow1/
**Last investigated**: 2026-03-15
## Summary
This is a WordPress blog page about the BMOW 1 homebrew CPU computer. The page uses a classic two-column float layout: a sidebar (`#sidebar`, `float: right`) on the right and main content (`#content`, `float: left`) on the left, both within a 1000px centered body.
The two-column float layout now renders correctly. The sidebar is at x=829 (float:right) and the main content is at y=114 beside the sidebar. The article title, hero image, and body text are all visible.
## Findings
### F-001: Float layout broken — sidebar mispositioned, content invisible
- **Status**: Fixed (2026-03-15)
- **Found**: 2026-03-15
- **Category**: Layout
- **Severity**: High
- **Description**: The sidebar (float:right) rendered at x=73 instead of x≈829, and the content div rendered at y=4375 (invisible). Root cause: `apply_vertical_align` used the effective line height (inflated by tall inline-block elements like images) for the strut's half-leading calculation, instead of the CSS computed line-height. This caused the femu-banner's float to extend 30px beyond the header, leaking through the shared BFC float context into the sidebar area and displacing it.
- **Evidence** (original):
- Sidebar layout: `content: (73.51837, 103, 167, 4253.1816)` — x=73 instead of x≈829
- Content layout: `content: (2, 4375.1816, 808, 25562.82)` — y=4375, far below viewport
- **Evidence** (fixed):
- Sidebar layout: `content: (829, 103, 167, 4245.9814)` — correctly at x=829
- Content layout: `content: (2, 114, 808, 24244.018)` — visible at y=114
### F-002: Main page content not visible in viewport
- **Status**: Fixed (2026-03-15)
- **Found**: 2026-03-15
- **Category**: Layout
- **Severity**: High
- **Description**: The main content started at y≈4375, far below the viewport. Direct consequence of F-001.
- **Evidence** (original):
- Article title at y=4375, hero image at y=4420
- Screenshot showed only sidebar; no article content visible
- **Evidence** (fixed):
- Content now starts at y=114, fully visible in viewport
- Screenshot shows article title, hero image, and body text
### F-003: @font-face web fonts fail to load — incorrect URL resolution
- **Status**: Open
- **Found**: 2026-03-15
- **Category**: CSS Support
- **Severity**: Medium
- **Description**: The stylesheet declares `@font-face` rules for Apple Garamond fonts using root-relative URLs (`/fonts/applegaramond.woff`, etc.). These URLs are being resolved as `file:///fonts/...` instead of `https://www.bigmessowires.com/fonts/...`. This affects the custom font rendering for the page.
- **Evidence**:
- Render log: `WARN app_browser::pipeline::fonts: failed to load font 'file:///fonts/applegaramond.eot?#iefix': resource not found`
- Similar warnings for `.woff`, `.ttf`, `.svg` variants of both regular and bold weights
- 8 font loading failures total
### F-004: Body overflows viewport — right side clipped
- **Status**: Open
- **Found**: 2026-03-15
- **Category**: Layout
- **Severity**: Medium
- **Description**: The CSS sets `body { width: 1000px }` but the viewport/html element is 800px wide. The right portion of the header banner (Floppy Emu ad) is clipped. The text "for classic computers" that should appear on the right edge of the banner is cut off.
- **Evidence**:
- Layout tree: `html content: (0, 0, 800, ...)` — viewport 800px
- Layout tree: `body content: (0, 4, 1000, ...)` — body 1000px
- Screenshot: banner image is visibly clipped on the right edge
### F-005: Header float positioning anomaly
- **Status**: Fixed (2026-03-15)
- **Found**: 2026-03-15
- **Category**: Layout
- **Severity**: Low
- **Description**: Previously reported as an anomaly where header floats appeared correctly but sidebar floats failed. Investigation revealed the header floats WERE working (float infrastructure is complete), but the inflated strut line-height caused the femu-banner float to leak into the nav area. Fixed as part of F-001.
- **Evidence**: Header floats now show `float=left` and `float=right` annotations in layout dump, confirming they always worked.
### F-006: CSS @import inside HTML comment delimiters
- **Status**: Fixed (2026-03-15)
- **Found**: 2026-03-15
- **Category**: CSS Support
- **Severity**: Low
- **Description**: Previously reported as potentially problematic. Investigation confirmed the CSS parser correctly handles CDO/CDC tokens (`<!-- -->`) at the top level per CSS Syntax Level 3. The `@import` was always being fetched and rules applied correctly. No fix needed.
- **Evidence**: CSS file is fetched, float properties are applied, all CSS rules work correctly.
## Stats
| Status | High | Medium | Low | Total |
|--------|------|--------|-----|-------|
| Open | 0 | 2 | 0 | 2 |
| Fixed | 2 | 0 | 2 | 4 |