tests.gosub.io
Hand-written pages for eyeballing how the Gosub browser engine renders things. Open one here and in a reference browser, and compare. Most pages state what they expect to happen.
91 fixtures / 11 groups / 2 need javascript
§01 Progressive
Each page adds one capability to the page before it. Work down until something breaks — that is the first feature to look at.
- 01 Plain text ·································· 01-plain-text.html
bare text, no styling
- 02 Background color ······················ 02-background-color.html
colored boxes, inline styles only
- 03 Box model ···································· 03-box-model.html
margin, padding, border
- 04 Inline vs block ··························· 04-inline-block.html
display types
- 05 Text properties ························ 05-text-properties.html
font-size, color, line-height
- 06 Nested & percentages ················· 06-nested-percentage.html
relative units, containment
- 07 Flexbox basic ···························· 07-flexbox-basic.html
row/column, justify/align
- 08 Flexbox advanced ······················ 08-flexbox-advanced.html
wrap, grow, shrink, basis
- 09 Grid basic ·································· 09-grid-basic.html
grid-template-columns, gap
- 10 Positioning ································ 10-positioning.html
relative, absolute, z-index
§02 Text & typography
Fonts, inline flow, line boxes, wrapping and writing modes.
- Typography ····································· typography.html
text rendering, paragraphs
- Inline (basic) ····································· inline.html
block vs inline borders
- Inline (minimal) ·································· inline2.html
plain text with bold and link
- Inline elements suite ····························· inline3.html
comprehensive inline element tests
- Line-height (large) ···························· lineheight.html
30px font, 100px line-height
- Line-height (tight) ··························· lineheight2.html
30px font, 10px line-height
- Lists ··············································· lists.html
markers, start/reversed, nesting, counters, ::marker, dl
- Fonts & text styling ································ fonts.html
families, weights, variants, decoration, spacing, shadows
- Text wrapping ······························· text-wrapping.html
white-space, word-break, overflow-wrap, hyphens, tab-size
- Writing modes ······························· writing-modes.html
direction/RTL, bidi, vertical text, text-orientation
§03 Box model & layout
Margins, floats, overflow, grid and scrolling — the geometry everything else sits on.
- Margin (box model) ································· margin.html
browser box model test page
- Margin (nested) ··································· margin2.html
5 levels of nested margins
- Margin (nested alt) ······························· margin3.html
nested margin variation
- Buttons (basic) ···································· button.html
two sized buttons
- Buttons (inline-block) ···························· button2.html
inline vs inline-block layout
- Forms & widgets ····································· forms.html
buttons, inputs, selects, custom toggles, card radios, progress & meters
- Tables ············································· tables.html
caption, header, footer, colspan/rowspan
- Floats & clear ····································· floats.html
text wrap, clearfix, drop-cap, formatting contexts
- Overflow & clipping ······························ overflow.html
overflow values, ellipsis, line-clamp, clip-path
- Grid (advanced) ····························· grid-advanced.html
areas, auto-fit/fill, span, dense, alignment, named lines
- Scroll ············································· scroll.html
scroll behavior, tall-content layout
§04 Tables tables/
From a bare 3×3 grid up to spans, collapsed borders and a real infobox.
- 01 Basic grid ·································· 01-basic-grid.html
3×3 grid, auto columns, border-spacing
- 02 Ragged rows ································ 02-ragged-rows.html
rows of unequal length, empty cells
- 03 Sections ······································ 03-sections.html
tfoot before thead in source, multiple tbodies
- 04 Anonymous boxes ························ 04-anonymous-boxes.html
display: table divs, cells without a row
- 05 Caption ········································ 05-caption.html
caption, caption-side: bottom
- 06 Colspan ········································ 06-colspan.html
colspan 2/3/full/overflowing
- 07 Rowspan ········································ 07-rowspan.html
rowspan, tall spanning content, span past last row
- 08 Span mix ······································ 08-span-mix.html
interlocking colspan+rowspan block puzzle
- 09 Explicit widths ························ 09-widths-explicit.html
px/% cell widths, width on a row-2 cell
- 10 Table width ································ 10-table-width.html
table width auto/px/%/100%
- 11 Fixed layout ······························ 11-fixed-layout.html
table-layout: fixed semantics
- 12 Colgroup ······································ 12-colgroup.html
widths from col/colgroup
- 13 Content extremes ······················ 13-content-extremes.html
unbreakable word, over-wide block
- 14 Border spacing ·························· 14-border-spacing.html
spacing 0 / 10px / asymmetric; padding
- 15 Border collapse ························ 15-border-collapse.html
separate vs collapse, border conflict
- 16 Nested layout ···························· 16-nested-layout.html
flex + block stacks + wrapping text in cells
- 17 Nested table ······························ 17-nested-table.html
table inside a table cell
- 18 Vertical align ·························· 18-vertical-align.html
top/middle/bottom/baseline
- 19 Infobox ········································ 19-infobox.html
wikipedia-style infobox: fixed width, spans, label column
- 20 Data table ·································· 20-data-table.html
full-width data table, zebra, collapse, tfoot
§05 Shadow DOM shadow-dom/
Declarative shadow roots only, so the set runs with scripting off. If 01 shows “light child” the templates never became shadow roots, and the rest is noise.
- 01 Declarative basics ··················· 01-declarative-basic.html
<template shadowrootmode>, shadow tree replaces light children
- 02 Default slot ······························ 02-slot-default.html
projection, source order, two default slots
- 03 Named slots ································· 03-slot-named.html
slot attribute, direct children only, unknown names
- 04 Slot fallback ···························· 04-slot-fallback.html
fallback content, the whitespace-suppresses-fallback gotcha
- 05 Unslotted content ···················· 05-unslotted-content.html
unassigned light DOM is neither painted nor laid out
- 06 Style encapsulation ················ 06-style-encapsulation.html
rules do not cross in either direction, !important included
- 07 :host ···································· 07-host-selector.html
styling the host, outer rules win, no reach outside
- 08 :host() & :host-context() ················ 08-host-function.html
conditional on host attributes and on ancestors
- 09 ::slotted() ··························· 09-slotted-selector.html
top-level assigned nodes only, cascade vs document rules
- 10 Inheritance ································ 10-inheritance.html
inherited properties cross; inheritance follows the flattened tree
- 11 Custom properties ···················· 11-custom-properties.html
theming through the boundary, :host defaults, no upward leak
- 12 Nested shadow roots ················ 12-nested-shadow-roots.html
three levels deep, slots chained through two boundaries
- 13 Closed mode ································ 13-closed-mode.html
closed renders like open; invalid mode attaches nothing
- 14 ::part() ·········································· 14-part.html
exposed parts, multiple names, not a descendant selector
- 15 exportparts ································ 15-exportparts.html
forwarding and renaming parts through nesting
- 16 Slots & layout ····························· 16-slot-layout.html
slotted elements as flex/grid items, flex, order, span
- 17 Slot as a box ······························ 17-slot-as-box.html
display: contents default vs block/flex on the slot itself
- 18 Selector scoping ····················· 18-scoping-selectors.html
duplicate ids/classes, :root and html never match inside
- 19 Position, clip & stack ··············· 19-stacking-clipping.html
containing blocks, overflow clipping, trapped z-index
- 20 Composed page ··························· 20-component-page.html
header, cards, stats and badges built only from shadow roots
§06 Pickers pickers/
The six input types the engine hands to the shell — color, date, time, datetime-local, month, week. Every page says what the control should show and what its picker should do; the engine sanitises the value, the shell draws the picker.
- 01 Colour ··········································· 01-color.html
swatch, any CSS notation, disabled, label and keyboard activation
- 02 Date ·············································· 02-date.html
value, empty opens on today, readonly/disabled inert, invalid values
- 03 Date min/max/step ·························· 03-date-bounds.html
greyed days, step counted from min or 1970, ignored bounds
- 04 Time ·············································· 04-time.html
hh:mm, seconds via step or value, min/max, quarter-hour step
- 05 Date & time ····························· 05-datetime-local.html
both halves in one picker, bounds on each, invalid values
- 06 Month ············································ 06-month.html
yyyy-mm, bounds, quarterly step, invalid values
- 07 Week ·············································· 07-week.html
ISO weeks, W01/W53 edges, bounds, invalid values
- 08 Anchoring ···································· 08-anchoring.html
fixed corners, scrolled container, transform, far down the page
- 09 Form submit ································ 09-form-submit.html
chosen values in the query string, reset, empty and disabled
- 10 Styled controls ································· 10-styled.html
CSS sizes/borders, inline in text, grid/flex, dark, RTL
§07 Graphics & media
Raster and vector images, backgrounds, borders and gradients.
§08 Visual effects
Compositing-level features: transforms, filters, opacity and blending.
§09 CSS mechanics
Selector matching and value resolution, mostly independent of layout.
§10 Interactive & embedded
Elements with behaviour of their own, and foreign content in the page.
§11 Real-world pages
A whole page as it ships, to check the isolated fixtures against something messy.