Amelinium 0.6.0 -- Comprehensive Feature Test

Every CSS 2.1 + CSS 3 feature the engine claims to support. Section badges: CSS2 CSS3 HTML4 HTML5 PARTIAL parse-only AMIGA
This page is the truth source: if anything below looks visually broken, the engine has a bug. Each section is labelled with the spec level (CSS 2.1 or CSS 3) and where features are partial or parse-only, called out explicitly. Scroll through, or jump via the TOC below.

Contents

1. Headings HTML4

All six heading levels, plus the UA-default margins.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

2. Paragraphs & text-align CSS2

Four text-align values plus the inherited line-height.

Left-aligned. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Centered. The quick brown fox jumps over the lazy dog three times in a row to test inline measurement.

Right-aligned. Sphinx of black quartz, judge my vow -- a pangram that uses every letter of the English alphabet at least once.

Justified. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3. Block-level elements HTML4 HTML5

UA-default block display for every structural element. Each row prefixed with the tag name so a visual sweep tells you which boxes the engine actually stacked vertically.

div:div

p:p

blockquote:blockquote
pre:pre  (whitespace  preserved)
address:address
header:header
main:main
article:article
section:section
footer:footer
figure:figure
figcaption:figcaption inside figure
fieldset + legendfieldset:content
All listed tags default to display:block per UA. attr() in content is NOT implemented yet, so the tag labels are stamped as literal text instead of generated.

4. Inline elements HTML4 HTML5

Every inline element handled by the parser, in a single paragraph.

bold, strong, italic, emphasis, underline, strikeS, strike, del, mark, small, big, sup, sub, HTML, code, Ctrl+S, output, variable, teletype, span-styled, link, q-quoted, font.

Triple-stack: bold italic underlined. NOBR: this nobr block stays on one line.

5. HTML entities HTML4

Named, numeric decimal, numeric hex.

Named: & < > " (C) (R) (TM) * * <<guillemets>> -- - ... deg +/- x / P sec. + ++  (nbsp)

Numeric decimal: ABC = ABC. Star *, heart (heart), music (music).

Numeric hex: ABC = ABC. Star *, smile :).

Polish: orzel -- bialy, czarny, labedz.

Plain links, button-styled, anchor jumps, link in image. a:link CSS rule applied to the button.

Plain link: juen.in * Bold: Aminet * Italic: RastPort * Image link: [icon] back to top

Internal anchor: jump to tables >> * Bare #: scrolls to top

Button-styled link >>

7. Lists (ul / ol / dl) CSS2 CSS3

All list-style-type values + nested lists + list-style-position.

Unordered -- disc (default), circle, square, none

Ordered -- decimal, lower-alpha, upper-alpha, lower-roman, upper-roman

  1. decimal one
  2. decimal two
  3. decimal three
  1. aleph
  2. bet
  3. gimel
  1. Aleph
  2. Bet
  3. Gimel
  1. primum
  2. secundum
  3. tertium
  1. Alpha
  2. Beta
  3. Gamma

Nested + list-style-position: inside

Definition list (dl/dt/dd)

HTTP
Hypertext Transfer Protocol -- the foundation of the web.
HTTPS
HTTP over TLS, via AmiSSL on Amelinium (not in Amelinium_low).
AmigaOS
The Commodore Amiga's operating system, 1985 to today (OS 3.2 / OS 4).

8. Tables -- basic + span HTML4 CSS2

Data table with header, body, footer, zebra rows (via :nth-child(even)), colspan / rowspan.

Aminet downloads (sample)
NameVersionSizeDescription
program1.lha1.045 KA demonstration program
utility2.lha2.3128 KUseful utility with many features
game3.lha0.91.2 MSimple but addictive
tool4.lha3.122 KSmall command-line tool
Total entries:4

Rowspan + colspan

R0C0R0-R1 / C1 (rowspan=2)R0C2
R1C0R1C2
R2 spans 3 columns

Layout table (HTML4 idiom -- <table width="100%">)

Sidebar
Navigation column. Per CSS 2.1 sec.17.5.3 every cell in a row stretches to the row's height.		 Main
The body of the layout. This pattern is still common on Amiga-era pages and works without flex/grid.

9. Tables -- border-collapse / caption-side / <col> CSS2

CSS 2.1 sec.17.6.2.1 border conflict resolution (0.6); caption-side: bottom (0.6); explicit column widths via <col> (0.6).

border-collapse: collapse with conflict resolution

Middle column declares a thicker double border. Per sec.17.6.2.1 that border wins over the neighbour's thinner solid border -- pre-0.6 the engine drew both, doubling the line.

A1B1 thick doubleC1
A2B2 thick doubleC2
A3B3 thick doubleC3

caption-side: bottom (default = top)

Figure 1. Caption rendered below the table thanks to caption-side: bottom.
YearEvent
1985Amiga 1000 launched
1992AmigaOS 3.0 / AGA chipset
2026Amelinium 0.6 ships

<col> / <colgroup> widths feed table layout (0.6)

narrowmediumauto fills the rest
80px200pxflexible -- takes whatever's left

10. Tables -- table-layout / empty-cells / zebra CSS2 CSS3

table-layout: fixed (400px container, columns share evenly)

AB shortC with much longer header text that overflows
123 truncated content because table-layout:fixed + overflow:hidden

empty-cells: show (default)

XX
X

empty-cells: hide (needs border-collapse:separate + visible spacing)

XX
X
Per CSS 2.1 sec.17.6.1.1, empty cells with empty-cells:hide render without a border. Implementation in 0.6 may treat this as parse-only.

11. Forms HTML4 HTML5

Every input type the engine renders. The hidden input below the heading should produce no visible box.

* *


* * *

Grouped (fieldset + legend)

*

12. Images HTML4

Explicit size, scaled, with border, HTML4 align attribute, image-link.

full

Same image at half size, border="2": half

Inline tiny: [icon] mixed with text.

MISSING ALT TEXT -- this image source does not exist; the alt string should render.

13. Floats & clear CSS2

CSS 2.1 sec.9.5 -- text wraps around floats; clear moves past them.

float leftText flows around a left-floated image. The image is given explicit width and height so layout knows its box up-front. The paragraph keeps wrapping until the cleared bottom of the image. Then enough lines fill in to push past it and demonstrate CSS 2.1 sec.9.5 float behaviour. Floats are essential for old-school sidebars and Amiga-era page designs. Sphinx of black quartz, judge my vow.

Cleared by clear:both.

float rightRight-floated image. Same idea, mirrored. The paragraph text fills the LEFT side instead. Useful for icons on the right margin, or for the classic Amiga-magazine layout. Pack my box with five dozen liquor jugs.

Cleared.

14. Positioning (relative / absolute / fixed) CSS2

Containing block for position:absolute = nearest position:relative ancestor (CSS 2.1 sec.10.1). position:fixed currently treated as absolute (no scroll-aware fixed positioning).

top:8 right:8
bottom:8 left:8
top:30% left:40%

Absolute with all four sides set -- fills CB minus 4px margin:

top/right/bottom/left: 4

Fixed (treated as absolute) -- the corner badge in the top-right of the viewport is position:fixed.

FIXED

15. z-index stacking CSS3

Positioned boxes with explicit z-index. Visual order: green (z=2) sits behind red (z=3) but above blue (z=1).

z=1 blue
z=3 red
z=2 green

16. Box model + box-sizing CSS2 CSS3

Same declared width 200px + padding 10 + border 4. content-box total = 228; border-box total = 200.

content-box: width:200 = content. Actual = 200+20+8 = 228px.
border-box: width:200 = border-edge. Content = 200-20-8 = 172px.

17. Border styles CSS2

All eight named border styles. groove/ridge/inset/outset render with the same two-tone shading in 0.6 (acceptable approximation).

solid dashed dotted double groove ridge inset outset hidden none

18. Selectors -- basic CSS2

Type, universal, class, ID, compound. Each row's selector is named in <span>.

.sel-row.match -- class + class compound (this row matches both, hence green background)
id="unique-id" -- matched by inline style here

Type p selector picks this up implicitly via UA defaults

19. Selectors -- combinators CSS2 CSS3

Descendant (space), child (>), adjacent sibling (+), general sibling (~).

Direct child paragraph -- should be red bold (matched by .cmb-parent > p) AND italic (matched by .cmb-parent p descendant).

Grandchild paragraph inside a div -- should be italic ONLY (descendant matches, child does not).

Host h3 (adjacent test below)

Immediately after h3 -- should have yellow background from .cmb-host + p AND green color from .cmb-host ~ p.

Second sibling -- green only (general sibling ~ matches, adjacent + does not).

Third sibling -- green only.

20. Selectors -- attribute CSS2 CSS3

CSS 2.1: [attr], [attr=val], [attr~=val], [attr|=val]. CSS 3: [attr^=val], [attr$=val], [attr*=val]. Demos use real HTML attributes only (target, type, title, lang) since the parser drops generic data-* attrs.

[attr] presence: target= present -> red * no target -> default color

[attr=val] exact: a text input below should be cream-coloured (matched by input[type="text"]):

[title~=val] word match: the word hot in space-separated list:
title="hot" -> bold * title="cold hot extra" -> bold * title="hotter" (not exact word) -> normal

[lang|=en] hyphen-prefix:
English (en) -> italic * en-US -> italic (prefix match) * pl -> normal

[title^="pre"] starts-with (CSS3): title="prefix-x" -> green

[title$="post"] ends-with (CSS3): title="x-post" -> red

[title*="mid"] substring (CSS3): title="x-mid-y" -> blue bg

21. Selectors -- :nth-child, :not, :first/last-child CSS3

Already used heavily in the table zebra rows. Standalone demo here for direct visual check.

row 1:first-child -> green bg, bold
row 2:nth-child(2) -> cream bg
row 3:nth-child(3n) -> light blue bg
row 4default
row 5default
row 6:nth-child(3n) -> light blue bg again
row 7:last-child -> red bg, italic

:not() exclusion

22. Multi-class & specificity CSS2

Compound class (.X.Y) requires BOTH classes on same element. ID beats class beats type.

.mc only -- white bg
.mc.alt -- amber bg
.mc.alt.hot -- red bg, white text
.mc.alt.hot.boxed -- red bg + navy border

Specificity ordering

.spec (no win class) -> grey

.spec.win -> navy (p.spec.win beats .spec.win on specificity)

#spec-id -> red (id beats class)

23. Pseudo-elements CSS2 CSS3

::before / ::after insert generated content. ::first-letter styles the first character (drop cap). ::first-line is currently parse-only (the rule is accepted but the styling does not apply visually).

::before and ::after

prefix only

suffix only

both wrapping

open-quote / close-quote inside content (CSS 2.1 sec.12.4)

He said: this is a quoted phrase, and then continued.

::first-letter (drop caps)

Once upon a time, on a faraway disk volume named Work:, lived a fleet of small hardworking AmigaDOS commands. They sorted files, copied directories, and patiently restored from backups whenever the user pressed three keys in the wrong order. Their work was quiet and constant.
No float, just larger and recoloured first character -- useful for stylistic headers. The rest of the paragraph stays at the body font size and inherits everything else from this block.

::first-line (parse-only)

The very first line of this paragraph SHOULD render bold and red if ::first-line were fully implemented. In 0.6 the rule is accepted by the parser but the layout does not apply it yet -- this is documented behaviour.

24. CSS counters CSS2

Auto-numbered headings via counter-reset + counter-increment + counter() inside content.

Counter on h3 within a scope

Introduction

Counters give you numbered headings without typing the number yourself.

Scope

Reset happens on the container; each h3 bumps the counter.

Limitations

Decimal only in 0.6. counters() (plural) and attr() not yet implemented.

Custom-numbered list via counter (replaces native marker)

  1. First item
  2. Second item
  3. Third item

25. Backgrounds CSS2

background-color

Solid background, white text.

background-image with explicit position (right top), no-repeat

Content area with image anchored top-right. Image does NOT extend the box height per CSS 2.1 sec.14.2.1.

background-repeat: repeat-x and repeat-y

repeat-x -- strip across the top
repeat-y vertical strip on the left (float:left to keep things tidy)

This paragraph flows to the right of the y-repeating background strip. The image tiles down the column on the left.

background-position: center center

Image centered in both axes.

26. Linear gradients CSS3

RTG truecolor: per-pixel interpolation. Chipset / 8-bit RTG: 32 strip bands along the dominant axis.

to right -- red -> amber
180deg three-stop with explicit 0% / 50% / 100% positions
45deg diagonal, two stops
to bottom right (corner keyword -> 135deg)
90deg four-stop auto-distributed (red, yellow, green, blue)
Hard stops at 50% -- half red, half blue with no gradient (red 0% red 50% blue 50% blue 100%)

27. CSS Custom Properties (var()) CSS3

Variables defined on :root, consumed via var(--name). Fallback resolves when the name is unbound. Scoped overrides inherit down the subtree.

Standard card -- uses --paper / --ink / --accent from :root
Fallback test -- uses var(--missing-name, #2d572c), falls back to green
Inverted: --accent as background, --paper as text
Inside .theme-dark -- same .var-card class but the three vars are re-bound on this ancestor. Demonstrates per-element scope inheritance.

28. Flexbox CSS3

display: flex with flex-grow:1

One
Two longer
Three

justify-content -- all six values

start1
start2
end1
end2
ctr1
ctr2
btw1
btw2
btw3
arn1
arn2
arn3
evn1
evn2
evn3

align-items (cross axis) with min-height:60px

start
tall
two
lines
end
tall
two
lines
center
tall
two
lines
stretch
tall
two
lines

flex-direction: column, column-reverse, row-reverse

col 1
col 2
col 3
r-col 1
r-col 2
r-col 3
rev 1
rev 2
rev 3

flex-wrap (items width 110px each)

w1
w2
w3
w4
w5
w6
w7

order -- items visually go 1 -> 2 -> 3 even though source is reversed

source first (order=3) -> ends up LAST
source middle (order=2) -> MIDDLE
source last (order=1) -> ends up FIRST

flex shorthand: 0 0 80px (fixed) + 1 1 auto (grow)

fixed 80px
grows to fill

align-self overrides align-items per child

stretch (default)
self-start
self-end
self-center

29. Grid CSS3

3 equal columns, gap:4px, auto-placement (6 items)

A
B
C
D
E
F

Mixed: 80px 1fr 80px

L
middle stretches
R

Fixed px columns: 100px 200px 100px (any extra space stays empty)

100
200
100

repeat(4, 1fr) with 9 cells (last row partial)

1
2
3
4
5
6
7
8
9

Per-axis gap (row 8 / col 16)

A
B
C
D
E
F

Named template areas (header / side / main / ads / footer)

header (spans 3 cols)
side
main content
ads
footer (spans 3 cols)

30. Effects (shadow / radius / opacity / text-shadow) CSS3

box-shadow: 4px 4px 0 dark-blue
box-shadow: 0 0 8px red (blurred)

border-radius: 12px border-radius: 4px

opacity: 0.7
opacity: 0.5

text-shadow with amber offset

31. Text properties (transform / indent / spacing) CSS2

text-transform

uppercase: the quick brown fox

LOWERCASE: THE QUICK BROWN FOX

capitalize: the quick brown fox

text-indent -- first-line indent 32px

First line is indented by 32px. The wrapped second line returns to the left margin. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

letter-spacing / word-spacing / line-height

letter-spacing: 2px -- each character gets extra horizontal space.

word-spacing: 8px -- extra gap between words.

line-height: 28px -- taller-than-normal line. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

32. White-space & word-wrap CSS2 CSS3

white-space:nowrap -- this paragraph should NOT wrap inside the 200px container, even though the text is long.

white-space:pre   -- spaces      and
newlines preserved exactly.
		Tabs also kept.
white-space:pre-wrap -- newlines preserved
AND wrapping happens when the line is too long for the container width which is 240px here.
white-space:pre-line -- newlines kept, multiple    spaces    collapse.
Second line.

word-wrap:break-word -- a verylongunbreakableidentifierWithoutSpaces still wraps to stay inside the box.

33. Vertical-align CSS2

Inside table cells: top, middle, bottom, baseline. In inline context: super, sub.

topmiddlebottombaselinereference (60px tall)

Inline: E = mc2 and H2O are super and sub.

34. Visibility / overflow / display:none CSS2

visibility:hidden takes space; display:none does NOT

BEFORE | [invisible but space reserved] | AFTER

BEFORE | [removed entirely] | AFTER (the two pipes are adjacent because the hidden span collapses)

overflow modes (200px wide x 40px tall containers, content overflows)

overflow:hidden -- content beyond 40px tall and 200px wide is clipped. Lorem ipsum dolor sit amet consectetur adipiscing elit.
overflow:scroll -- scrollbars always visible. Lorem ipsum dolor sit amet.
overflow:auto -- scrollbars only if needed. Lorem ipsum dolor sit amet consectetur adipiscing elit.

35. @media queries CSS3

The box below is GREEN on screens >=501px wide and RED on narrower (<=500px). Resize the window to toggle.

Resize the browser to see the bg colour flip at the 500/501 px boundary.

36. !important cascade CSS2

.imp-test.override sets color:#c63b1c !important, which beats an inline style="color:#0000ff".

Plain -- grey (from .imp-test {color:#444})

Override class -- RED (!important beats class default)

Inline-override too -- STILL RED because !important wins against inline non-!important

37. :lang() selector CSS2

CSS 2.1 sec.5.11.4 -- matches by the closest ancestor with lang= attribute. Prefix-with-hyphen rule (en matches en, en-US, but not english).

Polski tekst * Deutscher Text * English text (default) * en-US (matches [lang|=en] from sec.20)

38. Local files / URL features AMIGA

Amelinium-specific URL handling -- these don't generate visual output, just documentation.

Binary-content sniff: any response without a text/* or image/* Content-Type that begins with an Amiga hunk / LHA / LZX / ZIP / gzip / 7z / ELF / MZ / PDF / IFF / ADF magic falls through to Save-As rather than rendering hexdump noise.

Amelinium 0.6.0 * End of feature demonstration * If anything above looked broken, the engine has a bug * back to top