Amelinium 0.7.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 anchors to the viewport per CSS 2.1 sec.9.6.1 and is repainted in place on every scroll step.

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

position:fixed -- the red badge in the top-right corner of the window stays put as you scroll. Correct rendering costs a full repaint per scroll step instead of the fast bitmap shift; on a slow Amiga that can feel sluggish, so the behaviour is toggleable via Settings → Respect position:fixed (full redraw on scroll). Default ON; turn it off if scrolling drags and you can live with fixed elements sliding along with the page.

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.

39. background-size: cover / contain / explicit CSS3 B&B L3

cover = fill, may crop; contain = fit, may letterbox; length / % / auto otherwise.

cover
contain
100px 40px
50% 50%
auto 60px
80px auto

40. border-radius: 4-corner shorthand & per-corner CSS3 B&B L3

Shorthand: TL TR BR BL (margin-style fill-in). Per-corner properties override individually.

14 6 0 6
8 22
TL only
TR only
BR only
BL only
tab top

41. text-decoration-color CSS3 Text Deco L3

Underline / overline / line-through paint in their own colour instead of the text colour.

Underline in red, text default.

Shorthand: text-decoration: underline #1a8c4a.

Dark-blue text, red overline.

Grey strikethrough on default text.

42. outline CSS2 sect.18.4

Paints OUTSIDE border edge, does NOT take layout space. Used for focus a11y.

outline: 3px solid red
outline: 2px dashed
outline: 2px dotted
outline: 6px double

43. cursor CSS2 sect.18.1

Hover the chips to see the cursor change (mouse-driven Amiga supports pointer/text/wait/help/etc.).

pointertextwait helpcrosshairmove not-allowedn-resize

44. font-weight 100..900 + bolder / lighter CSS3 Fonts L3

Granular weight stored. Available faces map FW_IS_BOLD >= 600 to the bold variant; numeric < 600 stays regular.

100 thin

300 light

400 normal

600 semi-bold

700 bold

900 black

parent 600 + child bolder (700)

parent 700 + child lighter (400)

45. line-height: em / % / unitless multiplier CSS2 sect.10.8.1

Unitless number inherits AS-IS (multiplier x child's own font-size), unlike em/% which compute once on parent.

line-height: 1.6em over multiple lines lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.

line-height: 160% same content lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.

line-height: 1.6 (unitless multiplier) same content lorem ipsum dolor sit amet consectetur adipiscing.

line-height: 28px explicit pixels lorem ipsum dolor sit amet consectetur adipiscing elit sed do.

parent (14px / 1.5): child 22px inherits multiplier -> 33px line-box.

46. vh / vmin / vmax + inset shorthand CSS3 Values L4 + Logical L1

vh resolved against viewport height (not page height -- old bug fixed). inset = top right bottom left.

width: 50vw -- half the viewport width
height: 10vh -- 10% of viewport height

vmin/vmax tiles:

position:absolute + inset: 8px 12px 8px 12px

47. text-align: start / end / match-parent CSS Text 3

Logical keywords. Browser is LTR-only: start -> left, end -> right.

text-align: start -- LTR resolves to left.

text-align: end -- LTR resolves to right.

match-parent on a paragraph inside a right-aligned div.

48. @media (hover) / (pointer) MQ L4

Amiga = mouse-driven so hover=hover and pointer=fine. Green = matched, red = not matched, grey = parser missed the query.

@media (hover: hover) -- should be green

@media (hover: none) -- should be grey/inactive

@media (pointer: fine) -- should be green

@media (pointer: coarse) -- should be grey/inactive

49. Form-state pseudos Sel L4

:placeholder-shown (yellow), :required (red border), :optional (green border), :read-only (grey bg), :checked (red label), :disabled (grey), :valid/:invalid outline, :in-range/:out-of-range bg, :default (bold).

<- yellow bg (empty + placeholder)

required (red border) optional (green border)

read-only read-write

disabled enabled

in-range (green bg) out-of-range (red bg)

50. Selectors L4 -- :not list / [attr=val i] Sel L4

:not(.a, .b) list excludes both; [attr=val i] case-insensitive flag (engine already case-insensitive HTML-wide, so the flag parses without error).

plain (green)

.skip (white)

.skip2 (white)

another plain (green)

data-lang="EN" with [data-lang=en i] -- green bold (case-insensitive match)

data-lang="fr" -- default colour

51. Selectors L3 -- :empty + :*-of-type Sel L3

:empty (red bar), :first-of-type (green), :last-of-type (red underline), :nth-of-type(2) (blue bg).

first paragraph (green)

second (blue bg + nth-of-type(2))

third

last (red + underline)

after-empty

52. list-style-type extended + counter(name, style) CSS3 Counter Styles L3

decimal-leading-zero pads "0N.", counter() second arg honoured.

  1. one
  2. two
  3. three
  1. roman one
  2. roman two
  1. greek alpha
  2. greek beta

section

section

section

nested

nested

nested

53. display: flow-root + overflow-x / -y Display L3 + Overflow L3

float
flow-root container wraps the float.
overflow-x: scroll, overflow-y: hidden -- long content that does not wrap because white-space: nowrap.

54. border-style: groove / ridge / inset / outset CSS2 sect.8.5.3

3D variants shade by tinting the base colour 1.5x (light) and 0.5x (dark).

groove
ridge
inset
outset
double
dashed
dotted

55. flex-flow shorthand Flexbox L1

flex-flow = flex-direction || flex-wrap in any order.

row wrap 1
2
3
4
5
column 1
column 2
column 3
row-reverse 1
2
3

56. attr() / multi-shadow / @media height / decoration longhands CSS L3/L4

attr() href annotation: Example link

text-shadow multi (first wins): blue+red overlap

box-shadow multi (first wins): two corners
@media (min-height:200px) + (max-height:100000px)
orientation: landscape (PAL 640x512 is landscape)
orientation: portrait (hidden when wide)
text-decoration longhands: line=underline, color=red, style=dashed
text-align-last (parse-only): this is a justified paragraph and the last line should align right.

57. align-content + flex margin:auto Flexbox L1 sect.8.1/sect.8.4

7 wrapped flex containers showing each align-content value. Free cross-space distribution across lines.

A1
A2
A3
A4
A5
A6
A7
A8
B1
B2
B3
B4
B5
B6
B7
B8
C1
C2
C3
C4
C5
C6
C7
C8
D1
D2
D3
D4
D5
D6
D7
D8
E1
E2
E3
E4
E5
E6
E7
E8
F1
F2
F3
F4
F5
F6
F7
F8
G1
G2
G3
G4
G5
G6
G7
G8

flex item margin:auto -- main-axis auto absorbs free space.

left
middle
right (margin-left:auto)
centred via margin:auto on both sides

flex item margin:auto vertical -- cross-axis auto centres in tall row.

vertically centred (margin-top/bottom:auto)

58. polish batch -- alpha hex / cascade kw / namespace / cursor / display 2-kw CSS L3/L4

8-digit hex alpha blend

#ff000080 (red, 50% alpha) -> looks pink on white
#00800040 (green, 25% alpha) -> very light green

CSS-wide cascade keywords (unset, initial, revert)

parent blue text on red bg; this span = color:unset (inherit blue) + bg:unset (transparent)
initial = back to UA defaults
revert = same as initial in this engine

Namespace selector prefix stripped (HTML has no XML namespaces)

selector was *|div.ns-test -- matches because prefix dropped

cursor: grab / zoom-in / none -- extra keywords

hover me: grab (mapped to move pointer)
hover me: zoom-in (mapped to crosshair)
hover me: none (mapped to default)

box-sizing: padding-box (deprecated, falls back to content-box)

width:200 padding:10 border:4 -- total ~= 228px

display: 2-keyword form (Display L3 sect.2)

display: block flow -> block
display:
block
flex

59. CSS3 named colors + font-weight 1..1000 + display:contents + exotic Color L4 / Fonts L4 / Display L3 / Lists L3

CSS3 extended named colors (60+ new entries in this batch)

aliceblue cornflowerblue saddlebrown palegreen mediumslateblue darkviolet gainsboro rosybrown

font-weight arbitrary numeric (CSS Fonts L4)

font-weight: 150 (bucket -> 100)

font-weight: 350 (bucket -> 400)

font-weight: 550 (bucket -> 600)

font-weight: 750 (bucket -> 800)

font-weight: 950 (bucket -> 900)

display: contents (suppress wrapper box)

ABC
text after wrapper

text-overflow 2-value form

very long text that will get truncated at the end, second token is "ellipsis"

Exotic list-style-type (armenian/hebrew/cjk-decimal -> decimal fallback)

  1. armenian
  2. two
  1. cjk-decimal
  2. two

60. unit Q + overflow:clip + counter multi-name + parse-only extras Values L4 / Lists L3 / Overflow L3

Q unit (quarter-millimetre): 50Q ~= 47px

50Q x 50Q

overflow: clip (mapped to hidden)

this content gets clipped at the box edge with no scroll affordance.

text-indent with hanging keyword (numeric kept, keyword consumed)

Indented first line -- engine can't honour `hanging` per-line so the keyword is silently consumed; the numeric 2em still applies.

counter-reset with multiple name/value pairs

increments counter "a"

another a

increments counter "b" (started at 5)
another b

aspect-ratio (parse-only, no auto-size enforcement)

aspect-ratio: 16/9 -- declared but not enforced; container keeps its width:200

column-count (parse-only -- would split content into 3 columns)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

61. hwb() colors + flex z-index stacking Color L4 / Flexbox L1 sect.5.4

hwb(hue whiteness% blackness%) -- additive HSV-like model

hwb(0 0% 0%) hwb(120 0% 0%) hwb(240 0% 0%) hwb(60 30% 0%) hwb(300 0% 30%) hwb(180 50% 0%)

flex item with z-index creates stacking context (overlapping margin-left:-30px)

A
B (z:5)
C

62. @media polish + place-* shorthands MQ L4 / Box Alignment 3

@media features (color/scan/resolution/aspect-ratio/prefers-*)

@media (color) -- match: has color screen
@media (color: 8) -- Amiga RTG >= 8 bits/channel: green text
@media (scan: progressive) -- bold
@media (resolution: 1dppx) -- italic
@media (prefers-reduced-motion: no-preference) -- bold dark blue (we never animate)
@media (prefers-color-scheme: light) -- light bg (no dark mode yet)
@media (aspect-ratio: 1/1) -- should NOT have red bg on landscape PAL

place-content shorthand

1
2
3
4
5
6

63. :is() / :where() selector list expansion Selectors L4 sect.3.7/sect.3.8

:is(.is-a, .is-b, .is-c) expands to three rules

.is-a -- green bg via :is()
.is-b -- same
.is-c -- same

descendant :is/:where (prefix expansion)

h4 inside .iw-box (matched via :is(h4, p))

p inside .iw-box (also matched)

strong/em: strong and em (via :where)

div:is(.alpha, .beta) -- outer prefix lifted

div.alpha -- left border via div:is(.alpha, .beta)
div.beta -- same rule, second list item

64. @media range / @supports not-or / counters() / @import mq MQ L4 / Cond3 / Lists L3

@media L4 range syntax `(width >= N)` / `(width > N)` etc.

width >= 320px -- green bg (PAL is 640)
height < 100000px -- bold dark green
width > 200 AND height >= 100 -- italic

@supports with `not` / `or` / `and` operators

@supports ((display:grid) or (display:flex)) -- bold dark blue
@supports (display:grid) and (display:flex) -- both supported, light bg
@supports not (display:zzz-fake) -- red text (unknown value)

counters() function (single-value fallback)

first section

second section

third section

65. angle units in gradients + nested @media + position:sticky Values L4 / MQ L4

linear-gradient angle units (turn / grad / rad)

0.25turn ~= 90deg (left -> right)
100grad ~= 90deg (left -> right)
3rad ~= 171deg (mostly top -> bottom)

Nested @media -- outer matches, inner matches -> rule applied

@media (min:100) -> @media (max:big) -> match
@media (min:100) -> @media (max:1) -- must NOT have red bg

position: sticky (falls back to relative)

sticky -> relative (engine has no scroll-aware sticky)

Amelinium 0.7.0 * End of feature demonstration * If anything above looked broken, the engine has a bug

back to top