Devlog #2: teaching a browser to render Wikipedia
last time Helix was learning to draw a cursed smiley face. this time I pointed it at Wikipedia and watched it have a breakdown.
Wikipedia’s infobox was painting directly on top of the article text. both occupied the same pixels. the infobox floated right correctly, but text didn’t know to move.
turns out Helix had two layout engines. the old single-pass painter was dead code. every edit I made to it changed nothing on screen. the real engine had float positioning but never told paragraph line boxes about the float. each line used the full container width. one line fix: inherit the parent’s float context instead of creating an empty one.
then tables. Wikipedia’s cladogram collapsed to one word per line because cells got independent widths per row. no shared columns. rewrote layoutTable with real auto layout: per-column max-content widths across all rows, colspan support, shrink-to-fit. “Kingdom: / Animalia” lines up now.
then images vanished. diagnostic log: first 3-4 images decoded fine, every subsequent one returned exactly 1964 bytes. that’s an HTTP 429 error page. Helix was spawning 50 simultaneous fetch threads (! crazy lol) per page!!!!! Wikimedia rate-limited the burst. capped at 6 concurrent fetches, added HTTP status checking, sent a real User-Agent.
images still didn’t appear because ReceiveImage never invalidated the cached layout tree. layout was built with 0x0 image boxes, the bitmap loaded later, but repaint reused the stale cache. added InvalidateLayout() on image arrival.
then JS DOM was dead. el.className = "active" updated a JS string but never touched the real node. classList.add() returned undefined. Wikipedia’s scripts set className to enable CSS rules and nothing happened. added VM hooks so property writes reflect onto the backing DOM node. classList.add/remove/toggle/contains actually work now.
Bing search was a white page. crash log: “string too long.” 115KB of inline CSS blew up during layout, silently swallowed by catch(...). then it rendered with 200-500px font-size text covering everything. Bing uses giant text inside tiny overflow:hidden containers. added overflow clipping in the paint pass and capped font sizes at 40px.
also landed: CSS custom properties with var() and inheritance, @media queries, display:grid with fr tracks and gap, srcset/data-src image fallback, background sprites, and the search bar showing your query instead of the bing URL.
Wikipedia renders with images, floated infoboxes, and aligned tables. Bing results are readable. not pretty, but usable.