parity · backgrounds-gradients

background-clip — 100.00% verified visual parity PASS 1 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match background-clip-padding-box · padding-box

background-clip: padding-box should stop the background-color under a translucent border; background-clip is not implemented, so this is a known-gap fixture.

background-origin — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS visually equivalent · no rejecting defect · thresholded evidence 0.13% · raw 0.13% (628 px) background-origin-content-box · content-boxPASS via CSS-scale observation: sub-CSS shared-colour coverageAntialiasCoverageΔE 31.0

why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline

background-origin: content-box anchors the raster inside the padding box of a bordered, padded element.

regions (2 total; showing 2 representatives)

Complete component census grouped by dominant raster class; representative details are bounded.

Complete dominant-class aggregates

class	regions	pixels	union bbox (CSS px)	largest px	maximum magnitude
ColorErr	2	628	46,46 → 146,146	314	total 0.2% · largest 0.08%

Representative region details (worst-first)

class	bbox (CSS px)	area%	magnitude	reason
AntialiasCoverage	46,46 → 46,146	0.08	ΔRGB(122,124,125)	antialiasing coverage residue on a shared outline
AntialiasCoverage	146,46 → 146,146	0.08	ΔRGB(184,105,190)	antialiasing coverage residue on a shared outline

source · cases/backgrounds-gradients/background-origin-content-box.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>background-origin content-box</title>
6<style>
7  @page { size: 320px 160px; margin: 0; }
8  html { font-family: ParitySans; line-height: 1.5; }
9  * { margin: 0; box-sizing: border-box; }
10  html, body { background: #ffffff; }
11  .box {
12    width: 240px;
13    height: 160px;
14    padding: 40px;
15    border: 6px solid #263238;
16    background-color: #eceff1;
17    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAIElEQVR42mO4rK8PRJJll4CIAYWjV2sERF/rxYEIhQMABxYT6ZMR6l4AAAAASUVORK5CYII=");
18    background-repeat: no-repeat;
19    background-position: top left;
20    background-size: 100px 100px;
21    background-origin: content-box;
22  }
23</style>
24</head>
25<body>
26  <div class="box"></div>
27</body>
28</html>

PASS exact match background-origin-content-box-gradient · content-box-gradient-tile

background-origin:content-box anchors a fixed-size gradient tile at the content edge; catches implementations that apply origin only to raster images.

background-position — 100.00% verified visual parity PASS 1 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS visually equivalent · no rejecting defect · thresholded evidence 0.03% · raw 0.03% (251 px) background-position-keyword · bottom-right-keywordPASS via CSS-scale observation: sub-CSS shared-colour coverageAntialiasCoverageΔE 39.9

why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline

A no-repeat raster placed at the 'bottom right' keyword position inside a sized box.

regions (1 total; showing 1 representative)

Complete component census grouped by dominant raster class; representative details are bounded.

Complete dominant-class aggregates

class	regions	pixels	union bbox (CSS px)	largest px	maximum magnitude
ColorErr	1	251	160,160 → 160,240	251	total 0.04% · largest 0.04%

Representative region details (worst-first)

class	bbox (CSS px)	area%	magnitude	reason
AntialiasCoverage	160,160 → 160,240	0.04	ΔRGB(166,99,167)	antialiasing coverage residue on a shared outline

source · cases/backgrounds-gradients/background-position-keyword.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>background-position bottom right keyword</title>
6<style>
7  @page { size: 320px 240px; margin: 0; }
8  html { font-family: ParitySans; line-height: 1.5; }
9  * { margin: 0; box-sizing: border-box; }
10  html, body { background: #ffffff; }
11  .box {
12    width: 240px;
13    height: 240px;
14    background-color: #eceff1;
15    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAIElEQVR42mO4rK8PRJJll4CIAYWjV2sERF/rxYEIhQMABxYT6ZMR6l4AAAAASUVORK5CYII=");
16    background-repeat: no-repeat;
17    background-size: 80px 80px;
18    background-position: bottom right;
19  }
20</style>
21</head>
22<body>
23  <div class="box"></div>
24</body>
25</html>

background-size — 100.00% verified visual parity PASS 3 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match background-size-contain · contain

background-size: contain scales the raster to fit within the box, left-aligned, leaving base color visible.

PASS exact match background-size-cover · cover

background-size: cover scales the raster to fill the box, cropping overflow, centered.

PASS exact match background-size-length · explicit-length

background-size with an explicit 120px x 80px length, no-repeat, top-left.

conic-gradient — 100.00% verified visual parity PASS 7 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match conic-gradient-at-position · at-position

Four-quadrant conic-gradient with its center anchored at 30%/30%.

PASS exact match conic-gradient-basic · four-quadrant-sweep

Four-quadrant conic-gradient sweep, rendered via a sector fan clipped to the box.

PASS exact match conic-gradient-color-hint · color-hint

A standalone conic-gradient color hint shifts the angular interpolation midpoint late in the turn; catches hint rejection or ignored hints.

PASS exact match conic-gradient-edge-offset-position · edge-offset-position

conic-gradient() accepts a four-value edge-offset at-position from right and bottom; catches center fallback or parse failure.

PASS exact match conic-gradient-from-angle · from-angle

Four-quadrant conic-gradient rotated by a 45deg 'from' start angle.

PASS exact match conic-gradient-hard-stops · hard-stops-pie

Three-wedge hard-stop conic-gradient pie chart (deterministic 120deg sectors).

PASS exact match conic-gradient-turn-rad-stops · turn-radian-stop-units

conic-gradient color-stop positions accept turn and rad angle units in the same list; catches degree-only parsers.

linear-gradient — 100.00% verified visual parity PASS 13 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match linear-gradient-alpha-stops · alpha-stops

Transparent-to-opaque red gradient composites over a blue parent; catches gradient painters that drop alpha from color stops.

PASS exact match linear-gradient-angle-90deg · angle-90deg

Two-stop linear-gradient using an explicit 90deg angle (paints left-to-right).

PASS exact match linear-gradient-authored-endpoints · authored-endpoint-plateaus

Two authored stops at 20% and 80% keep constant endpoint plateaus instead of stretching interpolation over the full domain.

PASS exact match linear-gradient-calc-stops · calc-color-stop-positions

linear-gradient color stops accept calc() length-percentage positions around the midpoint; catches literal-percentage-only parsers.

PASS exact match linear-gradient-color-hint · interpolation-hint

A standalone 20% color interpolation hint moves the red/blue midpoint left; catches gradient parsers that ignore hints or drop the gradient.

PASS exact match linear-gradient-hard-stops · hard-color-stops

Hard color-stop linear-gradient (two stops at 50%) producing a deterministic sharp 50/50 split.

PASS exact match linear-gradient-multi-stop · three-stops-percent

Three-stop linear-gradient with explicit 0%/50%/100% color-stop positions, to right.

PASS exact match linear-gradient-oklab-interpolation · oklab-interpolation-method

linear-gradient() accepts explicit `in oklab` interpolation syntax. Chromium's PDF print path currently rasterizes this control identically to explicit sRGB, so the fixture does not claim an unobservable oracle distinction.

PASS exact match linear-gradient-out-of-range-stops · out-of-range-color-stops

Legal -50% and 150% stops influence the visible 0%..100% interval without being clamped before interpolation.

PASS exact match linear-gradient-premultiplied-alpha · premultiplied-alpha-interpolation

Transparent black to opaque red interpolates in premultiplied sRGBA and therefore avoids a gray halo over white.

PASS exact match linear-gradient-srgb-interpolation · srgb-interpolation-method

Control fixture for interpolation syntax: the same geometry, endpoints, and border as the Oklab fixture, with explicit `in srgb`.

PASS exact match linear-gradient-to-corner · to-bottom-right

Two-stop linear-gradient using the 'to bottom right' corner keyword on a square box.

PASS exact match linear-gradient-to-side · to-bottom-side

Two-stop linear-gradient using the 'to bottom' side keyword on a tall box.

multiple-backgrounds — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS visually equivalent · no rejecting defect · thresholded evidence 0.08% · raw 0.08% (563 px) multiple-backgrounds-layered · image-over-gradientPASS via CSS-scale observation: sub-CSS shared-colour coverageAntialiasCoverageΔE 45.0

why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline

Two comma-separated background layers (a raster over a linear-gradient) with per-layer position/size; multiple backgrounds are not implemented, so this is an aspirational known-gap fixture.

regions (1 total; showing 1 representative)

Complete component census grouped by dominant raster class; representative details are bounded.

Complete dominant-class aggregates

class	regions	pixels	union bbox (CSS px)	largest px	maximum magnitude
ColorErr	1	563	0,0 → 90,90	563	total 0.1% · largest 0.1%

Representative region details (worst-first)

class	bbox (CSS px)	area%	magnitude	reason
AntialiasCoverage	0,0 → 90,90	0.1	ΔRGB(-165,-40,3)	antialiasing coverage residue on a shared outline

source · cases/backgrounds-gradients/multiple-backgrounds-layered.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>multiple comma-separated background layers</title>
6<style>
7  @page { size: 320px 240px; margin: 0; }
8  html { font-family: ParitySans; line-height: 1.5; }
9  * { margin: 0; box-sizing: border-box; }
10  html, body { background: #ffffff; }
11  .box {
12    width: 240px;
13    height: 240px;
14    background-color: #37474f;
15    background-image:
16      url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAIElEQVR42mO4rK8PRJJll4CIAYWjV2sERF/rxYEIhQMABxYT6ZMR6l4AAAAASUVORK5CYII="),
17      linear-gradient(to bottom, #ffd600, #00bcd4);
18    background-repeat: no-repeat, no-repeat;
19    background-position: top left, bottom right;
20    background-size: 90px 90px, 120px 120px;
21  }
22</style>
23</head>
24<body>
25  <div class="box"></div>
26</body>
27</html>

PASS exact match multiple-gradient-layers · two-gradient-layers

Two gradient background layers use independent size, position, repeat, and paint order; catches one-slot gradient storage or shared geometry.

radial-gradient — 100.00% verified visual parity PASS 12 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match radial-gradient-at-position · circle-at-25-25

Circular radial-gradient anchored at the 25%/25% position (off-center).

PASS exact match radial-gradient-circle-center · circle-at-center

Centered circular two-stop radial-gradient (the shape ironpress natively supports).

PASS exact match radial-gradient-closest-corner-offcenter · closest-corner-offcenter

An off-center radial-gradient(circle closest-corner) sizes the hard transition by nearest-corner distance; catches aliases to side or far-corner sizing.

PASS exact match radial-gradient-closest-side · circle-closest-side

Circular radial-gradient sized to the closest side of a non-square box.

PASS exact match radial-gradient-color-hint · color-hint

A standalone radial-gradient color hint shifts the red/blue interpolation midpoint toward the outer edge; catches hint rejection or ignored hints.

PASS exact match radial-gradient-edge-offset-position · edge-offset-position

radial-gradient() accepts a four-value edge-offset at-position from right and bottom; catches center fallback or parse failure.

PASS exact match radial-gradient-ellipse-corner · ellipse-at-top-left

Elliptical radial-gradient positioned at the top-left corner; ironpress only paints centered circles so shape/position are not honored.

PASS exact match radial-gradient-ellipse-explicit · ellipse-explicit-radii

Elliptical radial-gradient with explicit 120px x 60px radii centered in the box.

PASS exact match radial-gradient-farthest-corner-offcenter · farthest-corner-offcenter

An off-center radial-gradient(circle farthest-corner) sizes the hard transition by farthest-corner distance; catches farthest-side aliases.

PASS exact match radial-gradient-farthest-side · circle-farthest-side

Circular radial-gradient sized to the farthest side of a non-square box.

PASS exact match radial-gradient-sized-px · explicit-pixel-size

Radial-gradient with an explicit 60px circle radius over a solid base; ironpress ignores explicit size/extent so the radius will not match Chrome.

PASS exact match radial-gradient-two-position-percent-stops · two-position-percent-stops

radial-gradient two-position percentage stops create crisp yellow, red, and blue rings; catches smooth interpolation or dropped range stops.

repeating-conic-gradient — 100.00% verified visual parity PASS 1 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match repeating-conic-gradient · wedges

Repeating-conic-gradient producing alternating 30deg wedges around the center.

repeating-linear-gradient — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match repeating-linear-gradient · stripes

Repeating-linear-gradient producing evenly spaced vertical stripes (10% period).

PASS exact match repeating-linear-gradient-px-stops · length-stops

repeating-linear-gradient with 12px hard color-stop ranges creates fixed-width stripes; catches percentage-only stop handling.

repeating-radial-gradient — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match repeating-radial-gradient · rings

Repeating-radial-gradient producing concentric rings (10% period circle).

PASS exact match repeating-radial-gradient-px-ranges · length-range-stops

repeating-radial-gradient with 10px two-position stop ranges creates crisp rings; catches percentage-only or non-repeating fallback.

backgrounds-gradients — 100.00% verified visual parity

background-clip — 100.00% verified visual parity PASS 1 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

background-origin — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

Complete dominant-class aggregates

Representative region details (worst-first)

background-position — 100.00% verified visual parity PASS 1 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

Complete dominant-class aggregates

Representative region details (worst-first)

background-size — 100.00% verified visual parity PASS 3 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

conic-gradient — 100.00% verified visual parity PASS 7 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

linear-gradient — 100.00% verified visual parity PASS 13 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

multiple-backgrounds — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

Complete dominant-class aggregates

Representative region details (worst-first)

radial-gradient — 100.00% verified visual parity PASS 12 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

repeating-conic-gradient — 100.00% verified visual parity PASS 1 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

repeating-linear-gradient — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

repeating-radial-gradient — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑