diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 199c766..f180e0c 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -9,8 +9,8 @@ env:
   DOCS_BRANCH: ${{ secrets.DOCS_BRANCH }}
   # Snapshot baselines are per-platform and committed; a missing one is a gap, never a pass.
   ANGLESHARP_SNAPSHOT_STRICT: 1
-  ANGLESHARP_VERSION: 1.8.0
-  ANGLESHARP_CSS_VERSION: 1.1.0
+  ANGLESHARP_VERSION: 1.8.1
+  ANGLESHARP_CSS_VERSION: 1.1.1
 
 jobs:
   can_document:
diff --git a/.github/workflows/update-snapshots.yml b/.github/workflows/update-snapshots.yml
index 5bce9e1..985c05d 100644
--- a/.github/workflows/update-snapshots.yml
+++ b/.github/workflows/update-snapshots.yml
@@ -15,8 +15,8 @@ permissions:
   contents: write
 
 env:
-  ANGLESHARP_VERSION: 1.8.0
-  ANGLESHARP_CSS_VERSION: 1.1.0
+  ANGLESHARP_VERSION: 1.8.1
+  ANGLESHARP_CSS_VERSION: 1.1.1
 
 jobs:
   # Keep this matrix identical to the `test` matrix in ci.yml, images included - a baseline
diff --git a/AGENTS.md b/AGENTS.md
index 94cae8d..eee098a 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -52,7 +52,99 @@ Font handling resolves each entry of a `font-family` list in order, and the firs
 
 Table spans: a cell covers the columns and rows it spans, and a spanning cell's height is shared across the rows it covers rather than imposed on each of them. With `border-collapse: collapse` each cell paints only its top and left edge and the table adds the frame, so shared edges are drawn once and no rule is painted across a spanning cell. Cell content honours `vertical-align` (`top`, `middle`, `bottom`), defaulting to the `middle` that AngleSharp.Css resolves for cells; `baseline` is treated as `top`, since baselines are not aligned across a row. Note that on a cell `vertical-align` positions the content box, which is a different meaning from the inline shift `ParseVerticalAlign` applies to `super`, `sub` and friends.
 
-Current behavior includes block layout, margins, padding, borders, floats, inline-block, relative/fixed/absolute positioning, z-index ordering, outlines, text styling, text alignment, line-height, letter-spacing, text-indent, vertical-align, and generic font-family handling.
+`border-radius` (rounded corners): the shorthand and all four longhands (`border-top-left-radius` etc.) are supported, each independently elliptical (`border-top-left-radius: 20px 10px`, or the whole-box `border-radius: 40px / 20px` slash shorthand) and represented backend-agnostically as `RenderCornerRadii` (`Rendering/RenderCornerRadii.cs`) - eight floats, X/Y per corner. `RenderCornerRadii.ClampToBox` implements the CSS corner-overlap-prevention algorithm (https://www.w3.org/TR/css-backgrounds-3/#corner-overlap): a single global scale factor, not a per-axis one, is applied to every radius so adjacent corners along the same edge never overlap - this is what turns a `border-radius` larger than half a box's height into a pill/stadium shape rather than a self-intersecting curve. A background fills with `SKRoundRect`/`DrawRoundRect` (`SkiaRenderBackend.DrawFillRect`) instead of `DrawRect` whenever `Radii` is non-zero. A border with rounded corners is painted differently depending on whether every edge shares the same width: a uniform-width border becomes a single `StrokeRoundedRectCommand` (one stroked ring, inset by half the border width, with the radius reduced by that same half-width since the stroke sits on the border's centerline); a mixed-width border (e.g. `border-right-width` wider than the others) has no single stroke width to give that ring, so it falls back to the existing four-straight-rectangle border path and the corners render square - a deliberate, documented limitation rather than an attempt at four independently-rounded quads. `outline` never rounds regardless of `border-radius`, matching the CSS spec, because `PaintOutline`'s internal `PaintBorder` call never passes the element's radii. Percentage radii resolve to pixels through AngleSharp.Css's computed-style engine before this renderer ever sees them. A confirmed AngleSharp.Css 1.1.0 bug - both the horizontal and vertical component of a percentage radius resolving against the *containing block's width* instead of per-axis against the element's own width/height, confirmed by rendering the same `%` radius against different viewport widths and observing the resulting pixel value track the viewport, not the element's own box - was reported with a reproducing test in AngleSharp.Css's own suite (`AngleSharp.Css.Tests/Styling/BorderRadiusPercentageResolutionTests.cs`) and is now **fixed upstream**, confirmed by `BuildDisplayList_ResolvesPercentageBorderRadiusAgainstBox` flipping from the old (wrong) 30px/30px to the correct per-axis 20px/8px with no renderer-side code change of its own - this renderer never carried a workaround for it, since there was nothing to intercept short of re-deriving the radius itself.
+
+`box-shadow` and `text-shadow`: both are parsed from AngleSharp.Css's `GetBoxShadow()`/`GetTextShadow()` computed-style accessors, which return every comma-separated layer already normalized with the color as `rgba(r, g, b, a)` regardless of how it was authored (`red`, `#f00`, ...) - `ExtractColorToken` (`HtmlRenderer.cs`) relies on that normalization to split a layer's color from its lengths by locating the `rgba(...)` call rather than naively splitting on whitespace, which the spaces after that function's commas would otherwise break. `text-shadow` is an inherited property and AngleSharp.Css already resolves that inheritance before this renderer sees it (a child with no `text-shadow` of its own reports its ancestor's value verbatim, and an explicit `text-shadow: none` reports the literal string `"none"`, not an empty one) - `ParseTextShadows` still takes an `inherited` fallback for defense in depth, mirroring how `color` and the other inherited text properties are already handled in `ResolveTextStyle`. `box-shadow` is not inherited, matching spec, so `ResolveBoxStyle` parses it directly with no inherited fallback. Multiple shadows paint back-to-front in reverse authoring order (`PaintBoxShadows`/`PaintTextShadows`), because CSS defines the first-listed shadow as topmost. A `box-shadow` layer is `RenderBoxShadow` (`Rendering/RenderShadow.cs`) - offset, blur, spread, color, and `inset` - painted via `DrawBoxShadowCommand`/`SkiaRenderBackend.DrawBoxShadow`, which reuses the same `RenderCornerRadii`/`SKRoundRect` machinery `border-radius` already established so a shadow follows the box's own corner rounding. An outset shadow is the border box's `SKRoundRect` grown by `SpreadRadius` (via `SKRoundRect.Inflate`/`Deflate` - verified functionally to adjust the rect *and* clamp each radius down to zero together, exactly matching the CSS spread semantics for free) and offset, blurred with `SKMaskFilter.CreateBlur`, then clipped with `SKClipOperation.Difference` against the *un-inflated* border box so the shadow never bleeds into the box's own interior even when its background is transparent - this clip-out is required by spec, not an approximation. An inset shadow is the mirror image: the border box shrunk by spread and offset, painted as the even-odd "ring" between that shrunk shape and a rect well outside the box, clipped with `SKClipOperation.Intersect` to the border box so it only shows inside. Both cases derive the Gaussian blur sigma as half the CSS blur radius (`shadow.BlurRadius / 2f`), the same approximation browsers commonly use; there is no dedicated conformance test pinning that constant, so treat it as adjustable if a real blurred-shadow comparison ever disagrees with it. `text-shadow` has no spread or inset, and paints as a second, blurred copy of the same text run (`DrawTextShadowCommand`/`SkiaRenderBackend.DrawTextShadow`) offset behind the real glyphs, shaped through the same `SkiaTextShaping` path as ordinary text so a shadow never drifts out of alignment with what it is shadowing. Painting order for a box is background, then `box-shadow` (all layers), then border, then outline - box-shadow must sit on top of the background (not behind it) even though it is visually "behind" the box's own content, because an inset shadow paints inside the box and would otherwise be hidden by an opaque background; this was a real bug caught by rendering the inset-shadow visual test and seeing no shadow at all, fixed by reordering `PaintBoxShadows` after `PaintBackground` at all three box-painting call sites.
+
+A box's own background/border/`box-shadow`/outline must paint *behind* its children, but an auto-sized box's height is only known once its children have been laid out (and their commands already appended to the display list) - so `LayoutElement`, `LayoutFlexContainer`, and `LayoutGridContainer` each capture `displayList.Commands.Count` as `boxPaintInsertIndex` before laying out their children/items, build the box's own paint commands into a scratch `DisplayList` buffer, and splice that buffer in at the captured index via `DisplayList.InsertRange` once the box's final size is known - rather than simply appending, which used to paint the box's own background *after*, and therefore on top of, its children. This was a real, confirmed bug (not hypothetical): a `<div>` with both a `background-color` and direct text content rendered the text completely invisible, and an absolutely-positioned or negative-`z-index` child was fully hidden behind its own containing block's background. Fixed by the splice approach and locked in by `BuildDisplayList_PaintsOwnBackgroundBehindOwnDirectTextContent`/`RenderToPng_PaintsOwnBackgroundBehindOwnDirectTextContent`; two pre-existing tests (`negative-z-index-behind-in-flow`/`absolute-positioned-out-of-flow` and their structural counterpart) had encoded the old, incorrect order as "expected" and were corrected to match CSS 2.1 Appendix E's actual stacking order (a stacking context's own background paints first, *then* its negative-z-index descendants, on top of it).
+
+`display: list-item` (`<ol>`/`<ul>`/`<li>` and any element explicitly given this display value) renders a marker without any dedicated layout mode of its own - AngleSharp.Css's `ShouldRenderAsBlock` already treats `list-item` as block-level (the `_ => true` default case), so an `<li>` flows through the ordinary block-flow path in `LayoutElement`; `PaintListItemMarker` is called once box geometry is known (before children are laid out - it doesn't depend on their size) and paints a bullet shape or number/letter text just like any other box content. `list-style-type` and `list-style-position` are read via `style.GetPropertyValue(...)` rather than a typed accessor (AngleSharp.Css has none for either). A confirmed AngleSharp.Css gap - unlike `border-radius` or `box-shadow`, an *unset* `list-style-type` on a `<ul>` (as opposed to `<ol>`, whose UA rule explicitly sets `decimal`) used to report an empty string, not `disc` - was reported with a reproducing test in AngleSharp.Css's own suite (`AngleSharp.Css.Tests/Styling/ListStyleComputedValueTests.cs`) and is now **fixed upstream**, via a targeted UA-stylesheet addition (`ol, ul, dir, menu, dd { ...; list-style-type: disc; list-style-position: outside }`) rather than a general "resolve every unset property to its own initial value" mechanism - `ResolveListStyleType`'s own `"disc"` default in this renderer is therefore *not* fully redundant: it still fires, correctly, for an element given `display: list-item` explicitly on a tag the UA rule does not cover (confirmed empirically that this case still computes an empty `list-style-type`), so it remains in place as a narrower defensive fallback than it used to be. `disc`/`circle`/`square` are shape markers reusing the exact `RenderCornerRadii`/`SKRoundRect` machinery `border-radius` already established - a `disc` is a `FillRect` with full corner radii (a circle), a `circle` is the `StrokeRoundedRect` equivalent (a ring), and a `square` is a plain zero-radius `FillRect` - so no new rasterization code was needed for markers at all. Every other keyword (`decimal`, `decimal-leading-zero`, `lower-alpha`/`upper-alpha`/`lower-latin`/`upper-latin`, `lower-roman`/`upper-roman`) is a text marker drawn with the ordinary `DrawText` command, formatted by `FormatListMarkerText`/`FormatAlphaListMarker`/`FormatRomanListMarker`; an unrecognized keyword falls back to `decimal`, and Roman numerals outside 1-3999 (which have no standard representation) fall back to a plain decimal number - both matching typical browser behavior for out-of-range/unsupported values. `list-style-type: none` suppresses the marker entirely.
+
+An ordered item's ordinal comes from `ResolveListItemOrdinal`, which walks the `<li>`'s actual DOM parent's direct `<li>` children in document order (via plain `IElement.ParentElement`/`Children`, not the render tree, which can reorder for z-index/absolute positioning) - honoring `<ol start>`, `<ol reversed>`, and a per-`<li value>` override exactly as browsers do (each subsequent item continues counting from an overridden value, in either direction). This is DOM-position counting, not a general CSS counter implementation (`counter-reset`/`counter-increment` are not implemented) - it happens to match the spec's built-in `list-item` counter behavior for the overwhelmingly common case (an `<ol>`/`<ul>` with direct `<li>` children) without needing one. A nested list's own `<li>` children are scoped to their own immediate parent list, so nesting numbers independently without any extra bookkeeping. Since this DOM walk is O(children) and re-run once per `<li>`, a list is O(n²) in child count - negligible for realistic list sizes, and avoided the alternative (threading a precomputed ordinal down through every `LayoutElement`/`LayoutNode` call signature, or an `AsyncLocal` ambient dictionary in the style of `s_layoutCapture`) for a simpler, self-contained implementation.
+
+Marker placement approximates rather than exactly replicates browser metrics, since AngleSharp.Css's UA stylesheet gives `<ul>`/`<ol>` their default 40px indent via `margin-left` rather than `padding-left` as real browsers do (verified empirically) - there is no distinct padding "gutter" region to place an outside marker inside. For `list-style-position: outside` (the default), the marker's right edge sits a fixed 6px gutter gap before the `<li>`'s own border-box edge, vertically aligned to the first line's baseline - this fixed gap is a visual approximation, not derived from any spec metric, and works within AngleSharp.Css's 40px default margin for any font size in normal ranges. For `list-style-position: inside`, the marker is placed at the `<li>`'s own content edge and the *first line only* is indented to make room for it (reusing the exact mechanism `text-indent` already uses - `textIndentConsumed`/`RenderTextStyle.TextIndent` - so wrapped continuation lines fall back to the unindented content edge, not a hanging indent under the marker; this matches how `text-indent` itself behaves and is a defensible, common interpretation of the property, verified visually rather than assumed). Boosting `TextIndent` locally for the "inside" case is safe against leaking into nested descendants' own indent because `ResolveTextStyle` never inherits `TextIndent` - every element re-derives its own from its own style map, defaulting to 0 rather than falling back to the parent's value. A `<li>` whose content starts with a nested block rather than inline text is a known, accepted simplification: the marker still paints at an approximated first-line baseline, but the "inside" indent boost has no effect on that nested block's own independent layout.
+
+`overflow`/`overflow-x`/`overflow-y` clip a box's content at the padding edge when the resolved value is `hidden`, `scroll`, or `auto` (`visible`, the default, does not clip). `scroll` and `auto` are treated identically to `hidden` - a rendered PNG has no scrollbars or interactivity, so anything a browser would let the user scroll to reveal is simply clipped away here, same as `hidden`. Two AngleSharp.Css gaps here - `overflow: clip` not being recognized at all (the whole declaration silently dropped), and the `overflow` shorthand not decomposing into `overflow-x`/`overflow-y` in computed style the way `border-color` and other shorthands do - were reported with reproducing tests in AngleSharp.Css's own suite (`AngleSharp.Css.Tests/Styling/OverflowComputedStyleTests.cs`) and are now **fixed upstream**, via a new general `PropertyFlags.PreserveShorthand` mechanism (the shorthand's own declaration is retained and its longhand values derived from it on demand, rather than the shorthand being expanded away at set-time). `ResolveOverflowAxis` no longer needs its old "prefer the longhand, fall back to reading the shorthand itself" logic - `overflow-x`/`overflow-y` can now always be read directly.
+
+That same upstream fix has one remaining, confirmed gap of its own, also reported with a reproducing test in the same file: when both the `overflow` shorthand and an explicit `overflow-x`/`overflow-y` longhand override are authored on the same element, the shorthand's own component always wins - regardless of declaration order - instead of the more specific, later-or-not longhand override. This renderer has no way to work around it locally (AngleSharp.Css's own computed `overflow-y` is simply wrong in that case, indistinguishable from a genuinely-intended `hidden`), so `overflow: <value>; overflow-y: <different-value>;` on the same element currently clips using the shorthand's value for both axes rather than honoring the explicit per-axis override - a known, currently-open upstream limitation, not a gap in this renderer's own parsing.
+
+Clipping is a single rectangle covering both axes together whenever *either* axis requests it - there is no independent per-axis clip (e.g. `overflow-x: hidden; overflow-y: visible` still clips vertically too), a deliberate simplification.
+
+Because `DisplayList` is a flat, backend-agnostic command sequence with no grouping/nesting structure, clipping an arbitrary range of already-emitted commands (a box's entire subtree) needed a new primitive rather than reusing anything from `border-radius`/`box-shadow`: `PushClipCommand`/`PopClipCommand` (`DisplayList.PushClip`/`PopClip`) bracket a scope the way `SKCanvas.Save()`/`ClipRect`-or-`ClipRoundRect`/`Restore()` naturally already work in `SkiaRenderBackend` - `PushClip` pushes and clips, `PopClip` simply restores. `LayoutElement`, `LayoutFlexContainer`, and `LayoutGridContainer` each compute whether their own element clips overflow, then reuse the exact same `boxPaintInsertIndex`/scratch-`DisplayList`-buffer splice mechanism `border-radius`/`box-shadow` background-ordering already established: `PushClip` is appended to the scratch buffer *after* that buffer's border/outline (so border and outline themselves are never clipped, matching spec) and the whole buffer is spliced in before the children's already-appended commands; `PopClip` is appended for real (not spliced) once children - and, for a replaced element, its image - have all been emitted, so the clip scope closes after everything that should be inside it. The clip shape reuses the box's own (unmodified) `RenderCornerRadii`, so `overflow: hidden` on a box with `border-radius` clips to that same rounded shape for free - the classic "rounded image container" pattern - via the identical `SKRoundRect` clipping `border-radius`/`box-shadow` already rely on.
+
+Vertical overflow clipping cannot be demonstrated with ordinary normal-flow content (text or a plain nested block) in this renderer: an auto-sized box's content height is computed as `Math.Max(specifiedHeight, autoContentHeight)` (see `LayoutElement`/`LayoutFlexContainer`/`LayoutGridContainer`), so a normal-flow child taller than a box's specified `height` simply grows that box to fit it rather than overflowing it - `height` behaves like a floor, not a cap, for in-flow content. Genuine overflow that clipping can act on comes from content whose size or position is *not* folded into that auto-height growth: an absolutely/fixed-positioned descendant (the common case - decorative or cropped imagery positioned outside its container's normal flow), or a normal-flow child that is simply *wider* than its container (block width is not grown to fit children the way height is, so horizontal overflow is real and gets clipped). The visual tests deliberately cover both.
+
+Page-level scrolling: `HtmlRenderer.RenderToPng`/`BuildDisplayList` (the public overloads) honor `document.documentElement`'s scroll position when an interactive `IDomHarness` already exists for the document's browsing context (created via `IBrowsingContext.GetDomHarness()` - typically through `IDomHarness.PaintToPng()` or by calling any of the CSSOM-view scroll APIs `ElementCssomViewExtensions.cs` already exposed for other purposes: `scrollTop`, `scrollTo`, `scrollIntoView`, ...). This was previously a real, confirmed gap, not a hypothetical one: `scrollTop`/`scrollTo` were fully implemented and tested for CSSOM-view purposes (`getBoundingClientRect`, `scrollHeight`, ...), but nothing in the rendering path ever consulted them, so scrolling an element had zero effect on `RenderToPng` output. `ResolveRootScrollOffsetY` (`HtmlRenderer.cs`) looks up a harness *without* creating one (`IBrowsingContext.TryGetDomHarness`, added alongside the existing `GetDomHarness`) - `GetDomHarness` auto-creates on first access but throws when no `IRenderDevice` service is registered, which the vast majority of `RenderToPng` callers (including nearly this entire test suite) never do, so unconditionally calling it would break plain, non-interactive rendering entirely. Finding no harness (the common case) resolves to a scroll offset of 0, leaving rendering exactly as before. The offset is applied as a single float shift to the top-level layout's starting Y position in `BuildDisplayList` - a scrolled page is laid out exactly like an unscrolled one, just starting from a (possibly negative) Y - and needs no explicit clip, since Skia's surface is a fixed `viewport.Width x viewport.Height` raster that simply never has pixels to write for content positioned outside those bounds.
+
+Critically, `HtmlRenderer.CaptureLayoutMetrics` (backing `getBoundingClientRect`/`GetScrollExtents`/hover-hit-testing) deliberately never applies this offset (it does not call `ResolveRootScrollOffsetY` at all) - `scrollHeight` and max-scroll clamping are scroll-*independent* intrinsic measurements, and letting them see a scrolled layout would create a self-referential bug where setting a scroll position depends on measurements that were themselves computed at the very scroll position being set. This is also why `document.documentElement`/`document.body` needed a second, narrower change: neither is ever laid out as a box of its own in this renderer (the top-level loop in `BuildDisplayList` only ever lays out *their children* directly onto the page canvas), so neither previously appeared in the layout-metrics map `GetScrollExtents` reads at all, making `document.documentElement.scrollHeight` (and therefore max-scroll) permanently 0 regardless of content height - confirmed by a failing test before the fix, not assumed. `BuildDisplayList` now synthesizes one `RecordLayoutMetrics` call for `document.Body`/`document.documentElement` sized to the *viewport's client area* (not the total content height - the existing `GetScrollExtents` descendant-walk already computes true scrollable height correctly from each individual child's own, normally-recorded metrics, exactly as it already does for any other scrollable element; recording the full content height here directly instead would make the synthesized element's own client and scroll heights identical, so nothing would ever look scrollable). This recording is a no-op outside of `CaptureLayoutMetrics`, since `RecordLayoutMetrics` itself only does anything while that capture's `AsyncLocal` is active. A related, pre-existing performance optimization (layout stops early once content runs past the visible viewport bottom) had to become conditional too: normal painting still wants that early exit, but metrics capture needs the *full* page laid out regardless of viewport height to measure a true scrollable extent, so `BuildDisplayList` takes a `measureFullExtent` parameter that widens its cutoff to `float.MaxValue` only for that call path.
+
+Real `:hover` matching and CSS `transition`: this was previously a hard, confirmed gap all the way down in AngleSharp itself, not something this renderer could work around on its own - `element.Matches(":hover")` and the cascade backing `ComputeCurrentStyle()` both hard-coded `:hover` to never match (AngleSharp is a headless DOM engine with no real pointer device), and neither `ComputeCurrentStyle`/`ComputeDeclarations` accepted any way to override pseudo-class state for a specific element. Reported and reproduced with failing tests in AngleSharp.Css's own suite (`AngleSharp.Css.Tests/Styling/HoverPseudoClass.cs`), per this project's "get real upstream gaps fixed there, do not reinvent them locally" policy (see the `transform`/`filter` sections above) - AngleSharp.Css was then fixed upstream with a general pseudo-class forcing API, `AngleSharp.Dom.ElementExtensions.SetPseudoClass`/`GetPseudoClass`/`RemovePseudoClass`/`ClearPseudoClasses` (analogous to what browser devtools expose via the Chrome DevTools Protocol's `CSS.forcePseudoState`), confirmed working end-to-end against `AngleSharp.Css.Tests/Styling/PseudoClassForcing.cs`'s own test suite before this renderer built anything on top of it.
+
+`InteractiveHtmlRendererState.UpdateForcedHoverChain` (called whenever `MousePosition` changes the hit-tested `HoveredElement`) forces `:hover` via that new API - but `SetPseudoClass` is deliberately per-element only and does not propagate to ancestors (confirmed by AngleSharp.Css's own `PseudoClassForcingTests.ForcingIsExplicitAndDoesNotPropagateToAncestors`), unlike a real pointer device, which makes every ancestor of the physically-hovered element match `:hover` too (`.card:hover .title` relies on this). So this method walks `IElement.ParentElement` itself and forces `:hover` on the *whole* ancestor chain, and - since there is no document-wide "clear every forced pseudo-class" API to lean on either - tracks exactly which elements it forced in `_forcedHoverChain` so it can precisely un-force the old chain when the hovered element changes, rather than leaving stale forced state behind on elements the pointer has moved away from.
+
+CSS `transition` (`transition`/`-property`/`-duration`/`-delay`/`-timing-function`) turns a hover-driven style change into an animated one instead of an instant jump, entirely inside `CssTransitionTracker` (owned by `InteractiveHtmlRendererState`, one per interactive document) - there is no real-time timer anywhere in this renderer; a caller pumps a virtual clock explicitly via `IDomHarness.AdvanceTime(TimeSpan)` before each repaint, the same way it already drives `MousePosition`/scroll offsets. `transition-property`/`-duration`/`-delay`/`-timing-function` are read from an element's own `ComputeCurrentStyle()` (the shorthand's own computed value is empty - the same shorthand-decomposition quirk already documented for `overflow` - but the four longhands decompose correctly even when only the shorthand was authored, confirmed empirically, so `ParseTransitionSpecs` reads the longhands directly and needs no `data-render-*` extraction workaround the way `transform` does); the duration/delay/timing-function lists are consumed cyclically against a longer `transition-property` list, per spec. `transition-timing-function` is parsed via AngleSharp.Css's own public `TimingFunctionParser`/`CssCubicBezierValue`/`CssStepsValue` (mirroring the `TransformParser` precedent for `transform`, not the from-scratch `filter` precedent) - AngleSharp.Css supplies the parsed control points/step count, but not an "evaluate the curve at t" function, so `CssTimingFunction.Evaluate` implements the standard bisection-search "UnitBezier" technique (and the standard `steps()` floor/ceil formula) itself, the same "spec formula, independently implemented" pattern already used for `filter`'s color matrices.
+
+Only a fixed, explicit whitelist of properties is interpolated - colors (`background-color`/`color`/`border-*-color`, channel-wise lerp) and numeric lengths/`opacity` (`width`/`height`/`font-size`/`margin-*`/`padding-*`/`border-*-width`/`top`/`left`/`right`/`bottom`, plain numeric lerp) - covering the overwhelming majority of real `:hover` transitions without needing a general CSS-value interpolation engine that understands every property's own grammar (including ones this renderer does not otherwise resolve component-wise, like `transform`/`filter` - a deliberate, documented scope cut, not an oversight). `transition-property: all` expands to this same whitelist, not literally every CSS property, for the same reason. Interpolated values are re-serialized as ordinary CSS text (`rgba(r, g, b, a)` / `Npx`) and injected back into the element's own style map by `HtmlRenderer.ApplyActiveTransitionAndAnimationOverrides` (called at the end of `CreateStyleMap`, for every element, gated on a single cheap `TryGetDomHarness` lookup that is a no-op for the overwhelming majority of documents never wired up for interactive use) - so every other property-parsing call site (`ParseLength`, `ParseColor`, ...) never has to know a transition or animation is even happening; it just sees whatever value the map would otherwise have held, silently substituted for the eased in-between one. This override loop walks the full interpolatable-property whitelist itself, not just whatever keys the map already happens to contain - a real bug caught while building `animation`: a property like `opacity` that is *only* ever declared inside a `@keyframes` block (never as a base/inherited declaration) never gets a map entry from the ordinary `AddIfPresent` calls above it, so overriding only existing keys silently dropped every such animation.
+
+`CssTransitionTracker.NotifyElementsMayHaveChanged` is what actually starts/updates/clears a transition run, called after `:hover` is forced/removed for the union of the old and new forced-hover chains (an element losing `:hover` needs its own "fade back to resting" transition considered too, not just the newly-hovered chain's "fade in"). A transition's "from" value has to be captured *before* the pseudo-class mutation happens - once `:hover` changes, there is no way to ask AngleSharp.Css what the value used to be - so `CaptureNaturalValuesBeforeChange` snapshots each candidate element's current natural value first (skipping any property that already has a live run, since that run's own current interpolated value, not the stale snapshot, is the correct "from" for a reversal); `UpdateForcedHoverChain` calls it before mutating pseudo-class state and `NotifyElementsMayHaveChanged` after. A transition that reverses mid-flight (the pointer moves away before the hover-in transition finished) restarts from whatever value is currently on screen with the *full* declared duration, not a remaining fraction of it - confirmed with a structural test that reverses a 1s linear transition at its 50% midpoint and checks it takes a full additional second to reach the resting value, not 500ms - matching the common, simple interpretation most CSS transition implementations use rather than attempting duration-proportional interruption smoothing.
+
+CSS `animation`/`@keyframes` reuses `transition`'s virtual-clock foundation (`IDomHarness.AdvanceTime`) and value-interpolation machinery, but has a fundamentally different trigger model, which is why it is a separate class, `CssAnimationTracker`, rather than a mode of `CssTransitionTracker`: a `transition` only ever starts because some *other* state change (`:hover`) makes a property's natural value differ from what it just was, whereas an `animation` needs no trigger at all - its own `@keyframes` rule already supplies both (all) endpoints directly, so it simply starts running the first moment this tracker observes the element declaring that `animation-name`, and keeps looping per `animation-iteration-count` for as long as that declaration stays in effect, entirely independent of `:hover`. That "first observed" moment is deliberately pinned to virtual-clock *zero*, not to whatever the clock happens to read at that instant - confirmed as a real, caught bug: initializing it to "whatever the clock currently is" made an animation appear to start later than it should whenever a caller called `AdvanceTime` one or more times before ever painting for the first time, since nothing observes the animation (and therefore records a start time) until the first `CreateStyleMap` call for that element actually runs. Pinning to zero always matches how an animation begins playing at document-ready in a real browser, regardless of when a caller first happens to look at it.
+
+`@keyframes` lookup goes through AngleSharp.Css's own public `ICssKeyframesRule`/`ICssKeyframeRule`/`.Name`/`.Rules`/`.Style`/`.KeyText` (found by walking `document.StyleSheets`), not a hand-rolled parser - unlike `filter`, AngleSharp.Css does have real (if `internal`-heavy) support for `@keyframes` parsing, it just does not expose an "evaluate at time t" API, mirroring `transition-timing-function`'s own `TimingFunctionParser`/`CssCubicBezierValue`/`CssStepsValue` situation. `CssAnimationTracker.FindKeyframeStops` reads every keyframe's own declared values for the same fixed, explicit property whitelist `transition` uses (`CssValueInterpolation.InterpolatableProperties`) and expands `KeyText` (`"0%"`, `"50%, 75%"`, `"from"`/`"to"`) into one or more sorted stop positions; `InterpolateAtKeyframes` brackets the current eased position between two stops and interpolates - or, if only one of the two bracketing keyframes declares the requested property, uses that one's value directly rather than searching further afield for the nearest declaring keyframe on either side (the spec's own rule), a deliberate simplification. `animation-name`/`-duration`/`-delay`/`-timing-function`/`-iteration-count`/`-direction`/`-fill-mode` support the same comma-list cycling `transition-property` does, letting several simultaneous animations run on one element (the last-listed animation wins for any property more than one of them targets, per spec). A confirmed AngleSharp.Css gap - `animation-direction`/`-fill-mode`/`-delay`/`-play-state` reporting the literal string `"initial"` (not each property's own actual initial value, and not empty) for any longhand the `animation` shorthand did not explicitly set, unlike `transition`'s equivalent longhands (which report empty) - was reported with a reproducing test in AngleSharp.Css's own suite (`AngleSharp.Css.Tests/Styling/AnimationComputedStyleTests.cs`) and is now **fixed upstream**: each of these longhands resolves to its real initial value (`normal`/`none`/`0s`/`running`) directly. `ResolveListValue` no longer maps a literal `"initial"` through a fallback - it only handles the "list shorter than `animation-name`" cycling case an absent property list represents, per spec.
+
+`animation-iteration-count`/`-direction`/`-fill-mode` are implemented as one small, unified piece of math rather than special-cased branches: `GetAnimatedValueForSpec` first computes an *effective* elapsed time - clamped to `0` (start of iteration 0) if still within the initial delay and `fill-mode` includes `backwards`, or to a hair before the final iteration's own end if the animation has already finished and `fill-mode` includes `forwards` - and only then runs the ordinary iteration-index/direction/easing computation against that effective elapsed time, exactly as it would mid-animation. This reuses a single code path for "mid-flight", "held at the start during a backwards-fill delay", and "frozen at the end under a forwards fill" instead of three separate ones, and gets the direction-aware end state right for free (e.g. `alternate` with an even total iteration count correctly freezes at the *start* keyframe, not the end one, because the shared math evaluates whichever iteration/direction the final instant actually falls in). `animation-play-state` (pausing) is not implemented - a deliberate, documented scope cut; every animation this renderer tracks is always running.
+
+Form controls (`<input>`, `<select>`, `<textarea>`, `<button>`): this was previously a complete gap, not a partial one - neither this renderer nor AngleSharp.Css's UA stylesheet gave any of these elements a border, padding, background, or natural size (verified empirically: every property AngleSharp.Css's own computed style reports for a plain, unstyled `<input>` comes back empty except `display: inline-block`), so a form control rendered as a fully invisible, zero-height box, and an `<input>`'s `value` attribute - not a DOM child, so no text node exists to lay out - was never painted at all. `HtmlRenderer.ApplyFormControlDefaults` fixes this the same way `list-style-type`/`list-style-position` already get their own initial values synthesized in this renderer's own code rather than relying on AngleSharp.Css to supply them, just for a much larger property set at once: right after an element's `RenderTextStyle` is resolved in `LayoutElement` (so its font-size is known), a `FormControlKind` is resolved from the tag name and, for `<input>`, the `type` attribute (`text`/`search`/`url`/`tel`/`email`/`password`/`number`/the date-time family/anything unrecognized all collapse to one `TextLike` kind, matching the HTML spec's own "unknown type falls back to text" rule), and each control kind's border/padding/background-color/width/height defaults are written directly into the element's style map - but *only* for whichever individual property the author has not already set. That per-property gap-filling is what makes the defaults "somewhat overridable, like in real browsers": an authored `border`, `background-color`, `padding`, or explicit `width`/`height` pre-empts the corresponding default exactly as it would for any other element, while everything the author leaves alone still gets a sensible UA look. One property needed special handling here: AngleSharp.Css always resolves a concrete `border-*-radius` computed value (`0px`) even for a completely unstyled element, unlike border-width/color/padding (which it reports as a genuinely empty string when unset) - a bare "already present, don't override" check would see that `0px` as author intent and never apply a radio input's circular default, so radius defaults specifically also treat a computed zero-length value as still-unset.
+
+A form control's own visible content - a typed value, a button's label, a select's chosen option, a checkbox/radio's checked-state fill, a color swatch - is painted directly by `HtmlRenderer.PaintFormControl` at the same point `PaintListItemMarker` paints a list marker (after `boxPaintInsertIndex` is captured but before children are laid out), since none of these controls have real children of their own to wait on: an `<input>` has none at all, and a `<select>`'s `<option>`s/a `<button>`'s label are deliberately excluded from `orderedChildren` in `LayoutElement` (alongside the existing `<svg>` exclusion) so a `<select>` shows only its one selected option rather than every option stacked underneath it the way a plain container would, and a `<button>`'s own shrink-to-fit width can be measured up front from its label rather than left to a general shrink-to-fit block-layout algorithm this renderer does not otherwise have. `<textarea>` is the deliberate exception to that exclusion: its real child text node is left to flow through the ordinary block child-layout path exactly like any other block element's text content, so it needed no bespoke content-painting at all once its box got the same default border/padding/background chrome as the other controls - and because an auto-sized box's height is already `Math.Max(specifiedHeight, autoContentHeight)` everywhere else in this renderer, the synthesized default height (two lines' worth) is only a floor: a `<textarea>` whose real content wraps past that still grows the box rather than clipping it.
+
+A `TextLike`/`Select`/`Button` control's label is vertically centered on its own visual ink, not on the taller CSS line-height box: `PaintFormControl` resolves the box's actual content height up front (`LayoutElement` calls `ResolveFlexibleContentDimension` for `height` right before invoking it, mirroring the same call the general auto-height computation makes later in the method - safe to do early here because none of these kinds' content can grow the box past its specified height) and places the baseline using `FormControlTextAscentRatio`/`FormControlTextDescentRatio` - fixed fractions of font-size (0.928/0.236) measured empirically off the bundled sans-serif font's own `SKPaint.FontMetrics` at a representative size - rather than the full `FontSize * LineHeightMultiplier` line-height box the rest of this renderer uses for stacked body text. That distinction matters: LayoutWrappedText's own "content-box top plus one full line height" baseline convention implicitly treats the *entire* line-height as ascent, leaving no room below the baseline for descenders or a line's natural leading - invisible when lines stack (the next line's own top absorbs the difference), but for a single line centered in a form control's padded box it left a visibly larger empty gap below the text's own ink than above it (the actual, confirmed bug this fixes; an earlier attempt at this fix centered on the line-height box instead, which was closer but still visibly off). This is a form-control-local approximation, not a change to the general per-font-metric-free `ITextMeasurer` contract (which - see its own remarks - is deliberately width-only, since layout and rasterization only ever need advance widths to stay in sync); it follows the same precedent `ParseVerticalAlign` already sets for `super`/`sub`/`middle`/`text-top`/`text-bottom`, which are likewise fixed font-size fractions rather than font-metric queries. A control's default *height* is unaffected by this and still comes from the full `FontSize * LineHeightMultiplier` (a real, separate bug: `ApplyFormControlDefaults` originally used a hardcoded `fontSize * 1.2f` instead, mismatched against the `1.35` default `LineHeightMultiplier` used everywhere else, which pushed the box itself a few pixels too short) - that default height still gives a single-line control some natural breathing room, and the ascent/descent-based baseline placement is what actually centers the ink inside whatever that height ends up being, default or author-overridden.
+
+A `<select>` shows its selected option's text left-aligned at the content edge, matching `TextLike` (not centered - only a `<button>`'s own label is), and its default width shrinks to fit that label plus room for the dropdown arrow, the same shrink-to-fit idea a `<button>` already uses, rather than reusing a text-like input's fixed 150px default - a real, confirmed bug in the original implementation, which both centered a `<select>`'s text (visually wrong - a native `<select>` never does) and gave it a full 150px-wide box regardless of how short its own option text was, leaving the arrow stranded far to the right of the label instead of immediately after it. A `<select>`'s default `background-color` is the same light gray a `<button>` gets (`#e8e8e8`), not the white a text-like input gets - matching how a real browser's own native `<select>` chrome reads as button-like rather than as a text box, and a deliberate visual correction from an earlier version of this feature that gave it a white background by mistake. `FormControlSelectArrowGlyph` (the dropdown indicator) is a single shared constant read by both `ApplyFormControlDefaults`' width measurement and `PaintFormControl`'s own paint, so the two can never disagree about how much horizontal room it needs; its value is "⌄" (U+2304, DOWNWARDS ARROWHEAD) rather than a plain ASCII "v" (this constant's original value) - `DisplayList` has no generic polygon-fill primitive, so any dropdown indicator has to come from a real font glyph, and a bare "v" reads as a literal letter rather than an icon. U+2304 was chosen by actually rendering several candidate glyphs at a large size and inspecting the resulting pixels (not assumed from a coverage table) to confirm the bundled DejaVu Sans has a real, thin-chevron glyph for it - unlike, for example, U+23D7, which the bundled font has no glyph for at all and silently renders as a hollow "tofu" box instead of failing loudly. The arrow's own baseline gets a further, separate correction on top of the ordinary text baseline every other form-control label already centers on (via `FormControlTextAscentRatio`/`FormControlTextDescentRatio`, themselves built from measuring ordinary latin text like "Second"): "⌄" is a short symbol glyph whose ink sits much closer to the baseline than a run of letters does - confirmed by measuring both with `SKPaint.MeasureText`'s tight bounding box at font-size 16, where "⌄" spans roughly 6px above the baseline to 1px below (ink center ~2.5px above baseline) while "Second" spans roughly 14px above to 2px below (ink center ~6px above baseline). Painting both at the identical baseline - correct for the label itself - left the arrow's own, much shorter ink visibly low in the box, a real bug caught from a direct visual report (not a hypothetical one, and not visible from reading the code - only from looking at the rendered pixels). `FormControlSelectArrowVerticalOffsetRatio` (`-0.19`, the measured ink-center difference as a fraction of font-size) shifts only the arrow's own baseline up by that amount, leaving the label's baseline - and therefore every other form control's identical centering logic - untouched.
+
+A checkbox and radio share one code path (a small font-size-relative square, `Math.Max(10, fontSize * 0.9)`), diverging only in that a radio also gets a default `border-radius: 50%` (expanded to the four longhand `border-*-radius` properties, since `ResolveBoxStyle` never reads the shorthand, matching how AngleSharp.Css's own computed style populates the style map too) and an already-resolved-to-pixels default (half the box's own default size) rather than a raw `"50%"` string - `ParseCornerRadius`'s own length parsing has no percentage handling at all, unlike the general `ParseLength` used for width/padding/etc., because AngleSharp.Css itself always pre-resolves a percentage `border-radius` to pixels before this renderer ever sees it, so an injected raw percentage would silently parse to a corner radius of 0 rather than a circle - a real, confirmed bug caught by a failing structural test, not assumed. Neither control shows an authored `value` as text (matching real checkboxes/radios); a `checked` attribute instead paints a small inset accent-colored fill (a plain filled square for a checkbox, a filled circle - reusing the same `RenderCornerRadii`/`FillRect` machinery `border-radius` already established - for a radio) using a fixed constant accent color, since this renderer does not parse the CSS `accent-color` property. The fill is sized off the box's own smaller dimension and inset independently on each axis, so it stays centered on both axes even if width and height (equal by default) end up overridden asymmetrically - not just inset a fixed fraction of the width and assumed square, which was the original, unfixed behavior. `input[type=color]`'s swatch is painted as its own fill from the parsed `value` attribute, independent of the box's own `background-color` (defaulted to white, acting as the swatch's "frame") - deliberately not overridable through CSS `background-color`, matching how a real browser's native color swatch ignores it too, while the frame around it (border, padding, size) still goes through the ordinarily-overridable box model. The swatch fills the control's entire content box rather than a fixed line-height-tall rect within it, which was a second, related symptom of the same default-height mismatch described above: at the (fixed) default height it made no visible difference, but the fixed-height version would have sat un-centered - hugging the top with excess space below - for any explicitly taller `height`. `input[type=hidden]` never lays out or paints at all - handled by an early return in `LayoutElement` alongside the existing `<script>`/`<style>` skip, since AngleSharp.Css does not give it `display: none` the way a real browser's UA stylesheet does (every `<input>` type computes to plain `inline-block` in the AngleSharp.Css version this repo builds against). A checkbox/radio also gets a small default margin (`3px 3px 3px 4px`, matching Chromium's own UA stylesheet value) that no other form control kind gets - `ApplyFormControlDefaults` is the only place that injects it, since AngleSharp.Css's UA stylesheet does not set any margin on these elements at all (verified empirically: `GetPropertyValue("margin-*")` comes back empty, unlike `display`, which does correctly compute to `inline-block`). Without it, two adjacent checkboxes/radios written with no whitespace between their tags in markup (the common case, and what a real form typically does) rendered flush against each other with zero gap. Not implemented: `range`, `file`, `image`, and `datetime-local`'s/`date`'s native picker UI (a `date`/`month`/`week`/`time` input renders as a plain text box showing its raw `value` string) - a deliberate, documented scope cut rather than an oversight, matching the general project convention of implementing what is visually representable through the existing display-list primitives.
+
+A focused `TextLike` `<input>` (`<textarea>` is a deliberate scope cut - see below) shows an animated text-insertion caret, `PaintFormControlCaret`, called right after the label/no-label branch inside `PaintFormControl`'s shared `TextLike`/`Select`/`Button` case. Focus itself is read directly from the DOM (`IElement.IsFocused`) rather than tracked separately by this renderer - the same "delegate to real state, don't reinvent it locally" precedent `:hover` already set (see its own section above) - so `element.DoFocus()` or AngleSharp.Css's `SetPseudoClass("focus")` (which itself delegates to `DoFocus()`) are both already enough to make a caret appear, with no extra wiring needed here. This uncovered a real, confirmed gap one level further down than AngleSharp.Css, in AngleSharp core itself: `HtmlElement.DoFocus()`/`DoBlur()`'s base implementation was a no-op for every element except `HtmlAnchorElement` (whose own override only sets focus when an `href` is present) - `HtmlInputElement`/`HtmlSelectElement`/`HtmlTextAreaElement`/`HtmlButtonElement` never overrode it, so none of them could ever actually become the document's `ActiveElement`, no matter how a caller tried. Reported and fixed upstream directly in AngleSharp.Core (not AngleSharp.Css, which has no focus logic of its own beyond delegating to `DoFocus()`) with a reproducing test in that project's own suite (`AngleSharp.Core.Tests/Html/FormControlFocus.cs`): `HtmlTextFormControlElement` (the shared base of `HtmlInputElement`/`HtmlTextAreaElement`) and `HtmlSelectElement`/`HtmlButtonElement` each now override `DoFocus`/`DoBlur` to set `IsFocused` directly (gated on `IsDisabled`, mirroring how a disabled control can't be focused in a real browser either), and `HtmlInputElement` layers one further exclusion on top for `type=hidden` (never focusable, matching how a real browser treats an element it never even renders).
+
+The caret's own position is always the end of the control's current value (`contentX + labelWidth`, reusing the exact `label`/`labelWidth`/`baselineY` computation `PaintFormControl` already derives for the label itself, computed unconditionally now rather than only when the label is non-empty, since a focused *empty* input still needs a caret) - this renderer has no selection/cursor-offset model for a form control's value (nor does AngleSharp itself), so "always at the end" is the only position that can be derived, and matches the common "user is appending" case a static render would most want to depict. Its vertical extent reuses `FormControlTextAscentRatio`/`FormControlTextDescentRatio`, the same font-size-fraction ascent/descent approximation the label's own baseline placement already relies on, so the caret's height is always consistent with the text it sits next to rather than a separately-tuned constant. The fade is a continuous cosine "breathe" (`(cos(2π·phase) + 1) / 2`, `FormControlCaretBlinkPeriodMs` = 1000ms per full cycle) rather than a hard on/off blink, matching the user's own framing of "fully there, somewhat faded out, or not visible at all" - sampling the virtual clock at any instant produces a plausible in-between alpha, not just a flat on/off pixel value, verified with a structural test that samples the clock at 0/500/750/1000ms and checks fully-opaque/fully-transparent/partway/fully-opaque-again. It is driven by a new `IDomHarness.CurrentTime` (`TimeSpan`, backed by `InteractiveHtmlRendererState`'s existing `_clockMs` - the same virtual clock `AdvanceTime`/`transition`/`animation` already share) rather than any new timer of its own. Without a registered harness (the common case for a plain, non-interactive `RenderToPng`/`BuildDisplayList` call) there is no clock to fade against, so the caret paints fully opaque instead of frozen at some arbitrary phase - the same "no harness means no animation" fallback `transition`/`animation` already use. `<textarea>` does not get a caret: unlike a single-line `TextLike` input's fixed baseline, its caret position would depend on which wrapped line its real child text node (flowed through the ordinary block child-layout path, not painted by `PaintFormControl` at all - see the form-controls introduction above) currently ends on, which this renderer does not track - a deliberate, documented scope cut, not an oversight.
+
+`display: inline-block` siblings now flow onto the same line, like a real browser, instead of always starting a new line - this was a real, confirmed, general layout-engine bug, not a form-control-specific one (verified independently with two plain `<span style="display:inline-block">` elements, no form controls involved). `LayoutElement`'s own child-layout loop only ever merged plain-`inline` content and `<br>` onto a shared line (`hasInlineRun`'s check at the top of the method, and the `childIsBlock` classification inside the merge loop itself both explicitly excluded `inline-block`) - an inline-block child, even when its parent's *other* children were plain inline text, was always routed through the block-stacking path and got its own line; a parent whose children were *only* inline-block elements (checkbox/radio pairs being the common, motivating case) never even entered the line-merging path at all, since `hasInlineRun` requires at least one non-inline-block trigger. Flowing an inline-block child inline needs its final box size known *before* laying it out (to decide whether it fits on the current line, and exactly where to place it) - something `LayoutNode`/`LayoutElement` have no "measure only" mode for, since they only ever discover a box's size as a side effect of actually laying out (and painting) it. `TryMeasureInlineBlockBoxSize` fills that gap for the one case that can be predicted cheaply without a full trial layout: both `width` and `height` resolving to an explicit, non-auto value - guaranteed for every form control (`ApplyFormControlDefaults` always injects concrete pixel defaults for both) and for any inline-block given explicit `width`/`height` in CSS. It reuses `ResolveBoxStyle` for border/padding/margin (rather than re-deriving that math independently) so the prediction can never drift out of sync with what real layout actually produces. An inline-block whose size genuinely depends on its own content (shrink-to-fit width, or auto height driven by wrapped children) cannot be predicted this cheaply, and is a deliberate, documented scope cut: it keeps this renderer's older, pre-existing behavior (its own line, laid out exactly like `display: block`) rather than attempting genuine two-pass shrink-to-fit inline-block layout - not a regression, since that was already true for every inline-block element before shared-line flow existed for any of them (`BuildDisplayList_AutoSizedInlineBlockSiblingsStillEachGetTheirOwnLine` pins this down explicitly). A flowable inline-block that does not fit in what is left of the current line wraps to a new one first (unless it is the very first thing being placed on that line at all, so one item wider than its own container still gets placed rather than looping forever); a fitting item's own margin-left is applied the same way `LayoutNode` already applies any block-level child's margin internally (`flowBorderBoxX = flowContainingX + marginLeft`), so the inline-flow code only has to account for margin-right (and top/bottom, for the shared line's own height) on top of that. This measurement path deliberately resolves the boundary it wraps against using *this element's own* resolved content box (`contentX`/`contentWidth`) rather than the wider box this element itself was given to size *itself* within its parent (`flowContainingX`/`flowContainingWidth`) - using the latter was a real bug caught while building this feature (`BuildDisplayList_InlineBlockSiblingsWrapToANewLineWhenTheyDoNotFit`): a narrower-than-parent container (e.g. `width: 50px`) never wrapped its inline-block children at all, since the wrap boundary was being measured against the *parent's* much wider available width instead of the container's own. Note this fix is scoped to the inline-block code path specifically - the pre-existing plain-text wrapping calls elsewhere in the same merge loop (`LayoutInlineTextRun`, for ordinary text content) were separately observed, during this investigation, to have the *same* `flowContainingX`/`flowContainingWidth`-vs-`contentX`/`contentWidth` mismatch (plain text mixed with a plain-inline sibling element in a narrower-than-parent container does not wrap at that container's own width either) - a distinct, pre-existing bug, confirmed but deliberately left unfixed here to keep this change's blast radius contained to what was actually needed; fixing it is a reasonable follow-up but was out of scope for this pass.
+
+`transform`/`transform-origin` delegate their actual CSS semantics to AngleSharp.Css itself rather than reimplementing them - a deliberate architectural choice, not just an implementation detail: this renderer should not carry its own copy of CSS transform-function parsing, length/percentage/angle resolution, or trigonometry when AngleSharp.Css already provides exactly that (`AngleSharp.Css.Parser.TransformParser`/`AngleSharp.Css.Values.ICssTransformFunctionValue.ComputeMatrix`/`TransformMatrix`). `HtmlRenderer.ParseCssTransform` loops `TransformParser.ParseTransform(source)` across the space-separated function list in a `transform` value - it parses one function per call and advances the `StringSource` itself, including skipping the whitespace between calls (confirmed empirically, not assumed) and returning `null` cleanly once exhausted, which is what ends the loop - and `TryConvertToRenderTransform` converts each function's own `TransformMatrix` into this renderer's backend-agnostic `RenderTransform2D` (`Rendering/RenderTransform2D.cs` - an `a, b, c, d, e, f` affine matrix in CSS's own `matrix()` order). Painted via a `PushTransformCommand`/`PopTransformCommand` pair (`DisplayList.PushTransform`/`PopTransform`, mirroring `PushClip`/`PopClip`'s existing save/restore-scope pattern) that `SkiaRenderBackend` implements as `canvas.Save()`/`canvas.Concat()`/`canvas.Restore()`.
+
+`RenderTransform2D` itself keeps only `Translate` and `Multiply` - generic affine-matrix operations needed regardless of where a matrix's values came from (composing multiple already-resolved function matrices together, and applying `transform-origin`'s translate/apply/translate-back), not CSS-transform-specific math. It deliberately has no `Rotate`/`Scale`/`Skew` factory methods of its own; those would duplicate exactly what `ComputeMatrix` already computes. Multiple functions in one `transform` list compose left to right exactly as the CSS Transforms spec defines - "post-multiply by each function's matrix, in the order listed" (`M = M * F1; M = M * F2; ...`) - which the `Multiply(outer, inner)` loop implements directly, verified with a structural test asserting `translate(100px, 0) scale(2)` and `scale(2) translate(100px, 0)` produce different (and spec-correct) results, not just "some" composition.
+
+Converting AngleSharp.Css's own `TransformMatrix` into `RenderTransform2D` is not the naive field-for-field mapping a reader might expect: `TransformMatrix` uses a row-vector convention (`x' = M11*x + M12*y + Tx`, `y' = M21*x + M22*y + Ty`), which is *not* CSS's own column-vector `matrix(a,b,c,d,e,f)` convention (`x' = a*x + c*y + e`, `y' = b*x + d*y + f`) - `TryConvertToRenderTransform` maps `M11→A`, `M21→B`, `M12→C`, `M22→D` (`M12`/`M21` transposed relative to a same-position mapping), verified empirically against a known `skew(10deg, 5deg)` result rather than assumed from the property names.
+
+`transform` is resolved eagerly at layout time (unlike a gradient's or background-image's center/size, which stay unresolved fractions until paint time because they depend on the image's own natural size) - a transform's own inputs, percentage `translate()` values and the default `transform-origin`, only ever need the element's own already-known border-box dimensions (passed to AngleSharp.Css via a small `IRenderDimensions` implementation, `HtmlRenderer.CssTransformRenderDimensions`). `transform-origin`'s default value, the box's own center ("50% 50%"), is resolved via `ParsePositionComponent` - reusing `background-position`'s own identical keyword/percentage/length tokenizing grammar (`left`/`center`/`right`/`top`/`bottom`, a percentage, or a length) rather than re-deriving it, but resolving the resulting `Percentage`/`OffsetPixels` breakdown with `transform-origin`'s own formula (a position *within* the box) instead of `background-position`'s (a position within the *remaining* space after subtracting the image's own size) - the two properties share a grammar but not a resolution formula. `transform-origin` itself flows through AngleSharp.Css's own computed style normally (unaffected by the extraction workaround described below), since it is not a transform *function* and does not touch the buggy code paths. Critically, the origin's pivot point has to be expressed in the same *absolute* canvas coordinates every other paint command already uses (`borderBoxX`/`Y` plus the relative origin offset), not just the box-relative offset alone - a real bug caught while building this feature: a box-relative-only pivot only ever looked correct for an element that happened to sit at page position (0, 0), where relative and absolute coincide, and rotated/scaled around the wrong point for anything positioned elsewhere on the page.
+
+A transform wraps the *whole* element it is set on - background, `box-shadow`, border, outline, and every descendant all paint under it, unlike `overflow` clipping, which explicitly excludes the border/outline it is layered under - so `PushTransform` has to be the very first command in `LayoutElement`'s existing `boxPaintBuffer`/`boxPaintInsertIndex` splice mechanism (the same mechanism `border-radius`/`box-shadow`/`overflow` clipping already established for painting a box's own chrome behind its children once the box's final size is known), even before the background fill, and `PopTransform` is appended for real only after children (and, for a replaced element, its image) have all been emitted - the outermost scope, since it was also the first pushed. Nested transforms on a transformed element's own transformed descendants compose automatically for free, with no extra bookkeeping needed, purely because `SKCanvas.Save()`/`Concat()`/`Restore()` already nest as a stack.
+
+Wiring is currently scoped to `LayoutElement` only - `LayoutFlexContainer` and `LayoutGridContainer` have their own, separate copies of the same box-paint splice mechanism (see the `overflow`/`box-shadow` paragraphs above) and do not yet resolve or push a `transform` for a flex/grid container itself, a deliberate, documented scope cut rather than an oversight; a `transform` on an ordinary flex/grid *item* (as opposed to the container) still works normally, since items are laid out through the ordinary `LayoutElement` path.
+
+**This renderer never guards against or special-cases individual AngleSharp.Css bugs locally.** `ConvertToRenderTransform` always trusts whatever `ICssTransformFunctionValue.ComputeMatrix` returns, unconditionally - a `TransformMatrix` is a genuinely general matrix regardless of which CSS function produced it, and for a function whose own effect is entirely 2D the third dimension simply stays at its own identity value, so there is nothing to special-case for a "2D case": the same six components (`M11`/`M12`/`M21`/`M22`/`Tx`/`Ty`) are read the same way for every function, working or not. A bug in what AngleSharp.Css itself computes is AngleSharp.Css's own bug to fix and test for - reported and reproduced with a failing test in *that* project's own suite (`AngleSharp.Css.Tests/Values/TransformFunctions.cs`), not worked around here. This project previously carried temporary `NaN`/`ArgumentException` guards for confirmed AngleSharp.Css bugs; those guards were removed once the policy above was adopted, before all of the underlying bugs were fixed upstream - the resulting wrong output in the interim was intentional, not an oversight. All three transform-function bugs found while building this feature (see below) are now fixed upstream.
+
+3D transform functions (`rotate3d`, `perspective`, `matrix3d`, ...) are a separate, permanent scope cut, unrelated to any of the bugs above - `TransformParser` is AngleSharp.Css's own general-purpose parser and does recognize them (this renderer does not filter them out before parsing - `translateZ` happens to work today since its 2D projection is trivially identity), but this renderer's flat, backend-agnostic display list has no camera/projection concept to give a function that genuinely depends on a Z axis any real meaning.
+
+This renderer builds against `AngleSharp.Css` 1.1.1+ (`AngleSharpCssVersion` in `AngleSharp.Renderer.csproj`), which carries every upstream fix this project's own development surfaced and reported: the three `transform`-function bugs, general pseudo-class forcing (`:hover` etc.), `animation-*`/`list-style-type`/`list-style-position` initial-value resolution, `overflow` shorthand decomposition (including the shorthand/explicit-longhand-override ordering fix) and `overflow: clip` recognition, per-axis percentage `border-radius` resolution, and full structured `filter` parsing (`FilterParser`/`ICssFilterFunctionValue`). Earlier in this project's history the `.csproj` temporarily pointed at a sibling `../../../AngleSharp.Css` checkout via `ProjectReference` to pick these fixes up ahead of release - that workaround is gone now that they have shipped in a published package; if a similar situation arises again, the same "reproduce in AngleSharp.Css's own test suite, fix upstream, verify locally via a temporary `ProjectReference`, then revert to `PackageReference` once released" workflow is the one to repeat.
+
+This renderer builds against `AngleSharp` 1.8.1+ (`AngleSharpVersion` in `AngleSharp.Renderer.csproj`), which carries the focus-support fixes the caret-animation feature above surfaced and reported: `HtmlInputElement`/`HtmlSelectElement`/`HtmlTextAreaElement`/`HtmlButtonElement` now really implement `DoFocus()`/`DoBlur()` (previously a no-op inherited from `HtmlElement` for every element except `HtmlAnchorElement`), and `Document.SetFocus` now transitions cleanly between elements - firing `blur` on whichever element previously held focus (and `focus` on the new one) instead of silently dropping the outgoing element with no event and nothing analogous to `DoBlur()` ever running on it, a real, confirmed gap caught by moving focus between two plain `<input>`s and observing zero `blur` events on the first. Both were reported and fixed directly in AngleSharp.Core's own suite (`AngleSharp.Core.Tests/Html/FormControlFocus.cs`) before this renderer built the caret on top of them. Earlier in this project's history `AngleSharp.Renderer.csproj` (and, cascading one level further, `AngleSharp.Css.csproj`'s own `AngleSharp` reference) temporarily pointed at a sibling `../../../AngleSharp.Core` checkout via `ProjectReference` to pick these fixes up ahead of release - that workaround is gone now that they have shipped in a published package; if a similar situation arises again, the same "reproduce in the upstream project's own test suite, fix there, verify locally via a temporary `ProjectReference`, then revert to `PackageReference` once released" workflow (already used twice for AngleSharp.Css, and now once for AngleSharp.Core itself) is the one to repeat.
+
+`filter` (`blur`, `brightness`, `contrast`, `grayscale`, `hue-rotate`, `invert`, `opacity`, `saturate`, `sepia`, `drop-shadow`) now delegates its outer function-list parsing to AngleSharp.Css, the same way `transform` does - a confirmed AngleSharp.Css gap (no structured `filter` support at all: computed style always reported an empty string, and reflecting over its assembly found no `FilterParser`/`ICssFilterFunctionValue` equivalent) was reported with a reproducing test in AngleSharp.Css's own suite (`AngleSharp.Css.Tests/Styling/FilterPropertyTests.cs`) and is now **fixed upstream**: `FilterParser.ParseFilter`/`ICssFilterFunctionValue`/`CssFilterValue` (mirroring `TransformParser`/`ICssTransformFunctionValue` and `GradientParser`/`ICssGradientFunctionValue` exactly) handle function-name/parenthesis extraction - including correctly balanced nested parens - and computed style now round-trips the authored `filter` text verbatim instead of reporting empty, so `CreateStyleMap` reads it through the ordinary `AddIfPresent(map, "filter", style.GetPropertyValue("filter"))` pattern every other simple property already uses, with no inline-style-attribute fallback needed. `HtmlRenderer.ParseCssFilter` runs `FilterParser.ParseFilter` directly on that value and walks the returned `CssFilterValue.Functions`; `ConvertToRenderFilterFunction` still interprets what each function *means* locally (its own argument grammar, and the CSS Filter Effects spec's per-function color-matrix/blur-radius semantics) - AngleSharp.Css's own `Arguments` only ever gives a function's raw, still-unparsed argument text as one opaque entry (not decomposed into individual typed sub-values), so this renderer's own `ParseFilterAmount`/`ParseDropShadowFilterFunction`/length/angle/color parsing is still needed for that, the same division of labor `transform`'s `ConvertToRenderTransform` already established for `ComputeMatrix` (AngleSharp.Css computes the pure-CSS math; this renderer converts that into its own backend-agnostic representation). `url(#filterId)` (an SVG filter reference) and any other unrecognized function are silently skipped rather than aborting the whole chain, mirroring how an unsupported SVG `<filter>` primitive passes its input through unchanged in `SvgFilterBuilder` instead of breaking that chain.
+
+Each function becomes a `RenderFilterFunction` (`Rendering/RenderFilter.cs`) - backend-agnostic like `RenderTransform2D`, with a single `Amount` interpreted per `Kind` (a blur radius in pixels for `blur`/`drop-shadow`, degrees for `hue-rotate`, and an already-normalized `0..1`-or-higher multiplier for everything else - a percentage argument like `grayscale(90%)` is converted to `0.9` at parse time so every downstream consumer only ever handles one representation) plus `OffsetX`/`OffsetY`/`Color`, meaningful only for `drop-shadow`. `drop-shadow(<offset-x> <offset-y> <blur-radius>? <color>?)` accepts its optional color argument either first or last per spec - `ParseDropShadowFilterFunction` classifies each whitespace-separated token by its own shape (a leading digit/sign/decimal point is a length, anything else is a color) rather than assuming a fixed position. A `filter`'s functions are painted via a `PushFilterCommand`/`PopFilterCommand` pair (`DisplayList.PushFilter`/`PopFilter`, mirroring `PushTransform`/`PopTransform`'s own scope-bracketing pattern) that `SkiaRenderBackend` implements as `canvas.SaveLayer(paint)`/`canvas.Restore()` rather than `transform`'s plain `Save()`/`Concat()`/`Restore()` - a raster filter effect needs an offscreen layer to composite back, unlike a coordinate-space change. `SkiaRenderBackend.BuildFilterChain` composes each function into one `SKImageFilter` graph (`SKImageFilter.CreateCompose`-style chaining, one filter wrapping the next as its own input): `blur`/`drop-shadow` map to `SKImageFilter.CreateBlur`/`CreateDropShadow` (sigma = radius / 2, the same blur-sigma approximation `box-shadow`/`text-shadow` already use); every other function becomes an `SKImageFilter.CreateColorFilter(SKColorFilter.CreateColorMatrix(...))` using the CSS Filter Effects spec's own per-function 4x5 color matrix formulas (`grayscale`/`sepia` interpolate between the identity matrix and their own full-effect matrix by `Amount`; `saturate`/`hue-rotate` use the same standard matrices SVG's `feColorMatrix type="saturate"/"hueRotate"` are defined by; `invert`/`brightness`/`contrast`/`opacity` are direct closed-form matrices) - these matrices are a deliberately independent implementation from `SvgFilterBuilder`'s own `feColorMatrix` support (see the `SvgFilterBuilder.BuildColorMatrix`'s `saturate`/`luminancetoalpha` cases), mirroring how SVG gradients do not share code with the CSS gradient path elsewhere in this renderer, even though both derive from the same underlying spec formulas.
+
+`filter` wraps the whole element - background, border, outline, and every descendant all render under it - the same "wraps everything" scope `transform` already has, using the identical `boxPaintBuffer`/`boxPaintInsertIndex` splice mechanism. When both are present on the same element, `PushFilter` is nested *inside* `PushTransform` (and `PopFilter` closes before `PopTransform`) - a deliberate choice, not an arbitrary one: the filter's own raster is built from content already drawn in the element's transformed local space (post-`Concat`), so a scaled element's blur radius scales along with it rather than staying a fixed screen-space size. Like `transform`, wiring is currently scoped to `LayoutElement` only - `LayoutFlexContainer`/`LayoutGridContainer` do not yet resolve or push a `filter` for a flex/grid container itself, a deliberate, documented scope cut; a `filter` on an ordinary flex/grid item still works normally.
+
+CSS `opacity` is, unlike `filter`, an ordinary numeric property with no function-value syntax, so AngleSharp.Css computes it normally via its own typed `GetOpacity()` accessor (`StyleDeclarationExtensions`) - `ParseCssOpacity` just clamps the parsed number to `0..1` per spec (the CSS initial value is `1`, fully opaque) and has nothing to work around, unlike `filter`'s total absence of upstream support. Painted via a `PushOpacityCommand`/`PopOpacityCommand` pair, implemented as `canvas.SaveLayer(new SKPaint { Color = SKColor(255,255,255,alpha) })`/`canvas.Restore()` - a semi-transparent group composite, not a per-command alpha multiply, which matters because it is what makes overlapping children within the same opacity group blend together as one unit rather than separately becoming partly see-through into each other at their shared edges. `opacity: 1` (the common case - unset or explicitly opaque) pushes nothing at all, exactly like `transform: none`/an empty `filter`, so the ordinary paint path is untouched when opacity is not in play. Nesting order among the three whole-element paint scopes is `transform` (outermost) → `opacity` → `filter` (innermost): `opacity` sits inside `transform` because compositing does not care about coordinate space, only about where `transform` already positioned the content, and outside `filter` because a browser processes filter effects on the element's own unblended content first and only then composites the (already-filtered) result onto the backdrop at the element's opacity - `BuildDisplayList_TransformOpacityAndFilterNestInOpacityBetweenTransformAndFilter` pins this exact ordering down structurally. Like `transform`/`filter`, wiring is scoped to `LayoutElement` only for now (not `LayoutFlexContainer`/`LayoutGridContainer`), the same deliberate, documented scope cut.
+
+CSS `white-space` (`normal`/`nowrap`/`pre`/`pre-wrap`/`pre-line`/`break-spaces`) was previously not read at all - every text-content extraction path in this renderer called one unconditional `NormalizeWhitespace(string)` that always collapsed any run of whitespace (including newlines) to a single space and trimmed the ends, regardless of what the element's own CSS actually specified; `<pre>` content, in particular, rendered as if it were ordinary flowed text, its indentation and line breaks silently discarded. `white-space` is read into the style map the same simple way `color`/`line-height` are (`AddIfPresent(map, "white-space", style.GetPropertyValue("white-space"))`) and resolved into a new `WhiteSpaceMode` enum carried on `RenderTextStyle` (`ParseWhiteSpace`, mirroring `ParseTextAlign`'s own pattern) - confirmed empirically that AngleSharp.Css already computes and inherits it correctly (an unset value reports empty, not the CSS initial `normal`, the same "never serialized when nothing in the cascade set it" behavior already documented for `list-style-type`, so `ParseWhiteSpace` falls back to the *inherited* value, not a hardcoded default - not another upstream gap to report).
+
+`NormalizeWhitespace(string, WhiteSpaceMode)` implements the spec's own collapsing/newline-preservation table directly: `normal`/`nowrap` collapse every run of whitespace (spaces, tabs, and newlines alike) to a single space and trim the ends - the old, unconditional behavior, now reached only when that is actually the resolved mode; `pre`/`pre-wrap`/`break-spaces` preserve every character verbatim (only normalizing `\r\n`/`\r` line endings to a plain `\n` up front, the same source-text preprocessing HTML always applies regardless of `white-space` - done once, before any mode branch, specifically to avoid a `\r\n` pair being double-counted as two separate forced breaks by `pre-line`'s own per-character newline handling if it were left for that loop to handle); `pre-line` collapses runs of horizontal whitespace to a single space but preserves each `\n` as its own forced break. The old single-argument `NormalizeWhitespace(string)` still exists as a thin `WhiteSpaceMode.Normal` wrapper, kept for every call site that is not itself part of text *layout* - table cell text, form control labels, and the two "does this text node count as non-empty content" child-ordering checks - a deliberate scope cut: none of those sites feed a wrapping-aware layout path today, so a real `white-space` value on them would have nothing to change even if read.
+
+Collapsing/preserving whitespace is only half the feature; the other half is what a preserved `\n` and a suppressed wrap actually *do* to layout, and the two text-layout functions handle it differently because of how differently they are already structured. `LayoutWrappedText` (a block element's own direct text content, or a lone all-inline leaf element with only text - the common case `<pre>`/`<p style="white-space:pre-wrap">`/etc. actually appear in) gained `WrapTextRespectingWhiteSpace`: it splits the already-normalized text on `\n` into paragraphs first (a no-op split for `normal`/`nowrap`, which never have a literal `\n` surviving `NormalizeWhitespace` in the first place), then either treats each paragraph as one unwrapped line (`nowrap`/`pre`) or still word-wraps it against `maxWidth` via the existing `WrapText` (every other mode) - an empty paragraph (a blank line from consecutive forced breaks) still becomes its own empty line entry rather than being dropped, so blank lines in preserved text still occupy the vertical space a browser would give them, while `LayoutWrappedText`'s own per-line loop skips measuring/painting a `DrawText` command for a line with nothing in it (cursorY still advances by a full line-height first, so the blank row's height is still reserved). `LayoutInlineTextRun` (mixed inline content sharing a line with sibling text/elements - a `<span>` interleaved with plain text and other inline elements) only gets the narrower half of this: `nowrap`/`pre` still suppress its own width-driven wrap-to-new-line check (`IsNoWrapWhiteSpace`, the same predicate `LayoutWrappedText` uses), but multi-space preservation and explicit forced breaks are a deliberate, documented scope cut here specifically - this function's word-by-word model (`Split(' ', RemoveEmptyEntries)`, one `DrawText` command per word, a fixed single-space-width gap between them) has no way to represent either even if the text handed to it preserved them, so `NormalizeWhitespaceForInlineRun` (used only at this function's own two call sites) still collapses runs of horizontal whitespace exactly like `normal` would and always neutralizes any literal `\n` down to a plain space before the text ever reaches this function, rather than handing it a character it cannot lay out. `<pre>` gets `white-space: pre` from AngleSharp.Css's own UA stylesheet already (the same targeted-rule mechanism that gives `<ol>`/`<ul>` their `list-style-type` default), not something this renderer has to inject itself.
+
+Current behavior includes block layout, margins, padding, borders, floats, inline-block, relative/fixed/absolute positioning, z-index ordering, outlines, text styling, text alignment, line-height, letter-spacing, text-indent, vertical-align, `white-space` collapsing/preservation, border-radius, box-shadow, text-shadow, list-item markers, overflow clipping, page-level scroll offsets, image and gradient backgrounds, form controls (including a focused text input's animated caret), 2D `transform`/`transform-origin`, CSS `filter`, CSS `opacity`, real `:hover` matching and CSS `transition`/`animation`/`@keyframes` for interactive documents, and generic font-family handling.
 
 SVG support: `<img src="*.svg">` (including `data:` URIs) and inline `<svg>` markup both render, through two loading paths that converge on the same DOM-walking rasterizer (`Skia/Svg/`) - no third-party SVG parser is involved anywhere. An `<img>` SVG source is sniffed and rasterized inside `TryLoadImageResource`, exactly where a PNG/JPEG source is decoded: `SvgRasterizer.TryRasterizeMarkup` parses the bytes with AngleSharp's own HTML/foreign-content parser (wrapped in a throwaway `<html><body>` shell) and is cached per-document by URL like any other image. Inline `<svg>` has no URL and, more importantly, is already sitting in the host document's DOM - `SvgRasterizer.TryRasterizeElement` walks that element directly and is cached per-element in `s_inlineSvgCacheByElement`; it is never serialized back to text and re-parsed. `LayoutElement` empties `orderedChildren` for an `<svg>` root so its foreign-namespaced children are never walked as HTML flow content; both `<img>` and inline `<svg>` are treated as a single replaced element. Rasterization always happens at the SVG's own natural (`viewBox`/`width`/`height`) size oversampled by a fixed factor (`SvgRasterizer.OversampleFactor`), not at the resolved CSS box size - the loader runs before CSS sizing is known, so this is a deliberate blur-vs-memory tradeoff rather than a per-render-size cache.
 
@@ -70,6 +162,12 @@ A gradient stop's position may be a percentage, a bare fraction, or (very common
 
 SVG gradients (`linearGradient`/`radialGradient` inside an SVG document) are a separate, independent implementation (`SvgGradientBuilder`, see the SVG section above) and do not share code with the CSS gradient path described here, aside from both ultimately building an `SKShader`.
 
+`background-image: url(...)` (image backgrounds, as opposed to a gradient function): this was previously a real, confirmed gap, not a hypothetical one - `ParseBackgroundPaint` recognized only the six gradient function names and fell straight through to the plain background-color for anything else, so a `url(...)` background silently rendered as if it were not specified at all. Resolution now goes through `HtmlRenderer.TryLoadBackgroundImageResource`, which decodes a `data:` URI inline and otherwise fetches over the network - and only over the network - when the document's browsing context has an `IDocumentLoader` configured, exactly mirroring how `<img src>` and `@font-face url()` sources are already handled (`FontFaceLoader.TryLoadFontData`); the fetch is synchronous (blocking on the download's `Task`), so the image is already loaded and decoded within the very same `BuildDisplayList` call that requested it - this renderer has no separate "paint now, repaint later once loaded" pass to defer to, unlike a live browser. The resolved `CachedImageResource` is cached per-document (`DocumentImageCache`, the same cache `<img>` already uses, keyed by the same trimmed URL string) so a background image referenced from CSS is fetched once regardless of how many times the display list is rebuilt, and shares a cache entry with an `<img src>` pointed at the identical URL. A background image that fails to load for any reason (malformed data URI, HTTP error, unsupported format, or simply no `IDocumentLoader` configured) falls back to the element's `background-color`, matching browser behavior - the box is never left completely unpainted because of it.
+
+The loaded image becomes a `RenderImagePaint` (`Rendering/RenderPaint.cs`), parsed alongside it from `background-repeat` (`repeat` default, `no-repeat`, `repeat-x`, `repeat-y`; `space`/`round` are accepted but treated as plain `repeat`, since neither's actual spacing/rounding behavior is implemented), `background-position` (keywords, percentages, and pixel lengths, in the common one- and two-value forms; the four-value `<side> <offset>` edge-relative syntax is not recognized), and `background-size` (`auto` default, `cover`, `contain`, or one/two explicit length-or-percentage values). Like a gradient's `CenterX`/`CenterY` fractions, none of this is resolved into concrete pixel geometry until paint time in `SkiaRenderBackend.CreateImagePaint` - a box's own final size (particularly an auto-sized box's height) is not known when its `background-image` is parsed out of the style map, only once its layout is complete. `CreateImagePaint` decodes the image, resolves `background-size`'s `cover`/`contain`/explicit sizing against the box's rendered rect, resolves `background-position` as `percentage * (boxDimension - imageDimension) + offsetPixels` per axis, and builds an `SKShader.CreateImage` with a constructor-time `SKMatrix` that scales and positions the image's own natural pixel space directly into world space - the same technique, and the same "local space maps directly into world space, not the inverse" Skia behavior, `SvgPatternBuilder` already established for `<pattern>` fills. A non-repeating axis uses `SKShaderTileMode.Decal` rather than `Clamp` - `Clamp` would smear the image's own edge pixels across the rest of the box, which is not what CSS `no-repeat` specifies; `Decal` leaves that region transparent instead, exactly matching the spec.
+
+`PaintBackground` (`HtmlRenderer.cs`) - the function that turns a resolved `BoxStyle.BackgroundPaint` into an actual `FillRectCommand` - had its own, narrower version of the same gap: it explicitly matched only `RenderColorPaint` and `RenderGradientPaint`, so even after `RenderImagePaint` values were being constructed correctly by the parsing side, nothing ever painted them - a `background-image: url(...)` box rendered as fully unpainted rather than falling back to its background-color, silently dropping content rather than erroring. This was caught by a failing visual test before being traced to a one-line fix (`RenderGradientPaint or RenderImagePaint` in the type check), not assumed from reading the code - a reminder that adding a new `RenderPaint` subtype means checking every place that pattern-matches on the existing ones, not just the ones a change happens to touch directly.
+
 ## Code Conventions
 
 Follow the repository's existing C# style, which is defined by `.editorconfig` and the existing source files:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 576734d..848084e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,20 @@
+# 0.4.0
+
+Released on Thursday, September 10 2026.
+
+- Improved support for clipping and `overflow` declarations
+- Improved whitespace handling for rendering
+- Fixed painting of scrolled content
+- Fixed handling of background images
+- Added support for rounded corners
+- Added support for transformations and filters
+- Added transitions and animations with a virtual clock
+- Added support for `text-shadow` declarations
+- Added support for `box-shadow` declarations
+- Added support for numeric sorted lists (e.g., using `ol`)
+- Added support for bullet point lists (e.g., using `ul`)
+- Added basic rendering of standard form controls
+
 # 0.3.0
 
 Released on Monday, September 7 2026.
diff --git a/build/Build.cs b/build/Build.cs
index 736ae5a..9a1711f 100644
--- a/build/Build.cs
+++ b/build/Build.cs
@@ -26,10 +26,10 @@ class Build : FalloutBuild
     [Fallout.Common.Parameter("ReleaseNotesFilePath - To determine the SemanticVersion")]
     readonly AbsolutePath ReleaseNotesFilePath = RootDirectory / "CHANGELOG.md";
 
-    [Fallout.Common.Parameter("AngleSharp package version override (e.g. 1.8.0 for compatibility checks)")]
+    [Fallout.Common.Parameter("AngleSharp package version override (e.g. 1.8.1 for compatibility checks)")]
     readonly string AngleSharpVersion;
 
-    [Fallout.Common.Parameter("AngleSharp.Css package version override (e.g. 1.1.0 for compatibility checks)")]
+    [Fallout.Common.Parameter("AngleSharp.Css package version override (e.g. 1.1.1 for compatibility checks)")]
     readonly string AngleSharpCssVersion;
 
     [Solution]
diff --git a/docs/README.md b/docs/README.md
index ae6f6b3..8feff25 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -5,6 +5,7 @@ We have more detailed information regarding the following subjects:
 ## General
 
 - [Getting Started](general/01-Basics.md)
+- [Interactivity, Transitions & Animations](general/02-Interactivity.md)
 
 ## Tutorials
 
diff --git a/docs/general/02-Interactivity.md b/docs/general/02-Interactivity.md
new file mode 100644
index 0000000..98c065d
--- /dev/null
+++ b/docs/general/02-Interactivity.md
@@ -0,0 +1,144 @@
+---
+title: "Interactivity, Transitions & Animations"
+section: "AngleSharp.Renderer"
+---
+# Interactivity, Transitions & Animations
+
+`HtmlRenderer.RenderToPng`/`BuildDisplayList` render one static snapshot of a document by
+themselves. To simulate mouse hover, drive CSS `transition`s and `animation`s, or read/set scroll
+position, a document needs an **interactive DOM harness** - a small piece of state, bound to the
+document's browsing context, that tracks things a real browser would (cursor position, scroll
+offsets, a running clock) and feeds them back into rendering.
+
+## Getting A Harness
+
+A harness needs an `IRenderDevice` registered on the browsing context, then is created (or
+retrieved, if one already exists) via `GetDomHarness()`:
+
+```cs
+using AngleSharp;
+using AngleSharp.Css;
+using AngleSharp.Renderer;
+
+var renderDevice = new DefaultRenderDevice { ViewPortWidth = 320, ViewPortHeight = 200 };
+var context = BrowsingContext.New(Configuration.Default.WithCss().WithRenderDevice(renderDevice));
+var document = await context.OpenAsync(request => request.Content(html));
+
+var harness = document.Context.GetDomHarness();
+```
+
+Every document not wired up this way renders exactly as before - the interactive machinery is a
+no-op until a harness exists for that browsing context.
+
+## Simulating `:hover`
+
+Set `MousePosition` in viewport coordinates. The harness hit-tests the layout, forces the
+`:hover` pseudo-class on the topmost element under the cursor *and its whole ancestor chain*
+(matching how a real pointer makes `.card:hover .title` work, not just the innermost element), and
+raises `PaintInvalidated`:
+
+```cs
+harness.MousePosition = (50, 40);
+var image = harness.PaintToPng();
+```
+
+`harness.HoveredElement` exposes the currently hit-tested element if you need it directly.
+
+## The Virtual Clock
+
+There is no real-time timer anywhere in this renderer. CSS `transition`s and `animation`s are both
+measured against a virtual clock that only moves when you tell it to, via `AdvanceTime`:
+
+```cs
+harness.AdvanceTime(TimeSpan.FromMilliseconds(500));
+var midFrame = harness.PaintToPng();
+```
+
+Call `AdvanceTime` with however much time you want a frame to represent, then paint - repeating
+that pair of calls is how you produce a sequence of frames (for example, to assemble a GIF or
+video of an animation) instead of only ever the resting/end states.
+
+## CSS `transition`
+
+A `transition` animates a property when its own natural value changes for some other reason - in
+this renderer, that means a `:hover` state change:
+
+```cs
+var html = """
+<html>
+  <head>
+    <style>
+      #box { width: 40px; height: 40px; background-color: blue; transition: background-color 1s ease; }
+      #box:hover { background-color: red; }
+    </style>
+  </head>
+  <body><div id="box"></div></body>
+</html>
+""";
+
+var harness = document.Context.GetDomHarness();
+harness.MousePosition = (20, 20); // hovers #box, starts the transition
+harness.AdvanceTime(TimeSpan.FromMilliseconds(500)); // halfway through the 1s duration
+
+var midway = harness.PaintToPng(); // background is purple, not yet fully red
+```
+
+Moving the pointer away mid-transition reverses it smoothly from whatever is currently on screen,
+with its own full declared duration - not a jump back to blue, and not just the remaining
+fraction of the original 1s.
+
+## CSS `animation`/`@keyframes`
+
+An `animation` needs no trigger at all - it starts the moment the harness first becomes aware of
+it (pinned to virtual-clock zero, matching a real browser's "starts playing at page load") and
+keeps looping per `animation-iteration-count`:
+
+```cs
+var html = """
+<html>
+  <head>
+    <style>
+      @keyframes fade {
+        0% { opacity: 0; }
+        100% { opacity: 1; }
+      }
+      #box { width: 40px; height: 40px; background-color: blue; animation: fade 2s linear; }
+    </style>
+  </head>
+  <body><div id="box"></div></body>
+</html>
+""";
+
+var harness = document.Context.GetDomHarness();
+harness.AdvanceTime(TimeSpan.FromMilliseconds(1000)); // halfway through the 2s duration
+
+var midway = harness.PaintToPng(); // #box is 50% opaque
+```
+
+`animation-name` (including multiple, comma-separated animations on one element),
+`-duration`, `-delay`, `-timing-function` (`ease`/`linear`/`cubic-bezier()`/`steps()`),
+`-iteration-count` (a number, or `infinite`), `-direction` (`normal`/`reverse`/`alternate`/
+`alternate-reverse`), and `-fill-mode` (`none`/`forwards`/`backwards`/`both`) are all supported.
+`animation-play-state` (pausing) is not - every animation the harness knows about is always
+running.
+
+## What Can Be Animated
+
+Both `transition` and `animation` only ever interpolate a fixed set of properties:
+
+- **Colors** (channel-wise): `background-color`, `color`, `border-top-color`,
+  `border-right-color`, `border-bottom-color`, `border-left-color`
+- **Numeric lengths/`opacity`** (plain numeric lerp): `opacity`, `width`, `height`, `font-size`,
+  `margin-top`/`-right`/`-bottom`/`-left`, `padding-top`/`-right`/`-bottom`/`-left`,
+  `border-top-width`/`-right-width`/`-bottom-width`/`-left-width`, `top`, `left`, `right`, `bottom`
+
+`transition-property: all` and any other property named in a `@keyframes` block are limited to
+this same list - properties this renderer does not otherwise resolve component-wise, such as
+`transform` and `filter`, are not interpolated.
+
+## Scrolling
+
+The same harness also tracks per-element scroll position, read and set through the standard
+CSSOM-view properties/methods (`element.scrollTop`, `element.scrollTo(...)`,
+`element.scrollIntoView()`, ...) - `RenderToPng`/`BuildDisplayList` honor whatever scroll position
+is currently set once a harness exists for the document.
diff --git a/src/AngleSharp.Renderer.Docs/package.json b/src/AngleSharp.Renderer.Docs/package.json
index 8f45842..fd7ef9b 100644
--- a/src/AngleSharp.Renderer.Docs/package.json
+++ b/src/AngleSharp.Renderer.Docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@anglesharp/renderer",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "preview": true,
   "description": "The doclet for the AngleSharp.Renderer documentation.",
   "keywords": [
diff --git a/src/AngleSharp.Renderer.Tests/HtmlRendererTests.cs b/src/AngleSharp.Renderer.Tests/HtmlRendererTests.cs
index 7773406..7de802f 100644
--- a/src/AngleSharp.Renderer.Tests/HtmlRendererTests.cs
+++ b/src/AngleSharp.Renderer.Tests/HtmlRendererTests.cs
@@ -1,6 +1,8 @@
 using AngleSharp;
 using AngleSharp.Css;
+using AngleSharp.Css.Dom;
 using AngleSharp.Dom;
+using AngleSharp.Html.Dom;
 using AngleSharp.Io;
 using AngleSharp.Renderer.Rendering;
 
@@ -91,6 +93,131 @@ public async Task BuildDisplayList_CachesHttpImagePayloadPerDocument()
         Assert.Equal(1, requester.ContentReadSessionCount);
     }
 
+    [Fact]
+    public async Task BuildDisplayList_PaintsBackgroundImageFromDataUri()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:80px; height:60px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQABAA4A4cQTmwAAAABJRU5ErkJggg==);"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 240,
+            ViewPortHeight = 160,
+            FontSize = 16f,
+        });
+
+        var fill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Paint is RenderImagePaint));
+        var imagePaint = Assert.IsType<RenderImagePaint>(fill.Paint);
+
+        Assert.NotEmpty(imagePaint.Image.Data);
+        Assert.Equal(1, imagePaint.Image.Width);
+        Assert.Equal(1, imagePaint.Image.Height);
+        // CSS initial values: `repeat repeat`, `0% 0%`, `auto`.
+        Assert.True(imagePaint.RepeatX);
+        Assert.True(imagePaint.RepeatY);
+        Assert.Equal(RenderBackgroundPositionComponent.Zero, imagePaint.PositionX);
+        Assert.Equal(RenderBackgroundPositionComponent.Zero, imagePaint.PositionY);
+        Assert.Equal(RenderBackgroundSizeKind.Auto, imagePaint.Size.Kind);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ParsesBackgroundRepeatPositionAndSize()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:80px; height:60px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQABAA4A4cQTmwAAAABJRU5ErkJggg==); background-repeat: no-repeat; background-position: right bottom; background-size: cover;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 240,
+            ViewPortHeight = 160,
+            FontSize = 16f,
+        });
+
+        var fill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Paint is RenderImagePaint));
+        var imagePaint = Assert.IsType<RenderImagePaint>(fill.Paint);
+
+        Assert.False(imagePaint.RepeatX);
+        Assert.False(imagePaint.RepeatY);
+        Assert.Equal(new RenderBackgroundPositionComponent(1f, 0f), imagePaint.PositionX);
+        Assert.Equal(new RenderBackgroundPositionComponent(1f, 0f), imagePaint.PositionY);
+        Assert.Equal(RenderBackgroundSizeKind.Cover, imagePaint.Size.Kind);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_FetchesAndCachesHttpBackgroundImagePerDocument()
+    {
+        var requester = new SingleResponseImageRequester(Convert.FromBase64String("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQABAA4A4cQTmwAAAABJRU5ErkJggg=="));
+        var configuration = Configuration.Default
+            .WithCss()
+            .With(requester)
+            .WithDefaultLoader(new LoaderOptions
+            {
+                IsResourceLoadingEnabled = true,
+            });
+
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:80px; height:60px; background-image: url(http://assets.test/tile.png);"></div>
+            </body></html>
+            """, configuration, "http://example.test/");
+
+        var renderer = new HtmlRenderer();
+
+        var first = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 240,
+            ViewPortHeight = 160,
+            FontSize = 16f,
+        });
+
+        var second = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 240,
+            ViewPortHeight = 160,
+            FontSize = 16f,
+        });
+
+        Assert.IsType<RenderImagePaint>(Assert.Single(first.Commands.OfType<FillRectCommand>().Where(f => f.Paint is RenderImagePaint)).Paint);
+        Assert.IsType<RenderImagePaint>(Assert.Single(second.Commands.OfType<FillRectCommand>().Where(f => f.Paint is RenderImagePaint)).Paint);
+        // Requested once and reused on the second render - not re-fetched every time the display
+        // list is rebuilt, the same guarantee already established for <img>.
+        Assert.Equal(1, requester.ContentReadSessionCount);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_WithoutDocumentLoader_FallsBackToBackgroundColorForNetworkUrl()
+    {
+        // No IDocumentLoader is registered here, so a network background-image URL must never be
+        // fetched - matching how <img> and @font-face url() sources already behave. The box still
+        // paints (its background-color), it just does not get the image.
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:80px; height:60px; background-color:#0000ff; background-image: url(http://assets.test/tile.png);"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 240,
+            ViewPortHeight = 160,
+            FontSize = 16f,
+        });
+
+        Assert.DoesNotContain(displayList.Commands, command => command is FillRectCommand fill && fill.Paint is RenderImagePaint);
+
+        var colorFill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(0, 0, 255))));
+        Assert.IsType<RenderColorPaint>(colorFill.Paint);
+    }
+
     [Fact]
     public async Task BuildDisplayList_PaintsSvgImageElementFromDataUri()
     {
@@ -1004,79 +1131,61 @@ public async Task BuildDisplayList_IndentsFirstLineOfBlockText()
     }
 
     [Fact]
-    public async Task BuildDisplayList_ShiftsInlineTextWithVerticalAlign()
+    public async Task BuildDisplayList_NormalWhiteSpaceCollapsesRunsOfSpacesAndNewlines()
     {
         var document = await ParseAsync("""
             <html><body>
-                <p>
-                    before <span style="vertical-align:super; font-size:12px;">sup</span> after
-                </p>
+                <p style="width:400px;">a    b
+                c</p>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 240,
-            ViewPortHeight = 160,
+            ViewPortWidth = 500,
+            ViewPortHeight = 120,
             FontSize = 16f,
         });
 
-        var textCommands = displayList.Commands.OfType<DrawTextCommand>().ToArray();
-
-        Assert.True(textCommands.Length >= 2);
-        var superCommand = textCommands.First(command => command.Text.Contains("sup", StringComparison.OrdinalIgnoreCase));
-
-        Assert.True(superCommand.Y < textCommands[0].Y);
+        var text = Assert.Single(displayList.Commands.OfType<DrawTextCommand>());
+        Assert.Equal("a b c", text.Text);
     }
 
     [Fact]
-    public async Task RenderToPng_UsesFontFamilyFallbackList()
+    public async Task BuildDisplayList_PreWhiteSpacePreservesRunsOfSpacesAndForcesLineBreaks()
     {
         var document = await ParseAsync("""
             <html><body>
-                <p style="font-family:'DefinitelyMissing', serif; font-size:18px;">Fallback font family</p>
+                <p style="white-space:pre; width:400px;">a    b
+            c</p>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
-        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 240,
+            ViewPortWidth = 500,
             ViewPortHeight = 120,
-            FontSize = 18f,
+            FontSize = 16f,
         });
 
-        Assert.Equal("image/png", image.MimeType);
-        Assert.True(image.Data.Length > 8);
-    }
-
-    [Fact]
-    public async Task RenderToPng_ReturnsPngPayload()
-    {
-        var document = await ParseAsync("<html><body><p>PNG smoke test output.</p></body></html>");
-        var renderer = new HtmlRenderer();
-
-        var image = renderer.RenderToPng(document, new DefaultRenderDevice
-        {
-            ViewPortWidth = 320,
-            ViewPortHeight = 180,
-        });
+        var lines = displayList.Commands.OfType<DrawTextCommand>().ToArray();
 
-        Assert.Equal("image/png", image.MimeType);
-        Assert.True(image.Data.Length > 8);
-        Assert.Equal(0x89, image.Data[0]);
-        Assert.Equal((byte)'P', image.Data[1]);
-        Assert.Equal((byte)'N', image.Data[2]);
-        Assert.Equal((byte)'G', image.Data[3]);
+        Assert.Equal(2, lines.Length);
+        Assert.Equal("a    b", lines[0].Text);
+        Assert.Equal("c", lines[1].Text);
+        // The forced break lands on the very next line, not merely wherever the wrap algorithm
+        // would otherwise have broken - confirmed by the line-height gap between the two baselines.
+        Assert.Equal(16f * 1.35f, lines[1].Y - lines[0].Y, precision: 2);
     }
 
     [Fact]
-    public async Task BuildDisplayList_RendersBoxBackgroundFromPaddingAndMargins()
+    public async Task BuildDisplayList_PreWhiteSpaceDoesNotWrapEvenWhenWiderThanItsBox()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="margin:10px; padding:5px; width:100px; height:20px; background-color:#ff0000;"></div>
+                <p style="white-space:pre; width:40px;">a long line that would normally wrap</p>
             </body></html>
             """);
 
@@ -1084,26 +1193,21 @@ public async Task BuildDisplayList_RendersBoxBackgroundFromPaddingAndMargins()
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
             ViewPortWidth = 300,
-            ViewPortHeight = 200,
+            ViewPortHeight = 120,
+            FontSize = 16f,
         });
 
-        var backgrounds = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        Assert.True(backgrounds.Length >= 2);
-
-        var boxBackground = backgrounds[1];
-        Assert.Equal(10f, boxBackground.Rect.X);
-        Assert.Equal(10f, boxBackground.Rect.Y);
-        Assert.Equal(110f, boxBackground.Rect.Width);
-        Assert.Equal(30f, boxBackground.Rect.Height);
-        Assert.Equal(new RenderColor(255, 0, 0), boxBackground.Color);
+        var text = Assert.Single(displayList.Commands.OfType<DrawTextCommand>());
+        Assert.Equal("a long line that would normally wrap", text.Text);
     }
 
     [Fact]
-    public async Task BuildDisplayList_RendersPerSideBorderWidths()
+    public async Task BuildDisplayList_PreWrapWhiteSpaceWrapsButStillForcesExplicitLineBreaks()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="width:100px; height:20px; border-top-width:2px; border-right-width:3px; border-bottom-width:4px; border-left-width:5px; border-color:#0000ff;"></div>
+                <p style="white-space:pre-wrap; width:100px; font-size:16px;">short
+            a somewhat longer line that should wrap</p>
             </body></html>
             """);
 
@@ -1112,57 +1216,49 @@ public async Task BuildDisplayList_RendersPerSideBorderWidths()
         {
             ViewPortWidth = 300,
             ViewPortHeight = 200,
+            FontSize = 16f,
         });
 
-        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        Assert.True(fills.Length >= 5);
-
-        var top = fills[1];
-        var right = fills[2];
-        var bottom = fills[3];
-        var left = fills[4];
-
-        Assert.Equal(2f, top.Rect.Height);
-        Assert.Equal(3f, right.Rect.Width);
-        Assert.Equal(4f, bottom.Rect.Height);
-        Assert.Equal(5f, left.Rect.Width);
+        var lines = displayList.Commands.OfType<DrawTextCommand>().ToArray();
 
-        Assert.Equal(new RenderColor(0, 0, 255), top.Color);
-        Assert.Equal(new RenderColor(0, 0, 255), right.Color);
-        Assert.Equal(new RenderColor(0, 0, 255), bottom.Color);
-        Assert.Equal(new RenderColor(0, 0, 255), left.Color);
+        // The forced break after "short" always starts a new paragraph, and that paragraph's own
+        // long line then wraps independently across more than one line of its own.
+        Assert.True(lines.Length >= 3);
+        Assert.Equal("short", lines[0].Text);
+        Assert.NotEqual("short", lines[1].Text);
     }
 
     [Fact]
-    public async Task BuildDisplayList_ResolvesPercentageWidthAgainstContainingBlock()
+    public async Task BuildDisplayList_PreLineWhiteSpaceCollapsesSpacesButKeepsForcedBreaks()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="width:50%; height:10px; background-color:#00ff00;"></div>
+                <p style="white-space:pre-line; width:400px;">a    b
+            c</p>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 300,
-            ViewPortHeight = 150,
+            ViewPortWidth = 500,
+            ViewPortHeight = 120,
+            FontSize = 16f,
         });
 
-        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        Assert.True(fills.Length >= 2);
+        var lines = displayList.Commands.OfType<DrawTextCommand>().ToArray();
 
-        var boxBackground = fills[1];
-        Assert.Equal(150f, boxBackground.Rect.Width);
-        Assert.Equal(10f, boxBackground.Rect.Height);
+        Assert.Equal(2, lines.Length);
+        Assert.Equal("a b", lines[0].Text);
+        Assert.Equal("c", lines[1].Text);
     }
 
     [Fact]
-    public async Task BuildDisplayList_CentersBlockWithAutoHorizontalMargins()
+    public async Task BuildDisplayList_NowrapWhiteSpaceKeepsTextOnOneLineEvenWhenWiderThanItsBox()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="width:100px; height:10px; margin-left:auto; margin-right:auto; background-color:#00ff00;"></div>
+                <p style="white-space:nowrap; width:40px;">a long line that would normally wrap</p>
             </body></html>
             """);
 
@@ -1170,24 +1266,20 @@ public async Task BuildDisplayList_CentersBlockWithAutoHorizontalMargins()
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
             ViewPortWidth = 300,
-            ViewPortHeight = 150,
+            ViewPortHeight = 120,
+            FontSize = 16f,
         });
 
-        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        Assert.True(fills.Length >= 2);
-
-        var boxBackground = fills[1];
-        Assert.Equal(100f, boxBackground.Rect.X);
-        Assert.Equal(100f, boxBackground.Rect.Width);
+        var text = Assert.Single(displayList.Commands.OfType<DrawTextCommand>());
+        Assert.Equal("a long line that would normally wrap", text.Text);
     }
 
     [Fact]
-    public async Task BuildDisplayList_CollapsesAdjacentVerticalMargins()
+    public async Task BuildDisplayList_NowrapWhiteSpaceStillCollapsesRunsOfSpaces()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="height:10px; margin-bottom:20px; background-color:#ff0000;"></div>
-                <div style="height:10px; margin-top:10px; background-color:#0000ff;"></div>
+                <p style="white-space:nowrap;">a    b</p>
             </body></html>
             """);
 
@@ -1195,106 +1287,83 @@ public async Task BuildDisplayList_CollapsesAdjacentVerticalMargins()
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
             ViewPortWidth = 300,
-            ViewPortHeight = 200,
+            ViewPortHeight = 120,
+            FontSize = 16f,
         });
 
-        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        Assert.True(fills.Length >= 3);
-
-        var firstBox = fills[1];
-        var secondBox = fills[2];
-
-        Assert.Equal(0f, firstBox.Rect.Y);
-        Assert.Equal(30f, secondBox.Rect.Y);
+        var text = Assert.Single(displayList.Commands.OfType<DrawTextCommand>());
+        Assert.Equal("a b", text.Text);
     }
 
     [Fact]
-    public async Task BuildDisplayList_CollapsesParentAndFirstChildTopMargins()
+    public async Task BuildDisplayList_NowrapSpanStaysUnwrappedEvenInANarrowContainer()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="margin-top:10px; background-color:#eeeeee;">
-                    <div style="margin-top:20px; height:10px; background-color:#ff0000;"></div>
-                </div>
+                <p style="width:80px;">before <span style="white-space:nowrap;">a long run of nowrap text</span> after</p>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 320,
-            ViewPortHeight = 240,
+            ViewPortWidth = 300,
+            ViewPortHeight = 120,
+            FontSize = 16f,
         });
 
-        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        Assert.True(fills.Length >= 3);
-
-        var parentBackground = fills.Single(f => f.Color.Equals(new RenderColor(0xee, 0xee, 0xee)));
-        var childBackground = fills.Single(f => f.Color.Equals(new RenderColor(255, 0, 0)));
-
-        Assert.Equal(20f, parentBackground.Rect.Y);
-        Assert.Equal(20f, childBackground.Rect.Y);
+        // The span's own text stays a single, unwrapped DrawText command despite the 80px-wide
+        // container - without `nowrap` this would have been split across several wrapped lines.
+        var run = Assert.Single(displayList.Commands.OfType<DrawTextCommand>().Where(t => t.Text.Contains("nowrap")));
+        Assert.Equal("a long run of nowrap text", run.Text);
     }
 
     [Fact]
-    public async Task BuildDisplayList_DoesNotCollapseParentAndFirstChildTopMarginsWhenParentHasPadding()
+    public async Task BuildDisplayList_PreHtmlElementDefaultsToPreservingWhitespace()
     {
+        // <pre> gets `white-space: pre` from AngleSharp.Css's own UA stylesheet, the same way <ol>/
+        // <ul> get their list-style-type default - not something this renderer has to inject itself.
         var document = await ParseAsync("""
-            <html><body>
-                <div style="margin-top:10px; padding-top:1px; background-color:#eeeeee;">
-                    <div style="margin-top:20px; height:10px; background-color:#ff0000;"></div>
-                </div>
-            </body></html>
+            <html><body><pre>a    b</pre></body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 320,
-            ViewPortHeight = 240,
+            ViewPortWidth = 300,
+            ViewPortHeight = 120,
+            FontSize = 16f,
         });
 
-        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        Assert.True(fills.Length >= 3);
-
-        var parentBackground = fills.Single(f => f.Color.Equals(new RenderColor(0xee, 0xee, 0xee)));
-        var childBackground = fills.Single(f => f.Color.Equals(new RenderColor(255, 0, 0)));
-
-        Assert.Equal(10f, parentBackground.Rect.Y);
-        Assert.Equal(31f, childBackground.Rect.Y);
+        var text = Assert.Single(displayList.Commands.OfType<DrawTextCommand>());
+        Assert.Equal("a    b", text.Text);
     }
 
     [Fact]
-    public async Task BuildDisplayList_CollapsesParentAndLastChildBottomMargins()
+    public async Task BuildDisplayList_UnsetWhiteSpaceDefaultsToNormal()
     {
         var document = await ParseAsync("""
-            <html><body>
-                <div style="margin-bottom:10px; background-color:#eeeeee;">
-                    <div style="height:10px; margin-bottom:20px; background-color:#ff0000;"></div>
-                </div>
-                <div style="height:10px; background-color:#0000ff;"></div>
-            </body></html>
+            <html><body><p>a    b</p></body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 320,
-            ViewPortHeight = 260,
+            ViewPortWidth = 300,
+            ViewPortHeight = 120,
+            FontSize = 16f,
         });
 
-        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        var nextSibling = fills.Single(f => f.Color.Equals(new RenderColor(0, 0, 255)));
-
-        Assert.Equal(30f, nextSibling.Rect.Y);
+        var text = Assert.Single(displayList.Commands.OfType<DrawTextCommand>());
+        Assert.Equal("a b", text.Text);
     }
 
     [Fact]
-    public async Task BuildDisplayList_DoesNotPaintBorderWhenStyleIsNone()
+    public async Task BuildDisplayList_WhiteSpaceIsInheritedByChildElements()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="width:100px; height:20px; border:5px none #ff0000; background-color:#00ff00;"></div>
+                <div style="white-space:pre;"><span id="child">a    b</span></div>
             </body></html>
             """);
 
@@ -1302,324 +1371,423 @@ public async Task BuildDisplayList_DoesNotPaintBorderWhenStyleIsNone()
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
             ViewPortWidth = 300,
-            ViewPortHeight = 200,
+            ViewPortHeight = 120,
+            FontSize = 16f,
         });
 
-        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        var redBorderFills = fills.Where(f => f.Color.Equals(new RenderColor(255, 0, 0))).ToArray();
-        Assert.Empty(redBorderFills);
+        // The child <span> has no white-space of its own, so it inherits `pre` from its parent - a
+        // single all-inline child with no plain-text siblings routes through the same leaf-text
+        // shortcut a lone inline element with only text content already uses elsewhere in
+        // LayoutNode (the one LayoutWrappedText itself goes through), preserving the run verbatim.
+        var text = Assert.Single(displayList.Commands.OfType<DrawTextCommand>());
+        Assert.Equal("a    b", text.Text);
     }
 
     [Fact]
-    public async Task BuildDisplayList_DoesNotPaintDisplayNoneElement()
+    public async Task BuildDisplayList_ShiftsInlineTextWithVerticalAlign()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="display:none; width:50px; height:20px; background-color:#ff0000;"></div>
+                <p>
+                    before <span style="vertical-align:super; font-size:12px;">sup</span> after
+                </p>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 200,
-            ViewPortHeight = 120,
+            ViewPortWidth = 240,
+            ViewPortHeight = 160,
+            FontSize = 16f,
         });
 
-        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        Assert.Single(fills);
+        var textCommands = displayList.Commands.OfType<DrawTextCommand>().ToArray();
+
+        Assert.True(textCommands.Length >= 2);
+        var superCommand = textCommands.First(command => command.Text.Contains("sup", StringComparison.OrdinalIgnoreCase));
+
+        Assert.True(superCommand.Y < textCommands[0].Y);
     }
 
     [Fact]
-    public async Task BuildDisplayList_DoesNotPaintVisibilityHiddenElement()
+    public async Task RenderToPng_UsesFontFamilyFallbackList()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="visibility:hidden; width:50px; height:20px; background-color:#ff0000;"></div>
+                <p style="font-family:'DefinitelyMissing', serif; font-size:18px;">Fallback font family</p>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
-        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 200,
+            ViewPortWidth = 240,
             ViewPortHeight = 120,
+            FontSize = 18f,
         });
 
-        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        Assert.Single(fills);
+        Assert.Equal("image/png", image.MimeType);
+        Assert.True(image.Data.Length > 8);
     }
 
     [Fact]
-    public async Task BuildDisplayList_RendersInlineBlockBox()
+    public async Task RenderToPng_ReturnsPngPayload()
+    {
+        var document = await ParseAsync("<html><body><p>PNG smoke test output.</p></body></html>");
+        var renderer = new HtmlRenderer();
+
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 320,
+            ViewPortHeight = 180,
+        });
+
+        Assert.Equal("image/png", image.MimeType);
+        Assert.True(image.Data.Length > 8);
+        Assert.Equal(0x89, image.Data[0]);
+        Assert.Equal((byte)'P', image.Data[1]);
+        Assert.Equal((byte)'N', image.Data[2]);
+        Assert.Equal((byte)'G', image.Data[3]);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_RendersBoxBackgroundFromPaddingAndMargins()
     {
         var document = await ParseAsync("""
             <html><body>
-                <span style="display:inline-block; width:40px; height:12px; background-color:#ff0000;"></span>
+                <div style="margin:10px; padding:5px; width:100px; height:20px; background-color:#ff0000;"></div>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 200,
-            ViewPortHeight = 120,
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
         });
 
-        var redFill = displayList.Commands
-            .OfType<FillRectCommand>()
-            .SingleOrDefault(f => f.Color.Equals(new RenderColor(255, 0, 0)));
+        var backgrounds = displayList.Commands.OfType<FillRectCommand>().ToArray();
+        Assert.True(backgrounds.Length >= 2);
 
-        Assert.NotNull(redFill);
-        Assert.Equal(40f, redFill.Rect.Width);
-        Assert.Equal(12f, redFill.Rect.Height);
+        var boxBackground = backgrounds[1];
+        Assert.Equal(10f, boxBackground.Rect.X);
+        Assert.Equal(10f, boxBackground.Rect.Y);
+        Assert.Equal(110f, boxBackground.Rect.Width);
+        Assert.Equal(30f, boxBackground.Rect.Height);
+        Assert.Equal(new RenderColor(255, 0, 0), boxBackground.Color);
     }
 
     [Fact]
-    public async Task BuildDisplayList_RespectsDisplayBlock()
+    public async Task BuildDisplayList_RendersPerSideBorderWidths()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="display:block; width:60px; height:10px; background-color:#00ff00;"></div>
+                <div style="width:100px; height:20px; border-top-width:2px; border-right-width:3px; border-bottom-width:4px; border-left-width:5px; border-color:#0000ff;"></div>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 200,
-            ViewPortHeight = 120,
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
         });
 
-        var greenFill = displayList.Commands
-            .OfType<FillRectCommand>()
-            .Single(f => f.Color.Equals(new RenderColor(0, 255, 0)));
+        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
+        Assert.True(fills.Length >= 5);
 
-        Assert.Equal(60f, greenFill.Rect.Width);
-        Assert.Equal(10f, greenFill.Rect.Height);
+        var top = fills[1];
+        var right = fills[2];
+        var bottom = fills[3];
+        var left = fills[4];
+
+        Assert.Equal(2f, top.Rect.Height);
+        Assert.Equal(3f, right.Rect.Width);
+        Assert.Equal(4f, bottom.Rect.Height);
+        Assert.Equal(5f, left.Rect.Width);
+
+        Assert.Equal(new RenderColor(0, 0, 255), top.Color);
+        Assert.Equal(new RenderColor(0, 0, 255), right.Color);
+        Assert.Equal(new RenderColor(0, 0, 255), bottom.Color);
+        Assert.Equal(new RenderColor(0, 0, 255), left.Color);
     }
 
     [Fact]
-    public async Task BuildDisplayList_TreatsInvalidDisplayFixedAsDefaultBlock()
+    public async Task BuildDisplayList_ResolvesPercentageWidthAgainstContainingBlock()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="display:fixed; height:10px; background-color:#ff0000;"></div>
+                <div style="width:50%; height:10px; background-color:#00ff00;"></div>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 180,
-            ViewPortHeight = 80,
+            ViewPortWidth = 300,
+            ViewPortHeight = 150,
         });
 
-        var redFill = displayList.Commands
-            .OfType<FillRectCommand>()
-            .Single(f => f.Color.Equals(new RenderColor(255, 0, 0)));
+        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
+        Assert.True(fills.Length >= 2);
 
-        Assert.Equal(180f, redFill.Rect.Width);
+        var boxBackground = fills[1];
+        Assert.Equal(150f, boxBackground.Rect.Width);
+        Assert.Equal(10f, boxBackground.Rect.Height);
     }
 
     [Fact]
-    public async Task BuildDisplayList_TreatsInvalidDisplayRelativeAsDefaultBlock()
+    public async Task BuildDisplayList_CentersBlockWithAutoHorizontalMargins()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="display:relative; height:10px; background-color:#0000ff;"></div>
+                <div style="width:100px; height:10px; margin-left:auto; margin-right:auto; background-color:#00ff00;"></div>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 180,
-            ViewPortHeight = 80,
+            ViewPortWidth = 300,
+            ViewPortHeight = 150,
         });
 
-        var blueFill = displayList.Commands
-            .OfType<FillRectCommand>()
-            .Single(f => f.Color.Equals(new RenderColor(0, 0, 255)));
+        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
+        Assert.True(fills.Length >= 2);
 
-        Assert.Equal(180f, blueFill.Rect.Width);
+        var boxBackground = fills[1];
+        Assert.Equal(100f, boxBackground.Rect.X);
+        Assert.Equal(100f, boxBackground.Rect.Width);
     }
 
     [Fact]
-    public async Task BuildDisplayList_FloatsLeftAndWrapsFollowingBlock()
+    public async Task BuildDisplayList_CollapsesAdjacentVerticalMargins()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="float:left; width:50px; height:20px; background-color:#ff0000;"></div>
-                <div style="width:40px; height:10px; background-color:#0000ff;"></div>
+                <div style="height:10px; margin-bottom:20px; background-color:#ff0000;"></div>
+                <div style="height:10px; margin-top:10px; background-color:#0000ff;"></div>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 180,
-            ViewPortHeight = 100,
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
         });
 
         var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        var floatBox = fills.Single(f => f.Color.Equals(new RenderColor(255, 0, 0)));
-        var normalBox = fills.Single(f => f.Color.Equals(new RenderColor(0, 0, 255)));
+        Assert.True(fills.Length >= 3);
 
-        Assert.Equal(0f, floatBox.Rect.X);
-        Assert.Equal(0f, floatBox.Rect.Y);
-        Assert.Equal(50f, floatBox.Rect.Width);
-        Assert.Equal(20f, floatBox.Rect.Height);
+        var firstBox = fills[1];
+        var secondBox = fills[2];
 
-        Assert.Equal(50f, normalBox.Rect.X);
-        Assert.Equal(0f, normalBox.Rect.Y);
-        Assert.Equal(40f, normalBox.Rect.Width);
+        Assert.Equal(0f, firstBox.Rect.Y);
+        Assert.Equal(30f, secondBox.Rect.Y);
     }
 
     [Fact]
-    public async Task BuildDisplayList_AppliesRelativePositionOffsetWithoutChangingFlow()
+    public async Task BuildDisplayList_CollapsesParentAndFirstChildTopMargins()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="position:relative; left:20px; top:5px; width:40px; height:10px; background-color:#ff0000;"></div>
-                <div style="width:40px; height:10px; background-color:#0000ff;"></div>
+                <div style="margin-top:10px; background-color:#eeeeee;">
+                    <div style="margin-top:20px; height:10px; background-color:#ff0000;"></div>
+                </div>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 200,
-            ViewPortHeight = 120,
+            ViewPortWidth = 320,
+            ViewPortHeight = 240,
         });
 
         var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        var relativeBox = fills.Single(f => f.Color.Equals(new RenderColor(255, 0, 0)));
-        var nextBlock = fills.Single(f => f.Color.Equals(new RenderColor(0, 0, 255)));
+        Assert.True(fills.Length >= 3);
 
-        Assert.Equal(20f, relativeBox.Rect.X);
-        Assert.Equal(5f, relativeBox.Rect.Y);
-        Assert.Equal(10f, nextBlock.Rect.Y);
+        var parentBackground = fills.Single(f => f.Color.Equals(new RenderColor(0xee, 0xee, 0xee)));
+        var childBackground = fills.Single(f => f.Color.Equals(new RenderColor(255, 0, 0)));
+
+        Assert.Equal(20f, parentBackground.Rect.Y);
+        Assert.Equal(20f, childBackground.Rect.Y);
     }
 
     [Fact]
-    public async Task BuildDisplayList_RendersFixedPositionRelativeToViewportAndExcludesFlow()
+    public async Task BuildDisplayList_DoesNotCollapseParentAndFirstChildTopMarginsWhenParentHasPadding()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="position:fixed; left:15px; top:8px; width:30px; height:10px; background-color:#ff0000;"></div>
-                <div style="width:30px; height:10px; background-color:#0000ff;"></div>
+                <div style="margin-top:10px; padding-top:1px; background-color:#eeeeee;">
+                    <div style="margin-top:20px; height:10px; background-color:#ff0000;"></div>
+                </div>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 200,
-            ViewPortHeight = 120,
+            ViewPortWidth = 320,
+            ViewPortHeight = 240,
         });
 
         var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        var fixedBox = fills.Single(f => f.Color.Equals(new RenderColor(255, 0, 0)));
-        var normalBox = fills.Single(f => f.Color.Equals(new RenderColor(0, 0, 255)));
+        Assert.True(fills.Length >= 3);
 
-        Assert.Equal(15f, fixedBox.Rect.X);
-        Assert.Equal(8f, fixedBox.Rect.Y);
-        Assert.Equal(0f, normalBox.Rect.Y);
+        var parentBackground = fills.Single(f => f.Color.Equals(new RenderColor(0xee, 0xee, 0xee)));
+        var childBackground = fills.Single(f => f.Color.Equals(new RenderColor(255, 0, 0)));
+
+        Assert.Equal(10f, parentBackground.Rect.Y);
+        Assert.Equal(31f, childBackground.Rect.Y);
     }
 
     [Fact]
-    public async Task BuildDisplayList_DistinguishesPaddingFromMargin()
+    public async Task BuildDisplayList_CollapsesParentAndLastChildBottomMargins()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="margin-left:10px; margin-top:4px; padding-left:5px; padding-right:7px; width:20px; height:10px; background-color:#ff0000;"></div>
+                <div style="margin-bottom:10px; background-color:#eeeeee;">
+                    <div style="height:10px; margin-bottom:20px; background-color:#ff0000;"></div>
+                </div>
+                <div style="height:10px; background-color:#0000ff;"></div>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 220,
-            ViewPortHeight = 120,
+            ViewPortWidth = 320,
+            ViewPortHeight = 260,
         });
 
-        var redFill = displayList.Commands
-            .OfType<FillRectCommand>()
-            .Single(f => f.Color.Equals(new RenderColor(255, 0, 0)));
+        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
+        var nextSibling = fills.Single(f => f.Color.Equals(new RenderColor(0, 0, 255)));
 
-        Assert.Equal(10f, redFill.Rect.X);
-        Assert.Equal(4f, redFill.Rect.Y);
-        Assert.Equal(32f, redFill.Rect.Width);
-        Assert.Equal(10f, redFill.Rect.Height);
+        Assert.Equal(30f, nextSibling.Rect.Y);
     }
 
     [Fact]
-    public async Task BuildDisplayList_PaintsOutlineOutsideBorderWithoutChangingFlow()
+    public async Task BuildDisplayList_DoesNotPaintBorderWhenStyleIsNone()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="width:40px; height:10px; background-color:#ff0000; outline:3px solid #0000ff;"></div>
-                <div style="width:40px; height:10px; background-color:#00ff00;"></div>
+                <div style="width:100px; height:20px; border:5px none #ff0000; background-color:#00ff00;"></div>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 200,
-            ViewPortHeight = 120,
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
         });
 
         var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        var greenBox = fills.Single(f => f.Color.Equals(new RenderColor(0, 255, 0)));
-        var outlineTop = fills.SingleOrDefault(f =>
-            f.Color.Equals(new RenderColor(0, 0, 255)) &&
-            f.Rect.X == -3f &&
-            f.Rect.Y == -3f &&
-            f.Rect.Width == 46f &&
-            f.Rect.Height == 3f);
-
-        Assert.NotNull(outlineTop);
-        Assert.Equal(10f, greenBox.Rect.Y);
+        var redBorderFills = fills.Where(f => f.Color.Equals(new RenderColor(255, 0, 0))).ToArray();
+        Assert.Empty(redBorderFills);
     }
 
     [Fact]
-    public async Task BuildDisplayList_RendersAbsolutePositionRelativeToContainingBlockAndExcludesFlow()
+    public async Task BuildDisplayList_DoesNotPaintDisplayNoneElement()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="position:relative; width:100px; height:20px; background-color:#eeeeee;">
-                    <div style="position:absolute; left:12px; top:6px; width:30px; height:10px; background-color:#ff0000;"></div>
-                </div>
-                <div style="width:40px; height:10px; background-color:#0000ff;"></div>
+                <div style="display:none; width:50px; height:20px; background-color:#ff0000;"></div>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 240,
-            ViewPortHeight = 140,
+            ViewPortWidth = 200,
+            ViewPortHeight = 120,
         });
 
         var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        var absoluteBox = fills.Single(f => f.Color.Equals(new RenderColor(255, 0, 0)));
-        var nextFlowBox = fills.Single(f => f.Color.Equals(new RenderColor(0, 0, 255)));
+        Assert.Single(fills);
+    }
 
-        Assert.Equal(12f, absoluteBox.Rect.X);
-        Assert.Equal(6f, absoluteBox.Rect.Y);
-        Assert.Equal(20f, nextFlowBox.Rect.Y);
+    [Fact]
+    public async Task BuildDisplayList_DoesNotPaintVisibilityHiddenElement()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="visibility:hidden; width:50px; height:20px; background-color:#ff0000;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 200,
+            ViewPortHeight = 120,
+        });
+
+        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
+        Assert.Single(fills);
     }
 
     [Fact]
-    public async Task BuildDisplayList_PaintsHigherZIndexAfterLowerForPositionedOverlaps()
+    public async Task BuildDisplayList_RendersInlineBlockBox()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="position:relative; width:120px; height:40px;">
-                    <div style="position:absolute; left:10px; top:5px; width:30px; height:20px; background-color:#ff0000; z-index:1;"></div>
-                    <div style="position:absolute; left:10px; top:5px; width:30px; height:20px; background-color:#0000ff; z-index:2;"></div>
+                <span style="display:inline-block; width:40px; height:12px; background-color:#ff0000;"></span>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 200,
+            ViewPortHeight = 120,
+        });
+
+        var redFill = displayList.Commands
+            .OfType<FillRectCommand>()
+            .SingleOrDefault(f => f.Color.Equals(new RenderColor(255, 0, 0)));
+
+        Assert.NotNull(redFill);
+        Assert.Equal(40f, redFill.Rect.Width);
+        Assert.Equal(12f, redFill.Rect.Height);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_InlineBlockSiblingsWithExplicitSizeFlowOnTheSameLine()
+    {
+        // A real, confirmed bug (not form-control-specific): two inline-block elements previously
+        // always stacked vertically, identical to display:block, regardless of whether they fit on
+        // one line - verified independently of any form control with two plain inline-block spans.
+        var document = await ParseAsync("""
+            <html><body>
+                <div><span style="display:inline-block; width:20px; height:20px; background-color:#ff0000;"></span><span style="display:inline-block; width:20px; height:20px; background-color:#00ff00;"></span></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 100,
+        });
+
+        var redFill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(255, 0, 0))));
+        var greenFill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(0, 255, 0))));
+
+        Assert.Equal(redFill.Rect.Y, greenFill.Rect.Y);
+        Assert.Equal(redFill.Rect.X + redFill.Rect.Width, greenFill.Rect.X);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_InlineBlockSiblingsWrapToANewLineWhenTheyDoNotFit()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:50px;">
+                    <span style="display:inline-block; width:20px; height:20px; background-color:#ff0000;"></span><span style="display:inline-block; width:20px; height:20px; background-color:#00ff00;"></span><span style="display:inline-block; width:20px; height:20px; background-color:#0000ff;"></span>
                 </div>
             </body></html>
             """);
@@ -1627,74 +1795,2918 @@ public async Task BuildDisplayList_PaintsHigherZIndexAfterLowerForPositionedOver
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 220,
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var redFill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(255, 0, 0))));
+        var greenFill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(0, 255, 0))));
+        var blueFill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(0, 0, 255))));
+
+        // A 50px-wide container fits exactly two 20px items (40px) but not a third - the third
+        // wraps to its own new line rather than overflowing the container width.
+        Assert.Equal(redFill.Rect.Y, greenFill.Rect.Y);
+        Assert.True(blueFill.Rect.Y > redFill.Rect.Y);
+        Assert.Equal(redFill.Rect.X, blueFill.Rect.X);
+    }
+
+
+    [Fact]
+    public async Task BuildDisplayList_AutoSizedInlineBlockSiblingsStillEachGetTheirOwnLine()
+    {
+        // The one deliberate, documented scope cut: an inline-block whose own size is not known up
+        // front (auto width here) cannot be predicted without a full trial layout, so it keeps this
+        // renderer's older, pre-existing behavior (its own line) rather than flowing inline - not a
+        // regression, since this was already true for every inline-block element before shared-line
+        // flow existed for any of them.
+        var document = await ParseAsync("""
+            <html><body>
+                <div><span style="display:inline-block; height:20px; background-color:#ff0000;">A</span><span style="display:inline-block; height:20px; background-color:#00ff00;">B</span></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 100,
+        });
+
+        var redFill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(255, 0, 0))));
+        var greenFill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(0, 255, 0))));
+
+        Assert.True(greenFill.Rect.Y > redFill.Rect.Y);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_RespectsDisplayBlock()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="display:block; width:60px; height:10px; background-color:#00ff00;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 200,
             ViewPortHeight = 120,
         });
 
+        var greenFill = displayList.Commands
+            .OfType<FillRectCommand>()
+            .Single(f => f.Color.Equals(new RenderColor(0, 255, 0)));
+
+        Assert.Equal(60f, greenFill.Rect.Width);
+        Assert.Equal(10f, greenFill.Rect.Height);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_TreatsInvalidDisplayFixedAsDefaultBlock()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="display:fixed; height:10px; background-color:#ff0000;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 180,
+            ViewPortHeight = 80,
+        });
+
+        var redFill = displayList.Commands
+            .OfType<FillRectCommand>()
+            .Single(f => f.Color.Equals(new RenderColor(255, 0, 0)));
+
+        Assert.Equal(180f, redFill.Rect.Width);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_TreatsInvalidDisplayRelativeAsDefaultBlock()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="display:relative; height:10px; background-color:#0000ff;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 180,
+            ViewPortHeight = 80,
+        });
+
+        var blueFill = displayList.Commands
+            .OfType<FillRectCommand>()
+            .Single(f => f.Color.Equals(new RenderColor(0, 0, 255)));
+
+        Assert.Equal(180f, blueFill.Rect.Width);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_FloatsLeftAndWrapsFollowingBlock()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="float:left; width:50px; height:20px; background-color:#ff0000;"></div>
+                <div style="width:40px; height:10px; background-color:#0000ff;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 180,
+            ViewPortHeight = 100,
+        });
+
         var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        var redIndex = Array.FindIndex(fills, f => f.Color.Equals(new RenderColor(255, 0, 0)));
-        var blueIndex = Array.FindIndex(fills, f => f.Color.Equals(new RenderColor(0, 0, 255)));
+        var floatBox = fills.Single(f => f.Color.Equals(new RenderColor(255, 0, 0)));
+        var normalBox = fills.Single(f => f.Color.Equals(new RenderColor(0, 0, 255)));
 
-        Assert.True(redIndex >= 0);
-        Assert.True(blueIndex >= 0);
-        Assert.True(blueIndex > redIndex);
+        Assert.Equal(0f, floatBox.Rect.X);
+        Assert.Equal(0f, floatBox.Rect.Y);
+        Assert.Equal(50f, floatBox.Rect.Width);
+        Assert.Equal(20f, floatBox.Rect.Height);
+
+        Assert.Equal(50f, normalBox.Rect.X);
+        Assert.Equal(0f, normalBox.Rect.Y);
+        Assert.Equal(40f, normalBox.Rect.Width);
     }
 
     [Fact]
-    public async Task BuildDisplayList_PaintsNegativeZIndexBeforeInFlowBackground()
+    public async Task BuildDisplayList_AppliesRelativePositionOffsetWithoutChangingFlow()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="position:relative; width:120px; height:30px; background-color:#00ff00;">
-                    <div style="position:absolute; left:0; top:0; width:30px; height:10px; background-color:#ff0000; z-index:-1;"></div>
-                </div>
+                <div style="position:relative; left:20px; top:5px; width:40px; height:10px; background-color:#ff0000;"></div>
+                <div style="width:40px; height:10px; background-color:#0000ff;"></div>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 220,
+            ViewPortWidth = 200,
             ViewPortHeight = 120,
         });
 
         var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        var greenIndex = Array.FindIndex(fills, f => f.Color.Equals(new RenderColor(0, 255, 0)));
-        var redIndex = Array.FindIndex(fills, f => f.Color.Equals(new RenderColor(255, 0, 0)));
+        var relativeBox = fills.Single(f => f.Color.Equals(new RenderColor(255, 0, 0)));
+        var nextBlock = fills.Single(f => f.Color.Equals(new RenderColor(0, 0, 255)));
 
-        Assert.True(greenIndex >= 0);
-        Assert.True(redIndex >= 0);
-        Assert.True(redIndex < greenIndex);
+        Assert.Equal(20f, relativeBox.Rect.X);
+        Assert.Equal(5f, relativeBox.Rect.Y);
+        Assert.Equal(10f, nextBlock.Rect.Y);
     }
 
     [Fact]
-    public async Task BuildDisplayList_UsesZIndexOverSourceOrderForPositionedSiblings()
+    public async Task BuildDisplayList_RendersFixedPositionRelativeToViewportAndExcludesFlow()
     {
         var document = await ParseAsync("""
             <html><body>
-                <div style="position:relative; width:120px; height:40px;">
-                    <div style="position:absolute; left:10px; top:5px; width:30px; height:20px; background-color:#0000ff; z-index:2;"></div>
-                    <div style="position:absolute; left:10px; top:5px; width:30px; height:20px; background-color:#ff0000; z-index:1;"></div>
-                </div>
+                <div style="position:fixed; left:15px; top:8px; width:30px; height:10px; background-color:#ff0000;"></div>
+                <div style="width:30px; height:10px; background-color:#0000ff;"></div>
             </body></html>
             """);
 
         var renderer = new HtmlRenderer();
         var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
         {
-            ViewPortWidth = 220,
+            ViewPortWidth = 200,
             ViewPortHeight = 120,
         });
 
         var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
-        var redIndex = Array.FindIndex(fills, f => f.Color.Equals(new RenderColor(255, 0, 0)));
-        var blueIndex = Array.FindIndex(fills, f => f.Color.Equals(new RenderColor(0, 0, 255)));
+        var fixedBox = fills.Single(f => f.Color.Equals(new RenderColor(255, 0, 0)));
+        var normalBox = fills.Single(f => f.Color.Equals(new RenderColor(0, 0, 255)));
 
-        Assert.True(redIndex >= 0);
-        Assert.True(blueIndex >= 0);
-        Assert.True(blueIndex > redIndex);
+        Assert.Equal(15f, fixedBox.Rect.X);
+        Assert.Equal(8f, fixedBox.Rect.Y);
+        Assert.Equal(0f, normalBox.Rect.Y);
     }
 
+    [Fact]
+    public async Task BuildDisplayList_DistinguishesPaddingFromMargin()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="margin-left:10px; margin-top:4px; padding-left:5px; padding-right:7px; width:20px; height:10px; background-color:#ff0000;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 220,
+            ViewPortHeight = 120,
+        });
+
+        var redFill = displayList.Commands
+            .OfType<FillRectCommand>()
+            .Single(f => f.Color.Equals(new RenderColor(255, 0, 0)));
+
+        Assert.Equal(10f, redFill.Rect.X);
+        Assert.Equal(4f, redFill.Rect.Y);
+        Assert.Equal(32f, redFill.Rect.Width);
+        Assert.Equal(10f, redFill.Rect.Height);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_PaintsOutlineOutsideBorderWithoutChangingFlow()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:40px; height:10px; background-color:#ff0000; outline:3px solid #0000ff;"></div>
+                <div style="width:40px; height:10px; background-color:#00ff00;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 200,
+            ViewPortHeight = 120,
+        });
+
+        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
+        var greenBox = fills.Single(f => f.Color.Equals(new RenderColor(0, 255, 0)));
+        var outlineTop = fills.SingleOrDefault(f =>
+            f.Color.Equals(new RenderColor(0, 0, 255)) &&
+            f.Rect.X == -3f &&
+            f.Rect.Y == -3f &&
+            f.Rect.Width == 46f &&
+            f.Rect.Height == 3f);
+
+        Assert.NotNull(outlineTop);
+        Assert.Equal(10f, greenBox.Rect.Y);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_RendersAbsolutePositionRelativeToContainingBlockAndExcludesFlow()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="position:relative; width:100px; height:20px; background-color:#eeeeee;">
+                    <div style="position:absolute; left:12px; top:6px; width:30px; height:10px; background-color:#ff0000;"></div>
+                </div>
+                <div style="width:40px; height:10px; background-color:#0000ff;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 240,
+            ViewPortHeight = 140,
+        });
+
+        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
+        var absoluteBox = fills.Single(f => f.Color.Equals(new RenderColor(255, 0, 0)));
+        var nextFlowBox = fills.Single(f => f.Color.Equals(new RenderColor(0, 0, 255)));
+
+        Assert.Equal(12f, absoluteBox.Rect.X);
+        Assert.Equal(6f, absoluteBox.Rect.Y);
+        Assert.Equal(20f, nextFlowBox.Rect.Y);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_PaintsHigherZIndexAfterLowerForPositionedOverlaps()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="position:relative; width:120px; height:40px;">
+                    <div style="position:absolute; left:10px; top:5px; width:30px; height:20px; background-color:#ff0000; z-index:1;"></div>
+                    <div style="position:absolute; left:10px; top:5px; width:30px; height:20px; background-color:#0000ff; z-index:2;"></div>
+                </div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 220,
+            ViewPortHeight = 120,
+        });
+
+        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
+        var redIndex = Array.FindIndex(fills, f => f.Color.Equals(new RenderColor(255, 0, 0)));
+        var blueIndex = Array.FindIndex(fills, f => f.Color.Equals(new RenderColor(0, 0, 255)));
+
+        Assert.True(redIndex >= 0);
+        Assert.True(blueIndex >= 0);
+        Assert.True(blueIndex > redIndex);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_PaintsNegativeZIndexOnTopOfOwnStackingContextBackground()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="position:relative; width:120px; height:30px; background-color:#00ff00;">
+                    <div style="position:absolute; left:0; top:0; width:30px; height:10px; background-color:#ff0000; z-index:-1;"></div>
+                </div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 220,
+            ViewPortHeight = 120,
+        });
+
+        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
+        var greenIndex = Array.FindIndex(fills, f => f.Color.Equals(new RenderColor(0, 255, 0)));
+        var redIndex = Array.FindIndex(fills, f => f.Color.Equals(new RenderColor(255, 0, 0)));
+
+        Assert.True(greenIndex >= 0);
+        Assert.True(redIndex >= 0);
+
+        // Per CSS 2.1 Appendix E, a stacking context's own background/border paints first, and
+        // its negative-z-index descendants paint immediately after (on top of) that background -
+        // not before/behind it. So the red z-index:-1 child paints after the green box's own
+        // background, even though it still paints before the green box's normal in-flow content
+        // (there is none here) and before any positive/zero-z-index descendants.
+        Assert.True(redIndex > greenIndex);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_UsesZIndexOverSourceOrderForPositionedSiblings()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="position:relative; width:120px; height:40px;">
+                    <div style="position:absolute; left:10px; top:5px; width:30px; height:20px; background-color:#0000ff; z-index:2;"></div>
+                    <div style="position:absolute; left:10px; top:5px; width:30px; height:20px; background-color:#ff0000; z-index:1;"></div>
+                </div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 220,
+            ViewPortHeight = 120,
+        });
+
+        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
+        var redIndex = Array.FindIndex(fills, f => f.Color.Equals(new RenderColor(255, 0, 0)));
+        var blueIndex = Array.FindIndex(fills, f => f.Color.Equals(new RenderColor(0, 0, 255)));
+
+        Assert.True(redIndex >= 0);
+        Assert.True(blueIndex >= 0);
+        Assert.True(blueIndex > redIndex);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_AppliesUniformBorderRadiusToBackgroundFill()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:100px; height:60px; background-color:#00ff00; border-radius:8px;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
+        Assert.True(fills.Length >= 2);
+
+        var boxBackground = fills[1];
+        Assert.Equal(8f, boxBackground.Radii.TopLeftX);
+        Assert.Equal(8f, boxBackground.Radii.TopLeftY);
+        Assert.Equal(8f, boxBackground.Radii.TopRightX);
+        Assert.Equal(8f, boxBackground.Radii.TopRightY);
+        Assert.Equal(8f, boxBackground.Radii.BottomRightX);
+        Assert.Equal(8f, boxBackground.Radii.BottomRightY);
+        Assert.Equal(8f, boxBackground.Radii.BottomLeftX);
+        Assert.Equal(8f, boxBackground.Radii.BottomLeftY);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ParsesTwoValueBorderRadiusShorthand()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:100px; height:60px; background-color:#00ff00; border-radius:20px 5px;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
+        var boxBackground = fills[1];
+
+        // border-radius: 20px 5px -> top-left/bottom-right get 20px, top-right/bottom-left get 5px.
+        Assert.Equal(20f, boxBackground.Radii.TopLeftX);
+        Assert.Equal(5f, boxBackground.Radii.TopRightX);
+        Assert.Equal(20f, boxBackground.Radii.BottomRightX);
+        Assert.Equal(5f, boxBackground.Radii.BottomLeftX);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ParsesEllipticalBorderRadiusPerCornerLonghand()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:100px; height:60px; background-color:#00ff00; border-top-left-radius:20px 10px;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
+        var boxBackground = fills[1];
+
+        Assert.Equal(20f, boxBackground.Radii.TopLeftX);
+        Assert.Equal(10f, boxBackground.Radii.TopLeftY);
+        Assert.Equal(0f, boxBackground.Radii.TopRightX);
+        Assert.Equal(0f, boxBackground.Radii.BottomRightX);
+        Assert.Equal(0f, boxBackground.Radii.BottomLeftX);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ParsesSlashSeparatedBorderRadiusShorthand()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:100px; height:60px; background-color:#00ff00; border-radius:40px / 20px;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
+        var boxBackground = fills[1];
+
+        // border-radius: 40px / 20px -> every corner gets a 40px horizontal / 20px vertical
+        // elliptical radius (all four corners share the same X and share the same Y here, since
+        // no per-corner variation was given on either side of the slash).
+        Assert.Equal(40f, boxBackground.Radii.TopLeftX);
+        Assert.Equal(20f, boxBackground.Radii.TopLeftY);
+        Assert.Equal(40f, boxBackground.Radii.BottomRightX);
+        Assert.Equal(20f, boxBackground.Radii.BottomRightY);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ResolvesPercentageBorderRadiusAgainstBox()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:200px; height:80px; background-color:#00ff00; border-radius:10%;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
+        var boxBackground = fills[1];
+
+        // A border-radius percentage resolves per-axis against the element's own border box - the
+        // horizontal component against its 200px width (10% = 20px), the vertical component
+        // against its 80px height (10% = 8px) - per spec. An older AngleSharp.Css version this
+        // test used to pin (1.1.1) resolved both components against the containing block's width
+        // instead (a confirmed upstream bug, reported with a reproducing test in AngleSharp.Css's
+        // own suite - see BorderRadiusPercentageResolutionTests.cs there); fixed upstream since,
+        // confirmed by this test flipping from the old (wrong) 30px/30px to the correct 20px/8px
+        // with no renderer-side code change of its own. Neither exceeds either edge, so no
+        // overlap-clamping kicks in here (that path is covered separately by the pixel-radius
+        // clamp test below).
+        Assert.Equal(20f, boxBackground.Radii.TopLeftX);
+        Assert.Equal(8f, boxBackground.Radii.TopLeftY);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ClampsOverlappingBorderRadiiToBoxSize()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:40px; height:20px; background-color:#00ff00; border-radius:100px;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var fills = displayList.Commands.OfType<FillRectCommand>().ToArray();
+        var boxBackground = fills[1];
+
+        // A 100px radius on every corner of a 40x20 box would overlap; the CSS corner-overlap
+        // algorithm scales all radii down uniformly until the tightest edge (height=20, two
+        // 100px radii sharing it) just fits: scale = 20/200 = 0.1 -> 10px.
+        Assert.Equal(10f, boxBackground.Radii.TopLeftX, 0.001f);
+        Assert.Equal(10f, boxBackground.Radii.TopLeftY, 0.001f);
+        Assert.Equal(10f, boxBackground.Radii.BottomRightX, 0.001f);
+        Assert.Equal(10f, boxBackground.Radii.BottomRightY, 0.001f);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_RendersUniformBorderRadiusBorderAsStrokedRoundedRect()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:100px; height:60px; border-width:4px; border-style:solid; border-color:#0000ff; border-radius:12px;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var strokedBorder = Assert.Single(displayList.Commands.OfType<StrokeRoundedRectCommand>());
+        Assert.Equal(new RenderColor(0, 0, 255), strokedBorder.Color);
+        Assert.Equal(4f, strokedBorder.StrokeWidth);
+
+        // The stroke is drawn along the border's centerline, half the border width inside the
+        // outer edge, so its radius is the outer 12px radius minus half the 4px border width.
+        Assert.Equal(10f, strokedBorder.Radii.TopLeftX, 0.001f);
+
+        // A rounded border is painted as a single ring, never as the four separate edge rectangles.
+        Assert.Empty(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(0, 0, 255))));
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_FallsBackToStraightEdgesForMixedWidthRoundedBorder()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:100px; height:60px; border-top-width:2px; border-right-width:6px; border-bottom-width:2px; border-left-width:2px; border-style:solid; border-color:#0000ff; border-radius:12px;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        // Mixed edge widths have no single stroke width for a rounded ring, so the renderer falls
+        // back to the un-rounded four-rectangle border path.
+        Assert.Empty(displayList.Commands.OfType<StrokeRoundedRectCommand>());
+
+        var borderFills = displayList.Commands.OfType<FillRectCommand>()
+            .Where(f => f.Color.Equals(new RenderColor(0, 0, 255)))
+            .ToArray();
+        Assert.Equal(4, borderFills.Length);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_DoesNotRoundOutlineWithBorderRadius()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:100px; height:60px; border-radius:12px; outline-width:3px; outline-style:solid; outline-color:#ff00ff;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        // The outline is unaffected by border-radius per spec, so it stays a plain four-rectangle
+        // border rather than a StrokeRoundedRectCommand.
+        Assert.Empty(displayList.Commands.OfType<StrokeRoundedRectCommand>());
+
+        var outlineFills = displayList.Commands.OfType<FillRectCommand>()
+            .Where(f => f.Color.Equals(new RenderColor(255, 0, 255)))
+            .ToArray();
+        Assert.Equal(4, outlineFills.Length);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ParsesSingleOutsetBoxShadow()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:50px; height:20px; background-color:#00ff00; box-shadow: 2px 3px 4px 1px rgba(0, 0, 0, 0.5);"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var shadow = Assert.Single(displayList.Commands.OfType<DrawBoxShadowCommand>());
+        Assert.Equal(2f, shadow.Shadow.OffsetX);
+        Assert.Equal(3f, shadow.Shadow.OffsetY);
+        Assert.Equal(4f, shadow.Shadow.BlurRadius);
+        Assert.Equal(1f, shadow.Shadow.SpreadRadius);
+        Assert.Equal(new RenderColor(0, 0, 0, 128), shadow.Shadow.Color);
+        Assert.False(shadow.Shadow.Inset);
+
+        // Per spec, box-shadow paints after the background (and before the border) - not before
+        // it - so an inset shadow is not hidden underneath an opaque background. For an outset
+        // shadow like this one, the shadow shape is clipped to never overlap the border box
+        // anyway, so this ordering has no visible effect here; it matters for the inset case.
+        var shadowIndex = Array.IndexOf(displayList.Commands.ToArray(), (RenderCommand)shadow);
+        var backgroundIndex = Array.FindIndex(displayList.Commands.ToArray(), c => c is FillRectCommand fill && fill.Color.Equals(new RenderColor(0, 255, 0)));
+        Assert.True(shadowIndex > backgroundIndex);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ParsesInsetBoxShadow()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:50px; height:20px; box-shadow: inset 0 0 5px rgba(255, 0, 0, 1);"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var shadow = Assert.Single(displayList.Commands.OfType<DrawBoxShadowCommand>());
+        Assert.True(shadow.Shadow.Inset);
+        Assert.Equal(0f, shadow.Shadow.OffsetX);
+        Assert.Equal(0f, shadow.Shadow.OffsetY);
+        Assert.Equal(5f, shadow.Shadow.BlurRadius);
+        Assert.Equal(0f, shadow.Shadow.SpreadRadius);
+        Assert.Equal(new RenderColor(255, 0, 0), shadow.Shadow.Color);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_PaintsMultipleBoxShadowsWithFirstListedOnTop()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:50px; height:20px; box-shadow: 1px 1px 0 rgba(255, 0, 0, 1), 2px 2px 0 rgba(0, 0, 255, 1);"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var shadows = displayList.Commands.OfType<DrawBoxShadowCommand>().ToArray();
+        Assert.Equal(2, shadows.Length);
+
+        // The first-listed shadow (red) paints on top of the second (blue), so it is added to
+        // the display list last, even though it appears first in the CSS source.
+        Assert.Equal(new RenderColor(0, 0, 255), shadows[0].Shadow.Color);
+        Assert.Equal(new RenderColor(255, 0, 0), shadows[1].Shadow.Color);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_TreatsBoxShadowNoneAsNoShadow()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:50px; height:20px; box-shadow: none;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        Assert.Empty(displayList.Commands.OfType<DrawBoxShadowCommand>());
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ParsesTextShadowAndPaintsItBeforeTheText()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <p style="text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);">Hi</p>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var commands = displayList.Commands.ToArray();
+        var shadow = Assert.Single(commands.OfType<DrawTextShadowCommand>());
+        var text = Assert.Single(commands.OfType<DrawTextCommand>());
+
+        Assert.Equal("Hi", shadow.Text);
+        Assert.Equal(text.X + 1f, shadow.X);
+        Assert.Equal(text.Y + 1f, shadow.Y);
+        Assert.Equal(2f, shadow.BlurRadius);
+        Assert.Equal(new RenderColor(0, 0, 0), shadow.Color);
+        Assert.True(Array.IndexOf(commands, (RenderCommand)shadow) < Array.IndexOf(commands, (RenderCommand)text));
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_PaintsMultipleTextShadowsWithFirstListedOnTop()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <p style="text-shadow: 1px 1px 0 rgba(255, 0, 0, 1), 2px 2px 0 rgba(0, 0, 255, 1);">Hi</p>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var shadows = displayList.Commands.OfType<DrawTextShadowCommand>().ToArray();
+        Assert.Equal(2, shadows.Length);
+        Assert.Equal(new RenderColor(0, 0, 255), shadows[0].Color);
+        Assert.Equal(new RenderColor(255, 0, 0), shadows[1].Color);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_InheritsTextShadowToChildrenWithoutTheirOwn()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="text-shadow: 1px 1px 2px rgba(255, 0, 0, 1);"><span>Hi</span></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var shadow = Assert.Single(displayList.Commands.OfType<DrawTextShadowCommand>());
+        Assert.Equal(new RenderColor(255, 0, 0), shadow.Color);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_TextShadowNoneOverridesInheritedShadow()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="text-shadow: 1px 1px 2px rgba(255, 0, 0, 1);"><span style="text-shadow: none;">Hi</span></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        Assert.Empty(displayList.Commands.OfType<DrawTextShadowCommand>());
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_PaintsOwnBackgroundBehindOwnDirectTextContent()
+    {
+        // Regression test: an auto-height box's own background can only be sized once its
+        // children are measured, which used to mean it was appended to the display list (and so
+        // painted) AFTER its children's commands - silently hiding any direct text content behind
+        // an opaque background. The fix splices the box's own background/border/shadow/outline
+        // commands in before its children's once the box's final size is known.
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:100px; height:40px; background-color:#ff0000;">Hi</div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var commands = displayList.Commands.ToArray();
+        var backgroundIndex = Array.FindIndex(commands, c => c is FillRectCommand fill && fill.Color.Equals(new RenderColor(255, 0, 0)));
+        var textIndex = Array.FindIndex(commands, c => c is DrawTextCommand text && text.Text == "Hi");
+
+        Assert.True(backgroundIndex >= 0);
+        Assert.True(textIndex >= 0);
+        Assert.True(backgroundIndex < textIndex);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_RendersUnorderedListWithDiscMarkers()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <ul>
+                    <li>One</li>
+                    <li>Two</li>
+                </ul>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+            FontSize = 16f,
+        });
+
+        // A disc marker is a small circular FillRectCommand (full corner radii), distinguishable
+        // from an ordinary square background fill.
+        var discMarkers = displayList.Commands.OfType<FillRectCommand>()
+            .Where(f => !f.Radii.IsZero && f.Rect.Width < 10f)
+            .ToArray();
+        Assert.Equal(2, discMarkers.Length);
+
+        Assert.Contains(displayList.Commands, c => c is DrawTextCommand t && t.Text == "One");
+        Assert.Contains(displayList.Commands, c => c is DrawTextCommand t && t.Text == "Two");
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_RendersOrderedListWithDecimalMarkers()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <ol>
+                    <li>First</li>
+                    <li>Second</li>
+                </ol>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+            FontSize = 16f,
+        });
+
+        var texts = displayList.Commands.OfType<DrawTextCommand>().ToArray();
+        Assert.Contains(texts, t => t.Text == "1.");
+        Assert.Contains(texts, t => t.Text == "2.");
+        Assert.Contains(texts, t => t.Text == "First");
+        Assert.Contains(texts, t => t.Text == "Second");
+
+        // The marker for "First" sits to the left of the "First" text it labels.
+        var marker = texts.Single(t => t.Text == "1.");
+        var content = texts.Single(t => t.Text == "First");
+        Assert.True(marker.X < content.X);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_RespectsOlStartAttribute()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <ol start="5">
+                    <li>a</li>
+                    <li>b</li>
+                </ol>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+            FontSize = 16f,
+        });
+
+        var texts = displayList.Commands.OfType<DrawTextCommand>().ToArray();
+        Assert.Contains(texts, t => t.Text == "5.");
+        Assert.Contains(texts, t => t.Text == "6.");
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_RespectsLiValueAttributeOverride()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <ol>
+                    <li>a</li>
+                    <li value="10">b</li>
+                    <li>c</li>
+                </ol>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+            FontSize = 16f,
+        });
+
+        var texts = displayList.Commands.OfType<DrawTextCommand>().ToArray();
+        Assert.Contains(texts, t => t.Text == "1.");
+        Assert.Contains(texts, t => t.Text == "10.");
+        Assert.Contains(texts, t => t.Text == "11.");
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_RespectsOlReversedAttribute()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <ol reversed="reversed">
+                    <li>a</li>
+                    <li>b</li>
+                    <li>c</li>
+                </ol>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+            FontSize = 16f,
+        });
+
+        var texts = displayList.Commands.OfType<DrawTextCommand>().ToArray();
+        Assert.Contains(texts, t => t.Text == "3.");
+        Assert.Contains(texts, t => t.Text == "2.");
+        Assert.Contains(texts, t => t.Text == "1.");
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_RendersLowerRomanMarkers()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <ol style="list-style-type: lower-roman;">
+                    <li>a</li>
+                    <li>b</li>
+                    <li>c</li>
+                    <li>d</li>
+                </ol>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+            FontSize = 16f,
+        });
+
+        var texts = displayList.Commands.OfType<DrawTextCommand>().ToArray();
+        Assert.Contains(texts, t => t.Text == "i.");
+        Assert.Contains(texts, t => t.Text == "ii.");
+        Assert.Contains(texts, t => t.Text == "iii.");
+        Assert.Contains(texts, t => t.Text == "iv.");
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_RendersUpperAlphaMarkers()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <ol style="list-style-type: upper-alpha;">
+                    <li>a</li>
+                    <li>b</li>
+                    <li>c</li>
+                </ol>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+            FontSize = 16f,
+        });
+
+        var texts = displayList.Commands.OfType<DrawTextCommand>().ToArray();
+        Assert.Contains(texts, t => t.Text == "A.");
+        Assert.Contains(texts, t => t.Text == "B.");
+        Assert.Contains(texts, t => t.Text == "C.");
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_SuppressesMarkerWhenListStyleTypeIsNone()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <ul style="list-style-type: none;">
+                    <li>One</li>
+                </ul>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+            FontSize = 16f,
+        });
+
+        Assert.Empty(displayList.Commands.OfType<FillRectCommand>().Where(f => !f.Radii.IsZero && f.Rect.Width < 10f));
+        Assert.Contains(displayList.Commands, c => c is DrawTextCommand t && t.Text == "One");
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_NestedListsNumberIndependently()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <ol>
+                    <li>a
+                        <ol>
+                            <li>nested</li>
+                        </ol>
+                    </li>
+                    <li>b</li>
+                </ol>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+            FontSize = 16f,
+        });
+
+        var texts = displayList.Commands.OfType<DrawTextCommand>().Select(t => t.Text).ToArray();
+
+        // Two "1." markers: the outer list's first item and the (independently-numbered) nested
+        // list's own first item. The outer list's second item is "2.", unaffected by nesting.
+        Assert.Equal(2, texts.Count(t => t == "1."));
+        Assert.Contains("2.", texts);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ListStylePositionInsideStartsMarkerAtContentEdge()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <ul style="list-style-position: inside;">
+                    <li>One</li>
+                </ul>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+            FontSize = 16f,
+        });
+
+        var marker = displayList.Commands.OfType<FillRectCommand>().Single(f => !f.Radii.IsZero && f.Rect.Width < 10f);
+        var text = displayList.Commands.OfType<DrawTextCommand>().Single(t => t.Text == "One");
+
+        // "inside" starts the marker at the li's own content edge and pushes the text to make
+        // room for it, rather than placing the marker in the gutter to the left of that edge.
+        Assert.True(text.X > marker.Rect.X);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_DoesNotClipWhenOverflowIsVisible()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:50px; height:20px;"><p>Hi</p></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        Assert.Empty(displayList.Commands.OfType<PushClipCommand>());
+        Assert.Empty(displayList.Commands.OfType<PopClipCommand>());
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_PushesClipToPaddingBoxWhenOverflowHidden()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:100px; height:50px; border:5px solid black; padding:3px; overflow:hidden;"><p>Hi</p></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var push = Assert.Single(displayList.Commands.OfType<PushClipCommand>());
+        Assert.Single(displayList.Commands.OfType<PopClipCommand>());
+
+        // The border box is 100 + 2*5 (border) + 2*3 (padding) = 116 wide; the clip region is the
+        // padding box, which excludes the border but includes the padding: border box minus the
+        // 5px border on each side.
+        Assert.Equal(5f, push.Rect.X);
+        Assert.Equal(5f, push.Rect.Y);
+        Assert.Equal(106f, push.Rect.Width);
+        Assert.Equal(56f, push.Rect.Height);
+    }
+
+    [Theory]
+    [InlineData("scroll")]
+    [InlineData("auto")]
+    [InlineData("hidden")]
+    public async Task BuildDisplayList_ClipsForScrollAutoAndHiddenOverflow(string overflowValue)
+    {
+        var document = await ParseAsync($$"""
+            <html><body>
+                <div style="width:50px; height:20px; overflow:{{overflowValue}};"><p>Hi</p></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        Assert.Single(displayList.Commands.OfType<PushClipCommand>());
+        Assert.Single(displayList.Commands.OfType<PopClipCommand>());
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ClipsWhenEitherOverflowAxisIsHidden()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:50px; height:20px; overflow-x:hidden; overflow-y:visible;"><p>Hi</p></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        // This renderer clips with a single rectangle covering both axes together whenever either
+        // axis requests clipping - it does not clip one axis while leaving the other open.
+        Assert.Single(displayList.Commands.OfType<PushClipCommand>());
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ClipWrapsChildContentBetweenPushAndPop()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:50px; height:20px; overflow:hidden;"><p>Hi</p></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var commands = displayList.Commands.ToArray();
+        var pushIndex = Array.FindIndex(commands, c => c is PushClipCommand);
+        var popIndex = Array.FindIndex(commands, c => c is PopClipCommand);
+        var textIndex = Array.FindIndex(commands, c => c is DrawTextCommand t && t.Text == "Hi");
+
+        Assert.True(pushIndex >= 0);
+        Assert.True(popIndex > pushIndex);
+        Assert.True(textIndex > pushIndex && textIndex < popIndex);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ClipShapeFollowsBorderRadius()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:100px; height:50px; border-radius:12px; overflow:hidden;"><p>Hi</p></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var push = Assert.Single(displayList.Commands.OfType<PushClipCommand>());
+        Assert.False(push.Radii.IsZero);
+        Assert.Equal(12f, push.Radii.TopLeftX);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ClipsFlexContainerToOwnBounds()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="display:flex; width:80px; height:30px; overflow:hidden;">
+                    <div style="width:20px; height:20px;">Hi</div>
+                </div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        Assert.Single(displayList.Commands.OfType<PushClipCommand>());
+        Assert.Single(displayList.Commands.OfType<PopClipCommand>());
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ClipsGridContainerToOwnBounds()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="display:grid; grid-template-columns: 1fr; width:80px; height:30px; overflow:hidden;">
+                    <div style="width:20px; height:20px;">Hi</div>
+                </div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        Assert.Single(displayList.Commands.OfType<PushClipCommand>());
+        Assert.Single(displayList.Commands.OfType<PopClipCommand>());
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_AppliesRootScrollOffsetToPaintedContent()
+    {
+        var renderDevice = new DefaultRenderDevice
+        {
+            ViewPortWidth = 200,
+            ViewPortHeight = 80,
+            DeviceWidth = 200,
+            DeviceHeight = 80,
+            FontSize = 16,
+        };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html>
+              <head><style>html, body { margin: 0; padding: 0; }</style></head>
+              <body>
+                <div style="width:50px; height:300px; background-color:#ff0000;"></div>
+              </body>
+            </html>
+            """, configuration);
+
+        var renderer = new HtmlRenderer();
+        var unscrolled = renderer.BuildDisplayList(document, renderDevice);
+        var unscrolledFill = Assert.Single(unscrolled.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(255, 0, 0))));
+
+        document.Context.GetDomHarness();
+        document.DocumentElement.SetScrollTop(40);
+
+        var scrolled = renderer.BuildDisplayList(document, renderDevice);
+        var scrolledFill = Assert.Single(scrolled.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(255, 0, 0))));
+
+        Assert.Equal(unscrolledFill.Rect.Y - 40f, scrolledFill.Rect.Y);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ClampsRootScrollOffsetToScrollableExtent()
+    {
+        var renderDevice = new DefaultRenderDevice
+        {
+            ViewPortWidth = 200,
+            ViewPortHeight = 80,
+            DeviceWidth = 200,
+            DeviceHeight = 80,
+            FontSize = 16,
+        };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html>
+              <head><style>html, body { margin: 0; padding: 0; }</style></head>
+              <body>
+                <div style="width:50px; height:150px; background-color:#ff0000;"></div>
+              </body>
+            </html>
+            """, configuration);
+
+        document.Context.GetDomHarness();
+        document.DocumentElement.SetScrollTop(100_000);
+
+        var maxScrollTop = document.DocumentElement.GetScrollTop();
+        Assert.True(maxScrollTop > 0);
+        Assert.True(maxScrollTop < 100_000);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, renderDevice);
+        var fill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(255, 0, 0))));
+
+        // Clamped to the true scrollable extent, not the (much larger) value that was set.
+        Assert.Equal(-(float)maxScrollTop, fill.Rect.Y);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_WithoutHarness_IgnoresScrollAndRendersUnaffected()
+    {
+        // No IRenderDevice service is registered here, so no DOM harness can even exist for this
+        // context - confirms rendering is completely unaffected (and does not throw) for the
+        // overwhelmingly common case of a document that was never wired up for interactive use.
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:50px; height:20px; background-color:#00ff00;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+        });
+
+        var fill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(0, 255, 0))));
+        Assert.Equal(0f, fill.Rect.Y);
+    }
+
+    [Fact]
+    public async Task MousePosition_OverAnElementForcesItToMatchHover()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 100, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html><head><style>html, body { margin: 0; padding: 0; }</style></head><body>
+                <div id="target" style="width:60px; height:40px;"></div>
+            </body></html>
+            """, configuration);
+        var target = document.GetElementById("target")!;
+        var harness = document.Context.GetDomHarness();
+
+        Assert.False(target.Matches(":hover"));
+
+        harness.MousePosition = (30, 20);
+
+        Assert.True(target.Matches(":hover"));
+
+        harness.MousePosition = (150, 80);
+
+        Assert.False(target.Matches(":hover"));
+    }
+
+    [Fact]
+    public async Task MousePosition_OverANestedElementForcesHoverOnTheWholeAncestorChain()
+    {
+        // A real pointer device makes every ancestor of the physically-hovered element match
+        // :hover too (`.card:hover .title` relies on this) - not just the innermost hit target.
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 100, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html><head><style>html, body { margin: 0; padding: 0; }</style></head><body>
+                <div id="parent" style="width:80px; height:60px;">
+                    <span id="child" style="display:inline-block; width:30px; height:20px;"></span>
+                </div>
+                <div id="sibling" style="width:80px; height:20px;"></div>
+            </body></html>
+            """, configuration);
+        var parent = document.GetElementById("parent")!;
+        var child = document.GetElementById("child")!;
+        var sibling = document.GetElementById("sibling")!;
+        var harness = document.Context.GetDomHarness();
+
+        harness.MousePosition = (10, 10);
+
+        Assert.True(child.Matches(":hover"));
+        Assert.True(parent.Matches(":hover"));
+        Assert.False(sibling.Matches(":hover"));
+    }
+
+    [Fact]
+    public async Task MousePosition_ChangingHoverTargetClearsThePreviousForcedChain()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 100, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html><head><style>html, body { margin: 0; padding: 0; }</style></head><body>
+                <div id="first" style="width:60px; height:40px;"></div>
+                <div id="second" style="width:60px; height:40px;"></div>
+            </body></html>
+            """, configuration);
+        var first = document.GetElementById("first")!;
+        var second = document.GetElementById("second")!;
+        var harness = document.Context.GetDomHarness();
+
+        harness.MousePosition = (30, 20);
+        Assert.True(first.Matches(":hover"));
+
+        harness.MousePosition = (30, 60);
+
+        Assert.False(first.Matches(":hover"));
+        Assert.True(second.Matches(":hover"));
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_HoverStateChangesRenderedBackgroundColor()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 100, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html><head><style>
+                html, body { margin: 0; padding: 0; }
+                #target { background-color: rgb(0, 0, 255); }
+                #target:hover { background-color: rgb(255, 0, 0); }
+            </style></head><body>
+                <div id="target" style="width:60px; height:40px;"></div>
+            </body></html>
+            """, configuration);
+        var harness = document.Context.GetDomHarness();
+        var renderer = new HtmlRenderer();
+
+        var restingDisplayList = renderer.BuildDisplayList(document, renderDevice);
+        Assert.Single(restingDisplayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(0, 0, 255))));
+
+        harness.MousePosition = (30, 20);
+
+        var hoveredDisplayList = renderer.BuildDisplayList(document, renderDevice);
+        Assert.Single(hoveredDisplayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(255, 0, 0))));
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_HoverTransitionInterpolatesBackgroundColorOverTime()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 100, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html><head><style>
+                html, body { margin: 0; padding: 0; }
+                #target { background-color: rgb(0, 0, 255); transition: background-color 1s linear; }
+                #target:hover { background-color: rgb(255, 0, 0); }
+            </style></head><body>
+                <div id="target" style="width:60px; height:40px;"></div>
+            </body></html>
+            """, configuration);
+        var harness = document.Context.GetDomHarness();
+        var renderer = new HtmlRenderer();
+
+        RenderColor CurrentColor()
+        {
+            var displayList = renderer.BuildDisplayList(document, renderDevice);
+            var fill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Rect.Width == 60f && f.Rect.Height == 40f));
+            return fill.Color;
+        }
+
+        harness.MousePosition = (30, 20);
+
+        // The very first frame after hover starts still shows the resting color - the transition
+        // has not advanced yet (no AdvanceTime call has happened), matching how a real transition
+        // never jumps straight to its end value on the same frame it started.
+        Assert.Equal(new RenderColor(0, 0, 255), CurrentColor());
+
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(500));
+        Assert.Equal(new RenderColor(128, 0, 128), CurrentColor());
+
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(500));
+        Assert.Equal(new RenderColor(255, 0, 0), CurrentColor());
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_TransitionReversesSmoothlyFromItsCurrentMidFlightValue()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 100, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html><head><style>
+                html, body { margin: 0; padding: 0; }
+                #target { background-color: rgb(0, 0, 255); transition: background-color 1s linear; }
+                #target:hover { background-color: rgb(255, 0, 0); }
+            </style></head><body>
+                <div id="target" style="width:60px; height:40px;"></div>
+                <div id="elsewhere" style="width:60px; height:40px;"></div>
+            </body></html>
+            """, configuration);
+        var harness = document.Context.GetDomHarness();
+        var renderer = new HtmlRenderer();
+
+        RenderColor CurrentColor()
+        {
+            var displayList = renderer.BuildDisplayList(document, renderDevice);
+            var fill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Rect.Width == 60f && f.Rect.Height == 40f && f.Rect.Y < 40f));
+            return fill.Color;
+        }
+
+        harness.MousePosition = (30, 20);
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(500));
+        Assert.Equal(new RenderColor(128, 0, 128), CurrentColor());
+
+        // Move away mid-flight - the reverse transition (back toward blue) must start from the
+        // purple currently on screen, not jump back to blue and re-fade, and not jump straight to
+        // blue either.
+        harness.MousePosition = (30, 60);
+        var justReversed = CurrentColor();
+        Assert.Equal(new RenderColor(128, 0, 128), justReversed);
+
+        // The reversed transition restarts with its own full declared duration from the value
+        // currently on screen (purple), rather than "picking up" some remaining fraction of the
+        // original 1s - so it takes a full second from here, not just the 500ms that would have
+        // finished the original hover-in transition.
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(1000));
+        Assert.Equal(new RenderColor(0, 0, 255), CurrentColor());
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_TransitionDelayPostponesTheStartOfInterpolation()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 100, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html><head><style>
+                html, body { margin: 0; padding: 0; }
+                #target { background-color: rgb(0, 0, 255); transition: background-color 1s linear 0.5s; }
+                #target:hover { background-color: rgb(255, 0, 0); }
+            </style></head><body>
+                <div id="target" style="width:60px; height:40px;"></div>
+            </body></html>
+            """, configuration);
+        var harness = document.Context.GetDomHarness();
+        var renderer = new HtmlRenderer();
+
+        RenderColor CurrentColor()
+        {
+            var displayList = renderer.BuildDisplayList(document, renderDevice);
+            var fill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Rect.Width == 60f && f.Rect.Height == 40f));
+            return fill.Color;
+        }
+
+        harness.MousePosition = (30, 20);
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(400));
+
+        // Still within the 500ms delay - no interpolation has started yet.
+        Assert.Equal(new RenderColor(0, 0, 255), CurrentColor());
+
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(600));
+
+        // 1000ms elapsed total, 500ms of which was delay - 500ms into the 1000ms duration = halfway.
+        Assert.Equal(new RenderColor(128, 0, 128), CurrentColor());
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_NoTransitionDeclaredJumpsStraightToTheHoverStyle()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 100, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html><head><style>
+                html, body { margin: 0; padding: 0; }
+                #target { background-color: rgb(0, 0, 255); }
+                #target:hover { background-color: rgb(255, 0, 0); }
+            </style></head><body>
+                <div id="target" style="width:60px; height:40px;"></div>
+            </body></html>
+            """, configuration);
+        var harness = document.Context.GetDomHarness();
+        var renderer = new HtmlRenderer();
+
+        harness.MousePosition = (30, 20);
+
+        var displayList = renderer.BuildDisplayList(document, renderDevice);
+        var fill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Rect.Width == 60f && f.Rect.Height == 40f));
+        Assert.Equal(new RenderColor(255, 0, 0), fill.Color);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_HoverTransitionInterpolatesWidthAsANumericLength()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 100, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html><head><style>
+                html, body { margin: 0; padding: 0; }
+                #target { width: 40px; height: 40px; background-color: rgb(0, 0, 255); transition: width 1s linear; }
+                #target:hover { width: 80px; }
+            </style></head><body>
+                <div id="target"></div>
+            </body></html>
+            """, configuration);
+        var harness = document.Context.GetDomHarness();
+        var renderer = new HtmlRenderer();
+
+        float CurrentWidth()
+        {
+            var displayList = renderer.BuildDisplayList(document, renderDevice);
+            var fill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(0, 0, 255))));
+            return fill.Rect.Width;
+        }
+
+        Assert.Equal(40f, CurrentWidth());
+
+        harness.MousePosition = (30, 20);
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(500));
+
+        Assert.Equal(60f, CurrentWidth(), precision: 2);
+
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(500));
+
+        Assert.Equal(80f, CurrentWidth(), precision: 2);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_AnimationInterpolatesBetweenKeyframesOverTime()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 100, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html><head><style>
+                html, body { margin: 0; padding: 0; }
+                @keyframes fade {
+                    0% { opacity: 0; }
+                    100% { opacity: 1; }
+                }
+                #target { width: 40px; height: 40px; background-color: rgb(0, 0, 255); animation: fade 2s linear; }
+            </style></head><body>
+                <div id="target"></div>
+            </body></html>
+            """, configuration);
+        var harness = document.Context.GetDomHarness();
+        var renderer = new HtmlRenderer();
+
+        float CurrentAlpha()
+        {
+            var displayList = renderer.BuildDisplayList(document, renderDevice);
+            var push = displayList.Commands.OfType<PushOpacityCommand>().SingleOrDefault();
+            return push?.Alpha ?? 1f;
+        }
+
+        // Registering the harness (via GetDomHarness) starts the virtual clock at 0 - the animation
+        // begins immediately, matching how a real animation starts playing on page load.
+        Assert.Equal(0f, CurrentAlpha(), precision: 2);
+
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(1000));
+        Assert.Equal(0.5f, CurrentAlpha(), precision: 2);
+
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(1000));
+        Assert.Equal(1f, CurrentAlpha(), precision: 2);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_InfiniteAnimationLoopsBackToTheStart()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 100, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html><head><style>
+                html, body { margin: 0; padding: 0; }
+                @keyframes fade {
+                    0% { opacity: 0; }
+                    100% { opacity: 1; }
+                }
+                #target { width: 40px; height: 40px; background-color: rgb(0, 0, 255); animation: fade 2s linear infinite; }
+            </style></head><body>
+                <div id="target"></div>
+            </body></html>
+            """, configuration);
+        var harness = document.Context.GetDomHarness();
+        var renderer = new HtmlRenderer();
+
+        float CurrentAlpha()
+        {
+            var displayList = renderer.BuildDisplayList(document, renderDevice);
+            var push = displayList.Commands.OfType<PushOpacityCommand>().SingleOrDefault();
+            return push?.Alpha ?? 1f;
+        }
+
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(2500));
+
+        // 2500ms into a 2000ms duration is 500ms into the *second* iteration (25% through it),
+        // not "past the end" - infinite iteration count means it just keeps looping.
+        Assert.Equal(0.25f, CurrentAlpha(), precision: 2);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_AlternateDirectionReversesOnOddIterations()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 100, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html><head><style>
+                html, body { margin: 0; padding: 0; }
+                @keyframes fade {
+                    0% { opacity: 0; }
+                    100% { opacity: 1; }
+                }
+                #target { width: 40px; height: 40px; background-color: rgb(0, 0, 255); animation: fade 2s linear infinite alternate; }
+            </style></head><body>
+                <div id="target"></div>
+            </body></html>
+            """, configuration);
+        var harness = document.Context.GetDomHarness();
+        var renderer = new HtmlRenderer();
+
+        float CurrentAlpha()
+        {
+            var displayList = renderer.BuildDisplayList(document, renderDevice);
+            var push = displayList.Commands.OfType<PushOpacityCommand>().SingleOrDefault();
+            return push?.Alpha ?? 1f;
+        }
+
+        // 2500ms = 500ms into the second iteration (index 1, odd) - alternate makes odd iterations
+        // run backward, so this should read as 75% (1 - 0.25), not 25% like the "normal" test above.
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(2500));
+        Assert.Equal(0.75f, CurrentAlpha(), precision: 2);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_AnimationDelayPostponesTheStartOfInterpolation()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 100, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html><head><style>
+                html, body { margin: 0; padding: 0; }
+                @keyframes fade {
+                    0% { opacity: 0; }
+                    100% { opacity: 1; }
+                }
+                #target { width: 40px; height: 40px; background-color: rgb(0, 0, 255); animation: fade 2s linear 1s; }
+            </style></head><body>
+                <div id="target"></div>
+            </body></html>
+            """, configuration);
+        var harness = document.Context.GetDomHarness();
+        var renderer = new HtmlRenderer();
+
+        float CurrentAlpha()
+        {
+            var displayList = renderer.BuildDisplayList(document, renderDevice);
+            var push = displayList.Commands.OfType<PushOpacityCommand>().SingleOrDefault();
+            return push?.Alpha ?? 1f;
+        }
+
+        // Still within the 1s delay - fill-mode defaults to "none", so no override applies yet and
+        // the base opacity (1, fully opaque - CSS's own initial value) shows instead of 0%'s value.
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(500));
+        Assert.Equal(1f, CurrentAlpha(), precision: 2);
+
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(1000));
+        Assert.Equal(0.25f, CurrentAlpha(), precision: 2);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_FillModeForwardsFreezesAtTheEndingKeyframeAfterCompletion()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 100, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html><head><style>
+                html, body { margin: 0; padding: 0; }
+                @keyframes fade {
+                    0% { opacity: 0; }
+                    100% { opacity: 0.3; }
+                }
+                #target { width: 40px; height: 40px; background-color: rgb(0, 0, 255); animation: fade 1s linear forwards; }
+            </style></head><body>
+                <div id="target"></div>
+            </body></html>
+            """, configuration);
+        var harness = document.Context.GetDomHarness();
+        var renderer = new HtmlRenderer();
+
+        float CurrentAlpha()
+        {
+            var displayList = renderer.BuildDisplayList(document, renderDevice);
+            var push = displayList.Commands.OfType<PushOpacityCommand>().SingleOrDefault();
+            return push?.Alpha ?? 1f;
+        }
+
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(2000));
+
+        // The animation ended after 1s (iteration-count defaults to 1), but fill-mode: forwards
+        // keeps it frozen at the 100% keyframe's value (0.3) instead of reverting to the base
+        // opacity (1) the way the no-fill-mode case would.
+        Assert.Equal(0.3f, CurrentAlpha(), precision: 2);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_AnimationEndsAndRevertsToNaturalValueWithoutFillModeForwards()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 100, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html><head><style>
+                html, body { margin: 0; padding: 0; }
+                @keyframes fade {
+                    0% { opacity: 0; }
+                    100% { opacity: 0.3; }
+                }
+                #target { width: 40px; height: 40px; background-color: rgb(0, 0, 255); animation: fade 1s linear; }
+            </style></head><body>
+                <div id="target"></div>
+            </body></html>
+            """, configuration);
+        var harness = document.Context.GetDomHarness();
+        var renderer = new HtmlRenderer();
+
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(2000));
+
+        var displayList = renderer.BuildDisplayList(document, renderDevice);
+        var push = displayList.Commands.OfType<PushOpacityCommand>().SingleOrDefault();
+        Assert.Null(push);
+    }
+
+    [Theory]
+    [InlineData("text")]
+    [InlineData("number")]
+    [InlineData("url")]
+    [InlineData("email")]
+    [InlineData("search")]
+    [InlineData("tel")]
+    [InlineData("date")]
+    public async Task BuildDisplayList_TextLikeInputGetsDefaultChromeAndShowsItsValue(string type)
+    {
+        var document = await ParseAsync($"""<html><body><input type="{type}" value="Hello" /></body></html>""");
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        // Default UA-like chrome: a white background box, sized to the built-in default content
+        // width (150px) plus the default 4px*2 padding and 1px*2 border (border-box width 160),
+        // since none was authored, and a plain 1px gray border (four straight edges, no
+        // border-radius, so PaintBorder falls back to four separate FillRectCommands). Filtered to
+        // width 160 because the page's own default background is also a full-viewport white fill.
+        var background = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(255, 255, 255)) && f.Rect.Width == 160f));
+
+        var borderEdges = displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(118, 118, 118))).ToList();
+        Assert.NotEmpty(borderEdges);
+
+        var valueText = Assert.Single(displayList.Commands.OfType<DrawTextCommand>().Where(t => t.Text == "Hello"));
+        // Left-aligned at the content box's own left edge (border + padding in from the box), not
+        // centered - matching how a browser shows typed input text.
+        Assert.Equal(background.Rect.X + 1f + 4f, valueText.X, precision: 3);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_TextLikeInputCentersItsValueVerticallyWhenTallerThanOneLine()
+    {
+        // An explicit height taller than one line must still center the value vertically rather
+        // than hugging the bottom. Centering is done on the text's own real visual ink (an
+        // ascent/descent approximation of the bundled sans-serif font - see
+        // FormControlTextAscentRatio/DescentRatio), not on the taller CSS line-height box: the bug
+        // this guards against centered on the line-height box instead, which - because a
+        // line-height box always has room "below the ink" for descenders/leading that a caseless
+        // value like "Hi" never uses - left a visibly larger gap below the text than above it.
+        var document = await ParseAsync("""
+            <html><body>
+                <input type="text" value="Hi" style="height:60px;" />
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+            FontSize = 20f,
+        });
+
+        var background = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(255, 255, 255)) && f.Rect.Width < 300f));
+        var valueText = Assert.Single(displayList.Commands.OfType<DrawTextCommand>().Where(t => t.Text == "Hi"));
+
+        // border-top-width 1px + default padding-top 2px, and content height is the authored 60px.
+        var contentTop = background.Rect.Y + 1f + 2f;
+        // Mirrors FormControlTextAscentRatio/DescentRatio in HtmlRenderer.cs.
+        const float AscentRatio = 0.928f;
+        const float DescentRatio = 0.236f;
+        var topGap = (valueText.Y - (20f * AscentRatio)) - contentTop;
+        var bottomGap = (contentTop + 60f) - (valueText.Y + (20f * DescentRatio));
+        Assert.Equal(topGap, bottomGap, precision: 3);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_PasswordInputMasksItsValue()
+    {
+        var document = await ParseAsync("""<html><body><input type="password" value="secret" /></body></html>""");
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        Assert.DoesNotContain(displayList.Commands, c => c is DrawTextCommand t && t.Text.Contains("secret"));
+        var masked = Assert.Single(displayList.Commands.OfType<DrawTextCommand>());
+        Assert.Equal(new string('•', 6), masked.Text);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_TextInputDefaultsCanBeOverriddenByAuthorCss()
+    {
+        // Every one of the synthesized defaults - border color/width, background, width - has an
+        // authored equivalent here, and each authored value must win exactly like it does for any
+        // other element, proving the defaults are only gap-fillers and not a fixed native look.
+        var document = await ParseAsync("""
+            <html><body>
+                <input type="text" value="Hi" style="width:80px; background-color:#ff0000; border: 3px solid #0000ff;" />
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        var background = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(255, 0, 0))));
+        // Border-box width, not the authored content-width in isolation: default content-box
+        // sizing (unchanged here) adds the border (3px * 2) and the still-default padding (4px * 2,
+        // since only border/background/width were overridden) on top of the authored 80px content
+        // width - 80 + 6 + 8 = 94, the same box-model arithmetic a real browser would apply.
+        Assert.Equal(94f, background.Rect.Width);
+
+        Assert.DoesNotContain(displayList.Commands, c => c is FillRectCommand f && f.Color.Equals(new RenderColor(255, 255, 255)) && f.Rect.Width < 300f);
+        Assert.DoesNotContain(displayList.Commands, c => c is FillRectCommand f && f.Color.Equals(new RenderColor(118, 118, 118)));
+
+        var borderEdges = displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(0, 0, 255))).ToList();
+        Assert.NotEmpty(borderEdges);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_UnfocusedTextInputPaintsNoCaret()
+    {
+        var document = await ParseAsync("""<html><body><input type="text" value="Hi" /></body></html>""");
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        // The caret is 1.5px wide (FormControlCaretWidth) - narrow enough that no other form
+        // control fill (background, border edge, checkbox/radio accent) could plausibly collide
+        // with it, so filtering on that width alone is enough to isolate it.
+        Assert.DoesNotContain(displayList.Commands, c => c is FillRectCommand f && f.Rect.Width == 1.5f);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_FocusedTextInputPaintsAnOpaqueCaretAfterItsValue()
+    {
+        var document = await ParseAsync("""<html><body><input id="target" type="text" value="Hi" /></body></html>""");
+        var target = (IHtmlElement)document.GetElementById("target")!;
+        target.DoFocus();
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        var valueText = Assert.Single(displayList.Commands.OfType<DrawTextCommand>().Where(t => t.Text == "Hi"));
+        var background = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(255, 255, 255)) && f.Rect.Width == 160f));
+
+        // Without a registered IDomHarness there is no virtual clock to fade the caret against, so
+        // it paints fully opaque instead of frozen mid-fade - the same fallback CSS `transition`/
+        // `animation` use when no harness exists.
+        var caret = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Rect.Width == 1.5f));
+        Assert.Equal(255, caret.Color.A);
+        // Right after the typed value's own left edge, and still inside the input's own box - not
+        // asserting an exact pixel offset (which would require duplicating this renderer's own text
+        // measurement in the test), just that it tracks the end of the text rather than always
+        // sitting at the content edge.
+        Assert.True(caret.Rect.X > valueText.X);
+        Assert.True(caret.Rect.X < background.Rect.X + background.Rect.Width);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_FocusedEmptyTextInputPaintsCaretAtTheContentEdge()
+    {
+        var document = await ParseAsync("""<html><body><input id="target" type="text" /></body></html>""");
+        var target = (IHtmlElement)document.GetElementById("target")!;
+        target.DoFocus();
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        var background = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(255, 255, 255)) && f.Rect.Width == 160f));
+        var caret = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Rect.Width == 1.5f));
+
+        // border-left-width 1px + default padding-left 4px, the same content-edge math the value
+        // text itself is positioned at (see BuildDisplayList_TextLikeInputGetsDefaultChromeAndShowsItsValue).
+        Assert.Equal(background.Rect.X + 1f + 4f, caret.Rect.X, precision: 3);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_FocusedTextInputCaretFadesWithTheVirtualClock()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 300, ViewPortHeight = 100, FontSize = 16f };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""<html><body><input id="target" type="text" value="Hi" /></body></html>""", configuration);
+        var target = (IHtmlElement)document.GetElementById("target")!;
+        target.DoFocus();
+        var harness = document.Context.GetDomHarness();
+        var renderer = new HtmlRenderer();
+
+        int CurrentCaretAlpha()
+        {
+            var displayList = renderer.BuildDisplayList(document, renderDevice);
+            return Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Rect.Width == 1.5f)).Color.A;
+        }
+
+        // A smooth cosine "breathe" over a 1000ms period (FormControlCaretBlinkPeriodMs): fully
+        // visible at t=0, fully invisible at the half-period mark, back to fully visible a full
+        // period later - not a hard on/off blink, so the quarter-period sample lands at a genuine
+        // in-between alpha rather than either extreme.
+        Assert.Equal(255, CurrentCaretAlpha());
+
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(500));
+        Assert.Equal(0, CurrentCaretAlpha());
+
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(250));
+        Assert.InRange(CurrentCaretAlpha(), 100, 155);
+
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(250));
+        Assert.Equal(255, CurrentCaretAlpha());
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_UncheckedCheckboxPaintsOnlyItsBoxNoFill()
+    {
+        var document = await ParseAsync("""<html><body><input type="checkbox" /></body></html>""");
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 100,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        Assert.DoesNotContain(displayList.Commands, c => c is FillRectCommand f && f.Color.Equals(FormControlAccentColorForTests));
+    }
+
+    [Theory]
+    [InlineData("checkbox")]
+    [InlineData("radio")]
+    public async Task BuildDisplayList_AdjacentCheckboxesOrRadiosGetADefaultGapBetweenThem(string type)
+    {
+        // Real UA stylesheets give a checkbox/radio a small default margin that this renderer's
+        // own UA defaults previously omitted entirely - two controls written back-to-back with no
+        // whitespace between their tags (as real forms commonly do, and as this exact markup does)
+        // rendered flush against each other with no visible gap at all. Wrapped in a <div> so both
+        // controls flow through the same parent's ordinary inline-merging child layout, rather than
+        // being laid out as top-level document children (a separate, pre-existing renderer
+        // limitation unrelated to this margin default: direct children of <body> do not currently
+        // merge onto shared lines the way a wrapping block element's own children do).
+        var document = await ParseAsync($"""<html><body><div><input type="{type}" /><input type="{type}" /></div></body></html>""");
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        // Each control's own default white background fill covers its whole border box in one
+        // rect (unlike the border, which for a checkbox is four separate straight-edge strips) -
+        // the simplest, unambiguous way to identify each control's own horizontal extent.
+        var backgrounds = displayList.Commands.OfType<FillRectCommand>()
+            .Where(f => f.Color.Equals(new RenderColor(255, 255, 255)) && f.Rect.Width < 300f)
+            .OrderBy(f => f.Rect.X)
+            .ToList();
+
+        Assert.Equal(2, backgrounds.Count);
+        var firstBoxRight = backgrounds[0].Rect.X + backgrounds[0].Rect.Width;
+        var secondBoxLeft = backgrounds[1].Rect.X;
+        Assert.True(secondBoxLeft - firstBoxRight > 0f, $"expected a gap between adjacent {type} controls, got firstBoxRight={firstBoxRight}, secondBoxLeft={secondBoxLeft}");
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_CheckedCheckboxPaintsAccentFillInsideItsBox()
+    {
+        var document = await ParseAsync("""<html><body><input type="checkbox" checked /></body></html>""");
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 100,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        var fill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(FormControlAccentColorForTests)));
+        // A perfectly square fill, inset within the (also square, default-sized) checkbox box.
+        Assert.Equal(fill.Rect.Width, fill.Rect.Height, precision: 3);
+        Assert.True(fill.Rect.Width > 0f);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_CheckedCheckboxFillStaysCenteredWhenBoxIsOverriddenAsymmetrically()
+    {
+        // Width and height default to the same font-relative size, so the fill's inset used to be
+        // computed off contentWidth alone and simply reused for both axes - correct only as long as
+        // the box stays square. Overriding height independently of width must still center the fill
+        // on both axes rather than leaving it flush with the top (or bottom) edge.
+        var document = await ParseAsync("""
+            <html><body><input type="checkbox" checked style="width:20px; height:40px;" /></body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 100,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        var background = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(255, 255, 255)) && f.Rect.Width < 100f));
+        var fill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(FormControlAccentColorForTests)));
+
+        var topGap = fill.Rect.Y - background.Rect.Y;
+        var bottomGap = (background.Rect.Y + background.Rect.Height) - (fill.Rect.Y + fill.Rect.Height);
+        Assert.Equal(topGap, bottomGap, precision: 3);
+
+        var leftGap = fill.Rect.X - background.Rect.X;
+        var rightGap = (background.Rect.X + background.Rect.Width) - (fill.Rect.X + fill.Rect.Width);
+        Assert.Equal(leftGap, rightGap, precision: 3);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_CheckedRadioPaintsCircularAccentFillAndCircularBorder()
+    {
+        var document = await ParseAsync("""<html><body><input type="radio" checked /></body></html>""");
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 100,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        // The box's own outline is circular (default border-radius: 50%, uniform 1px width) -
+        // painted as a single StrokeRoundedRectCommand rather than four straight edges.
+        var strokedBorder = Assert.Single(displayList.Commands.OfType<StrokeRoundedRectCommand>());
+        Assert.True(strokedBorder.Radii.TopLeftX > 0f);
+
+        var fill = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(FormControlAccentColorForTests)));
+        Assert.True(fill.Radii.TopLeftX > 0f);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ColorInputPaintsSwatchFromItsValue()
+    {
+        var document = await ParseAsync("""<html><body><input type="color" value="#ff8800" /></body></html>""");
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 100,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(255, 136, 0))));
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ColorInputSwatchFillsEntireContentBoxWhenTaller()
+    {
+        // The swatch previously used a fixed line-height-tall rect regardless of the box's actual
+        // content height, which for an explicitly taller box left it hugging the top with unfilled
+        // space below it - it must fill the whole content box instead, so it is centered (trivially,
+        // by filling everything) no matter how tall the box ends up.
+        var document = await ParseAsync("""
+            <html><body>
+                <input type="color" value="#ff8800" style="height:40px;" />
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 200,
+            FontSize = 16f,
+        });
+
+        var swatch = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(255, 136, 0))));
+        Assert.Equal(40f, swatch.Rect.Height, precision: 3);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_SelectShowsOnlyItsSelectedOptionText()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <select>
+                    <option>First</option>
+                    <option selected>Second</option>
+                    <option>Third</option>
+                </select>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        // Only the selected option's text is ever drawn - a <select> never lays out every <option>
+        // stacked underneath it the way a plain container element would.
+        var texts = displayList.Commands.OfType<DrawTextCommand>().Select(t => t.Text).ToList();
+        Assert.Contains("Second", texts);
+        Assert.DoesNotContain("First", texts);
+        Assert.DoesNotContain("Third", texts);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_SelectShrinksToFitItsLabelAndShowsItLeftAlignedNextToTheArrow()
+    {
+        // A native <select> is left-aligned and shrink-to-fit around its own selected option (plus
+        // room for the dropdown arrow), not centered inside a fixed-width box the way an early,
+        // incorrect implementation (reusing the <button>-centering branch) rendered it.
+        var document = await ParseAsync("""
+            <html><body>
+                <select>
+                    <option>First</option>
+                    <option selected>Second</option>
+                </select>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        // Button-like gray background, not the white a text-like input gets.
+        var background = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(232, 232, 232)) && f.Rect.Width < 300f));
+        var label = Assert.Single(displayList.Commands.OfType<DrawTextCommand>().Where(t => t.Text == "Second"));
+        var arrow = Assert.Single(displayList.Commands.OfType<DrawTextCommand>().Where(t => t.Text == "⌄"));
+
+        // Left-aligned at the content box's own left edge (border + padding in from the box), not
+        // centered.
+        Assert.Equal(background.Rect.X + 1f + 4f, label.X, precision: 3);
+
+        // Narrower than a text-like input's fixed 150px default width - shrunk to fit "Second" plus
+        // the arrow - and the arrow itself sits shortly after the label, not flush with a far-away
+        // right edge of an unnecessarily wide box.
+        Assert.True(background.Rect.Width < 150f);
+        Assert.True(arrow.X > label.X);
+        Assert.True(arrow.X < background.Rect.X + background.Rect.Width);
+
+        // The arrow glyph's own ink sits much closer to the baseline than ordinary text does (it
+        // is a short symbol, not a full-height letter run), so painting it on the exact same
+        // baseline as the label visibly pushed it toward the bottom of the box - a real, reported
+        // bug. Its baseline must sit strictly above the label's own to compensate.
+        Assert.True(arrow.Y < label.Y);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_SelectWithNoSelectedOptionShowsTheFirstOne()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <select>
+                    <option>Alpha</option>
+                    <option>Beta</option>
+                </select>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        var texts = displayList.Commands.OfType<DrawTextCommand>().Select(t => t.Text).ToList();
+        Assert.Contains("Alpha", texts);
+        Assert.DoesNotContain("Beta", texts);
+    }
+
+    [Theory]
+    [InlineData("<button>Click Me</button>", "Click Me")]
+    [InlineData("""<input type="submit" value="Send" />""", "Send")]
+    [InlineData("""<input type="submit" />""", "Submit")]
+    [InlineData("""<input type="reset" />""", "Reset")]
+    public async Task BuildDisplayList_ButtonLikeControlShowsItsLabelShrunkToFitWithDefaultChrome(string markup, string expectedLabel)
+    {
+        var document = await ParseAsync($"<html><body>{markup}</body></html>");
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        var label = Assert.Single(displayList.Commands.OfType<DrawTextCommand>().Where(t => t.Text == expectedLabel));
+
+        var background = Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(232, 232, 232))));
+        // Shrink-to-fit: the button's own box is sized to its measured label, not a fixed default
+        // width the way a text-like input is - so it must be narrower than that 150px default while
+        // still being wide enough to actually contain the label text just drawn.
+        Assert.True(background.Rect.Width < 150f);
+        Assert.True(background.Rect.Width > 0f);
+        Assert.True(label.X >= background.Rect.X);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_TextAreaGetsDefaultChromeAndStillFlowsItsOwnTextContent()
+    {
+        var document = await ParseAsync("""<html><body><textarea>hello world</textarea></body></html>""");
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(255, 255, 255)) && f.Rect.Width == 160f));
+        // A textarea's own child text node still flows through the ordinary block child-layout
+        // path (unlike <select>/<button>, it is never excluded from it) - this is what actually
+        // paints its content, not any bespoke form-control content painting.
+        Assert.Contains(displayList.Commands, c => c is DrawTextCommand t && t.Text == "hello world");
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_HiddenInputPaintsNothingAtAll()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <input type="hidden" value="secret-token" />
+                <div style="width:10px; height:10px; background-color:#00ff00;"></div>
+            </body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 300,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        Assert.DoesNotContain(displayList.Commands, c => c is DrawTextCommand t && t.Text.Contains("secret-token"));
+        // Filtered to width 150 (the form-control default) rather than a bare "no white fill at
+        // all", since the page's own default background is also a full-viewport white fill.
+        Assert.DoesNotContain(displayList.Commands, c => c is FillRectCommand f && f.Color.Equals(new RenderColor(255, 255, 255)) && f.Rect.Width == 160f);
+        // The visible sibling still renders normally - the hidden input contributes no box at all
+        // to disrupt the layout around it, not just an invisible one.
+        Assert.Single(displayList.Commands.OfType<FillRectCommand>().Where(f => f.Color.Equals(new RenderColor(0, 255, 0))));
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_NoTransformProducesNoPushOrPopTransformCommands()
+    {
+        var document = await ParseAsync("""<html><body><div style="width:10px;height:10px;"></div></body></html>""");
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 100, ViewPortHeight = 100 });
+        Assert.DoesNotContain(displayList.Commands, c => c is PushTransformCommand or PopTransformCommand);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_TransformNoneProducesNoPushOrPopTransformCommands()
+    {
+        var document = await ParseAsync("""<html><body><div style="width:10px;height:10px; transform:none;"></div></body></html>""");
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 100, ViewPortHeight = 100 });
+        Assert.DoesNotContain(displayList.Commands, c => c is PushTransformCommand or PopTransformCommand);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_TranslateTransformProducesExactPixelOffsetRegardlessOfOrigin()
+    {
+        // Pure translation is origin-invariant - the origin shift cancels out exactly for a pure
+        // translate - so this holds for the default center origin too, not just an explicit one.
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:40px; height:20px; transform: translate(15px, 8px);"></div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        var push = Assert.Single(displayList.Commands.OfType<PushTransformCommand>());
+        Assert.Equal(new RenderTransform2D(1f, 0f, 0f, 1f, 15f, 8f), push.Transform);
+        Assert.Single(displayList.Commands.OfType<PopTransformCommand>());
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_PercentageTranslateResolvesAgainstOwnBorderBox()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:40px; height:20px; transform: translate(50%, 50%);"></div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        var push = Assert.Single(displayList.Commands.OfType<PushTransformCommand>());
+        Assert.Equal(20f, push.Transform.E, precision: 3);
+        Assert.Equal(10f, push.Transform.F, precision: 3);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_RotateTransformProducesCorrectMatrixAroundDefaultCenter()
+    {
+        // AngleSharp.Css's own rotate() ComputeMatrix was previously confirmed broken (always NaN)
+        // and this renderer used to work around it with a temporary no-op guard - now fixed
+        // upstream, this test asserts the actual rotation matrix directly, matching this renderer's
+        // policy of always trusting AngleSharp.Css's own computed matrix rather than special-casing
+        // individual functions locally (see ParseCssTransform/ConvertToRenderTransform's remarks).
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:40px; height:20px; transform: rotate(180deg);"></div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        var push = Assert.Single(displayList.Commands.OfType<PushTransformCommand>());
+        var t = push.Transform;
+
+        // A 180-degree rotation around the box's own default center (20, 10) maps the box's own
+        // top-left corner (0, 0) exactly to its own bottom-right corner (40, 20).
+        Assert.Equal(-1f, t.A, precision: 3);
+        Assert.Equal(0f, t.B, precision: 3);
+        Assert.Equal(0f, t.C, precision: 3);
+        Assert.Equal(-1f, t.D, precision: 3);
+        Assert.Equal(40f, t.E, precision: 2);
+        Assert.Equal(20f, t.F, precision: 2);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ChainedTransformFunctionsComposeLeftToRightPerCssSpec()
+    {
+        // "translate then scale" applies scale to the point first (it is listed last/rightmost),
+        // then translate; "scale then translate" is the reverse - order changes the visual result,
+        // and this pins down the exact direction CSS defines, not just "some" composition. Uses
+        // scale() (translate/rotate would work equally well now) simply because it was the function
+        // originally used to build this test before rotate() got fixed upstream.
+        var translateThenScale = await ParseAsync("""
+            <html><body><div style="width:1px; height:1px; transform-origin: 0 0; transform: translate(100px, 0) scale(2);"></div></body></html>
+            """);
+        var scaleThenTranslate = await ParseAsync("""
+            <html><body><div style="width:1px; height:1px; transform-origin: 0 0; transform: scale(2) translate(100px, 0);"></div></body></html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var device = new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 };
+
+        var pushA = Assert.Single(renderer.BuildDisplayList(translateThenScale, device).Commands.OfType<PushTransformCommand>());
+        var pushB = Assert.Single(renderer.BuildDisplayList(scaleThenTranslate, device).Commands.OfType<PushTransformCommand>());
+
+        Assert.Equal(100f, pushA.Transform.E, precision: 2);
+        Assert.Equal(200f, pushB.Transform.E, precision: 2);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ScaleTransformExpandsSymmetricallyAroundDefaultCenter()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:40px; height:20px; transform: scale(2);"></div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        var push = Assert.Single(displayList.Commands.OfType<PushTransformCommand>());
+        var t = push.Transform;
+
+        Assert.Equal(-20f, t.E, precision: 2);
+        Assert.Equal(-10f, t.F, precision: 2);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_MatrixFunctionPreservesAllSixComponents()
+    {
+        // The plain 6-value 2D matrix() form was previously confirmed to compute *wrong* values in
+        // AngleSharp.Css itself (a column-major-vs-row-major mismatch in how it padded the array
+        // passed to TransformMatrix's constructor) - now fixed upstream, with a reproducing test in
+        // AngleSharp.Css's own suite (TransformFunctionsTests.PlainSixValueMatrixFunctionPreservesAllSixComponents)
+        // confirming it. This renderer never guarded against that bug locally to begin with - per
+        // its own policy (see ParseCssTransform/ConvertToRenderTransform's remarks), it always
+        // trusts whatever AngleSharp.Css computes - so once AngleSharp.Css's own bug was fixed,
+        // matrix() started working correctly here automatically, with no change needed in this
+        // renderer at all. This test asserts the actual, now-correct values directly, using the
+        // same non-symmetric coefficients as AngleSharp.Css's own regression test specifically so a
+        // symmetric input could never mask a b/c transposition or an e/f loss the way it did before.
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:10px; height:10px; transform-origin: 0 0; transform: matrix(2, 3, 4, 5, 6, 7);"></div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        var push = Assert.Single(displayList.Commands.OfType<PushTransformCommand>());
+        var t = push.Transform;
+
+        Assert.Equal(2f, t.A, precision: 2);
+        Assert.Equal(3f, t.B, precision: 2);
+        Assert.Equal(4f, t.C, precision: 2);
+        Assert.Equal(5f, t.D, precision: 2);
+        Assert.Equal(6f, t.E, precision: 2);
+        Assert.Equal(7f, t.F, precision: 2);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_TranslateZDoesNotPerturbA2DTransformChain()
+    {
+        // translateZ() is a 3D function this renderer never filters out before asking
+        // AngleSharp.Css to parse/compute it (see ParseCssTransform's own remarks) - its own effect
+        // is Z-only, so its 2D projection (M11/M12/M21/M22/Tx/Ty) comes back as pure identity and
+        // composing it into the chain leaves the following, genuinely 2D translate() untouched.
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:10px; height:10px; transform: translateZ(50px) translate(12px, 0px);"></div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        var push = Assert.Single(displayList.Commands.OfType<PushTransformCommand>());
+        Assert.Equal(12f, push.Transform.E, precision: 2);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_TransformWrapsBackgroundBorderAndChildrenTogether()
+    {
+        // A transform affects the *whole* element - its own background/border and every descendant
+        // - not just its content, unlike overflow clipping (which excludes border/outline).
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:40px; height:20px; background-color:#ff0000; border:2px solid #0000ff; transform: scale(1.5);">
+                    <span style="display:inline-block; width:4px; height:4px; background-color:#00ff00;"></span>
+                </div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        var commands = displayList.Commands.ToList();
+
+        var pushIndex = commands.FindIndex(c => c is PushTransformCommand);
+        var popIndex = commands.FindIndex(c => c is PopTransformCommand);
+        var backgroundIndex = commands.FindIndex(c => c is FillRectCommand f && f.Color.Equals(new RenderColor(255, 0, 0)));
+        var childIndex = commands.FindIndex(c => c is FillRectCommand f && f.Color.Equals(new RenderColor(0, 255, 0)));
+
+        Assert.True(pushIndex >= 0 && popIndex > pushIndex);
+        Assert.True(backgroundIndex > pushIndex && backgroundIndex < popIndex);
+        Assert.True(childIndex > pushIndex && childIndex < popIndex);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_AuthoredTransformDoesNotCrashAngleSharpCssComputation()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:10px; height:10px; transform: translate(1px, 1px);"></div>
+                <div style="width:10px; height:10px; transform: translateX(1px);"></div>
+                <div style="width:10px; height:10px; transform: translateY(1px);"></div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        Assert.Equal(3, displayList.Commands.OfType<PushTransformCommand>().Count());
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_NoFilterProducesNoPushOrPopFilterCommands()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:10px; height:10px;"></div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        Assert.Empty(displayList.Commands.OfType<PushFilterCommand>());
+        Assert.Empty(displayList.Commands.OfType<PopFilterCommand>());
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_FilterNoneProducesNoPushOrPopFilterCommands()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:10px; height:10px; filter: none;"></div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        Assert.Empty(displayList.Commands.OfType<PushFilterCommand>());
+        Assert.Empty(displayList.Commands.OfType<PopFilterCommand>());
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_GrayscaleFilterParsesFractionAndPercentageIdentically()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" style="width:10px; height:10px; filter: grayscale(0.9);">
+                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" style="width:10px; height:10px; filter: grayscale(90%);">
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        var pushes = displayList.Commands.OfType<PushFilterCommand>().ToList();
+
+        Assert.Equal(2, pushes.Count);
+
+        foreach (var push in pushes)
+        {
+            var function = Assert.Single(push.Functions);
+            Assert.Equal(RenderFilterFunctionKind.Grayscale, function.Kind);
+            Assert.Equal(0.9f, function.Amount, precision: 3);
+        }
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_ChainedFilterFunctionsPreserveAuthoredOrder()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:10px; height:10px; filter: grayscale(0.9) blur(2px);"></div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        var push = Assert.Single(displayList.Commands.OfType<PushFilterCommand>());
+
+        Assert.Equal(2, push.Functions.Count);
+        Assert.Equal(RenderFilterFunctionKind.Grayscale, push.Functions[0].Kind);
+        Assert.Equal(0.9f, push.Functions[0].Amount, precision: 3);
+        Assert.Equal(RenderFilterFunctionKind.Blur, push.Functions[1].Kind);
+        Assert.Equal(2f, push.Functions[1].Amount, precision: 3);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_DropShadowFilterParsesOffsetsBlurAndColorRegardlessOfColorPosition()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:10px; height:10px; filter: drop-shadow(2px 4px 6px red);"></div>
+                <div style="width:10px; height:10px; filter: drop-shadow(red 2px 4px 6px);"></div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        var pushes = displayList.Commands.OfType<PushFilterCommand>().ToList();
+
+        Assert.Equal(2, pushes.Count);
+
+        foreach (var push in pushes)
+        {
+            var function = Assert.Single(push.Functions);
+            Assert.Equal(RenderFilterFunctionKind.DropShadow, function.Kind);
+            Assert.Equal(2f, function.OffsetX, precision: 2);
+            Assert.Equal(4f, function.OffsetY, precision: 2);
+            Assert.Equal(6f, function.Amount, precision: 2);
+            Assert.Equal(new RenderColor(255, 0, 0), function.Color);
+        }
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_FilterWrapsBackgroundBorderAndChildrenTogether()
+    {
+        // A filter affects the *whole* element - its own background/border and every descendant -
+        // not just its content, the same "wraps everything" scope PushTransformCommand already has.
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:40px; height:20px; background-color:#ff0000; border:2px solid #0000ff; filter: grayscale(1);">
+                    <span style="display:inline-block; width:4px; height:4px; background-color:#00ff00;"></span>
+                </div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        var commands = displayList.Commands.ToList();
+
+        var pushIndex = commands.FindIndex(c => c is PushFilterCommand);
+        var popIndex = commands.FindIndex(c => c is PopFilterCommand);
+        var backgroundIndex = commands.FindIndex(c => c is FillRectCommand f && f.Color.Equals(new RenderColor(255, 0, 0)));
+        var childIndex = commands.FindIndex(c => c is FillRectCommand f && f.Color.Equals(new RenderColor(0, 255, 0)));
+
+        Assert.True(pushIndex >= 0 && popIndex > pushIndex);
+        Assert.True(backgroundIndex > pushIndex && backgroundIndex < popIndex);
+        Assert.True(childIndex > pushIndex && childIndex < popIndex);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_TransformAndFilterNestFilterInsideTransform()
+    {
+        // Documents this renderer's own, deliberate choice of nesting order (see ParseCssFilter's
+        // remarks in HtmlRenderer.LayoutElement): the filter's own raster operates inside the
+        // element's already-transformed local space, so PushFilter has to appear *after*
+        // PushTransform, and PopFilter *before* PopTransform.
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:10px; height:10px; transform: scale(1.5); filter: grayscale(1);"></div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        var commands = displayList.Commands.ToList();
+
+        var pushTransformIndex = commands.FindIndex(c => c is PushTransformCommand);
+        var pushFilterIndex = commands.FindIndex(c => c is PushFilterCommand);
+        var popFilterIndex = commands.FindIndex(c => c is PopFilterCommand);
+        var popTransformIndex = commands.FindIndex(c => c is PopTransformCommand);
+
+        Assert.True(pushTransformIndex < pushFilterIndex);
+        Assert.True(pushFilterIndex < popFilterIndex);
+        Assert.True(popFilterIndex < popTransformIndex);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_FullyOpaqueProducesNoPushOrPopOpacityCommands()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:10px; height:10px; opacity: 1;"></div>
+                <div style="width:10px; height:10px;"></div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        Assert.Empty(displayList.Commands.OfType<PushOpacityCommand>());
+        Assert.Empty(displayList.Commands.OfType<PopOpacityCommand>());
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_PartialOpacityProducesPushOpacityWithTheParsedAlpha()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:10px; height:10px; opacity: 0.4;"></div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        var push = Assert.Single(displayList.Commands.OfType<PushOpacityCommand>());
+        Assert.Equal(0.4f, push.Alpha, precision: 3);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_OpacityOutOfRangeIsClampedToZeroToOne()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div id="over" style="width:10px; height:10px; opacity: 2;"></div>
+                <div id="under" style="width:10px; height:10px; opacity: -1;"></div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+
+        // opacity: 2 clamps to 1 (fully opaque), which produces no push/pop at all (same as
+        // unspecified) - only opacity: -1 (clamped to 0) should push.
+        var push = Assert.Single(displayList.Commands.OfType<PushOpacityCommand>());
+        Assert.Equal(0f, push.Alpha, precision: 3);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_OpacityWrapsBackgroundBorderAndChildrenTogether()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:40px; height:20px; background-color:#ff0000; border:2px solid #0000ff; opacity: 0.5;">
+                    <span style="display:inline-block; width:4px; height:4px; background-color:#00ff00;"></span>
+                </div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        var commands = displayList.Commands.ToList();
+
+        var pushIndex = commands.FindIndex(c => c is PushOpacityCommand);
+        var popIndex = commands.FindIndex(c => c is PopOpacityCommand);
+        var backgroundIndex = commands.FindIndex(c => c is FillRectCommand f && f.Color.Equals(new RenderColor(255, 0, 0)));
+        var childIndex = commands.FindIndex(c => c is FillRectCommand f && f.Color.Equals(new RenderColor(0, 255, 0)));
+
+        Assert.True(pushIndex >= 0 && popIndex > pushIndex);
+        Assert.True(backgroundIndex > pushIndex && backgroundIndex < popIndex);
+        Assert.True(childIndex > pushIndex && childIndex < popIndex);
+    }
+
+    [Fact]
+    public async Task BuildDisplayList_TransformOpacityAndFilterNestInOpacityBetweenTransformAndFilter()
+    {
+        var document = await ParseAsync("""
+            <html><body>
+                <div style="width:10px; height:10px; transform: scale(1.5); opacity: 0.5; filter: grayscale(1);"></div>
+            </body></html>
+            """);
+        var renderer = new HtmlRenderer();
+        var displayList = renderer.BuildDisplayList(document, new DefaultRenderDevice { ViewPortWidth = 200, ViewPortHeight = 200 });
+        var commands = displayList.Commands.ToList();
+
+        var pushTransformIndex = commands.FindIndex(c => c is PushTransformCommand);
+        var pushOpacityIndex = commands.FindIndex(c => c is PushOpacityCommand);
+        var pushFilterIndex = commands.FindIndex(c => c is PushFilterCommand);
+        var popFilterIndex = commands.FindIndex(c => c is PopFilterCommand);
+        var popOpacityIndex = commands.FindIndex(c => c is PopOpacityCommand);
+        var popTransformIndex = commands.FindIndex(c => c is PopTransformCommand);
+
+        Assert.True(pushTransformIndex < pushOpacityIndex);
+        Assert.True(pushOpacityIndex < pushFilterIndex);
+        Assert.True(pushFilterIndex < popFilterIndex);
+        Assert.True(popFilterIndex < popOpacityIndex);
+        Assert.True(popOpacityIndex < popTransformIndex);
+    }
+
+    // Mirrors the private HtmlRenderer.FormControlAccentColor constant (26, 115, 232) - kept as an
+    // independent literal here rather than reflecting into the private field, so a test failure
+    // reads as "the painted color changed" rather than needing reflection to even compile.
+    private static readonly RenderColor FormControlAccentColorForTests = new(26, 115, 232);
+
     private static async Task<AngleSharp.Dom.IDocument> ParseAsync(string html, IConfiguration? configuration = null, string? address = null)
     {
         var context = BrowsingContext.New(configuration ?? Configuration.Default.WithCss());
diff --git a/src/AngleSharp.Renderer.Tests/VisualConformanceTests.cs b/src/AngleSharp.Renderer.Tests/VisualConformanceTests.cs
index 4d13e25..0ce8013 100644
--- a/src/AngleSharp.Renderer.Tests/VisualConformanceTests.cs
+++ b/src/AngleSharp.Renderer.Tests/VisualConformanceTests.cs
@@ -2,6 +2,7 @@ namespace AngleSharp.Renderer.Tests;
 
 using AngleSharp;
 using AngleSharp.Css;
+using AngleSharp.Dom;
 using AngleSharp.Html.Dom;
 
 [Trait("Category", "Visual")]
@@ -1391,24 +1392,1241 @@ public async Task RenderToPng_RendersWebSafeFontFamiliesDifferently()
             maxDifferentPixels: TextRenderingToleranceMaxPixels);
       }
 
+    [Fact]
+    public async Task RenderToPng_PaintsUniformRoundedBoxBackgroundAndBorder()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:10px; width:80px; height:50px; border:4px solid rgb(0,0,255); background-color:rgb(255,0,0); border-radius:12px;"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 120,
+            ViewPortHeight = 90,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "paints-uniform-rounded-box-background-and-border.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_PaintsPillShapeFromClampedBorderRadius()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:10px; width:100px; height:30px; background-color:rgb(0,128,255); border-radius:100px;"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 120,
+            ViewPortHeight = 50,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "paints-pill-shape-from-clamped-border-radius.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_PaintsEllipticalBorderRadiusCorners()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:10px; width:100px; height:60px; background-color:rgb(0,180,0); border-radius:40px / 20px;"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 120,
+            ViewPortHeight = 80,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "paints-elliptical-border-radius-corners.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_PaintsPerCornerDifferentBorderRadii()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:10px; width:100px; height:60px; background-color:rgb(255,128,0); border-top-left-radius:0; border-top-right-radius:24px; border-bottom-right-radius:0; border-bottom-left-radius:24px;"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 120,
+            ViewPortHeight = 80,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "paints-per-corner-different-border-radii.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_FallsBackToStraightEdgesForMixedWidthRoundedBorder()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:10px; width:80px; height:50px; border-top-width:2px; border-right-width:10px; border-bottom-width:2px; border-left-width:2px; border-style:solid; border-color:rgb(0,0,255); background-color:rgb(255,0,0); border-radius:12px;"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 120,
+            ViewPortHeight = 90,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "falls-back-to-straight-edges-for-mixed-width-rounded-border.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_PaintsOutsetBoxShadow()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:20px; width:60px; height:40px; background-color:rgb(0,128,255); box-shadow: 6px 6px 8px rgba(0,0,0,0.6);"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 130,
+            ViewPortHeight = 110,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "paints-outset-box-shadow.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_PaintsInsetBoxShadow()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:20px; width:80px; height:50px; background-color:rgb(255,255,0); box-shadow: inset 0 0 0 8px rgba(0,0,0,0.7);"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 130,
+            ViewPortHeight = 100,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "paints-inset-box-shadow.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_PaintsBoxShadowFollowingBorderRadius()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:20px; width:70px; height:40px; border-radius:16px; background-color:rgb(0,200,0); box-shadow: 4px 4px 0 rgba(0,0,0,0.8);"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 130,
+            ViewPortHeight = 100,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "paints-box-shadow-following-border-radius.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_PaintsMultipleBoxShadowsLayered()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:20px; width:50px; height:30px; background-color:rgb(220,220,220); box-shadow: 3px 3px 0 rgba(255,0,0,1), 6px 6px 0 rgba(0,0,255,1);"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 110,
+            ViewPortHeight = 90,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "paints-multiple-box-shadows-layered.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_PaintsTextShadow()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; background-color: rgb(60,60,60); }</style>
+              </head>
+              <body>
+                <p style="margin:10px; font-family:sans-serif; font-size:28px; color:rgb(255,255,255); text-shadow: 2px 2px 3px rgba(0,0,0,0.9);">Hi</p>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 120,
+            ViewPortHeight = 70,
+            FontSize = 16f,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "paints-text-shadow.png",
+          actualPng: image.Data,
+          perChannelTolerance: TextRenderingToleranceChannel,
+          maxDifferentPixels: TextRenderingToleranceMaxPixels);
+    }
+
+    [Fact]
+    public async Task RenderToPng_PaintsMultipleTextShadowsLayered()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <p style="margin:10px; font-family:sans-serif; font-size:28px; color:rgb(0,0,0); text-shadow: 2px 2px 0 rgba(255,0,0,1), 4px 4px 0 rgba(0,0,255,1);">Hi</p>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 120,
+            ViewPortHeight = 70,
+            FontSize = 16f,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "paints-multiple-text-shadows-layered.png",
+          actualPng: image.Data,
+          perChannelTolerance: TextRenderingToleranceChannel,
+          maxDifferentPixels: TextRenderingToleranceMaxPixels);
+    }
+
+    [Fact]
+    public async Task RenderToPng_PaintsOwnBackgroundBehindOwnDirectTextContent()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="width:100px; height:40px; background-color:rgb(255,0,0); color:rgb(0,0,0); font-size:24px;">Hi</div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 120,
+            ViewPortHeight = 60,
+            FontSize = 16f,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "paints-own-background-behind-own-text.png",
+          actualPng: image.Data,
+          perChannelTolerance: TextRenderingToleranceChannel,
+          maxDifferentPixels: TextRenderingToleranceMaxPixels);
+    }
+
+    [Fact]
+    public async Task RenderToPng_RendersUnorderedListWithDiscBullets()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <ul style="font-family:sans-serif; font-size:18px; color:rgb(0,0,0); margin-top:10px; margin-right:10px; margin-bottom:10px;">
+                    <li>One</li>
+                    <li>Two</li>
+                </ul>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 160,
+            ViewPortHeight = 90,
+            FontSize = 16f,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "renders-unordered-list-with-disc-bullets.png",
+          actualPng: image.Data,
+          perChannelTolerance: TextRenderingToleranceChannel,
+          maxDifferentPixels: TextRenderingToleranceMaxPixels);
+    }
+
+    [Fact]
+    public async Task RenderToPng_RendersOrderedListWithDecimalMarkers()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <ol style="font-family:sans-serif; font-size:18px; color:rgb(0,0,0); margin-top:10px; margin-right:10px; margin-bottom:10px;">
+                    <li>First</li>
+                    <li>Second</li>
+                    <li>Third</li>
+                </ol>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 160,
+            ViewPortHeight = 110,
+            FontSize = 16f,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "renders-ordered-list-with-decimal-markers.png",
+          actualPng: image.Data,
+          perChannelTolerance: TextRenderingToleranceChannel,
+          maxDifferentPixels: TextRenderingToleranceMaxPixels);
+    }
+
+    [Fact]
+    public async Task RenderToPng_RendersSquareAndCircleListStyleTypes()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <ul style="font-family:sans-serif; font-size:18px; color:rgb(0,0,0); margin-top:10px; margin-right:10px; margin-bottom:10px; list-style-type:square;">
+                    <li>Square</li>
+                </ul>
+                <ul style="font-family:sans-serif; font-size:18px; color:rgb(0,0,0); margin-top:0; margin-right:10px; margin-bottom:10px; list-style-type:circle;">
+                    <li>Circle</li>
+                </ul>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 160,
+            ViewPortHeight = 90,
+            FontSize = 16f,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "renders-square-and-circle-list-style-types.png",
+          actualPng: image.Data,
+          perChannelTolerance: TextRenderingToleranceChannel,
+          maxDifferentPixels: TextRenderingToleranceMaxPixels);
+    }
+
+    [Fact]
+    public async Task RenderToPng_RendersNestedListWithIndependentNumbering()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <ol style="font-family:sans-serif; font-size:16px; color:rgb(0,0,0); margin-top:10px; margin-right:10px; margin-bottom:10px;">
+                    <li>Parent
+                        <ol style="margin-top:0; margin-bottom:0;">
+                            <li>Child</li>
+                        </ol>
+                    </li>
+                    <li>Sibling</li>
+                </ol>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 180,
+            ViewPortHeight = 130,
+            FontSize = 16f,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "renders-nested-list-with-independent-numbering.png",
+          actualPng: image.Data,
+          perChannelTolerance: TextRenderingToleranceChannel,
+          maxDifferentPixels: TextRenderingToleranceMaxPixels);
+    }
+
+    [Fact]
+    public async Task RenderToPng_RendersStyledListItemsWithBackgroundColor()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <ul style="font-family:sans-serif; font-size:16px; color:rgb(255,255,255); margin-top:10px; margin-right:10px; margin-bottom:10px; list-style-type:none;">
+                    <li style="background-color:rgb(0,120,215); padding:4px; margin-bottom:4px;">Styled item one</li>
+                    <li style="background-color:rgb(0,150,80); padding:4px;">Styled item two</li>
+                </ul>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 220,
+            ViewPortHeight = 100,
+            FontSize = 16f,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "renders-styled-list-items-with-background-color.png",
+          actualPng: image.Data,
+          perChannelTolerance: TextRenderingToleranceChannel,
+          maxDifferentPixels: TextRenderingToleranceMaxPixels);
+    }
+
+    [Fact]
+    public async Task RenderToPng_ComparesListStylePositionInsideAndOutside()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <ul style="font-family:sans-serif; font-size:16px; color:rgb(0,0,0); width:90px; margin-top:10px; margin-right:10px; margin-bottom:10px; list-style-position:outside;">
+                    <li>Outside position keeps the marker in the gutter</li>
+                </ul>
+                <ul style="font-family:sans-serif; font-size:16px; color:rgb(0,0,0); width:90px; margin-top:0; margin-right:10px; margin-bottom:10px; list-style-position:inside;">
+                    <li>Inside position puts the marker on the first line</li>
+                </ul>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 160,
+            ViewPortHeight = 280,
+            FontSize = 16f,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "compares-list-style-position-inside-and-outside.png",
+          actualPng: image.Data,
+          perChannelTolerance: TextRenderingToleranceChannel,
+          maxDifferentPixels: TextRenderingToleranceMaxPixels);
+    }
+
+    [Fact]
+    public async Task RenderToPng_ClipsOverflowHiddenContentToBox()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:10px; width:50px; height:30px; overflow:hidden; background-color:rgb(230,230,230); position:relative;">
+                    <div style="position:absolute; left:20px; top:10px; width:60px; height:60px; background-color:rgb(255,0,0);"></div>
+                </div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 100,
+            ViewPortHeight = 80,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "clips-overflow-hidden-content-to-box.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_DoesNotClipOverflowVisibleContent()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:10px; width:50px; height:30px; background-color:rgb(230,230,230); position:relative;">
+                    <div style="position:absolute; left:20px; top:10px; width:60px; height:60px; background-color:rgb(255,0,0);"></div>
+                </div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 100,
+            ViewPortHeight = 80,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "does-not-clip-overflow-visible-content.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_ClipsToRoundedShapeWithBorderRadius()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:10px; width:60px; height:60px; border-radius:16px; overflow:hidden; position:relative;">
+                    <div style="position:absolute; left:-10px; top:-10px; width:100px; height:100px; background-color:rgb(0,120,215);"></div>
+                </div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 100,
+            ViewPortHeight = 100,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "clips-to-rounded-shape-with-border-radius.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_ClipsOversizedNormalFlowChildToBox()
+    {
+        // A child's own explicit width is not constrained by its parent's - a plain, normal-flow
+        // (non-absolute) child can be wider than its container, which is a common real-world
+        // overflow trigger (an oversized image, a wide table, ...), distinct from the
+        // position:absolute escape the other tests here use. The child is deliberately no taller
+        // than the parent's own height, since this renderer's auto content height always grows to
+        // fit a normal-flow child vertically (height behaves like a floor, not a cap) - so a
+        // taller child would just grow the parent instead of overflowing it.
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:10px; width:40px; height:30px; overflow:hidden; background-color:rgb(230,230,230);">
+                    <div style="width:80px; height:20px; background-color:rgb(255,0,0);"></div>
+                </div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 100,
+            ViewPortHeight = 100,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "clips-oversized-normal-flow-child-to-box.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
     private static async Task<byte[]> RenderCanvasSnapshotAsync(string html, Action<Canvas2DRenderingContext> draw)
     {
-        var context = BrowsingContext.New(Configuration.Default.WithCss().WithRendering());
-        var document = await context.OpenAsync(request => request.Content(html));
-        var canvas = document.QuerySelector("canvas") as IHtmlCanvasElement;
+        var context = BrowsingContext.New(Configuration.Default.WithCss().WithRendering());
+        var document = await context.OpenAsync(request => request.Content(html));
+        var canvas = document.QuerySelector("canvas") as IHtmlCanvasElement;
+
+        Assert.NotNull(canvas);
+
+        var renderingContext = canvas!.GetContext("2d");
+        var canvasContext = Assert.IsType<Canvas2DRenderingContext>(renderingContext);
+        draw(canvasContext);
+
+        return canvasContext.ToImage("image/png");
+    }
+
+    [Fact]
+    public async Task RenderToPng_PaintsTopOfTallPageWhenUnscrolled()
+    {
+        var image = await RenderScrolledTallPageAsync(scrollTop: null, viewportHeight: 80);
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "paints-top-of-tall-page-when-unscrolled.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_PaintsOnlyBottomOfTallPageWhenScrollOffsetIsLargeEnough()
+    {
+        // The page is 5 stacked 40px bands (200px total) in an 80px-tall viewport - scrolling by
+        // 120px moves past the first three bands entirely, so only the last two (green, blue)
+        // should paint, shifted up to fill the viewport exactly as the unscrolled page's first two
+        // bands (red, orange) do in the sibling test above.
+        var image = await RenderScrolledTallPageAsync(scrollTop: 120, viewportHeight: 80);
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "paints-only-bottom-of-tall-page-when-scroll-offset-is-large-enough.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_PaintsMiddleOfTallPageAtAnArbitrarySettableScrollOffset()
+    {
+        // A scroll offset that isn't aligned to a band boundary (100px lands 20px into the third
+        // band, yellow) proves the offset is a continuously "settable" pixel value, not just a
+        // switch between a fixed top/bottom view - the viewport should show the bottom 20px of
+        // yellow, all 40px of green, then the top 20px of blue. 100px is also comfortably within
+        // the page's actual 120px max scroll (200px content - 80px viewport), unlike a larger
+        // value that would just clamp to the same view as the "scrolled past the top" test above.
+        var image = await RenderScrolledTallPageAsync(scrollTop: 100, viewportHeight: 80);
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "paints-middle-of-tall-page-at-an-arbitrary-settable-scroll-offset.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    private static async Task<AngleSharp.Renderer.Rendering.RenderedImage> RenderScrolledTallPageAsync(double? scrollTop, int viewportHeight)
+    {
+        var renderDevice = new DefaultRenderDevice
+        {
+            ViewPortWidth = 80,
+            ViewPortHeight = viewportHeight,
+            DeviceWidth = 80,
+            DeviceHeight = viewportHeight,
+            FontSize = 16,
+        };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html>
+              <head><style>html, body { margin: 0; padding: 0; }</style></head>
+              <body>
+                <div style="width:80px; height:40px; background-color:rgb(255,0,0);"></div>
+                <div style="width:80px; height:40px; background-color:rgb(255,165,0);"></div>
+                <div style="width:80px; height:40px; background-color:rgb(255,255,0);"></div>
+                <div style="width:80px; height:40px; background-color:rgb(0,180,0);"></div>
+                <div style="width:80px; height:40px; background-color:rgb(0,0,255);"></div>
+              </body>
+            </html>
+            """, configuration);
+
+        if (scrollTop.HasValue)
+        {
+            document.Context.GetDomHarness();
+            document.DocumentElement.SetScrollTop(scrollTop.Value);
+        }
+
+        var renderer = new HtmlRenderer();
+        return renderer.RenderToPng(document, renderDevice);
+    }
+
+    // A hand-built 2x2 RGB PNG (no palette, filter 0), one red pixel diagonal from one blue pixel -
+    // a tiny, unambiguous checkerboard tile that makes tiling/scaling/positioning visually obvious
+    // even at very small sizes, unlike a solid-color 1x1 pixel (which would look identical whether
+    // or not tiling/positioning code actually ran).
+    private const string CheckerboardTileDataUri =
+        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAE0lEQVR42mO4IycnZ3OHAYiBLAAgUgSdATw7NgAAAABJRU5ErkJggg==";
+
+    // A larger (20x20, four 10x10 quadrants) checkerboard PNG built the same way as
+    // CheckerboardTileDataUri, used specifically for the default-repeat tiling test below - tiling
+    // a 2x2 tile at 1:1 scale produces a genuinely correct but single-pixel-period checkerboard,
+    // which is indistinguishable from a rendering bug under any kind of downsampled visual
+    // inspection (verified: a raw per-pixel dump of that render confirmed it actually alternates
+    // correctly, but it is not a useful baseline for a human - or a diff image - to eyeball).
+    private const string CoarseCheckerboardTileDataUri =
+        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAJUlEQVR42mO4IyeHB8nZ3MGDGEY1j2omqBm/NH6jRzWPaiaoGQCY+s0A5fuwxQAAAABJRU5ErkJggg==";
+
+    [Fact]
+    public async Task RenderToPng_TilesBackgroundImageAcrossBoxByDefault()
+    {
+        // No background-repeat/position/size given at all - the CSS initial values (`repeat repeat`,
+        // `0% 0%`, `auto`) tile the 20x20 tile at its own natural size across the whole box, so a
+        // 60x60 box shows a clean 3x3 grid of the tile's four quadrants.
+        var document = await ParseAsync($$"""
+            <html>
+              <head><style>html, body { margin: 0; padding: 0; }</style></head>
+              <body>
+                <div style="width:60px; height:60px; background-image: url({{CoarseCheckerboardTileDataUri}});"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 60,
+            ViewPortHeight = 60,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "tiles-background-image-across-box-by-default.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_PositionsAndSizesNoRepeatBackgroundImage()
+    {
+        // An explicit background-size, background-repeat: no-repeat and background-position: right
+        // bottom together place a single, scaled-up copy of the tile in the box's bottom-right
+        // corner - the rest of the box shows the plain background-color underneath, since a
+        // non-repeating axis paints transparent (Decal), not a smeared/clamped edge color.
+        var document = await ParseAsync($$"""
+            <html>
+              <head><style>html, body { margin: 0; padding: 0; }</style></head>
+              <body>
+                <div style="width:60px; height:60px; background-color:#ffffff; background-image: url({{CheckerboardTileDataUri}}); background-repeat: no-repeat; background-size: 20px 20px; background-position: right bottom;"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 60,
+            ViewPortHeight = 60,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "positions-and-sizes-no-repeat-background-image.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_ScalesBackgroundImageToCoverBox()
+    {
+        // background-size: cover scales the (square) tile up until it fills a non-square box
+        // entirely, cropping whichever axis overflows - here the box is wider than it is tall, so
+        // the tile is scaled to the box's width and its vertical overflow is cropped symmetrically
+        // (background-position: center, the CSS default for a single "center" keyword).
+        var document = await ParseAsync($$"""
+            <html>
+              <head><style>html, body { margin: 0; padding: 0; }</style></head>
+              <body>
+                <div style="width:80px; height:40px; background-image: url({{CheckerboardTileDataUri}}); background-repeat: no-repeat; background-size: cover; background-position: center;"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 80,
+            ViewPortHeight = 40,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "scales-background-image-to-cover-box.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_RendersFormControlGalleryWithDefaultStyling()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head><style>
+                html, body { margin: 0; padding: 0; }
+                div.row { margin-bottom: 6px; }
+              </style></head>
+              <body>
+                <div class="row"><input type="text" value="Hello" /></div>
+                <div class="row"><input type="number" value="42" /></div>
+                <div class="row"><input type="url" value="https://x.test" /></div>
+                <div class="row"><input type="color" value="#3388ff" /></div>
+                <div class="row"><input type="checkbox" /><input type="checkbox" checked /></div>
+                <div class="row"><input type="radio" /><input type="radio" checked /></div>
+                <div class="row">
+                  <select>
+                    <option>First</option>
+                    <option selected>Second</option>
+                  </select>
+                </div>
+                <div class="row"><textarea>Some notes</textarea></div>
+                <div class="row"><button>Click Me</button><input type="submit" value="Send" /></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 220,
+            ViewPortHeight = 340,
+            FontSize = 16,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "renders-form-control-gallery-with-default-styling.png",
+          actualPng: image.Data,
+          perChannelTolerance: TextRenderingToleranceChannel,
+          maxDifferentPixels: TextRenderingToleranceMaxPixels);
+    }
+
+    [Fact]
+    public async Task RenderToPng_FormControlDefaultsAreOverriddenByAuthorCss()
+    {
+        // Two otherwise-identical text inputs side by side - the left keeps every synthesized
+        // default, the right overrides border color/width, border-radius, background-color and
+        // width via ordinary CSS, exactly the way a real browser lets you restyle a form control's
+        // "somewhat overridable" native chrome without needing a `appearance: none` escape hatch.
+        var document = await ParseAsync("""
+            <html>
+              <head><style>html, body { margin: 0; padding: 0; }</style></head>
+              <body>
+                <input type="text" value="Default" style="display:block; margin-bottom:8px;" />
+                <input type="text" value="Custom" style="display:block; width:100px; background-color:#fff6d5; border:3px solid #cc6600; border-radius:8px;" />
+              </body>
+            </html>
+            """);
 
-        Assert.NotNull(canvas);
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 180,
+            ViewPortHeight = 80,
+            FontSize = 16,
+        });
 
-        var renderingContext = canvas!.GetContext("2d");
-        var canvasContext = Assert.IsType<Canvas2DRenderingContext>(renderingContext);
-        draw(canvasContext);
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "form-control-defaults-are-overridden-by-author-css.png",
+          actualPng: image.Data,
+          perChannelTolerance: TextRenderingToleranceChannel,
+          maxDifferentPixels: TextRenderingToleranceMaxPixels);
+    }
 
-        return canvasContext.ToImage("image/png");
+    [Fact]
+    public async Task RenderToPng_TranslatesAndScalesAChainedTransformedBox()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:10px; width:30px; height:15px; background-color:rgb(0,128,255); transform: translate(20px, 10px) scale(1.5);"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 150,
+            ViewPortHeight = 100,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "translates-and-scales-a-chained-transformed-box.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_RotatesABoxAroundItsDefaultCenter()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:30px; width:60px; height:30px; background-color:rgb(220,50,50); transform: rotate(45deg);"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 150,
+            ViewPortHeight = 120,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "rotates-a-box-around-its-default-center.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_ScalesABoxAroundACustomTransformOrigin()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:10px; width:40px; height:40px; background-color:rgb(200,60,0); transform: scale(1.5); transform-origin: top left;"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 120,
+            ViewPortHeight = 100,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "scales-a-box-around-a-custom-transform-origin.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_GrayscaleFilterDesaturatesABox()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:20px; width:60px; height:40px; background-color:rgb(220,50,50); filter: grayscale(1);"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 120,
+            ViewPortHeight = 100,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "grayscale-filter-desaturates-a-box.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_BlurFilterSoftensABoxEdge()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; }</style>
+              </head>
+              <body>
+                <div style="margin:30px; width:40px; height:40px; background-color:rgb(0,128,255); filter: blur(6px);"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 120,
+            ViewPortHeight = 100,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "blur-filter-softens-a-box-edge.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_OpacityFadesABoxOverAWhiteBackground()
+    {
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; background-color: white; }</style>
+              </head>
+              <body>
+                <div style="margin:20px; width:60px; height:40px; background-color:rgb(220,50,50); opacity: 0.4;"></div>
+              </body>
+            </html>
+            """);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, new DefaultRenderDevice
+        {
+            ViewPortWidth = 120,
+            ViewPortHeight = 100,
+        });
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "opacity-fades-a-box-over-a-white-background.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_HoverTransitionShowsAnInterpolatedMidFlightFrame()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 120, ViewPortHeight = 100, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>
+                  html, body { margin: 0; padding: 0; background-color: white; }
+                  #target { background-color: rgb(0, 0, 255); transition: background-color 1s linear; }
+                  #target:hover { background-color: rgb(255, 0, 0); }
+                </style>
+              </head>
+              <body>
+                <div id="target" style="margin:20px; width:60px; height:40px;"></div>
+              </body>
+            </html>
+            """, configuration);
+
+        var harness = document.Context.GetDomHarness();
+        harness.MousePosition = (50, 40);
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(500));
+
+        var image = harness.PaintToPng();
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "hover-transition-shows-an-interpolated-mid-flight-frame.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_AnimationShowsAnInterpolatedMidFlightFrame()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 120, ViewPortHeight = 100, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>
+                  html, body { margin: 0; padding: 0; background-color: white; }
+                  @keyframes slide {
+                    0% { left: 0px; }
+                    100% { left: 60px; }
+                  }
+                  #target { position: relative; background-color: rgb(0, 128, 255); animation: slide 2s linear; }
+                </style>
+              </head>
+              <body>
+                <div id="target" style="margin:20px; width:30px; height:40px;"></div>
+              </body>
+            </html>
+            """, configuration);
+
+        var harness = document.Context.GetDomHarness();
+        harness.AdvanceTime(TimeSpan.FromMilliseconds(1000));
+
+        var image = harness.PaintToPng();
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "animation-shows-an-interpolated-mid-flight-frame.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_FocusedTextInputShowsAnOpaqueCaret()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 120, ViewPortHeight = 60, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var document = await ParseAsync("""
+            <html>
+              <head>
+                <style>html, body { margin: 0; padding: 0; background-color: white; }</style>
+              </head>
+              <body>
+                <input id="target" type="text" value="Hi" style="margin:10px;" />
+              </body>
+            </html>
+            """, configuration);
+
+        var target = (IHtmlElement)document.GetElementById("target")!;
+        target.DoFocus();
+
+        // Registering the harness starts the virtual clock at 0, where the caret's cosine "breathe"
+        // is at its peak (see FormControlCaretBlinkPeriodMs) - a deterministic, fully-opaque frame.
+        var harness = document.Context.GetDomHarness();
+        var image = harness.PaintToPng();
+
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "focused-text-input-shows-an-opaque-caret.png",
+          actualPng: image.Data,
+          perChannelTolerance: 0,
+          maxDifferentPixels: 0);
+    }
+
+    [Fact]
+    public async Task RenderToPng_PreWhiteSpacePreservesIndentationAndLineBreaks()
+    {
+        var renderDevice = new DefaultRenderDevice { ViewPortWidth = 260, ViewPortHeight = 120, FontSize = 16 };
+        var configuration = Configuration.Default.WithCss().WithRenderDevice(renderDevice);
+        var html = "<html><head><style>html, body { margin: 0; padding: 0; background-color: white; }</style></head>"
+            + "<body><pre>function f() {\n    return 1;\n}</pre></body></html>";
+        var document = await ParseAsync(html, configuration);
+
+        var renderer = new HtmlRenderer();
+        var image = renderer.RenderToPng(document, renderDevice);
+
+        // Multi-line, monospace-heavy text (the whole point of this snapshot) is exactly the case
+        // TextRenderingToleranceChannel/MaxPixels already exist for elsewhere in this file - font
+        // hinting/anti-aliasing can shift a glyph edge by a pixel or two between runs even on the
+        // same platform, with no actual layout regression.
+        VisualSnapshotVerifier.VerifyOrCreate(
+          snapshotName: "pre-white-space-preserves-indentation-and-line-breaks.png",
+          actualPng: image.Data,
+          perChannelTolerance: TextRenderingToleranceChannel,
+          maxDifferentPixels: TextRenderingToleranceMaxPixels);
     }
 
-    private static async Task<AngleSharp.Dom.IDocument> ParseAsync(string html)
+    private static async Task<AngleSharp.Dom.IDocument> ParseAsync(string html, IConfiguration? configuration = null)
     {
-        var context = BrowsingContext.New(Configuration.Default.WithCss());
+        var context = BrowsingContext.New(configuration ?? Configuration.Default.WithCss());
         return await context.OpenAsync(request => request.Content(html));
     }
 }
\ No newline at end of file
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/absolute-positioned-out-of-flow.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/absolute-positioned-out-of-flow.linux.png
index 9e1558d..a4b6888 100644
Binary files a/src/AngleSharp.Renderer.Tests/verification-assets/absolute-positioned-out-of-flow.linux.png and b/src/AngleSharp.Renderer.Tests/verification-assets/absolute-positioned-out-of-flow.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/absolute-positioned-out-of-flow.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/absolute-positioned-out-of-flow.macos.png
index 9e1558d..a4b6888 100644
Binary files a/src/AngleSharp.Renderer.Tests/verification-assets/absolute-positioned-out-of-flow.macos.png and b/src/AngleSharp.Renderer.Tests/verification-assets/absolute-positioned-out-of-flow.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/absolute-positioned-out-of-flow.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/absolute-positioned-out-of-flow.windows.png
index 9e1558d..a4b6888 100644
Binary files a/src/AngleSharp.Renderer.Tests/verification-assets/absolute-positioned-out-of-flow.windows.png and b/src/AngleSharp.Renderer.Tests/verification-assets/absolute-positioned-out-of-flow.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/animation-shows-an-interpolated-mid-flight-frame.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/animation-shows-an-interpolated-mid-flight-frame.linux.png
new file mode 100644
index 0000000..708a5d0
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/animation-shows-an-interpolated-mid-flight-frame.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/animation-shows-an-interpolated-mid-flight-frame.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/animation-shows-an-interpolated-mid-flight-frame.macos.png
new file mode 100644
index 0000000..708a5d0
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/animation-shows-an-interpolated-mid-flight-frame.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/animation-shows-an-interpolated-mid-flight-frame.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/animation-shows-an-interpolated-mid-flight-frame.windows.png
new file mode 100644
index 0000000..708a5d0
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/animation-shows-an-interpolated-mid-flight-frame.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/blur-filter-softens-a-box-edge.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/blur-filter-softens-a-box-edge.linux.png
new file mode 100644
index 0000000..112396c
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/blur-filter-softens-a-box-edge.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/blur-filter-softens-a-box-edge.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/blur-filter-softens-a-box-edge.macos.png
new file mode 100644
index 0000000..112396c
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/blur-filter-softens-a-box-edge.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/blur-filter-softens-a-box-edge.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/blur-filter-softens-a-box-edge.windows.png
new file mode 100644
index 0000000..112396c
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/blur-filter-softens-a-box-edge.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/clips-overflow-hidden-content-to-box.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/clips-overflow-hidden-content-to-box.linux.png
new file mode 100644
index 0000000..2048dbb
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/clips-overflow-hidden-content-to-box.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/clips-overflow-hidden-content-to-box.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/clips-overflow-hidden-content-to-box.macos.png
new file mode 100644
index 0000000..2048dbb
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/clips-overflow-hidden-content-to-box.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/clips-overflow-hidden-content-to-box.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/clips-overflow-hidden-content-to-box.windows.png
new file mode 100644
index 0000000..2048dbb
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/clips-overflow-hidden-content-to-box.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/clips-oversized-normal-flow-child-to-box.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/clips-oversized-normal-flow-child-to-box.linux.png
new file mode 100644
index 0000000..3a49f08
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/clips-oversized-normal-flow-child-to-box.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/clips-oversized-normal-flow-child-to-box.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/clips-oversized-normal-flow-child-to-box.macos.png
new file mode 100644
index 0000000..3a49f08
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/clips-oversized-normal-flow-child-to-box.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/clips-oversized-normal-flow-child-to-box.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/clips-oversized-normal-flow-child-to-box.windows.png
new file mode 100644
index 0000000..3a49f08
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/clips-oversized-normal-flow-child-to-box.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/clips-to-rounded-shape-with-border-radius.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/clips-to-rounded-shape-with-border-radius.linux.png
new file mode 100644
index 0000000..f2ad3e3
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/clips-to-rounded-shape-with-border-radius.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/clips-to-rounded-shape-with-border-radius.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/clips-to-rounded-shape-with-border-radius.macos.png
new file mode 100644
index 0000000..74c09db
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/clips-to-rounded-shape-with-border-radius.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/clips-to-rounded-shape-with-border-radius.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/clips-to-rounded-shape-with-border-radius.windows.png
new file mode 100644
index 0000000..f2ad3e3
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/clips-to-rounded-shape-with-border-radius.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/compares-list-style-position-inside-and-outside.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/compares-list-style-position-inside-and-outside.linux.png
new file mode 100644
index 0000000..1a72223
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/compares-list-style-position-inside-and-outside.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/compares-list-style-position-inside-and-outside.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/compares-list-style-position-inside-and-outside.macos.png
new file mode 100644
index 0000000..dc6cdaa
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/compares-list-style-position-inside-and-outside.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/compares-list-style-position-inside-and-outside.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/compares-list-style-position-inside-and-outside.windows.png
new file mode 100644
index 0000000..179898f
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/compares-list-style-position-inside-and-outside.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/does-not-clip-overflow-visible-content.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/does-not-clip-overflow-visible-content.linux.png
new file mode 100644
index 0000000..ee68d04
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/does-not-clip-overflow-visible-content.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/does-not-clip-overflow-visible-content.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/does-not-clip-overflow-visible-content.macos.png
new file mode 100644
index 0000000..ee68d04
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/does-not-clip-overflow-visible-content.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/does-not-clip-overflow-visible-content.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/does-not-clip-overflow-visible-content.windows.png
new file mode 100644
index 0000000..ee68d04
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/does-not-clip-overflow-visible-content.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/falls-back-to-straight-edges-for-mixed-width-rounded-border.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/falls-back-to-straight-edges-for-mixed-width-rounded-border.linux.png
new file mode 100644
index 0000000..1580ea5
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/falls-back-to-straight-edges-for-mixed-width-rounded-border.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/falls-back-to-straight-edges-for-mixed-width-rounded-border.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/falls-back-to-straight-edges-for-mixed-width-rounded-border.macos.png
new file mode 100644
index 0000000..740e5df
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/falls-back-to-straight-edges-for-mixed-width-rounded-border.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/falls-back-to-straight-edges-for-mixed-width-rounded-border.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/falls-back-to-straight-edges-for-mixed-width-rounded-border.windows.png
new file mode 100644
index 0000000..1580ea5
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/falls-back-to-straight-edges-for-mixed-width-rounded-border.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/focused-text-input-shows-an-opaque-caret.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/focused-text-input-shows-an-opaque-caret.linux.png
new file mode 100644
index 0000000..4abbfb6
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/focused-text-input-shows-an-opaque-caret.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/focused-text-input-shows-an-opaque-caret.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/focused-text-input-shows-an-opaque-caret.macos.png
new file mode 100644
index 0000000..41c4464
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/focused-text-input-shows-an-opaque-caret.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/focused-text-input-shows-an-opaque-caret.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/focused-text-input-shows-an-opaque-caret.windows.png
new file mode 100644
index 0000000..9605ee0
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/focused-text-input-shows-an-opaque-caret.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/form-control-defaults-are-overridden-by-author-css.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/form-control-defaults-are-overridden-by-author-css.linux.png
new file mode 100644
index 0000000..b88b484
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/form-control-defaults-are-overridden-by-author-css.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/form-control-defaults-are-overridden-by-author-css.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/form-control-defaults-are-overridden-by-author-css.macos.png
new file mode 100644
index 0000000..c63eb3e
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/form-control-defaults-are-overridden-by-author-css.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/form-control-defaults-are-overridden-by-author-css.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/form-control-defaults-are-overridden-by-author-css.windows.png
new file mode 100644
index 0000000..9946ce6
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/form-control-defaults-are-overridden-by-author-css.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/grayscale-filter-desaturates-a-box.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/grayscale-filter-desaturates-a-box.linux.png
new file mode 100644
index 0000000..6232df0
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/grayscale-filter-desaturates-a-box.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/grayscale-filter-desaturates-a-box.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/grayscale-filter-desaturates-a-box.macos.png
new file mode 100644
index 0000000..6232df0
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/grayscale-filter-desaturates-a-box.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/grayscale-filter-desaturates-a-box.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/grayscale-filter-desaturates-a-box.windows.png
new file mode 100644
index 0000000..6232df0
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/grayscale-filter-desaturates-a-box.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/hover-transition-shows-an-interpolated-mid-flight-frame.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/hover-transition-shows-an-interpolated-mid-flight-frame.linux.png
new file mode 100644
index 0000000..9bfd49c
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/hover-transition-shows-an-interpolated-mid-flight-frame.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/hover-transition-shows-an-interpolated-mid-flight-frame.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/hover-transition-shows-an-interpolated-mid-flight-frame.macos.png
new file mode 100644
index 0000000..9bfd49c
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/hover-transition-shows-an-interpolated-mid-flight-frame.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/hover-transition-shows-an-interpolated-mid-flight-frame.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/hover-transition-shows-an-interpolated-mid-flight-frame.windows.png
new file mode 100644
index 0000000..9bfd49c
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/hover-transition-shows-an-interpolated-mid-flight-frame.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/negative-z-index-behind-in-flow.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/negative-z-index-behind-in-flow.linux.png
index 9831acc..34dfc5d 100644
Binary files a/src/AngleSharp.Renderer.Tests/verification-assets/negative-z-index-behind-in-flow.linux.png and b/src/AngleSharp.Renderer.Tests/verification-assets/negative-z-index-behind-in-flow.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/negative-z-index-behind-in-flow.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/negative-z-index-behind-in-flow.macos.png
index 9831acc..34dfc5d 100644
Binary files a/src/AngleSharp.Renderer.Tests/verification-assets/negative-z-index-behind-in-flow.macos.png and b/src/AngleSharp.Renderer.Tests/verification-assets/negative-z-index-behind-in-flow.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/negative-z-index-behind-in-flow.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/negative-z-index-behind-in-flow.windows.png
index 9831acc..34dfc5d 100644
Binary files a/src/AngleSharp.Renderer.Tests/verification-assets/negative-z-index-behind-in-flow.windows.png and b/src/AngleSharp.Renderer.Tests/verification-assets/negative-z-index-behind-in-flow.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/opacity-fades-a-box-over-a-white-background.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/opacity-fades-a-box-over-a-white-background.linux.png
new file mode 100644
index 0000000..02b188e
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/opacity-fades-a-box-over-a-white-background.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/opacity-fades-a-box-over-a-white-background.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/opacity-fades-a-box-over-a-white-background.macos.png
new file mode 100644
index 0000000..76c7c7c
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/opacity-fades-a-box-over-a-white-background.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/opacity-fades-a-box-over-a-white-background.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/opacity-fades-a-box-over-a-white-background.windows.png
new file mode 100644
index 0000000..02b188e
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/opacity-fades-a-box-over-a-white-background.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-box-shadow-following-border-radius.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-box-shadow-following-border-radius.linux.png
new file mode 100644
index 0000000..a1cb104
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-box-shadow-following-border-radius.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-box-shadow-following-border-radius.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-box-shadow-following-border-radius.macos.png
new file mode 100644
index 0000000..83932c9
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-box-shadow-following-border-radius.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-box-shadow-following-border-radius.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-box-shadow-following-border-radius.windows.png
new file mode 100644
index 0000000..a1cb104
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-box-shadow-following-border-radius.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-elliptical-border-radius-corners.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-elliptical-border-radius-corners.linux.png
new file mode 100644
index 0000000..4b1f862
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-elliptical-border-radius-corners.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-elliptical-border-radius-corners.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-elliptical-border-radius-corners.macos.png
new file mode 100644
index 0000000..dca1654
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-elliptical-border-radius-corners.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-elliptical-border-radius-corners.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-elliptical-border-radius-corners.windows.png
new file mode 100644
index 0000000..4b1f862
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-elliptical-border-radius-corners.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-inset-box-shadow.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-inset-box-shadow.linux.png
new file mode 100644
index 0000000..cc68e58
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-inset-box-shadow.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-inset-box-shadow.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-inset-box-shadow.macos.png
new file mode 100644
index 0000000..70699f2
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-inset-box-shadow.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-inset-box-shadow.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-inset-box-shadow.windows.png
new file mode 100644
index 0000000..cc68e58
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-inset-box-shadow.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-middle-of-tall-page-at-an-arbitrary-settable-scroll-offset.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-middle-of-tall-page-at-an-arbitrary-settable-scroll-offset.linux.png
new file mode 100644
index 0000000..ae09a7e
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-middle-of-tall-page-at-an-arbitrary-settable-scroll-offset.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-middle-of-tall-page-at-an-arbitrary-settable-scroll-offset.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-middle-of-tall-page-at-an-arbitrary-settable-scroll-offset.macos.png
new file mode 100644
index 0000000..ae09a7e
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-middle-of-tall-page-at-an-arbitrary-settable-scroll-offset.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-middle-of-tall-page-at-an-arbitrary-settable-scroll-offset.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-middle-of-tall-page-at-an-arbitrary-settable-scroll-offset.windows.png
new file mode 100644
index 0000000..ae09a7e
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-middle-of-tall-page-at-an-arbitrary-settable-scroll-offset.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-box-shadows-layered.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-box-shadows-layered.linux.png
new file mode 100644
index 0000000..93d3b2d
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-box-shadows-layered.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-box-shadows-layered.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-box-shadows-layered.macos.png
new file mode 100644
index 0000000..93d3b2d
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-box-shadows-layered.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-box-shadows-layered.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-box-shadows-layered.windows.png
new file mode 100644
index 0000000..93d3b2d
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-box-shadows-layered.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-text-shadows-layered.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-text-shadows-layered.linux.png
new file mode 100644
index 0000000..d015ef6
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-text-shadows-layered.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-text-shadows-layered.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-text-shadows-layered.macos.png
new file mode 100644
index 0000000..3c2af23
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-text-shadows-layered.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-text-shadows-layered.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-text-shadows-layered.windows.png
new file mode 100644
index 0000000..6230425
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-multiple-text-shadows-layered.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-only-bottom-of-tall-page-when-scroll-offset-is-large-enough.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-only-bottom-of-tall-page-when-scroll-offset-is-large-enough.linux.png
new file mode 100644
index 0000000..b71e7bf
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-only-bottom-of-tall-page-when-scroll-offset-is-large-enough.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-only-bottom-of-tall-page-when-scroll-offset-is-large-enough.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-only-bottom-of-tall-page-when-scroll-offset-is-large-enough.macos.png
new file mode 100644
index 0000000..b71e7bf
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-only-bottom-of-tall-page-when-scroll-offset-is-large-enough.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-only-bottom-of-tall-page-when-scroll-offset-is-large-enough.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-only-bottom-of-tall-page-when-scroll-offset-is-large-enough.windows.png
new file mode 100644
index 0000000..b71e7bf
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-only-bottom-of-tall-page-when-scroll-offset-is-large-enough.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-outset-box-shadow.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-outset-box-shadow.linux.png
new file mode 100644
index 0000000..242d321
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-outset-box-shadow.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-outset-box-shadow.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-outset-box-shadow.macos.png
new file mode 100644
index 0000000..a2de019
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-outset-box-shadow.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-outset-box-shadow.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-outset-box-shadow.windows.png
new file mode 100644
index 0000000..242d321
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-outset-box-shadow.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-own-background-behind-own-text.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-own-background-behind-own-text.linux.png
new file mode 100644
index 0000000..b8ca720
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-own-background-behind-own-text.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-own-background-behind-own-text.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-own-background-behind-own-text.macos.png
new file mode 100644
index 0000000..a931876
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-own-background-behind-own-text.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-own-background-behind-own-text.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-own-background-behind-own-text.windows.png
new file mode 100644
index 0000000..8b3167f
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-own-background-behind-own-text.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-per-corner-different-border-radii.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-per-corner-different-border-radii.linux.png
new file mode 100644
index 0000000..3b7ae9e
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-per-corner-different-border-radii.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-per-corner-different-border-radii.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-per-corner-different-border-radii.macos.png
new file mode 100644
index 0000000..dbb799e
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-per-corner-different-border-radii.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-per-corner-different-border-radii.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-per-corner-different-border-radii.windows.png
new file mode 100644
index 0000000..3b7ae9e
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-per-corner-different-border-radii.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-pill-shape-from-clamped-border-radius.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-pill-shape-from-clamped-border-radius.linux.png
new file mode 100644
index 0000000..9ce7134
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-pill-shape-from-clamped-border-radius.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-pill-shape-from-clamped-border-radius.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-pill-shape-from-clamped-border-radius.macos.png
new file mode 100644
index 0000000..8d1099e
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-pill-shape-from-clamped-border-radius.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-pill-shape-from-clamped-border-radius.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-pill-shape-from-clamped-border-radius.windows.png
new file mode 100644
index 0000000..9ce7134
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-pill-shape-from-clamped-border-radius.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-text-shadow.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-text-shadow.linux.png
new file mode 100644
index 0000000..79301f5
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-text-shadow.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-text-shadow.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-text-shadow.macos.png
new file mode 100644
index 0000000..edaa040
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-text-shadow.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-text-shadow.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-text-shadow.windows.png
new file mode 100644
index 0000000..e367b61
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-text-shadow.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-top-of-tall-page-when-unscrolled.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-top-of-tall-page-when-unscrolled.linux.png
new file mode 100644
index 0000000..9633231
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-top-of-tall-page-when-unscrolled.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-top-of-tall-page-when-unscrolled.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-top-of-tall-page-when-unscrolled.macos.png
new file mode 100644
index 0000000..9633231
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-top-of-tall-page-when-unscrolled.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-top-of-tall-page-when-unscrolled.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-top-of-tall-page-when-unscrolled.windows.png
new file mode 100644
index 0000000..9633231
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-top-of-tall-page-when-unscrolled.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-uniform-rounded-box-background-and-border.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-uniform-rounded-box-background-and-border.linux.png
new file mode 100644
index 0000000..5699fb4
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-uniform-rounded-box-background-and-border.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-uniform-rounded-box-background-and-border.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-uniform-rounded-box-background-and-border.macos.png
new file mode 100644
index 0000000..5a5f70a
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-uniform-rounded-box-background-and-border.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/paints-uniform-rounded-box-background-and-border.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/paints-uniform-rounded-box-background-and-border.windows.png
new file mode 100644
index 0000000..5699fb4
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/paints-uniform-rounded-box-background-and-border.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/positions-and-sizes-no-repeat-background-image.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/positions-and-sizes-no-repeat-background-image.linux.png
new file mode 100644
index 0000000..af7bf92
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/positions-and-sizes-no-repeat-background-image.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/positions-and-sizes-no-repeat-background-image.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/positions-and-sizes-no-repeat-background-image.macos.png
new file mode 100644
index 0000000..af7bf92
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/positions-and-sizes-no-repeat-background-image.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/positions-and-sizes-no-repeat-background-image.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/positions-and-sizes-no-repeat-background-image.windows.png
new file mode 100644
index 0000000..af7bf92
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/positions-and-sizes-no-repeat-background-image.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/pre-white-space-preserves-indentation-and-line-breaks.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/pre-white-space-preserves-indentation-and-line-breaks.linux.png
new file mode 100644
index 0000000..93f8d84
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/pre-white-space-preserves-indentation-and-line-breaks.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/pre-white-space-preserves-indentation-and-line-breaks.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/pre-white-space-preserves-indentation-and-line-breaks.macos.png
new file mode 100644
index 0000000..6700aea
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/pre-white-space-preserves-indentation-and-line-breaks.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/pre-white-space-preserves-indentation-and-line-breaks.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/pre-white-space-preserves-indentation-and-line-breaks.windows.png
new file mode 100644
index 0000000..e5124e8
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/pre-white-space-preserves-indentation-and-line-breaks.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-form-control-gallery-with-default-styling.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-form-control-gallery-with-default-styling.linux.png
new file mode 100644
index 0000000..8656680
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-form-control-gallery-with-default-styling.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-form-control-gallery-with-default-styling.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-form-control-gallery-with-default-styling.macos.png
new file mode 100644
index 0000000..abb8607
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-form-control-gallery-with-default-styling.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-form-control-gallery-with-default-styling.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-form-control-gallery-with-default-styling.windows.png
new file mode 100644
index 0000000..c88806b
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-form-control-gallery-with-default-styling.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-nested-list-with-independent-numbering.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-nested-list-with-independent-numbering.linux.png
new file mode 100644
index 0000000..c47d6da
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-nested-list-with-independent-numbering.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-nested-list-with-independent-numbering.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-nested-list-with-independent-numbering.macos.png
new file mode 100644
index 0000000..a6e5126
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-nested-list-with-independent-numbering.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-nested-list-with-independent-numbering.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-nested-list-with-independent-numbering.windows.png
new file mode 100644
index 0000000..e08b1a6
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-nested-list-with-independent-numbering.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-ordered-list-with-decimal-markers.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-ordered-list-with-decimal-markers.linux.png
new file mode 100644
index 0000000..3598e55
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-ordered-list-with-decimal-markers.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-ordered-list-with-decimal-markers.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-ordered-list-with-decimal-markers.macos.png
new file mode 100644
index 0000000..10af8c9
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-ordered-list-with-decimal-markers.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-ordered-list-with-decimal-markers.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-ordered-list-with-decimal-markers.windows.png
new file mode 100644
index 0000000..3fe176e
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-ordered-list-with-decimal-markers.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-square-and-circle-list-style-types.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-square-and-circle-list-style-types.linux.png
new file mode 100644
index 0000000..772f941
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-square-and-circle-list-style-types.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-square-and-circle-list-style-types.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-square-and-circle-list-style-types.macos.png
new file mode 100644
index 0000000..edecbed
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-square-and-circle-list-style-types.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-square-and-circle-list-style-types.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-square-and-circle-list-style-types.windows.png
new file mode 100644
index 0000000..95c3e2d
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-square-and-circle-list-style-types.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-styled-list-items-with-background-color.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-styled-list-items-with-background-color.linux.png
new file mode 100644
index 0000000..3d77f1c
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-styled-list-items-with-background-color.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-styled-list-items-with-background-color.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-styled-list-items-with-background-color.macos.png
new file mode 100644
index 0000000..882cea7
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-styled-list-items-with-background-color.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-styled-list-items-with-background-color.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-styled-list-items-with-background-color.windows.png
new file mode 100644
index 0000000..485d98d
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-styled-list-items-with-background-color.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-unordered-list-with-disc-bullets.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-unordered-list-with-disc-bullets.linux.png
new file mode 100644
index 0000000..c2dfb27
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-unordered-list-with-disc-bullets.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-unordered-list-with-disc-bullets.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-unordered-list-with-disc-bullets.macos.png
new file mode 100644
index 0000000..63e5e0c
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-unordered-list-with-disc-bullets.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/renders-unordered-list-with-disc-bullets.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/renders-unordered-list-with-disc-bullets.windows.png
new file mode 100644
index 0000000..99cc9b8
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/renders-unordered-list-with-disc-bullets.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/rotates-a-box-around-its-default-center.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/rotates-a-box-around-its-default-center.linux.png
new file mode 100644
index 0000000..099bdd3
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/rotates-a-box-around-its-default-center.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/rotates-a-box-around-its-default-center.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/rotates-a-box-around-its-default-center.macos.png
new file mode 100644
index 0000000..1d4d004
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/rotates-a-box-around-its-default-center.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/rotates-a-box-around-its-default-center.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/rotates-a-box-around-its-default-center.windows.png
new file mode 100644
index 0000000..099bdd3
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/rotates-a-box-around-its-default-center.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/scales-a-box-around-a-custom-transform-origin.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/scales-a-box-around-a-custom-transform-origin.linux.png
new file mode 100644
index 0000000..91ef7a4
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/scales-a-box-around-a-custom-transform-origin.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/scales-a-box-around-a-custom-transform-origin.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/scales-a-box-around-a-custom-transform-origin.macos.png
new file mode 100644
index 0000000..91ef7a4
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/scales-a-box-around-a-custom-transform-origin.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/scales-a-box-around-a-custom-transform-origin.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/scales-a-box-around-a-custom-transform-origin.windows.png
new file mode 100644
index 0000000..91ef7a4
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/scales-a-box-around-a-custom-transform-origin.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/scales-background-image-to-cover-box.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/scales-background-image-to-cover-box.linux.png
new file mode 100644
index 0000000..901e467
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/scales-background-image-to-cover-box.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/scales-background-image-to-cover-box.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/scales-background-image-to-cover-box.macos.png
new file mode 100644
index 0000000..901e467
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/scales-background-image-to-cover-box.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/scales-background-image-to-cover-box.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/scales-background-image-to-cover-box.windows.png
new file mode 100644
index 0000000..901e467
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/scales-background-image-to-cover-box.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/tiles-background-image-across-box-by-default.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/tiles-background-image-across-box-by-default.linux.png
new file mode 100644
index 0000000..570a9c3
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/tiles-background-image-across-box-by-default.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/tiles-background-image-across-box-by-default.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/tiles-background-image-across-box-by-default.macos.png
new file mode 100644
index 0000000..570a9c3
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/tiles-background-image-across-box-by-default.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/tiles-background-image-across-box-by-default.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/tiles-background-image-across-box-by-default.windows.png
new file mode 100644
index 0000000..570a9c3
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/tiles-background-image-across-box-by-default.windows.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/translates-and-scales-a-chained-transformed-box.linux.png b/src/AngleSharp.Renderer.Tests/verification-assets/translates-and-scales-a-chained-transformed-box.linux.png
new file mode 100644
index 0000000..a1aceb2
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/translates-and-scales-a-chained-transformed-box.linux.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/translates-and-scales-a-chained-transformed-box.macos.png b/src/AngleSharp.Renderer.Tests/verification-assets/translates-and-scales-a-chained-transformed-box.macos.png
new file mode 100644
index 0000000..a1aceb2
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/translates-and-scales-a-chained-transformed-box.macos.png differ
diff --git a/src/AngleSharp.Renderer.Tests/verification-assets/translates-and-scales-a-chained-transformed-box.windows.png b/src/AngleSharp.Renderer.Tests/verification-assets/translates-and-scales-a-chained-transformed-box.windows.png
new file mode 100644
index 0000000..a1aceb2
Binary files /dev/null and b/src/AngleSharp.Renderer.Tests/verification-assets/translates-and-scales-a-chained-transformed-box.windows.png differ
diff --git a/src/AngleSharp.Renderer/AngleSharp.Renderer.csproj b/src/AngleSharp.Renderer/AngleSharp.Renderer.csproj
index 1f67325..d3ea91c 100644
--- a/src/AngleSharp.Renderer/AngleSharp.Renderer.csproj
+++ b/src/AngleSharp.Renderer/AngleSharp.Renderer.csproj
@@ -20,8 +20,8 @@
     <EmbedUntrackedSources>true</EmbedUntrackedSources>
     <IncludeSymbols>true</IncludeSymbols>
     <SymbolPackageFormat>snupkg</SymbolPackageFormat>
-    <AngleSharpVersion Condition=" '$(AngleSharpVersion)' == '' ">1.8.0</AngleSharpVersion>
-    <AngleSharpCssVersion Condition=" '$(AngleSharpCssVersion)' == '' ">1.1.0</AngleSharpCssVersion>
+    <AngleSharpVersion Condition=" '$(AngleSharpVersion)' == '' ">1.8.1</AngleSharpVersion>
+    <AngleSharpCssVersion Condition=" '$(AngleSharpCssVersion)' == '' ">1.1.1</AngleSharpCssVersion>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/src/AngleSharp.Renderer/CssAnimationTracker.cs b/src/AngleSharp.Renderer/CssAnimationTracker.cs
new file mode 100644
index 0000000..70274bd
--- /dev/null
+++ b/src/AngleSharp.Renderer/CssAnimationTracker.cs
@@ -0,0 +1,336 @@
+using AngleSharp.Css.Dom;
+using AngleSharp.Dom;
+using System.Globalization;
+using System.Linq;
+
+namespace AngleSharp.Renderer;
+
+/// <summary>
+/// `animation-direction`, mirroring <see cref="AngleSharp.Css.Dom.AnimationDirection"/>'s keyword
+/// set - not reused directly because that enum lives on the (internal-heavy) declaration types this
+/// renderer otherwise avoids depending on; a small local copy keeps this tracker self-contained.
+/// </summary>
+internal enum CssAnimationDirection
+{
+    Normal,
+    Reverse,
+    Alternate,
+    AlternateReverse,
+}
+
+internal enum CssAnimationFillMode
+{
+    None,
+    Forwards,
+    Backwards,
+    Both,
+}
+
+internal readonly record struct CssAnimationSpec(
+    string Name,
+    double DurationMs,
+    double DelayMs,
+    CssTimingFunction TimingFunction,
+    double IterationCount,
+    CssAnimationDirection Direction,
+    CssAnimationFillMode FillMode);
+
+internal sealed record CssKeyframeStop(double Position, IReadOnlyDictionary<string, string> PropertyValues);
+
+/// <summary>
+/// Tracks CSS `animation`s the same way <see cref="CssTransitionTracker"/> tracks `transition`s -
+/// against the same caller-pumped virtual clock (<see cref="InteractiveHtmlRendererState.AdvanceTime"/>)
+/// and the same fixed, explicit property whitelist (<see cref="CssValueInterpolation"/>) - but with
+/// a different trigger model: a `transition` starts only when some other state change (e.g. `:hover`)
+/// makes its target property's *natural* value change, whereas an `animation` simply starts running
+/// the first moment this tracker observes it on an element (there is no "before" state to compare
+/// against - an animation's own `@keyframes` supply both endpoints directly), and keeps running -
+/// looping per `animation-iteration-count` - for as long as the element keeps declaring that
+/// `animation-name`, independent of `:hover` or anything else.
+/// </summary>
+internal sealed class CssAnimationTracker
+{
+    private readonly Dictionary<(IElement Element, string Name), double> _startTimesMs = [];
+
+    /// <summary>
+    /// Gets the animated value currently in effect for <paramref name="property"/> on
+    /// <paramref name="element"/>, or null if no running `animation` on this element currently
+    /// overrides it (no `animation-name`, the named `@keyframes` rule does not exist, the property
+    /// is not declared in the bracketing keyframes, the animation has not started yet and
+    /// `animation-fill-mode` does not include `backwards`, or it already ended and
+    /// `animation-fill-mode` does not include `forwards`) - a signal to the caller to use whatever
+    /// value it would otherwise have used.
+    /// </summary>
+    public string? GetAnimatedValue(IElement element, string property, double clockMs)
+    {
+        var style = element.ComputeCurrentStyle();
+        var specs = ParseAnimationSpecs(style);
+
+        if (specs.Count == 0)
+        {
+            return null;
+        }
+
+        // Multiple simultaneous animations can target the same property - the one declared last in
+        // `animation-name` wins, per spec, so this simply lets a later match overwrite an earlier
+        // one rather than stopping at the first.
+        string? result = null;
+
+        foreach (var spec in specs)
+        {
+            var value = GetAnimatedValueForSpec(element, spec, property, clockMs);
+
+            if (value is not null)
+            {
+                result = value;
+            }
+        }
+
+        return result;
+    }
+
+    private string? GetAnimatedValueForSpec(IElement element, CssAnimationSpec spec, string property, double clockMs)
+    {
+        var keyframes = FindKeyframeStops(element, spec.Name);
+
+        if (keyframes is not { Count: > 0 })
+        {
+            return null;
+        }
+
+        // Pinned to virtual-clock zero the first time this (element, animation-name) pair is
+        // observed, not to whatever the clock happens to read at that moment - an animation begins
+        // playing at document-ready (clock zero) in a real browser regardless of when a viewer
+        // first looks at it, and the same has to hold here regardless of whether a caller happens
+        // to call AdvanceTime one or several times before ever painting for the first time.
+        if (!_startTimesMs.ContainsKey((element, spec.Name)))
+        {
+            _startTimesMs[(element, spec.Name)] = 0d;
+        }
+
+        var startMs = _startTimesMs[(element, spec.Name)];
+        var elapsedMs = clockMs - startMs - spec.DelayMs;
+        var totalDurationMs = spec.DurationMs * spec.IterationCount;
+
+        if (elapsedMs < 0d)
+        {
+            if (spec.FillMode is not (CssAnimationFillMode.Backwards or CssAnimationFillMode.Both))
+            {
+                return null;
+            }
+
+            elapsedMs = 0d;
+        }
+        else if (elapsedMs >= totalDurationMs && !double.IsPositiveInfinity(totalDurationMs))
+        {
+            if (spec.FillMode is not (CssAnimationFillMode.Forwards or CssAnimationFillMode.Both))
+            {
+                return null;
+            }
+
+            // Clamp to a hair before the end so the iteration/direction math below resolves to the
+            // very last instant of the final iteration, rather than rolling over into a
+            // (non-existent) next one.
+            elapsedMs = Math.Max(0d, totalDurationMs - 0.001d);
+        }
+
+        var iterationIndex = spec.DurationMs > 0d ? Math.Floor(elapsedMs / spec.DurationMs) : 0d;
+        var withinIterationMs = spec.DurationMs > 0d ? elapsedMs - (iterationIndex * spec.DurationMs) : 0d;
+        var rawProgress = spec.DurationMs > 0d ? withinIterationMs / spec.DurationMs : 1d;
+        var iterationRunsBackward = spec.Direction switch
+        {
+            CssAnimationDirection.Reverse => true,
+            CssAnimationDirection.Alternate => iterationIndex % 2d == 1d,
+            CssAnimationDirection.AlternateReverse => iterationIndex % 2d == 0d,
+            _ => false,
+        };
+        var progress = iterationRunsBackward ? 1d - rawProgress : rawProgress;
+        var eased = spec.TimingFunction.Evaluate(progress);
+
+        return InterpolateAtKeyframes(keyframes, property, eased);
+    }
+
+    private static string? InterpolateAtKeyframes(IReadOnlyList<CssKeyframeStop> stops, string property, double position)
+    {
+        if (position <= stops[0].Position)
+        {
+            return stops[0].PropertyValues.TryGetValue(property, out var value) ? value : null;
+        }
+
+        if (position >= stops[^1].Position)
+        {
+            return stops[^1].PropertyValues.TryGetValue(property, out var value) ? value : null;
+        }
+
+        var upperIndex = 0;
+
+        while (upperIndex < stops.Count && stops[upperIndex].Position < position)
+        {
+            upperIndex++;
+        }
+
+        var lower = stops[upperIndex - 1];
+        var upper = stops[upperIndex];
+        var hasLower = lower.PropertyValues.TryGetValue(property, out var lowerValue);
+        var hasUpper = upper.PropertyValues.TryGetValue(property, out var upperValue);
+
+        if (hasLower && hasUpper)
+        {
+            var span = upper.Position - lower.Position;
+            var subT = span > 0d ? (position - lower.Position) / span : 1d;
+            return CssValueInterpolation.Interpolate(property, lowerValue!, upperValue!, subT);
+        }
+
+        // Only one of the two bracketing keyframes declares this property - a defensible
+        // simplification (rather than searching further afield for the nearest declaring
+        // keyframe on either side, which the spec technically requires): use whichever edge
+        // actually declared a value instead of no override at all.
+        return hasLower ? lowerValue : hasUpper ? upperValue : null;
+    }
+
+    private static IReadOnlyList<CssKeyframeStop>? FindKeyframeStops(IElement element, string name)
+    {
+        var keyframesRule = element.Owner?.StyleSheets
+            .OfType<ICssStyleSheet>()
+            .SelectMany(sheet => sheet.Rules)
+            .OfType<ICssKeyframesRule>()
+            .FirstOrDefault(rule => string.Equals(rule.Name, name, StringComparison.Ordinal));
+
+        if (keyframesRule is null)
+        {
+            return null;
+        }
+
+        var stops = new List<CssKeyframeStop>();
+
+        foreach (var keyframe in keyframesRule.Rules.OfType<ICssKeyframeRule>())
+        {
+            var propertyValues = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase);
+
+            foreach (var property in CssValueInterpolation.InterpolatableProperties.Keys)
+            {
+                var kind = CssValueInterpolation.KindOf(property);
+                var value = CssValueInterpolation.ReadNaturalValue(keyframe.Style, property, kind);
+
+                if (value is not null)
+                {
+                    propertyValues[property] = value;
+                }
+            }
+
+            foreach (var position in ParseKeyframeSelector(keyframe.KeyText))
+            {
+                stops.Add(new CssKeyframeStop(position, propertyValues));
+            }
+        }
+
+        return stops.Count > 0 ? [.. stops.OrderBy(s => s.Position)] : null;
+    }
+
+    private static IEnumerable<double> ParseKeyframeSelector(string keyText)
+    {
+        foreach (var token in keyText.Split(',', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries))
+        {
+            if (token.Equals("from", StringComparison.OrdinalIgnoreCase))
+            {
+                yield return 0d;
+            }
+            else if (token.Equals("to", StringComparison.OrdinalIgnoreCase))
+            {
+                yield return 1d;
+            }
+            else if (token.EndsWith('%') &&
+                double.TryParse(token[..^1], NumberStyles.Float, CultureInfo.InvariantCulture, out var percentage))
+            {
+                yield return Math.Clamp(percentage / 100d, 0d, 1d);
+            }
+        }
+    }
+
+    /// <summary>
+    /// Reads `animation-name`/`-duration`/`-delay`/`-timing-function`/`-iteration-count`/
+    /// `-direction`/`-fill-mode` from an element's own computed style and builds one
+    /// <see cref="CssAnimationSpec"/> per named animation, cycling the shorter lists against a
+    /// longer `animation-name` list per spec. AngleSharp.Css used to report the literal string
+    /// `"initial"` (not each property's own actual initial value) for any of these longhands the
+    /// `animation` shorthand did not explicitly set - fixed upstream, confirmed empirically each
+    /// now resolves to its real initial value (`normal`/`none`/`0s`/`running`) directly, so
+    /// <see cref="ResolveListValue"/> only has to handle the "list shorter than `animation-name`"
+    /// cycling case per spec, not a literal-`"initial"` substitution too.
+    /// </summary>
+    private static List<CssAnimationSpec> ParseAnimationSpecs(ICssStyleDeclaration style)
+    {
+        var nameList = HtmlRenderer.SplitTopLevelCommaList(style.GetPropertyValue("animation-name"))
+            .Where(n => !n.Trim().Equals("none", StringComparison.OrdinalIgnoreCase))
+            .ToArray();
+
+        if (nameList.Length == 0)
+        {
+            return [];
+        }
+
+        var durationList = HtmlRenderer.SplitTopLevelCommaList(style.GetPropertyValue("animation-duration"));
+        var delayList = HtmlRenderer.SplitTopLevelCommaList(style.GetPropertyValue("animation-delay"));
+        var timingList = HtmlRenderer.SplitTopLevelCommaList(style.GetPropertyValue("animation-timing-function"));
+        var iterationList = HtmlRenderer.SplitTopLevelCommaList(style.GetPropertyValue("animation-iteration-count"));
+        var directionList = HtmlRenderer.SplitTopLevelCommaList(style.GetPropertyValue("animation-direction"));
+        var fillModeList = HtmlRenderer.SplitTopLevelCommaList(style.GetPropertyValue("animation-fill-mode"));
+
+        var result = new List<CssAnimationSpec>(nameList.Length);
+
+        for (var i = 0; i < nameList.Length; i++)
+        {
+            var name = nameList[i].Trim();
+            var duration = ResolveListValue(durationList, i, "0s") is { } durationText ? CssValueInterpolation.ParseTimeValue(durationText) : 0d;
+            var delay = ResolveListValue(delayList, i, "0s") is { } delayText ? CssValueInterpolation.ParseTimeValue(delayText) : 0d;
+            var timingFunction = ResolveListValue(timingList, i, "linear") is { } timingText ? CssValueInterpolation.ParseTimingFunction(timingText) : CssTimingFunction.Linear;
+            var iterationCount = ParseIterationCount(ResolveListValue(iterationList, i, "1"));
+            var direction = ParseDirection(ResolveListValue(directionList, i, "normal"));
+            var fillMode = ParseFillMode(ResolveListValue(fillModeList, i, "none"));
+
+            result.Add(new CssAnimationSpec(name, duration, delay, timingFunction, iterationCount, direction, fillMode));
+        }
+
+        return result;
+    }
+
+    // Cycles a shorter list against a longer one per spec; an empty list (the property was never
+    // set at all) falls back to the caller-supplied initial value.
+    private static string? ResolveListValue(string[] list, int index, string initialValue) =>
+        list.Length == 0 ? initialValue : list[index % list.Length].Trim();
+
+    private static double ParseIterationCount(string? value)
+    {
+        if (string.IsNullOrWhiteSpace(value))
+        {
+            return 1d;
+        }
+
+        var trimmed = value.Trim();
+
+        if (trimmed.Equals("infinite", StringComparison.OrdinalIgnoreCase))
+        {
+            return double.PositiveInfinity;
+        }
+
+        return double.TryParse(trimmed, NumberStyles.Float, CultureInfo.InvariantCulture, out var count) && count >= 0d
+            ? count
+            : 1d;
+    }
+
+    private static CssAnimationDirection ParseDirection(string? value) => value?.Trim().ToLowerInvariant() switch
+    {
+        "reverse" => CssAnimationDirection.Reverse,
+        "alternate" => CssAnimationDirection.Alternate,
+        "alternate-reverse" => CssAnimationDirection.AlternateReverse,
+        _ => CssAnimationDirection.Normal,
+    };
+
+    private static CssAnimationFillMode ParseFillMode(string? value) => value?.Trim().ToLowerInvariant() switch
+    {
+        "forwards" => CssAnimationFillMode.Forwards,
+        "backwards" => CssAnimationFillMode.Backwards,
+        "both" => CssAnimationFillMode.Both,
+        _ => CssAnimationFillMode.None,
+    };
+}
diff --git a/src/AngleSharp.Renderer/CssTransitionTracker.cs b/src/AngleSharp.Renderer/CssTransitionTracker.cs
new file mode 100644
index 0000000..77cd96b
--- /dev/null
+++ b/src/AngleSharp.Renderer/CssTransitionTracker.cs
@@ -0,0 +1,190 @@
+using AngleSharp.Css.Dom;
+using AngleSharp.Dom;
+using System.Linq;
+
+namespace AngleSharp.Renderer;
+
+internal readonly record struct CssTransitionSpec(double DurationMs, double DelayMs, CssTimingFunction TimingFunction);
+
+internal sealed record CssTransitionRun(string From, string To, double StartMs, CssTransitionSpec Spec);
+
+/// <summary>
+/// Tracks in-flight CSS `transition`s for an interactive document and computes each one's current
+/// interpolated value against a caller-pumped virtual clock (<see cref="AdvanceTime"/>) - the
+/// mechanism that lets <see cref="InteractiveHtmlRendererState"/> paint a `:hover` transition
+/// mid-flight instead of only ever the resting or fully-hovered extremes. There is no real-time
+/// timer anywhere in this renderer; a caller drives the clock explicitly, exactly the way it
+/// already drives mouse position and scroll offsets for the same interactive harness. Value
+/// interpolation itself (which properties, how to lerp/re-serialize each) is shared with
+/// `animation` via <see cref="CssValueInterpolation"/>.
+/// </summary>
+internal sealed class CssTransitionTracker
+{
+    private readonly Dictionary<(IElement Element, string Property), CssTransitionRun> _activeRuns = [];
+    private readonly Dictionary<(IElement Element, string Property), string> _lastKnownValues = [];
+    private double _clockMs;
+
+    /// <summary>
+    /// Advances the virtual clock every active transition is measured against.
+    /// </summary>
+    public void AdvanceTime(TimeSpan delta) => _clockMs += delta.TotalMilliseconds;
+
+    /// <summary>
+    /// Gets the interpolated value currently in effect for <paramref name="property"/> on
+    /// <paramref name="element"/> if a transition is actively running for it (mid-delay returns the
+    /// starting value; a completed run is pruned and returns null so the natural value shows), or
+    /// null if none is active - the common case, and a signal to the caller to use whatever value
+    /// it would otherwise have used.
+    /// </summary>
+    public string? GetTransitioningValue(IElement element, string property)
+    {
+        var key = (element, property);
+
+        if (!_activeRuns.TryGetValue(key, out var run))
+        {
+            return null;
+        }
+
+        var elapsed = _clockMs - run.StartMs - run.Spec.DelayMs;
+
+        if (elapsed <= 0d)
+        {
+            return run.From;
+        }
+
+        if (elapsed >= run.Spec.DurationMs)
+        {
+            _activeRuns.Remove(key);
+            return null;
+        }
+
+        var t = run.Spec.DurationMs > 0d ? elapsed / run.Spec.DurationMs : 1d;
+        var eased = run.Spec.TimingFunction.Evaluate(t);
+        return CssValueInterpolation.Interpolate(property, run.From, run.To, eased);
+    }
+
+    /// <summary>
+    /// Records each of the given elements' *current* natural value for every transitionable
+    /// property, before some state change (e.g. a forced pseudo-class) is about to happen - once
+    /// that change is applied there is no way to ask AngleSharp.Css what the value used to be, so
+    /// this is the only chance to capture a "from" baseline for a property that is not already
+    /// mid-transition (one that is skips the snapshot: its live interpolated value, read via
+    /// <see cref="GetTransitioningValue"/>, is already the correct "from" for a reversal). Must be
+    /// called before the state change; <see cref="NotifyElementsMayHaveChanged"/> is called after.
+    /// </summary>
+    public void CaptureNaturalValuesBeforeChange(IEnumerable<IElement> elements)
+    {
+        foreach (var element in elements)
+        {
+            var style = element.ComputeCurrentStyle();
+
+            foreach (var (property, kind) in CssValueInterpolation.InterpolatableProperties)
+            {
+                var key = (element, property);
+
+                if (_activeRuns.ContainsKey(key))
+                {
+                    continue;
+                }
+
+                var naturalValue = CssValueInterpolation.ReadNaturalValue(style, property, kind);
+
+                if (naturalValue is not null)
+                {
+                    _lastKnownValues[key] = naturalValue;
+                }
+            }
+        }
+    }
+
+    /// <summary>
+    /// Re-evaluates every transitionable property this tracker knows about for each of the given
+    /// elements against their current (post-state-change) natural computed style, starting a new
+    /// transition run for any that changed - or, if a transition was already running and reversed
+    /// mid-flight, restarting it from the value currently on screen rather than jumping back to the
+    /// old resting value. Called whenever something that can affect computed style changes for a
+    /// set of elements (today: the forced `:hover` pseudo-class chain in
+    /// <see cref="InteractiveHtmlRendererState"/>).
+    /// </summary>
+    public void NotifyElementsMayHaveChanged(IEnumerable<IElement> elements)
+    {
+        foreach (var element in elements)
+        {
+            var style = element.ComputeCurrentStyle();
+            var specsByProperty = ParseTransitionSpecs(style);
+
+            foreach (var (property, kind) in CssValueInterpolation.InterpolatableProperties)
+            {
+                if (!specsByProperty.TryGetValue(property, out var spec))
+                {
+                    continue;
+                }
+
+                var naturalValue = CssValueInterpolation.ReadNaturalValue(style, property, kind);
+
+                if (naturalValue is null)
+                {
+                    continue;
+                }
+
+                var key = (element, property);
+                var currentValue = GetTransitioningValue(element, property)
+                    ?? (_lastKnownValues.TryGetValue(key, out var last) ? last : naturalValue);
+
+                if (CssValueInterpolation.ValuesAreEquivalent(kind, currentValue, naturalValue))
+                {
+                    _activeRuns.Remove(key);
+                }
+                else
+                {
+                    _activeRuns[key] = new CssTransitionRun(currentValue, naturalValue, _clockMs, spec);
+                }
+
+                _lastKnownValues[key] = naturalValue;
+            }
+        }
+    }
+
+    /// <summary>
+    /// Reads `transition-property`/`-duration`/`-delay`/`-timing-function` from an element's own
+    /// computed style and builds one <see cref="CssTransitionSpec"/> per named property -
+    /// `transition-property: all` (or an absent/unparseable list) expands to every property
+    /// <see cref="CssValueInterpolation"/> knows how to interpolate rather than literally every CSS
+    /// property. Per spec, the duration/delay/timing-function lists are consumed cyclically against
+    /// the (possibly longer) property list when they have fewer entries.
+    /// </summary>
+    private static Dictionary<string, CssTransitionSpec> ParseTransitionSpecs(ICssStyleDeclaration style)
+    {
+        var propertyList = HtmlRenderer.SplitTopLevelCommaList(style.GetPropertyValue("transition-property"));
+        var durationList = HtmlRenderer.SplitTopLevelCommaList(style.GetPropertyValue("transition-duration"));
+        var delayList = HtmlRenderer.SplitTopLevelCommaList(style.GetPropertyValue("transition-delay"));
+        var timingList = HtmlRenderer.SplitTopLevelCommaList(style.GetPropertyValue("transition-timing-function"));
+
+        var expandedProperties = propertyList.Length == 0 || propertyList.Any(p => p.Trim().Equals("all", StringComparison.OrdinalIgnoreCase))
+            ? [.. CssValueInterpolation.InterpolatableProperties.Keys]
+            : propertyList;
+
+        var result = new Dictionary<string, CssTransitionSpec>(StringComparer.OrdinalIgnoreCase);
+
+        for (var i = 0; i < expandedProperties.Length; i++)
+        {
+            var property = expandedProperties[i].Trim();
+
+            if (!CssValueInterpolation.InterpolatableProperties.ContainsKey(property))
+            {
+                continue;
+            }
+
+            var duration = durationList.Length > 0 ? CssValueInterpolation.ParseTimeValue(durationList[i % durationList.Length]) : 0d;
+            var delay = delayList.Length > 0 ? CssValueInterpolation.ParseTimeValue(delayList[i % delayList.Length]) : 0d;
+            var timingFunction = timingList.Length > 0 ? CssValueInterpolation.ParseTimingFunction(timingList[i % timingList.Length]) : CssTimingFunction.Linear;
+
+            if (duration > 0d)
+            {
+                result[property] = new CssTransitionSpec(duration, delay, timingFunction);
+            }
+        }
+
+        return result;
+    }
+}
diff --git a/src/AngleSharp.Renderer/CssValueInterpolation.cs b/src/AngleSharp.Renderer/CssValueInterpolation.cs
new file mode 100644
index 0000000..7e2e983
--- /dev/null
+++ b/src/AngleSharp.Renderer/CssValueInterpolation.cs
@@ -0,0 +1,248 @@
+using AngleSharp.Css.Dom;
+using AngleSharp.Css.Parser;
+using AngleSharp.Css.Values;
+using AngleSharp.Renderer.Rendering;
+using AngleSharp.Text;
+using System.Globalization;
+
+namespace AngleSharp.Renderer;
+
+/// <summary>
+/// Which kind of value an interpolatable CSS property carries, so it can be lerped and
+/// re-serialized correctly.
+/// </summary>
+internal enum CssInterpolationValueKind
+{
+    Color,
+    LengthPixels,
+    Number,
+}
+
+/// <summary>
+/// A parsed CSS easing function - either `cubic-bezier(x1, y1, x2, y2)` (which every named keyword
+/// - `ease`/`ease-in`/`ease-in-out`/`ease-out`/`linear` - normalizes to via AngleSharp.Css's own
+/// computed style, confirmed empirically) or `steps(count, start|end)`. Shared by `transition` and
+/// `animation`, since both use the identical CSS timing-function grammar and evaluation.
+/// </summary>
+internal readonly record struct CssTimingFunction(bool IsSteps, double X1, double Y1, double X2, double Y2, int StepCount, bool JumpAtStart)
+{
+    public static readonly CssTimingFunction Linear = CubicBezier(0d, 0d, 1d, 1d);
+
+    public static CssTimingFunction CubicBezier(double x1, double y1, double x2, double y2) =>
+        new(false, x1, y1, x2, y2, 0, false);
+
+    public static CssTimingFunction Steps(int count, bool jumpAtStart) =>
+        new(true, 0, 0, 0, 0, Math.Max(1, count), jumpAtStart);
+
+    /// <summary>
+    /// Evaluates this easing function at <paramref name="t"/> (0..1, the linear fraction of the
+    /// duration elapsed) and returns the eased progress (also 0..1).
+    /// </summary>
+    public double Evaluate(double t)
+    {
+        t = Math.Clamp(t, 0d, 1d);
+
+        if (IsSteps)
+        {
+            var step = JumpAtStart ? Math.Floor(t * StepCount) + 1d : Math.Floor(t * StepCount);
+            return Math.Clamp(step / StepCount, 0d, 1d);
+        }
+
+        return SolveCubicBezier(X1, Y1, X2, Y2, t);
+    }
+
+    // The standard "UnitBezier" technique browsers use: the curve's own parameter (call it u) is
+    // not the same as elapsed time t - t is the *x* coordinate of the curve, and the eased progress
+    // is the *y* coordinate of the point on the curve whose x equals t. Bisection search finds the
+    // u whose x(u) matches t closely enough, then evaluates y(u) - simpler to get right than
+    // Newton-Raphson and fast enough here, since this runs once per interpolated property per
+    // paint, not once per frame in a tight interactive render loop.
+    private static double SolveCubicBezier(double x1, double y1, double x2, double y2, double x)
+    {
+        if (x <= 0d)
+        {
+            return 0d;
+        }
+
+        if (x >= 1d)
+        {
+            return 1d;
+        }
+
+        var lo = 0d;
+        var hi = 1d;
+        var u = x;
+
+        for (var i = 0; i < 30; i++)
+        {
+            u = (lo + hi) / 2d;
+            var currentX = BezierComponent(u, x1, x2);
+
+            if (Math.Abs(currentX - x) < 0.0001d)
+            {
+                break;
+            }
+
+            if (currentX < x)
+            {
+                lo = u;
+            }
+            else
+            {
+                hi = u;
+            }
+        }
+
+        return BezierComponent(u, y1, y2);
+    }
+
+    // The cubic Bezier value at parameter u for control points (0,0), (p1,_), (p2,_), (1,1) - the
+    // endpoints are fixed at 0 and 1 for both x(u) and y(u) per the CSS timing-function definition,
+    // so only the two interior control coordinates are needed.
+    private static double BezierComponent(double u, double p1, double p2)
+    {
+        var v = 1d - u;
+        return (3d * v * v * u * p1) + (3d * v * u * u * p2) + (u * u * u);
+    }
+}
+
+/// <summary>
+/// Shared value-interpolation machinery for CSS `transition` (<see cref="CssTransitionTracker"/>)
+/// and `animation` (<see cref="CssAnimationTracker"/>) - both only ever animate a fixed, explicit
+/// whitelist of properties (colors, channel-wise; numeric lengths/`opacity`, plain numeric lerp),
+/// covering the overwhelming majority of real-world usage without a general CSS-value
+/// interpolation engine that would need to understand every property's own grammar, including ones
+/// this renderer does not otherwise resolve component-wise (`transform`/`filter`) - a deliberate,
+/// documented scope cut, not an oversight. `transition-property: all` (and an `animation` keyframe
+/// declaring any other property) is limited to this same whitelist for the same reason.
+/// </summary>
+internal static class CssValueInterpolation
+{
+    public static readonly IReadOnlyDictionary<string, CssInterpolationValueKind> InterpolatableProperties = new Dictionary<string, CssInterpolationValueKind>(StringComparer.OrdinalIgnoreCase)
+    {
+        ["background-color"] = CssInterpolationValueKind.Color,
+        ["color"] = CssInterpolationValueKind.Color,
+        ["border-top-color"] = CssInterpolationValueKind.Color,
+        ["border-right-color"] = CssInterpolationValueKind.Color,
+        ["border-bottom-color"] = CssInterpolationValueKind.Color,
+        ["border-left-color"] = CssInterpolationValueKind.Color,
+        ["opacity"] = CssInterpolationValueKind.Number,
+        ["width"] = CssInterpolationValueKind.LengthPixels,
+        ["height"] = CssInterpolationValueKind.LengthPixels,
+        ["font-size"] = CssInterpolationValueKind.LengthPixels,
+        ["margin-top"] = CssInterpolationValueKind.LengthPixels,
+        ["margin-right"] = CssInterpolationValueKind.LengthPixels,
+        ["margin-bottom"] = CssInterpolationValueKind.LengthPixels,
+        ["margin-left"] = CssInterpolationValueKind.LengthPixels,
+        ["padding-top"] = CssInterpolationValueKind.LengthPixels,
+        ["padding-right"] = CssInterpolationValueKind.LengthPixels,
+        ["padding-bottom"] = CssInterpolationValueKind.LengthPixels,
+        ["padding-left"] = CssInterpolationValueKind.LengthPixels,
+        ["border-top-width"] = CssInterpolationValueKind.LengthPixels,
+        ["border-right-width"] = CssInterpolationValueKind.LengthPixels,
+        ["border-bottom-width"] = CssInterpolationValueKind.LengthPixels,
+        ["border-left-width"] = CssInterpolationValueKind.LengthPixels,
+        ["top"] = CssInterpolationValueKind.LengthPixels,
+        ["left"] = CssInterpolationValueKind.LengthPixels,
+        ["right"] = CssInterpolationValueKind.LengthPixels,
+        ["bottom"] = CssInterpolationValueKind.LengthPixels,
+    };
+
+    public static CssInterpolationValueKind KindOf(string property) =>
+        InterpolatableProperties.TryGetValue(property, out var kind) ? kind : CssInterpolationValueKind.Number;
+
+    public static string? ReadNaturalValue(ICssStyleDeclaration style, string property, CssInterpolationValueKind kind)
+    {
+        var raw = property.Equals("opacity", StringComparison.OrdinalIgnoreCase)
+            ? style.GetOpacity()
+            : style.GetPropertyValue(property);
+
+        if (string.IsNullOrWhiteSpace(raw))
+        {
+            return null;
+        }
+
+        return kind switch
+        {
+            CssInterpolationValueKind.Color => raw,
+            CssInterpolationValueKind.Number => float.TryParse(raw.Trim(), NumberStyles.Float, CultureInfo.InvariantCulture, out _) ? raw.Trim() : null,
+            CssInterpolationValueKind.LengthPixels => float.IsNaN(HtmlRenderer.ParseLengthValue(raw, float.NaN, allowAuto: false)) ? null : raw,
+            _ => null,
+        };
+    }
+
+    public static bool ValuesAreEquivalent(CssInterpolationValueKind kind, string a, string b)
+    {
+        if (string.Equals(a, b, StringComparison.OrdinalIgnoreCase))
+        {
+            return true;
+        }
+
+        return kind switch
+        {
+            CssInterpolationValueKind.Color => HtmlRenderer.ParseColor(a, RenderColor.Transparent) == HtmlRenderer.ParseColor(b, RenderColor.Transparent),
+            CssInterpolationValueKind.Number or CssInterpolationValueKind.LengthPixels =>
+                Math.Abs(HtmlRenderer.ParseLengthValue(a, 0f, allowAuto: false) - HtmlRenderer.ParseLengthValue(b, 0f, allowAuto: false)) < 0.01f,
+            _ => false,
+        };
+    }
+
+    public static string Interpolate(string property, string from, string to, double t)
+    {
+        var kind = KindOf(property);
+
+        if (kind == CssInterpolationValueKind.Color)
+        {
+            var fromColor = HtmlRenderer.ParseColor(from, RenderColor.Transparent);
+            var toColor = HtmlRenderer.ParseColor(to, RenderColor.Transparent);
+            var r = Lerp(fromColor.R, toColor.R, t);
+            var g = Lerp(fromColor.G, toColor.G, t);
+            var b = Lerp(fromColor.B, toColor.B, t);
+            var a = Lerp(fromColor.A, toColor.A, t) / 255d;
+            return string.Create(CultureInfo.InvariantCulture, $"rgba({r}, {g}, {b}, {a.ToString("0.###", CultureInfo.InvariantCulture)})");
+        }
+
+        var fromNumber = HtmlRenderer.ParseLengthValue(from, 0f, allowAuto: false);
+        var toNumber = HtmlRenderer.ParseLengthValue(to, 0f, allowAuto: false);
+        var interpolated = fromNumber + ((toNumber - fromNumber) * t);
+
+        return kind == CssInterpolationValueKind.Number
+            ? interpolated.ToString("0.####", CultureInfo.InvariantCulture)
+            : string.Create(CultureInfo.InvariantCulture, $"{interpolated.ToString("0.####", CultureInfo.InvariantCulture)}px");
+    }
+
+    private static byte Lerp(byte from, byte to, double t) =>
+        (byte)Math.Round(from + ((to - from) * t), MidpointRounding.AwayFromZero);
+
+    public static double ParseTimeValue(string value)
+    {
+        var trimmed = value.Trim();
+
+        if (trimmed.EndsWith("ms", StringComparison.OrdinalIgnoreCase) &&
+            double.TryParse(trimmed[..^2], NumberStyles.Float, CultureInfo.InvariantCulture, out var ms))
+        {
+            return ms;
+        }
+
+        if (trimmed.EndsWith('s') &&
+            double.TryParse(trimmed[..^1], NumberStyles.Float, CultureInfo.InvariantCulture, out var s))
+        {
+            return s * 1000d;
+        }
+
+        return 0d;
+    }
+
+    public static CssTimingFunction ParseTimingFunction(string value)
+    {
+        var source = new StringSource(value.Trim());
+        var parsed = TimingFunctionParser.ParseTimingFunction(source);
+
+        return parsed switch
+        {
+            CssCubicBezierValue cubic => CssTimingFunction.CubicBezier(cubic.X1.AsDouble(), cubic.Y1.AsDouble(), cubic.X2.AsDouble(), cubic.Y2.AsDouble()),
+            CssStepsValue steps => CssTimingFunction.Steps(steps.Intervals.AsInt32(), steps.IsStart),
+            _ => CssTimingFunction.Linear,
+        };
+    }
+}
diff --git a/src/AngleSharp.Renderer/HtmlRenderer.cs b/src/AngleSharp.Renderer/HtmlRenderer.cs
index 05268a4..10d7e6a 100644
--- a/src/AngleSharp.Renderer/HtmlRenderer.cs
+++ b/src/AngleSharp.Renderer/HtmlRenderer.cs
@@ -7,13 +7,17 @@ namespace AngleSharp.Renderer;
 using System.Text;
 using System.Threading;
 
+using AngleSharp;
 using AngleSharp.Css;
 using AngleSharp.Css.Dom;
+using AngleSharp.Css.Parser;
 using AngleSharp.Css.RenderTree;
+using AngleSharp.Css.Values;
 using AngleSharp.Dom;
 using AngleSharp.Io;
 using AngleSharp.Renderer.Rendering;
 using AngleSharp.Renderer.Skia;
+using AngleSharp.Text;
 
 using SkiaSharp;
 
@@ -96,7 +100,7 @@ internal static IReadOnlyDictionary<IElement, ElementLayoutMetrics> CaptureLayou
 
         try
         {
-            _ = BuildDisplayList(document, viewport, context, renderDevice);
+            _ = BuildDisplayList(document, viewport, context, renderDevice, measureFullExtent: true);
             return capture.Snapshot();
         }
         finally
@@ -234,7 +238,7 @@ public RenderedImage RenderToPng(IDocument document, IRenderDevice renderDevice)
 
         var context = CreateLayoutContext(document, renderDevice, _textMeasurer);
         var viewport = new RenderViewport(context.Width, context.Height);
-        var displayList = BuildDisplayList(document, viewport, context, renderDevice);
+        var displayList = BuildDisplayList(document, viewport, context, renderDevice, ResolveRootScrollOffsetY(document));
 
         return _backend.RenderToPng(displayList, viewport);
     }
@@ -264,10 +268,38 @@ public DisplayList BuildDisplayList(IDocument document, IRenderDevice renderDevi
 
         var context = CreateLayoutContext(document, renderDevice, _textMeasurer);
         var viewport = new RenderViewport(context.Width, context.Height);
-        return BuildDisplayList(document, viewport, context, renderDevice);
+        return BuildDisplayList(document, viewport, context, renderDevice, ResolveRootScrollOffsetY(document));
     }
 
-    private static DisplayList BuildDisplayList(IDocument document, RenderViewport viewport, LayoutContext context, IRenderDevice renderDevice)
+    /// <summary>
+    /// Resolves the page's vertical scroll offset from the interactive DOM harness, if one has
+    /// been created for the document's browsing context (via <c>IBrowsingContext.GetDomHarness()</c>
+    /// - typically through <see cref="IDomHarness.PaintToPng"/> or direct use of the CSSOM-view
+    /// scroll APIs). Returns 0 for the overwhelmingly common case of a document that was never
+    /// wired up for interactive use, so rendering stays unaffected unless a caller has actually
+    /// opted into scroll state existing at all. <see cref="CaptureLayoutMetrics"/> deliberately
+    /// does not call this - <c>getBoundingClientRect</c>/<c>scrollHeight</c>/max-scroll
+    /// calculations need the document's true, unscrolled layout to stay correct (and clamping a
+    /// newly-set scroll position depends on exactly that), so metrics capture always lays out at
+    /// scroll offset 0 regardless of whatever is currently scrolled into view for painting.
+    /// </summary>
+    private static float ResolveRootScrollOffsetY(IDocument document)
+    {
+        var scrollingElement = document.DocumentElement;
+
+        if (scrollingElement is null || !document.Context.TryGetDomHarness(out var harness) || harness is null)
+        {
+            return 0f;
+        }
+
+        // double.MaxValue as the clamp ceiling means this only floors at 0, never re-clamps to an
+        // upper bound - the stored value was already correctly clamped against the document's
+        // true scrollable extent when it was set via the public scrollTop/scrollTo DOM APIs
+        // (which measure with CaptureLayoutMetrics, unaffected by this method).
+        return (float)harness.GetScrollTop(scrollingElement, double.MaxValue);
+    }
+
+    private static DisplayList BuildDisplayList(IDocument document, RenderViewport viewport, LayoutContext context, IRenderDevice renderDevice, float scrollOffsetY = 0f, bool measureFullExtent = false)
     {
         var displayList = new DisplayList { Fonts = context.Fonts };
         displayList.FillRect(new RenderRect(0f, 0f, viewport.Width, viewport.Height), context.BackgroundColor);
@@ -285,7 +317,12 @@ private static DisplayList BuildDisplayList(IDocument document, RenderViewport v
         var root = body is null ? renderTree : renderTree.Find(body) ?? renderTree;
 
         var contentX = context.Padding;
-        var contentY = context.Padding;
+        // A positive scroll offset moves the page's content up relative to the fixed viewport
+        // surface - painted the same way as an unscrolled page, just starting from a Y position
+        // that can be negative. Content scrolled above or below the surface's fixed pixel bounds
+        // simply falls outside what a raster surface of that size can hold; no explicit clip is
+        // needed to hide it; Skia only ever writes pixels that exist within the surface itself.
+        var contentY = context.Padding - scrollOffsetY;
         var contentWidth = viewport.Width - (2f * context.Padding);
 
         if (contentWidth <= 0f)
@@ -293,7 +330,7 @@ private static DisplayList BuildDisplayList(IDocument document, RenderViewport v
             return displayList;
         }
 
-        var textStyle = new RenderTextStyle(context.FontSize, context.TextColor, context.FontFamily, context.LineHeightMultiplier, 400f, false, false, false, context.TextColor, global::AngleSharp.Renderer.Rendering.RenderTextDecorationStyle.Solid, TextAlign.Left, 0f, 0f, 0f);
+        var textStyle = new RenderTextStyle(context.FontSize, context.TextColor, context.FontFamily, context.LineHeightMultiplier, 400f, false, false, false, context.TextColor, global::AngleSharp.Renderer.Rendering.RenderTextDecorationStyle.Solid, TextAlign.Left, 0f, 0f, 0f, [], WhiteSpaceMode.Normal);
         var cursorY = contentY;
         var previousBlockMarginBottom = 0f;
         var suppressNextBlockTopMargin = false;
@@ -301,6 +338,12 @@ private static DisplayList BuildDisplayList(IDocument document, RenderViewport v
         var activeFloatBottom = 0f;
         var textIndentConsumed = false;
 
+        // Normal painting stops laying out content once it has gone past the visible viewport -
+        // there is no need to spend time measuring what will never be rasterized. Measuring the
+        // page's true scrollable extent (for scrollTop/scrollHeight/max-scroll purposes) needs the
+        // opposite: the full page, regardless of how tall it is relative to the viewport.
+        var maxY = measureFullExtent ? float.MaxValue : viewport.Height - context.Padding;
+
         foreach (var child in OrderChildrenForPainting(root.Children))
         {
             LayoutNode(
@@ -317,14 +360,40 @@ private static DisplayList BuildDisplayList(IDocument document, RenderViewport v
                 textStyle: textStyle,
                 context: context,
                 displayList: displayList,
-                maxY: viewport.Height - context.Padding);
+                maxY: maxY);
 
-            if (cursorY > viewport.Height - context.Padding)
+            if (cursorY > maxY)
             {
                 break;
             }
         }
 
+        // The page's own scrolling elements (<html>/<body>) are never laid out as boxes of their
+        // own - the loop above only ever lays out *their children* directly onto the page canvas -
+        // so neither ever gets an ordinary RecordLayoutMetrics call the way a normal descendant
+        // does. Synthesizing one here, sized to the full stacked content height, is what lets
+        // GetScrollHeight()/GetMaxScrollTop() (via ElementCssomViewExtensions.GetScrollExtents,
+        // which reads exactly this metrics map) treat the document as scrollable at all. This is a
+        // no-op outside of CaptureLayoutMetrics, since RecordLayoutMetrics itself only does
+        // anything while that capture is active.
+        if (body is not null)
+        {
+            // The synthesized box represents the *client* (viewport) area, not the total content
+            // height - GetScrollExtents (ElementCssomViewExtensions) separately walks this map for
+            // every actual descendant (each already carrying its own, normally-recorded metrics)
+            // to work out how far content actually extends past this box, exactly the way it
+            // already does for any other scrollable element. Recording the full content height
+            // here instead would make the client and scroll heights identical, so nothing would
+            // ever look scrollable.
+            var clientHeight = Math.Max(0f, viewport.Height - (2f * context.Padding));
+            RecordLayoutMetrics(body, contentX, contentY, contentWidth, clientHeight, 0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f);
+
+            if (document.DocumentElement is not null)
+            {
+                RecordLayoutMetrics(document.DocumentElement, contentX, contentY, contentWidth, clientHeight, 0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f);
+            }
+        }
+
         return displayList;
     }
 
@@ -404,6 +473,16 @@ private static void LayoutElement(
             return;
         }
 
+        var formControlKind = ResolveFormControlKind(element);
+
+        // input[type=hidden] never paints at all, matching the UA `display: none` browsers give
+        // it - AngleSharp.Css's own UA stylesheet does not special-case it (every <input> type
+        // computes to plain inline-block), so this renderer has to.
+        if (formControlKind == FormControlKind.Hidden)
+        {
+            return;
+        }
+
         var display = GetDisplay(styleMap);
 
         if (string.Equals(display, "table", StringComparison.OrdinalIgnoreCase))
@@ -416,6 +495,11 @@ private static void LayoutElement(
         var isInlineBlock = IsInlineBlock(computedStyle);
         var currentTextStyle = ResolveTextStyle(styleMap, inheritedTextStyle);
 
+        if (formControlKind != FormControlKind.None)
+        {
+            ApplyFormControlDefaults(formControlKind, element, styleMap, currentTextStyle, context);
+        }
+
         if (cursorY >= activeFloatBottom)
         {
             activeFloatLeftOffset = 0f;
@@ -434,7 +518,7 @@ private static void LayoutElement(
             }
             else
             {
-            var inlineText = NormalizeWhitespace(element.TextContent ?? string.Empty);
+            var inlineText = NormalizeWhitespace(element.TextContent ?? string.Empty, currentTextStyle.WhiteSpace);
             if (inlineText.Length > 0)
             {
                     LayoutWrappedText(inlineText, flowContainingX, flowContainingWidth, ref cursorY, currentTextStyle, context, displayList, maxY, textIndentConsumed ? 0f : currentTextStyle.TextIndent);
@@ -453,7 +537,7 @@ private static void LayoutElement(
             return;
         }
 
-        var box = ResolveBoxStyle(styleMap);
+        var box = ResolveBoxStyle(styleMap, element);
         var marginTop = ParseLength(styleMap, "margin-top", flowContainingWidth, box.Margin.Top, allowAuto: false);
         var marginBottom = ParseLength(styleMap, "margin-bottom", flowContainingWidth, box.Margin.Bottom, allowAuto: false);
         var marginLeft = ParseLength(styleMap, "margin-left", flowContainingWidth, box.Margin.Left, allowAuto: true);
@@ -549,6 +633,41 @@ private static void LayoutElement(
         var contentX = borderBoxX + borderLeft + paddingLeft;
         var contentY = borderBoxY + borderTop + paddingTop;
 
+        // The box's own background/border/shadow/outline must paint behind its children, but an
+        // auto-sized box's height is only known after its children are laid out (and therefore
+        // appended to the display list) - so their commands are built into a scratch buffer here
+        // and spliced in before this index once the box's final size is known, rather than simply
+        // appended (which would paint them on top of - and hide - the children).
+        var boxPaintInsertIndex = displayList.Commands.Count;
+
+        if (string.Equals(display, "list-item", StringComparison.OrdinalIgnoreCase))
+        {
+            currentTextStyle = PaintListItemMarker(displayList, element, styleMap, currentTextStyle, context, borderBoxX, contentX, contentY);
+        }
+
+        if (formControlKind != FormControlKind.None)
+        {
+            // Children are suppressed or absent for every kind PaintFormControl actually paints
+            // content for (TextLike/Select/Button/Checkbox/Radio/Color), so their box never grows
+            // past its own specified height the way an ordinary auto-sized box can - the specified
+            // height (falling back to a single line, for an author-supplied "auto") is therefore
+            // also this box's final content height, safe to resolve here rather than waiting for
+            // the auto-height computation later in this method.
+            var formControlSpecifiedHeight = ResolveFlexibleContentDimension(
+                styleMap,
+                flowContainingWidth,
+                float.NaN,
+                isFlexItem,
+                isRowDirection,
+                flexMainSize,
+                flexCrossSize,
+                propertyName: "height");
+            var formControlContentHeight = float.IsNaN(formControlSpecifiedHeight)
+                ? currentTextStyle.FontSize * currentTextStyle.LineHeightMultiplier
+                : formControlSpecifiedHeight;
+            PaintFormControl(displayList, element, formControlKind, currentTextStyle, context, contentX, contentY, contentWidth, formControlContentHeight);
+        }
+
         var childCursorY = contentY;
         var childPreviousBlockMarginBottom = 0f;
         var childSuppressNextBlockTopMargin = collapseWithFirstChild && !float.Equals(effectiveMarginTop, marginTop);
@@ -562,14 +681,29 @@ private static void LayoutElement(
 
         // An <svg> root's children are foreign-namespaced SVG elements (circle, text, title, ...),
         // not HTML flow content; it is rasterized as a single replaced element below, so its
-        // subtree must never be walked as if it were normal inline/block content.
-        var orderedChildren = string.Equals(tagName, "svg", StringComparison.OrdinalIgnoreCase)
+        // subtree must never be walked as if it were normal inline/block content. A <select>'s
+        // <option> children and a <button>'s label are painted directly by PaintFormControl above
+        // instead (a <select> shows only its selected option, never every option stacked; a
+        // <button>'s own label is measured up front to size the button, so it is painted the same
+        // self-contained way rather than through normal child text flow) - <textarea> is
+        // deliberately excluded from this list, since its child text node flowing normally through
+        // the ordinary block child-layout path below is exactly what a browser's own <textarea>
+        // content does, and needed no special-casing at all once the box itself got its default
+        // border/padding/background chrome.
+        var orderedChildren = string.Equals(tagName, "svg", StringComparison.OrdinalIgnoreCase) ||
+                               formControlKind is FormControlKind.Select or FormControlKind.Button
             ? []
             : OrderChildrenForPainting(node.Children).ToList();
+        // An inline-block child counts as inline content here too (not just plain inline/br) - it
+        // is a real, confirmed bug that it previously did not: a parent whose children were *only*
+        // inline-block elements (the common form-control case - two checkboxes with no other inline
+        // content between them) never took this "merge onto shared lines" path at all, so every one
+        // of its inline-block children fell through to the plain block-stacking path below and
+        // always started its own new line, identical to display:block. Confirmed independent of
+        // form controls with two plain `<span style="display:inline-block">` siblings.
         var hasInlineRun = orderedChildren.Any(child =>
             (child is ElementRenderNode childElement &&
-             !ShouldRenderAsBlock(childElement.ComputedStyle) &&
-             !IsInlineBlock(childElement.ComputedStyle)) ||
+             (!ShouldRenderAsBlock(childElement.ComputedStyle) || IsInlineBlock(childElement.ComputedStyle))) ||
             (child is ElementRenderNode childElementWithBr && string.Equals(childElementWithBr.Ref.LocalName, "br", StringComparison.OrdinalIgnoreCase)));
 
         if (IsFlexContainer(styleMap))
@@ -690,7 +824,24 @@ private static void LayoutElement(
         {
             foreach (var child in orderedChildren)
             {
-                var childIsBlock = child is ElementRenderNode childElement && (ShouldRenderAsBlock(childElement.ComputedStyle) || IsInlineBlock(childElement.ComputedStyle));
+                // An inline-block child flows next to its siblings on the shared line (like a real
+                // browser) only when its own box size can be predicted up front without laying it
+                // out first - i.e. both width and height resolve to an explicit, non-auto value,
+                // which is guaranteed for every form control (ApplyFormControlDefaults always
+                // injects concrete pixel defaults) and for any inline-block given explicit
+                // width/height in CSS. An inline-block whose size genuinely depends on its own
+                // auto-flowing content (shrink-to-fit width, or height driven by wrapped children)
+                // cannot be predicted this cheaply without a full trial layout, so it deliberately
+                // falls back to the older, still-correct-if-visually-imperfect behavior below: its
+                // own line, exactly like display:block - a documented, deliberate scope cut rather
+                // than building genuine two-pass (shrink-to-fit) inline-block layout.
+                float ibWidth = 0f, ibHeight = 0f, ibMarginLeft = 0f, ibMarginRight = 0f, ibMarginTop = 0f, ibMarginBottom = 0f;
+                var canFlowAsInlineBlock = child is ElementRenderNode ibCandidate &&
+                    IsInlineBlock(ibCandidate.ComputedStyle) &&
+                    TryMeasureInlineBlockBoxSize(ibCandidate, contentWidth, currentTextStyle, context, out ibWidth, out ibHeight, out ibMarginLeft, out ibMarginRight, out ibMarginTop, out ibMarginBottom);
+                var childIsBlock = child is ElementRenderNode childElement &&
+                    ShouldRenderAsBlock(childElement.ComputedStyle) &&
+                    !canFlowAsInlineBlock;
 
                 if (childIsBlock)
                 {
@@ -724,7 +875,7 @@ private static void LayoutElement(
 
                     if (child is TextRenderNode textNode)
                     {
-                        var inlineText = NormalizeWhitespace(textNode.Ref.Data);
+                        var inlineText = NormalizeWhitespaceForInlineRun(textNode.Ref.Data, currentTextStyle.WhiteSpace);
 
                         if (inlineText.Length > 0)
                         {
@@ -741,6 +892,63 @@ private static void LayoutElement(
                                 ref textIndentConsumed);
                         }
                     }
+                    else if (canFlowAsInlineBlock && child is ElementRenderNode inlineBlockElement)
+                    {
+                        // Wraps to a new line first if this item does not fit in what is left of
+                        // the current one - unless it is the very first thing being placed on this
+                        // line at all, so a single inline-block item wider than its container still
+                        // gets placed (on its own line) rather than looping forever.
+                        var totalAdvance = ibMarginLeft + ibWidth + ibMarginRight;
+
+                        // contentX/contentWidth (this element's own resolved content box), not
+                        // flowContainingX/flowContainingWidth (the wider box this *element itself*
+                        // was given to size *itself* within its own parent) - using the latter here
+                        // was a real bug caught by BuildDisplayList_InlineBlockSiblingsWrapToANewLineWhenTheyDoNotFit:
+                        // a narrower-than-parent container (e.g. width:50px) never wrapped its
+                        // inline-block children at all, since the wrap boundary was being measured
+                        // against the parent's own, much wider available width instead of this
+                        // element's own.
+                        if (inlineCursorX > contentX && inlineCursorX + totalAdvance > contentX + contentWidth)
+                        {
+                            childCursorY = Math.Max(childCursorY, inlineLineTop + inlineLineHeight);
+                            inlineLineTop = childCursorY;
+                            inlineCursorX = contentX;
+                            inlineLineHeight = 0f;
+                        }
+
+                        // containingX is the margin box's own left edge, not the border box's -
+                        // LayoutNode/LayoutElement apply this element's own margin-left internally
+                        // (flowBorderBoxX = flowContainingX + marginLeft) exactly as they would for
+                        // a block-level child, so the border box lands ibMarginLeft to the right of
+                        // what is passed here, matching totalAdvance's own accounting below.
+                        var itemStartX = inlineCursorX;
+                        var inlineBlockCursorY = inlineLineTop;
+                        var inlineBlockPreviousBlockMarginBottom = 0f;
+                        var inlineBlockSuppressNextBlockTopMargin = false;
+                        var inlineBlockActiveFloatLeftOffset = 0f;
+                        var inlineBlockActiveFloatBottom = 0f;
+                        var inlineBlockTextIndentConsumed = true;
+
+                        LayoutNode(
+                            node: inlineBlockElement,
+                            containingX: itemStartX,
+                            containingY: inlineLineTop,
+                            containingWidth: contentWidth,
+                            cursorY: ref inlineBlockCursorY,
+                            previousBlockMarginBottom: ref inlineBlockPreviousBlockMarginBottom,
+                            suppressNextBlockTopMargin: ref inlineBlockSuppressNextBlockTopMargin,
+                            activeFloatLeftOffset: ref inlineBlockActiveFloatLeftOffset,
+                            activeFloatBottom: ref inlineBlockActiveFloatBottom,
+                            textIndentConsumed: ref inlineBlockTextIndentConsumed,
+                            textStyle: currentTextStyle,
+                            context: context,
+                            displayList: displayList,
+                            maxY: maxY);
+
+                        inlineCursorX = itemStartX + totalAdvance;
+                        inlineLineHeight = Math.Max(inlineLineHeight, ibMarginTop + ibHeight + ibMarginBottom);
+                        textIndentConsumed = true;
+                    }
                     else if (child is ElementRenderNode inlineElement)
                     {
                         var childTagName = inlineElement.Ref.LocalName;
@@ -755,7 +963,7 @@ private static void LayoutElement(
                         else
                         {
                             var childTextStyle = ResolveTextStyle(CreateStyleMap(inlineElement.ComputedStyle), currentTextStyle);
-                            var inlineText = NormalizeWhitespace(inlineElement.Ref.TextContent ?? string.Empty);
+                            var inlineText = NormalizeWhitespaceForInlineRun(inlineElement.Ref.TextContent ?? string.Empty, childTextStyle.WhiteSpace);
 
                             if (inlineText.Length > 0)
                             {
@@ -823,15 +1031,96 @@ private static void LayoutElement(
             paddingTop,
             paddingBottom);
 
-        PaintBackground(displayList, box.BackgroundPaint, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight);
-        PaintBorder(displayList, box.BorderColor, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight, box.BorderWidth);
-        PaintOutline(displayList, styleMap, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight);
+        var clipsOverflow = ShouldClipOverflow(styleMap);
+        var transform = ParseCssTransform(styleMap, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight, currentTextStyle.FontSize);
+        var hasTransform = !transform.IsIdentity;
+        var filterFunctions = ParseCssFilter(styleMap);
+        var hasFilter = filterFunctions.Count > 0;
+        var opacity = ParseCssOpacity(styleMap);
+        var hasOpacity = opacity < 1f;
+
+        var boxPaintBuffer = new DisplayList();
+
+        // A transform applies to the whole element - background, border, outline, and every
+        // descendant all paint under it - so its push has to be the very first thing in this
+        // element's own paint scope, wrapping even the background (unlike the overflow clip below,
+        // which per spec explicitly excludes the border/outline it is nested inside).
+        if (hasTransform)
+        {
+            boxPaintBuffer.PushTransform(transform);
+        }
+
+        // `opacity` nests inside `transform` (compositing does not care about coordinate space,
+        // only about *where* transform already placed the content) but outside `filter` (matching
+        // how a browser processes filter effects on the element's own content first, then
+        // composites the already-filtered result onto the backdrop at the element's opacity).
+        if (hasOpacity)
+        {
+            boxPaintBuffer.PushOpacity(opacity);
+        }
+
+        // `filter` wraps the whole element too, exactly like `transform` above - it is nested
+        // inside the transform scope (not outside it) so the filter's own raster operates in the
+        // element's already-transformed local space, matching how a scaled element's blur radius
+        // should scale along with it rather than staying a fixed screen-space size.
+        if (hasFilter)
+        {
+            boxPaintBuffer.PushFilter(filterFunctions);
+        }
+
+        PaintBackground(boxPaintBuffer, box.BackgroundPaint, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight, box.BorderRadius);
+        PaintBoxShadows(boxPaintBuffer, box.BoxShadows, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight, box.BorderRadius);
+        PaintBorder(boxPaintBuffer, box.BorderColor, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight, box.BorderWidth, box.BorderRadius);
+        PaintOutline(boxPaintBuffer, styleMap, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight);
+
+        if (clipsOverflow)
+        {
+            // Per spec, overflow clips at the padding edge - content can extend into the padding
+            // but not past it - so the clip rect is the padding box, not the border box. Border
+            // and outline are unaffected because they were already appended above, outside this
+            // clip scope's push.
+            var clipRect = new RenderRect(
+                borderBoxX + borderLeft,
+                borderBoxY + borderTop,
+                Math.Max(0f, borderBoxWidth - borderLeft - borderRight),
+                Math.Max(0f, borderBoxHeight - borderTop - borderBottom));
+            boxPaintBuffer.PushClip(clipRect, box.BorderRadius.ClampToBox(borderBoxWidth, borderBoxHeight));
+        }
+
+        displayList.InsertRange(boxPaintInsertIndex, boxPaintBuffer.Commands);
 
         if (TryResolveReplacedElementImage(node, styleMap, flowContainingWidth, borderBoxX + borderLeft + paddingLeft, borderBoxY + borderTop + paddingTop, out var image, out var imageRect))
         {
             displayList.DrawImage(imageRect, image!);
         }
 
+        if (clipsOverflow)
+        {
+            displayList.PopClip();
+        }
+
+        // Closes the filter scope opened above, once children (and, for a replaced element, its
+        // image) have all been emitted - nested inside the opacity scope, so it has to close
+        // before that one does.
+        if (hasFilter)
+        {
+            displayList.PopFilter();
+        }
+
+        // Closes the opacity scope opened above - nested inside the transform scope, so it closes
+        // before that one does too.
+        if (hasOpacity)
+        {
+            displayList.PopOpacity();
+        }
+
+        // Closes the transform scope opened above, once children (and, for a replaced element, its
+        // image) have all been emitted - the outermost scope, since it was also the first pushed.
+        if (hasTransform)
+        {
+            displayList.PopTransform();
+        }
+
         if (isFloatLeft)
         {
             var floatRightEdge = (flowBorderBoxX + borderBoxWidth) - containingX;
@@ -895,6 +1184,11 @@ private static void LayoutFlexContainer(
         float borderBoxX,
         float borderBoxY)
     {
+        // See the matching comment in LayoutElement: the container's own background/border must
+        // paint behind its items, but its auto-sized height is only known after they are laid out
+        // (and appended), so their paint commands are spliced in before this index instead.
+        var boxPaintInsertIndex = displayList.Commands.Count;
+
         var flexDirection = GetFlexDirection(styleMap);
         var isRowDirection = !string.Equals(flexDirection, "column", StringComparison.OrdinalIgnoreCase) && !string.Equals(flexDirection, "column-reverse", StringComparison.OrdinalIgnoreCase);
         var isReverseDirection = string.Equals(flexDirection, "row-reverse", StringComparison.OrdinalIgnoreCase) || string.Equals(flexDirection, "column-reverse", StringComparison.OrdinalIgnoreCase);
@@ -1162,15 +1456,19 @@ private static void LayoutFlexContainer(
             effectiveMarginBottom = CollapseMargins(effectiveMarginBottom, childPreviousBlockMarginBottom);
         }
 
+        var boxPaintBuffer = new DisplayList();
+
         if (box.BackgroundPaint is RenderColorPaint colorPaint && colorPaint.Color.A == 0)
         {
-            displayList.FillRect(new RenderRect(borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight), RenderColor.Transparent);
+            boxPaintBuffer.FillRect(new RenderRect(borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight), RenderColor.Transparent);
         }
         else
         {
-            PaintBackground(displayList, box.BackgroundPaint, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight);
+            PaintBackground(boxPaintBuffer, box.BackgroundPaint, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight, box.BorderRadius);
         }
 
+        PaintBoxShadows(boxPaintBuffer, box.BoxShadows, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight, box.BorderRadius);
+
         RecordLayoutMetrics(
             node.Ref,
             borderBoxX,
@@ -1186,14 +1484,33 @@ private static void LayoutFlexContainer(
             paddingTop,
             paddingBottom);
 
-        PaintBorder(displayList, box.BorderColor, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight, box.BorderWidth);
-        PaintOutline(displayList, styleMap, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight);
+        PaintBorder(boxPaintBuffer, box.BorderColor, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight, box.BorderWidth, box.BorderRadius);
+        PaintOutline(boxPaintBuffer, styleMap, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight);
+
+        var clipsOverflow = ShouldClipOverflow(styleMap);
+
+        if (clipsOverflow)
+        {
+            var clipRect = new RenderRect(
+                borderBoxX + borderLeft,
+                borderBoxY + borderTop,
+                Math.Max(0f, borderBoxWidth - borderLeft - borderRight),
+                Math.Max(0f, borderBoxHeight - borderTop - borderBottom));
+            boxPaintBuffer.PushClip(clipRect, box.BorderRadius.ClampToBox(borderBoxWidth, borderBoxHeight));
+        }
+
+        displayList.InsertRange(boxPaintInsertIndex, boxPaintBuffer.Commands);
 
         if (TryResolveReplacedElementImage(node, styleMap, containingWidth, borderBoxX + borderLeft + paddingLeft, borderBoxY + borderTop + paddingTop, out var image, out var imageRect))
         {
             displayList.DrawImage(imageRect, image!);
         }
 
+        if (clipsOverflow)
+        {
+            displayList.PopClip();
+        }
+
         cursorY = flowBorderBoxY + borderBoxHeight;
         previousBlockMarginBottom = effectiveMarginBottom + context.ParagraphSpacing;
         suppressNextBlockTopMargin = false;
@@ -1226,6 +1543,85 @@ private static float ResolveFlexibleContentDimension(
             : (flexMainSize.HasValue ? flexMainSize.Value : ParseLength(styleMap, propertyName, relativeTo, defaultValue, allowAuto: true));
     }
 
+    /// <summary>
+    /// Predicts an inline-block element's own border-box width/height and all four margins without
+    /// actually laying it out, so its parent's inline-merging child loop can decide up front
+    /// whether it fits on the current line and exactly where to place it. <c>LayoutNode</c>/
+    /// <c>LayoutElement</c> have no "measure only" mode of their own - they only ever discover a
+    /// box's final size as a side effect of actually laying out (and painting) it - so this exists
+    /// purely to avoid needing one for the one case that can be predicted cheaply. It succeeds only
+    /// when both <c>width</c> and <c>height</c> resolve to an explicit, non-auto value: guaranteed
+    /// for every form control (<see cref="ApplyFormControlDefaults"/> always injects concrete pixel
+    /// defaults for both) and for any inline-block given explicit <c>width</c>/<c>height</c> in
+    /// CSS. It deliberately returns <see langword="false"/> for anything else - shrink-to-fit width
+    /// or auto/content-driven height would need a genuine trial layout to measure, which this does
+    /// not attempt (a documented scope cut, not an oversight: see the call site for what happens
+    /// instead, which is not a regression - it is exactly this renderer's pre-existing behavior for
+    /// every inline-block element, before shared-line flow existed for any of them).
+    /// </summary>
+    private static bool TryMeasureInlineBlockBoxSize(
+        ElementRenderNode elementNode,
+        float containingWidth,
+        RenderTextStyle inheritedTextStyle,
+        LayoutContext context,
+        out float width,
+        out float height,
+        out float marginLeft,
+        out float marginRight,
+        out float marginTop,
+        out float marginBottom)
+    {
+        width = 0f;
+        height = 0f;
+        marginLeft = 0f;
+        marginRight = 0f;
+        marginTop = 0f;
+        marginBottom = 0f;
+
+        var element = elementNode.Ref;
+        var styleMap = CreateStyleMap(elementNode.ComputedStyle, element);
+        var textStyle = ResolveTextStyle(styleMap, inheritedTextStyle);
+        var formControlKind = ResolveFormControlKind(element);
+
+        // A hidden input never lays out or paints at all (see LayoutElement's own early return for
+        // it) - it has no box to flow inline, so it is neither flowable nor block-stackable here.
+        if (formControlKind == FormControlKind.Hidden)
+        {
+            return false;
+        }
+
+        if (formControlKind != FormControlKind.None)
+        {
+            ApplyFormControlDefaults(formControlKind, element, styleMap, textStyle, context);
+        }
+
+        var specifiedContentWidth = ParseLength(styleMap, "width", containingWidth, float.NaN, allowAuto: true);
+        var specifiedContentHeight = ParseLength(styleMap, "height", containingWidth, float.NaN, allowAuto: true);
+
+        if (float.IsNaN(specifiedContentWidth) || float.IsNaN(specifiedContentHeight))
+        {
+            return false;
+        }
+
+        // Reuses the exact same box-model resolution LayoutElement itself calls for every other
+        // element, rather than re-deriving border/padding/margin independently, so this prediction
+        // can never quietly drift out of sync with what actually gets laid out.
+        var box = ResolveBoxStyle(styleMap, element);
+        width = box.BorderWidth.Left + box.Padding.Left + specifiedContentWidth + box.Padding.Right + box.BorderWidth.Right;
+        height = box.BorderWidth.Top + box.Padding.Top + specifiedContentHeight + box.Padding.Bottom + box.BorderWidth.Bottom;
+
+        // An auto horizontal margin resolves to NaN from ParseLength (mirroring width/height's own
+        // auto signal) - correct for a block-level box's own centering math, but a non-block box's
+        // auto margin simply computes to 0 per spec, since there is no "available space" to center
+        // within on an inline-formatting-context line the way there is for text-align:center.
+        marginLeft = float.IsNaN(box.Margin.Left) ? 0f : box.Margin.Left;
+        marginRight = float.IsNaN(box.Margin.Right) ? 0f : box.Margin.Right;
+        marginTop = box.Margin.Top;
+        marginBottom = box.Margin.Bottom;
+
+        return true;
+    }
+
     private static IEnumerable<ElementRenderNode> CollectTableRows(ElementRenderNode tableNode)
     {
         foreach (var child in tableNode.Children)
@@ -1585,7 +1981,9 @@ private static void LayoutTable(
                 for (var lineIndex = 0; lineIndex < wrappedLines.Count; lineIndex++)
                 {
                     var line = wrappedLines[lineIndex];
-                    displayList.DrawText(line, lineX, lineY + (lineIndex * lineHeight), placement.CellTextStyle.Color, placement.CellTextStyle.FontSize, placement.CellTextStyle.FontFamily, placement.CellTextStyle.FontWeight, placement.CellTextStyle.IsItalic, placement.CellTextStyle.Underline, placement.CellTextStyle.StrikeThrough, placement.CellTextStyle.DecorationColor, placement.CellTextStyle.DecorationStyle, placement.CellTextStyle.LetterSpacing);
+                    var cellLineY = lineY + (lineIndex * lineHeight);
+                    PaintTextShadows(displayList, placement.CellTextStyle.TextShadows, line, lineX, cellLineY, placement.CellTextStyle);
+                    displayList.DrawText(line, lineX, cellLineY, placement.CellTextStyle.Color, placement.CellTextStyle.FontSize, placement.CellTextStyle.FontFamily, placement.CellTextStyle.FontWeight, placement.CellTextStyle.IsItalic, placement.CellTextStyle.Underline, placement.CellTextStyle.StrikeThrough, placement.CellTextStyle.DecorationColor, placement.CellTextStyle.DecorationStyle, placement.CellTextStyle.LetterSpacing);
                 }
             }
         }
@@ -1651,6 +2049,11 @@ private static void LayoutGridContainer(
         float borderBoxX,
         float borderBoxY)
     {
+        // See the matching comment in LayoutElement: the container's own background/border must
+        // paint behind its items, but its auto-sized height is only known after they are laid out
+        // (and appended), so their paint commands are spliced in before this index instead.
+        var boxPaintInsertIndex = displayList.Commands.Count;
+
         var columns = ParseGridTrackList(styleMap, "grid-template-columns", containingWidth, 1);
         var columnGap = ParseGridGap(styleMap, "column-gap", containingWidth, 0)
             ?? ParseGridGap(styleMap, "gap", containingWidth, 0);
@@ -1774,15 +2177,19 @@ private static void LayoutGridContainer(
             effectiveMarginBottom = CollapseMargins(effectiveMarginBottom, previousBlockMarginBottom);
         }
 
+        var boxPaintBuffer = new DisplayList();
+
         if (box.BackgroundPaint is RenderColorPaint colorPaint && colorPaint.Color.A == 0)
         {
-            displayList.FillRect(new RenderRect(borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight), RenderColor.Transparent);
+            boxPaintBuffer.FillRect(new RenderRect(borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight), RenderColor.Transparent);
         }
         else
         {
-            PaintBackground(displayList, box.BackgroundPaint, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight);
+            PaintBackground(boxPaintBuffer, box.BackgroundPaint, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight, box.BorderRadius);
         }
 
+        PaintBoxShadows(boxPaintBuffer, box.BoxShadows, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight, box.BorderRadius);
+
         RecordLayoutMetrics(
             node.Ref,
             borderBoxX,
@@ -1798,8 +2205,27 @@ private static void LayoutGridContainer(
             paddingTop,
             paddingBottom);
 
-        PaintBorder(displayList, box.BorderColor, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight, box.BorderWidth);
-        PaintOutline(displayList, styleMap, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight);
+        PaintBorder(boxPaintBuffer, box.BorderColor, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight, box.BorderWidth, box.BorderRadius);
+        PaintOutline(boxPaintBuffer, styleMap, borderBoxX, borderBoxY, borderBoxWidth, borderBoxHeight);
+
+        var clipsOverflow = ShouldClipOverflow(styleMap);
+
+        if (clipsOverflow)
+        {
+            var clipRect = new RenderRect(
+                borderBoxX + borderLeft,
+                borderBoxY + borderTop,
+                Math.Max(0f, borderBoxWidth - borderLeft - borderRight),
+                Math.Max(0f, borderBoxHeight - borderTop - borderBottom));
+            boxPaintBuffer.PushClip(clipRect, box.BorderRadius.ClampToBox(borderBoxWidth, borderBoxHeight));
+        }
+
+        displayList.InsertRange(boxPaintInsertIndex, boxPaintBuffer.Commands);
+
+        if (clipsOverflow)
+        {
+            displayList.PopClip();
+        }
 
         cursorY = flowBorderBoxY + borderBoxHeight;
         previousBlockMarginBottom = effectiveMarginBottom + context.ParagraphSpacing;
@@ -1986,7 +2412,7 @@ private static void LayoutTextNode(
         DisplayList displayList,
         float maxY)
     {
-        var text = NormalizeWhitespace(textNode.Data);
+        var text = NormalizeWhitespace(textNode.Data, textStyle.WhiteSpace);
 
         if (text.Length == 0)
         {
@@ -2019,7 +2445,7 @@ private static void LayoutWrappedText(
         float firstLineIndent)
     {
         var lineHeight = textStyle.FontSize * textStyle.LineHeightMultiplier;
-        var lines = WrapText(context, text, maxWidth, textStyle);
+        var lines = WrapTextRespectingWhiteSpace(context, text, maxWidth, textStyle);
 
         for (var index = 0; index < lines.Count; index++)
         {
@@ -2031,11 +2457,19 @@ private static void LayoutWrappedText(
                 return;
             }
 
+            // An empty line (a blank `pre`/`pre-wrap`/`pre-line` row from a run of consecutive
+            // forced breaks) still needs to advance cursorY above, but has nothing to measure/paint.
+            if (line.Length == 0)
+            {
+                continue;
+            }
+
             var lineWidth = MeasureTextWidth(context, line, textStyle);
             var lineMaxWidth = index == 0 ? Math.Max(0f, maxWidth - firstLineIndent) : maxWidth;
             var lineX = x + (index == 0 ? firstLineIndent : 0f) + ResolveTextAlignmentOffset(textStyle.TextAlign, lineMaxWidth, lineWidth);
             var baselineY = cursorY + textStyle.VerticalAlignOffset;
 
+            PaintTextShadows(displayList, textStyle.TextShadows, line, lineX, baselineY, textStyle);
             displayList.DrawText(
                 line,
                 lineX,
@@ -2053,6 +2487,47 @@ private static void LayoutWrappedText(
         }
     }
 
+    /// <summary>
+    /// Splits <paramref name="text"/> into display lines, honoring <c>white-space</c>'s two layout-
+    /// relevant effects <see cref="NormalizeWhitespace(string, WhiteSpaceMode)"/> itself cannot: an
+    /// explicit `\n` (only ever present in the input at all under <c>pre</c>/<c>pre-wrap</c>/
+    /// <c>pre-line</c>/<c>break-spaces</c> - every other mode already collapsed it away) is always a
+    /// forced break, laid out as its own paragraph rather than merely a wrappable space; and
+    /// <c>nowrap</c>/<c>pre</c> never word-wrap at all, so each paragraph becomes exactly one
+    /// (possibly overflowing) line regardless of <paramref name="maxWidth"/> - the box's own
+    /// `overflow` clipping, if any, still applies to whatever ends up painted past its edge, since
+    /// this only changes layout, not painting.
+    /// </summary>
+    private static IReadOnlyList<string> WrapTextRespectingWhiteSpace(LayoutContext context, string text, float maxWidth, RenderTextStyle textStyle)
+    {
+        var noWrap = IsNoWrapWhiteSpace(textStyle.WhiteSpace);
+        var paragraphs = text.Split('\n');
+
+        if (paragraphs.Length == 1)
+        {
+            return noWrap ? [text] : WrapText(context, text, maxWidth, textStyle);
+        }
+
+        var lines = new List<string>();
+
+        foreach (var paragraph in paragraphs)
+        {
+            if (noWrap || paragraph.Length == 0)
+            {
+                lines.Add(paragraph);
+            }
+            else
+            {
+                lines.AddRange(WrapText(context, paragraph, maxWidth, textStyle));
+            }
+        }
+
+        return lines;
+    }
+
+    private static bool IsNoWrapWhiteSpace(WhiteSpaceMode whiteSpace) =>
+        whiteSpace is WhiteSpaceMode.Nowrap or WhiteSpaceMode.Pre;
+
     private static void LayoutInlineTextRun(
         DisplayList displayList,
         string text,
@@ -2068,12 +2543,19 @@ private static void LayoutInlineTextRun(
         var words = text.Split(' ', StringSplitOptions.RemoveEmptyEntries);
         var rightEdge = flowX + flowWidth;
         var spaceWidth = MeasureTextWidth(context, " ", textStyle);
+        // `nowrap`/`pre` on mixed inline content (a <span> sharing a line with sibling text/elements)
+        // still suppresses width-driven wrapping, same as the block-level LayoutWrappedText path -
+        // multi-space preservation and explicit forced breaks are not supported at this level (a
+        // deliberate scope cut: the caller already collapsed any literal '\n' in `text` to a plain
+        // space before it ever reaches here, since this word-by-word model has no way to represent
+        // one - see the two LayoutNode call sites that build `inlineText`).
+        var noWrap = IsNoWrapWhiteSpace(textStyle.WhiteSpace);
 
         foreach (var word in words)
         {
             var wordWidth = MeasureTextWidth(context, word, textStyle);
 
-            if (inlineCursorX > flowX && inlineCursorX + spaceWidth + wordWidth > rightEdge)
+            if (!noWrap && inlineCursorX > flowX && inlineCursorX + spaceWidth + wordWidth > rightEdge)
             {
                 inlineLineTop += inlineLineHeight;
                 inlineCursorX = flowX;
@@ -2085,10 +2567,13 @@ private static void LayoutInlineTextRun(
                 inlineCursorX += spaceWidth;
             }
 
+            var wordBaselineY = inlineLineTop + textStyle.VerticalAlignOffset;
+
+            PaintTextShadows(displayList, textStyle.TextShadows, word, inlineCursorX, wordBaselineY, textStyle);
             displayList.DrawText(
                 word,
                 inlineCursorX,
-                inlineLineTop + textStyle.VerticalAlignOffset,
+                wordBaselineY,
                 textStyle.Color,
                 textStyle.FontSize,
                 textStyle.FontFamily,
@@ -2287,8 +2772,34 @@ private static RenderTextStyle ResolveTextStyle(Dictionary<string, string> style
         var letterSpacing = ParseLength(styleMap, "letter-spacing", inherited.FontSize, inherited.LetterSpacing, allowAuto: false);
         var textIndent = ParseLength(styleMap, "text-indent", inherited.FontSize, 0f, allowAuto: false);
         var verticalAlignOffset = ParseVerticalAlign(styleMap, fontSize);
+        var textShadows = ParseTextShadows(styleMap.TryGetValue("text-shadow", out var textShadowValue) ? textShadowValue : null, inherited.TextShadows);
+        var whiteSpace = ParseWhiteSpace(styleMap, inherited.WhiteSpace);
+
+        return new RenderTextStyle(fontSize, color, fontFamily, lineHeight, fontWeight, isItalic, underline, strikeThrough, decorationColor, decorationStyle, textAlign, letterSpacing, textIndent, verticalAlignOffset, textShadows, whiteSpace);
+    }
+
+    /// <summary>
+    /// <c>white-space</c> is inherited (confirmed empirically - an unset value on a child reports
+    /// empty, not the CSS initial <c>normal</c>, the same "never serialized when nothing in the
+    /// cascade set it explicitly" behavior already documented for <c>list-style-type</c> - so
+    /// <paramref name="inherited"/> is the correct fallback, not a hardcoded <c>Normal</c>).
+    /// </summary>
+    private static WhiteSpaceMode ParseWhiteSpace(Dictionary<string, string> styleMap, WhiteSpaceMode inherited)
+    {
+        if (!styleMap.TryGetValue("white-space", out var value) || string.IsNullOrWhiteSpace(value))
+        {
+            return inherited;
+        }
 
-        return new RenderTextStyle(fontSize, color, fontFamily, lineHeight, fontWeight, isItalic, underline, strikeThrough, decorationColor, decorationStyle, textAlign, letterSpacing, textIndent, verticalAlignOffset);
+        return value.Trim().ToLowerInvariant() switch
+        {
+            "nowrap" => WhiteSpaceMode.Nowrap,
+            "pre" => WhiteSpaceMode.Pre,
+            "pre-wrap" => WhiteSpaceMode.PreWrap,
+            "pre-line" => WhiteSpaceMode.PreLine,
+            "break-spaces" => WhiteSpaceMode.BreakSpaces,
+            _ => WhiteSpaceMode.Normal,
+        };
     }
 
     /// <summary>
@@ -2477,6 +2988,13 @@ private static void PrepareDocumentForRendering(IDocument document)
                 element.SetAttribute("data-render-gradient", gradientValue);
             }
 
+            if (TryExtractTransformDeclaration(currentStyle, out var transformValue, out updatedStyle))
+            {
+                currentStyle = updatedStyle;
+                changed = true;
+                element.SetAttribute("data-render-transform", transformValue);
+            }
+
             if (TryExtractGridDeclarations(currentStyle, out var gridValues, out updatedStyle))
             {
                 currentStyle = updatedStyle;
@@ -2543,6 +3061,66 @@ private static bool TryExtractGradientBackground(string styleAttribute, out stri
         return true;
     }
 
+    /// <summary>
+    /// Extracts a `transform` declaration out of an inline `style` attribute before AngleSharp.Css
+    /// ever sees it, the same "extract to a data-render-* attribute" workaround
+    /// <see cref="TryExtractGradientBackground"/> already established for gradient
+    /// `background-image` values - except here the workaround is for a genuine upstream crash, not
+    /// an unsupported-value gap: AngleSharp.Css's own `CssTranslateValue.Compute()` throws a
+    /// `NullReferenceException` - confirmed via a failing test with a minimal repro, not assumed -
+    /// for *any* `translate`/`translateX`/`translateY` function, and that crash happens eagerly
+    /// while building the render tree (`RenderTreeBuilder.RenderElement` computing the *entire*
+    /// style declaration at once), before this renderer's own code ever runs. Extraction therefore
+    /// has to happen unconditionally for every `transform` declaration - not only ones containing
+    /// `translate` - both to keep this single code path simple and because relying on exactly
+    /// which other functions are crash-free would be fragile against a future AngleSharp.Css
+    /// version. `rotate()`/`scale()` were separately confirmed *not* to crash, but are extracted
+    /// the same way regardless, for that same reason.
+    /// </summary>
+    private static bool TryExtractTransformDeclaration(string styleAttribute, out string transformValue, out string updatedStyle)
+    {
+        transformValue = string.Empty;
+        updatedStyle = styleAttribute;
+
+        if (!styleAttribute.Contains("transform", StringComparison.OrdinalIgnoreCase))
+        {
+            return false;
+        }
+
+        var declarations = styleAttribute.Split(';', StringSplitOptions.TrimEntries | StringSplitOptions.RemoveEmptyEntries);
+        var remaining = new List<string>();
+
+        foreach (var declaration in declarations)
+        {
+            var separator = declaration.IndexOf(':');
+            if (separator <= 0)
+            {
+                continue;
+            }
+
+            var property = declaration[..separator].Trim();
+            var value = declaration[(separator + 1)..].Trim();
+
+            // Exact match only - "transform" must not also swallow "transform-origin", which is
+            // safe to leave for AngleSharp.Css's own (uncrashing) computation.
+            if (string.Equals(property, "transform", StringComparison.OrdinalIgnoreCase))
+            {
+                transformValue = value;
+                continue;
+            }
+
+            remaining.Add(declaration);
+        }
+
+        if (string.IsNullOrWhiteSpace(transformValue))
+        {
+            return false;
+        }
+
+        updatedStyle = string.Join(";", remaining);
+        return true;
+    }
+
     private static bool TryExtractGridDeclarations(string styleAttribute, out Dictionary<string, string> values, out string updatedStyle)
     {
         values = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase);
@@ -2683,6 +3261,20 @@ private static Dictionary<string, string> CreateStyleMap(ICssStyleDeclaration st
         AddIfPresent(map, "border-bottom-color", style.GetBorderBottomColor());
         AddIfPresent(map, "border-left-color", style.GetBorderLeftColor());
 
+        AddIfPresent(map, "border-top-left-radius", style.GetBorderTopLeftRadius());
+        AddIfPresent(map, "border-top-right-radius", style.GetBorderTopRightRadius());
+        AddIfPresent(map, "border-bottom-right-radius", style.GetBorderBottomRightRadius());
+        AddIfPresent(map, "border-bottom-left-radius", style.GetBorderBottomLeftRadius());
+
+        AddIfPresent(map, "box-shadow", style.GetBoxShadow());
+        AddIfPresent(map, "text-shadow", style.GetTextShadow());
+
+        AddIfPresent(map, "list-style-type", style.GetPropertyValue("list-style-type"));
+        AddIfPresent(map, "list-style-position", style.GetPropertyValue("list-style-position"));
+
+        AddIfPresent(map, "overflow-x", style.GetPropertyValue("overflow-x"));
+        AddIfPresent(map, "overflow-y", style.GetPropertyValue("overflow-y"));
+
         AddIfPresent(map, "outline-width", style.GetPropertyValue("outline-width"));
         AddIfPresent(map, "outline-style", style.GetPropertyValue("outline-style"));
         AddIfPresent(map, "outline-color", style.GetPropertyValue("outline-color"));
@@ -2716,8 +3308,34 @@ private static Dictionary<string, string> CreateStyleMap(ICssStyleDeclaration st
         }
         else
         {
-            AddIfPresent(map, "background-image", style.GetPropertyValue("background-image"));
-        }
+            // AngleSharp.Css does compute a `url(...)` background-image (unlike the `overflow`
+            // shorthand quirk documented elsewhere), but as a normalized, quoted `url("...")` - the
+            // raw inline `style=""` fallback below matches the pattern the grid/flex properties
+            // above already use for their own AngleSharp.Css computation gaps, kept here as the
+            // same defensive fallback for the rare case computation reports nothing at all.
+            var computedBackgroundImage = style.GetPropertyValue("background-image");
+            AddIfPresent(map, "background-image", string.IsNullOrWhiteSpace(computedBackgroundImage)
+                ? ParseStyleAttributeValue(inlineStyle, "background-image")
+                : computedBackgroundImage);
+        }
+
+        AddIfPresent(map, "background-repeat", string.IsNullOrWhiteSpace(style.GetPropertyValue("background-repeat")) ? ParseStyleAttributeValue(inlineStyle, "background-repeat") : style.GetPropertyValue("background-repeat"));
+        AddIfPresent(map, "background-position", string.IsNullOrWhiteSpace(style.GetPropertyValue("background-position")) ? ParseStyleAttributeValue(inlineStyle, "background-position") : style.GetPropertyValue("background-position"));
+        AddIfPresent(map, "background-size", string.IsNullOrWhiteSpace(style.GetPropertyValue("background-size")) ? ParseStyleAttributeValue(inlineStyle, "background-size") : style.GetPropertyValue("background-size"));
+        // Never read from AngleSharp.Css's own computed `transform` (nor even the raw inline style,
+        // since PrepareDocumentForRendering has already stripped it out by this point) -
+        // TryExtractTransformDeclaration moves the raw value to `data-render-transform` before
+        // AngleSharp.Css ever computes anything, working around a confirmed upstream crash in its
+        // `CssTranslateValue.Compute()`. See TryExtractTransformDeclaration's own remarks.
+        var rawTransformValue = element?.GetAttribute("data-render-transform");
+        AddIfPresent(map, "transform", rawTransformValue);
+        AddIfPresent(map, "transform-origin", string.IsNullOrWhiteSpace(style.GetPropertyValue("transform-origin")) ? ParseStyleAttributeValue(inlineStyle, "transform-origin") : style.GetPropertyValue("transform-origin"));
+        // AngleSharp.Css now parses `filter` into a structured CssFilterValue and preserves it
+        // through computed style (fixed upstream - it used to always report an empty string here),
+        // so this can now read the ordinary computed-style value directly, the same as any other
+        // property.
+        AddIfPresent(map, "filter", style.GetPropertyValue("filter"));
+        AddIfPresent(map, "opacity", style.GetOpacity());
         AddIfPresent(map, "font-size", style.GetFontSize());
         AddIfPresent(map, "font-family", style.GetFontFamily());
         AddIfPresent(map, "font-weight", style.GetPropertyValue("font-weight"));
@@ -2732,10 +3350,53 @@ private static Dictionary<string, string> CreateStyleMap(ICssStyleDeclaration st
         AddIfPresent(map, "letter-spacing", style.GetPropertyValue("letter-spacing"));
         AddIfPresent(map, "line-height", style.GetLineHeight());
         AddIfPresent(map, "color", style.GetColor());
+        AddIfPresent(map, "white-space", style.GetPropertyValue("white-space"));
+
+        ApplyActiveTransitionAndAnimationOverrides(map, element);
 
         return map;
     }
 
+    // Overrides every style-map entry that is currently mid-`transition` or mid-`animation` with
+    // its interpolated value, so the rest of this renderer's normal per-property parsing
+    // (ParseLength, ParseColor, ...) never has to know either is even happening - it just sees
+    // whatever value would otherwise be in the map, substituted for the eased in-between one. A
+    // no-op (and effectively free - one ConditionalWeakTable lookup) for the overwhelming majority
+    // of documents, which were never wired up for interactive use via
+    // IBrowsingContext.GetDomHarness() at all. `animation` takes precedence over `transition` for a
+    // property both are currently affecting - a reasonable simplification of the CSS cascade's own
+    // "animations, then transitions" ordering (transitions technically animate on top of whatever
+    // the animation produces, which this renderer does not attempt to layer precisely).
+    private static void ApplyActiveTransitionAndAnimationOverrides(Dictionary<string, string> map, IElement? element)
+    {
+        if (element?.Owner is null || !element.Owner.Context.TryGetDomHarness(out var harness) || harness is null)
+        {
+            return;
+        }
+
+        // Iterates the full interpolatable whitelist, not just map.Keys - a property that only
+        // ever appears inside a @keyframes block (never as a base/inherited declaration, e.g.
+        // `opacity` set solely by an animation) would otherwise have no key in the map at all for
+        // this loop to find and override.
+        foreach (var property in CssValueInterpolation.InterpolatableProperties.Keys)
+        {
+            var animatedValue = harness.GetAnimatedValue(element, property);
+
+            if (animatedValue is not null)
+            {
+                map[property] = animatedValue;
+                continue;
+            }
+
+            var transitioningValue = harness.GetTransitioningValue(element, property);
+
+            if (transitioningValue is not null)
+            {
+                map[property] = transitioningValue;
+            }
+        }
+    }
+
     private static void AddIfPresent(Dictionary<string, string> map, string property, string? value)
     {
         if (!string.IsNullOrWhiteSpace(value))
@@ -2895,7 +3556,7 @@ private static int ParseZIndex(Dictionary<string, string> styleMap)
             : 0;
     }
 
-    private static BoxStyle ResolveBoxStyle(Dictionary<string, string> styleMap)
+    private static BoxStyle ResolveBoxStyle(Dictionary<string, string> styleMap, IElement element)
     {
         var margin = new EdgeSizes(
             Top: ParseLength(styleMap, "margin-top", 0f, 0f, allowAuto: false),
@@ -2920,7 +3581,7 @@ private static BoxStyle ResolveBoxStyle(Dictionary<string, string> styleMap)
         borderWidth = ApplyBorderStyleToWidths(borderWidth, borderStyle);
 
         var backgroundColor = ParseColor(styleMap.TryGetValue("background-color", out var background) ? background : null, RenderColor.Transparent);
-        var backgroundPaint = ParseBackgroundPaint(styleMap, backgroundColor);
+        var backgroundPaint = ParseBackgroundPaint(styleMap, backgroundColor, element);
         var borderColor = ParseColor(
             styleMap.TryGetValue("border-top-color", out var topColor) ? topColor :
             styleMap.TryGetValue("border-right-color", out var rightColor) ? rightColor :
@@ -2929,51 +3590,231 @@ private static BoxStyle ResolveBoxStyle(Dictionary<string, string> styleMap)
             null,
             RenderColor.Black);
 
-        return new BoxStyle(margin, padding, borderWidth, backgroundPaint, borderColor);
-    }
+        var (topLeftX, topLeftY) = ParseCornerRadius(styleMap, "border-top-left-radius");
+        var (topRightX, topRightY) = ParseCornerRadius(styleMap, "border-top-right-radius");
+        var (bottomRightX, bottomRightY) = ParseCornerRadius(styleMap, "border-bottom-right-radius");
+        var (bottomLeftX, bottomLeftY) = ParseCornerRadius(styleMap, "border-bottom-left-radius");
+        var borderRadius = new RenderCornerRadii(
+            topLeftX, topLeftY,
+            topRightX, topRightY,
+            bottomRightX, bottomRightY,
+            bottomLeftX, bottomLeftY);
 
-    private static EdgeBorderStyle ResolveBorderStyles(Dictionary<string, string> styleMap)
-    {
-        var top = styleMap.TryGetValue("border-top-style", out var topStyle)
-            ? ParseBorderStyleToken(topStyle)
-            : BorderStyleKind.Solid;
-        var right = styleMap.TryGetValue("border-right-style", out var rightStyle)
-            ? ParseBorderStyleToken(rightStyle)
-            : BorderStyleKind.Solid;
-        var bottom = styleMap.TryGetValue("border-bottom-style", out var bottomStyle)
-            ? ParseBorderStyleToken(bottomStyle)
-            : BorderStyleKind.Solid;
-        var left = styleMap.TryGetValue("border-left-style", out var leftStyle)
-            ? ParseBorderStyleToken(leftStyle)
-            : BorderStyleKind.Solid;
+        var boxShadows = ParseBoxShadows(styleMap.TryGetValue("box-shadow", out var boxShadowValue) ? boxShadowValue : null);
 
-        return new EdgeBorderStyle(top, right, bottom, left);
+        return new BoxStyle(margin, padding, borderWidth, backgroundPaint, borderColor, borderRadius, boxShadows);
     }
 
-    private static BorderStyleKind ParseBorderStyleToken(string? token)
+    /// <summary>
+    /// Parses a `box-shadow` value into its comma-separated layers, in CSS authoring order
+    /// (first-listed shadow paints topmost among shadows). AngleSharp.Css's computed style
+    /// normalizes every layer's color to `rgba(r, g, b, a)` regardless of how it was authored
+    /// (`red`, `#f00`, ...), which <see cref="ExtractColorToken"/> relies on to split a layer's
+    /// color from its lengths without being confused by the commas inside `rgba(...)`.
+    /// </summary>
+    private static IReadOnlyList<RenderBoxShadow> ParseBoxShadows(string? value)
     {
-        if (string.IsNullOrWhiteSpace(token))
+        if (string.IsNullOrWhiteSpace(value) || string.Equals(value.Trim(), "none", StringComparison.OrdinalIgnoreCase))
         {
-            return BorderStyleKind.Solid;
+            return [];
         }
 
-        var normalized = token.Trim().ToLowerInvariant();
+        var layers = SplitTopLevelCommaList(value);
+        var shadows = new List<RenderBoxShadow>(layers.Length);
 
-        return normalized switch
+        foreach (var layer in layers)
         {
-            "none" => BorderStyleKind.None,
-            "hidden" => BorderStyleKind.Hidden,
-            _ => BorderStyleKind.Solid,
-        };
+            if (ParseSingleBoxShadow(layer) is { } shadow)
+            {
+                shadows.Add(shadow);
+            }
+        }
+
+        return shadows;
     }
 
-    private static EdgeSizes ApplyBorderStyleToWidths(EdgeSizes widths, EdgeBorderStyle styles)
+    private static RenderBoxShadow? ParseSingleBoxShadow(string layer)
     {
-        return widths with
+        var trimmed = layer.Trim();
+        var inset = false;
+
+        if (trimmed.StartsWith("inset", StringComparison.OrdinalIgnoreCase) && (trimmed.Length == 5 || char.IsWhiteSpace(trimmed[5])))
         {
-            Top = IsPaintedBorderStyle(styles.Top) ? widths.Top : 0f,
-            Right = IsPaintedBorderStyle(styles.Right) ? widths.Right : 0f,
-            Bottom = IsPaintedBorderStyle(styles.Bottom) ? widths.Bottom : 0f,
+            inset = true;
+            trimmed = trimmed[5..].TrimStart();
+        }
+        else if (trimmed.EndsWith("inset", StringComparison.OrdinalIgnoreCase) && (trimmed.Length == 5 || char.IsWhiteSpace(trimmed[^6])))
+        {
+            inset = true;
+            trimmed = trimmed[..^5].TrimEnd();
+        }
+
+        var (colorToken, remainder) = ExtractColorToken(trimmed);
+        var color = ParseColor(colorToken, RenderColor.Black);
+        var tokens = remainder.Split(' ', StringSplitOptions.RemoveEmptyEntries);
+
+        if (tokens.Length < 2)
+        {
+            return null;
+        }
+
+        var offsetX = ParseLengthValue(tokens[0], 0f, allowAuto: false);
+        var offsetY = ParseLengthValue(tokens[1], 0f, allowAuto: false);
+        var blurRadius = tokens.Length > 2 ? Math.Max(0f, ParseLengthValue(tokens[2], 0f, allowAuto: false)) : 0f;
+        var spreadRadius = tokens.Length > 3 ? ParseLengthValue(tokens[3], 0f, allowAuto: false) : 0f;
+
+        return new RenderBoxShadow(offsetX, offsetY, blurRadius, spreadRadius, color, inset);
+    }
+
+    /// <summary>
+    /// Parses a `text-shadow` value into its comma-separated layers, in CSS authoring order
+    /// (first-listed shadow paints topmost among shadows). Unlike `box-shadow`, a layer has no
+    /// `inset` keyword and no spread component.
+    /// </summary>
+    private static IReadOnlyList<RenderTextShadow> ParseTextShadows(string? value, IReadOnlyList<RenderTextShadow> inherited)
+    {
+        if (string.IsNullOrWhiteSpace(value))
+        {
+            return inherited;
+        }
+
+        if (string.Equals(value.Trim(), "none", StringComparison.OrdinalIgnoreCase))
+        {
+            return [];
+        }
+
+        var layers = SplitTopLevelCommaList(value);
+        var shadows = new List<RenderTextShadow>(layers.Length);
+
+        foreach (var layer in layers)
+        {
+            if (ParseSingleTextShadow(layer) is { } shadow)
+            {
+                shadows.Add(shadow);
+            }
+        }
+
+        return shadows;
+    }
+
+    private static RenderTextShadow? ParseSingleTextShadow(string layer)
+    {
+        var (colorToken, remainder) = ExtractColorToken(layer.Trim());
+        var color = ParseColor(colorToken, RenderColor.Black);
+        var tokens = remainder.Split(' ', StringSplitOptions.RemoveEmptyEntries);
+
+        if (tokens.Length < 2)
+        {
+            return null;
+        }
+
+        var offsetX = ParseLengthValue(tokens[0], 0f, allowAuto: false);
+        var offsetY = ParseLengthValue(tokens[1], 0f, allowAuto: false);
+        var blurRadius = tokens.Length > 2 ? Math.Max(0f, ParseLengthValue(tokens[2], 0f, allowAuto: false)) : 0f;
+
+        return new RenderTextShadow(offsetX, offsetY, blurRadius, color);
+    }
+
+    /// <summary>
+    /// Splits a shadow layer's color from its offset/blur/spread lengths. AngleSharp.Css always
+    /// normalizes a shadow's color to `rgba(r, g, b, a)`, so the color is located by its
+    /// parenthesized function call rather than by naive whitespace splitting, which would
+    /// otherwise be misled by the spaces after the commas inside `rgba(...)`. Falls back to
+    /// treating the last whitespace-separated token as the color for any value that reaches this
+    /// parser without going through AngleSharp.Css's own normalization.
+    /// </summary>
+    private static (string? ColorToken, string Remainder) ExtractColorToken(string value)
+    {
+        var functionStart = value.IndexOf("rgba(", StringComparison.OrdinalIgnoreCase);
+
+        if (functionStart < 0)
+        {
+            var lastSpace = value.TrimEnd().LastIndexOf(' ');
+            return lastSpace < 0
+                ? (value.Length > 0 ? value.Trim() : null, string.Empty)
+                : (value[(lastSpace + 1)..].Trim(), value[..lastSpace]);
+        }
+
+        var functionEnd = value.IndexOf(')', functionStart);
+
+        if (functionEnd < 0)
+        {
+            return (value[functionStart..].Trim(), value[..functionStart]);
+        }
+
+        var colorToken = value[functionStart..(functionEnd + 1)];
+        var remainder = value[..functionStart] + value[(functionEnd + 1)..];
+        return (colorToken, remainder);
+    }
+
+    /// <summary>
+    /// Parses a `border-*-radius` longhand value, which AngleSharp.Css reports as one length
+    /// ("8px", for a circular corner) or two space-separated lengths ("8px 4px", horizontal then
+    /// vertical, for an elliptical corner). Percentages arrive already resolved to pixels by
+    /// AngleSharp.Css's computed style engine.
+    /// </summary>
+    private static (float X, float Y) ParseCornerRadius(Dictionary<string, string> styleMap, string propertyName)
+    {
+        if (!styleMap.TryGetValue(propertyName, out var value) || string.IsNullOrWhiteSpace(value))
+        {
+            return (0f, 0f);
+        }
+
+        var parts = value.Trim().Split(' ', StringSplitOptions.RemoveEmptyEntries);
+
+        if (parts.Length == 0)
+        {
+            return (0f, 0f);
+        }
+
+        var x = ParseLengthValue(parts[0], 0f, allowAuto: false);
+        var y = parts.Length > 1 ? ParseLengthValue(parts[1], 0f, allowAuto: false) : x;
+
+        return (x, y);
+    }
+
+    private static EdgeBorderStyle ResolveBorderStyles(Dictionary<string, string> styleMap)
+    {
+        var top = styleMap.TryGetValue("border-top-style", out var topStyle)
+            ? ParseBorderStyleToken(topStyle)
+            : BorderStyleKind.Solid;
+        var right = styleMap.TryGetValue("border-right-style", out var rightStyle)
+            ? ParseBorderStyleToken(rightStyle)
+            : BorderStyleKind.Solid;
+        var bottom = styleMap.TryGetValue("border-bottom-style", out var bottomStyle)
+            ? ParseBorderStyleToken(bottomStyle)
+            : BorderStyleKind.Solid;
+        var left = styleMap.TryGetValue("border-left-style", out var leftStyle)
+            ? ParseBorderStyleToken(leftStyle)
+            : BorderStyleKind.Solid;
+
+        return new EdgeBorderStyle(top, right, bottom, left);
+    }
+
+    private static BorderStyleKind ParseBorderStyleToken(string? token)
+    {
+        if (string.IsNullOrWhiteSpace(token))
+        {
+            return BorderStyleKind.Solid;
+        }
+
+        var normalized = token.Trim().ToLowerInvariant();
+
+        return normalized switch
+        {
+            "none" => BorderStyleKind.None,
+            "hidden" => BorderStyleKind.Hidden,
+            _ => BorderStyleKind.Solid,
+        };
+    }
+
+    private static EdgeSizes ApplyBorderStyleToWidths(EdgeSizes widths, EdgeBorderStyle styles)
+    {
+        return widths with
+        {
+            Top = IsPaintedBorderStyle(styles.Top) ? widths.Top : 0f,
+            Right = IsPaintedBorderStyle(styles.Right) ? widths.Right : 0f,
+            Bottom = IsPaintedBorderStyle(styles.Bottom) ? widths.Bottom : 0f,
             Left = IsPaintedBorderStyle(styles.Left) ? widths.Left : 0f,
         };
     }
@@ -3149,12 +3990,30 @@ private static bool TryRasterizeInlineSvgElement(IElement element, out CachedIma
     private static bool TryGetOrLoadImageResource(IElement element, string? source, out CachedImageResource? imageResource)
     {
         imageResource = null;
-        if (string.IsNullOrWhiteSpace(source))
-        {
-            return false;
-        }
 
-        var cacheKey = source.Trim();
+        return !string.IsNullOrWhiteSpace(source) &&
+               TryGetOrLoadCachedResource(element, source.Trim(), TryLoadImageResource, out imageResource);
+    }
+
+    /// <summary>
+    /// Resolves a `background-image: url(...)` reference to a decoded, cached image, sharing the
+    /// same per-document <see cref="DocumentImageCache"/> (keyed by the same trimmed URL string) as
+    /// an `&lt;img src&gt;` reference to the exact same URL - one fetch serves both. Unlike
+    /// <see cref="TryGetOrLoadImageResource"/>, there is no <see cref="ILoadableElement"/> download
+    /// already in flight to consult first: a CSS property value has no DOM-level load of its own,
+    /// so <see cref="TryLoadBackgroundImageResource"/> always resolves the URL itself (data URI, or
+    /// the network - and only the network - when the browsing context has an
+    /// <see cref="IDocumentLoader"/> configured), mirroring how <c>@font-face url()</c> sources are
+    /// handled in <c>FontFaceLoader</c>.
+    /// </summary>
+    private static bool TryGetOrLoadBackgroundImageResource(IElement element, string url, out CachedImageResource? imageResource) =>
+        TryGetOrLoadCachedResource(element, url.Trim(), TryLoadBackgroundImageResource, out imageResource);
+
+    private delegate bool ImageResourceLoader(IElement element, string source, out CachedImageResource? imageResource);
+
+    private static bool TryGetOrLoadCachedResource(IElement element, string cacheKey, ImageResourceLoader loader, out CachedImageResource? imageResource)
+    {
+        imageResource = null;
         var cache = GetImageCache(element);
 
         if (cache is not null)
@@ -3168,28 +4027,17 @@ private static bool TryGetOrLoadImageResource(IElement element, string? source,
             }
         }
 
-        if (!TryLoadImageResource(element, source, out imageResource))
-        {
-            if (cache is not null)
-            {
-                lock (cache.Resources)
-                {
-                    cache.Resources[cacheKey] = null;
-                }
-            }
-
-            return false;
-        }
+        var loaded = loader(element, cacheKey, out imageResource);
 
         if (cache is not null)
         {
             lock (cache.Resources)
             {
-                cache.Resources[cacheKey] = imageResource;
+                cache.Resources[cacheKey] = loaded ? imageResource : null;
             }
         }
 
-        return true;
+        return loaded;
     }
 
     private static DocumentImageCache? GetImageCache(IElement element)
@@ -3236,7 +4084,74 @@ private static bool TryLoadImageResource(IElement element, string? source, out C
             mimeType = dataUriMimeType;
         }
 
-        if (bytes is null || bytes.Length == 0)
+        return bytes is not null && TryDecodeImageBytes(bytes, mimeType, out imageResource);
+    }
+
+    /// <summary>
+    /// Resolves a `background-image: url(...)` value: a data URI decodes inline, exactly like an
+    /// `&lt;img src&gt;` data URI; anything else is only ever fetched when the browsing context was
+    /// configured with an <see cref="IDocumentLoader"/> - matching how images and `@font-face`
+    /// sources are already handled, a renderer should not silently reach out to the network. The
+    /// fetch is synchronous (blocking on the download's Task) so the resource is
+    /// available - loaded and decoded - within the very same <c>BuildDisplayList</c> call that
+    /// requested it, the same way an `&lt;img&gt;`'s already-in-flight <c>CurrentDownload</c> is
+    /// awaited: this renderer has no separate "repaint later once loaded" pass to defer to.
+    /// </summary>
+    private static bool TryLoadBackgroundImageResource(IElement element, string url, out CachedImageResource? imageResource)
+    {
+        imageResource = null;
+
+        if (TryParseDataUri(url, out var dataUriBytes, out var dataUriMimeType))
+        {
+            return dataUriBytes is not null && TryDecodeImageBytes(dataUriBytes, dataUriMimeType, out imageResource);
+        }
+
+        var document = element.Owner;
+        var loader = document?.Context.GetService<IDocumentLoader>();
+
+        if (document is null || loader is null)
+        {
+            return false;
+        }
+
+        try
+        {
+            var target = new Url(document.BaseUrl, url);
+            var download = loader.FetchAsync(DocumentRequest.Get(target, source: document, referer: document.BaseUri));
+            var response = download.Task.GetAwaiter().GetResult();
+
+            if (response?.Content is null)
+            {
+                return false;
+            }
+
+            using var content = response.Content;
+            using var buffer = new MemoryStream();
+            content.CopyTo(buffer);
+            var bytes = buffer.ToArray();
+
+            if (bytes.Length == 0)
+            {
+                return false;
+            }
+
+            var mimeType = response.Headers?.TryGetValue("Content-Type", out var contentType) == true && !string.IsNullOrWhiteSpace(contentType)
+                ? contentType
+                : "image/unknown";
+
+            return TryDecodeImageBytes(bytes, mimeType, out imageResource);
+        }
+        catch
+        {
+            return false;
+        }
+    }
+
+    private static bool TryDecodeImageBytes(byte[] bytes, string? mimeType, out CachedImageResource? imageResource)
+    {
+        imageResource = null;
+
+        if (bytes.Length == 0)
         {
             return false;
         }
@@ -3258,10 +4173,7 @@ private static bool TryLoadImageResource(IElement element, string? source, out C
             return false;
         }
 
-        var naturalWidth = skImage.Width;
-        var naturalHeight = skImage.Height;
-
-        imageResource = new CachedImageResource(bytes, mimeType ?? "image/unknown", naturalWidth, naturalHeight);
+        imageResource = new CachedImageResource(bytes, mimeType ?? "image/unknown", skImage.Width, skImage.Height);
         return true;
     }
 
@@ -3270,246 +4182,1733 @@ private static bool TryParseDataUri(string? source, out byte[]? bytes, out strin
         bytes = null;
         mimeType = null;
 
-        if (string.IsNullOrWhiteSpace(source) || !source.StartsWith("data:", StringComparison.OrdinalIgnoreCase))
+        if (string.IsNullOrWhiteSpace(source) || !source.StartsWith("data:", StringComparison.OrdinalIgnoreCase))
+        {
+            return false;
+        }
+
+        var commaIndex = source.IndexOf(',');
+        if (commaIndex <= 5)
+        {
+            return false;
+        }
+
+        var header = source[5..commaIndex];
+        var isBase64 = header.EndsWith(";base64", StringComparison.OrdinalIgnoreCase);
+        var mediaType = isBase64 ? header[..^7] : header;
+        var payload = source[(commaIndex + 1)..];
+
+        if (string.IsNullOrEmpty(mediaType))
+        {
+            mimeType = "image/unknown";
+        }
+        else if (mediaType.StartsWith(";", StringComparison.Ordinal))
+        {
+            mimeType = "image/unknown";
+        }
+        else
+        {
+            mimeType = mediaType;
+        }
+
+        try
+        {
+            bytes = isBase64
+                ? Convert.FromBase64String(payload)
+                : Encoding.UTF8.GetBytes(Uri.UnescapeDataString(payload));
+        }
+        catch
+        {
+            bytes = null;
+            return false;
+        }
+
+        return bytes.Length > 0;
+    }
+
+    /// <summary>
+    /// Identifies which kind of default styling/content-painting a form control needs. `None`
+    /// covers every non-form element, so callers can skip all of the form-control machinery with a
+    /// single check. `Hidden` (`input[type=hidden]`) never lays out or paints at all - handled by
+    /// an early return in <c>LayoutElement</c> rather than here, since AngleSharp.Css's UA
+    /// stylesheet does not give it `display: none` the way a real browser's does (every `&lt;input&gt;`
+    /// type computes to plain `inline-block` in this AngleSharp.Css version, verified empirically).
+    /// </summary>
+    private enum FormControlKind
+    {
+        /// <summary>Not a form control.</summary>
+        None,
+
+        /// <summary>
+        /// A single-line text value box: <c>text</c>, and every other textual `&lt;input&gt;` type this
+        /// renderer treats identically (`search`, `url`, `tel`, `email`, `number`, the date/time
+        /// family, and any unrecognized/absent type - matching the HTML spec's "unknown type falls
+        /// back to text" rule), plus `password` (masked with bullet characters).
+        /// </summary>
+        TextLike,
+
+        /// <summary>`input[type=checkbox]`.</summary>
+        Checkbox,
+
+        /// <summary>`input[type=radio]`.</summary>
+        Radio,
+
+        /// <summary>`input[type=color]`.</summary>
+        Color,
+
+        /// <summary>
+        /// A clickable, label-centered button box: `&lt;button&gt;` and
+        /// `input[type=button|submit|reset]`.
+        /// </summary>
+        Button,
+
+        /// <summary>`&lt;select&gt;` - shows only its selected `&lt;option&gt;`'s text, never every option.</summary>
+        Select,
+
+        /// <summary>`&lt;textarea&gt;` - gets the same box chrome as a text input, but keeps its real
+        /// child text node flowing through the ordinary block child-layout path for its content.</summary>
+        TextArea,
+
+        /// <summary>`input[type=hidden]` - never laid out or painted; see the type's own remarks.</summary>
+        Hidden,
+    }
+
+    /// <summary>
+    /// A common browser checkbox/radio accent color (Chrome/Edge's default `accent-color`),
+    /// approximated as a fixed constant - this renderer does not parse the CSS `accent-color`
+    /// property itself, a deliberate scope cut for a rarely-overridden value.
+    /// </summary>
+    private static readonly RenderColor FormControlAccentColor = new(26, 115, 232, 255);
+
+    /// <summary>
+    /// The bundled sans-serif font's own ascent, as a fraction of font-size, measured empirically
+    /// via <c>SKPaint.FontMetrics</c> (14.8515625px ascent at font-size 16 -> 0.928) - used to
+    /// center a form control's single-line text on its real visual ink rather than on the taller
+    /// CSS line-height box. See <see cref="PaintFormControl"/> for why: the "baseline at the bottom
+    /// of the line-height box" convention the rest of this renderer uses for stacked body text
+    /// leaves no room for descenders/leading below the baseline, which is invisible across many
+    /// stacked lines but visibly pushed single-line form-control text toward the bottom of its box.
+    /// </summary>
+    private const float FormControlTextAscentRatio = 0.928f;
+
+    /// <summary>Companion to <see cref="FormControlTextAscentRatio"/> - measured descent 3.7734375px at font-size 16 -> 0.236.</summary>
+    private const float FormControlTextDescentRatio = 0.236f;
+
+    /// <summary>
+    /// "⌄" (DOWNWARDS ARROWHEAD, a thin chevron) rather than a custom-drawn triangle - <c>
+    /// DisplayList</c> has no generic polygon-fill primitive, so any dropdown indicator has to come
+    /// from a real font glyph. A plain ASCII "v" (this constant's original value) is guaranteed to
+    /// exist in every bundled font but reads as a literal letter, not an icon; U+2304 was verified
+    /// - by rendering several candidate glyphs and inspecting the actual pixels, not assumed from a
+    /// coverage table - to exist in the bundled DejaVu Sans as a proper thin chevron shape close to
+    /// a real browser's own native indicator, unlike, for example, U+23D7 which the bundled font
+    /// has no glyph for at all (renders as a hollow "tofu" box). Shared between the default-width
+    /// measurement in <see cref="ApplyFormControlDefaults"/> and the actual paint in
+    /// <see cref="PaintFormControl"/> so the two can never disagree about how much room it needs.
+    /// </summary>
+    private const string FormControlSelectArrowGlyph = "⌄";
+
+    /// <summary>
+    /// A downward correction applied only to <see cref="FormControlSelectArrowGlyph"/>'s own
+    /// baseline, on top of the ordinary text baseline every other form-control label already
+    /// centers on via <see cref="FormControlTextAscentRatio"/>/<see cref="FormControlTextDescentRatio"/>.
+    /// Those two ratios approximate *ordinary latin text's* ink extents (built from measuring a
+    /// word like "Second"), but "⌄" is a short symbol glyph whose own ink sits much closer to the
+    /// baseline - measured via <c>SKPaint.MeasureText</c>'s tight bounding box at font-size 16:
+    /// "⌄" spans roughly 6px above the baseline to 1px below it (a 7px-tall glyph, vertical ink
+    /// center ~2.5px above baseline), while "Second" spans roughly 14px above to 2px below (a
+    /// 16px-tall run, vertical ink center ~6px above baseline). Painting both at the *same*
+    /// baseline - which is what correctly centers the text label - therefore left the arrow's own,
+    /// much shorter ink sitting visibly low in the box: a real, confirmed bug, not a hypothetical
+    /// one (caught from a direct visual report, not assumed). This ratio is the measured difference
+    /// between those two ink-centers as a fraction of font-size (~-3px at font-size 16, i.e.
+    /// -3/16), shifting the arrow's baseline up just enough that its own ink centers where the
+    /// text's ink already does.
+    /// </summary>
+    private const float FormControlSelectArrowVerticalOffsetRatio = -0.19f;
+
+    /// <summary>
+    /// The width, in pixels, of a focused text-like input's caret - a fixed value rather than a
+    /// font-size fraction, matching how a real browser's own caret stays a thin ~1-2px line
+    /// regardless of font size rather than scaling with it.
+    /// </summary>
+    private const float FormControlCaretWidth = 1.5f;
+
+    /// <summary>
+    /// One full fade cycle of the caret's blink animation, in milliseconds - see
+    /// <see cref="PaintFormControlCaret"/> for how this is used.
+    /// </summary>
+    private const double FormControlCaretBlinkPeriodMs = 1000d;
+
+    private static FormControlKind ResolveFormControlKind(IElement element)
+    {
+        var tagName = element.LocalName;
+
+        if (string.Equals(tagName, "textarea", StringComparison.OrdinalIgnoreCase))
+        {
+            return FormControlKind.TextArea;
+        }
+
+        if (string.Equals(tagName, "select", StringComparison.OrdinalIgnoreCase))
+        {
+            return FormControlKind.Select;
+        }
+
+        if (string.Equals(tagName, "button", StringComparison.OrdinalIgnoreCase))
+        {
+            return FormControlKind.Button;
+        }
+
+        if (!string.Equals(tagName, "input", StringComparison.OrdinalIgnoreCase))
+        {
+            return FormControlKind.None;
+        }
+
+        var type = element.GetAttribute("type")?.Trim().ToLowerInvariant();
+
+        return type switch
+        {
+            "checkbox" => FormControlKind.Checkbox,
+            "radio" => FormControlKind.Radio,
+            "color" => FormControlKind.Color,
+            "button" or "submit" or "reset" => FormControlKind.Button,
+            "hidden" => FormControlKind.Hidden,
+            _ => FormControlKind.TextLike,
+        };
+    }
+
+    /// <summary>
+    /// Fills in the browser-like default declarations a form control needs (border, padding,
+    /// background, and a natural size) directly into its style map, but only for whichever
+    /// individual properties the author has not already set - exactly the same "synthesize the UA
+    /// default only where the cascade left a gap" approach already used for
+    /// `list-style-type`/`list-style-position`, just for a much larger set of properties at once.
+    /// This is what makes the defaults "somewhat overridable, like in real browsers": setting
+    /// `border`, `background-color`, `padding`, or an explicit `width`/`height` in CSS pre-empts
+    /// the corresponding default below exactly as it would in a real browser's form-control
+    /// rendering, while every property the author leaves alone still gets a sensible UA look
+    /// instead of rendering as an invisible, zero-size box (this renderer's actual previous
+    /// behavior for every form control, since neither this renderer nor the AngleSharp.Css UA
+    /// stylesheet gave them any border/padding/background/size at all).
+    /// </summary>
+    private static void ApplyFormControlDefaults(
+        FormControlKind kind,
+        IElement element,
+        Dictionary<string, string> styleMap,
+        RenderTextStyle textStyle,
+        LayoutContext context)
+    {
+        void SetDefault(string property, string value)
+        {
+            if (!styleMap.TryGetValue(property, out var existing) || string.IsNullOrWhiteSpace(existing))
+            {
+                styleMap[property] = value;
+            }
+        }
+
+        // Unlike border-width/style/color (which GetPropertyValue reports as a genuinely empty
+        // string when nothing in the cascade set them, verified empirically), AngleSharp.Css always
+        // resolves a concrete border-*-radius computed value - "0px" - even for a plain, completely
+        // unstyled element. A bare SetDefault would see that "0px" as "the author already set this"
+        // and never apply the radio's circular default at all, so radius defaults specifically also
+        // treat the computed zero-length initial value as still-unset.
+        void SetDefaultRadius(string property, string value)
+        {
+            if (!styleMap.TryGetValue(property, out var existing) ||
+                string.IsNullOrWhiteSpace(existing) ||
+                existing.Trim() is "0px" or "0" or "0%")
+            {
+                styleMap[property] = value;
+            }
+        }
+
+        void SetDefaultBorder()
+        {
+            foreach (var side in new[] { "top", "right", "bottom", "left" })
+            {
+                SetDefault($"border-{side}-width", "1px");
+                SetDefault($"border-{side}-style", "solid");
+                SetDefault($"border-{side}-color", "#767676");
+            }
+        }
+
+        void SetDefaultTextPadding()
+        {
+            SetDefault("padding-top", "2px");
+            SetDefault("padding-bottom", "2px");
+            SetDefault("padding-left", "4px");
+            SetDefault("padding-right", "4px");
+        }
+
+        // A single line's worth of content height - the box's own vertical size, not to be
+        // confused with the ascent/descent-based metric PaintFormControl separately uses to place
+        // where the *baseline* sits within that box (see FormControlTextAscentRatio/DescentRatio).
+        // Sizing the box itself off the full CSS line-height (rather than an independent constant
+        // like the previous 1.2f) keeps a text-like control's default box roomy enough for
+        // normal text leading, matching a real browser's own default input height reasonably
+        // closely.
+        var lineHeight = textStyle.FontSize * textStyle.LineHeightMultiplier;
+
+        switch (kind)
+        {
+            case FormControlKind.TextLike:
+                SetDefaultBorder();
+                SetDefaultTextPadding();
+                SetDefault("background-color", "#ffffff");
+                SetDefault("width", "150px");
+                SetDefault("height", FormatPixelValue(lineHeight));
+                break;
+
+            case FormControlKind.Select:
+            {
+                SetDefaultBorder();
+                SetDefaultTextPadding();
+                // A light gray, button-like background (not the white a text-like input gets) -
+                // matching how a real browser's own native <select> chrome looks closer to a
+                // button than to a text box.
+                SetDefault("background-color", "#e8e8e8");
+                SetDefault("height", FormatPixelValue(lineHeight));
+
+                // Shrinks to fit its selected option's own label plus room for the dropdown arrow -
+                // the same shrink-to-fit idea a <button> uses for its own label - rather than a
+                // text-like input's fixed 150px default: a native <select> is never that wide
+                // unless its own content actually demands it.
+                var selectLabel = ResolveFormControlLabel(FormControlKind.Select, element);
+                var selectLabelWidth = MeasureTextWidth(context, selectLabel, textStyle);
+                var arrowWidth = MeasureTextWidth(context, FormControlSelectArrowGlyph, textStyle);
+                var arrowGap = textStyle.FontSize * 0.5f;
+                SetDefault("width", FormatPixelValue(Math.Max(30f, selectLabelWidth + arrowGap + arrowWidth)));
+                break;
+            }
+
+            case FormControlKind.TextArea:
+                SetDefaultBorder();
+                SetDefaultTextPadding();
+                SetDefault("background-color", "#ffffff");
+                SetDefault("width", "150px");
+                // Only a floor, not a cap: an auto-sized box's height is already
+                // Math.Max(specifiedHeight, autoContentHeight) throughout this renderer, so a
+                // <textarea> whose real content wraps past two lines still grows past this default
+                // rather than clipping it - this default only guarantees the common "empty or
+                // short" textarea still shows a multi-line box, like a browser's default 2 rows.
+                SetDefault("height", FormatPixelValue(lineHeight * 2f));
+                break;
+
+            case FormControlKind.Color:
+                SetDefaultBorder();
+                SetDefault("padding-top", "2px");
+                SetDefault("padding-bottom", "2px");
+                SetDefault("padding-left", "2px");
+                SetDefault("padding-right", "2px");
+                SetDefault("background-color", "#ffffff");
+                SetDefault("width", "36px");
+                SetDefault("height", FormatPixelValue(lineHeight));
+                break;
+
+            case FormControlKind.Checkbox:
+            case FormControlKind.Radio:
+            {
+                var boxSize = Math.Max(10f, textStyle.FontSize * 0.9f);
+                SetDefaultBorder();
+                SetDefault("background-color", "#ffffff");
+                SetDefault("width", FormatPixelValue(boxSize));
+                SetDefault("height", FormatPixelValue(boxSize));
+
+                // Real UA stylesheets give a checkbox/radio a small default margin (Chromium's
+                // html.css uses exactly these four values) that every other form control kind does
+                // not get - without it, two adjacent checkboxes/radios in markup with no whitespace
+                // between their tags (as this renderer's own gallery test and countless real forms
+                // both write them) render flush against each other with no gap at all. Unlike
+                // border/padding/background, AngleSharp.Css's UA stylesheet does not set any margin
+                // on these elements (verified empirically: GetPropertyValue("margin-*") comes back
+                // empty), so there is no upstream default to fall back to here.
+                SetDefault("margin-top", "3px");
+                SetDefault("margin-right", "3px");
+                SetDefault("margin-bottom", "3px");
+                SetDefault("margin-left", "4px");
+
+                if (kind == FormControlKind.Radio)
+                {
+                    // Two things ParseCornerRadius needs accounted for, neither obvious from
+                    // reading it in isolation: (1) it (and ResolveBoxStyle generally) only ever
+                    // reads the four longhand border-*-radius keys, matching how AngleSharp.Css's
+                    // own computed style populates the style map (see CreateStyleMap) - the
+                    // `border-radius` shorthand itself is never consulted, so it has to be expanded
+                    // here. (2) ParseCornerRadius's own ParseLengthValue call has no percentage
+                    // handling at all (unlike the general ParseLength used for width/padding/etc.,
+                    // which resolves a percentage against a containing dimension) - it only expects
+                    // a plain pixel value, because AngleSharp.Css itself always pre-resolves a
+                    // percentage border-radius to pixels before this renderer ever sees it. An
+                    // injected "50%" string here would silently parse to 0 rather than a circle, so
+                    // an already-resolved pixel value (half of this box's own default size) is
+                    // written instead.
+                    var cornerRadius = FormatPixelValue(boxSize / 2f);
+                    SetDefaultRadius("border-top-left-radius", cornerRadius);
+                    SetDefaultRadius("border-top-right-radius", cornerRadius);
+                    SetDefaultRadius("border-bottom-right-radius", cornerRadius);
+                    SetDefaultRadius("border-bottom-left-radius", cornerRadius);
+                }
+
+                break;
+            }
+
+            case FormControlKind.Button:
+            {
+                SetDefaultBorder();
+                SetDefault("padding-top", "2px");
+                SetDefault("padding-bottom", "2px");
+                SetDefault("padding-left", "10px");
+                SetDefault("padding-right", "10px");
+                SetDefault("background-color", "#e8e8e8");
+                SetDefault("height", FormatPixelValue(lineHeight));
+
+                // A button shrinks to fit its own label, unlike the fixed-width text-like controls
+                // above - measured now (rather than left to a general shrink-to-fit layout
+                // algorithm this renderer does not otherwise have) using the exact same
+                // ITextMeasurer layout already measures body text with.
+                var label = ResolveFormControlLabel(FormControlKind.Button, element);
+                var labelWidth = MeasureTextWidth(context, label, textStyle);
+                SetDefault("width", FormatPixelValue(Math.Max(20f, labelWidth)));
+                break;
+            }
+        }
+    }
+
+    private static string FormatPixelValue(float pixels) =>
+        string.Create(CultureInfo.InvariantCulture, $"{pixels:0.##}px");
+
+    /// <summary>
+    /// Resolves the text a form control shows as its own content - a typed `value`, a button's
+    /// label, or a select's currently-selected option - independently of normal child-text flow,
+    /// since <see cref="PaintFormControl"/> paints it directly rather than relying on any child
+    /// nodes being laid out (an `&lt;input&gt;` has none at all; a `&lt;select&gt;`'s/`&lt;button&gt;`'s are
+    /// deliberately excluded from `orderedChildren` in `LayoutElement`).
+    /// </summary>
+    private static string ResolveFormControlLabel(FormControlKind kind, IElement element)
+    {
+        switch (kind)
+        {
+            case FormControlKind.Button:
+            {
+                if (string.Equals(element.LocalName, "button", StringComparison.OrdinalIgnoreCase))
+                {
+                    var text = NormalizeWhitespace(element.TextContent ?? string.Empty);
+                    return text.Length > 0 ? text : "Button";
+                }
+
+                var value = element.GetAttribute("value");
+
+                if (!string.IsNullOrWhiteSpace(value))
+                {
+                    return value;
+                }
+
+                return element.GetAttribute("type")?.Trim().ToLowerInvariant() switch
+                {
+                    "submit" => "Submit",
+                    "reset" => "Reset",
+                    _ => "Button",
+                };
+            }
+
+            case FormControlKind.TextLike:
+            {
+                var value = element.GetAttribute("value") ?? string.Empty;
+
+                // A password field's own value never paints as plain text, matching the one
+                // input type where masking is part of the type's defining behavior rather than an
+                // optional/overridable styling choice.
+                return string.Equals(element.GetAttribute("type")?.Trim(), "password", StringComparison.OrdinalIgnoreCase) && value.Length > 0
+                    ? new string('•', value.Length)
+                    : value;
+            }
+
+            case FormControlKind.Select:
+            {
+                // The DOM's own last-`selected`-wins semantics (mirroring how a real <select>
+                // resolves multiple `selected` attributes) - falling back to the first <option> when
+                // none is marked selected, exactly like a browser's own initial-selection default.
+                var options = element.Children.Where(child => string.Equals(child.LocalName, "option", StringComparison.OrdinalIgnoreCase)).ToList();
+                var selected = options.LastOrDefault(option => option.HasAttribute("selected")) ?? options.FirstOrDefault();
+                return selected is not null ? NormalizeWhitespace(selected.TextContent ?? string.Empty) : string.Empty;
+            }
+
+            default:
+                return string.Empty;
+        }
+    }
+
+    /// <summary>
+    /// Paints a form control's own visible content - typed/selected text, or a checkbox/radio's
+    /// checked-state fill, or a color swatch - directly into <paramref name="displayList"/> at the
+    /// same point <see cref="PaintListItemMarker"/> paints a list marker, so it lands after the
+    /// box's own background/border (spliced in later at the already-captured
+    /// <c>boxPaintInsertIndex</c>) but is otherwise unaffected by however tall the box's children
+    /// end up making it - none of these controls have real children of their own to wait on.
+    /// </summary>
+    private static void PaintFormControl(
+        DisplayList displayList,
+        IElement element,
+        FormControlKind kind,
+        RenderTextStyle textStyle,
+        LayoutContext context,
+        float contentX,
+        float contentY,
+        float contentWidth,
+        float contentHeight)
+    {
+        switch (kind)
+        {
+            case FormControlKind.TextLike:
+            case FormControlKind.Select:
+            case FormControlKind.Button:
+            {
+                var label = ResolveFormControlLabel(kind, element);
+
+                // Centers the glyphs' own visual ink, not the CSS line box: LayoutWrappedText's
+                // "content-box top plus one full line height" baseline convention places the
+                // baseline as if every pixel of the line-height were ascent, with none left over
+                // for descenders or leading - fine for stacked body-text lines (the next line's own
+                // top absorbs the difference), but for a single line centered in a form control's
+                // padded box it visibly pushed text toward the bottom. FormControlTextAscentRatio/
+                // DescentRatio approximate the bundled sans-serif font's real metrics at a
+                // representative size (measured via SKPaint.FontMetrics: ascent 14.85px, descent
+                // 3.77px at font-size 16, i.e. ~0.928/~0.236 of the em) the same way
+                // ParseVerticalAlign already approximates super/sub/middle offsets as fontSize
+                // fractions rather than querying per-font metrics through ITextMeasurer (which only
+                // ever exposes advance width, by design - see ITextMeasurer's own remarks). Computed
+                // unconditionally (not just when there is a label) since a focused, empty TextLike
+                // input still needs a baseline/left-edge position for its caret below.
+                var visualTextHeight = textStyle.FontSize * (FormControlTextAscentRatio + FormControlTextDescentRatio);
+                var verticalCenteringOffset = Math.Max(0f, (contentHeight - visualTextHeight) / 2f);
+                var baselineY = contentY + verticalCenteringOffset + (textStyle.FontSize * FormControlTextAscentRatio) + textStyle.VerticalAlignOffset;
+                var labelWidth = label.Length > 0 ? MeasureTextWidth(context, label, textStyle) : 0f;
+
+                if (label.Length > 0)
+                {
+                    // A text input's typed value and a select's selected option are both
+                    // left-aligned, matching how browsers show them; only a button's own label is
+                    // centered in its box.
+                    var labelX = kind == FormControlKind.Button
+                        ? contentX + Math.Max(0f, (contentWidth - labelWidth) / 2f)
+                        : contentX;
+
+                    displayList.DrawText(label, labelX, baselineY, textStyle.Color, textStyle.FontSize, textStyle.FontFamily, textStyle.FontWeight, textStyle.IsItalic, letterSpacing: textStyle.LetterSpacing);
+
+                    if (kind == FormControlKind.Select)
+                    {
+                        var arrowWidth = MeasureTextWidth(context, FormControlSelectArrowGlyph, textStyle);
+                        var arrowX = contentX + Math.Max(labelWidth, contentWidth - arrowWidth);
+                        var arrowBaselineY = baselineY + (textStyle.FontSize * FormControlSelectArrowVerticalOffsetRatio);
+                        displayList.DrawText(FormControlSelectArrowGlyph, arrowX, arrowBaselineY, textStyle.Color, textStyle.FontSize, textStyle.FontFamily, textStyle.FontWeight, textStyle.IsItalic, letterSpacing: textStyle.LetterSpacing);
+                    }
+                }
+
+                if (kind == FormControlKind.TextLike)
+                {
+                    PaintFormControlCaret(displayList, element, textStyle, contentX + labelWidth, baselineY);
+                }
+
+                break;
+            }
+
+            case FormControlKind.Checkbox:
+            {
+                if (element.HasAttribute("checked"))
+                {
+                    // Sized off the box's own smaller dimension so a checkbox whose width and
+                    // height default to the same font-relative size (the common case) still gets a
+                    // perfectly square fill even if either is overridden asymmetrically, and inset
+                    // independently per axis so the fill is centered on both axes rather than only
+                    // assuming a square box.
+                    var size = Math.Max(0f, Math.Min(contentWidth, contentHeight) * 0.6f);
+                    var insetX = (contentWidth - size) / 2f;
+                    var insetY = (contentHeight - size) / 2f;
+                    displayList.FillRect(new RenderRect(contentX + insetX, contentY + insetY, size, size), FormControlAccentColor);
+                }
+
+                break;
+            }
+
+            case FormControlKind.Radio:
+            {
+                if (element.HasAttribute("checked"))
+                {
+                    var size = Math.Max(0f, Math.Min(contentWidth, contentHeight) * 0.5f);
+                    var insetX = (contentWidth - size) / 2f;
+                    var insetY = (contentHeight - size) / 2f;
+                    var radii = new RenderCornerRadii(
+                        size / 2f, size / 2f, size / 2f, size / 2f,
+                        size / 2f, size / 2f, size / 2f, size / 2f);
+                    displayList.FillRect(new RenderRect(contentX + insetX, contentY + insetY, size, size), FormControlAccentColor, radii);
+                }
+
+                break;
+            }
+
+            case FormControlKind.Color:
+            {
+                // The swatch is painted as its own fill, independent of the box's own
+                // background-color (already defaulted to white above, as the swatch's "frame") -
+                // deliberately not overridable via CSS background-color, matching how a real
+                // browser's native color swatch ignores it too; only the frame around it (border,
+                // padding, size) goes through the ordinarily-overridable box model. It fills the
+                // entire content box (rather than a fixed line-height-tall rect within it) so it is
+                // always centered regardless of how tall the box's own content height ends up being.
+                var color = ParseColor(element.GetAttribute("value"), RenderColor.Black);
+                displayList.FillRect(new RenderRect(contentX, contentY, contentWidth, contentHeight), color);
+                break;
+            }
+        }
+    }
+
+    /// <summary>
+    /// Paints a text-insertion caret for a focused <see cref="FormControlKind.TextLike"/> input,
+    /// right after its current value (or at the content edge, for an empty one) - this renderer
+    /// has no concept of a selection/cursor offset within an input's own value (AngleSharp does
+    /// not track one either), so the caret always sits at the end of the text, matching by far the
+    /// most common "user is appending" case a static render would want to depict. Real focus comes
+    /// straight from the DOM (<see cref="IElement.IsFocused"/>) rather than being tracked
+    /// separately by this renderer - AngleSharp.Css's own `:focus` pseudo-class forcing already
+    /// delegates to it (see AGENTS.md's `:hover` section for the equivalent story with
+    /// <c>SetPseudoClass</c>), so a plain <c>element.Focus()</c> or
+    /// <c>element.SetPseudoClass("focus")</c> is already enough to make a caret appear, with no
+    /// extra wiring needed here. `&lt;textarea&gt;` is a deliberate, documented scope cut - unlike
+    /// a single-line input's fixed baseline, its caret position would depend on which wrapped line
+    /// its real child text node currently ends on, which this renderer does not track.
+    /// </summary>
+    private static void PaintFormControlCaret(
+        DisplayList displayList,
+        IElement element,
+        RenderTextStyle textStyle,
+        float caretX,
+        float baselineY)
+    {
+        if (!element.IsFocused)
+        {
+            return;
+        }
+
+        var alpha = 1f;
+
+        // The fade needs a live clock to animate against; without one (a plain, non-interactive
+        // RenderToPng/BuildDisplayList call, or a harness whose AdvanceTime was simply never
+        // called) it paints fully opaque rather than frozen at some arbitrary phase - the same
+        // "no harness means no animation, not a stuck mid-animation frame" fallback `transition`/
+        // `animation` already use (see ApplyActiveTransitionAndAnimationOverrides).
+        if (element.Owner is not null && element.Owner.Context.TryGetDomHarness(out var harness) && harness is not null)
+        {
+            // A smooth cosine "breathe" - continuously sweeping through fully visible, partway
+            // faded, and fully invisible - rather than a hard on/off blink, so sampling the virtual
+            // clock at any instant shows a plausible in-between frame instead of only ever a flat
+            // "on" or "off" pixel value.
+            var cyclePosition = harness.CurrentTime.TotalMilliseconds % FormControlCaretBlinkPeriodMs / FormControlCaretBlinkPeriodMs;
+            alpha = (float)((Math.Cos(cyclePosition * 2 * Math.PI) + 1) / 2);
+        }
+
+        var caretTop = baselineY - (textStyle.FontSize * FormControlTextAscentRatio);
+        var caretBottom = baselineY + (textStyle.FontSize * FormControlTextDescentRatio);
+        var alphaByte = (byte)Math.Clamp((int)MathF.Round(alpha * 255f), 0, 255);
+        var caretColor = new RenderColor(textStyle.Color.R, textStyle.Color.G, textStyle.Color.B, alphaByte);
+
+        displayList.FillRect(new RenderRect(caretX, caretTop, FormControlCaretWidth, caretBottom - caretTop), caretColor);
+    }
+
+    /// <summary>
+    /// Paints a `display: list-item` element's marker (bullet or number) and, for
+    /// `list-style-position: inside`, returns a copy of <paramref name="textStyle"/> whose
+    /// <see cref="RenderTextStyle.TextIndent"/> is widened to make room for it on the first line.
+    /// Safe to widen locally: <see cref="ResolveTextStyle"/> never falls back to an inherited
+    /// <c>TextIndent</c> (each element re-derives its own from its own style map, defaulting to
+    /// 0), so this local adjustment cannot leak into nested descendants' own indent.
+    /// </summary>
+    private static RenderTextStyle PaintListItemMarker(
+        DisplayList displayList,
+        IElement element,
+        Dictionary<string, string> styleMap,
+        RenderTextStyle textStyle,
+        LayoutContext context,
+        float borderBoxX,
+        float contentX,
+        float contentY)
+    {
+        var listStyleType = ResolveListStyleType(styleMap);
+
+        if (string.Equals(listStyleType, "none", StringComparison.OrdinalIgnoreCase))
+        {
+            return textStyle;
+        }
+
+        var isInside = styleMap.TryGetValue("list-style-position", out var positionValue) &&
+            string.Equals(positionValue.Trim(), "inside", StringComparison.OrdinalIgnoreCase);
+
+        // Aligns the marker with the first line of the li's own content, assuming that content
+        // starts as normal inline text at the default vertical-align - the common case, but an
+        // approximation when a li's first child is itself a block (its own first line may sit at
+        // a different offset than this).
+        var markerBaselineY = contentY + (textStyle.FontSize * textStyle.LineHeightMultiplier) + textStyle.VerticalAlignOffset;
+
+        // Not derived from any spec metric - a small, fixed visual gap between the marker and the
+        // content that follows it, matching the general proportions browsers use.
+        const float MarkerGap = 6f;
+
+        if (IsShapeListStyleType(listStyleType))
+        {
+            var markerSize = Math.Max(2f, textStyle.FontSize * 0.35f);
+            var markerTop = markerBaselineY - (textStyle.FontSize * 0.68f);
+            var markerLeft = isInside ? contentX : borderBoxX - MarkerGap - markerSize;
+            var markerRect = new RenderRect(markerLeft, markerTop, markerSize, markerSize);
+            var circularRadii = new RenderCornerRadii(
+                markerSize / 2f, markerSize / 2f, markerSize / 2f, markerSize / 2f,
+                markerSize / 2f, markerSize / 2f, markerSize / 2f, markerSize / 2f);
+
+            switch (listStyleType)
+            {
+                case "circle":
+                    displayList.StrokeRoundedRect(markerRect, textStyle.Color, Math.Max(1f, textStyle.FontSize * 0.08f), circularRadii);
+                    break;
+                case "square":
+                    displayList.FillRect(markerRect, textStyle.Color);
+                    break;
+                default: // disc
+                    displayList.FillRect(markerRect, textStyle.Color, circularRadii);
+                    break;
+            }
+
+            return isInside ? textStyle with { TextIndent = textStyle.TextIndent + markerSize + MarkerGap } : textStyle;
+        }
+
+        var markerText = FormatListMarkerText(ResolveListItemOrdinal(element), listStyleType);
+        var markerWidth = MeasureTextWidth(context, markerText, textStyle);
+        var markerX = isInside ? contentX : borderBoxX - MarkerGap - markerWidth;
+
+        displayList.DrawText(markerText, markerX, markerBaselineY, textStyle.Color, textStyle.FontSize, textStyle.FontFamily, textStyle.FontWeight, textStyle.IsItalic, letterSpacing: textStyle.LetterSpacing);
+
+        return isInside ? textStyle with { TextIndent = textStyle.TextIndent + markerWidth + MarkerGap } : textStyle;
+    }
+
+    /// <summary>
+    /// Whether an element's `overflow` clips its content. `scroll` and `auto` are treated the
+    /// same as `hidden`: a rendered PNG has no scrollbars or interactivity, so anything a browser
+    /// would let the user scroll to reveal is, here, simply clipped away like `hidden`.
+    /// </summary>
+    private static bool ShouldClipOverflow(Dictionary<string, string> styleMap) =>
+        IsClippingOverflowValue(ResolveOverflowAxis(styleMap, "overflow-x")) ||
+        IsClippingOverflowValue(ResolveOverflowAxis(styleMap, "overflow-y"));
+
+    /// <summary>
+    /// Resolves one overflow axis. AngleSharp.Css's `overflow` shorthand decomposes into
+    /// `overflow-x`/`overflow-y` in its own computed style, so the longhand can always be
+    /// read directly.
+    /// </summary>
+    private static string ResolveOverflowAxis(Dictionary<string, string> styleMap, string longhandProperty) =>
+        styleMap.TryGetValue(longhandProperty, out var axisValue) && !string.IsNullOrWhiteSpace(axisValue)
+            ? axisValue.Trim().ToLowerInvariant()
+            : "visible";
+
+    private static bool IsClippingOverflowValue(string overflowValue) =>
+        overflowValue is "hidden" or "scroll" or "auto";
+
+    // AngleSharp.Css's UA stylesheet sets list-style-type: disc directly on ol/ul/dir/menu/dd
+    // (fixed upstream), so this default is dead for the common case - it is still needed, and
+    // still correct, for an element given `display: list-item` explicitly (any other tag), which
+    // that UA rule does not cover and which still computes an empty list-style-type - confirmed
+    // empirically, not assumed.
+    private static string ResolveListStyleType(Dictionary<string, string> styleMap) =>
+        styleMap.TryGetValue("list-style-type", out var value) && !string.IsNullOrWhiteSpace(value)
+            ? value.Trim().ToLowerInvariant()
+            : "disc";
+
+    private static bool IsShapeListStyleType(string listStyleType) =>
+        listStyleType is "disc" or "circle" or "square";
+
+    /// <summary>
+    /// Formats an ordinal into the marker text for a numbered `list-style-type`. Any keyword this
+    /// renderer does not specifically implement (and plain `decimal`) falls back to a decimal
+    /// number, matching how browsers treat an unsupported `list-style-type` value.
+    /// </summary>
+    private static string FormatListMarkerText(int ordinal, string listStyleType) => listStyleType switch
+    {
+        "decimal-leading-zero" => (ordinal is >= 0 and < 10 ? "0" + ordinal.ToString(CultureInfo.InvariantCulture) : ordinal.ToString(CultureInfo.InvariantCulture)) + ".",
+        "lower-alpha" or "lower-latin" => FormatAlphaListMarker(ordinal, upper: false) + ".",
+        "upper-alpha" or "upper-latin" => FormatAlphaListMarker(ordinal, upper: true) + ".",
+        "lower-roman" => FormatRomanListMarker(ordinal, upper: false) + ".",
+        "upper-roman" => FormatRomanListMarker(ordinal, upper: true) + ".",
+        _ => ordinal.ToString(CultureInfo.InvariantCulture) + ".",
+    };
+
+    /// <summary>
+    /// Formats a 1-based ordinal as a base-26 letter sequence (a, b, ..., z, aa, ab, ...),
+    /// matching `list-style-type: lower-alpha`/`upper-alpha`.
+    /// </summary>
+    private static string FormatAlphaListMarker(int ordinal, bool upper)
+    {
+        if (ordinal < 1)
+        {
+            return ordinal.ToString(CultureInfo.InvariantCulture);
+        }
+
+        var baseChar = upper ? 'A' : 'a';
+        var chars = new Stack<char>();
+        var remaining = ordinal;
+
+        while (remaining > 0)
+        {
+            remaining--;
+            chars.Push((char)(baseChar + (remaining % 26)));
+            remaining /= 26;
+        }
+
+        return new string(chars.ToArray());
+    }
+
+    private static readonly (int Value, string Symbol)[] s_romanNumeralValues =
+    [
+        (1000, "M"), (900, "CM"), (500, "D"), (400, "CD"),
+        (100, "C"), (90, "XC"), (50, "L"), (40, "XL"),
+        (10, "X"), (9, "IX"), (5, "V"), (4, "IV"), (1, "I"),
+    ];
+
+    /// <summary>
+    /// Formats an ordinal as a Roman numeral, matching `list-style-type: lower-roman`/`upper-roman`.
+    /// Roman numerals have no standard representation outside 1-3999, so values outside that range
+    /// fall back to a plain decimal number, matching typical browser behavior.
+    /// </summary>
+    private static string FormatRomanListMarker(int ordinal, bool upper)
+    {
+        if (ordinal is < 1 or > 3999)
+        {
+            return ordinal.ToString(CultureInfo.InvariantCulture);
+        }
+
+        var builder = new StringBuilder();
+        var remaining = ordinal;
+
+        foreach (var (value, symbol) in s_romanNumeralValues)
+        {
+            while (remaining >= value)
+            {
+                builder.Append(symbol);
+                remaining -= value;
+            }
+        }
+
+        var result = builder.ToString();
+        return upper ? result : result.ToLowerInvariant();
+    }
+
+    /// <summary>
+    /// Resolves a `&lt;li&gt;`'s 1-based ordinal from its position among its parent's direct
+    /// `&lt;li&gt;` children in document order - not from a render-tree traversal order, which
+    /// can reorder for z-index/absolute positioning, and not from any generic CSS counter, since
+    /// only the common `&lt;ol&gt;`/`&lt;li&gt;` counting model (`start`, `reversed`, per-item
+    /// `value`) is implemented. A `&lt;li&gt;` outside any `&lt;ol&gt;`/`&lt;ul&gt;` still resolves
+    /// to 1, matching how browsers render a bare `&lt;li&gt;`.
+    /// </summary>
+    private static int ResolveListItemOrdinal(IElement liElement)
+    {
+        var parent = liElement.ParentElement;
+
+        if (parent is null)
+        {
+            return 1;
+        }
+
+        var isOrderedList = string.Equals(parent.LocalName, "ol", StringComparison.OrdinalIgnoreCase);
+        var reversed = isOrderedList && parent.HasAttribute("reversed");
+        var counter = isOrderedList && int.TryParse(parent.GetAttribute("start"), NumberStyles.Integer, CultureInfo.InvariantCulture, out var explicitStart)
+            ? explicitStart
+            : reversed
+                ? parent.Children.Count(c => string.Equals(c.LocalName, "li", StringComparison.OrdinalIgnoreCase))
+                : 1;
+
+        foreach (var child in parent.Children)
+        {
+            if (!string.Equals(child.LocalName, "li", StringComparison.OrdinalIgnoreCase))
+            {
+                continue;
+            }
+
+            if (int.TryParse(child.GetAttribute("value"), NumberStyles.Integer, CultureInfo.InvariantCulture, out var overrideValue))
+            {
+                counter = overrideValue;
+            }
+
+            if (ReferenceEquals(child, liElement))
+            {
+                return counter;
+            }
+
+            counter += reversed ? -1 : 1;
+        }
+
+        return counter;
+    }
+
+    private static void PaintTextShadows(DisplayList displayList, IReadOnlyList<RenderTextShadow> shadows, string text, float x, float y, RenderTextStyle textStyle)
+    {
+        if (shadows.Count == 0 || string.IsNullOrEmpty(text))
+        {
+            return;
+        }
+
+        // The first-listed shadow paints topmost among shadows (though always behind the text
+        // itself), so shadows are added back-to-front: last-authored first, first-authored last.
+        for (var i = shadows.Count - 1; i >= 0; i--)
+        {
+            var shadow = shadows[i];
+            displayList.DrawTextShadow(text, x + shadow.OffsetX, y + shadow.OffsetY, shadow.Color, textStyle.FontSize, textStyle.FontFamily, textStyle.FontWeight, textStyle.IsItalic, shadow.BlurRadius, textStyle.LetterSpacing);
+        }
+    }
+
+    private static void PaintBoxShadows(DisplayList displayList, IReadOnlyList<RenderBoxShadow> shadows, float x, float y, float width, float height, RenderCornerRadii radii)
+    {
+        if (shadows.Count == 0 || width <= 0f || height <= 0f)
+        {
+            return;
+        }
+
+        var clampedRadii = radii.ClampToBox(width, height);
+        var borderBoxRect = new RenderRect(x, y, width, height);
+
+        // The first-listed shadow paints topmost among shadows (though always behind the box
+        // itself), so shadows are added back-to-front: last-authored first, first-authored last.
+        for (var i = shadows.Count - 1; i >= 0; i--)
+        {
+            displayList.DrawBoxShadow(borderBoxRect, clampedRadii, shadows[i]);
+        }
+    }
+
+    private static void PaintBackground(DisplayList displayList, RenderPaint paint, float x, float y, float width, float height, RenderCornerRadii radii = default)
+    {
+        if (width <= 0f || height <= 0f)
+        {
+            return;
+        }
+
+        var clampedRadii = radii.ClampToBox(width, height);
+
+        if (paint is RenderColorPaint colorPaint)
+        {
+            if (colorPaint.Color.A == 0)
+            {
+                return;
+            }
+
+            displayList.FillRect(new RenderRect(x, y, width, height), colorPaint.Color, clampedRadii);
+            return;
+        }
+
+        if (paint is RenderGradientPaint or RenderImagePaint)
+        {
+            displayList.FillRect(new RenderRect(x, y, width, height), paint, clampedRadii);
+        }
+    }
+
+    private static void PaintBorder(DisplayList displayList, RenderColor color, float x, float y, float width, float height, EdgeSizes border, RenderCornerRadii radii = default)
+    {
+        if (color.A == 0 || width <= 0f || height <= 0f)
+        {
+            return;
+        }
+
+        var clampedRadii = radii.ClampToBox(width, height);
+
+        // A uniform-width border with rounded corners can be drawn as a single stroked ring; a
+        // border whose edges differ in width has no single stroke width to give the ring, so it
+        // falls back to the un-rounded four-rectangle path (a documented limitation - mixed-width
+        // rounded borders are rare enough not to warrant a per-edge rounded-quad implementation).
+        if (!clampedRadii.IsZero && border.Top > 0f && border.Top == border.Right && border.Top == border.Bottom && border.Top == border.Left)
+        {
+            var half = border.Top / 2f;
+            var strokeRect = new RenderRect(x + half, y + half, width - border.Top, height - border.Top);
+            var strokeRadii = new RenderCornerRadii(
+                Math.Max(0f, clampedRadii.TopLeftX - half), Math.Max(0f, clampedRadii.TopLeftY - half),
+                Math.Max(0f, clampedRadii.TopRightX - half), Math.Max(0f, clampedRadii.TopRightY - half),
+                Math.Max(0f, clampedRadii.BottomRightX - half), Math.Max(0f, clampedRadii.BottomRightY - half),
+                Math.Max(0f, clampedRadii.BottomLeftX - half), Math.Max(0f, clampedRadii.BottomLeftY - half));
+
+            displayList.StrokeRoundedRect(strokeRect, color, border.Top, strokeRadii);
+            return;
+        }
+
+        if (border.Top > 0f)
+        {
+            displayList.FillRect(new RenderRect(x, y, width, border.Top), color);
+        }
+
+        if (border.Right > 0f)
+        {
+            displayList.FillRect(new RenderRect(x + width - border.Right, y, border.Right, height), color);
+        }
+
+        if (border.Bottom > 0f)
+        {
+            displayList.FillRect(new RenderRect(x, y + height - border.Bottom, width, border.Bottom), color);
+        }
+
+        if (border.Left > 0f)
+        {
+            displayList.FillRect(new RenderRect(x, y, border.Left, height), color);
+        }
+    }
+
+    private static float CollapseMargins(float previousMarginBottom, float currentMarginTop)
+    {
+        var positivePart = Math.Max(0f, previousMarginBottom) + Math.Max(0f, currentMarginTop);
+        var negativePart = Math.Min(0f, previousMarginBottom) + Math.Min(0f, currentMarginTop);
+
+        if (positivePart > 0f && negativePart < 0f)
+        {
+            return positivePart + negativePart;
+        }
+
+        if (positivePart > 0f)
+        {
+            return Math.Max(previousMarginBottom, currentMarginTop);
+        }
+
+        return Math.Min(previousMarginBottom, currentMarginTop);
+    }
+
+    private static void ResolveHorizontalMetrics(
+        float containingWidth,
+        float specifiedContentWidth,
+        float borderLeft,
+        float borderRight,
+        float paddingLeft,
+        float paddingRight,
+        ref float marginLeft,
+        ref float marginRight,
+        out float contentWidth)
+    {
+        var hasAutoWidth = float.IsNaN(specifiedContentWidth);
+        var hasAutoLeft = float.IsNaN(marginLeft);
+        var hasAutoRight = float.IsNaN(marginRight);
+
+        var usedMarginLeft = hasAutoLeft ? 0f : marginLeft;
+        var usedMarginRight = hasAutoRight ? 0f : marginRight;
+        var horizontalExtras = borderLeft + borderRight + paddingLeft + paddingRight;
+
+        if (hasAutoWidth)
+        {
+            contentWidth = containingWidth - horizontalExtras - usedMarginLeft - usedMarginRight;
+
+            if (contentWidth < 0f)
+            {
+                contentWidth = 0f;
+            }
+
+            marginLeft = usedMarginLeft;
+            marginRight = usedMarginRight;
+            return;
+        }
+
+        contentWidth = Math.Max(0f, specifiedContentWidth);
+        var underflow = containingWidth - horizontalExtras - contentWidth - usedMarginLeft - usedMarginRight;
+
+        if (hasAutoLeft && hasAutoRight)
+        {
+            var half = underflow / 2f;
+            marginLeft = half;
+            marginRight = half;
+            return;
+        }
+
+        if (hasAutoLeft)
+        {
+            marginLeft = underflow;
+            marginRight = usedMarginRight;
+            return;
+        }
+
+        if (hasAutoRight)
+        {
+            marginLeft = usedMarginLeft;
+            marginRight = underflow;
+            return;
+        }
+
+        marginLeft = usedMarginLeft;
+        marginRight = usedMarginRight + underflow;
+    }
+
+    private static float ParseLength(Dictionary<string, string> styleMap, string propertyName, float relativeTo, float defaultValue, bool allowAuto)
+    {
+        if (!styleMap.TryGetValue(propertyName, out var value) || string.IsNullOrWhiteSpace(value))
+        {
+            return defaultValue;
+        }
+
+        var parsed = value.Trim().ToLowerInvariant();
+
+        if (allowAuto && parsed == "auto")
+        {
+            return float.NaN;
+        }
+
+        if (parsed.EndsWith("%", StringComparison.Ordinal) &&
+            float.TryParse(parsed[..^1], NumberStyles.Float, CultureInfo.InvariantCulture, out var pct))
+        {
+            return (pct / 100f) * relativeTo;
+        }
+
+        return ParseLengthValue(parsed, defaultValue, allowAuto: false);
+    }
+
+    internal static float ParseLengthValue(string value, float defaultValue, bool allowAuto = true)
+    {
+        if (allowAuto && string.Equals(value.Trim(), "auto", StringComparison.OrdinalIgnoreCase))
+        {
+            return float.NaN;
+        }
+
+        if (TryParsePixelValue(value, out var pixels))
+        {
+            return pixels;
+        }
+
+        if (float.TryParse(value, NumberStyles.Float, CultureInfo.InvariantCulture, out var unitless))
+        {
+            return unitless;
+        }
+
+        return defaultValue;
+    }
+
+    private static bool TryParsePixelValue(string value, out float pixels)
+    {
+        var trimmed = value.Trim().ToLowerInvariant();
+
+        if (trimmed.EndsWith("px", StringComparison.Ordinal))
+        {
+            return float.TryParse(trimmed[..^2], NumberStyles.Float, CultureInfo.InvariantCulture, out pixels);
+        }
+
+        pixels = 0f;
+        return false;
+    }
+
+    private static RenderPaint ParseBackgroundPaint(Dictionary<string, string> styleMap, RenderColor fallbackColor, IElement element)
+    {
+        if (!styleMap.TryGetValue("background-image", out var backgroundImage) || string.IsNullOrWhiteSpace(backgroundImage))
+        {
+            return new RenderColorPaint(fallbackColor);
+        }
+
+        var trimmed = backgroundImage.Trim();
+
+        if (string.Equals(trimmed, "none", StringComparison.OrdinalIgnoreCase))
+        {
+            return new RenderColorPaint(fallbackColor);
+        }
+
+        if (TryExtractCssUrl(trimmed, out var url))
+        {
+            // A background image that fails to load (bad data URI, 404, no IDocumentLoader
+            // configured, unsupported format) falls back to the background-color exactly like a
+            // browser does - the box is never left entirely unpainted because of it.
+            return TryGetOrLoadBackgroundImageResource(element, url, out var imageResource) && imageResource is not null
+                ? BuildImagePaint(imageResource, styleMap)
+                : new RenderColorPaint(fallbackColor);
+        }
+
+        return ParseGradientPaint(trimmed, fallbackColor);
+    }
+
+    private static bool TryExtractCssUrl(string value, out string url)
+    {
+        url = string.Empty;
+
+        if (!value.StartsWith("url(", StringComparison.OrdinalIgnoreCase))
+        {
+            return false;
+        }
+
+        var close = value.LastIndexOf(')');
+
+        if (close < 4)
+        {
+            return false;
+        }
+
+        url = value[4..close].Trim().Trim('\'', '"').Trim();
+        return url.Length > 0;
+    }
+
+    private static RenderPaint BuildImagePaint(CachedImageResource imageResource, Dictionary<string, string> styleMap)
+    {
+        var image = new RenderedImage(imageResource.Bytes, imageResource.NaturalWidth, imageResource.NaturalHeight, imageResource.MimeType);
+        var (repeatX, repeatY) = ParseBackgroundRepeat(styleMap);
+        var (positionX, positionY) = ParseBackgroundPosition(styleMap);
+        var size = ParseBackgroundSize(styleMap);
+
+        return new RenderImagePaint(image, repeatX, repeatY, positionX, positionY, size);
+    }
+
+    /// <summary>
+    /// Parses `background-repeat`. Only the single-keyword and two-keyword-per-axis forms are
+    /// recognized; `space`/`round` fall back to tiling like plain `repeat` rather than the spacing
+    /// they actually specify, since neither is otherwise implemented. The CSS initial value is
+    /// `repeat` on both axes.
+    /// </summary>
+    private static (bool RepeatX, bool RepeatY) ParseBackgroundRepeat(Dictionary<string, string> styleMap)
+    {
+        if (!styleMap.TryGetValue("background-repeat", out var value) || string.IsNullOrWhiteSpace(value))
+        {
+            return (true, true);
+        }
+
+        var tokens = value.Trim().Split(' ', StringSplitOptions.RemoveEmptyEntries);
+
+        if (tokens.Length == 0)
+        {
+            return (true, true);
+        }
+
+        bool IsRepeating(string token) => token.ToLowerInvariant() is "repeat" or "space" or "round";
+
+        return tokens[0].ToLowerInvariant() switch
+        {
+            "repeat-x" => (true, false),
+            "repeat-y" => (false, true),
+            "no-repeat" when tokens.Length == 1 => (false, false),
+            _ when tokens.Length >= 2 => (IsRepeating(tokens[0]), IsRepeating(tokens[1])),
+            _ => (IsRepeating(tokens[0]), IsRepeating(tokens[0])),
+        };
+    }
+
+    /// <summary>
+    /// Parses `background-position`. Only the common one- and two-value forms are recognized
+    /// (keywords, percentages, lengths); the four-value `&lt;side&gt; &lt;offset&gt;` edge-relative
+    /// syntax is not. The CSS initial value is `0% 0%` (top-left).
+    /// </summary>
+    private static (RenderBackgroundPositionComponent X, RenderBackgroundPositionComponent Y) ParseBackgroundPosition(Dictionary<string, string> styleMap)
+    {
+        if (!styleMap.TryGetValue("background-position", out var value) || string.IsNullOrWhiteSpace(value))
+        {
+            return (RenderBackgroundPositionComponent.Zero, RenderBackgroundPositionComponent.Zero);
+        }
+
+        var tokens = value.Trim().Split(' ', StringSplitOptions.RemoveEmptyEntries);
+
+        if (tokens.Length == 0)
+        {
+            return (RenderBackgroundPositionComponent.Zero, RenderBackgroundPositionComponent.Zero);
+        }
+
+        if (tokens.Length == 1)
+        {
+            // A single token positions the X axis (or both, for `center`); the Y axis defaults to
+            // centered, matching the CSS single-value `background-position` rule.
+            var only = tokens[0].ToLowerInvariant();
+
+            if (only is "top" or "bottom")
+            {
+                return (new RenderBackgroundPositionComponent(0.5f, 0f), ParsePositionComponent(only));
+            }
+
+            return (ParsePositionComponent(only), new RenderBackgroundPositionComponent(0.5f, 0f));
+        }
+
+        return (ParsePositionComponent(tokens[0]), ParsePositionComponent(tokens[1]));
+    }
+
+    private static RenderBackgroundPositionComponent ParsePositionComponent(string token)
+    {
+        return token.ToLowerInvariant() switch
+        {
+            "left" or "top" => RenderBackgroundPositionComponent.Zero,
+            "right" or "bottom" => new RenderBackgroundPositionComponent(1f, 0f),
+            "center" => new RenderBackgroundPositionComponent(0.5f, 0f),
+            _ => ParsePositionLength(token),
+        };
+    }
+
+    private static RenderBackgroundPositionComponent ParsePositionLength(string token)
+    {
+        var trimmed = token.Trim();
+
+        if (trimmed.EndsWith("%", StringComparison.Ordinal) &&
+            float.TryParse(trimmed[..^1], NumberStyles.Float, CultureInfo.InvariantCulture, out var percent))
         {
-            return false;
+            return new RenderBackgroundPositionComponent(percent / 100f, 0f);
         }
 
-        var commaIndex = source.IndexOf(',');
-        if (commaIndex <= 5)
+        if (TryParsePixelValue(trimmed, out var pixels))
         {
-            return false;
+            return new RenderBackgroundPositionComponent(0f, pixels);
         }
 
-        var header = source[5..commaIndex];
-        var isBase64 = header.EndsWith(";base64", StringComparison.OrdinalIgnoreCase);
-        var mediaType = isBase64 ? header[..^7] : header;
-        var payload = source[(commaIndex + 1)..];
+        return RenderBackgroundPositionComponent.Zero;
+    }
 
-        if (string.IsNullOrEmpty(mediaType))
-        {
-            mimeType = "image/unknown";
-        }
-        else if (mediaType.StartsWith(";", StringComparison.Ordinal))
-        {
-            mimeType = "image/unknown";
-        }
-        else
+    /// <summary>
+    /// Parses the CSS `transform` property plus `transform-origin` into a single, fully-resolved
+    /// <see cref="RenderTransform2D"/> - delegating each individual transform function's own
+    /// parsing and matrix computation entirely to AngleSharp.Css's own
+    /// <see cref="TransformParser"/>/<see cref="ICssTransformFunctionValue.ComputeMatrix"/>,
+    /// rather than re-implementing CSS transform function parsing, length/percentage/angle
+    /// resolution, or the underlying trigonometry in this renderer. This method's own
+    /// responsibility is limited to: looping <see cref="TransformParser.ParseTransform"/> across
+    /// the space-separated function list (it parses one function per call and advances the source
+    /// itself - including skipping the whitespace between calls, confirmed empirically rather than
+    /// assumed - returning <see langword="null"/> cleanly once the source is exhausted, which is
+    /// what ends the loop), multiplying the resulting per-function matrices together in CSS's own
+    /// left-to-right composition order (see <see cref="RenderTransform2D.Multiply"/>), converting
+    /// AngleSharp.Css's own <see cref="TransformMatrix"/> into this renderer's flat 2D `a,b,c,d,e,f`
+    /// representation (see <see cref="ConvertToRenderTransform"/> for the exact field mapping,
+    /// which is not the naive one), and wrapping the composed result around `transform-origin` -
+    /// AngleSharp.Css's own `ComputeMatrix` takes no origin parameter, so that translate/apply/
+    /// translate-back is this renderer's to do regardless of how the individual functions resolve.
+    ///
+    /// Resolved eagerly here (unlike a gradient's or background-image's own paint-time-deferred
+    /// geometry) because a transform's inputs - percentage `translate()` values, the default
+    /// `transform-origin` - only ever need the element's own already-known border-box dimensions,
+    /// never anything (like an image's natural size) that is not available until paint time.
+    ///
+    /// This renderer never special-cases individual transform functions or guards against
+    /// AngleSharp.Css bugs locally - `ConvertToRenderTransform` always trusts whatever
+    /// <see cref="ICssTransformFunctionValue.ComputeMatrix"/> returns, unconditionally. A
+    /// `TransformMatrix` is a genuinely general matrix regardless of which function produced it;
+    /// for a function whose own effect is entirely 2D, the third dimension simply stays at its own
+    /// identity value, so there is nothing to specialize for a "2D case" - the same six components
+    /// (M11/M12/M21/M22/Tx/Ty) are read the same way for every function. Any bug in what
+    /// AngleSharp.Css itself computes for a given function is AngleSharp.Css's own bug to fix -
+    /// this renderer reports and reproduces it there (with a failing test in that project's own
+    /// suite) rather than working around it here, matching this project's own "we do not touch the
+    /// CSS ourselves" policy. `translate`/`translateX`/`translateY` need one exception to "just call
+    /// AngleSharp.Css normally", though: the raw value is parsed directly here rather than through
+    /// AngleSharp.Css's own computed-style cascade, because that cascade path has a separate,
+    /// confirmed crash for exactly those three functions - see `TryExtractTransformDeclaration`'s
+    /// own remarks for why that cascade path has to be avoided entirely, independent of this method.
+    ///
+    /// `TransformParser` is AngleSharp.Css's own general-purpose transform-function parser and
+    /// recognizes 3D functions (`translate3d`, `rotate3d`, `matrix3d`, `perspective`, ...) too -
+    /// this method does not filter them out before parsing. For one of them, `translateZ`,
+    /// `ComputeMatrix`'s 2D component (M11/M12/M21/M22/Tx/Ty) happens to come back as pure identity
+    /// (only its Z-only shift is non-zero, which this renderer never reads), so it is harmlessly a
+    /// no-op through the exact same path real 2D functions use - confirmed with a structural test,
+    /// not assumed. A 3D function whose effect genuinely depends on a Z axis this renderer has no
+    /// projection for at all (`rotate3d`, `perspective`, ...) would not be meaningfully
+    /// representable even with a bug-free `ComputeMatrix`; this renderer's flat, backend-agnostic
+    /// display list simply has no camera/projection concept to give such a function real meaning -
+    /// a deliberate, permanent scope cut, unrelated to any upstream bug.
+    /// </summary>
+    private static RenderTransform2D ParseCssTransform(Dictionary<string, string> styleMap, float borderBoxX, float borderBoxY, float borderBoxWidth, float borderBoxHeight, float fontSize)
+    {
+        if (!styleMap.TryGetValue("transform", out var value) ||
+            string.IsNullOrWhiteSpace(value) ||
+            string.Equals(value.Trim(), "none", StringComparison.OrdinalIgnoreCase))
         {
-            mimeType = mediaType;
+            return RenderTransform2D.Identity;
         }
 
-        try
+        var dimensions = new CssTransformRenderDimensions(borderBoxWidth, borderBoxHeight, fontSize);
+        var source = new StringSource(value);
+        var functionsMatrix = RenderTransform2D.Identity;
+
+        while (TransformParser.ParseTransform(source) is { } functionValue)
         {
-            bytes = isBase64
-                ? Convert.FromBase64String(payload)
-                : Encoding.UTF8.GetBytes(Uri.UnescapeDataString(payload));
+            var next = ConvertToRenderTransform(functionValue, dimensions);
+            functionsMatrix = RenderTransform2D.Multiply(functionsMatrix, next);
         }
-        catch
+
+        if (functionsMatrix.IsIdentity)
         {
-            bytes = null;
-            return false;
+            return RenderTransform2D.Identity;
         }
 
-        return bytes.Length > 0;
+        // transform-origin shifts the whole composed function chain to pivot around a point other
+        // than the box's own top-left corner (the origin every individual function's matrix
+        // otherwise implicitly pivots/scales/skews around): translate to the origin, apply the
+        // functions, translate back. The origin itself is resolved relative to the box (a fraction/
+        // offset of its own width/height), but PushTransformCommand's matrix is concatenated onto
+        // the canvas *before* any of this element's own commands run - which still carry their
+        // ordinary absolute page coordinates (borderBoxX/Y, not box-local 0..width/0..height) - so
+        // the pivot point has to be expressed in that same absolute space (borderBoxX/Y + the
+        // relative origin), not just the relative offset within the box. Getting this wrong was a
+        // real bug caught while building this feature: verified by hand-checking the resulting
+        // matrix against a box positioned away from the page origin, where a box-relative-only
+        // pivot rotated the box around the wrong point entirely (only appearing correct for a box
+        // that happened to sit at page position (0, 0), where relative and absolute coincide).
+        var (originOffsetX, originOffsetY) = ParseTransformOrigin(styleMap, borderBoxWidth, borderBoxHeight);
+        var originX = borderBoxX + originOffsetX;
+        var originY = borderBoxY + originOffsetY;
+        var toOrigin = RenderTransform2D.Translate(originX, originY);
+        var fromOrigin = RenderTransform2D.Translate(-originX, -originY);
+        return RenderTransform2D.Multiply(toOrigin, RenderTransform2D.Multiply(functionsMatrix, fromOrigin));
     }
 
-    private static void PaintBackground(DisplayList displayList, RenderPaint paint, float x, float y, float width, float height)
+    /// <summary>
+    /// Converts one already-parsed CSS transform function's own <see cref="TransformMatrix"/> into
+    /// this renderer's flat 2D <see cref="RenderTransform2D"/>, unconditionally - this renderer
+    /// always trusts the matrix AngleSharp.Css computes directly, with no NaN/exception guarding
+    /// and no 2D-vs-3D special-casing of its own. A <see cref="TransformMatrix"/> is a genuinely
+    /// general matrix regardless of which CSS function produced it; for a function whose own effect
+    /// is entirely 2D, the third dimension simply stays at its own identity value, so reading off
+    /// the same six 2D-relevant components (M11/M12/M21/M22/Tx/Ty) works uniformly for every
+    /// function - there is nothing here for this renderer to specialize. Any bug in what
+    /// AngleSharp.Css itself computes belongs to AngleSharp.Css, not to a defensive workaround in
+    /// this method - report and fix it there (with a reproducing test in its own suite) instead.
+    /// </summary>
+    private static RenderTransform2D ConvertToRenderTransform(ICssTransformFunctionValue functionValue, IRenderDimensions dimensions)
     {
-        if (width <= 0f || height <= 0f)
-        {
-            return;
-        }
+        var matrix = functionValue.ComputeMatrix(dimensions);
+
+        // AngleSharp.Css's TransformMatrix uses a row-vector convention -
+        // x' = M11*x + M12*y + Tx, y' = M21*x + M22*y + Ty - which is *not* the naive mapping onto
+        // CSS's own column-vector matrix(a,b,c,d,e,f) (x' = a*x + c*y + e, y' = b*x + d*y + f) a
+        // reader might expect. Verified empirically (not assumed) against a known skew(10deg,5deg)
+        // result: M12 came back as tan(10deg) - the coefficient of y in the x' equation, i.e. CSS's
+        // "c" - and M21 came back as tan(5deg) - the coefficient of x in the y' equation, i.e. CSS's
+        // "b" - the opposite of what matching M12 to "b" and M21 to "c" by position would give.
+        return new RenderTransform2D(
+            (float)matrix.M11,
+            (float)matrix.M21,
+            (float)matrix.M12,
+            (float)matrix.M22,
+            (float)matrix.Tx,
+            (float)matrix.Ty);
+    }
 
-        if (paint is RenderColorPaint colorPaint)
+    private readonly struct CssTransformRenderDimensions(double renderWidth, double renderHeight, double fontSize) : IRenderDimensions
+    {
+        public double RenderWidth { get; } = renderWidth;
+
+        public double RenderHeight { get; } = renderHeight;
+
+        public double FontSize { get; } = fontSize;
+    }
+
+    /// <summary>
+    /// Parses `transform-origin` into pixel coordinates relative to the element's own border box -
+    /// the CSS initial value, "50% 50%", is the box's own center. Reuses `ParsePositionComponent`'s
+    /// keyword/percentage/length tokenizing (the identical single-axis grammar `background-position`
+    /// already uses: `left`/`center`/`right`/`top`/`bottom`, a percentage, or a length) rather than
+    /// re-deriving it, but resolves its `Percentage`/`OffsetPixels` breakdown with
+    /// `transform-origin`'s own formula (a position *within* the box) instead of
+    /// `background-position`'s (a position within the *remaining* space after subtracting the
+    /// image's own size) - the two properties share a grammar but not a resolution formula.
+    /// </summary>
+    private static (float X, float Y) ParseTransformOrigin(Dictionary<string, string> styleMap, float borderBoxWidth, float borderBoxHeight)
+    {
+        var xComponent = new RenderBackgroundPositionComponent(0.5f, 0f);
+        var yComponent = new RenderBackgroundPositionComponent(0.5f, 0f);
+
+        if (styleMap.TryGetValue("transform-origin", out var value) && !string.IsNullOrWhiteSpace(value))
         {
-            if (colorPaint.Color.A == 0)
+            var tokens = value.Trim().Split(' ', StringSplitOptions.RemoveEmptyEntries);
+
+            if (tokens.Length == 1)
             {
-                return;
-            }
+                var only = tokens[0].ToLowerInvariant();
 
-            displayList.FillRect(new RenderRect(x, y, width, height), colorPaint.Color);
-            return;
+                if (only is "top" or "bottom")
+                {
+                    yComponent = ParsePositionComponent(only);
+                }
+                else
+                {
+                    xComponent = ParsePositionComponent(only);
+                }
+            }
+            else if (tokens.Length >= 2)
+            {
+                xComponent = ParsePositionComponent(tokens[0]);
+                yComponent = ParsePositionComponent(tokens[1]);
+            }
         }
 
-        if (paint is RenderGradientPaint)
-        {
-            displayList.FillRect(new RenderRect(x, y, width, height), paint);
-        }
+        var x = (xComponent.Percentage * borderBoxWidth) + xComponent.OffsetPixels;
+        var y = (yComponent.Percentage * borderBoxHeight) + yComponent.OffsetPixels;
+        return (x, y);
     }
 
-    private static void PaintBorder(DisplayList displayList, RenderColor color, float x, float y, float width, float height, EdgeSizes border)
+    /// <summary>
+    /// Parses CSS `opacity` via AngleSharp.Css's own typed `GetOpacity()` accessor - unlike
+    /// `filter`, this is an ordinary numeric property with no function-value syntax, so
+    /// AngleSharp.Css computes it normally with nothing for this renderer to work around. The CSS
+    /// initial value is `1` (fully opaque); a value outside `0..1` is clamped, per spec.
+    /// </summary>
+    private static float ParseCssOpacity(Dictionary<string, string> styleMap)
     {
-        if (color.A == 0 || width <= 0f || height <= 0f)
+        if (!styleMap.TryGetValue("opacity", out var value) || string.IsNullOrWhiteSpace(value))
         {
-            return;
+            return 1f;
         }
 
-        if (border.Top > 0f)
+        return float.TryParse(value.Trim(), NumberStyles.Float, CultureInfo.InvariantCulture, out var opacity)
+            ? Math.Clamp(opacity, 0f, 1f)
+            : 1f;
+    }
+
+    /// <summary>
+    /// Parses `filter` via AngleSharp.Css's own `FilterParser.ParseFilter`/`ICssFilterFunctionValue`
+    /// (fixed upstream - AngleSharp.Css previously had no structured `filter` support at all, so
+    /// this renderer had to hand-parse the raw text itself, mirroring the CSS-gradient precedent;
+    /// it now mirrors the `transform` precedent instead) - AngleSharp.Css handles the outer
+    /// function-list syntax (name/parenthesis extraction, including nested parens) and gives each
+    /// function's own name plus its raw, still-unparsed argument text as a single
+    /// <c>Arguments</c> entry; this renderer still interprets what
+    /// each function *means* (its own argument grammar, and the CSS Filter Effects spec's per-function
+    /// color-matrix/blur-radius semantics - see <see cref="ConvertToRenderFilterFunction"/>), since
+    /// that is a rendering concern AngleSharp.Css does not (and should not) resolve for it, the same
+    /// division of labor `transform`'s `ConvertToRenderTransform` already established for
+    /// `ComputeMatrix`. `url(#filterId)` (an SVG filter reference) and any other unrecognized
+    /// function are silently skipped rather than aborting the whole chain, mirroring how an
+    /// unsupported SVG `&lt;filter&gt;` primitive passes its input through unchanged in
+    /// `SvgFilterBuilder` instead of breaking that chain.
+    /// </summary>
+    private static IReadOnlyList<RenderFilterFunction> ParseCssFilter(Dictionary<string, string> styleMap)
+    {
+        if (!styleMap.TryGetValue("filter", out var value) ||
+            string.IsNullOrWhiteSpace(value) ||
+            string.Equals(value.Trim(), "none", StringComparison.OrdinalIgnoreCase))
         {
-            displayList.FillRect(new RenderRect(x, y, width, border.Top), color);
+            return [];
         }
 
-        if (border.Right > 0f)
+        if (FilterParser.ParseFilter(new StringSource(value)) is not CssFilterValue parsed)
         {
-            displayList.FillRect(new RenderRect(x + width - border.Right, y, border.Right, height), color);
+            return [];
         }
 
-        if (border.Bottom > 0f)
+        var functions = new List<RenderFilterFunction>();
+
+        foreach (var cssFunction in parsed.Functions)
         {
-            displayList.FillRect(new RenderRect(x, y + height - border.Bottom, width, border.Bottom), color);
+            if (ConvertToRenderFilterFunction(cssFunction, out var function))
+            {
+                functions.Add(function);
+            }
         }
 
-        if (border.Left > 0f)
+        return functions;
+    }
+
+    private static bool ConvertToRenderFilterFunction(ICssFilterFunctionValue cssFunction, out RenderFilterFunction function)
+    {
+        function = null!;
+        var argsText = cssFunction.Arguments.Length > 0 ? cssFunction.Arguments[0].CssText.Trim() : string.Empty;
+
+        switch (cssFunction.Name.ToLowerInvariant())
         {
-            displayList.FillRect(new RenderRect(x, y, border.Left, height), color);
+            case "blur":
+                function = RenderFilterFunction.Blur(Math.Max(0f, ParseLengthValue(argsText, defaultValue: 0f, allowAuto: false)));
+                return true;
+            case "brightness":
+                function = RenderFilterFunction.Brightness(Math.Max(0f, ParseFilterAmount(argsText, 1f)));
+                return true;
+            case "contrast":
+                function = RenderFilterFunction.Contrast(Math.Max(0f, ParseFilterAmount(argsText, 1f)));
+                return true;
+            case "grayscale":
+                function = RenderFilterFunction.Grayscale(Math.Clamp(ParseFilterAmount(argsText, 1f), 0f, 1f));
+                return true;
+            case "invert":
+                function = RenderFilterFunction.Invert(Math.Clamp(ParseFilterAmount(argsText, 1f), 0f, 1f));
+                return true;
+            case "opacity":
+                function = RenderFilterFunction.Opacity(Math.Clamp(ParseFilterAmount(argsText, 1f), 0f, 1f));
+                return true;
+            case "saturate":
+                function = RenderFilterFunction.Saturate(Math.Max(0f, ParseFilterAmount(argsText, 1f)));
+                return true;
+            case "sepia":
+                function = RenderFilterFunction.Sepia(Math.Clamp(ParseFilterAmount(argsText, 1f), 0f, 1f));
+                return true;
+            case "hue-rotate":
+                function = RenderFilterFunction.HueRotate(ParseAngle(argsText));
+                return true;
+            case "drop-shadow":
+                function = ParseDropShadowFilterFunction(argsText);
+                return true;
+            default:
+                return false;
         }
     }
 
-    private static float CollapseMargins(float previousMarginBottom, float currentMarginTop)
+    // `grayscale(90%)` and `grayscale(0.9)` are equivalent per spec - a percentage argument is
+    // normalized to the same 0..1 fraction a bare number already is, so every downstream consumer
+    // (RenderFilterFunction.Amount) only ever has to handle one representation.
+    private static float ParseFilterAmount(string value, float defaultValue)
     {
-        var positivePart = Math.Max(0f, previousMarginBottom) + Math.Max(0f, currentMarginTop);
-        var negativePart = Math.Min(0f, previousMarginBottom) + Math.Min(0f, currentMarginTop);
+        var trimmed = value.Trim();
 
-        if (positivePart > 0f && negativePart < 0f)
+        if (trimmed.Length == 0)
         {
-            return positivePart + negativePart;
+            return defaultValue;
         }
 
-        if (positivePart > 0f)
+        if (trimmed.EndsWith('%') &&
+            float.TryParse(trimmed[..^1].Trim(), NumberStyles.Float, CultureInfo.InvariantCulture, out var percentage))
         {
-            return Math.Max(previousMarginBottom, currentMarginTop);
+            return percentage / 100f;
         }
 
-        return Math.Min(previousMarginBottom, currentMarginTop);
+        return float.TryParse(trimmed, NumberStyles.Float, CultureInfo.InvariantCulture, out var number) ? number : defaultValue;
     }
 
-    private static void ResolveHorizontalMetrics(
-        float containingWidth,
-        float specifiedContentWidth,
-        float borderLeft,
-        float borderRight,
-        float paddingLeft,
-        float paddingRight,
-        ref float marginLeft,
-        ref float marginRight,
-        out float contentWidth)
+    // `drop-shadow(<offset-x> <offset-y> <blur-radius>? <color>?)` - CSS allows the color argument
+    // either first or last, so this classifies each whitespace-separated token by its own shape
+    // (a leading digit/sign/decimal point is a length, anything else is a color) rather than
+    // assuming a fixed position, then assigns lengths to offsetX/offsetY/blurRadius in the order
+    // they were seen.
+    private static RenderFilterFunction ParseDropShadowFilterFunction(string argsText)
     {
-        var hasAutoWidth = float.IsNaN(specifiedContentWidth);
-        var hasAutoLeft = float.IsNaN(marginLeft);
-        var hasAutoRight = float.IsNaN(marginRight);
-
-        var usedMarginLeft = hasAutoLeft ? 0f : marginLeft;
-        var usedMarginRight = hasAutoRight ? 0f : marginRight;
-        var horizontalExtras = borderLeft + borderRight + paddingLeft + paddingRight;
+        var offsetX = 0f;
+        var offsetY = 0f;
+        var blurRadius = 0f;
+        var color = RenderColor.Black;
+        var lengthIndex = 0;
 
-        if (hasAutoWidth)
+        foreach (var token in SplitTopLevelWhitespaceList(argsText))
         {
-            contentWidth = containingWidth - horizontalExtras - usedMarginLeft - usedMarginRight;
+            var trimmed = token.Trim();
 
-            if (contentWidth < 0f)
+            if (trimmed.Length == 0)
             {
-                contentWidth = 0f;
+                continue;
             }
 
-            marginLeft = usedMarginLeft;
-            marginRight = usedMarginRight;
-            return;
-        }
+            var firstChar = trimmed[0];
 
-        contentWidth = Math.Max(0f, specifiedContentWidth);
-        var underflow = containingWidth - horizontalExtras - contentWidth - usedMarginLeft - usedMarginRight;
-
-        if (hasAutoLeft && hasAutoRight)
-        {
-            var half = underflow / 2f;
-            marginLeft = half;
-            marginRight = half;
-            return;
-        }
+            if (char.IsDigit(firstChar) || firstChar is '-' or '+' or '.')
+            {
+                var length = ParseLengthValue(trimmed, 0f, allowAuto: false);
 
-        if (hasAutoLeft)
-        {
-            marginLeft = underflow;
-            marginRight = usedMarginRight;
-            return;
-        }
+                switch (lengthIndex)
+                {
+                    case 0:
+                        offsetX = length;
+                        break;
+                    case 1:
+                        offsetY = length;
+                        break;
+                    default:
+                        blurRadius = length;
+                        break;
+                }
 
-        if (hasAutoRight)
-        {
-            marginLeft = usedMarginLeft;
-            marginRight = underflow;
-            return;
+                lengthIndex++;
+            }
+            else
+            {
+                color = ParseColor(trimmed, color);
+            }
         }
 
-        marginLeft = usedMarginLeft;
-        marginRight = usedMarginRight + underflow;
+        return RenderFilterFunction.DropShadow(offsetX, offsetY, Math.Max(0f, blurRadius), color);
     }
 
-    private static float ParseLength(Dictionary<string, string> styleMap, string propertyName, float relativeTo, float defaultValue, bool allowAuto)
+    // Splits a value on whitespace at paren-depth 0 only, so a nested function call within one of
+    // the tokens (e.g. a `rgb(255, 0, 0)` color argument) is never split apart. Used to tokenize
+    // `drop-shadow`'s own space-separated argument list - the outer `filter` function list itself
+    // is now split by AngleSharp.Css's own FilterParser instead (see ParseCssFilter's remarks).
+    private static string[] SplitTopLevelWhitespaceList(string value)
     {
-        if (!styleMap.TryGetValue(propertyName, out var value) || string.IsNullOrWhiteSpace(value))
+        if (string.IsNullOrWhiteSpace(value))
         {
-            return defaultValue;
+            return [];
         }
 
-        var parsed = value.Trim().ToLowerInvariant();
+        var parts = new List<string>();
+        var current = new StringBuilder();
+        var depth = 0;
 
-        if (allowAuto && parsed == "auto")
+        foreach (var character in value)
         {
-            return float.NaN;
+            if (character == '(')
+            {
+                depth++;
+                current.Append(character);
+            }
+            else if (character == ')')
+            {
+                depth = Math.Max(0, depth - 1);
+                current.Append(character);
+            }
+            else if (char.IsWhiteSpace(character) && depth == 0)
+            {
+                if (current.Length > 0)
+                {
+                    parts.Add(current.ToString());
+                    current.Clear();
+                }
+            }
+            else
+            {
+                current.Append(character);
+            }
         }
 
-        if (parsed.EndsWith("%", StringComparison.Ordinal) &&
-            float.TryParse(parsed[..^1], NumberStyles.Float, CultureInfo.InvariantCulture, out var pct))
+        if (current.Length > 0)
         {
-            return (pct / 100f) * relativeTo;
+            parts.Add(current.ToString());
         }
 
-        return ParseLengthValue(parsed, defaultValue, allowAuto: false);
+        return [.. parts];
     }
 
-    private static float ParseLengthValue(string value, float defaultValue, bool allowAuto = true)
+    /// <summary>
+    /// Parses `background-size`. The CSS initial value is `auto` (the image's own natural size).
+    /// </summary>
+    private static RenderBackgroundSize ParseBackgroundSize(Dictionary<string, string> styleMap)
     {
-        if (allowAuto && string.Equals(value.Trim(), "auto", StringComparison.OrdinalIgnoreCase))
+        if (!styleMap.TryGetValue("background-size", out var value) || string.IsNullOrWhiteSpace(value))
         {
-            return float.NaN;
+            return RenderBackgroundSize.Auto;
         }
 
-        if (TryParsePixelValue(value, out var pixels))
+        var trimmed = value.Trim();
+
+        if (string.Equals(trimmed, "cover", StringComparison.OrdinalIgnoreCase))
         {
-            return pixels;
+            return new RenderBackgroundSize(RenderBackgroundSizeKind.Cover);
         }
 
-        if (float.TryParse(value, NumberStyles.Float, CultureInfo.InvariantCulture, out var unitless))
+        if (string.Equals(trimmed, "contain", StringComparison.OrdinalIgnoreCase))
         {
-            return unitless;
+            return new RenderBackgroundSize(RenderBackgroundSizeKind.Contain);
         }
 
-        return defaultValue;
+        var tokens = trimmed.Split(' ', StringSplitOptions.RemoveEmptyEntries);
+
+        if (tokens.Length == 0)
+        {
+            return RenderBackgroundSize.Auto;
+        }
+
+        var width = ParseSizeAxisToken(tokens[0]);
+        // A single-value `background-size` sizes only the width explicitly; the height is always
+        // `auto` (proportional to the image's aspect ratio), never a copy of the width token.
+        var height = tokens.Length > 1 ? ParseSizeAxisToken(tokens[1]) : new RenderBackgroundSizeAxis(true, false, 0f);
+
+        return new RenderBackgroundSize(RenderBackgroundSizeKind.Explicit, width, height);
     }
 
-    private static bool TryParsePixelValue(string value, out float pixels)
+    private static RenderBackgroundSizeAxis ParseSizeAxisToken(string token)
     {
-        var trimmed = value.Trim().ToLowerInvariant();
+        var trimmed = token.Trim();
 
-        if (trimmed.EndsWith("px", StringComparison.Ordinal))
+        if (string.Equals(trimmed, "auto", StringComparison.OrdinalIgnoreCase))
         {
-            return float.TryParse(trimmed[..^2], NumberStyles.Float, CultureInfo.InvariantCulture, out pixels);
+            return new RenderBackgroundSizeAxis(true, false, 0f);
         }
 
-        pixels = 0f;
-        return false;
-    }
+        if (trimmed.EndsWith("%", StringComparison.Ordinal) &&
+            float.TryParse(trimmed[..^1], NumberStyles.Float, CultureInfo.InvariantCulture, out var percent))
+        {
+            return new RenderBackgroundSizeAxis(false, true, percent / 100f);
+        }
 
-    private static RenderPaint ParseBackgroundPaint(Dictionary<string, string> styleMap, RenderColor fallbackColor)
-    {
-        if (!styleMap.TryGetValue("background-image", out var backgroundImage) || string.IsNullOrWhiteSpace(backgroundImage))
+        if (TryParsePixelValue(trimmed, out var pixels))
         {
-            return new RenderColorPaint(fallbackColor);
+            return new RenderBackgroundSizeAxis(false, false, pixels);
         }
 
-        return ParseGradientPaint(backgroundImage, fallbackColor);
+        return new RenderBackgroundSizeAxis(true, false, 0f);
     }
 
     private static RenderPaint ParseGradientPaint(string rawValue, RenderColor fallbackColor)
@@ -3552,7 +5951,7 @@ private static RenderPaint ParseGradientPaint(string rawValue, RenderColor fallb
     private static RenderGradient ParseLinearGradient(string rawValue, string functionName, bool repeating, RenderColor fallbackColor)
     {
         var inner = ExtractGradientInnerExpression(rawValue, functionName);
-        var parts = SplitGradientArguments(inner);
+        var parts = SplitTopLevelCommaList(inner);
         var startIndex = 0;
         var angleDegrees = 90f;
 
@@ -3574,7 +5973,7 @@ private static RenderGradient ParseLinearGradient(string rawValue, string functi
     private static RenderGradient ParseRadialGradient(string rawValue, string functionName, bool repeating, RenderColor fallbackColor)
     {
         var inner = ExtractGradientInnerExpression(rawValue, functionName);
-        var parts = SplitGradientArguments(inner);
+        var parts = SplitTopLevelCommaList(inner);
         var startIndex = 0;
 
         var isCircle = false;
@@ -3617,7 +6016,7 @@ private static RenderGradient ParseRadialGradient(string rawValue, string functi
     private static RenderGradient ParseConicGradient(string rawValue, string functionName, bool repeating, RenderColor fallbackColor)
     {
         var inner = ExtractGradientInnerExpression(rawValue, functionName);
-        var parts = SplitGradientArguments(inner);
+        var parts = SplitTopLevelCommaList(inner);
         var startIndex = 0;
         var angleDegrees = 0f;
         var centerX = 0.5f;
@@ -3810,7 +6209,7 @@ private static string ExtractGradientInnerExpression(string rawValue, string fun
         return rawValue[(opening + 1)..closing].Trim();
     }
 
-    private static string[] SplitGradientArguments(string value)
+    internal static string[] SplitTopLevelCommaList(string value)
     {
         if (string.IsNullOrWhiteSpace(value))
         {
@@ -3997,7 +6396,7 @@ private static float ParseAngle(string value)
         return TryParseAngle(value, out var angle) ? angle : 0f;
     }
 
-    private static RenderColor ParseColor(string? rawColor, RenderColor fallback)
+    internal static RenderColor ParseColor(string? rawColor, RenderColor fallback)
     {
         if (string.IsNullOrWhiteSpace(rawColor))
         {
@@ -4397,18 +6796,59 @@ private static float ResolveTextAlignmentOffset(TextAlign align, float available
         };
     }
 
-    private static string NormalizeWhitespace(string value)
+    /// <summary>
+    /// Collapses whitespace the way <c>white-space: normal</c> always did before this property was
+    /// read at all - every call site that is not itself part of text layout (table cell text, form
+    /// control labels, and the two "does this text node count as non-empty content" checks used for
+    /// child-ordering purposes) still goes through this, a deliberate scope cut: none of those sites
+    /// feed a wrapping-aware layout path today, so a real `white-space` value on them would have
+    /// nothing to change even if read.
+    /// </summary>
+    private static string NormalizeWhitespace(string value) => NormalizeWhitespace(value, WhiteSpaceMode.Normal);
+
+    /// <summary>
+    /// Collapses or preserves whitespace per the resolved <c>white-space</c> value, matching the CSS
+    /// spec's own collapsing/newline-preservation table: <c>normal</c>/<c>nowrap</c> collapse both
+    /// runs of horizontal whitespace and newlines into a single space and trim the ends; <c>pre</c>/
+    /// <c>pre-wrap</c>/<c>break-spaces</c> preserve every character verbatim (only normalizing
+    /// <c>\r\n</c>/<c>\r</c> line endings to a plain <c>\n</c>, the same source-text preprocessing
+    /// step HTML always applies regardless of `white-space`); <c>pre-line</c> collapses runs of
+    /// horizontal whitespace to a single space but preserves each `\n` as its own forced break.
+    /// </summary>
+    private static string NormalizeWhitespace(string value, WhiteSpaceMode whiteSpace)
     {
         if (value.Length == 0)
         {
             return string.Empty;
         }
 
+        var preserveNewlines = whiteSpace is WhiteSpaceMode.Pre or WhiteSpaceMode.PreWrap or WhiteSpaceMode.PreLine or WhiteSpaceMode.BreakSpaces;
+        var collapseHorizontalWhitespace = whiteSpace is WhiteSpaceMode.Normal or WhiteSpaceMode.Nowrap or WhiteSpaceMode.PreLine;
+
+        // Collapse \r\n/\r to a plain \n unconditionally, before any mode-specific handling - this
+        // is source-text preprocessing HTML always applies regardless of `white-space`, not part of
+        // the whitespace-collapsing semantics below. Doing it first (rather than per-character
+        // inside the loop) also avoids double-counting a \r\n pair as two separate forced breaks
+        // under pre-line's own char-by-char newline handling.
+        value = value.Replace("\r\n", "\n").Replace('\r', '\n');
+
+        if (!collapseHorizontalWhitespace)
+        {
+            return value;
+        }
+
         var sb = new StringBuilder(value.Length);
         var inWhitespace = false;
 
         foreach (var c in value)
         {
+            if (preserveNewlines && c == '\n')
+            {
+                sb.Append('\n');
+                inWhitespace = false;
+                continue;
+            }
+
             if (char.IsWhiteSpace(c))
             {
                 if (!inWhitespace)
@@ -4424,9 +6864,25 @@ private static string NormalizeWhitespace(string value)
             inWhitespace = false;
         }
 
-        return sb.ToString().Trim();
+        return preserveNewlines ? sb.ToString() : sb.ToString().Trim();
     }
 
+    /// <summary>
+    /// Like <see cref="NormalizeWhitespace(string, WhiteSpaceMode)"/>, but always collapses an
+    /// explicit forced break down to a plain space rather than preserving it - <see
+    /// cref="LayoutInlineTextRun"/>'s word-by-word model (mixed inline content sharing a line with
+    /// sibling elements) has no way to represent a forced mid-line break, so preserving one here
+    /// would hand it a literal <c>\n</c> character to measure/draw as if it were an ordinary glyph.
+    /// `nowrap`/`pre`'s wrap *suppression* still applies (read directly off <c>textStyle.WhiteSpace</c>
+    /// inside <see cref="LayoutInlineTextRun"/> itself) - only the newline-*preservation* half of
+    /// `pre`/`pre-wrap`/`pre-line` is out of scope for this specific layout path, not the whole
+    /// `white-space` feature; that half is fully supported for the far more common case of `pre`/
+    /// `pre-wrap`/`pre-line` on a block-level element's own direct text content (see
+    /// <see cref="LayoutWrappedText"/>/<see cref="WrapTextRespectingWhiteSpace"/>).
+    /// </summary>
+    private static string NormalizeWhitespaceForInlineRun(string value, WhiteSpaceMode whiteSpace) =>
+        NormalizeWhitespace(value, whiteSpace).Replace('\n', ' ');
+
     /// <summary>
     /// Where a cell's content sits within the box the cell occupies.
     /// </summary>
@@ -4475,7 +6931,9 @@ private readonly record struct RenderTextStyle(
         TextAlign TextAlign,
         float LetterSpacing,
         float TextIndent,
-        float VerticalAlignOffset);
+        float VerticalAlignOffset,
+        IReadOnlyList<global::AngleSharp.Renderer.Rendering.RenderTextShadow> TextShadows,
+        WhiteSpaceMode WhiteSpace);
 
     private enum TextAlign
     {
@@ -4484,6 +6942,21 @@ private enum TextAlign
         Right,
     }
 
+    /// <summary>
+    /// The CSS <c>white-space</c> keywords this renderer distinguishes. See
+    /// <see cref="NormalizeWhitespace(string, WhiteSpaceMode)"/> for collapsing/newline-preservation
+    /// and <see cref="LayoutWrappedText"/>/<see cref="LayoutInlineTextRun"/> for wrap suppression.
+    /// </summary>
+    private enum WhiteSpaceMode
+    {
+        Normal,
+        Nowrap,
+        Pre,
+        PreWrap,
+        PreLine,
+        BreakSpaces,
+    }
+
     private readonly record struct EdgeSizes(float Top, float Right, float Bottom, float Left);
 
     private enum BorderStyleKind
@@ -4500,5 +6973,7 @@ private readonly record struct BoxStyle(
         EdgeSizes Padding,
         EdgeSizes BorderWidth,
         RenderPaint BackgroundPaint,
-        RenderColor BorderColor);
+        RenderColor BorderColor,
+        RenderCornerRadii BorderRadius,
+        IReadOnlyList<RenderBoxShadow> BoxShadows);
 }
diff --git a/src/AngleSharp.Renderer/IDomHarness.cs b/src/AngleSharp.Renderer/IDomHarness.cs
index 7b6a415..cb649df 100644
--- a/src/AngleSharp.Renderer/IDomHarness.cs
+++ b/src/AngleSharp.Renderer/IDomHarness.cs
@@ -54,6 +54,38 @@ public interface IDomHarness
     /// </summary>
     void SetScrollTop(IElement element, double value, double maxTop);
 
+    /// <summary>
+    /// Advances the virtual clock CSS `transition`s and `animation`s are measured against. There is
+    /// no real-time timer anywhere in this renderer - a caller drives animation forward explicitly
+    /// by calling this before each <see cref="PaintToPng"/>, the same way it already drives mouse
+    /// position and scroll offsets.
+    /// </summary>
+    void AdvanceTime(TimeSpan delta);
+
+    /// <summary>
+    /// Gets the current position of the virtual clock <see cref="AdvanceTime"/> advances - the same
+    /// clock CSS `transition`/`animation` are measured against, and what a focused text input's
+    /// caret blink is measured against too.
+    /// </summary>
+    TimeSpan CurrentTime { get; }
+
+    /// <summary>
+    /// Gets the interpolated value currently in effect for <paramref name="property"/> on
+    /// <paramref name="element"/> if a CSS `transition` is actively running for it, or null if none
+    /// is active - in which case the property's ordinary computed value applies, unaffected.
+    /// </summary>
+    string? GetTransitioningValue(IElement element, string property);
+
+    /// <summary>
+    /// Gets the animated value currently in effect for <paramref name="property"/> on
+    /// <paramref name="element"/> if a CSS `animation` is actively running for it against the
+    /// current virtual clock time, or null if none is active - in which case the property's
+    /// ordinary computed value applies, unaffected. Unlike <see cref="GetTransitioningValue"/>, an
+    /// animation starts the first moment this is called for a given (element, animation-name) pair
+    /// rather than needing some other triggering state change.
+    /// </summary>
+    string? GetAnimatedValue(IElement element, string property);
+
     /// <summary>
     /// Renders the active document to PNG using the harness-bound render device.
     /// </summary>
diff --git a/src/AngleSharp.Renderer/InteractiveHtmlRendererState.cs b/src/AngleSharp.Renderer/InteractiveHtmlRendererState.cs
index ac846bd..ed1581e 100644
--- a/src/AngleSharp.Renderer/InteractiveHtmlRendererState.cs
+++ b/src/AngleSharp.Renderer/InteractiveHtmlRendererState.cs
@@ -13,6 +13,10 @@ internal sealed class InteractiveHtmlRendererState : IDomHarness
 {
     private readonly ConditionalWeakTable<IElement, ElementInteractionState> _elementStates = new();
     private readonly HtmlRenderer _renderer;
+    private readonly List<IElement> _forcedHoverChain = [];
+    private readonly CssTransitionTracker _transitionTracker = new();
+    private readonly CssAnimationTracker _animationTracker = new();
+    private double _clockMs;
     private IElement? _hoveredElement;
     private (double X, double Y) _mousePosition;
 
@@ -148,10 +152,64 @@ private bool UpdateHoveredElementFromMousePosition()
         }
 
         _hoveredElement = nextHovered;
+        UpdateForcedHoverChain(nextHovered);
         PaintInvalidated?.Invoke(this, EventArgs.Empty);
         return true;
     }
 
+    // AngleSharp.Css's `SetPseudoClass` forces `:hover` for exactly the element it is called on -
+    // it deliberately does not propagate to ancestors (see AngleSharp.Css's own
+    // PseudoClassForcingTests.ForcingIsExplicitAndDoesNotPropagateToAncestors), unlike how a real
+    // pointer device makes every ancestor of the physically-hovered element match `:hover` too
+    // (`.card:hover .title` relies on this). So this renderer has to walk the ancestor chain
+    // itself and force each element individually, then clear the previous chain when the hovered
+    // element changes - there is no document-wide "clear every forced :hover" API to lean on
+    // instead, so this class tracks exactly which elements it forced.
+    private void UpdateForcedHoverChain(IElement? nextHovered)
+    {
+        var previousChain = _forcedHoverChain.ToList();
+        var newChain = new List<IElement>();
+        var probe = nextHovered;
+
+        while (probe is not null)
+        {
+            newChain.Add(probe);
+            probe = probe.ParentElement;
+        }
+
+        var affectedElements = previousChain.Union(newChain).ToList();
+
+        // Snapshot each affected element's *current* (pre-change) natural value before the
+        // pseudo-class mutation below - once :hover is forced/removed, there is no way to ask
+        // AngleSharp.Css what the value used to be, so a freshly-starting transition (nothing
+        // already in flight for that element/property) would otherwise have no "from" value to
+        // animate away from and would jump straight to the new state instead.
+        _transitionTracker.CaptureNaturalValuesBeforeChange(affectedElements);
+
+        foreach (var element in _forcedHoverChain)
+        {
+            element.RemovePseudoClass("hover");
+        }
+
+        _forcedHoverChain.Clear();
+
+        var current = nextHovered;
+
+        while (current is not null)
+        {
+            current.SetPseudoClass("hover");
+            _forcedHoverChain.Add(current);
+            current = current.ParentElement;
+        }
+
+        // Every element that either lost or gained :hover may now have a different natural
+        // computed style than a moment ago - re-evaluate them all for CSS `transition`s that
+        // should start animating toward that new style (the union, since an element leaving
+        // :hover needs its own "fade back to resting" transition considered too, not just the
+        // newly-hovered chain's "fade in").
+        _transitionTracker.NotifyElementsMayHaveChanged(affectedElements);
+    }
+
     private static IElement? FindTopMostElementAt(IReadOnlyDictionary<IElement, HtmlRenderer.ElementLayoutMetrics> metrics, double x, double y)
     {
         return metrics
@@ -186,6 +244,31 @@ private static int GetDepth(IElement element)
         return depth;
     }
 
+    public void AdvanceTime(TimeSpan delta)
+    {
+        _clockMs += delta.TotalMilliseconds;
+        _transitionTracker.AdvanceTime(delta);
+        PaintInvalidated?.Invoke(this, EventArgs.Empty);
+    }
+
+    public TimeSpan CurrentTime => TimeSpan.FromMilliseconds(_clockMs);
+
+    public string? GetTransitioningValue(IElement element, string property)
+    {
+        ArgumentNullException.ThrowIfNull(element);
+        ArgumentNullException.ThrowIfNull(property);
+
+        return _transitionTracker.GetTransitioningValue(element, property);
+    }
+
+    public string? GetAnimatedValue(IElement element, string property)
+    {
+        ArgumentNullException.ThrowIfNull(element);
+        ArgumentNullException.ThrowIfNull(property);
+
+        return _animationTracker.GetAnimatedValue(element, property, _clockMs);
+    }
+
     public RenderedImage PaintToPng()
     {
         var targetDocument = Context.Active;
diff --git a/src/AngleSharp.Renderer/InteractiveHtmlRendererStateExtensions.cs b/src/AngleSharp.Renderer/InteractiveHtmlRendererStateExtensions.cs
index 89e2b8c..0211b82 100644
--- a/src/AngleSharp.Renderer/InteractiveHtmlRendererStateExtensions.cs
+++ b/src/AngleSharp.Renderer/InteractiveHtmlRendererStateExtensions.cs
@@ -31,4 +31,19 @@ public static IDomHarness GetDomHarness(this IBrowsingContext context)
             return new InteractiveHtmlRendererState(browsingContext, renderDevice);
         });
     }
+
+    /// <summary>
+    /// Gets the interactive DOM harness for the browsing context if one has already been created
+    /// (via a prior <see cref="GetDomHarness"/> call), without creating one and without throwing
+    /// when no <see cref="IRenderDevice"/> service is registered. Used by rendering code paths
+    /// that want to honor interaction state (e.g. scroll position) when present, but must remain
+    /// a no-op for the overwhelmingly common case of a document that was never wired up for
+    /// interactive use.
+    /// </summary>
+    public static bool TryGetDomHarness(this IBrowsingContext context, out IDomHarness? harness)
+    {
+        ArgumentNullException.ThrowIfNull(context);
+
+        return s_harnesses.TryGetValue(context, out harness);
+    }
 }
diff --git a/src/AngleSharp.Renderer/Rendering/DisplayList.cs b/src/AngleSharp.Renderer/Rendering/DisplayList.cs
index d81d059..b057229 100644
--- a/src/AngleSharp.Renderer/Rendering/DisplayList.cs
+++ b/src/AngleSharp.Renderer/Rendering/DisplayList.cs
@@ -29,6 +29,76 @@ public void Add(RenderCommand command)
         _commands.Add(command);
     }
 
+    /// <summary>
+    /// Splices commands into the list at a specific index, shifting everything from that index
+    /// onward later. Used to place a box's own background/border/shadow/outline commands before
+    /// its children's commands once the box's size is known - an auto-sized box cannot paint its
+    /// own background until its children have been laid out to measure it, but CSS requires that
+    /// background to paint *behind* those children, not on top of them.
+    /// </summary>
+    /// <param name="index">The position to insert at; 0 is the very start of the list.</param>
+    /// <param name="commands">The commands to insert, in order.</param>
+    public void InsertRange(int index, IEnumerable<RenderCommand> commands)
+    {
+        ArgumentNullException.ThrowIfNull(commands);
+        _commands.InsertRange(index, commands);
+    }
+
+    /// <summary>
+    /// Begins clipping every command up to the matching <see cref="PopClip"/> to a rectangle
+    /// (`overflow: hidden`/`scroll`/`auto`). Pairs must nest like a stack, matching how a backend
+    /// implements this as a save/clip/restore scope.
+    /// </summary>
+    public void PushClip(RenderRect rect, RenderCornerRadii radii) => Add(new PushClipCommand(rect, radii));
+
+    /// <summary>
+    /// Ends the clip scope started by the matching <see cref="PushClip"/>.
+    /// </summary>
+    public void PopClip() => Add(new PopClipCommand());
+
+    /// <summary>
+    /// Begins applying a CSS `transform` to every command up to the matching <see cref="PopTransform"/>
+    /// - background, border, outline, and children all paint under it, since `transform` affects
+    /// the whole element it is set on, not just its content (unlike `overflow` clipping, which
+    /// explicitly excludes the border/outline it is layered under). Pairs must nest like a stack,
+    /// matching how a backend implements this as a save/concat/restore scope.
+    /// </summary>
+    public void PushTransform(RenderTransform2D transform) => Add(new PushTransformCommand(transform));
+
+    /// <summary>
+    /// Ends the transform scope started by the matching <see cref="PushTransform"/>.
+    /// </summary>
+    public void PopTransform() => Add(new PopTransformCommand());
+
+    /// <summary>
+    /// Begins applying a CSS `filter` to every command up to the matching <see cref="PopFilter"/> -
+    /// background, border, outline, and children all render under it, since `filter` affects the
+    /// whole element it is set on, mirroring how <see cref="PushTransform"/> already wraps it.
+    /// Pairs must nest like a stack, matching how a backend implements this as a save-layer/restore
+    /// scope.
+    /// </summary>
+    public void PushFilter(IReadOnlyList<RenderFilterFunction> functions) => Add(new PushFilterCommand(functions));
+
+    /// <summary>
+    /// Begins compositing every command up to the matching <see cref="PopOpacity"/> as one
+    /// semi-transparent group (CSS `opacity`) - background, border, outline, and children all
+    /// blend together at <paramref name="alpha"/> as a unit, rather than each individually becoming
+    /// partly transparent (which would let overlapping children show through each other at the
+    /// seams). Pairs must nest like a stack, matching how a backend implements this as a
+    /// save-layer/restore scope.
+    /// </summary>
+    public void PushOpacity(float alpha) => Add(new PushOpacityCommand(alpha));
+
+    /// <summary>
+    /// Ends the opacity scope started by the matching <see cref="PushOpacity"/>.
+    /// </summary>
+    public void PopOpacity() => Add(new PopOpacityCommand());
+
+    /// <summary>
+    /// Ends the filter scope started by the matching <see cref="PushFilter"/>.
+    /// </summary>
+    public void PopFilter() => Add(new PopFilterCommand());
+
     /// <summary>
     /// Adds a filled rectangle command.
     /// </summary>
@@ -43,6 +113,35 @@ public void FillRect(RenderRect rect, RenderPaint paint)
         Add(new FillRectCommand(rect, paint));
     }
 
+    /// <summary>
+    /// Adds a filled rectangle command with per-corner rounding (`border-radius`).
+    /// </summary>
+    public void FillRect(RenderRect rect, RenderColor color, RenderCornerRadii radii) =>
+        Add(new FillRectCommand(rect, new RenderColorPaint(color), radii));
+
+    /// <summary>
+    /// Adds a filled rectangle command with per-corner rounding using a custom paint.
+    /// </summary>
+    public void FillRect(RenderRect rect, RenderPaint paint, RenderCornerRadii radii)
+    {
+        ArgumentNullException.ThrowIfNull(paint);
+        Add(new FillRectCommand(rect, paint, radii));
+    }
+
+    /// <summary>
+    /// Adds a stroked rounded rectangle command - used to paint a `border-radius` box's border
+    /// when all four edges share the same width, so the border can be drawn as a single ring
+    /// rather than four separate straight edges.
+    /// </summary>
+    public void StrokeRoundedRect(RenderRect rect, RenderColor color, float strokeWidth, RenderCornerRadii radii) =>
+        Add(new StrokeRoundedRectCommand(rect, color, strokeWidth, radii));
+
+    /// <summary>
+    /// Adds a `box-shadow` layer, painted relative to an element's border box.
+    /// </summary>
+    public void DrawBoxShadow(RenderRect borderBoxRect, RenderCornerRadii borderBoxRadii, RenderBoxShadow shadow) =>
+        Add(new DrawBoxShadowCommand(borderBoxRect, borderBoxRadii, shadow));
+
     /// <summary>
     /// Adds an image draw command.
     /// </summary>
@@ -75,6 +174,27 @@ public void DrawText(
 
         Add(new DrawTextCommand(text, x, y, color, fontSize, fontFamily, fontWeight, isItalic, underline, strikeThrough, decorationColor ?? color, decorationStyle, letterSpacing));
     }
+
+    /// <summary>
+    /// Adds a `text-shadow` layer, painted as a blurred copy of a text run behind it.
+    /// </summary>
+    public void DrawTextShadow(
+        string text,
+        float x,
+        float y,
+        RenderColor color,
+        float fontSize,
+        string fontFamily,
+        float fontWeight,
+        bool isItalic,
+        float blurRadius,
+        float letterSpacing)
+    {
+        ArgumentException.ThrowIfNullOrWhiteSpace(text);
+        ArgumentException.ThrowIfNullOrWhiteSpace(fontFamily);
+
+        Add(new DrawTextShadowCommand(text, x, y, color, fontSize, fontFamily, fontWeight, isItalic, blurRadius, letterSpacing));
+    }
 }
 
 /// <summary>
@@ -83,9 +203,9 @@ public void DrawText(
 public abstract record RenderCommand;
 
 /// <summary>
-/// Draws a filled rectangle.
+/// Draws a filled rectangle, optionally with rounded corners (`border-radius`).
 /// </summary>
-public sealed record FillRectCommand(RenderRect Rect, RenderPaint Paint) : RenderCommand
+public sealed record FillRectCommand(RenderRect Rect, RenderPaint Paint, RenderCornerRadii Radii = default) : RenderCommand
 {
     /// <summary>
     /// Gets the solid color for this command when it uses a simple color paint.
@@ -93,6 +213,62 @@ public sealed record FillRectCommand(RenderRect Rect, RenderPaint Paint) : Rende
     public RenderColor Color => Paint is RenderColorPaint colorPaint ? colorPaint.Color : RenderColor.Transparent;
 }
 
+/// <summary>
+/// Strokes a rounded rectangle's outline - used for a `border-radius` box's border when every
+/// edge shares the same width.
+/// </summary>
+public sealed record StrokeRoundedRectCommand(RenderRect Rect, RenderColor Color, float StrokeWidth, RenderCornerRadii Radii) : RenderCommand;
+
+/// <summary>
+/// Paints one `box-shadow` layer relative to an element's border box.
+/// </summary>
+public sealed record DrawBoxShadowCommand(RenderRect BorderBoxRect, RenderCornerRadii BorderBoxRadii, RenderBoxShadow Shadow) : RenderCommand;
+
+/// <summary>
+/// Begins clipping every following command, up to the matching <see cref="PopClipCommand"/>, to
+/// <see cref="Rect"/> (`overflow: hidden`/`scroll`/`auto`).
+/// </summary>
+public sealed record PushClipCommand(RenderRect Rect, RenderCornerRadii Radii) : RenderCommand;
+
+/// <summary>
+/// Ends the clip scope started by the matching <see cref="PushClipCommand"/>.
+/// </summary>
+public sealed record PopClipCommand : RenderCommand;
+
+/// <summary>
+/// Begins applying a CSS `transform` to every following command, up to the matching
+/// <see cref="PopTransformCommand"/>.
+/// </summary>
+public sealed record PushTransformCommand(RenderTransform2D Transform) : RenderCommand;
+
+/// <summary>
+/// Ends the transform scope started by the matching <see cref="PushTransformCommand"/>.
+/// </summary>
+public sealed record PopTransformCommand : RenderCommand;
+
+/// <summary>
+/// Begins applying a CSS `filter` to every following command, up to the matching
+/// <see cref="PopFilterCommand"/> - background, border, outline, and children all render under it,
+/// mirroring how <see cref="PushTransformCommand"/> wraps the whole element it is set on.
+/// </summary>
+public sealed record PushFilterCommand(IReadOnlyList<RenderFilterFunction> Functions) : RenderCommand;
+
+/// <summary>
+/// Ends the filter scope started by the matching <see cref="PushFilterCommand"/>.
+/// </summary>
+public sealed record PopFilterCommand : RenderCommand;
+
+/// <summary>
+/// Begins compositing every following command, up to the matching <see cref="PopOpacityCommand"/>,
+/// as one semi-transparent group at <see cref="Alpha"/> (CSS `opacity`).
+/// </summary>
+public sealed record PushOpacityCommand(float Alpha) : RenderCommand;
+
+/// <summary>
+/// Ends the opacity scope started by the matching <see cref="PushOpacityCommand"/>.
+/// </summary>
+public sealed record PopOpacityCommand : RenderCommand;
+
 /// <summary>
 /// Draws a single line of text at a baseline position.
 /// </summary>
@@ -117,6 +293,29 @@ public sealed record DrawTextCommand(
     public bool IsBold => FontWeight >= 600f;
 }
 
+/// <summary>
+/// Paints a blurred copy of a text run behind the actual text (`text-shadow`). Carries only the
+/// fields needed to shape and rasterize glyphs identically to <see cref="DrawTextCommand"/> - a
+/// shadow has no underline/strike-through/decoration of its own.
+/// </summary>
+public sealed record DrawTextShadowCommand(
+    string Text,
+    float X,
+    float Y,
+    RenderColor Color,
+    float FontSize,
+    string FontFamily,
+    float FontWeight,
+    bool IsItalic,
+    float BlurRadius,
+    float LetterSpacing) : RenderCommand
+{
+    /// <summary>
+    /// Indicates whether the command should be rendered with a bold typeface.
+    /// </summary>
+    public bool IsBold => FontWeight >= 600f;
+}
+
 /// <summary>
 /// Describes the decoration stroke style for text.
 /// </summary>
diff --git a/src/AngleSharp.Renderer/Rendering/RenderCornerRadii.cs b/src/AngleSharp.Renderer/Rendering/RenderCornerRadii.cs
new file mode 100644
index 0000000..3d0aab6
--- /dev/null
+++ b/src/AngleSharp.Renderer/Rendering/RenderCornerRadii.cs
@@ -0,0 +1,67 @@
+namespace AngleSharp.Renderer.Rendering;
+
+/// <summary>
+/// Describes the four independent corner radii of a rounded box (`border-radius`), each as a
+/// separate horizontal/vertical pair so elliptical corners (`border-radius: 8px / 4px`) are
+/// representable, not just circular ones.
+/// </summary>
+public readonly record struct RenderCornerRadii(
+    float TopLeftX,
+    float TopLeftY,
+    float TopRightX,
+    float TopRightY,
+    float BottomRightX,
+    float BottomRightY,
+    float BottomLeftX,
+    float BottomLeftY)
+{
+    /// <summary>
+    /// No rounding on any corner - the common case, and the default for elements without
+    /// `border-radius`.
+    /// </summary>
+    public static RenderCornerRadii Zero { get; } = new(0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f);
+
+    /// <summary>
+    /// Whether every corner is unrounded, so callers can take the cheaper plain-rectangle path.
+    /// </summary>
+    public bool IsZero =>
+        TopLeftX <= 0f && TopLeftY <= 0f &&
+        TopRightX <= 0f && TopRightY <= 0f &&
+        BottomRightX <= 0f && BottomRightY <= 0f &&
+        BottomLeftX <= 0f && BottomLeftY <= 0f;
+
+    /// <summary>
+    /// Scales every radius down (uniformly) just enough that adjacent corners along the same edge
+    /// never overlap, per the CSS corner-overlap-prevention algorithm
+    /// (https://www.w3.org/TR/css-backgrounds-3/#corner-overlap). A radius pair whose sum already
+    /// fits within the edge it shares is left untouched.
+    /// </summary>
+    public RenderCornerRadii ClampToBox(float width, float height)
+    {
+        if (width <= 0f || height <= 0f)
+        {
+            return Zero;
+        }
+
+        var scale = 1f;
+
+        scale = Math.Min(scale, SafeRatio(width, TopLeftX + TopRightX));
+        scale = Math.Min(scale, SafeRatio(height, TopRightY + BottomRightY));
+        scale = Math.Min(scale, SafeRatio(width, BottomRightX + BottomLeftX));
+        scale = Math.Min(scale, SafeRatio(height, BottomLeftY + TopLeftY));
+
+        if (scale >= 1f)
+        {
+            return this;
+        }
+
+        return new RenderCornerRadii(
+            TopLeftX * scale, TopLeftY * scale,
+            TopRightX * scale, TopRightY * scale,
+            BottomRightX * scale, BottomRightY * scale,
+            BottomLeftX * scale, BottomLeftY * scale);
+    }
+
+    private static float SafeRatio(float available, float requested) =>
+        requested > 0f ? available / requested : float.MaxValue;
+}
diff --git a/src/AngleSharp.Renderer/Rendering/RenderFilter.cs b/src/AngleSharp.Renderer/Rendering/RenderFilter.cs
new file mode 100644
index 0000000..0b351c3
--- /dev/null
+++ b/src/AngleSharp.Renderer/Rendering/RenderFilter.cs
@@ -0,0 +1,122 @@
+namespace AngleSharp.Renderer.Rendering;
+
+/// <summary>
+/// Identifies which CSS Filter Effects function a <see cref="RenderFilterFunction"/> represents.
+/// </summary>
+public enum RenderFilterFunctionKind
+{
+    /// <summary>
+    /// `blur(&lt;length&gt;)` - a Gaussian blur.
+    /// </summary>
+    Blur,
+
+    /// <summary>
+    /// `brightness(&lt;number-or-percentage&gt;)` - linearly multiplies every color channel.
+    /// </summary>
+    Brightness,
+
+    /// <summary>
+    /// `contrast(&lt;number-or-percentage&gt;)` - linearly scales color channels around 50% gray.
+    /// </summary>
+    Contrast,
+
+    /// <summary>
+    /// `grayscale(&lt;number-or-percentage&gt;)` - desaturates toward a luminance-preserving gray.
+    /// </summary>
+    Grayscale,
+
+    /// <summary>
+    /// `hue-rotate(&lt;angle&gt;)` - rotates every color's hue around the color wheel.
+    /// </summary>
+    HueRotate,
+
+    /// <summary>
+    /// `invert(&lt;number-or-percentage&gt;)` - inverts color channels.
+    /// </summary>
+    Invert,
+
+    /// <summary>
+    /// `opacity(&lt;number-or-percentage&gt;)` - scales the alpha channel.
+    /// </summary>
+    Opacity,
+
+    /// <summary>
+    /// `saturate(&lt;number-or-percentage&gt;)` - scales color saturation.
+    /// </summary>
+    Saturate,
+
+    /// <summary>
+    /// `sepia(&lt;number-or-percentage&gt;)` - shifts toward a sepia tone.
+    /// </summary>
+    Sepia,
+
+    /// <summary>
+    /// `drop-shadow(&lt;offset-x&gt; &lt;offset-y&gt; &lt;blur-radius&gt;? &lt;color&gt;?)` - a blurred,
+    /// offset silhouette painted behind the element's own (already-filtered) alpha.
+    /// </summary>
+    DropShadow,
+}
+
+/// <summary>
+/// A single function from a CSS `filter` value (e.g. one of `grayscale(0.9) blur(2px)`'s two
+/// entries), backend-agnostic like every other <c>Rendering/*</c> value type. <see cref="Amount"/>
+/// is interpreted per <see cref="Kind"/>: a blur radius in pixels for
+/// <see cref="RenderFilterFunctionKind.Blur"/> (and, for <see cref="RenderFilterFunctionKind.DropShadow"/>,
+/// its own blur radius), degrees for <see cref="RenderFilterFunctionKind.HueRotate"/>, and an
+/// already-normalized `0..1`-or-higher multiplier for every other function - a percentage argument
+/// like `grayscale(90%)` is converted to `0.9` at parse time, not carried as a percentage.
+/// <see cref="OffsetX"/>/<see cref="OffsetY"/>/<see cref="Color"/> are only meaningful for
+/// <see cref="RenderFilterFunctionKind.DropShadow"/>.
+/// </summary>
+/// <param name="Kind">Which filter function this is.</param>
+/// <param name="Amount">The function's primary numeric argument; see the type summary for units per <paramref name="Kind"/>.</param>
+/// <param name="OffsetX">`drop-shadow`'s horizontal offset in pixels; unused by every other kind.</param>
+/// <param name="OffsetY">`drop-shadow`'s vertical offset in pixels; unused by every other kind.</param>
+/// <param name="Color">`drop-shadow`'s shadow color; unused by every other kind.</param>
+public sealed record RenderFilterFunction(
+    RenderFilterFunctionKind Kind,
+    float Amount,
+    float OffsetX,
+    float OffsetY,
+    RenderColor Color)
+{
+    /// <summary>Creates a `blur(&lt;length&gt;)` function.</summary>
+    public static RenderFilterFunction Blur(float radiusPixels) =>
+        new(RenderFilterFunctionKind.Blur, radiusPixels, 0f, 0f, RenderColor.Black);
+
+    /// <summary>Creates a `brightness(&lt;number-or-percentage&gt;)` function.</summary>
+    public static RenderFilterFunction Brightness(float amount) =>
+        new(RenderFilterFunctionKind.Brightness, amount, 0f, 0f, RenderColor.Black);
+
+    /// <summary>Creates a `contrast(&lt;number-or-percentage&gt;)` function.</summary>
+    public static RenderFilterFunction Contrast(float amount) =>
+        new(RenderFilterFunctionKind.Contrast, amount, 0f, 0f, RenderColor.Black);
+
+    /// <summary>Creates a `grayscale(&lt;number-or-percentage&gt;)` function.</summary>
+    public static RenderFilterFunction Grayscale(float amount) =>
+        new(RenderFilterFunctionKind.Grayscale, amount, 0f, 0f, RenderColor.Black);
+
+    /// <summary>Creates a `hue-rotate(&lt;angle&gt;)` function.</summary>
+    public static RenderFilterFunction HueRotate(float angleDegrees) =>
+        new(RenderFilterFunctionKind.HueRotate, angleDegrees, 0f, 0f, RenderColor.Black);
+
+    /// <summary>Creates an `invert(&lt;number-or-percentage&gt;)` function.</summary>
+    public static RenderFilterFunction Invert(float amount) =>
+        new(RenderFilterFunctionKind.Invert, amount, 0f, 0f, RenderColor.Black);
+
+    /// <summary>Creates an `opacity(&lt;number-or-percentage&gt;)` function.</summary>
+    public static RenderFilterFunction Opacity(float amount) =>
+        new(RenderFilterFunctionKind.Opacity, amount, 0f, 0f, RenderColor.Black);
+
+    /// <summary>Creates a `saturate(&lt;number-or-percentage&gt;)` function.</summary>
+    public static RenderFilterFunction Saturate(float amount) =>
+        new(RenderFilterFunctionKind.Saturate, amount, 0f, 0f, RenderColor.Black);
+
+    /// <summary>Creates a `sepia(&lt;number-or-percentage&gt;)` function.</summary>
+    public static RenderFilterFunction Sepia(float amount) =>
+        new(RenderFilterFunctionKind.Sepia, amount, 0f, 0f, RenderColor.Black);
+
+    /// <summary>Creates a `drop-shadow(&lt;offset-x&gt; &lt;offset-y&gt; &lt;blur-radius&gt;? &lt;color&gt;?)` function.</summary>
+    public static RenderFilterFunction DropShadow(float offsetX, float offsetY, float blurRadiusPixels, RenderColor color) =>
+        new(RenderFilterFunctionKind.DropShadow, blurRadiusPixels, offsetX, offsetY, color);
+}
diff --git a/src/AngleSharp.Renderer/Rendering/RenderPaint.cs b/src/AngleSharp.Renderer/Rendering/RenderPaint.cs
index 5989cd6..863fd29 100644
--- a/src/AngleSharp.Renderer/Rendering/RenderPaint.cs
+++ b/src/AngleSharp.Renderer/Rendering/RenderPaint.cs
@@ -15,6 +15,93 @@ public sealed record RenderColorPaint(RenderColor Color) : RenderPaint;
 /// </summary>
 public sealed record RenderGradientPaint(RenderGradient Gradient) : RenderPaint;
 
+/// <summary>
+/// Represents a `background-image: url(...)` paint. The image itself is already fully loaded and
+/// decoded by the time this is constructed (see <c>HtmlRenderer.TryLoadBackgroundImageResource</c>)
+/// - what remains unresolved here is exactly what stays unresolved for <see cref="RenderGradientPaint"/>:
+/// geometry that depends on the final painted box, which is not known until the box's own layout is
+/// complete (in particular, an auto-sized box's own height). <see cref="PositionX"/>/<see cref="PositionY"/>
+/// and <see cref="Size"/> are therefore resolved against the box's rect only at paint time, in the
+/// backend, mirroring how a gradient's <c>CenterX</c>/<c>CenterY</c> fractions and absolute-length
+/// stop positions are resolved against the gradient's own rendered geometry rather than at parse time.
+/// </summary>
+/// <param name="Image">The decoded, natural-size image payload.</param>
+/// <param name="RepeatX">Whether the image tiles along the horizontal axis (`background-repeat`).</param>
+/// <param name="RepeatY">Whether the image tiles along the vertical axis (`background-repeat`).</param>
+/// <param name="PositionX">The horizontal `background-position` component.</param>
+/// <param name="PositionY">The vertical `background-position` component.</param>
+/// <param name="Size">The `background-size` specification.</param>
+public sealed record RenderImagePaint(
+    RenderedImage Image,
+    bool RepeatX,
+    bool RepeatY,
+    RenderBackgroundPositionComponent PositionX,
+    RenderBackgroundPositionComponent PositionY,
+    RenderBackgroundSize Size) : RenderPaint;
+
+/// <summary>
+/// One axis of a `background-position` value, resolved as
+/// <c>Percentage * (boxDimension - imageDimension) + OffsetPixels</c> - the CSS formula for a
+/// percentage combined with a length along the same axis. A pure keyword/percentage carries
+/// <see cref="OffsetPixels"/> = 0; a pure length carries <see cref="Percentage"/> = 0.
+/// </summary>
+public readonly record struct RenderBackgroundPositionComponent(float Percentage, float OffsetPixels)
+{
+    /// <summary>
+    /// The CSS initial value for a `background-position` component (`0%`).
+    /// </summary>
+    public static readonly RenderBackgroundPositionComponent Zero = new(0f, 0f);
+}
+
+/// <summary>
+/// Describes a `background-size` value.
+/// </summary>
+/// <param name="Kind">Which sizing algorithm applies.</param>
+/// <param name="Width">The explicit width axis, when <paramref name="Kind"/> is <see cref="RenderBackgroundSizeKind.Explicit"/>.</param>
+/// <param name="Height">The explicit height axis, when <paramref name="Kind"/> is <see cref="RenderBackgroundSizeKind.Explicit"/>.</param>
+public sealed record RenderBackgroundSize(RenderBackgroundSizeKind Kind, RenderBackgroundSizeAxis Width = default, RenderBackgroundSizeAxis Height = default)
+{
+    /// <summary>
+    /// The CSS initial value (`auto auto`) - the image paints at its own natural size.
+    /// </summary>
+    public static readonly RenderBackgroundSize Auto = new(RenderBackgroundSizeKind.Auto);
+}
+
+/// <summary>
+/// One axis of an explicit `background-size` value.
+/// </summary>
+/// <param name="IsAuto">Whether this axis is `auto` (sized proportionally from the other axis).</param>
+/// <param name="IsPercentage">Whether <see cref="Value"/> is a 0-1 fraction of the box rather than pixels.</param>
+/// <param name="Value">The axis value: pixels, or a 0-1 fraction of the box when <see cref="IsPercentage"/>.</param>
+public readonly record struct RenderBackgroundSizeAxis(bool IsAuto, bool IsPercentage, float Value);
+
+/// <summary>
+/// Describes how a `background-size` value sizes the image, matching the CSS keyword/explicit-value
+/// forms.
+/// </summary>
+public enum RenderBackgroundSizeKind
+{
+    /// <summary>
+    /// The image paints at its own natural (intrinsic) size. The CSS default.
+    /// </summary>
+    Auto,
+
+    /// <summary>
+    /// The image is scaled up, preserving aspect ratio, until it covers the box entirely.
+    /// </summary>
+    Cover,
+
+    /// <summary>
+    /// The image is scaled, preserving aspect ratio, until it fits entirely within the box.
+    /// </summary>
+    Contain,
+
+    /// <summary>
+    /// The image is sized from explicit <see cref="RenderBackgroundSize.Width"/>/<see cref="RenderBackgroundSize.Height"/> axes.
+    /// </summary>
+    Explicit,
+}
+
 /// <summary>
 /// Describes a gradient definition.
 /// </summary>
diff --git a/src/AngleSharp.Renderer/Rendering/RenderShadow.cs b/src/AngleSharp.Renderer/Rendering/RenderShadow.cs
new file mode 100644
index 0000000..03be1bb
--- /dev/null
+++ b/src/AngleSharp.Renderer/Rendering/RenderShadow.cs
@@ -0,0 +1,35 @@
+namespace AngleSharp.Renderer.Rendering;
+
+/// <summary>
+/// Describes a single `box-shadow` layer.
+/// </summary>
+/// <param name="OffsetX">Horizontal offset in pixels; positive moves the shadow right.</param>
+/// <param name="OffsetY">Vertical offset in pixels; positive moves the shadow down.</param>
+/// <param name="BlurRadius">The Gaussian blur radius in pixels (`0` for a hard-edged shadow).</param>
+/// <param name="SpreadRadius">
+/// How far the shadow shape grows (positive) or shrinks (negative) from the border box before
+/// blurring, in pixels.
+/// </param>
+/// <param name="Color">The shadow's color.</param>
+/// <param name="Inset">Whether the shadow is painted inside the border box (`inset`) rather than outside it.</param>
+public sealed record RenderBoxShadow(
+    float OffsetX,
+    float OffsetY,
+    float BlurRadius,
+    float SpreadRadius,
+    RenderColor Color,
+    bool Inset);
+
+/// <summary>
+/// Describes a single `text-shadow` layer. Unlike <see cref="RenderBoxShadow"/>, `text-shadow`
+/// has no spread and no `inset` variant.
+/// </summary>
+/// <param name="OffsetX">Horizontal offset in pixels; positive moves the shadow right.</param>
+/// <param name="OffsetY">Vertical offset in pixels; positive moves the shadow down.</param>
+/// <param name="BlurRadius">The Gaussian blur radius in pixels (`0` for a hard-edged shadow).</param>
+/// <param name="Color">The shadow's color.</param>
+public sealed record RenderTextShadow(
+    float OffsetX,
+    float OffsetY,
+    float BlurRadius,
+    RenderColor Color);
diff --git a/src/AngleSharp.Renderer/Rendering/RenderTransform2D.cs b/src/AngleSharp.Renderer/Rendering/RenderTransform2D.cs
new file mode 100644
index 0000000..5ba8bef
--- /dev/null
+++ b/src/AngleSharp.Renderer/Rendering/RenderTransform2D.cs
@@ -0,0 +1,52 @@
+namespace AngleSharp.Renderer.Rendering;
+
+/// <summary>
+/// A resolved 2D affine transform, in the exact same <c>a, b, c, d, e, f</c> order CSS's own
+/// <c>matrix(a, b, c, d, e, f)</c> function uses: a point <c>(x, y)</c> maps to
+/// <c>(a*x + c*y + e, b*x + d*y + f)</c>. Backend-agnostic, like every other resolved render value
+/// in this namespace - <c>SkiaRenderBackend</c> converts it to an <c>SKMatrix</c> only at paint
+/// time. Always fully resolved by the time it reaches <see cref="DisplayList"/> (unlike a
+/// gradient's or background-image's center/size, which stay unresolved fractions until paint time
+/// because they depend on the image's own natural size): a `transform`'s own geometry - the
+/// element's border-box width/height for percentage `translate()` values and for the default
+/// `transform-origin` - is already fully known by the time `LayoutElement` builds this value, so
+/// there is nothing left to defer.
+///
+/// Deliberately does not know how to build itself from an individual CSS transform function
+/// (`rotate()`, `scale()`, `skew()`, ...) - that parsing and matrix math belongs to AngleSharp.Css
+/// (`AngleSharp.Css.Parser.TransformParser`/`ICssTransformFunctionValue.ComputeMatrix`), not to
+/// this renderer; `HtmlRenderer.ParseCssTransform`/`TryConvertToRenderTransform` convert
+/// AngleSharp.Css's own already-computed `TransformMatrix` into this type, rather than this type
+/// re-deriving the same trigonometry AngleSharp.Css already provides. Only <see cref="Translate"/>
+/// and <see cref="Multiply"/> remain here, because both are needed regardless of where a matrix's
+/// own values came from: applying `transform-origin` (translate to the pivot, apply, translate
+/// back) and composing multiple already-resolved function matrices together are generic affine-
+/// matrix operations, not CSS-transform-specific parsing or semantics.
+/// </summary>
+public readonly record struct RenderTransform2D(float A, float B, float C, float D, float E, float F)
+{
+    /// <summary>The identity transform - painting under it looks exactly as if it were not applied.</summary>
+    public static readonly RenderTransform2D Identity = new(1f, 0f, 0f, 1f, 0f, 0f);
+
+    /// <summary>Whether this is the identity transform, i.e. a no-op that can safely be skipped.</summary>
+    public bool IsIdentity => this == Identity;
+
+    /// <summary>A translation by <paramref name="x"/>/<paramref name="y"/> pixels.</summary>
+    public static RenderTransform2D Translate(float x, float y) => new(1f, 0f, 0f, 1f, x, y);
+
+    /// <summary>
+    /// Composes two transforms the way CSS's own multi-function `transform` list does: applying
+    /// <paramref name="inner"/> to a point first, then <paramref name="outer"/> to the result -
+    /// i.e. the standard matrix product <c>outer * inner</c> in column-vector convention. Building
+    /// up a function list left to right as <c>M = Multiply(M, next)</c> for each successive
+    /// function exactly matches the CSS Transforms spec's own "post-multiply by each function's
+    /// matrix, in the order listed" composition rule.
+    /// </summary>
+    public static RenderTransform2D Multiply(RenderTransform2D outer, RenderTransform2D inner) => new(
+        A: (outer.A * inner.A) + (outer.C * inner.B),
+        B: (outer.B * inner.A) + (outer.D * inner.B),
+        C: (outer.A * inner.C) + (outer.C * inner.D),
+        D: (outer.B * inner.C) + (outer.D * inner.D),
+        E: (outer.A * inner.E) + (outer.C * inner.F) + outer.E,
+        F: (outer.B * inner.E) + (outer.D * inner.F) + outer.F);
+}
diff --git a/src/AngleSharp.Renderer/Skia/SkiaRenderBackend.cs b/src/AngleSharp.Renderer/Skia/SkiaRenderBackend.cs
index 1ec32d4..f13a5a0 100644
--- a/src/AngleSharp.Renderer/Skia/SkiaRenderBackend.cs
+++ b/src/AngleSharp.Renderer/Skia/SkiaRenderBackend.cs
@@ -55,15 +55,326 @@ private static void DrawCommand(SKCanvas canvas, RenderCommand command, FontFace
             case FillRectCommand fill:
                 DrawFillRect(canvas, fill);
                 break;
+            case StrokeRoundedRectCommand strokeRoundedRect:
+                DrawStrokeRoundedRect(canvas, strokeRoundedRect);
+                break;
+            case DrawBoxShadowCommand boxShadow:
+                DrawBoxShadow(canvas, boxShadow);
+                break;
             case DrawImageCommand image:
                 DrawImage(canvas, image);
                 break;
             case DrawTextCommand text:
                 DrawText(canvas, text, fonts);
                 break;
+            case DrawTextShadowCommand textShadow:
+                DrawTextShadow(canvas, textShadow, fonts);
+                break;
+            case PushClipCommand pushClip:
+                PushClip(canvas, pushClip);
+                break;
+            case PopClipCommand:
+                canvas.Restore();
+                break;
+            case PushTransformCommand pushTransform:
+                PushTransform(canvas, pushTransform);
+                break;
+            case PopTransformCommand:
+                canvas.Restore();
+                break;
+            case PushFilterCommand pushFilter:
+                PushFilter(canvas, pushFilter);
+                break;
+            case PopFilterCommand:
+                canvas.Restore();
+                break;
+            case PushOpacityCommand pushOpacity:
+                PushOpacity(canvas, pushOpacity);
+                break;
+            case PopOpacityCommand:
+                canvas.Restore();
+                break;
+        }
+    }
+
+    private static void PushTransform(SKCanvas canvas, PushTransformCommand command)
+    {
+        canvas.Save();
+
+        var t = command.Transform;
+        // SKMatrix's constructor takes (scaleX, skewX, transX, skewY, scaleY, transY, ...) - the
+        // same field reordering already used everywhere else in this file that builds an SKMatrix
+        // from an a/b/c/d/e/f-style source, not the a/b/c/d/e/f order CSS's own matrix() function
+        // (and RenderTransform2D, matching it) uses.
+        var matrix = new SKMatrix(t.A, t.C, t.E, t.B, t.D, t.F, 0f, 0f, 1f);
+        canvas.Concat(ref matrix);
+    }
+
+    private static void PushOpacity(SKCanvas canvas, PushOpacityCommand command)
+    {
+        var alpha = (byte)Math.Round(Math.Clamp(command.Alpha, 0f, 1f) * 255f);
+        using var paint = new SKPaint { Color = new SKColor(255, 255, 255, alpha) };
+        canvas.SaveLayer(paint);
+    }
+
+    private static void PushFilter(SKCanvas canvas, PushFilterCommand command)
+    {
+        using var paint = new SKPaint { ImageFilter = BuildFilterChain(command.Functions) };
+        canvas.SaveLayer(paint);
+    }
+
+    private static SKImageFilter? BuildFilterChain(IReadOnlyList<RenderFilterFunction> functions)
+    {
+        SKImageFilter? chain = null;
+
+        foreach (var function in functions)
+        {
+            chain = function.Kind switch
+            {
+                RenderFilterFunctionKind.Blur =>
+                    SKImageFilter.CreateBlur(Math.Max(0f, function.Amount) / 2f, Math.Max(0f, function.Amount) / 2f, chain),
+                RenderFilterFunctionKind.DropShadow =>
+                    SKImageFilter.CreateDropShadow(function.OffsetX, function.OffsetY, Math.Max(0f, function.Amount) / 2f, Math.Max(0f, function.Amount) / 2f, ToSkColor(function.Color), chain),
+                _ => SKImageFilter.CreateColorFilter(SKColorFilter.CreateColorMatrix(BuildFilterColorMatrix(function)), chain),
+            };
+        }
+
+        return chain;
+    }
+
+    // The CSS Filter Effects spec's per-function color matrices, each a 4x5 row-major matrix
+    // operating on un-premultiplied 0..1 color components (SKColorFilter.CreateColorMatrix's own
+    // convention, already relied on by SvgFilterBuilder's independent feColorMatrix support - these
+    // two implementations deliberately do not share code, mirroring how SVG gradients do not share
+    // code with the CSS gradient path).
+    private static float[] BuildFilterColorMatrix(RenderFilterFunction function) => function.Kind switch
+    {
+        RenderFilterFunctionKind.Grayscale => Lerp(IdentityColorMatrix, GrayscaleColorMatrix, Math.Clamp(function.Amount, 0f, 1f)),
+        RenderFilterFunctionKind.Sepia => Lerp(IdentityColorMatrix, SepiaColorMatrix, Math.Clamp(function.Amount, 0f, 1f)),
+        RenderFilterFunctionKind.Saturate => CreateSaturateColorMatrix(Math.Max(0f, function.Amount)),
+        RenderFilterFunctionKind.HueRotate => CreateHueRotateColorMatrix(function.Amount),
+        RenderFilterFunctionKind.Invert => CreateInvertColorMatrix(Math.Clamp(function.Amount, 0f, 1f)),
+        RenderFilterFunctionKind.Brightness => CreateBrightnessColorMatrix(Math.Max(0f, function.Amount)),
+        RenderFilterFunctionKind.Contrast => CreateContrastColorMatrix(Math.Max(0f, function.Amount)),
+        RenderFilterFunctionKind.Opacity => CreateOpacityColorMatrix(Math.Clamp(function.Amount, 0f, 1f)),
+        _ => IdentityColorMatrix,
+    };
+
+    private static float[] Lerp(float[] from, float[] to, float t)
+    {
+        var result = new float[20];
+
+        for (var i = 0; i < 20; i++)
+        {
+            result[i] = from[i] + ((to[i] - from[i]) * t);
+        }
+
+        return result;
+    }
+
+    private static float[] CreateSaturateColorMatrix(float s) =>
+    [
+        0.213f + (0.787f * s), 0.715f - (0.715f * s), 0.072f - (0.072f * s), 0f, 0f,
+        0.213f - (0.213f * s), 0.715f + (0.285f * s), 0.072f - (0.072f * s), 0f, 0f,
+        0.213f - (0.213f * s), 0.715f - (0.715f * s), 0.072f + (0.928f * s), 0f, 0f,
+        0f, 0f, 0f, 1f, 0f,
+    ];
+
+    private static float[] CreateHueRotateColorMatrix(float angleDegrees)
+    {
+        var radians = angleDegrees * (float)Math.PI / 180f;
+        var cos = (float)Math.Cos(radians);
+        var sin = (float)Math.Sin(radians);
+
+        return
+        [
+            0.213f + (cos * 0.787f) - (sin * 0.213f), 0.715f - (cos * 0.715f) - (sin * 0.715f), 0.072f - (cos * 0.072f) + (sin * 0.928f), 0f, 0f,
+            0.213f - (cos * 0.213f) + (sin * 0.143f), 0.715f + (cos * 0.285f) + (sin * 0.140f), 0.072f - (cos * 0.072f) - (sin * 0.283f), 0f, 0f,
+            0.213f - (cos * 0.213f) - (sin * 0.787f), 0.715f - (cos * 0.715f) + (sin * 0.715f), 0.072f + (cos * 0.928f) + (sin * 0.072f), 0f, 0f,
+            0f, 0f, 0f, 1f, 0f,
+        ];
+    }
+
+    private static float[] CreateInvertColorMatrix(float amount)
+    {
+        var scale = 1f - (2f * amount);
+
+        return
+        [
+            scale, 0f, 0f, 0f, amount,
+            0f, scale, 0f, 0f, amount,
+            0f, 0f, scale, 0f, amount,
+            0f, 0f, 0f, 1f, 0f,
+        ];
+    }
+
+    private static float[] CreateBrightnessColorMatrix(float amount) =>
+    [
+        amount, 0f, 0f, 0f, 0f,
+        0f, amount, 0f, 0f, 0f,
+        0f, 0f, amount, 0f, 0f,
+        0f, 0f, 0f, 1f, 0f,
+    ];
+
+    private static float[] CreateContrastColorMatrix(float amount)
+    {
+        var offset = 0.5f * (1f - amount);
+
+        return
+        [
+            amount, 0f, 0f, 0f, offset,
+            0f, amount, 0f, 0f, offset,
+            0f, 0f, amount, 0f, offset,
+            0f, 0f, 0f, 1f, 0f,
+        ];
+    }
+
+    private static float[] CreateOpacityColorMatrix(float amount) =>
+    [
+        1f, 0f, 0f, 0f, 0f,
+        0f, 1f, 0f, 0f, 0f,
+        0f, 0f, 1f, 0f, 0f,
+        0f, 0f, 0f, amount, 0f,
+    ];
+
+    private static readonly float[] IdentityColorMatrix =
+    [
+        1f, 0f, 0f, 0f, 0f,
+        0f, 1f, 0f, 0f, 0f,
+        0f, 0f, 1f, 0f, 0f,
+        0f, 0f, 0f, 1f, 0f,
+    ];
+
+    private static readonly float[] GrayscaleColorMatrix =
+    [
+        0.2126f, 0.7152f, 0.0722f, 0f, 0f,
+        0.2126f, 0.7152f, 0.0722f, 0f, 0f,
+        0.2126f, 0.7152f, 0.0722f, 0f, 0f,
+        0f, 0f, 0f, 1f, 0f,
+    ];
+
+    private static readonly float[] SepiaColorMatrix =
+    [
+        0.393f, 0.769f, 0.189f, 0f, 0f,
+        0.349f, 0.686f, 0.168f, 0f, 0f,
+        0.272f, 0.534f, 0.131f, 0f, 0f,
+        0f, 0f, 0f, 1f, 0f,
+    ];
+
+    private static void PushClip(SKCanvas canvas, PushClipCommand command)
+    {
+        canvas.Save();
+
+        var rect = new SKRect(
+            command.Rect.X,
+            command.Rect.Y,
+            command.Rect.X + command.Rect.Width,
+            command.Rect.Y + command.Rect.Height);
+
+        if (command.Radii.IsZero)
+        {
+            canvas.ClipRect(rect, SKClipOperation.Intersect, antialias: true);
+        }
+        else
+        {
+            using var roundRect = new SKRoundRect();
+            roundRect.SetRectRadii(rect, ToSkPoints(command.Radii));
+            canvas.ClipRoundRect(roundRect, SKClipOperation.Intersect, antialias: true);
         }
     }
 
+    private static void DrawBoxShadow(SKCanvas canvas, DrawBoxShadowCommand command)
+    {
+        var shadow = command.Shadow;
+
+        if (command.BorderBoxRect.IsEmpty || shadow.Color.A == 0)
+        {
+            return;
+        }
+
+        var borderBoxRect = new SKRect(
+            command.BorderBoxRect.X,
+            command.BorderBoxRect.Y,
+            command.BorderBoxRect.X + command.BorderBoxRect.Width,
+            command.BorderBoxRect.Y + command.BorderBoxRect.Height);
+
+        using var borderBoxRRect = new SKRoundRect();
+        borderBoxRRect.SetRectRadii(borderBoxRect, ToSkPoints(command.BorderBoxRadii));
+
+        using var paint = new SKPaint
+        {
+            Color = ToSkColor(shadow.Color),
+            IsAntialias = true,
+            Style = SKPaintStyle.Fill,
+        };
+
+        if (shadow.BlurRadius > 0f)
+        {
+            // Browsers commonly derive the Gaussian sigma as half the CSS blur radius.
+            paint.MaskFilter = SKMaskFilter.CreateBlur(SKBlurStyle.Normal, shadow.BlurRadius / 2f);
+        }
+
+        canvas.Save();
+
+        if (shadow.Inset)
+        {
+            // Per spec, an inset shadow is clipped to the border box, then painted as the area
+            // between a rect well outside the box and the spread/offset inner rect - i.e. the
+            // "ring" that is inside the border box but outside the (shrunk, moved) inner shape.
+            canvas.ClipRoundRect(borderBoxRRect, SKClipOperation.Intersect, antialias: true);
+
+            using var innerRRect = new SKRoundRect(borderBoxRRect);
+            ApplySpread(innerRRect, -shadow.SpreadRadius);
+            innerRRect.SetRectRadii(OffsetRect(innerRRect.Rect, shadow.OffsetX, shadow.OffsetY), innerRRect.Radii);
+
+            // A generous fixed outset keeps the even-odd path's outer boundary outside the
+            // blurred region in every direction, regardless of blur radius, spread, or offset.
+            var outerPadding = Math.Abs(shadow.OffsetX) + Math.Abs(shadow.OffsetY) + shadow.BlurRadius + Math.Abs(shadow.SpreadRadius) + 32f;
+            var outerRect = SKRect.Inflate(borderBoxRect, outerPadding, outerPadding);
+
+            using var path = new SKPath { FillType = SKPathFillType.EvenOdd };
+            path.AddRect(outerRect, SKPathDirection.Clockwise);
+            path.AddRoundRect(innerRRect, SKPathDirection.Clockwise);
+
+            canvas.DrawPath(path, paint);
+        }
+        else
+        {
+            // Clip OUT the border box's own shape so a transparent-background box does not show
+            // the shadow bleeding through its own interior, per spec.
+            canvas.ClipRoundRect(borderBoxRRect, SKClipOperation.Difference, antialias: true);
+
+            using var shadowRRect = new SKRoundRect(borderBoxRRect);
+            ApplySpread(shadowRRect, shadow.SpreadRadius);
+            shadowRRect.SetRectRadii(OffsetRect(shadowRRect.Rect, shadow.OffsetX, shadow.OffsetY), shadowRRect.Radii);
+
+            canvas.DrawRoundRect(shadowRRect, paint);
+        }
+
+        canvas.Restore();
+    }
+
+    /// <summary>
+    /// Grows or shrinks a rounded rect by a `box-shadow` spread amount, which may be negative
+    /// (shrink) - routed to <see cref="SKRoundRect.Inflate(float, float)"/> or
+    /// <see cref="SKRoundRect.Deflate(float, float)"/> explicitly, since neither is verified to
+    /// accept a negative argument as "the other operation".
+    /// </summary>
+    private static void ApplySpread(SKRoundRect rrect, float spread)
+    {
+        if (spread >= 0f)
+        {
+            rrect.Inflate(spread, spread);
+        }
+        else
+        {
+            rrect.Deflate(-spread, -spread);
+        }
+    }
+
+    private static SKRect OffsetRect(SKRect rect, float dx, float dy) =>
+        new(rect.Left + dx, rect.Top + dy, rect.Right + dx, rect.Bottom + dy);
+
     private static void DrawFillRect(SKCanvas canvas, FillRectCommand command)
     {
         if (command.Rect.IsEmpty)
@@ -79,9 +390,53 @@ private static void DrawFillRect(SKCanvas canvas, FillRectCommand command)
             command.Rect.X + command.Rect.Width,
             command.Rect.Y + command.Rect.Height);
 
-        canvas.DrawRect(rect, paint);
+        if (command.Radii.IsZero)
+        {
+            canvas.DrawRect(rect, paint);
+        }
+        else
+        {
+            using var roundRect = new SKRoundRect();
+            roundRect.SetRectRadii(rect, ToSkPoints(command.Radii));
+            canvas.DrawRoundRect(roundRect, paint);
+        }
     }
 
+    private static void DrawStrokeRoundedRect(SKCanvas canvas, StrokeRoundedRectCommand command)
+    {
+        if (command.Rect.IsEmpty || command.Color.A == 0 || command.StrokeWidth <= 0f)
+        {
+            return;
+        }
+
+        var rect = new SKRect(
+            command.Rect.X,
+            command.Rect.Y,
+            command.Rect.X + command.Rect.Width,
+            command.Rect.Y + command.Rect.Height);
+
+        using var roundRect = new SKRoundRect();
+        roundRect.SetRectRadii(rect, ToSkPoints(command.Radii));
+
+        using var paint = new SKPaint
+        {
+            Color = ToSkColor(command.Color),
+            IsAntialias = true,
+            Style = SKPaintStyle.Stroke,
+            StrokeWidth = command.StrokeWidth,
+        };
+
+        canvas.DrawRoundRect(roundRect, paint);
+    }
+
+    private static SKPoint[] ToSkPoints(RenderCornerRadii radii) =>
+    [
+        new SKPoint(radii.TopLeftX, radii.TopLeftY),
+        new SKPoint(radii.TopRightX, radii.TopRightY),
+        new SKPoint(radii.BottomRightX, radii.BottomRightY),
+        new SKPoint(radii.BottomLeftX, radii.BottomLeftY),
+    ];
+
     private static SKPaint CreateFillPaint(RenderPaint paint, RenderRect rect)
     {
         return paint switch
@@ -93,10 +448,106 @@ private static SKPaint CreateFillPaint(RenderPaint paint, RenderRect rect)
                 Style = SKPaintStyle.Fill,
             },
             RenderGradientPaint gradientPaint => CreateGradientPaint(gradientPaint.Gradient, rect),
+            RenderImagePaint imagePaint => CreateImagePaint(imagePaint, rect),
             _ => throw new NotSupportedException($"Unsupported paint type: {paint.GetType().Name}"),
         };
     }
 
+    /// <summary>
+    /// Builds a `background-image: url(...)` paint as a tiled/positioned image shader, resolving
+    /// <see cref="RenderImagePaint.Size"/> and the position components against <paramref name="rect"/>
+    /// - the box's own final geometry, not known when the paint was constructed (see
+    /// <see cref="RenderImagePaint"/>'s own remarks). This mirrors <c>SvgPatternBuilder</c>'s
+    /// tile-to-user-space matrix technique: build the shader in the image's own natural pixel space,
+    /// then let a constructor-time <see cref="SKMatrix"/> position and scale it - not the inverse
+    /// (the same "local space maps directly into world space" behavior already verified for the
+    /// gradient shaders above).
+    /// </summary>
+    private static SKPaint CreateImagePaint(RenderImagePaint imagePaint, RenderRect rect)
+    {
+        var paint = new SKPaint
+        {
+            IsAntialias = true,
+            Style = SKPaintStyle.Fill,
+        };
+
+        if (rect.Width <= 0f || rect.Height <= 0f)
+        {
+            return paint;
+        }
+
+        using var data = SKData.CreateCopy(imagePaint.Image.Data);
+        using var image = SKImage.FromEncodedData(data);
+
+        if (image is null || image.Width <= 0 || image.Height <= 0)
+        {
+            return paint;
+        }
+
+        var (drawWidth, drawHeight) = ResolveBackgroundImageSize(imagePaint.Size, image.Width, image.Height, rect.Width, rect.Height);
+
+        if (drawWidth <= 0f || drawHeight <= 0f)
+        {
+            return paint;
+        }
+
+        var originX = rect.X + (imagePaint.PositionX.Percentage * (rect.Width - drawWidth)) + imagePaint.PositionX.OffsetPixels;
+        var originY = rect.Y + (imagePaint.PositionY.Percentage * (rect.Height - drawHeight)) + imagePaint.PositionY.OffsetPixels;
+
+        var localMatrix = new SKMatrix(
+            drawWidth / image.Width, 0f, originX,
+            0f, drawHeight / image.Height, originY,
+            0f, 0f, 1f);
+
+        // `no-repeat` uses Decal (transparent outside the single placed tile), not Clamp - Clamp
+        // would smear the image's edge pixels across the rest of the box instead of leaving it
+        // uncovered, which is what CSS actually specifies for a non-repeating axis.
+        var tileX = imagePaint.RepeatX ? SKShaderTileMode.Repeat : SKShaderTileMode.Decal;
+        var tileY = imagePaint.RepeatY ? SKShaderTileMode.Repeat : SKShaderTileMode.Decal;
+
+        paint.Shader = SKShader.CreateImage(image, tileX, tileY, localMatrix);
+        return paint;
+    }
+
+    /// <summary>
+    /// Resolves a `background-size` value against the image's natural pixel size and the box's
+    /// rendered rect, matching the CSS `cover`/`contain`/explicit-axis sizing algorithms.
+    /// </summary>
+    private static (float Width, float Height) ResolveBackgroundImageSize(RenderBackgroundSize size, int naturalWidth, int naturalHeight, float boxWidth, float boxHeight)
+    {
+        switch (size.Kind)
+        {
+            case RenderBackgroundSizeKind.Cover:
+            {
+                var scale = Math.Max(boxWidth / naturalWidth, boxHeight / naturalHeight);
+                return (naturalWidth * scale, naturalHeight * scale);
+            }
+            case RenderBackgroundSizeKind.Contain:
+            {
+                var scale = Math.Min(boxWidth / naturalWidth, boxHeight / naturalHeight);
+                return (naturalWidth * scale, naturalHeight * scale);
+            }
+            case RenderBackgroundSizeKind.Explicit:
+            {
+                var aspect = (float)naturalWidth / naturalHeight;
+                float? width = size.Width.IsAuto ? null : size.Width.IsPercentage ? size.Width.Value * boxWidth : size.Width.Value;
+                float? height = size.Height.IsAuto ? null : size.Height.IsPercentage ? size.Height.Value * boxHeight : size.Height.Value;
+
+                if (width is null && height is null)
+                {
+                    return (naturalWidth, naturalHeight);
+                }
+
+                width ??= height!.Value * aspect;
+                height ??= width.Value / aspect;
+
+                return (width.Value, height.Value);
+            }
+            default:
+                return (naturalWidth, naturalHeight);
+        }
+    }
+
     private static SKPaint CreateGradientPaint(RenderGradient gradient, RenderRect rect)
     {
         var paint = new SKPaint
@@ -339,6 +790,28 @@ private static void DrawText(SKCanvas canvas, DrawTextCommand command, FontFaceS
         }
     }
 
+    private static void DrawTextShadow(SKCanvas canvas, DrawTextShadowCommand command, FontFaceSet fonts)
+    {
+        var font = new RenderFont(
+            command.FontFamily,
+            command.FontSize,
+            command.FontWeight,
+            command.IsItalic,
+            command.LetterSpacing,
+            fonts);
+
+        using var paint = SkiaTextShaping.CreateTextPaint(font);
+        paint.Color = ToSkColor(command.Color);
+
+        if (command.BlurRadius > 0f)
+        {
+            // Matches the same CSS-blur-radius-to-Gaussian-sigma approximation used for box-shadow.
+            paint.MaskFilter = SKMaskFilter.CreateBlur(SKBlurStyle.Normal, command.BlurRadius / 2f);
+        }
+
+        DrawTextWithLetterSpacing(canvas, paint, command.Text, command.X, command.Y, command.LetterSpacing);
+    }
+
     private static void DrawDecorationLine(SKCanvas canvas, SKPaint paint, float x, float y, float width, RenderTextDecorationStyle style)
     {
         switch (style)
diff --git a/src/Directory.Build.props b/src/Directory.Build.props
index 6d96d9b..ce2f514 100644
--- a/src/Directory.Build.props
+++ b/src/Directory.Build.props
@@ -2,7 +2,7 @@
   <PropertyGroup>
     <Description>Adds rendering functionality to the core AngleSharp library.</Description>
     <Product>AngleSharp.Renderer</Product>
-    <Version>0.3.0</Version>
+    <Version>0.4.0</Version>
     <Nullable>enable</Nullable>
     <LangVersion>latest</LangVersion>
     <SignAssembly>true</SignAssembly>