tests.gosub.io

A collection of small, hand-written HTML pages for manually testing how the Gosub browser engine renders things — typography, the box model, flexbox, grid, tables, images, backgrounds, SVG, and more.

These are not automated unit tests. They're standalone pages you open in a browser (gosub or any reference browser) to eyeball whether rendering is correct. The intent is a single test subdomain you can hit online while developing the engine.

Usage

Open index.html in a browser, or serve the directory locally:

python3 -m http.server 8000
# then visit http://localhost:8000/

The index groups the pages by category. The progressive tests (01–10) go from the simplest possible page to complex layout — start at 01 and work down until something breaks; that's the first feature to look at.

Layout

index.html              entry point, links every test grouped by category
01-*.html .. 10-*.html  progressive tests (text → backgrounds → box model → flexbox → grid → positioning)
typography.html         text rendering
inline*.html            inline vs block elements
lineheight*.html        line-height variations
lists.html              list markers, start/reversed, nesting, CSS counters, ::marker, dl
fonts.html              @font-face webfonts, variable font, families & fallback, weights, variants, decoration
assets/fonts/           OFL-licensed WOFF2 webfonts used by fonts.html
text-wrapping.html      white-space, word-break, overflow-wrap, hyphens, tab-size, justify
writing-modes.html      direction/RTL, bidi, writing-mode (vertical text), text-orientation
margin*.html            box model / nested margins
button*.html            button layout
forms.html              form controls & widgets (buttons, inputs, selects, toggles, progress, meters)
tables.html             table rendering (caption, colspan/rowspan)
floats.html             float layout (text wrap, clear, clearfix, drop-cap, BFC)
overflow.html           overflow values, text-overflow/ellipsis, line-clamp, clip-path
grid-advanced.html      grid areas, auto-fit/fill, span, dense flow, alignment, named lines
scroll.html             scroll behavior, tall content
images.html             images & background-image (png/jpg/gif/webp/svg, sizing, broken images)
borders-backgrounds.html  border styles, radius, box-shadow, gradients, multiple backgrounds
assets/                 image assets used by images.html
svg.html                inline SVG
transforms.html         2D/3D transforms, transform-origin, perspective, preserve-3d
filters-opacity.html    filter functions, backdrop-filter, opacity, mix-blend-mode
selectors.html          pseudo-classes/elements, combinators, attribute selectors, generated content
units.html              length units (px/em/rem/ch/%/vw/vh), calc, min/max/clamp
interactive.html        details/summary, dialog, CSS-only menu & tabs
media.html              canvas, video/audio, iframe, object/embed, aspect-ratio
gopher.html             real-world styled page

Notes

• All pages are self-contained and use relative paths, so the directory can be served as-is.
• images.html loads its images from assets/. It deliberately includes a reference to a missing file to test broken-image handling.
• index.html itself uses only basic block layout (no flexbox/grid) on purpose, so it still renders even when the features under test are broken.

License

MIT