transforms — 100.00% verified visual parity

← all categories · PASS 44 · FAIL 0 · REFERENCE-DISPUTED 0 · 44 total · 300 DPI

diff colours:MissingExtraColorErrMatchFull-page diff: matching and per-channel ≤1.0% pixels are blank; coloured classes are same-coordinate above-floor evidence. Exact RGBA mismatch remains numeric.

show PASS 44status class min diff% sort

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

PASS exact match transforms-individual-transform-box-content · translate-rotate-transform-box-content

Individual translate and rotate properties compose around transform-box:content-box with transform-origin:0 0; catches shorthand-only and border-box-origin transform implementations.

transform — 100.00% verified visual parity PASS 28 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS visually equivalent · no rejecting defect · thresholded evidence 0.000232% · raw 0.000232% (1 px) transforms-rotated-repeating-background · rotated-repeating-backgroundPASS via CSS-scale observation: sub-CSS shared-colour coverageAntialiasCoverageΔE 1.8

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

A rotated and non-uniformly scaled box keeps its repeating image cell in the element's transformed coordinate space; catches page-space pattern resources that ignore the element CTM.

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	1	116,99 → 116,99	1	total 0.000232% · largest 0.000232%

Representative region details (worst-first)

class	bbox (CSS px)	area%	magnitude	reason
AntialiasCoverage	116,99 → 116,99	0.000232	ΔRGB(8,0,-1)	antialiasing coverage residue on a shared outline

source · cases/transforms/transforms-rotated-repeating-background.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>transformed repeating image background</title>
6<style>
7  @page { size: 240px 184px; margin: 0; }
8  * { margin: 0; box-sizing: border-box; }
9  html, body { background: #f4f1e8; }
10  .box {
11    width: 132px;
12    height: 84px;
13    margin: 48px 54px;
14    border: 5px solid #181818;
15    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAIElEQVR42mO4rK8PRJJll4CIAYWjV2sERF/rxYEIhQMABxYT6ZMR6l4AAAAASUVORK5CYII=");
16    background-size: 18px 14px;
17    background-repeat: repeat;
18    transform: rotate(17deg) scale(1.08, .92);
19    transform-origin: 31% 63%;
20  }
21</style>
22</head>
23<body>
24  <div class="box"></div>
25</body>
26</html>

PASS exact match transforms-compound-order · compound-order

Compound order dependence: translate() rotate() composes differently from rotate() translate(); the two boxes land in distinct places.

PASS exact match transforms-compound-rotate-translate · compound-rotate-translate

Chained transform functions translate(...) rotate(...) compose left-to-right in the box coordinate space. Aspirational: parse_transform returns a single Transform, so chaining is unsupported.

PASS exact match transforms-compound-scale-translate · compound-scale-translate

scale(2) translate(40px, 20px): the translation that follows the scale is itself scaled, and the box is twice as large.

PASS exact match transforms-invalid-unitless-angle-is-ignored · invalid-unitless-angle

A non-zero unitless rotate() angle is syntactically invalid, so the declaration is discarded and the green target stays over the red reference. Catches permissive parsers that reinterpret rotate(45) as rotate(45deg).

PASS exact match transforms-invalid-unitless-translation-is-ignored · invalid-unitless-translation

A non-zero unitless translate() component is syntactically invalid, so the declaration is discarded and the green target stays over the red reference. Catches treating bare translation numbers as points or pixels.

PASS exact match transforms-matrix · matrix

transform: matrix(a,b,c,d,e,f) applies a 2D affine matrix combining scale, shear, and translate in one function. Aspirational: matrix() is not parsed by ironpress.

PASS exact match transforms-none-reset · none-reset

transform: none is an explicit reset: a later rule overriding an earlier transform with none leaves the box untransformed in its in-flow slot.

PASS exact match transforms-rotate · rotate

transform: rotate() turns the box clockwise about its center (default transform-origin) without disturbing layout flow.

PASS exact match transforms-rotate-negative · rotate-negative

transform: rotate(-30deg) turns the box counter-clockwise about its center.

PASS exact match transforms-rotate-rad · rotate-rad

transform: rotate(0.5236rad) == rotate(30deg); the radian angle unit is converted before rotating.

PASS exact match transforms-rotate-turn · rotate-turn

transform: rotate(0.25turn) == rotate(90deg); the turn angle unit is converted before rotating about the box center.

PASS exact match transforms-scale · scale

transform: scale() enlarges the box uniformly about its center (default transform-origin) without changing layout flow.

PASS exact match transforms-scale-negative · scale-negative

transform: scale(-1, 1) mirrors the box horizontally about its center, swapping its left/right halves.

PASS exact match transforms-scale-omitted · scale-single-arg

transform: scale(1.5) with the second argument omitted scales both axes uniformly.

PASS exact match transforms-scale-percent · scale-percent

transform:scale(150%,50%) accepts percentage scale factors and scales from a top-left origin; catches parsers that accept only numeric scale factors and drop the transform.

PASS exact match transforms-scale-x · scaleX

transform: scaleX() stretches the box horizontally about its center.

PASS exact match transforms-scale-y · scaleY

transform: scaleY() stretches the box vertically about its center.

PASS exact match transforms-skew · skew

transform: skew() shears the box along X and Y about its center, turning the rectangle into a parallelogram. Aspirational: skew is absent from the ironpress Transform enum and parser.

PASS exact match transforms-skew-x · skewX

transform: skewX(20deg) shears the box horizontally about its center into a parallelogram.

PASS exact match transforms-skew-y · skewY

transform: skewY(20deg) shears the box vertically about its center into a parallelogram.

PASS exact match transforms-translate · translate

transform: translate(x, y) shifts a positioned box right and down from its in-flow slot without affecting surrounding layout.

PASS exact match transforms-translate-em · translate-em

transform: translate(3em, 2em) resolves em length args against the element's own font-size.

PASS exact match transforms-translate-percent · translate-percent

transform: translate(50%, 50%) resolves percentages against the element's OWN border box (width for X, height for Y), shifting the box by half its own size.

PASS exact match transforms-translate-x · translateX

transform: translateX() shifts the box horizontally only, leaving its vertical position unchanged.

PASS exact match transforms-translate-x-percent · translateX-percent

transform: translateX(100%) shifts the box right by its own width (percentage relative to border-box width).

PASS exact match transforms-translate-y · translateY

transform: translateY() shifts the box vertically only, leaving its horizontal position unchanged.

PASS exact match transforms-translate-y-percent · translateY-percent

transform: translateY(100%) shifts the box down by its own height (percentage relative to border-box height).

transform-3d — 100.00% verified visual parity PASS 9 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match transforms-matrix3d-translate · matrix3d-translate

matrix3d() translation components move the green box down and right from the red reference; catches 2D-only parsers that drop matrix3d.

PASS exact match transforms-origin-z-offset · transform-origin-z-offset

A three-value transform-origin with a Z offset changes the rotateY hinge; catches ignoring the third transform-origin component.

PASS exact match transforms-perspective-origin · perspective-origin

perspective-origin changes the projection center for otherwise identical rotateY boxes; catches treating both scenes as the same projection.

PASS exact match transforms-perspective-rotate-x · perspective-rotate-x

perspective() rotateX() projects the box as a 3D quadrilateral; catches 2D flattening, perspective drops, or treating rotateX as a plain scale.

PASS exact match transforms-perspective-translate-z · perspective-translate-z

A parent perspective makes a translateZ child render larger than the red reference; catches ignoring either the perspective property or the Z translation.

PASS exact match transforms-preserve-3d-depth-order · preserve-3d-depth-order

transform-style:preserve-3d lets an earlier translateZ child paint above a later flat sibling; catches flattening or source-order-only painting.

PASS exact match transforms-rotate3d-axis · rotate3d-axis

rotate3d(1,1,0,62deg) rotates around an arbitrary 3D axis under perspective; catches dropping rotate3d or rendering the element as an unprojected rectangle.

PASS exact match transforms-scale3d-rotate-y · scale3d-rotate-y

scale3d's Z component changes the projected shape of a rotateY plane; catches dropping scale3d or using a flat 2D projection.

PASS exact match transforms-translate3d-perspective · translate3d-perspective

translate3d(x,y,z) combines planar movement with perspective enlargement; catches dropping translate3d or ignoring its Z component.

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

PASS exact match transforms-origin-bottom-right · bottom-right

transform-origin: bottom right pivots a rotation about the box's bottom-right corner.

PASS exact match transforms-origin-keyword-length · keyword-length

Two-value transform-origin mixing a keyword and a length (left 20px) pivots a rotation about that anchor on the left edge.

PASS exact match transforms-origin-length · length

transform-origin with px length values pivots a scale about a point measured from the box top-left.

PASS exact match transforms-origin-percent · percent

transform-origin: 100% 0 pivots a scale about the box's top-right corner.

PASS exact match transforms-origin-scale-corner · scale-pivot

transform-origin affects the scale pivot: with top-left origin the box grows down/right while its top-left corner stays anchored.

PASS exact match transforms-origin-top-left · top-left

transform-origin: top left moves the rotation pivot from the box center to its top-left corner, changing where a rotate() lands. Aspirational: ironpress has no transform-origin parse and always pivots about the default origin.