Gosub Browser — Scroll Test Page

Section 1 — Introduction

This page is intentionally long to exercise the browser's tile cache and smooth-scroll implementation. Each section tests a different layout pattern: plain text, coloured bands, card grids, tables, and code blocks.

The pipeline renders the full page into a tile cache once on load, then composites only the visible tiles on every scroll event without re-running layout or rasterization. Smooth scrolling means every frame should feel instantaneous — no re-render latency.

If you can read this text clearly and scroll without visual tearing or sudden position resets, the tile compositor is working correctly.

Section 2 — Card Layout

A flex card grid. Each card should have a consistent border, shadow, and internal padding. Check for pixel-alignment artifacts at card edges.

Section 3 — Data Table

Tables test alignment, alternating row colours, and header contrast.

Section 4 — Code Block

Monospace text, syntax highlighting, dark background. Tests font rendering and background-colour fill accuracy inside a constrained box.

// Stage 7: composite visible tiles from the cache.
fn draw_tile_cache(cr: &Context, state: &TileDrawState, sx: f32, sy: f32) {
    let dpr = state.dpr as f64;
    cr.set_source_rgb(1.0, 1.0, 1.0);
    cr.paint().ok();

    for tile in state.tiles.iter() {
        let screen_y = (tile.page_y - sy) as f64;
        if screen_y + tile.height as f64 / dpr <= 0.0 { continue; }
        if screen_y >= state.viewport_height as f64 { continue; }

        let surface = /* Arc pixel data, zero-copy */
            create_for_data_unsafe(tile.data.as_ptr(), ARgb32, ...);
        surface.set_device_scale(dpr, dpr);
        cr.set_source_surface(&surface, screen_x, screen_y).ok();
        cr.paint().ok();
    }
}

Section 5 — Long-form Text

Browser engines must handle paragraphs of flowing text correctly: line breaking, word spacing, baseline alignment, and descender clipping. This section provides a body of text long enough to fill several tiles vertically so that tile boundaries are crossed mid-paragraph.

The Gosub HTML5 parser follows the WHATWG parsing specification. It handles implied open and close tags, adoption agency algorithm edge cases, character-reference decoding, and the full list of void elements. After parsing, the document tree is walked by the render-tree builder which resolves inherited and cascaded styles using a property-based CSS engine.

Layout is delegated to Taffy, a pure-Rust implementation of the CSS2.1 block and inline formatting contexts plus CSS Flexbox Level 1. Taffy computes the intrinsic and definite sizes of every node, performs the flexbox algorithm for flex containers, and returns a layout tree with resolved bounding boxes for every node in CSS pixels.

Font metrics — ascent, descent, x-height, cap-height, and per-glyph advances — are obtained from FreeType via the gosub-font crate. Text is laid out with HarfBuzz for correct shaping of complex scripts, then handed to Cairo's text-rendering path which applies sub-pixel hinting where the OS font configuration requests it.

Images are decoded on a background Tokio task to avoid blocking the render thread. Decoded pixel buffers are stored in the MediaStore and referenced by tile paint commands. GPU-accelerated image scaling will be added in a later milestone once the Vello backend is fully integrated.

The compositor is the glue between the engine and the host UI framework. It implements the CompositorSink trait and receives ExternalHandle variants from the render backend. The GTK4 example uses a DefaultCompositor that stores the latest handle per tab and fires a redraw callback. Custom embedders can supply their own compositor — for example one that hands a WGPU texture id directly to a game engine or a WebGPU renderer.

Section 6 — Status Grid

Implementation status of major browser features in the current branch.

Section 7 — Browser Test URLs

Reference URLs used during development to test specific rendering paths.

Section 8 — Architecture Notes

The Gosub engine is structured as a Cargo workspace of loosely-coupled crates. The top-level gosub_engine crate re-exports the public API and wires the pipeline together. It depends on gosub_pipeline for the render pipeline, gosub_renderer_cairo for rasterization, and gosub_html5 for parsing.

Rendering backends are selected at compile time via Cargo features (backend_cairo, backend_vello). This lets downstream embedders choose the right trade-off: Cairo gives pixel-perfect CPU rendering with no GPU dependency; Vello gives GPU-accelerated vector rendering at the cost of requiring a Vulkan/Metal/DX12 driver.

The tab worker is a Tokio async task that owns a BrowsingContext. Commands arrive on an mpsc::Receiver<TabCommand>; events leave on an broadcast::Sender<EngineEvent>. This design lets multiple UI frameworks subscribe to the same engine instance simultaneously — useful for a split-view browser or a headless test harness.

The render pipeline stages run synchronously inside the tab worker task (no extra threads), but the CPU load is heavy enough that the worker should be given its own Tokio runtime thread to avoid starving other tasks. The default multi-thread runtime handles this automatically by work-stealing.

Section 9 — End of Page

You have reached the bottom of the scroll test page. If this text is fully visible without clipping, the page-height calculation and scroll clamping are both correct.

Checklist for a passing run: