The progressive tests build from the simplest possible page up to complex layout. Start at 01 and work down until something breaks — that's the first feature to look at.
Progressive — simplest first
01 Plain text — bare text, no styling 02 Background color — colored boxes, inline styles only 03 Box model — margin, padding, border 04 Inline vs block — display types 05 Text properties — font-size, color, line-height 06 Nested & percentages — relative units, containment 07 Flexbox basic — row/column, justify/align 08 Flexbox advanced — wrap, grow, shrink, basis 09 Grid basic — grid-template-columns, gap 10 Positioning — relative, absolute, z-index
Text & typography
Typography — text rendering, paragraphs Inline (basic) — block vs inline borders Inline (minimal) — plain text with bold and link Inline elements suite — comprehensive inline element tests Line-height (large) — 30px font, 100px line-height Line-height (tight) — 30px font, 10px line-height Lists — markers, start/reversed, nesting, counters, ::marker, dl Fonts & text styling — families, weights, variants, decoration, spacing, shadows Text wrapping — white-space, word-break, overflow-wrap, hyphens, tab-size Writing modes — direction/RTL, bidi, vertical text, text-orientation
Box model & layout
Margin (box model) — browser box model test page Margin (nested) — 5 levels of nested margins Margin (nested alt) — nested margin variation Buttons (basic) — two sized buttons Buttons (inline-block) — inline vs inline-block layout Forms & widgets — buttons, inputs, selects, custom toggles, card radios, progress & meters Tables — caption, header, footer, colspan/rowspan Floats & clear — text wrap, clearfix, drop-cap, formatting contexts Overflow & clipping — overflow values, ellipsis, line-clamp, clip-path Grid (advanced) — areas, auto-fit/fill, span, dense, alignment, named lines Scroll — scroll behavior, tall-content layout
Tables — layout fixtures
01 Basic grid — 3×3 grid, auto columns, border-spacing 02 Ragged rows — rows of unequal length, empty cells 03 Sections — tfoot before thead in source, multiple tbodies 04 Anonymous boxes — display: table divs, cells without a row 05 Caption — caption, caption-side: bottom 06 Colspan — colspan 2/3/full/overflowing 07 Rowspan — rowspan, tall spanning content, span past last row 08 Span mix — interlocking colspan+rowspan block puzzle 09 Explicit widths — px/% cell widths, width on a row-2 cell 10 Table width — table width auto/px/%/100% 11 Fixed layout — table-layout: fixed semantics 12 Colgroup — widths from col/colgroup 13 Content extremes — unbreakable word, over-wide block 14 Border spacing — spacing 0 / 10px / asymmetric; padding 15 Border collapse — separate vs collapse, border conflict 16 Nested layout — flex + block stacks + wrapping text in cells 17 Nested table — table inside a table cell 18 Vertical align — top/middle/bottom/baseline 19 Infobox — wikipedia-style infobox: fixed width, spans, label column 20 Data table — full-width data table, zebra, collapse, tfoot
tests.gosub.io — manual render checks for the Gosub browser engine.