-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
182 lines (171 loc) · 13.9 KB
/
Copy pathindex.html
File metadata and controls
182 lines (171 loc) · 13.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gosub Render Test Suite</title>
<style>
:root {
--fg: #1a1a1a;
--muted: #6a6a6a;
--line: #e3e3e3;
--accent: #0066cc;
--bg: #fafafa;
--card: #ffffff;
}
* { box-sizing: border-box; }
body {
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
color: var(--fg);
background: var(--bg);
max-width: 760px;
margin: 0 auto;
padding: 40px 20px 80px;
line-height: 1.5;
}
header { border-bottom: 2px solid var(--fg); padding-bottom: 16px; margin-bottom: 8px; }
h1 { font-size: 1.7em; margin: 0 0 4px; }
.tagline { color: var(--muted); font-size: 0.95em; margin: 0; }
.note {
font-size: 0.85em; color: var(--muted);
background: var(--card); border: 1px solid var(--line);
border-radius: 6px; padding: 10px 14px; margin: 20px 0 28px;
}
section { margin-bottom: 28px; }
h2 {
font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--muted); margin: 0 0 10px; font-weight: 600;
}
.grid { border: 1px solid var(--line); border-radius: 8px; background: var(--card); overflow: hidden; }
.row {
display: block; text-decoration: none; color: inherit;
padding: 11px 16px; border-top: 1px solid var(--line);
}
.row:first-child { border-top: none; }
.row:hover { background: #f0f6ff; }
.row .name { color: var(--accent); font-weight: 600; }
.row .num {
display: inline-block; min-width: 1.8em; color: var(--muted);
font-variant-numeric: tabular-nums; font-weight: 600;
}
.row .desc { color: var(--muted); font-size: 0.88em; }
footer { color: var(--muted); font-size: 0.8em; margin-top: 40px; border-top: 1px solid var(--line); padding-top: 16px; }
</style>
</head>
<body>
<header>
<h1>Gosub Render Test Suite</h1>
<p class="tagline">Manual rendering checks for the Gosub browser engine.</p>
</header>
<p class="note">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.</p>
<section>
<h2>Progressive — simplest first</h2>
<div class="grid">
<a class="row" href="01-plain-text.html"><span class="num">01</span><span class="name">Plain text</span> — <span class="desc">bare text, no styling</span></a>
<a class="row" href="02-background-color.html"><span class="num">02</span><span class="name">Background color</span> — <span class="desc">colored boxes, inline styles only</span></a>
<a class="row" href="03-box-model.html"><span class="num">03</span><span class="name">Box model</span> — <span class="desc">margin, padding, border</span></a>
<a class="row" href="04-inline-block.html"><span class="num">04</span><span class="name">Inline vs block</span> — <span class="desc">display types</span></a>
<a class="row" href="05-text-properties.html"><span class="num">05</span><span class="name">Text properties</span> — <span class="desc">font-size, color, line-height</span></a>
<a class="row" href="06-nested-percentage.html"><span class="num">06</span><span class="name">Nested & percentages</span> — <span class="desc">relative units, containment</span></a>
<a class="row" href="07-flexbox-basic.html"><span class="num">07</span><span class="name">Flexbox basic</span> — <span class="desc">row/column, justify/align</span></a>
<a class="row" href="08-flexbox-advanced.html"><span class="num">08</span><span class="name">Flexbox advanced</span> — <span class="desc">wrap, grow, shrink, basis</span></a>
<a class="row" href="09-grid-basic.html"><span class="num">09</span><span class="name">Grid basic</span> — <span class="desc">grid-template-columns, gap</span></a>
<a class="row" href="10-positioning.html"><span class="num">10</span><span class="name">Positioning</span> — <span class="desc">relative, absolute, z-index</span></a>
</div>
</section>
<section>
<h2>Text & typography</h2>
<div class="grid">
<a class="row" href="typography.html"><span class="name">Typography</span> — <span class="desc">text rendering, paragraphs</span></a>
<a class="row" href="inline.html"><span class="name">Inline (basic)</span> — <span class="desc">block vs inline borders</span></a>
<a class="row" href="inline2.html"><span class="name">Inline (minimal)</span> — <span class="desc">plain text with bold and link</span></a>
<a class="row" href="inline3.html"><span class="name">Inline elements suite</span> — <span class="desc">comprehensive inline element tests</span></a>
<a class="row" href="lineheight.html"><span class="name">Line-height (large)</span> — <span class="desc">30px font, 100px line-height</span></a>
<a class="row" href="lineheight2.html"><span class="name">Line-height (tight)</span> — <span class="desc">30px font, 10px line-height</span></a>
<a class="row" href="lists.html"><span class="name">Lists</span> — <span class="desc">markers, start/reversed, nesting, counters, ::marker, dl</span></a>
<a class="row" href="fonts.html"><span class="name">Fonts & text styling</span> — <span class="desc">families, weights, variants, decoration, spacing, shadows</span></a>
<a class="row" href="text-wrapping.html"><span class="name">Text wrapping</span> — <span class="desc">white-space, word-break, overflow-wrap, hyphens, tab-size</span></a>
<a class="row" href="writing-modes.html"><span class="name">Writing modes</span> — <span class="desc">direction/RTL, bidi, vertical text, text-orientation</span></a>
</div>
</section>
<section>
<h2>Box model & layout</h2>
<div class="grid">
<a class="row" href="margin.html"><span class="name">Margin (box model)</span> — <span class="desc">browser box model test page</span></a>
<a class="row" href="margin2.html"><span class="name">Margin (nested)</span> — <span class="desc">5 levels of nested margins</span></a>
<a class="row" href="margin3.html"><span class="name">Margin (nested alt)</span> — <span class="desc">nested margin variation</span></a>
<a class="row" href="button.html"><span class="name">Buttons (basic)</span> — <span class="desc">two sized buttons</span></a>
<a class="row" href="button2.html"><span class="name">Buttons (inline-block)</span> — <span class="desc">inline vs inline-block layout</span></a>
<a class="row" href="forms.html"><span class="name">Forms & widgets</span> — <span class="desc">buttons, inputs, selects, custom toggles, card radios, progress & meters</span></a>
<a class="row" href="tables.html"><span class="name">Tables</span> — <span class="desc">caption, header, footer, colspan/rowspan</span></a>
<a class="row" href="floats.html"><span class="name">Floats & clear</span> — <span class="desc">text wrap, clearfix, drop-cap, formatting contexts</span></a>
<a class="row" href="overflow.html"><span class="name">Overflow & clipping</span> — <span class="desc">overflow values, ellipsis, line-clamp, clip-path</span></a>
<a class="row" href="grid-advanced.html"><span class="name">Grid (advanced)</span> — <span class="desc">areas, auto-fit/fill, span, dense, alignment, named lines</span></a>
<a class="row" href="scroll.html"><span class="name">Scroll</span> — <span class="desc">scroll behavior, tall-content layout</span></a>
</div>
</section>
<section>
<h2>Tables — layout fixtures</h2>
<div class="grid">
<a class="row" href="tables/01-basic-grid.html"><span class="num">01</span><span class="name">Basic grid</span> — <span class="desc">3×3 grid, auto columns, border-spacing</span></a>
<a class="row" href="tables/02-ragged-rows.html"><span class="num">02</span><span class="name">Ragged rows</span> — <span class="desc">rows of unequal length, empty cells</span></a>
<a class="row" href="tables/03-sections.html"><span class="num">03</span><span class="name">Sections</span> — <span class="desc">tfoot before thead in source, multiple tbodies</span></a>
<a class="row" href="tables/04-anonymous-boxes.html"><span class="num">04</span><span class="name">Anonymous boxes</span> — <span class="desc">display: table divs, cells without a row</span></a>
<a class="row" href="tables/05-caption.html"><span class="num">05</span><span class="name">Caption</span> — <span class="desc">caption, caption-side: bottom</span></a>
<a class="row" href="tables/06-colspan.html"><span class="num">06</span><span class="name">Colspan</span> — <span class="desc">colspan 2/3/full/overflowing</span></a>
<a class="row" href="tables/07-rowspan.html"><span class="num">07</span><span class="name">Rowspan</span> — <span class="desc">rowspan, tall spanning content, span past last row</span></a>
<a class="row" href="tables/08-span-mix.html"><span class="num">08</span><span class="name">Span mix</span> — <span class="desc">interlocking colspan+rowspan block puzzle</span></a>
<a class="row" href="tables/09-widths-explicit.html"><span class="num">09</span><span class="name">Explicit widths</span> — <span class="desc">px/% cell widths, width on a row-2 cell</span></a>
<a class="row" href="tables/10-table-width.html"><span class="num">10</span><span class="name">Table width</span> — <span class="desc">table width auto/px/%/100%</span></a>
<a class="row" href="tables/11-fixed-layout.html"><span class="num">11</span><span class="name">Fixed layout</span> — <span class="desc">table-layout: fixed semantics</span></a>
<a class="row" href="tables/12-colgroup.html"><span class="num">12</span><span class="name">Colgroup</span> — <span class="desc">widths from col/colgroup</span></a>
<a class="row" href="tables/13-content-extremes.html"><span class="num">13</span><span class="name">Content extremes</span> — <span class="desc">unbreakable word, over-wide block</span></a>
<a class="row" href="tables/14-border-spacing.html"><span class="num">14</span><span class="name">Border spacing</span> — <span class="desc">spacing 0 / 10px / asymmetric; padding</span></a>
<a class="row" href="tables/15-border-collapse.html"><span class="num">15</span><span class="name">Border collapse</span> — <span class="desc">separate vs collapse, border conflict</span></a>
<a class="row" href="tables/16-nested-layout.html"><span class="num">16</span><span class="name">Nested layout</span> — <span class="desc">flex + block stacks + wrapping text in cells</span></a>
<a class="row" href="tables/17-nested-table.html"><span class="num">17</span><span class="name">Nested table</span> — <span class="desc">table inside a table cell</span></a>
<a class="row" href="tables/18-vertical-align.html"><span class="num">18</span><span class="name">Vertical align</span> — <span class="desc">top/middle/bottom/baseline</span></a>
<a class="row" href="tables/19-infobox.html"><span class="num">19</span><span class="name">Infobox</span> — <span class="desc">wikipedia-style infobox: fixed width, spans, label column</span></a>
<a class="row" href="tables/20-data-table.html"><span class="num">20</span><span class="name">Data table</span> — <span class="desc">full-width data table, zebra, collapse, tfoot</span></a>
</div>
</section>
<section>
<h2>Graphics & media</h2>
<div class="grid">
<a class="row" href="images.html"><span class="name">Images & backgrounds</span> — <span class="desc">png/jpg/gif/webp/svg, background-image, sizing, broken images</span></a>
<a class="row" href="borders-backgrounds.html"><span class="name">Borders & backgrounds</span> — <span class="desc">border styles, radius, box-shadow, gradients, multiple backgrounds</span></a>
<a class="row" href="svg.html"><span class="name">SVG</span> — <span class="desc">Gosub logo as inline SVG</span></a>
</div>
</section>
<section>
<h2>Visual effects</h2>
<div class="grid">
<a class="row" href="transforms.html"><span class="name">Transforms</span> — <span class="desc">translate, scale, rotate, skew, transform-origin, 3D, perspective</span></a>
<a class="row" href="filters-opacity.html"><span class="name">Filters & opacity</span> — <span class="desc">filter functions, backdrop-filter, opacity, mix-blend-mode</span></a>
</div>
</section>
<section>
<h2>CSS mechanics</h2>
<div class="grid">
<a class="row" href="selectors.html"><span class="name">Selectors & pseudo-elements</span> — <span class="desc">nth-child, combinators, attribute selectors, ::before/::after, states</span></a>
<a class="row" href="units.html"><span class="name">Units & calc()</span> — <span class="desc">px/em/rem/ch/%/vw/vh, calc, min/max/clamp</span></a>
</div>
</section>
<section>
<h2>Interactive & embedded</h2>
<div class="grid">
<a class="row" href="interactive.html"><span class="name">Interactive elements</span> — <span class="desc">details/summary, dialog, CSS-only menu & tabs</span></a>
<a class="row" href="media.html"><span class="name">Embedded media</span> — <span class="desc">canvas, video/audio, iframe, object, aspect-ratio</span></a>
</div>
</section>
<section>
<h2>Real-world pages</h2>
<div class="grid">
<a class="row" href="gopher.html"><span class="name">Gopher proxy page</span> — <span class="desc">real-world styled page</span></a>
</div>
</section>
<footer>
tests.gosub.io — manual render checks for the Gosub browser engine.
</footer>
</body>
</html>